/* PREMIUM TRADING DASHBOARD */
/* Fonts */
/* Apr 28, 2026 — font unification: dropped Quicksand + Manrope + JetBrains Mono
   (loaded but unused or replaceable). Inter only (300-800) → ~600 KB bandwidth saved. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* --- FONTS (Apr 28, 2026 unification) --- */
    /* Used by inline styles via fontFamily: 'var(--font-primary)' in dash_utils.py
       and any other Python-side component. Single source of truth → change here
       to swap font globally without hunting through Python files. */
    --font-primary: 'Inter', sans-serif;
    --font-mono: 'Inter', monospace;  /* Fallback to Inter; future tabular nums could switch to JetBrains Mono */

    /* --- DARK THEME (Refined Gradient Site Identity) --- */
    --bg-primary: #050a14;
    --bg-secondary: #020c1b;
    --bg-card: rgba(255, 255, 255, 0.03);

    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-tertiary: #64748b;
    --border-light: rgba(255, 255, 255, 0.08);

    --primary-blue: #3b82f6;
    /* Lighter blue for dark mode */
    --cyan-highlight: #22d3ee;
    /* Soft Cyan, not Neon */
    --logo-blue-deep: #2040a0;
    --logo-blue: #2070b0;
    --logo-cyan: #10c0b0;
    --logo-ice: #e0ffff;

    /* Gradients (Dark Mode: More coherent, less harsh) */
    --gradient-logo-title: linear-gradient(92deg, var(--logo-ice) 0%, var(--logo-blue) 48%, var(--logo-cyan) 100%);
    --gradient-logo-panel: linear-gradient(135deg, rgba(32, 64, 160, 0.18) 0%, rgba(32, 112, 176, 0.10) 48%, rgba(16, 192, 176, 0.14) 100%);
    --gradient-brand: var(--gradient-logo-title);
    --gradient-text: var(--gradient-logo-title);
    --gradient-primary: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
    --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);

    --color-gain-start: #10b981;
    --color-gain-end: #0ea5e9;
    /* Emerald to Sky Blue */
    --gradient-gain: linear-gradient(135deg, var(--color-gain-start) 0%, var(--color-gain-end) 100%);

    --color-loss-start: #ef4444;
    --color-loss-end: #b91c1c;
    --gradient-loss: linear-gradient(135deg, var(--color-loss-start) 0%, var(--color-loss-end) 100%);

    --color-accent: #3b82f6;
    /* Blue Accent, NOT Cyan */
    --color-accent-hover: #2563eb;

    --shadow-card: 0 4px 25px -5px rgba(0, 0, 0, 0.5);
    --glass-blur: blur(12px);

    /* Card component vars (used by constants.py inline styles) */
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-radius: 16px;
    --card-shadow: 0 4px 25px -5px rgba(0, 0, 0, 0.5);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-header-bg: transparent;

    /* Input component vars */
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(255, 255, 255, 0.12);
    --input-radius: 8px;

    /* Button vars */
    --button-radius: 50px;
    --button-shadow: none;
}

[data-theme="light"] {
    /* --- LIGHT THEME (Clean Blue / Professional) --- */
    --bg-primary: #f0f7ff;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.7);

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-tertiary: #94a3b8;
    --border-light: #e2e8f0;

    --primary-blue: #0066ff;
    --cyan-highlight: #0891b2;
    /* Toned down from #06b6d4 */
    --logo-blue-deep: #2040a0;
    --logo-blue: #2070b0;
    --logo-cyan: #10a8b0;
    --logo-ice: #efffff;

    /* Gradients */
    --gradient-logo-title: linear-gradient(92deg, var(--logo-blue-deep) 0%, var(--logo-blue) 48%, var(--logo-cyan) 100%);
    --gradient-logo-panel: linear-gradient(135deg, rgba(32, 64, 160, 0.09) 0%, rgba(32, 112, 176, 0.08) 48%, rgba(16, 168, 176, 0.10) 100%);
    --gradient-brand: var(--gradient-logo-title);
    /* Blue -> Deep Cyan */
    --gradient-text: var(--gradient-logo-title);

    /* App Specific */
    --color-gain-start: #059669;
    --color-gain-end: #0d9488;
    /* Teal instead of bright cyan */
    --gradient-gain: linear-gradient(135deg, var(--color-gain-start) 0%, var(--color-gain-end) 100%);

    --color-loss-start: #dc2626;
    --color-loss-end: #991b1b;
    --gradient-loss: linear-gradient(135deg, var(--color-loss-start) 0%, var(--color-loss-end) 100%);

    --color-accent: #2563eb;
    /* Professional Blue (Royal) */
    --color-accent-hover: #1d4ed8;

    --glass-blur: blur(12px);
    --shadow-card: 0 4px 20px -2px rgba(148, 163, 184, 0.2);

    /* Card / Input overrides for light */
    --card-bg: rgba(255, 255, 255, 0.7);
    --card-radius: 16px;
    --card-shadow: 0 4px 20px -2px rgba(148, 163, 184, 0.2);
    --card-border: #e2e8f0;
    --card-header-bg: transparent;
    --input-bg: #ffffff;
    --input-border: #e2e8f0;
    --input-radius: 8px;
    --button-radius: 50px;
    --button-shadow: none;
}

/* Apply Gradient to all major headers globally */
h1,
h2,
h3,
.gradient-title {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    /* Required for gradient text sometimes */
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    overflow-x: hidden;
    /* For blobs */
}

/* Background Animation Elements */
.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    /* Default: Dark mode (vibrant) */
    animation: float 10s infinite ease-in-out;
    will-change: transform;
    backface-visibility: hidden;
}

[data-theme="light"] .blob {
    opacity: 0.15;
    /* Light mode: very subtle */
}

.blob-1 {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: var(--primary-blue);
    animation-delay: 0s;
}

.blob-2 {
    bottom: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, var(--cyan-highlight), var(--primary-blue));
    animation-delay: -5s;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, -30px);
    }
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

/* --- COMPONENTS (Standard Bootstrap Overrides - SAFE) --- */
/* --- COMPONENTS (Glassmorphism) --- */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 20px;
    /* Site style */
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-card);
    margin-bottom: 24px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.card-header {
    border-bottom: 1px solid var(--border-light);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1.25rem 1.5rem;
    background: transparent;
    color: var(--text-primary);
}

/* Gradient text for card-header headings only (not icons/badges inside header) */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0;
}

/* Creation cockpit cards: make setup feel closer to strategy/community cards */
.creation-cockpit-card {
    background:
        radial-gradient(circle at top left, rgba(32, 217, 255, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(12, 23, 43, 0.92), rgba(20, 93, 116, 0.64)) !important;
    border: 1px solid rgba(95, 164, 210, 0.22) !important;
    overflow: hidden;
}

.creation-cockpit-card:hover {
    border-color: rgba(32, 217, 255, 0.36) !important;
}

.creation-cockpit-header {
    background:
        linear-gradient(135deg, rgba(9, 18, 34, 0.92), rgba(16, 92, 112, 0.42)) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    padding: 18px 20px !important;
}

.creation-cockpit-header-inner {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: space-between;
}

.creation-cockpit-kicker {
    color: #58a6ff;
    display: block;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.creation-cockpit-title {
    align-items: center;
    display: flex;
    font-size: 1.28rem;
    line-height: 1.15;
}

.creation-cockpit-copy {
    color: rgba(203, 213, 225, 0.82);
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.42;
    margin-top: 8px;
    max-width: none;
}

.creation-cockpit-pills {
    align-items: flex-end;
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.creation-cockpit-pill {
    background: rgba(32, 217, 255, 0.10);
    border: 1px solid rgba(32, 217, 255, 0.22);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.86);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 5px 9px;
    white-space: nowrap;
}

.creation-cockpit-pill.risk-pill {
    background: rgba(16, 185, 129, 0.11);
    border-color: rgba(16, 185, 129, 0.24);
}

.creation-cockpit-body {
    background: linear-gradient(180deg, rgba(8, 18, 36, 0.34), rgba(8, 18, 36, 0.08));
}

.creation-intent-note {
    align-items: flex-start;
    background: rgba(32, 217, 255, 0.08);
    border: 1px solid rgba(32, 217, 255, 0.16);
    border-radius: 14px;
    color: rgba(226, 232, 240, 0.88);
    display: none;
    font-size: 0.88rem;
    gap: 10px;
    line-height: 1.42;
    margin-bottom: 14px;
    padding: 10px 12px;
}

.creation-intent-note i {
    color: var(--cyan-highlight);
    margin-top: 2px;
}

.creation-advanced-toggle,
.creation-risk-toggle {
    color: rgba(226, 232, 240, 0.92) !important;
    text-transform: none !important;
}

.creation-advanced-toggle:hover,
.creation-risk-toggle:hover {
    color: #ffffff !important;
}

.simple-strategy-panel {
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 191, 154, 0.13), transparent 35%),
        linear-gradient(135deg, rgba(8, 18, 36, 0.74), rgba(17, 84, 108, 0.26));
    border: 1px solid rgba(0, 191, 154, 0.22);
    border-radius: 18px;
    margin-bottom: 18px;
    padding: 16px;
}

.simple-strategy-head {
    margin-bottom: 12px;
}

.simple-strategy-kicker {
    color: var(--cyan-highlight);
    display: block;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.simple-strategy-title {
    color: var(--text-primary);
    font-size: 1.08rem;
    font-weight: 900;
    margin: 0 0 5px;
}

.simple-strategy-copy {
    color: rgba(226, 232, 240, 0.74);
    font-size: 0.86rem;
    line-height: 1.45;
    margin: 0;
}

.simple-strategy-groups {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
}

.simple-strategy-group-panel {
    background:
        radial-gradient(circle at 12% 0%, rgba(32, 217, 255, 0.09), transparent 40%),
        linear-gradient(135deg, rgba(7, 18, 36, 0.84), rgba(12, 47, 74, 0.58));
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    padding: 12px;
}

.simple-strategy-group-panel--investment {
    border-color: rgba(96, 165, 250, 0.24);
}

.simple-strategy-group-panel--sequence {
    border-color: rgba(56, 189, 248, 0.24);
}

.simple-strategy-group-panel--macro {
    border-color: rgba(45, 212, 191, 0.26);
}

.simple-strategy-group-head {
    display: grid;
    gap: 5px;
    margin-bottom: 10px;
}

.simple-strategy-group-title {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.simple-strategy-group-copy {
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.72rem;
    line-height: 1.35;
}

.simple-strategy-options {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.simple-strategy-options--stack {
    grid-template-columns: 1fr;
}

.simple-strategy-option {
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    gap: 9px;
    min-height: 112px;
    padding: 12px;
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.simple-strategy-option:hover {
    background: rgba(32, 217, 255, 0.08);
    border-color: rgba(32, 217, 255, 0.34);
    transform: translateY(-1px);
}

.simple-strategy-radio {
    margin-top: 4px;
}

.simple-strategy-option-copy {
    display: grid;
    gap: 5px;
}

.simple-strategy-group-tag {
    align-self: flex-start;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 5px 8px;
    text-transform: uppercase;
    width: fit-content;
}

.simple-strategy-group-tag--investment {
    background: rgba(59, 130, 246, 0.13);
    border-color: rgba(96, 165, 250, 0.28);
    color: #bfdbfe;
}

.simple-strategy-group-tag--calendar {
    background: rgba(0, 191, 154, 0.13);
    border-color: rgba(45, 212, 191, 0.34);
    color: #99f6e4;
}

.simple-strategy-group-tag--sequence {
    background: rgba(14, 165, 233, 0.13);
    border-color: rgba(56, 189, 248, 0.34);
    color: #bae6fd;
}

.simple-strategy-group-tag--macro {
    background: rgba(20, 184, 166, 0.14);
    border-color: rgba(45, 212, 191, 0.36);
    color: #99f6e4;
}

.simple-strategy-option-copy strong {
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.2;
}

.simple-strategy-option-copy small {
    color: rgba(203, 213, 225, 0.74);
    font-size: 0.74rem;
    line-height: 1.35;
}

@media (max-width: 1180px) {
    .simple-strategy-groups {
        grid-template-columns: 1fr;
    }
}

.simple-strategy-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.simple-strategy-apply-btn.btn {
    align-items: center;
    background:
        radial-gradient(circle at 16% 0%, rgba(183, 255, 240, 0.24), transparent 42%),
        linear-gradient(135deg, rgba(8, 21, 42, 0.98), rgba(14, 83, 112, 0.92) 52%, rgba(0, 191, 154, 0.86)) !important;
    border: 1px solid rgba(183, 255, 240, 0.52) !important;
    border-radius: 999px;
    box-shadow:
        0 16px 34px rgba(0, 191, 154, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    color: #f8feff !important;
    display: inline-flex;
    font-weight: 900;
    gap: 2px;
    min-height: 44px;
    padding: 10px 18px;
    text-transform: none;
}

.simple-strategy-apply-btn.btn:hover,
.simple-strategy-apply-btn.btn:focus {
    background:
        radial-gradient(circle at 18% 0%, rgba(203, 255, 247, 0.32), transparent 44%),
        linear-gradient(135deg, rgba(11, 31, 58, 0.99), rgba(16, 105, 128, 0.95) 52%, rgba(0, 176, 148, 0.96)) !important;
    border-color: rgba(203, 255, 247, 0.72) !important;
    box-shadow:
        0 18px 42px rgba(32, 217, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.calendar-rule-block-panel {
    background:
        radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.15), transparent 34%),
        linear-gradient(135deg, rgba(5, 18, 34, 0.96), rgba(10, 66, 91, 0.88));
    border: 1px solid rgba(45, 212, 191, 0.22);
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(2, 8, 23, 0.22);
    margin: 18px 0 20px;
    padding: 18px;
}

.calendar-rule-block-head {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.calendar-rule-block-title {
    align-items: center;
    color: var(--text-primary);
    display: flex;
    gap: 8px;
}

.calendar-rule-block-title i {
    color: #22d3ee;
}

.calendar-rule-block-title h5 {
    font-size: 1.05rem;
    font-weight: 900;
    margin: 0;
}

.calendar-rule-block-copy {
    color: rgba(203, 213, 225, 0.76);
    font-size: 0.84rem;
    line-height: 1.45;
    margin: 0;
    max-width: 860px;
}

.calendar-rule-block-grid label {
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.calendar-rule-block-status {
    margin-top: 14px;
}

.simple-strategy-feedback {
    flex: 1 1 260px;
}

.simple-strategy-feedback .alert {
    border-radius: 14px;
    font-size: 0.82rem;
    padding: 9px 12px;
}

.decision-block-card {
    background:
        radial-gradient(circle at 3% 0%, rgba(32, 217, 255, 0.10), transparent 35%),
        linear-gradient(135deg, rgba(7, 18, 36, 0.94), rgba(13, 47, 76, 0.58)) !important;
    border: 1px solid rgba(95, 164, 210, 0.24) !important;
    border-radius: 20px !important;
    box-shadow: 0 18px 42px rgba(2, 8, 23, 0.20);
    padding: 18px !important;
}

.decision-block-header {
    align-items: flex-start;
    border-bottom: 1px solid rgba(148, 213, 255, 0.12);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
}

.decision-block-title {
    align-items: center;
    color: var(--text-primary) !important;
    display: flex;
    font-size: 1.08rem;
    font-weight: 950;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}

.decision-block-title-icon {
    color: var(--cyan-highlight);
    filter: drop-shadow(0 0 10px rgba(32, 217, 255, 0.28));
}

.decision-block-description {
    color: rgba(203, 213, 225, 0.72) !important;
    font-size: 0.86rem;
    line-height: 1.42;
    margin: 0;
}

.decision-block-delete-btn.btn {
    align-items: center;
    background: rgba(248, 113, 113, 0.08) !important;
    border: 1px solid rgba(248, 113, 113, 0.18) !important;
    border-radius: 999px;
    color: rgba(254, 202, 202, 0.84) !important;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 !important;
}

.decision-block-delete-btn.btn:hover,
.decision-block-delete-btn.btn:focus {
    background: rgba(248, 113, 113, 0.16) !important;
    border-color: rgba(248, 113, 113, 0.34) !important;
    color: #ffffff !important;
}

div[id^="condition-block-"] > .card {
    background:
        radial-gradient(circle at 0% 0%, rgba(70, 151, 255, 0.08), transparent 34%),
        rgba(8, 18, 36, 0.72) !important;
    border: 1px solid rgba(148, 213, 255, 0.14) !important;
    border-radius: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

div[id^="condition-block-"] .card-body {
    padding: 16px !important;
}

div[id^="condition-block-"] label,
.advanced-action-asset-label {
    color: rgba(183, 255, 240, 0.82) !important;
    font-size: 0.72rem;
    font-weight: 900 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.decision-add-condition-btn.btn,
.creation-add-block-btn.btn {
    align-items: center;
    background: rgba(15, 31, 58, 0.76) !important;
    border: 1px solid rgba(148, 213, 255, 0.34) !important;
    border-radius: 999px;
    color: #d9f3ff !important;
    display: inline-flex;
    font-weight: 900;
    min-height: 38px;
    padding: 8px 14px;
}

.decision-add-condition-btn.btn:hover,
.decision-add-condition-btn.btn:focus,
.creation-add-block-btn.btn:hover,
.creation-add-block-btn.btn:focus {
    background: rgba(20, 47, 85, 0.94) !important;
    border-color: rgba(32, 217, 255, 0.58) !important;
    box-shadow: 0 12px 28px rgba(15, 31, 58, 0.28);
    color: #ffffff !important;
    transform: translateY(-1px);
}

.decision-actions-card.card {
    background:
        radial-gradient(circle at 3% 0%, rgba(0, 191, 154, 0.10), transparent 34%),
        rgba(7, 18, 36, 0.76) !important;
    border: 1px solid rgba(0, 191, 154, 0.18) !important;
    border-radius: 18px !important;
    overflow: hidden;
}

.decision-actions-header {
    background: rgba(0, 191, 154, 0.08) !important;
    border-bottom: 1px solid rgba(0, 191, 154, 0.16) !important;
    color: rgba(235, 255, 250, 0.94) !important;
    font-size: 0.82rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    padding: 11px 14px !important;
    text-transform: uppercase;
}

.decision-actions-card-body {
    padding: 14px !important;
}

.decision-action-row {
    align-items: center;
    border-radius: 12px;
    padding: 4px 0;
}

.risk-lens-grid {
    display: none;
    gap: 8px;
    grid-template-columns: 1fr;
    margin-bottom: 14px;
}

.risk-lens-card {
    background: rgba(8, 18, 36, 0.46);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: auto;
    padding: 12px clamp(170px, 14vw, 220px) 12px 12px;
}

.risk-lens-card i {
    color: var(--cyan-highlight);
    font-size: 1.05rem;
}

.risk-lens-card strong {
    color: var(--text-primary);
    font-size: 0.9rem;
}

.risk-lens-card small {
    color: rgba(203, 213, 225, 0.70);
    font-size: 0.8rem;
    line-height: 1.34;
}

[data-theme="light"] .creation-cockpit-card {
    background:
        radial-gradient(circle at top left, rgba(8, 145, 178, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(232, 247, 255, 0.78)) !important;
}

[data-theme="light"] .creation-cockpit-header {
    background: linear-gradient(135deg, rgba(241, 248, 255, 0.94), rgba(226, 244, 250, 0.88)) !important;
}

[data-theme="light"] .creation-cockpit-copy,
[data-theme="light"] .creation-intent-note,
[data-theme="light"] .risk-lens-card small {
    color: #475569;
}

[data-theme="light"] .risk-lens-card {
    background: rgba(255, 255, 255, 0.72);
}

.creation-section-card {
    background:
        radial-gradient(circle at top left, rgba(32, 217, 255, 0.08), transparent 32%),
        linear-gradient(135deg, rgba(10, 20, 39, 0.94), rgba(17, 84, 108, 0.54)) !important;
    border: 1px solid rgba(95, 164, 210, 0.24) !important;
    box-shadow: 0 16px 34px rgba(2, 8, 23, 0.22) !important;
    overflow: hidden;
}

.creation-flow-intro {
    align-items: start;
    background:
        radial-gradient(circle at top left, rgba(32, 217, 255, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(8, 18, 36, 0.90), rgba(15, 87, 112, 0.46));
    border: 1px solid rgba(95, 164, 210, 0.24);
    border-radius: 22px;
    box-shadow: 0 18px 42px rgba(2, 8, 23, 0.24);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(300px, 0.82fr) minmax(610px, 1.18fr);
    margin-bottom: 22px;
    padding: 20px 22px;
}

.creation-flow-main {
    align-self: start;
    padding-top: 2px;
}

.creation-flow-kicker {
    color: var(--cyan-highlight);
    display: block;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.creation-flow-title {
    color: var(--text-primary);
    font-size: clamp(1.28rem, 1.8vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin: 0 0 8px;
}

.creation-flow-copy {
    color: rgba(226, 232, 240, 0.82);
    display: none !important;
    font-size: 0.98rem;
    line-height: 1.55;
    margin: 0;
    max-width: 760px;
}

.creation-flow-steps {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
    white-space: nowrap;
    width: 100%;
}

.creation-flow-arrow {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    height: 24px;
    justify-content: center;
    opacity: 0.78;
    position: relative;
    width: 28px;
}

.creation-flow-arrow::before {
    background: linear-gradient(90deg, rgba(70, 151, 255, 0.16), rgba(32, 217, 255, 0.78));
    border-radius: 999px;
    content: "";
    height: 2px;
    width: 22px;
}

.creation-flow-arrow::after {
    border-right: 2px solid rgba(32, 217, 255, 0.92);
    border-top: 2px solid rgba(32, 217, 255, 0.92);
    content: "";
    height: 7px;
    position: absolute;
    right: 3px;
    transform: rotate(45deg);
    width: 7px;
}

.creation-flow-controls {
    display: grid;
    gap: 0;
    justify-items: end;
    min-width: 0;
}

.creation-flow-step,
.creation-flow-step.btn {
    background: rgba(32, 217, 255, 0.10);
    border: 1px solid rgba(32, 217, 255, 0.22);
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.92);
    font-size: 0.74rem;
    font-weight: 900;
    padding: 8px 10px;
    text-decoration: none !important;
}

.creation-flow-step:hover,
.creation-flow-step:focus,
.creation-flow-step.btn:hover,
.creation-flow-step.btn:focus {
    background: rgba(32, 217, 255, 0.18);
    border-color: rgba(32, 217, 255, 0.38);
    color: #ffffff;
}

.creation-flow-step.is-active,
.creation-flow-step.btn.is-active {
    background: linear-gradient(135deg, rgba(0, 191, 154, 0.26), rgba(32, 217, 255, 0.18));
    border-color: rgba(0, 191, 154, 0.56);
    box-shadow: 0 10px 24px rgba(0, 191, 154, 0.14);
    color: #ffffff;
}

.creation-step-nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.creation-step-progress-summary {
    border-top: 1px solid rgba(148, 213, 255, 0.14);
    grid-column: 1 / -1;
    margin-top: 2px;
    min-width: 0;
    padding: 14px 0 0;
}

.creation-progress-grid {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: 1.2fr 1.15fr 1fr 1fr;
    min-width: 0;
}

.creation-progress-item {
    background:
        radial-gradient(circle at 0% 0%, rgba(32, 217, 255, 0.08), transparent 42%),
        rgba(15, 31, 58, 0.58);
    border: 1px solid rgba(148, 213, 255, 0.20);
    border-radius: 14px;
    cursor: pointer;
    min-width: 0;
    padding: 8px 10px;
    text-align: left;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
    width: 100%;
}

.creation-progress-item:hover,
.creation-progress-item:focus-visible {
    background:
        radial-gradient(circle at 0% 0%, rgba(32, 217, 255, 0.14), transparent 42%),
        rgba(20, 47, 85, 0.74);
    border-color: rgba(32, 217, 255, 0.42);
    box-shadow: 0 12px 26px rgba(2, 8, 23, 0.16);
    outline: none;
    transform: translateY(-1px);
}

.creation-progress-item.is-active {
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 191, 154, 0.18), transparent 42%),
        rgba(17, 84, 108, 0.66);
    border-color: rgba(0, 191, 154, 0.48);
    box-shadow: inset 0 0 0 1px rgba(183, 255, 240, 0.05);
}

.creation-progress-label {
    align-items: center;
    color: rgba(183, 255, 240, 0.78);
    display: flex;
    font-size: 0.68rem;
    font-weight: 900;
    gap: 3px;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.creation-progress-value {
    color: rgba(248, 250, 252, 0.94);
    display: block;
    font-size: 0.78rem;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creation-step-nav-btn.btn {
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.01em;
    min-width: 118px;
    padding: 8px 16px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

#creation-step-prev.btn,
[id$="-filter-reset"].btn {
    background: rgba(15, 31, 58, 0.82);
    border: 1px solid rgba(148, 213, 255, 0.40);
    color: #d9f3ff;
}

#creation-step-prev.btn:hover,
#creation-step-prev.btn:focus,
[id$="-filter-reset"].btn:hover,
[id$="-filter-reset"].btn:focus {
    background: rgba(20, 47, 85, 0.94);
    border-color: rgba(32, 217, 255, 0.58);
    box-shadow: 0 12px 28px rgba(15, 31, 58, 0.28);
    color: #ffffff;
    transform: translateY(-1px);
}

#creation-step-prev.btn:disabled,
[id$="-filter-reset"].btn:disabled {
    background: rgba(15, 31, 58, 0.72);
    border-color: rgba(148, 213, 255, 0.34);
    color: rgba(217, 243, 255, 0.72);
    opacity: 1;
}

#creation-step-next.btn {
    background:
        radial-gradient(circle at 18% 0%, rgba(183, 255, 240, 0.28), transparent 42%),
        linear-gradient(135deg, rgba(10, 25, 48, 0.98), rgba(13, 96, 119, 0.94) 54%, rgba(0, 154, 132, 0.96)) !important;
    border: 1px solid rgba(183, 255, 240, 0.56) !important;
    box-shadow:
        0 16px 34px rgba(0, 191, 154, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        inset 0 -18px 28px rgba(3, 12, 26, 0.16) !important;
    color: #f8feff !important;
    isolation: isolate;
    letter-spacing: 0.02em;
    overflow: hidden;
    position: relative;
    text-shadow: 0 1px 12px rgba(183, 255, 240, 0.14);
}

#creation-step-next.btn::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    content: "";
    inset: -50% auto -50% -38%;
    opacity: 0.42;
    position: absolute;
    transform: rotate(18deg);
    transition: left 0.34s ease, opacity 0.18s ease;
    width: 34%;
    z-index: -1;
}

#creation-step-next.btn:hover,
#creation-step-next.btn:focus {
    background:
        radial-gradient(circle at 22% 0%, rgba(203, 255, 247, 0.38), transparent 44%),
        linear-gradient(135deg, rgba(12, 33, 62, 0.99), rgba(16, 117, 137, 0.96) 54%, rgba(0, 176, 148, 0.98)) !important;
    border-color: rgba(203, 255, 247, 0.78) !important;
    box-shadow:
        0 18px 42px rgba(32, 217, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -18px 28px rgba(3, 12, 26, 0.12) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

#creation-step-next.btn:hover::after,
#creation-step-next.btn:focus::after {
    left: 108%;
    opacity: 0.68;
}

#creation-step-next.btn:disabled {
    background: rgba(15, 31, 58, 0.60) !important;
    border-color: rgba(148, 213, 255, 0.22) !important;
    box-shadow: none !important;
    color: rgba(226, 232, 240, 0.58) !important;
    opacity: 1;
}

/* .app-cta-btn : alias générique de la DA du CTA « lancer » (retour Louis
   02/08 — le bouton de l'onglet Comparaison était resté sur l'ancien
   BUTTON_STYLE). Toute nouvelle action principale doit utiliser cette
   classe, jamais re-styler à la main. */
.creation-final-action.btn,
.app-cta-btn.btn {
    align-items: center;
    border-radius: 16px;
    display: inline-flex;
    font-weight: 900;
    justify-content: center;
    letter-spacing: -0.01em;
    min-height: 50px;
    padding: 13px 18px;
    position: relative;
    text-transform: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.creation-final-action.btn::after,
.app-cta-btn.btn::after {
    display: none;
}

.creation-final-action.btn:hover,
.creation-final-action.btn:focus,
.app-cta-btn.btn:hover,
.app-cta-btn.btn:focus {
    transform: translateY(-1px);
}

.creation-final-action--save.btn {
    background:
        linear-gradient(135deg, rgba(0, 191, 154, 0.16), rgba(32, 217, 255, 0.08)),
        rgba(7, 20, 39, 0.84);
    border: 1px solid rgba(0, 191, 154, 0.42);
    box-shadow: 0 12px 30px rgba(0, 191, 154, 0.10);
    color: #d9fff8;
}

.creation-final-action--run.btn,
.app-cta-btn.btn {
    background:
        radial-gradient(circle at 20% 0%, rgba(203, 255, 247, 0.24), transparent 42%),
        linear-gradient(135deg, rgba(8, 23, 44, 0.98), rgba(11, 93, 116, 0.96) 52%, rgba(0, 154, 132, 0.96));
    border: 1px solid rgba(183, 255, 240, 0.58);
    box-shadow:
        0 18px 42px rgba(0, 191, 154, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #f8feff;
    min-height: 56px;
}

.creation-final-action--save.btn:hover,
.creation-final-action--save.btn:focus,
.creation-final-action--run.btn:hover,
.creation-final-action--run.btn:focus,
.app-cta-btn.btn:hover,
.app-cta-btn.btn:focus {
    background:
        radial-gradient(circle at 22% 0%, rgba(203, 255, 247, 0.34), transparent 44%),
        linear-gradient(135deg, rgba(12, 33, 62, 0.99), rgba(16, 117, 137, 0.96) 54%, rgba(0, 176, 148, 0.98));
    border-color: rgba(203, 255, 247, 0.78);
    box-shadow:
        0 20px 46px rgba(32, 217, 255, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    color: #ffffff;
}

.creation-launch-backtest-btn.btn {
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.creation-tab-heading i,
.creation-builder-grid .card-header i,
.creation-section-header i {
    color: var(--cyan-highlight) !important;
}

.creation-section-header {
    align-items: center;
    background: rgba(8, 18, 36, 0.48) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
    color: var(--text-primary);
    display: flex;
    font-size: 1.1rem !important;
    font-weight: 900;
    letter-spacing: -0.01em;
    min-height: 56px;
    padding: 15px 18px !important;
}

.creation-section-header i {
    color: var(--cyan-highlight);
}

.creation-section-header > span,
.creation-section-header .btn,
.creation-section-header .btn > span {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    line-height: 1.2;
}

.creation-section-header .btn {
    align-items: center;
    display: flex;
}

.creation-section-body {
    background: linear-gradient(180deg, rgba(8, 18, 36, 0.18), rgba(8, 18, 36, 0.04));
}

.strategy-context-summary {
    background:
        radial-gradient(circle at 6% 0%, rgba(32, 217, 255, 0.10), transparent 36%),
        rgba(8, 18, 36, 0.34);
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 16px;
    padding: 10px;
}

.strategy-context-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1.2fr) minmax(210px, 0.8fr);
}

.strategy-context-pill {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    min-width: 0;
    padding: 10px 12px;
}

.strategy-context-kicker {
    color: var(--cyan-highlight);
    display: block;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.strategy-context-pill strong {
    color: var(--text-primary);
    display: block;
    font-size: 0.92rem;
    line-height: 1.22;
    overflow-wrap: anywhere;
}

.strategy-context-pill-period {
    background: rgba(0, 191, 154, 0.08);
    border-color: rgba(0, 191, 154, 0.18);
}

.creation-section-body .form-label,
.creation-section-body label,
.creation-section-body .form-label-uniform {
    color: rgba(226, 232, 240, 0.78) !important;
    font-size: 0.82rem;
    font-weight: 800;
}

.creation-section-body .form-control,
.creation-section-body .form-select,
.creation-section-body .Select-control {
    min-height: 42px;
}

.creation-risk-toggle {
    align-items: center;
    color: var(--text-primary) !important;
    display: flex !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    justify-content: flex-start;
}

.creation-risk-toggle:hover {
    color: #ffffff !important;
}

.creation-subsection-header {
    background:
        radial-gradient(circle at 0% 0%, rgba(32, 217, 255, 0.08), transparent 40%),
        rgba(8, 18, 36, 0.34) !important;
    border: 1px solid rgba(148, 213, 255, 0.16);
    border-radius: 16px;
    margin-top: 12px;
    padding: 15px 18px;
}

.creation-subsection-card {
    background:
        radial-gradient(circle at 0% 0%, rgba(32, 217, 255, 0.07), transparent 38%),
        linear-gradient(135deg, rgba(8, 18, 36, 0.46), rgba(13, 49, 78, 0.28)) !important;
    border: 1px solid rgba(148, 213, 255, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 34px rgba(2, 8, 23, 0.14) !important;
    margin-top: 12px;
    overflow: hidden;
}

.creation-subsection-card > .creation-subsection-header,
.creation-capital-block-card > .creation-subsection-header,
.creation-risk-block-card > .creation-subsection-header {
    border: 0 !important;
    border-bottom: 1px solid rgba(148, 213, 255, 0.16) !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
}

.creation-subsection-toggle {
    color: var(--text-primary) !important;
}

.creation-risk-section-header {
    margin-top: 0;
}

.creation-subsection-collapse {
    background: linear-gradient(180deg, rgba(8, 18, 36, 0.20), rgba(8, 18, 36, 0.06));
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
}

.creation-subsection-body {
    padding: 16px 18px;
}

[data-theme="light"] .creation-section-card {
    background:
        radial-gradient(circle at top left, rgba(8, 145, 178, 0.10), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 247, 255, 0.76)) !important;
}

[data-theme="light"] .creation-flow-intro {
    background:
        radial-gradient(circle at top left, rgba(8, 145, 178, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 247, 255, 0.76));
}

[data-theme="light"] .creation-flow-title {
    color: #0f172a;
}

[data-theme="light"] .creation-flow-copy {
    color: #475569;
}

[data-theme="light"] .creation-section-header {
    background: rgba(255, 255, 255, 0.58) !important;
    color: #0f172a;
}

[data-theme="light"] .simple-strategy-panel {
    background:
        radial-gradient(circle at 12% 0%, rgba(8, 145, 178, 0.10), transparent 35%),
        rgba(255, 255, 255, 0.76);
}

[data-theme="light"] .simple-strategy-copy,
[data-theme="light"] .simple-strategy-option-copy small {
    color: #475569;
}

@media (max-width: 1280px) {
    .simple-strategy-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.creation-save-folder-panel {
    background:
        radial-gradient(circle at top left, rgba(32, 217, 255, 0.07), transparent 30%),
        linear-gradient(135deg, rgba(10, 20, 39, 0.86), rgba(17, 84, 108, 0.42));
    border: 1px solid rgba(95, 164, 210, 0.22);
    border-radius: 18px;
    margin-top: 18px;
    padding: 14px 16px;
}

.creation-save-folder-label {
    color: rgba(226, 232, 240, 0.82) !important;
    font-size: 0.86rem;
    font-weight: 900;
    margin-bottom: 8px;
}

.creation-save-folder-dropdown {
    margin-bottom: 0;
}

[data-theme="light"] .creation-save-folder-panel {
    background:
        radial-gradient(circle at top left, rgba(8, 145, 178, 0.08), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 247, 255, 0.72));
}

@media (max-width: 991px) {
    .creation-flow-intro {
        grid-template-columns: 1fr;
    }

    .creation-flow-steps {
        justify-content: flex-start;
    }

    .creation-cockpit-header-inner {
        flex-direction: column;
    }

    .creation-cockpit-pills {
        justify-content: flex-start;
    }

    .risk-lens-grid {
        grid-template-columns: 1fr;
    }
}

/* --- BUTTONS (Standard Shapes - No Forced 50px) --- */
.btn {
    border-radius: 50px;
    /* Fully Rounded */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1.5rem;
    transition: all 0.2s;
}

/* --- TITLE BOXES --- */
.title-box {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 0%, rgba(224, 255, 255, 0.12), transparent 34%),
        var(--gradient-logo-panel),
        var(--bg-card);
    border: 1px solid rgba(16, 192, 176, 0.18);
    border-radius: 15px;
    padding: 15px 25px;
    margin-bottom: 25px;
    box-shadow:
        0 14px 34px -26px rgba(16, 192, 176, 0.55),
        var(--shadow-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: inline-block;
    /* Adjust if full width is needed */
    min-width: 200px;
    text-align: center;
}

.title-box::before {
    content: "";
    position: absolute;
    inset: 0 18px auto 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--logo-blue), var(--logo-cyan), transparent);
    opacity: 0.9;
}

.title-box h1,
.title-box h2,
.title-box h3,
.title-box h4,
.title-box h5 {
    background: var(--gradient-logo-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0 !important;
}

/* Settings Button Top Right — themed glass-morphism circle, no Bootstrap blue */
.top-right-settings-btn,
button.top-right-settings-btn,
.btn.top-right-settings-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg) !important;
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-secondary) !important;
    box-shadow: var(--card-shadow) !important;
    transition: background-color 0.2s, border-color 0.2s, transform 0.2s;
}
.top-right-settings-btn:hover,
button.top-right-settings-btn:hover,
.btn.top-right-settings-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--color-accent) !important;
    color: var(--text-primary) !important;
    transform: none !important;
}
.top-right-settings-btn:focus,
.top-right-settings-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), var(--card-shadow) !important;
    outline: none !important;
}
.top-right-settings-btn i {
    color: inherit !important;
    font-size: 1.15rem !important;
    display: block !important;
    opacity: 0.9 !important;
}
[data-theme="light"] .top-right-settings-btn,
[data-theme="light"] button.top-right-settings-btn,
[data-theme="light"] .btn.top-right-settings-btn {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}
[data-theme="light"] .top-right-settings-btn:hover {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
    border-color: var(--color-accent) !important;
    color: #0f172a !important;
}


/* Apply the requested Gradients strictly to appropriate classes */
.btn-success {
    background: var(--gradient-gain) !important;
    border: none !important;
    color: #000 !important;
    box-shadow: 0 4px 6px rgba(0, 227, 150, 0.2);
}

.btn-danger {
    background: var(--gradient-loss) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(255, 82, 82, 0.2);
}

/* Subtle delete buttons for decision blocks */
.btn-delete-subtle {
    color: var(--text-tertiary) !important;
    font-size: 0.75rem !important;
    padding: 2px 7px !important;
    line-height: 1.2 !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    box-shadow: none !important;
    opacity: 0.6;
}
.btn-delete-subtle:hover {
    color: #f87171 !important;
    background: rgba(248, 113, 113, 0.08) !important;
    border-color: rgba(248, 113, 113, 0.2) !important;
    opacity: 1;
    text-decoration: none !important;
}

.advanced-action-asset-label {
    display: block;
    margin: 0;
    width: 100%;
}

.btn-primary {
    background-color: var(--primary-blue) !important;
    /* Solid coherent blue */
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(0, 102, 255, 0.3);
    /* Subtle blue shadow */
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--color-accent-hover) !important;
    box-shadow: 0 6px 15px rgba(0, 102, 255, 0.5);
    transform: translateY(-1px);
}

/* --- UTILITIES --- */
.text-success,
.text-gradient-gain {
    background: var(--gradient-gain);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.text-danger,
.text-gradient-loss {
    background: var(--gradient-loss);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* Uniform label height for aligned form rows.
   inline-flex + nowrap keeps the trailing ⓘ icon on the same baseline as the
   label text and prevents it from dropping to a new line on narrow viewports. */
.form-label-uniform,
.form-label-uniform.form-label {
    font-size: 0.82rem;
    margin-bottom: 4px;
    color: var(--text-secondary);
    min-height: 1.3em;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
}

/* InputGroup inside strategy form: no double borders */
.input-group .form-control,
.input-group .form-select {
    border-radius: var(--input-radius) !important;
}
.input-group > .form-control:not(:last-child),
.input-group > .form-select:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}
.input-group > .form-control:not(:first-child),
.input-group > .form-select:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.form-control,
.form-select {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--input-radius) !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
    outline: none;
}

/* Native <select> popup options inherit text color from the <select>,
   but render with the system's default white background. In dark mode this
   gives white-text-on-white-bg. Force readable colors on the option list. */
.form-select option,
select option {
    background-color: #0d1b2a !important;
    color: #ffffff !important;
}

[data-theme="light"] .form-select option,
[data-theme="light"] select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* --- Alerts & Toasts --- */
.alert {
    border-radius: 12px !important;
    box-shadow: var(--shadow-card) !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: var(--success) !important;
    border-left: 4px solid var(--success) !important;
}

.alert-info {
    background: rgba(6, 182, 212, 0.1) !important;
    color: var(--info) !important;
    border-left: 4px solid var(--info) !important;
}

.alert-warning {
    background: rgba(255, 193, 7, 0.1) !important;
    color: var(--warning) !important;
    border-left: 4px solid var(--warning) !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger) !important;
    border-left: 4px solid var(--danger) !important;
}

/* --- Trading Indicators --- */
/* .text-success and .text-danger already defined above in UTILITIES */

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

.text-muted {
    color: var(--text-tertiary) !important;
}

/* Badge styles */
.badge-stock {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--asset-stock);
    border: 1px solid var(--asset-stock);
}

.badge-crypto {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--asset-crypto);
    border: 1px solid var(--asset-crypto);
}

.badge-forex {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--asset-forex);
    border: 1px solid var(--asset-forex);
}

/* Fix plotly background */
.js-plotly-plot .plotly .main-svg {
    background: transparent !important;
}

/* Fix dropdown z-index issues GLOBALLY */
.Select-menu-outer {
    z-index: 10000 !important;
    position: relative !important;
}

div[id*="decision-block"] .Select-menu-outer,
div[id*="condition-block"] .Select-menu-outer {
    z-index: 10000 !important;
}

/* ==========================================================================
   RESTORED COMPONENT STYLES (Dropdowns, Sidebar, Tabs)
   ========================================================================== */

/* --- Dropdowns (React Select) --- */
.Select-control {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    border-radius: 8px !important;
}

.Select-value-label {
    color: var(--text-primary) !important;
}

.Select-menu-outer {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

.Select-option {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.Select-option:hover,
.Select-option.is-focused {
    background-color: var(--color-accent) !important;
    color: white !important;
}

.Select-placeholder {
    color: var(--text-secondary) !important;
}

/* Strategy comparison dropdowns can contain long community-copy names.
   Keep each option readable instead of wrapping inside a fixed-height row. */
.comparison-strategy-dropdown .Select-menu-outer {
    z-index: 10050 !important;
    max-height: 280px !important;
    overflow-y: auto !important;
}

.comparison-strategy-dropdown .Select-option,
.comparison-strategy-dropdown .VirtualizedSelectOption {
    min-height: 48px !important;
    height: auto !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    padding: 8px 12px !important;
}

.comparison-strategy-dropdown .Select-value-label {
    display: block !important;
    max-width: calc(100% - 24px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.pre-trade-ticker-dropdown .Select-control {
    min-height: 38px !important;
    background: rgba(8, 18, 34, 0.72) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08) !important;
}

.pre-trade-ticker-dropdown .Select-arrow-zone {
    display: table-cell !important;
    opacity: 1 !important;
}

.pre-trade-ticker-dropdown .Select-menu-outer {
    z-index: 10050 !important;
}

.pre-trade-ticker-dropdown .Select-option,
.pre-trade-ticker-dropdown .VirtualizedSelectOption {
    min-height: 40px !important;
    line-height: 1.25 !important;
    padding: 8px 12px !important;
}

.pre-trade-ticker-dropdown .Select-placeholder,
.pre-trade-ticker-dropdown .Select-value-label,
.pre-trade-ticker-dropdown .Select-input > input {
    color: var(--text-primary) !important;
}

.synthetic-loading-zone {
    min-height: 56px;
}

/* --- Sidebar --- */
.sidebar {
    background-color: var(--bg-card);
    border-right: 1px solid var(--border-light);
    height: 100vh;
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    z-index: 100;
    transition: all 0.3s ease;
    overflow-y: auto;
    /* Scrollbar masquée (retour Louis 03/08) : le défilement molette/tactile
       reste actif, seul l'ascenseur visuel disparaît. */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge/IE */
}

.sidebar::-webkit-scrollbar {
    display: none;                  /* Chrome/Edge/Safari */
}

/* Zone de marque cliquable (logo + nom) : ramène à Explorer. Reset complet du
   bouton natif — l'element doit rester visuellement identique au bloc statique
   qu'il remplace, seule l'affordance au survol change. */
.sidebar-brand {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.sidebar-brand:hover {
    opacity: 0.85;
    filter: brightness(1.12);
}

/* Le focus clavier doit rester visible : c'est un vrai bouton de navigation. */
.sidebar-brand:focus-visible {
    outline: 2px solid #00bf9a;  /* teal de marque (pas de var dédiée en CSS) */
    outline-offset: 4px;
    border-radius: 8px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    width: 100%;
    border: 0;
    /* Apr 28 PM: bumped from var(--text-secondary)=#94a3b8 for slightly better readability
       (kept dimmer than the GRADIENT SYSTEMS title at #c5cdd9 to preserve hierarchy) */
    background: transparent;
    color: #abb6c5;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 4px;
    /* Perf 04/08 (mesure transitionend) : `all 0.2s` ajoutait 200 ms fixes
       de fade APRÈS le flip de classe — la surbrillance paraissait traîner.
       Scopé aux seules propriétés qui méritent d'animer, 120 ms ; la
       largeur du border-left ne s'anime plus (saut net voulu). */
    transition: background-color 0.12s, color 0.12s, border-left-color 0.12s;
    cursor: pointer;
    font-size: 0.92rem;
    letter-spacing: 0.2px;
    text-align: left;
}

.sidebar-link i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    opacity: 0.75;
}

.sidebar-link:hover i,
.sidebar-link.active i {
    opacity: 1;
}

/* Strategy/Folder List Visual Separation */
#sidebar-clients-list,
#sidebar-folders-list {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Strategy Items Smaller Font */
#sidebar-clients-list .btn,
#sidebar-folders-list .btn,
#sidebar-clients-list .sidebar-link,
#sidebar-folders-list .sidebar-link {
    font-size: 0.85rem !important;
    margin-bottom: 8px;
    padding: 8px 12px;
}

.sidebar-link:hover,
.sidebar-link:focus-visible {
    background-color: var(--bg-secondary);
    color: var(--color-accent);
    outline: none;
}

.sidebar-link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--color-accent);
}

.sidebar-link.active {
    background: linear-gradient(90deg, rgba(0, 102, 255, 0.1) 0%, transparent 100%);
    color: var(--color-accent);
    border-left: 3px solid var(--color-accent);
}

.content-wrapper {
    margin-left: 280px;
    padding: 30px;
    min-height: 100vh;
    background-color: transparent;
    /* Changed from var(--bg-primary) for blobs */
    transition: margin-left 0.3s ease;
    position: relative;
    z-index: 1;
}

/* --- DatePicker — solid backgrounds + strong contrast in both themes ---
   The dash DateRangePicker overlay (with_portal) is rendered at <body> root,
   so [data-theme="..."] selectors on <html> still cascade through. */
.DateInput,
.DateInput_input {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 6px !important;
    font-size: 0.9rem !important;
    padding: 8px 12px !important;
}

.DateRangePickerInput,
.DateRangePickerInput__withBorder,
.DateInput__small {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 8px !important;
}

.DateRangePickerInput_arrow_svg,
.DateRangePickerInput_clearDates_svg {
    fill: var(--text-secondary) !important;
}

/* Calendar overlay container (with_portal=True) */
.DayPicker,
.DayPicker__withBorder,
.DayPicker_transitionContainer,
.CalendarMonthGrid,
.CalendarMonthGrid_month__horizontal,
.CalendarMonth,
.CalendarMonth_table {
    background-color: #0d1b2a !important;
    color: #ffffff !important;
}

[data-theme="light"] .DayPicker,
[data-theme="light"] .DayPicker__withBorder,
[data-theme="light"] .DayPicker_transitionContainer,
[data-theme="light"] .CalendarMonthGrid,
[data-theme="light"] .CalendarMonthGrid_month__horizontal,
[data-theme="light"] .CalendarMonth,
[data-theme="light"] .CalendarMonth_table {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

.DayPicker__withBorder {
    background:
        radial-gradient(circle at 18% 0%, rgba(32, 217, 255, 0.12), transparent 36%),
        linear-gradient(145deg, rgba(7, 18, 36, 0.98), rgba(12, 35, 62, 0.96)) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.68) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(32, 217, 255, 0.22) !important;
    overflow: hidden;
}

[data-theme="light"] .DayPicker__withBorder {
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18) !important;
    border: 1px solid #e2e8f0 !important;
}

/* Month / weekday headers */
.CalendarMonth_caption,
.CalendarMonth_caption strong {
    color: #ffffff !important;
    font-weight: 900 !important;
    padding-top: 22px !important;
    padding-bottom: 44px !important;
}

[data-theme="light"] .CalendarMonth_caption,
[data-theme="light"] .CalendarMonth_caption strong {
    color: #0f172a !important;
}

.DayPicker_weekHeader {
    color: #94a3b8 !important;
}
.DayPicker_weekHeader_li small {
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
}
[data-theme="light"] .DayPicker_weekHeader,
[data-theme="light"] .DayPicker_weekHeader_li small {
    color: #475569 !important;
}

/* Default day cells — solid bg, readable border */
.CalendarDay__default {
    background-color: rgba(13, 27, 42, 0.82) !important;
    color: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
}
.CalendarDay__default:hover {
    background-color: rgba(32, 217, 255, 0.16) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-accent) !important;
}

[data-theme="light"] .CalendarDay__default {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .CalendarDay__default:hover {
    background-color: #e0f2fe !important;
    color: #0f172a !important;
    border: 1px solid var(--color-accent) !important;
}

/* Days outside the current month */
.CalendarDay__outside {
    background-color: transparent !important;
    color: #475569 !important;
    border: 0 !important;
}
[data-theme="light"] .CalendarDay__outside {
    color: #cbd5e1 !important;
}

.CalendarDay__blocked_out_of_range,
.CalendarDay__blocked_out_of_range:hover {
    background-color: #050a14 !important;
    color: #475569 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    cursor: not-allowed !important;
}
[data-theme="light"] .CalendarDay__blocked_out_of_range,
[data-theme="light"] .CalendarDay__blocked_out_of_range:hover {
    background-color: #f1f5f9 !important;
    color: #cbd5e1 !important;
    border: 1px solid #e2e8f0 !important;
}

/* Selected start / end day */
.CalendarDay__selected,
.CalendarDay__selected:hover,
.CalendarDay__selected:active {
    background: linear-gradient(135deg, var(--color-accent), #00bf9a) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-accent) !important;
    font-weight: 900 !important;
}

/* Range between two selections */
.CalendarDay__selected_span,
.CalendarDay__selected_span:hover {
    background-color: rgba(32, 217, 255, 0.16) !important;
    color: #ffffff !important;
    border: 1px solid rgba(32, 217, 255, 0.24) !important;
}
[data-theme="light"] .CalendarDay__selected_span,
[data-theme="light"] .CalendarDay__selected_span:hover {
    background-color: rgba(37, 99, 235, 0.18) !important;
    color: #0f172a !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
}

.CalendarDay__hovered_span,
.CalendarDay__hovered_span:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}
[data-theme="light"] .CalendarDay__hovered_span,
[data-theme="light"] .CalendarDay__hovered_span:hover {
    background-color: rgba(37, 99, 235, 0.1) !important;
    color: #0f172a !important;
}

/* Prev/next month nav arrows */
.DayPickerNavigation_button__default {
    background-color: #1b263b !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
}
.DayPickerNavigation_button__default:hover {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}
[data-theme="light"] .DayPickerNavigation_button__default {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}
.DayPickerNavigation_svg__horizontal {
    fill: #ffffff !important;
}
[data-theme="light"] .DayPickerNavigation_svg__horizontal {
    fill: #0f172a !important;
}

/* Portal backdrop dim */
.DateRangePicker_picker__portal,
.SingleDatePicker_picker__portal {
    background-color: rgba(0, 0, 0, 0.55) !important;
}

.DayPickerKeyboardShortcuts_buttonReset {
    display: none;
}

.timeframe-select.form-select {
    border-color: rgba(32, 217, 255, 0.26) !important;
    font-weight: 700;
}

.date-range-status.alert {
    align-items: center;
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 9px 12px;
}

.date-range-detail {
    color: inherit;
    opacity: 0.84;
}

.date-workbench-head {
    align-items: flex-start;
    background:
        radial-gradient(circle at 8% 0%, rgba(32, 217, 255, 0.12), transparent 32%),
        linear-gradient(135deg, rgba(7, 18, 36, 0.76), rgba(14, 57, 89, 0.26));
    border: 1px solid rgba(125, 211, 252, 0.14);
    border-radius: 18px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 14px 16px;
}

.date-workbench-kicker {
    color: var(--color-accent);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.date-workbench-title {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 900;
    margin: 3px 0 0;
}

.date-workbench-guidance {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.35;
    max-width: 430px;
    text-align: right;
}

.date-workbench-grid {
    background: rgba(3, 10, 24, 0.20);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 18px;
    padding: 12px;
}

.date-console-shell {
    align-items: stretch;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 268px;
}

.creation-builder-grid {
    align-items: start;
    display: grid !important;
    gap: 24px;
    grid-template-columns: 1fr;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.creation-builder-grid > .creation-settings-col,
.creation-builder-grid > .creation-assets-col {
    display: contents;
    flex: none !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

.creation-builder-grid .card {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100% !important;
}

.creation-assets-card {
    order: 1;
}

.creation-period-card,
.analysis-period-card-fullbleed {
    box-sizing: border-box;
    margin-left: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    order: 2;
    position: relative;
    width: 100% !important;
    z-index: 1;
}

.creation-decision-card {
    order: 3;
}

.creation-capital-block-card {
    order: 5;
}

.creation-risk-block-card {
    order: 6;
}

.creation-simulation-card {
    order: 4;
}

.creation-simulation-card {
    border-bottom-color: rgba(95, 164, 210, 0.10) !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-bottom: 0 !important;
}

.creation-capital-block-card,
.creation-risk-block-card {
    border-color: rgba(148, 213, 255, 0.16) !important;
    box-shadow: 0 16px 34px rgba(2, 8, 23, 0.14) !important;
    margin-top: 12px !important;
}

.creation-capital-block-card .creation-section-header,
.creation-risk-block-card .creation-section-header {
    background:
        radial-gradient(circle at 0% 0%, rgba(32, 217, 255, 0.08), transparent 40%),
        rgba(8, 18, 36, 0.34) !important;
    border-bottom: 1px solid rgba(148, 213, 255, 0.16) !important;
}

.date-console-main {
    display: grid;
    grid-template-rows: auto auto;
    gap: 16px;
    min-width: 0;
}

.analysis-period-slider-wrap {
    background:
        linear-gradient(135deg, rgba(3, 10, 24, 0.34), rgba(12, 35, 62, 0.24));
    border: 1px solid rgba(125, 211, 252, 0.11);
    border-radius: 16px;
    margin-top: 2px;
    min-height: 176px;
    padding: 16px 22px 24px;
}

.analysis-period-slider-head {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 5px;
}

.analysis-period-slider-label {
    color: var(--text-primary);
    font-size: 0.76rem;
    font-weight: 950;
}

.analysis-period-slider-helper {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 800;
}

.analysis-period-slider-rail {
    min-height: 126px;
    padding-top: 58px;
    position: relative;
}

.analysis-period-event-marker {
    height: 104px;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 0;
    z-index: 4;
}

.analysis-period-event-marker.is-near-start {
    transform: translateX(0);
}

.analysis-period-event-marker.is-near-end {
    transform: translateX(-100%);
}

.analysis-period-event-label {
    appearance: none;
    background: rgba(8, 18, 36, 0.95);
    border: 1px solid rgba(249, 115, 22, 0.22);
    border-radius: 999px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: clamp(0.52rem, 0.55vw, 0.62rem);
    font-family: inherit;
    font-weight: 900;
    left: 50%;
    line-height: 1;
    max-width: 146px;
    overflow: hidden;
    padding: 4px 7px;
    pointer-events: auto;
    position: absolute;
    text-overflow: ellipsis;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.analysis-period-event-link:hover,
.analysis-period-event-link:focus-visible {
    background: rgba(15, 28, 52, 0.98);
    border-color: rgba(32, 217, 255, 0.56);
    box-shadow: 0 0 0 3px rgba(32, 217, 255, 0.16);
    color: #ffffff;
    outline: none;
}

.analysis-period-event-link:active {
    transform: translateX(-50%) translateY(1px);
}

.analysis-period-event-marker.is-near-start .analysis-period-event-link:active,
.analysis-period-event-marker.is-near-end .analysis-period-event-link:active {
    transform: translateY(1px);
}

.analysis-period-event-marker.is-near-start .analysis-period-event-label {
    left: 0;
    transform: none;
}

.analysis-period-event-marker.is-near-end .analysis-period-event-label {
    left: auto;
    right: 0;
    transform: none;
}

.analysis-period-event-marker-1 .analysis-period-event-label {
    top: 10px;
}

.analysis-period-event-marker-2 .analysis-period-event-label {
    top: 20px;
}

.analysis-period-event-dot {
    background: linear-gradient(135deg, #f97316, #f43f5e);
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 999px;
    box-shadow: 0 0 16px rgba(249, 115, 22, 0.34);
    height: 13px;
    left: 50%;
    position: absolute;
    top: 55px;
    transform: translateX(-50%);
    width: 13px;
}

.analysis-period-range-slider {
    padding: 8px 4px 18px !important;
    position: relative;
    z-index: 2;
}

.analysis-period-range-slider .rc-slider-rail {
    background: rgba(148, 163, 184, 0.18);
    height: 8px;
}

.analysis-period-range-slider .rc-slider-track {
    background: linear-gradient(90deg, var(--color-accent), #00bf9a);
    box-shadow: 0 0 20px rgba(32, 217, 255, 0.26);
    height: 8px;
}

.analysis-period-range-slider .rc-slider-handle {
    background: #3b82f6;
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 0 5px rgba(32, 217, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.28);
    height: 18px;
    margin-top: -5px;
    width: 18px;
}

.analysis-period-range-slider .rc-slider-handle:hover,
.analysis-period-range-slider .rc-slider-handle:focus,
.analysis-period-range-slider .rc-slider-handle-dragging {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 7px rgba(32, 217, 255, 0.18), 0 0 22px rgba(32, 217, 255, 0.36) !important;
}

.analysis-period-range-slider .rc-slider-mark-text {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 850;
}

.date-console-edit-btn.btn {
    align-self: center;
    border-radius: 999px !important;
    font-weight: 900;
    min-width: 176px;
    padding: 10px 14px;
}

.gradient-time-console {
    background:
        radial-gradient(circle at 10% 0%, rgba(32, 217, 255, 0.13), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(0, 191, 154, 0.10), transparent 34%),
        linear-gradient(145deg, rgba(7, 18, 36, 0.86), rgba(12, 35, 62, 0.62));
    border: 1px solid rgba(32, 217, 255, 0.18);
    border-radius: 22px;
    box-shadow: 0 20px 52px rgba(2, 8, 23, 0.24);
    overflow: hidden;
    padding: 17px;
}

.gradient-time-console-compact {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
}

.time-console-top {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.time-console-kicker {
    color: var(--color-accent);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.time-console-title {
    color: var(--text-primary);
    font-size: clamp(1.05rem, 2vw, 1.42rem);
    font-weight: 950;
    letter-spacing: -0.03em;
    margin: 3px 0 2px;
}

.time-console-meta {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 750;
}

.time-console-timeline-strip {
    margin: 12px 0 10px;
    padding: 0 4px;
}

.time-console-track-caption {
    align-items: baseline;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    margin: 0 2px 2px;
}

.time-console-track-caption span {
    color: var(--text-primary);
    font-size: 0.73rem;
    font-weight: 950;
}

.time-console-track-caption small {
    color: var(--text-muted);
    font-size: 0.63rem;
    font-weight: 750;
}

.time-console-track {
    background:
        radial-gradient(circle at 50% 50%, rgba(32, 217, 255, 0.09), transparent 62%),
        rgba(2, 8, 23, 0.30);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 18px;
    margin: 0;
    min-height: 112px;
    padding: 0 18px;
    position: relative;
}

.time-console-track-glow {
    background: rgba(148, 163, 184, 0.16);
    border-radius: 999px;
    height: 8px;
    left: 22px;
    position: absolute;
    right: 22px;
    top: 54px;
}

.time-console-track-fill {
    background: linear-gradient(90deg, var(--color-accent), #00bf9a);
    border-radius: 999px;
    box-shadow: 0 0 26px rgba(32, 217, 255, 0.34);
    height: 8px;
    left: calc(4% + 18px);
    position: absolute;
    right: calc(4% + 18px);
    top: 54px;
}

.time-console-track-fill.is-warning {
    background: linear-gradient(90deg, #fbbf24, #f97316);
    box-shadow: 0 0 22px rgba(251, 191, 36, 0.28);
}

.time-console-anchor {
    align-items: center;
    background: rgba(8, 18, 36, 0.96);
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 13px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    min-width: 104px;
    padding: 7px 9px;
    position: absolute;
    top: 33px;
    z-index: 4;
}

.time-console-anchor::before {
    background: var(--color-accent);
    border: 2px solid rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    content: "";
    height: 14px;
    position: absolute;
    top: 17px;
    width: 14px;
}

.time-console-anchor-start {
    left: 18px;
}

.time-console-anchor-start::before {
    right: -13px;
}

.time-console-anchor-end {
    right: 18px;
}

.time-console-anchor-end::before {
    left: -13px;
}

.time-console-anchor span {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.time-console-anchor strong {
    color: var(--text-primary);
    font-size: 0.75rem;
    margin-top: 2px;
}

.time-console-event-empty {
    background: rgba(8, 18, 36, 0.92);
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    left: 50%;
    padding: 6px 10px;
    position: absolute;
    text-align: center;
    top: 74px;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 3;
}

.time-console-event-marker {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 94px;
    min-width: 60px;
    position: absolute;
    top: 24px;
    transform: translateX(-50%);
    z-index: 3;
}

.time-console-event-marker::after {
    display: none;
}

.time-console-event-marker-1 {
    top: 24px;
}

.time-console-event-marker-2 {
    top: 24px;
}

.time-console-event-marker.is-near-start {
    transform: translateX(0);
}

.time-console-event-marker.is-near-end {
    transform: translateX(-100%);
}

.time-console-event-dot {
    background: linear-gradient(135deg, #f97316, #f43f5e);
    border: 2px solid rgba(255, 255, 255, 0.86);
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.34);
    height: 13px;
    width: 13px;
}

.time-console-event-label,
.time-console-event-date {
    background: rgba(8, 18, 36, 0.94);
    border: 1px solid rgba(249, 115, 22, 0.20);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: 0.60rem;
    font-weight: 900;
    line-height: 1;
    max-width: 96px;
    overflow: hidden;
    padding: 5px 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.time-console-event-date {
    border-color: rgba(125, 211, 252, 0.16);
    color: var(--text-muted);
    font-size: 0.56rem;
    padding: 4px 6px;
}

.date-workbench-offcanvas {
    background:
        radial-gradient(circle at 15% 0%, rgba(32, 217, 255, 0.10), transparent 36%),
        linear-gradient(160deg, rgba(5, 12, 26, 0.98), rgba(11, 31, 54, 0.98)) !important;
    color: var(--text-primary);
}

.date-workbench-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.date-drawer-hero {
    border: 1px solid rgba(32, 217, 255, 0.16);
    border-radius: 20px;
    background:
        radial-gradient(circle at 0% 0%, rgba(32, 217, 255, 0.13), transparent 34%),
        rgba(255, 255, 255, 0.035);
    margin-bottom: 14px;
    padding: 16px;
}

.date-drawer-kicker {
    color: var(--color-accent);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.date-drawer-title {
    color: var(--text-primary);
    font-weight: 950;
    letter-spacing: -0.03em;
    margin: 3px 0 6px;
}

.date-drawer-copy,
.date-drawer-helper {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    margin: 0;
}

.date-drawer-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 14px;
}

.date-drawer-apply-btn.btn {
    border-radius: 999px !important;
    font-weight: 900;
    padding: 9px 16px;
}

.date-manual-col {
    order: 1;
}

.date-manual-grid {
    background:
        linear-gradient(135deg, rgba(8, 18, 36, 0.92), rgba(15, 35, 70, 0.72)) !important;
    border: 1px solid rgba(32, 217, 255, 0.22) !important;
    border-radius: 15px !important;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    padding: 8px;
}

.date-manual-input {
    background: transparent !important;
    border: 1px solid rgba(125, 211, 252, 0.14) !important;
    border-radius: 11px !important;
    color: var(--text-primary) !important;
    font-size: 0.82rem;
    font-weight: 850;
    min-height: 38px;
    padding: 7px 9px;
    width: 100%;
}

.date-manual-input:focus {
    border-color: rgba(32, 217, 255, 0.58) !important;
    box-shadow: 0 0 0 3px rgba(32, 217, 255, 0.10);
    outline: none;
}

.date-manual-apply.btn {
    border-radius: 999px !important;
    font-size: 0.76rem;
    font-weight: 900;
    min-width: 92px;
}

.date-manual-feedback {
    color: #fbbf24;
    font-size: 0.72rem;
    font-weight: 800;
    margin-top: 6px;
    min-height: 18px;
}

.hidden-date-picker-bridge {
    display: none !important;
}

.date-timeframe-col {
    order: 2;
}

.date-year-start {
    order: 3;
}

.date-year-end {
    order: 4;
}

.date-picker-col,
.date-timeframe-col,
.date-year-jump-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.date-workbench-grid .form-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.date-jump-select.form-select,
.date-workbench-grid .form-select {
    background-color: rgba(11, 25, 50, 0.78) !important;
    border: 1px solid rgba(125, 211, 252, 0.18) !important;
    border-radius: 12px !important;
    color: var(--text-primary) !important;
    font-weight: 800;
}

.gradient-date-range-picker,
.gradient-date-range-picker .DateRangePicker,
.gradient-date-range-picker .DateRangePickerInput {
    width: 100%;
}

.gradient-date-range-picker .DateRangePickerInput {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(7, 18, 36, 0.92), rgba(15, 35, 70, 0.72)) !important;
    border: 1px solid rgba(32, 217, 255, 0.22) !important;
    border-radius: 15px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    min-height: 45px;
    padding: 2px 8px;
}

.gradient-date-range-picker .DateInput,
.gradient-date-range-picker .DateInput_input {
    background: transparent !important;
    border: 0 !important;
    color: var(--text-primary) !important;
    font-weight: 850 !important;
}

.timeframe-radio-items {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.timeframe-radio-items .form-check {
    margin: 0;
    padding: 0;
}

.timeframe-radio-items .form-check-input {
    display: none;
}

.timeframe-radio-items .form-check-label {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 999px;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 850;
    justify-content: center;
    min-width: 58px;
    padding: 7px 10px;
    transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.timeframe-radio-items .form-check-label:hover {
    border-color: rgba(32, 217, 255, 0.38);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.timeframe-radio-items .form-check-input:checked + .form-check-label {
    background: linear-gradient(135deg, rgba(32, 217, 255, 0.24), rgba(0, 191, 154, 0.18));
    border-color: rgba(32, 217, 255, 0.58);
    box-shadow: 0 10px 24px rgba(32, 217, 255, 0.12);
    color: #ffffff;
}

.date-preset-rail {
    align-items: stretch;
    background:
        linear-gradient(135deg, rgba(15, 35, 70, 0.42), rgba(3, 10, 24, 0.20));
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
    padding: 9px;
}

.date-preset-group {
    align-items: center;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 7px;
}

.date-preset-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    margin-right: 4px;
    text-transform: uppercase;
}

.date-preset-chip.btn {
    border-radius: 999px !important;
    font-size: 0.74rem;
    font-weight: 850;
    padding: 6px 11px;
}

.date-preset-chip:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.period-status-slot {
    margin-top: 14px;
}

.date-range-summary {
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
}

.date-summary-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.date-summary-grid-compact {
    grid-template-columns: repeat(2, minmax(0, 240px));
}

.date-summary-card {
    background:
        radial-gradient(circle at 90% 0%, rgba(32, 217, 255, 0.10), transparent 38%),
        rgba(8, 18, 36, 0.58);
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 14px;
    min-height: 72px;
    padding: 13px 14px;
}

.date-summary-card span {
    color: var(--text-muted);
    display: block;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.date-summary-card strong {
    color: var(--text-primary);
    display: block;
    font-size: 0.88rem;
    margin-top: 5px;
}

.date-status-pill {
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 62px;
    padding: 10px 12px;
}

.date-status-pill.is-ready {
    background: rgba(0, 191, 154, 0.10);
    border: 1px solid rgba(0, 191, 154, 0.22);
}

.date-status-pill.is-warning {
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.28);
}

.date-status-title {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 900;
}

.date-status-detail {
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.25;
    margin-top: 3px;
}

[data-theme="light"] .date-workbench-head,
[data-theme="light"] .date-workbench-grid,
[data-theme="light"] .date-preset-rail,
[data-theme="light"] .date-summary-card {
    background: rgba(248, 250, 252, 0.88);
}

[data-theme="light"] .date-preset-group {
    background: rgba(15, 23, 42, 0.035);
}

@media (max-width: 1199px) {
    .date-range-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .date-workbench-head {
        flex-direction: column;
    }

    .date-workbench-guidance {
        max-width: none;
        text-align: left;
    }

    .date-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .date-preset-group {
        width: 100%;
    }

    .date-manual-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Strategy Form Compact --- */
.col-4 .card {
    margin-bottom: 16px !important;
}

.col-4 .card-header {
    padding: 10px 15px !important;
    font-size: 0.9rem !important;
}

.col-4 .card-body {
    padding: 12px 16px !important;
}

.col-4 .card-body label {
    font-size: 0.82rem;
    margin-bottom: 4px;
    color: var(--text-secondary);
}

.col-4 .card-body .form-control,
.col-4 .card-body .form-select {
    padding: 6px 10px;
    font-size: 0.85rem;
}

.col-4 .card-body .form-switch {
    padding-top: 4px;
    padding-bottom: 4px;
}

.creation-builder-grid .card {
    margin-bottom: 0 !important;
}

.creation-builder-grid .card-header.creation-section-header {
    font-size: 1.1rem !important;
    padding: 1.25rem 1.5rem !important;
}

.creation-builder-grid .card-body {
    padding: 1.25rem 1.5rem !important;
}

.creation-builder-grid .card-body label {
    font-size: 0.9rem;
}

.creation-builder-grid .card-body .form-control,
.creation-builder-grid .card-body .form-select {
    font-size: 0.95rem;
    padding: 0.62rem 0.85rem;
}

#creation-step-assets-panel {
    max-height: none;
}

#creation-step-assets-panel > .card-body {
    max-height: clamp(460px, calc(100vh - 320px), 760px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 1.1rem !important;
    scrollbar-color: rgba(32, 217, 255, 0.55) rgba(8, 18, 36, 0.34);
    scrollbar-width: thin;
}

#creation-step-assets-panel > .card-body::-webkit-scrollbar,
#creation-step-assets-panel #adv-filter-suggestions::-webkit-scrollbar {
    width: 9px;
}

#creation-step-assets-panel > .card-body::-webkit-scrollbar-track,
#creation-step-assets-panel #adv-filter-suggestions::-webkit-scrollbar-track {
    background: rgba(8, 18, 36, 0.34);
    border-radius: 999px;
}

#creation-step-assets-panel > .card-body::-webkit-scrollbar-thumb,
#creation-step-assets-panel #adv-filter-suggestions::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(32, 217, 255, 0.62), rgba(0, 191, 154, 0.58));
    border-radius: 999px;
}

#creation-step-assets-panel #adv-filter-suggestions {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

#creation-step-assets-panel .filter-card-header {
    position: sticky;
    top: 0;
    z-index: 4;
}

/* Bootstrap defaults that break on the dark theme — explicit overrides
   so cards, list groups, tables and muted text remain readable. */
.list-group {
    background-color: transparent !important;
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--text-primary);
    --bs-list-group-border-color: var(--border-light);
}
.list-group-item {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
}
.list-group-item .text-muted,
.list-group-item small,
.text-muted,
small.text-muted {
    color: var(--text-secondary) !important;
}
.card-title,
.card .card-title {
    color: var(--text-primary) !important;
}
/* dbc.Table inside cards — make sure rows aren't dark-on-dark */
.card .table,
.card .table > :not(caption) > * > * {
    color: var(--text-primary) !important;
    border-color: var(--border-light) !important;
    background-color: transparent !important;
}
.card .table thead th {
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-light) !important;
}
[data-theme="light"] .list-group-item,
[data-theme="light"] .card-title {
    color: #0f172a !important;
}
[data-theme="light"] .text-muted,
[data-theme="light"] .list-group-item .text-muted,
[data-theme="light"] small.text-muted {
    color: #64748b !important;
}
[data-theme="light"] .card .table,
[data-theme="light"] .card .table > :not(caption) > * > * {
    color: #0f172a !important;
}

/* === Advanced Filter Panel (create_asset_filter_panel) ===
   Themed via vars so it harmonises with the rest of the strategy form
   and never produces a dark square that overflows in light mode. */
.filter-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: var(--card-radius) !important;
    overflow: hidden;  /* clip the dark header inside the rounded card */
    box-shadow: none;
}
.filter-card-header {
    background-color: var(--card-header-bg) !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding: 10px 16px !important;
    border-top-left-radius: var(--card-radius) !important;
    border-top-right-radius: var(--card-radius) !important;
}
.filter-card-body {
    padding: 14px 16px !important;
    background-color: transparent !important;
}
.filter-toggle-btn {
    color: var(--color-accent) !important;
    font-weight: 600 !important;
    font-size: 0.92rem;
    box-shadow: none !important;
}
.filter-toggle-btn:hover,
.filter-toggle-btn:focus {
    color: var(--color-accent-hover) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}
.filter-label {
    color: var(--text-secondary) !important;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0.2px;
}
[data-theme="light"] .filter-card-header {
    background-color: rgba(15, 23, 42, 0.04) !important;
    border-bottom-color: #e2e8f0 !important;
}
[data-theme="light"] .filter-label {
    color: #475569 !important;
}

.screener-card {
    background:
        radial-gradient(circle at 4% 0%, rgba(32, 217, 255, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(8, 21, 42, 0.90), rgba(14, 57, 89, 0.44)) !important;
}

.screener-inline-panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.screener-inline-body {
    padding: 0 !important;
}

.screener-expert-top-btn {
    align-items: center;
    color: rgba(183, 255, 240, 0.86) !important;
    display: inline-flex;
    font-weight: 900;
    justify-content: flex-end;
    margin: 2px 0 10px auto;
    text-transform: uppercase;
    width: max-content;
}

.screener-expert-top-btn:hover,
.screener-expert-top-btn:focus {
    color: #ffffff !important;
}

.screener-header-row,
.screener-footer-row,
.screener-result-top,
.screener-result-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.screener-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
}

.screener-panel-toggle-btn,
.screener-panel-toggle-bottom.btn {
    color: rgba(183, 255, 240, 0.84) !important;
}

.screener-panel-toggle-btn:hover,
.screener-panel-toggle-btn:focus,
.screener-panel-toggle-bottom.btn:hover,
.screener-panel-toggle-bottom.btn:focus {
    color: #ffffff !important;
}

.filter-toggle-title {
    align-items: center;
    color: var(--text-primary);
    display: inline-flex;
    font-weight: 800;
}

.screener-search-group .form-control {
    background: rgba(8, 18, 36, 0.72) !important;
    border-color: rgba(32, 217, 255, 0.26) !important;
    color: var(--text-primary) !important;
}

.screener-search-group {
    align-items: start;
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(154px, 168px);
}

.screener-search-input.form-control {
    border-radius: 14px 0 0 14px !important;
    min-height: 40px;
    min-width: 0;
    width: 100% !important;
}

.screener-search-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.screener-search-group .form-control::placeholder {
    color: rgba(226, 232, 240, 0.58) !important;
}

.screener-search-block > small,
.screener-search-block .text-muted.d-block.mt-2 {
    display: none !important;
}

.screener-search-btn.btn {
    align-items: center;
    background:
        radial-gradient(circle at 18% 0%, rgba(183, 255, 240, 0.22), transparent 44%),
        linear-gradient(135deg, rgba(10, 25, 48, 0.98), rgba(14, 83, 112, 0.94) 52%, rgba(18, 129, 142, 0.92)) !important;
    border: 1px solid rgba(32, 217, 255, 0.48) !important;
    border-left: 0 !important;
    border-radius: 0 18px 10px 0 !important;
    box-shadow:
        0 12px 28px rgba(2, 8, 23, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    color: #f8feff !important;
    display: inline-flex;
    font-weight: 900;
    gap: 6px;
    justify-content: center;
    letter-spacing: 0.02em;
    min-height: 40px;
    min-width: 154px;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.screener-reset-btn.btn {
    background: rgba(15, 31, 58, 0.70) !important;
    border: 1px solid rgba(148, 213, 255, 0.30) !important;
    border-left: 0 !important;
    border-radius: 0 10px 18px 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    color: rgba(217, 243, 255, 0.82) !important;
    font-size: 0.74rem;
    font-weight: 900;
    min-height: 36px;
    text-transform: uppercase;
    width: 100%;
}

.screener-reset-btn.btn:hover,
.screener-reset-btn.btn:focus {
    background: rgba(20, 47, 85, 0.92) !important;
    border-color: rgba(32, 217, 255, 0.46) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.filter-card .screener-footer-row {
    justify-content: flex-end;
}

.screener-search-btn.btn::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    content: "";
    inset: -52% auto -52% -42%;
    opacity: 0.38;
    position: absolute;
    transform: rotate(18deg);
    transition: left 0.32s ease, opacity 0.18s ease;
    width: 34%;
}

.screener-search-btn.btn:hover,
.screener-search-btn.btn:focus {
    background:
        radial-gradient(circle at 18% 0%, rgba(203, 255, 247, 0.30), transparent 46%),
        linear-gradient(135deg, rgba(12, 33, 62, 0.99), rgba(16, 101, 130, 0.96) 52%, rgba(0, 154, 132, 0.94)) !important;
    border-color: rgba(183, 255, 240, 0.72) !important;
    box-shadow:
        0 16px 34px rgba(32, 217, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.screener-search-btn.btn:hover::after,
.screener-search-btn.btn:focus::after {
    left: 112%;
    opacity: 0.58;
}

.screener-search-btn.btn:disabled {
    background: rgba(15, 31, 58, 0.62) !important;
    border-color: rgba(148, 213, 255, 0.22) !important;
    box-shadow: none !important;
    color: rgba(226, 232, 240, 0.54) !important;
    opacity: 1;
    transform: none;
}

.screener-universe-label {
    margin-bottom: 0.25rem;
}

.screener-universe-select.form-select {
    background-color: rgba(8, 18, 36, 0.72) !important;
    border: 1px solid rgba(32, 217, 255, 0.18) !important;
    color: var(--text-primary) !important;
    min-height: 38px;
}

.screener-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px !important;
    margin-bottom: 6px !important;
}

.screener-chip-list .form-check {
    margin: 0;
    padding: 0;
}

.screener-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(32, 217, 255, 0.18);
    border-radius: 999px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 7px 11px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.screener-chip-list input:checked + .screener-chip {
    background: rgba(0, 191, 154, 0.16);
    border-color: rgba(0, 191, 154, 0.54);
    color: #b7fff0;
}

.screener-expert-panel {
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding-top: 12px;
}

.screener-card #adv-filter-suggestions,
.screener-results-shell {
    margin-top: 6px !important;
}

.screener-result-heading {
    align-items: center;
    color: var(--text-primary);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

.screener-result-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.screener-result-card {
    background:
        radial-gradient(circle at 10% 0%, rgba(32, 217, 255, 0.10), transparent 38%),
        linear-gradient(145deg, rgba(15, 35, 70, 0.88), rgba(8, 18, 36, 0.94));
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20);
    padding: 13px;
}

/* Sections « fonds » et « autres actifs du fournisseur » : elles vivent SOUS
   les résultats chiffrés et ne portent pas de métriques. Sans séparation, deux
   sections empilées sous une grille de cartes se lisaient comme la suite de
   cette grille — et un actif sans tuiles de performance passait alors pour une
   carte cassée plutôt que pour un actif d'un autre périmètre. */
.screener-funds-shell {
    border-top: 1px solid rgba(125, 211, 252, 0.18);
    margin-top: 18px;
    padding-top: 14px;
}

.screener-funds-title {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.screener-result-card-directory,
.screener-result-card-fund {
    /* Encre plus sobre que les cartes du catalogue : ces actifs sont
       proposés, pas mis en avant — ils n'ont pas de score à défendre. */
    background: linear-gradient(145deg, rgba(15, 30, 58, 0.72), rgba(8, 18, 36, 0.86));
    border-color: rgba(148, 163, 184, 0.22);
}

.screener-result-card-directory .screener-result-isin,
.screener-result-card-fund .screener-result-isin {
    opacity: 0.85;
}

.screener-result-name {
    color: var(--text-primary);
    display: block;
    font-size: 1rem;
    line-height: 1.2;
}

.screener-result-price-block {
    background: rgba(148, 163, 184, 0.07);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    min-width: 126px;
    padding: 8px 10px;
    text-align: right;
}

.screener-result-price-wrap {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
}

.screener-result-price-block.is-positive {
    background:
        radial-gradient(circle at 0% 0%, rgb(0 191 154 / var(--move-alpha, 0.14)), transparent 72%),
        rgba(0, 191, 154, 0.05);
    border-color: rgba(0, 191, 154, 0.28);
}

.screener-result-price-block.is-negative {
    background:
        radial-gradient(circle at 0% 0%, rgb(249 115 91 / var(--move-alpha, 0.14)), transparent 72%),
        rgba(249, 115, 91, 0.05);
    border-color: rgba(249, 115, 91, 0.30);
}

.screener-result-price {
    color: rgba(234, 252, 255, 0.92);
    font-size: clamp(1.02rem, 1.15vw, 1.28rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.screener-result-price-move {
    color: rgba(203, 213, 225, 0.78);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    margin-top: 5px;
    min-height: 0.72rem;
}

.screener-result-price-block.is-positive .screener-result-price-move {
    color: #00bf9a;
}

.screener-result-price-block.is-negative .screener-result-price-move {
    color: #f9735b;
}

.screener-result-badges {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.screener-result-badges .badge {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.screener-result-badges .screener-result-badges {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.screener-result-identifiers {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 4px;
}

.screener-result-ticker,
.screener-result-isin {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.screener-result-metrics {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 10px 0 9px;
}

.screener-chart-panel {
    background:
        radial-gradient(circle at 85% 0%, rgba(0, 191, 154, 0.12), transparent 42%),
        rgba(3, 10, 24, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 15px;
    margin: 11px 0 10px;
    padding: 8px;
}

.screener-chart-title {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.screener-asset-chart-img {
    display: block;
    height: auto;
    width: 100%;
}

.screener-asset-chart-wrap {
    position: relative;
}

.screener-chart-hover-layer {
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.screener-hover-point {
    background: rgba(255, 255, 255, 0.001);
    border-radius: 999px;
    cursor: crosshair;
    height: 16px;
    pointer-events: auto;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 16px;
    z-index: 3;
}

.screener-hover-point:hover {
    background: rgba(32, 217, 255, 0.22);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.72), 0 0 16px rgba(32, 217, 255, 0.38);
    z-index: 40;
}

.screener-hover-tooltip {
    background: rgba(8, 18, 36, 0.96);
    border: 1px solid rgba(32, 217, 255, 0.35);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30);
    color: #eaf6ff;
    font-size: 0.72rem;
    font-weight: 800;
    left: 50%;
    letter-spacing: 0.01em;
    line-height: 1;
    opacity: 0;
    padding: 7px 9px;
    pointer-events: none;
    position: absolute;
    top: -12px;
    transform: translate(-50%, -100%) scale(0.96);
    transition: opacity 0.12s ease, transform 0.12s ease;
    white-space: nowrap;
    z-index: 20;
}

.screener-hover-point--below .screener-hover-tooltip {
    top: 24px;
    transform: translate(-50%, 0) scale(0.96);
}

.screener-hover-point--right .screener-hover-tooltip {
    left: 0;
    transform: translate(0, -100%) scale(0.96);
}

.screener-hover-point--left .screener-hover-tooltip {
    left: auto;
    right: 0;
    transform: translate(0, -100%) scale(0.96);
}

.screener-hover-point:hover .screener-hover-tooltip {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
}

.screener-hover-point--below:hover .screener-hover-tooltip {
    transform: translate(-50%, 0) scale(1);
}

.screener-hover-point--right:hover .screener-hover-tooltip,
.screener-hover-point--left:hover .screener-hover-tooltip {
    transform: translate(0, -100%) scale(1);
}

.screener-hover-point--below.screener-hover-point--right:hover .screener-hover-tooltip,
.screener-hover-point--below.screener-hover-point--left:hover .screener-hover-tooltip {
    transform: translate(0, 0) scale(1);
}

.screener-hover-point--below.screener-hover-point--right .screener-hover-tooltip,
.screener-hover-point--below.screener-hover-point--left .screener-hover-tooltip {
    transform: translate(0, 0) scale(0.96);
}

.screener-chart-empty {
    align-items: center;
    border: 1px dashed rgba(148, 163, 184, 0.24);
    border-radius: 12px;
    color: var(--text-muted);
    display: flex;
    font-size: 0.76rem;
    justify-content: center;
    min-height: 92px;
}

.screener-score-row {
    display: grid;
    gap: 8px;
    /* auto-fit collapses empty tracks: 1-3 chips (a chip is hidden entirely
       when its underlying score has no real data yet, see
       asset_filter_callbacks._build_score_row) all reflow to fill the row
       evenly instead of leaving a gap where a 3rd column would have been. */
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    margin: 0 0 10px;
}

.screener-score-chip {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(148, 163, 184, 0.11);
    border-radius: 12px;
    padding: 8px 7px;
}

.screener-score-chip small {
    color: var(--text-muted);
    display: block;
    font-size: 0.62rem;
    line-height: 1.1;
}

.screener-score-chip strong {
    color: var(--text-primary);
    display: block;
    font-size: 0.83rem;
    margin-top: 4px;
}

.score-gradient {
    background: linear-gradient(135deg, rgba(32, 217, 255, 0.12), rgba(59, 130, 246, 0.07));
    border-color: rgba(32, 217, 255, 0.30);
}

.score-market {
    background: linear-gradient(135deg, rgba(0, 191, 154, 0.12), rgba(32, 217, 255, 0.05));
    border-color: rgba(0, 191, 154, 0.28);
}

.score-community {
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.10), rgba(148, 163, 184, 0.04));
    border-color: rgba(125, 211, 252, 0.24);
}

.screener-result-metrics > div {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 12px;
    padding: 7px 7px 7px 10px;
}

.screener-metric-tile {
    overflow: hidden;
    position: relative;
}

.screener-metric-tile::before {
    border-radius: 999px;
    bottom: 8px;
    content: "";
    left: 0;
    position: absolute;
    top: 8px;
    width: 3px;
}

.screener-metric-tile.is-positive {
    background: linear-gradient(135deg, rgba(0, 191, 154, 0.15), rgba(8, 18, 36, 0.22));
    border-color: rgba(0, 191, 154, 0.28);
}

.screener-metric-tile.is-positive::before {
    background: #00bf9a;
}

.screener-metric-tile.is-positive strong {
    color: #00bf9a;
}

.screener-metric-tile.is-negative,
.screener-metric-tile.is-danger {
    background: linear-gradient(135deg, rgba(249, 115, 91, 0.15), rgba(8, 18, 36, 0.22));
    border-color: rgba(249, 115, 91, 0.30);
}

.screener-metric-tile.is-negative::before,
.screener-metric-tile.is-danger::before {
    background: #f9735b;
}

.screener-metric-tile.is-negative strong,
.screener-metric-tile.is-danger strong {
    color: #f9735b;
}

.screener-metric-tile.is-warning {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.13), rgba(8, 18, 36, 0.20));
    border-color: rgba(251, 191, 36, 0.26);
}

.screener-metric-tile.is-warning::before {
    background: #fbbf24;
}

.screener-metric-tile.is-warning strong {
    color: #fbbf24;
}

.screener-metric-tile.is-info {
    background: linear-gradient(135deg, rgba(32, 217, 255, 0.13), rgba(8, 18, 36, 0.20));
    border-color: rgba(32, 217, 255, 0.26);
}

.screener-metric-tile.is-info::before {
    background: var(--cyan-highlight);
}

.screener-metric-tile.is-info strong {
    color: #b7efff;
}

.screener-result-metrics small {
    color: var(--text-muted);
    display: block;
    font-size: 0.64rem;
    line-height: 1.05;
    margin-bottom: 3px;
}

.screener-result-metrics strong {
    color: var(--text-primary);
    display: block;
    font-size: 0.84rem;
    line-height: 1.05;
}

.screener-result-reason {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 8px 0 12px;
}

.screener-add-asset-btn.btn {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(0, 191, 154, 0.16), rgba(32, 217, 255, 0.10)) !important;
    border: 1px solid rgba(0, 191, 154, 0.46) !important;
    border-radius: 999px !important;
    color: #b7fff0 !important;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 800;
    gap: 5px;
    letter-spacing: 0.01em;
    padding: 7px 11px !important;
    box-shadow: 0 8px 22px rgba(0, 191, 154, 0.10);
}

.screener-add-asset-btn.btn:hover,
.screener-add-asset-btn.btn:focus {
    background:
        linear-gradient(135deg, rgba(0, 191, 154, 0.26), rgba(32, 217, 255, 0.16)) !important;
    border-color: rgba(32, 217, 255, 0.58) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px rgba(0, 191, 154, 0.18);
}

.selected-assets-summary-card {
    background:
        radial-gradient(circle at top left, rgba(0, 191, 154, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(8, 18, 36, 0.90), rgba(15, 82, 101, 0.42)) !important;
    border: 1px solid rgba(0, 191, 154, 0.24) !important;
    border-radius: 18px !important;
    margin-top: 14px;
    overflow: hidden;
}

.selected-assets-summary-header {
    align-items: center;
    background: rgba(8, 18, 36, 0.44) !important;
    border-bottom: 1px solid rgba(0, 191, 154, 0.18) !important;
    color: #b7fff0;
    display: flex;
    font-size: 1.02rem;
    font-weight: 900;
    padding: 13px 16px !important;
}

.selected-assets-summary-body {
    padding: 12px 14px !important;
}

.selected-assets-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selected-asset-chip {
    align-items: center;
    background: rgba(255, 255, 255, 0.065);
    border: 1px solid rgba(32, 217, 255, 0.18);
    border-radius: 999px;
    color: var(--text-primary);
    display: inline-flex;
    gap: 8px;
    max-width: 360px;
    padding: 7px 8px 7px 11px;
}

.selected-asset-copy {
    align-items: baseline;
    display: inline-flex;
    gap: 6px;
    min-width: 0;
}

.selected-asset-ticker {
    color: var(--cyan-highlight);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.selected-asset-name {
    color: rgba(226, 232, 240, 0.88);
    font-size: 0.82rem;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selected-asset-remove {
    align-items: center;
    appearance: none;
    background: rgba(249, 115, 91, 0.12);
    border: 1px solid rgba(249, 115, 91, 0.28);
    border-radius: 999px;
    color: #ffb4a8;
    cursor: pointer;
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 950;
    height: 22px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 22px;
}

.selected-asset-remove:hover,
.selected-asset-remove:focus-visible {
    background: rgba(249, 115, 91, 0.24);
    border-color: rgba(249, 115, 91, 0.54);
    color: #ffffff;
    outline: none;
}

@media (max-width: 1199px) {
    .screener-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .screener-result-grid {
        grid-template-columns: 1fr;
    }

    .strategy-context-grid {
        grid-template-columns: 1fr;
    }

    .simple-strategy-options {
        grid-template-columns: 1fr;
    }

    .creation-flow-controls {
        justify-items: start;
    }

    .screener-result-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .screener-result-price-wrap {
        align-items: flex-start;
    }

    .screener-result-badges,
    .screener-result-badges .screener-result-badges {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .screener-result-price-block {
        text-align: left;
    }

    .screener-result-price {
        text-align: left;
    }
}

.screener-more-results,
.screener-more-details {
    align-items: center;
    border: 1px dashed rgba(148, 163, 184, 0.30);
    border-radius: 16px;
    color: var(--text-secondary);
    font-weight: 700;
    min-height: 96px;
}

.screener-more-results {
    display: flex;
    justify-content: center;
}

.screener-more-details {
    background:
        radial-gradient(circle at 12% 0%, rgba(32, 217, 255, 0.08), transparent 36%),
        rgba(8, 18, 36, 0.38);
    grid-column: 1 / -1;
    min-height: 0;
    overflow: hidden;
}

.screener-more-summary {
    align-items: center;
    color: #b7efff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-height: 74px;
    padding: 16px;
    transition: background-color 0.16s ease, color 0.16s ease;
}

.screener-more-summary:hover,
.screener-more-summary:focus-visible {
    background: rgba(32, 217, 255, 0.08);
    color: #ffffff;
    outline: none;
}

.screener-result-grid-extra {
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding: 14px;
}

[data-theme="light"] .screener-card {
    background:
        radial-gradient(circle at 4% 0%, rgba(14, 165, 233, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.78)) !important;
}

[data-theme="light"] .screener-result-card,
[data-theme="light"] .screener-search-group .form-control {
    background: rgba(255, 255, 255, 0.84) !important;
    color: #0f172a !important;
}

[data-theme="light"] .screener-universe-select.form-select {
    background-color: rgba(255, 255, 255, 0.86) !important;
    color: #0f172a !important;
}

[data-theme="light"] .screener-chart-panel,
[data-theme="light"] .screener-score-chip,
[data-theme="light"] .screener-result-metrics > div {
    background: rgba(248, 250, 252, 0.82);
}

[data-theme="light"] .screener-chip {
    background: rgba(15, 23, 42, 0.04);
    color: #334155;
}

.filter-card-paused {
    background:
        radial-gradient(circle at 10% 0%, rgba(32, 217, 255, 0.10), transparent 34%),
        linear-gradient(135deg, rgba(8, 21, 42, 0.78), rgba(14, 57, 89, 0.38)) !important;
}

.filter-paused-header {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.filter-paused-title {
    align-items: center;
    color: var(--color-accent);
    display: inline-flex;
    font-size: 0.92rem;
    font-weight: 700;
}

.filter-paused-badge {
    background: rgba(148, 163, 184, 0.18) !important;
    border: 1px solid rgba(148, 163, 184, 0.24);
    color: var(--text-secondary) !important;
    font-weight: 700;
}

.filter-paused-hidden-toggle {
    display: none !important;
}

.filter-paused-body-title {
    align-items: center;
    color: var(--text-primary);
    display: inline-flex;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.filter-paused-body-text {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
    margin: 0;
}

[data-theme="light"] .filter-card-paused {
    background:
        radial-gradient(circle at 10% 0%, rgba(14, 165, 233, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.72)) !important;
}

/* Sidebar folders accordion — readable headers in both themes.
   Override BS5's --bs-accordion-btn-color CSS variable directly so DBC's
   inline styles can't beat us via specificity. */
/* ============================================================
   SIDEBAR « MES STRATÉGIES » — refonte DA (05/08/2026)
   Signature Explorer : fonds quasi transparents, hairlines,
   accent cyan doux (#22d3ee) réservé au survol / état ouvert,
   une encre par niveau (texte #cbd5e1, métadonnées #64748b).
   Jamais de pastille opaque ni d'icône de couleur vive.
   ============================================================ */
.sidebar-section-heading {
    font-size: 0.7rem !important;
    letter-spacing: 1.6px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary) !important;
}
.sidebar-add-btn,
.sidebar-add-btn:focus,
.sidebar-add-btn:active {
    display: block;
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
    background: transparent !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 10px !important;
    color: #cbd5e1 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px;
    text-transform: none;
    padding: 7px 10px !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.sidebar-add-btn:hover {
    background: rgba(34, 211, 238, 0.05) !important;
    border-color: rgba(34, 211, 238, 0.35) !important;
    color: #ffffff !important;
}

.sidebar-accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: transparent;
    padding: 0 8px;
}
.sidebar-accordion .accordion-item,
.sidebar-accordion .accordion-item.sidebar-folder-item {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.sidebar-accordion .accordion-item:last-child {
    border-bottom: none !important;
}
.sidebar-accordion .accordion-header {
    background-color: transparent !important;
}
.sidebar-accordion .accordion-button,
.sidebar-accordion .accordion-button.collapsed,
.sidebar-accordion .accordion-button:not(.collapsed) {
    background: transparent !important;
    color: #cbd5e1 !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    padding: 9px 10px !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-accordion .accordion-button:hover {
    background: rgba(34, 211, 238, 0.045) !important;
    color: #ffffff !important;
}
.sidebar-accordion .accordion-button:not(.collapsed) {
    color: #ffffff !important;
    background: rgba(34, 211, 238, 0.06) !important;
    box-shadow: inset 2px 0 0 rgba(34, 211, 238, 0.55) !important;
}
.sidebar-accordion .accordion-button:focus {
    outline: none !important;
}
.sidebar-accordion .accordion-button:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.4) !important;
    outline: none !important;
}
.sidebar-accordion .accordion-button::after {
    width: 0.85rem;
    height: 0.85rem;
    background-size: 0.85rem;
    filter: brightness(0) invert(1);
    opacity: 0.45;
}
.sidebar-accordion .accordion-button:not(.collapsed)::after {
    opacity: 0.8;
}
.sidebar-accordion .accordion-body {
    padding: 2px 0 8px 10px !important;
    margin-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.07);
    background-color: transparent !important;
}

/* Titre d'accordéon : icône muette, nom tronqué, compteur en chip */
.sidebar-folder-title {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.sidebar-folder-title .sidebar-folder-icon {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: #64748b;
    transition: color 0.15s ease;
}
.sidebar-accordion .accordion-button:hover .sidebar-folder-icon,
.sidebar-accordion .accordion-button:not(.collapsed) .sidebar-folder-icon {
    color: #22d3ee;
}
.sidebar-folder-title .sidebar-folder-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-count-chip {
    flex: 0 0 auto;
    margin-left: 8px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 1px 8px;
}
.sidebar-accordion .accordion-button:not(.collapsed) .sidebar-count-chip {
    color: #a5f3fc;
    background: rgba(34, 211, 238, 0.12);
}

/* Rangée stratégie : lien + corbeille révélée au survol seulement */
.sidebar-strategy-row {
    border-radius: 8px;
    transition: background 0.15s ease;
}
.sidebar-strategy-row:hover {
    background: rgba(34, 211, 238, 0.045);
}
.sidebar-strategy-row .sidebar-link,
.sidebar-preset-link {
    color: #b6c2d3 !important;
    font-size: 0.8rem;
    padding: 6px 4px 6px 8px !important;
}
.sidebar-strategy-row .sidebar-link:hover,
.sidebar-preset-link:hover {
    color: #ffffff !important;
}
.sidebar-strategy-icon {
    font-size: 0.72rem;
    color: #64748b;
}
.sidebar-strategy-delete {
    opacity: 0;
    color: #64748b !important;
    cursor: pointer;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.sidebar-strategy-row:hover .sidebar-strategy-delete,
.sidebar-strategy-delete:focus-visible {
    opacity: 1;
}
.sidebar-strategy-delete:hover {
    color: #ef4444 !important;
}

/* Bibliothèque de presets : carte hairline cyan, très discrète */
.sidebar-accordion--presets .accordion-item.sidebar-preset-item {
    border: 1px solid rgba(34, 211, 238, 0.14) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg,
        rgba(34, 211, 238, 0.05) 0%,
        rgba(34, 211, 238, 0.015) 60%,
        transparent 100%) !important;
    overflow: hidden;
}
.sidebar-accordion--presets .accordion-button,
.sidebar-accordion--presets .accordion-button.collapsed,
.sidebar-accordion--presets .accordion-button:not(.collapsed) {
    background: transparent !important;
    box-shadow: none !important;
}
.sidebar-accordion--presets .accordion-button:hover {
    background: rgba(34, 211, 238, 0.05) !important;
}
.sidebar-preset-separator {
    height: 1px;
    margin: 8px 20px 10px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 211, 238, 0.28) 50%,
        transparent 100%);
}
.sidebar-preset-category-header {
    color: var(--text-tertiary) !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.8px;
}

/* --- Thème clair : mêmes structures, encres inversées --- */
/* MAJEUR mesuré 28/08 : `.sidebar-link` (les 11 onglets de nav + le tiroir
   mobile, qui réutilise la même classe) n'avait JAMAIS reçu de variante
   claire -- seules les lignes de `.sidebar-strategy-row`/`.sidebar-preset-link`
   en avaient une, plus bas dans ce fichier. Sous ce thème le lien inactif
   restait à #abb6c5 (pensé pour le fond quasi noir de la sidebar sombre),
   mesuré ~2,05:1 sur le fond `--bg-card` clair -- sous le plancher partout.
   #475569 = même encre que `--text-secondary` clair (déjà ~7,4:1 mesuré sur
   ce même fond translucide), pour rester cohérent avec le reste de l'app.
   Spécificité 0,2,0, sans !important : la règle de base `.sidebar-link`
   (0,1,0, dark par défaut) est déjà battue par simple spécificité. L'état
   survolé/actif est réaffirmé juste après à 0,3,0 pour ne JAMAIS être
   recouvert par cette règle malgré l'ordre du fichier (même spécificité
   0,2,0 que `.sidebar-link:hover` sinon -- le dernier déclaré gagnerait). */
[data-theme="light"] .sidebar-link {
    color: #475569;
}
[data-theme="light"] .sidebar-link:hover,
[data-theme="light"] .sidebar-link:focus-visible,
[data-theme="light"] .sidebar-link.active {
    color: var(--color-accent);
}
[data-theme="light"] .sidebar-section-heading {
    color: #64748b !important;
}
[data-theme="light"] .sidebar-add-btn,
[data-theme="light"] .sidebar-add-btn:focus,
[data-theme="light"] .sidebar-add-btn:active {
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #334155 !important;
}
[data-theme="light"] .sidebar-add-btn:hover {
    background: rgba(8, 145, 178, 0.06) !important;
    border-color: rgba(8, 145, 178, 0.4) !important;
    color: #0f172a !important;
}
[data-theme="light"] .sidebar-accordion .accordion-item,
[data-theme="light"] .sidebar-accordion .accordion-item.sidebar-folder-item {
    border-bottom-color: rgba(15, 23, 42, 0.07) !important;
}
[data-theme="light"] .sidebar-accordion .accordion-button,
[data-theme="light"] .sidebar-accordion .accordion-button.collapsed,
[data-theme="light"] .sidebar-accordion .accordion-button:not(.collapsed) {
    color: #334155 !important;
}
[data-theme="light"] .sidebar-accordion .accordion-button:hover,
[data-theme="light"] .sidebar-accordion .accordion-button:not(.collapsed) {
    color: #0f172a !important;
    background: rgba(8, 145, 178, 0.06) !important;
}
[data-theme="light"] .sidebar-accordion .accordion-button:not(.collapsed) {
    box-shadow: inset 2px 0 0 rgba(8, 145, 178, 0.6) !important;
}
[data-theme="light"] .sidebar-accordion .accordion-button::after {
    filter: none;
    opacity: 0.55;
}
[data-theme="light"] .sidebar-accordion .accordion-body {
    border-left-color: rgba(15, 23, 42, 0.09);
}
[data-theme="light"] .sidebar-count-chip {
    color: #475569;
    background: rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .sidebar-accordion .accordion-button:not(.collapsed) .sidebar-count-chip {
    color: #0e7490;
    background: rgba(8, 145, 178, 0.12);
}
[data-theme="light"] .sidebar-strategy-row:hover {
    background: rgba(8, 145, 178, 0.05);
}
[data-theme="light"] .sidebar-strategy-row .sidebar-link,
[data-theme="light"] .sidebar-preset-link {
    color: #475569 !important;
}
[data-theme="light"] .sidebar-strategy-row .sidebar-link:hover,
[data-theme="light"] .sidebar-preset-link:hover {
    color: #0f172a !important;
}
[data-theme="light"] .sidebar-accordion--presets .accordion-item.sidebar-preset-item {
    border-color: rgba(8, 145, 178, 0.22) !important;
    background: linear-gradient(135deg,
        rgba(8, 145, 178, 0.06) 0%,
        rgba(8, 145, 178, 0.02) 60%,
        transparent 100%) !important;
}

/* Trailing-stop switch: keep label + toggle inside the card, allow wrap */
.trailing-stop-col .form-switch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding-left: 2.6em;  /* default form-switch indent for the toggle handle */
}
.trailing-stop-col .form-switch .form-check-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
    font-size: 0.85rem;
}

.col-4 .card-body hr {
    margin: 10px 0 !important;
    opacity: 0.15;
}

/* --- Tabs --- */

/* Hidden tabs: hide the tab navigation bar (sidebar handles navigation) */
/* Hide ALL tab navigation — sidebar is the only nav */
#main-tabs [role="tablist"],
#main-tabs > .nav,
#main-tabs > div > .nav,
#main-tabs .nav-tabs,
.hidden-tabs .nav-tabs,
.hidden-tabs .nav,
.hidden-tabs [role="tablist"] {
    display: none !important;
}

/* Also hide any stray nav-link with role=tab inside main-tabs */
#main-tabs > a.nav-link[role="tab"],
#main-tabs > div > a.nav-link[role="tab"] {
    display: none !important;
}

/* Ensure tab panes behave correctly */
.hidden-tabs .tab-pane {
    display: none !important;
}
.hidden-tabs .tab-pane.active,
.hidden-tabs .tab-pane.show {
    display: block !important;
}

.nav-tabs {
    border-bottom: 1px solid var(--border-light) !important;
}

.nav-link {
    color: var(--text-secondary) !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
}

.nav-link.active {
    color: var(--color-accent) !important;
    background-color: transparent !important;
    border-bottom: 2px solid var(--color-accent) !important;
}

.nav-link:hover {
    color: var(--color-accent-hover) !important;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ==========================================================================
   MICRO-INTERACTIONS
   ========================================================================== */

/* .card:hover merged into main definition above */

.btn:active {
    transform: scale(0.97);
}

.metric-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Toast notification animation */
.toast-notification {
    animation: slideInRight 0.3s ease-out;
    will-change: transform;
    backface-visibility: hidden;
    max-width: min(350px, 90vw);
}
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Z-index hierarchy */
.toast-container, .notification-container, #toast-container {
    z-index: 1050;
}
.modal {
    z-index: 1060;
}

/* Smooth transitions for interactive elements.
   Perf 04/08 : .sidebar-link RETIRÉ de ce groupe — cette règle (plus bas
   dans le fichier, donc gagnante à spécificité égale) écrasait la
   transition scopée 0.12s posée sur .sidebar-link et ré-imposait 200 ms de
   fade sur la surbrillance de navigation (mesuré au transitionend). */
.nav-link, .dropdown-item, input, select, textarea {
    transition: all 0.2s ease;
}

/* Breadcrumb styling for dark theme */
.breadcrumb {
    background: transparent;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
}
.breadcrumb-item a:hover {
    color: var(--primary-blue);
}
.breadcrumb-item.active {
    color: var(--text-tertiary);
}

/* ==========================================================================
   MOBILE & RESPONSIVE OPTIMIZATIONS
   ========================================================================== */

/* Toggle Button for Sidebar (Mobile Only) */
#mobile-sidebar-toggle {
    display: none;
    /* Hidden on desktop */
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1050;
    /* Above everything */
    padding: 10px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--primary-blue);
    cursor: pointer;
    transition: all 0.3s ease;
}

#mobile-sidebar-toggle:hover {
    transform: scale(1.1);
    color: var(--cyan-highlight);
}

/* Overlay for Mobile Sidebar */
#mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    z-index: 99;
    /* Below sidebar, above content */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#mobile-overlay.active {
    display: block;
    opacity: 1;
}

/* --- MEDIA QUERIES (Mobile only) --- */
@media (max-width: 767.98px) {

    /* 1. Layout & Sidebar */
    .sidebar {
        left: -290px;
        /* Hidden by default */
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.2);
    }

    .sidebar.active {
        left: 0;
        /* Slide in */
    }

    .content-wrapper {
        margin-left: 0;
        /* Full width */
        padding: 15px;
        /* Reduced padding */
        padding-top: 70px;
        /* Space for toggle button */
    }

    /* Show Toggle Button */
    #mobile-sidebar-toggle {
        display: block;
    }

    /* 2. Typography & Fonts */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4,
    h5,
    h6 {
        font-size: 1.1rem;
    }

    /* 3. Components adjustments */

    /* Wizard Badge Container - Scrollable horizontal if needed */
    #wizard-progress-container .d-flex,
    .text-center.mb-4 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    /* Wizard Choices cards vertical stack */
    .wizard-choice-card {
        margin-bottom: 15px;
    }

    /* Asset Selector Dropdowns */
    .section-card-header .row {
        flex-direction: column;
    }

    .section-card-header .text-right {
        text-align: left !important;
        margin-top: 0.5rem;
    }

    /* Date Picker Responsive */
    .DateInput {
        width: 100px !important;
    }

    .DateRangePickerInput {
        width: 100% !important;
        display: flex;
        justify-content: space-between;
    }

    /* Tables & Graphs scroll */
    .dash-graph-container,
    .dash-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Buttons touch friendly */
    .btn {
        min-height: 44px;
        /* Apple Human Interface Guidelines */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 4. Modals */
    .modal-dialog {
        margin: 10px;
    }
}

/* --- SMALL MOBILE (Phones: < 576px) --- */
@media (max-width: 575.98px) {
    .content-wrapper {
        padding: 10px;
        padding-top: 70px;
    }

    /* Stack buttons in Wizard Footer */
    #wizard-step-4 .row .col-md-6,
    #wizard-step-1 .row .col-md-6 {
        margin-bottom: 10px;
    }

    /* Adjust charts height */
    .js-plotly-plot {
        height: 350px !important;
    }
}

/* --- PORTRAIT MODE (narrow viewports) --- */
@media (max-width: 767.98px) and (orientation: portrait) {
    /* Force single-column on all Bootstrap grids */
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Strategy blocks: stack vertically */
    .section-card-header .row {
        flex-direction: column;
    }

    /* Tables: horizontal scroll */
    .dash-spreadsheet-container,
    .dash-table-container,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
    }

    /* Graphs fit viewport */
    .js-plotly-plot,
    .dash-graph {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Cards: reduce padding */
    .card { margin-bottom: 12px; }
    .card-body { padding: 12px; }
    .card-header { padding: 10px 12px; }

    /* Title boxes: smaller */
    .title-box { margin: 10px 0 !important; }
    .title-box h2 { font-size: 1.2rem; }

    /* Sidebar links: bigger touch targets */
    .sidebar-link { padding: 12px 16px !important; font-size: 0.95rem; }

    /* Hide non-essential on mobile portrait */
    .d-none-portrait { display: none !important; }
}

/* === COMMUNITY COMMENT CARDS (Sprint E) === */
.comment-card {
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.08), transparent 32%),
        rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(2, 8, 23, 0.18);
}

.comment-card .card-body {
    padding: 11px 14px;
}

.comment-card-pending {
    border-color: rgba(34, 211, 238, 0.30);
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.10), rgba(0, 212, 170, 0.08)),
        rgba(15, 23, 42, 0.92);
}

.comment-pending-badge {
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 999px;
    color: #67e8f9;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    text-transform: uppercase;
}

.comment-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.comment-meta {
    align-items: center;
    color: #94a3b8;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    min-width: 0;
}

.comment-author-name {
    color: #e2e8f0;
    font-weight: 700;
}

.comment-date {
    white-space: nowrap;
}

.comment-text {
    color: #e2e8f0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.comment-upvote-btn,
.comment-upvote-static {
    align-items: center;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 999px;
    color: #67e8f9;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    gap: 4px;
    line-height: 1;
    padding: 5px 9px;
    text-decoration: none;
}

.comment-upvote-disabled {
    opacity: 0.62;
}

.comment-upvote-btn:hover,
.comment-upvote-btn:focus {
    background: rgba(34, 211, 238, 0.16);
    border-color: rgba(34, 211, 238, 0.4);
    color: #cffafe;
    text-decoration: none;
}

.comment-upvote-count {
    min-width: 1.15em;
    text-align: center;
    transition: color 0.15s ease, transform 0.15s ease;
}

/* ======================================================
   TRAINING — Accordion & Module list
   ====================================================== */

#training-parts-accordion .accordion-item {
    background: transparent;
    border: 1px solid var(--border-light, rgba(255,255,255,0.1));
    margin-bottom: 8px;
    border-radius: 8px !important;
    overflow: hidden;
}

#training-parts-accordion .accordion-button {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #e2e8f0);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 14px 20px;
    border: none;
    box-shadow: none;
}

#training-parts-accordion .accordion-button:not(.collapsed) {
    background: rgba(99, 102, 241, 0.12);
    color: var(--accent-primary, #6366f1);
    box-shadow: none;
}

#training-parts-accordion .accordion-button::after {
    filter: invert(0.8);
}

#training-parts-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: var(--accent-primary, #6366f1);
}

#training-parts-accordion .accordion-body {
    background: transparent;
    padding: 8px 12px;
}

/* ======================================================
   TRAINING — Step-by-step navigation
   ====================================================== */

.training-stepper {
    display: flex;
    align-items: center;
    padding: 8px 4px;
    overflow-x: auto;
    gap: 0;
}

.training-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.training-dot.active {
    background: var(--accent-primary, #6366f1);
    color: white;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}

.training-dot.completed {
    background: #28a745;
    color: white;
}

.training-dot.upcoming {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted, #6c757d);
    border: 1px solid var(--border-light, rgba(255,255,255,0.1));
}

.training-dot-line {
    flex: 1;
    height: 2px;
    min-width: 12px;
    max-width: 40px;
    background: var(--border-light, rgba(255,255,255,0.1));
    transition: background 0.3s ease;
}

.training-dot-line.completed {
    background: #28a745;
}

/* Inline quiz styling */
.training-inline-quiz {
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.15);
}

/* Callout styling */
.training-callout {
    border-radius: 8px;
    border-left: 4px solid;
}

.training-callout.alert-success { border-left-color: #28a745; }
.training-callout.alert-warning { border-left-color: #ffc107; }
.training-callout.alert-info { border-left-color: #17a2b8; }
.training-callout.alert-secondary { border-left-color: #6c757d; }

/* Clickable dots */
.training-dot.completed,
.training-dot.active {
    cursor: pointer;
}

.training-dot.completed:hover,
.training-dot.active:hover {
    filter: brightness(1.2);
}

/* Section fade-in transition */
#training-section-display {
    animation: trainingFadeIn 0.3s ease-out;
}

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

/* Quiz radio visual feedback on selection */
.training-inline-quiz .form-check-input:checked + .form-check-label {
    color: var(--accent-primary, #6366f1);
    font-weight: 500;
    transition: color 0.2s ease;
}

/* Validation success animation */
.training-quiz-success {
    animation: trainingSuccessPulse 0.4s ease-out;
}

@keyframes trainingSuccessPulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    60% { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

/* Tablet responsive */
@media (max-width: 767.98px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }

    .form-control,
    .form-select {
        font-size: 0.9rem;
    }

    .card-body {
        padding: 0.75rem;
    }
}

/* Mobile responsive */
@media (max-width: 576px) {
    .training-dot {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    .training-dot-line {
        min-width: 6px;
        max-width: 20px;
    }
    #training-nav-buttons {
        position: sticky;
        bottom: 0;
        background: var(--card-bg, #1a1a2e);
        padding: 12px 0;
        border-top: 1px solid var(--border-light, rgba(255,255,255,0.1));
        z-index: 50;
    }
}

/* ======================================================
   PERCEIVED PERFORMANCE — Smooth content appearance
   ====================================================== */

/* Cards fade in smoothly instead of popping */
.card {
    animation: cardFadeIn 0.2s ease-out;
}

@keyframes cardFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hide Dash loading spinner bounce effect — use subtle dot instead */
._dash-loading {
    transition: opacity 0.15s ease;
}

/* Loader Gradient (05/08) : même identité que le splash de boot
   (#app-splash, server.py) — logo pulsé, anneau teal, marque, puis la
   PHASE de calcul en cours. En zone de contenu, jamais en overlay. */
.gradient-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.gradient-loader-logo {
    /* Logo STATIQUE (retour Louis 05/08 : la pulsation scale du splash,
       discrète en plein écran, se lit comme un logo instable dans une
       carte). Le seul mouvement est l'anneau. */
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 24px;
}

.gradient-loader-ring {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(0, 212, 170, 0.2);
    border-top-color: #00d4aa;
    border-radius: 50%;
    animation: gradient-loader-spin 0.8s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}

.gradient-loader-brand {
    color: #00d4aa;
    margin-top: 16px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.gradient-loader-message {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    min-height: 1.4em;
}

@keyframes gradient-loader-spin {
    to { transform: rotate(360deg); }
}

/* Variante compacte pour les zones de contenu (Documents/Conformité,
   31/08) : le 96px du splash écrase une carte de tableau. */
.gradient-loader--compact .gradient-loader-logo {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
}

.gradient-loader--compact .gradient-loader-ring {
    width: 24px;
    height: 24px;
    border-width: 2px;
}

/* min-height : sans elle, le loader se fait ROGNER par une zone de contenu
   encore vide (logo coupe en deux, constat Louis 31/08 « mauvaise taille »). */
.gradient-loader--compact {
    padding: 14px 0;
    min-height: 110px;
    justify-content: center;
}

.backtest-icon-loading {
    animation: backtest-dot-icon-pulse 0.95s ease-in-out infinite;
    will-change: opacity;
    backface-visibility: hidden;
}

@keyframes backtest-dot-icon-pulse {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 1;
    }
}

/* Sidebar lists appear smoothly */
#sidebar-clients-list,
#sidebar-folders-list {
    animation: cardFadeIn 0.25s ease-out;
}

/* Main content area smooth transitions */
.tab-content > .tab-pane.active {
    animation: cardFadeIn 0.2s ease-out;
}

/* ============================
   ONBOARDING TOUR
   ============================ */
.onboarding-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 8% 18%, rgba(0, 212, 170, 0.09), transparent 22%),
        linear-gradient(90deg, rgba(2, 8, 23, 0.18), rgba(2, 8, 23, 0.04));
    z-index: 10000;
    pointer-events: none;
}

.onboarding-tooltip {
    position: fixed;
    top: 92px;
    right: 28px;
    z-index: 10003;
    background:
        linear-gradient(145deg, rgba(17, 35, 64, 0.94), rgba(8, 18, 35, 0.96)),
        var(--card-bg, #111827);
    border: 1px solid rgba(67, 226, 204, 0.28);
    border-radius: 16px;
    padding: 16px 18px;
    max-width: 340px;
    min-width: 280px;
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: trainingFadeIn 0.3s ease-out;
    will-change: transform;
    backface-visibility: hidden;
    pointer-events: auto;
}

.onboarding-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: brightness(1.08) saturate(1.08);
}

.onboarding-brand-block {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.onboarding-brand {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #eaf6ff;
}

.onboarding-step-indicator {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(67, 226, 204, 0.28);
    background: rgba(0, 212, 170, 0.10);
    color: #72f0dd;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.onboarding-title {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.18;
    margin-bottom: 7px;
}

.onboarding-copy {
    color: rgba(220, 236, 255, 0.82);
    font-size: 0.84rem;
    line-height: 1.45;
    margin-bottom: 12px;
}

.onboarding-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
}

.onboarding-highlighted {
    box-shadow:
        0 0 0 3px rgba(67, 226, 204, 0.34),
        0 0 24px rgba(0, 212, 170, 0.26);
    border-radius: 12px;
    will-change: transform;
    backface-visibility: hidden;
}

html[data-onboarding-target="nav-btn-training"] #nav-btn-training,
html[data-onboarding-target="nav-btn-discover"] #nav-btn-discover,
html[data-onboarding-target="nav-btn-creation"] #nav-btn-creation,
html[data-onboarding-target="nav-btn-compare"] #nav-btn-compare,
html[data-onboarding-target="nav-btn-portfolio"] #nav-btn-portfolio,
html[data-onboarding-target="nav-btn-community"] #nav-btn-community,
html[data-onboarding-secondary-targets~="nav-btn-portfolio"] #nav-btn-portfolio {
    position: relative !important;
    z-index: 10002 !important;
    border-radius: 12px;
    box-shadow:
        0 0 0 3px rgba(67, 226, 204, 0.34),
        0 0 24px rgba(0, 212, 170, 0.26) !important;
}

/* --- ACCESSIBILITY: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .blob {
        animation: none !important;
    }

    .card,
    .tab-pane,
    .sidebar-link,
    .onboarding-tooltip {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 767.98px) {
    .onboarding-tooltip {
        left: 16px !important;
        right: 16px !important;
        bottom: 18px !important;
        top: auto !important;
        min-width: 0;
        max-width: none;
    }
}

/* --- Disabled Buttons --- */
button:disabled,
.btn:disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Mobile: disable heavy blob blur --- */
@media (max-width: 767.98px) {
    .blob {
        filter: blur(40px);
        opacity: 0.2;
    }
}

/* ===== Language Switcher — Segmented Pill ===== */
.settings-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
}

.language-switcher-pills {
    display: inline-flex;
    align-items: center;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.language-switcher-pills .form-check {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    min-height: auto;
}

.language-switcher-pills .form-check-input {
    /* Visually hide radio circle while keeping it focusable & interactive */
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.language-switcher-pills .form-check-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 5px 12px;
    margin: 0 !important;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    user-select: none;
    white-space: nowrap;
    line-height: 1;
}

.language-switcher-pills .form-check-label:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .language-switcher-pills .form-check-label:hover {
    background: rgba(15, 23, 42, 0.04);
}

.language-switcher-pills .form-check-input:checked + .form-check-label {
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--color-accent-hover) 100%);
    box-shadow: 0 2px 10px -2px rgba(59, 130, 246, 0.5);
}

.language-switcher-pills .form-check-input:focus-visible + .form-check-label {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Guard against global button-group / form-check-inline margins pushing items apart */
.language-switcher-pills .form-check-inline {
    margin-right: 0 !important;
}
/* ======================================================================
   Training-link inline icon (ⓘ) — opens the offcanvas section panel
   ====================================================================== */

.training-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #00d4aa;
    cursor: pointer;
    /* WCAG 2.5.5 (AA Mobile): 44×44 minimum tap target.
       Padding stays small so the visual icon size matches the design,
       but the hit area expands to the WCAG floor. */
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
    margin: 0 0 0 6px;
    font-size: 0.85em;
    line-height: 1;
    vertical-align: middle;
    border-radius: 4px;
    transition: color 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
    touch-action: manipulation;
}

.training-info-icon:hover {
    color: #66f0d6;
    transform: scale(1.1);
}

.training-info-icon:focus-visible {
    color: #66f0d6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.45);
}

/* Compact variant — for use inline with badges and chips where the 44×44
   tap-target floor would visually dwarf the surrounding row. The parent
   badge itself remains the primary target; the ⓘ is secondary affordance.
   WCAG 2.5.5 (AA Mobile) is preserved at the form-label level — this
   compact form is reserved for dense, visual-density-critical contexts. */
.training-info-icon-compact {
    min-width: 0;
    min-height: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0 0 0 4px;
    font-size: 0.75rem;
    border-radius: 50%;
}

/* Offcanvas content layout: scrollable body + sticky CTA footer.
   The Offcanvas body itself stays scrollable; the footer "Voir le module
   complet" stays glued to the bottom of the panel so users don't need to
   scroll through long sections to discover the action. */
.offcanvas-training-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.offcanvas-training-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 12px;
}

.offcanvas-training-footer {
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 4px 4px 4px;
    margin-top: 8px;
}

/* Training offcanvas panel — slide-from-right help drawer */
/* Largeur commune des volets d'aide (01/09) : historiquement posée en
   style inline sur chaque Offcanvas ; en CSS, le registre de Conformité
   peut la partager sans style inline (charte D1b). */
.training-offcanvas-panel {
    width: min(680px, 90vw);

    background: var(--bg-secondary);
    color: var(--text-primary);
    border-left: 1px solid var(--border-light);
}

.training-offcanvas-panel .offcanvas-header {
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(0, 212, 170, 0.06));
}

.training-offcanvas-panel .offcanvas-title {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.05rem;
}

.training-offcanvas-panel .btn-close {
    filter: invert(1) brightness(1.4);
    opacity: 0.85;
}

.training-offcanvas-panel .btn-close:hover {
    opacity: 1;
}

.offcanvas-training-content {
    font-size: 0.95rem;
    padding: 4px 0;
}

.offcanvas-training-content p {
    margin-bottom: 0.85em;
}

.offcanvas-training-content strong {
    color: #ffffff;
}

/* --- Discover onboarding tab --- */
.discover-shell {
    padding: 4px 0 48px;
}

.discover-hero {
    position: relative;
    overflow: hidden;
    display: block;
    align-items: center;
    padding: 20px 24px;
    margin: 16px 0 24px;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.discover-hero-glow {
    display: none;
}

.discover-hero-content {
    position: relative;
    z-index: 1;
}

.discover-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.66rem !important;
    margin-bottom: 10px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    background: rgba(34, 211, 238, 0.08) !important;
    color: var(--color-accent) !important;
}

.discover-hero-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.discover-hero-title i {
    color: var(--color-accent);
    font-size: 0.9em;
}

.discover-hero-copy {
    max-width: 760px;
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.discover-hero-note {
    max-width: 760px;
    color: rgba(203, 213, 225, 0.72);
    font-size: 0.82rem;
    line-height: 1.45;
    margin: -4px 0 14px;
}

.discover-intent-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.discover-intent-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 650;
    font-size: 0.84rem;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.discover-intent-chip:hover,
.discover-intent-chip:focus-visible {
    color: var(--text-primary);
    border-color: rgba(34, 211, 238, 0.55);
    background: rgba(34, 211, 238, 0.10);
    text-decoration: none;
    transform: translateY(-1px);
    outline: none;
}

.discover-section {
    margin: 28px 0;
}

.discover-section-heading {
    margin-bottom: 16px;
}

.discover-section-title {
    color: var(--text-primary);
    font-weight: 800;
    margin-bottom: 4px;
}

.discover-section-copy {
    color: var(--text-secondary);
    max-width: 760px;
    margin-bottom: 0;
}

/* Catalogue groupé par classe d'actifs (Explorer pro, 24/07) : un intertitre
   discret + le compte de cartes, pour que la page lise comme une
   bibliothèque de desk et non comme un feed à plat. */
.discover-group + .discover-group {
    margin-top: 28px;
}

.discover-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.discover-group-title {
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0;
}

.discover-group-count {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    padding: 1px 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 999px;
}

/* Second niveau de lecture : la cadence de décision (court / moyen / long)
   DANS chaque classe d'actifs. Volontairement plus discret que l'en-tête de
   catégorie — c'est un sous-titre, pas un nouveau chapitre. */
.discover-horizon-block + .discover-horizon-block {
    margin-top: 18px;
}

.discover-horizon-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.discover-horizon-title {
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.discover-horizon-count {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* Les cadences non couvertes sont DITES. Ton neutre : c'est un état du
   catalogue, pas une alerte. */
.discover-horizon-missing {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-style: italic;
    opacity: 0.8;
    margin: 4px 0 0;
}

.discover-strategy-card {
    min-height: 286px;
    border-radius: 22px !important;
    overflow: hidden;
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.discover-strategy-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34, 211, 238, 0.38) !important;
    box-shadow: 0 24px 60px rgba(2, 8, 23, 0.34);
}

.discover-card-title {
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 8px;
}

.discover-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.discover-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.discover-card-heading {
    min-width: 0;
    width: 100%;
}

.discover-card-header .community-forecast-pill {
    max-width: 100%;
    width: fit-content;
}

.discover-card-read-area {
    border-radius: 18px;
    cursor: pointer;
    margin: -6px -6px 8px;
    padding: 6px;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.discover-card-read-area:hover,
.discover-card-read-area:focus-visible {
    background: rgba(34, 211, 238, 0.045);
    box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.16);
    outline: none;
}

.discover-card-copy {
    display: grid;
    gap: 6px;
    margin-top: 9px;
}

.discover-card-intro,
.discover-card-context {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.discover-card-intro {
    -webkit-line-clamp: 2;
}

.discover-card-context {
    -webkit-line-clamp: 2;
    color: #bae6fd;
    padding-left: 9px;
    border-left: 2px solid rgba(34, 211, 238, 0.28);
}

.discover-card-period {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #a7f3d0;
    background: rgba(16, 185, 129, 0.09);
    border: 1px solid rgba(16, 185, 129, 0.18);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.discover-source-badge {
    color: #0f172a !important;
}

.discover-card-chart {
    margin: 10px 0 8px;
    padding: 4px 0;
}

.discover-card-chart-block {
    margin: 10px 0 8px;
}

.discover-card-chart-block .discover-card-chart {
    margin-bottom: 2px;
}

.discover-card-period-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(190, 214, 238, 0.72);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0 3px;
}

/* MAJEUR mesuré 28/08 : ces quatre encres sont des littéraux pâles pensés
   pour du texte clair sur la carte SOMBRE d'Explorer (`.discover-hero`,
   `.discover-strategy-card`) -- ~1,3-1,5:1 une fois la carte devenue claire
   sous ce thème (`--bg-card` clair = quasi blanc). Aucune n'utilisait de
   token déjà thémé. `.discover-hero-note` porte le disclaimer d'honnêteté
   des backtests ("Les chiffres ci-dessous sont des backtests historiques
   ..."), `.discover-card-context`/`.discover-card-period-inline` sont les
   légendes de chaque carte de stratégie, `.discover-card-period` est le
   badge de période (a sa PROPRE teinte de fond -- encre choisie contre
   CETTE teinte, pas contre le blanc). #475569 = `--text-secondary` clair
   (déjà ~7,4:1 mesuré ailleurs sur ce même fond) ; #0e7490/#047857 =
   variantes claires déjà en usage dans book_theme.css (`--bk-cyan`/
   `--bk-gain`), pour ne pas inventer une troisième encre cyan/verte. */
[data-theme="light"] .discover-hero-note {
    color: #475569;
}
[data-theme="light"] .discover-card-context {
    color: #0e7490;
}
[data-theme="light"] .discover-card-period-inline {
    color: #475569;
}
[data-theme="light"] .discover-card-period {
    color: #047857;
}

.discover-sparkline {
    position: relative;
    width: 100%;
    height: 84px;
    overflow: visible;
}

.discover-sparkline-svg {
    display: block;
    width: 100%;
    height: 84px;
    overflow: visible;
}

.discover-trade-marker {
    filter: drop-shadow(0 2px 5px rgba(2, 8, 23, 0.32));
}

.discover-sparkline-empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.discover-sparkline-empty-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px dashed rgba(148, 163, 184, 0.35);
}

.discover-sparkline-empty-label {
    position: relative;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.88);
    color: #94a3b8;
    font-size: 0.76rem;
    font-weight: 700;
}

.discover-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 8px 0 10px;
}

.discover-kpi {
    min-width: 0;
    padding: 9px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.discover-kpi-label {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.discover-kpi-value {
    font-weight: 850;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.discover-sharpe-bar {
    height: 4px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.discover-sharpe-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #22d3ee);
}

.discover-rule-summary {
    display: flex;
    align-items: flex-start;
    min-height: 38px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.38;
    padding: 9px 10px;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.28);
}

.community-first-comment-preview {
    width: 100%;
    margin: 8px 0 10px;
    padding: 10px 12px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(32, 64, 160, 0.08)),
        rgba(255, 255, 255, 0.035);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.community-first-comment-preview:hover,
.community-first-comment-preview:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, 0.42);
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(32, 64, 160, 0.12)),
        rgba(255, 255, 255, 0.055);
    outline: none;
}

.community-first-comment-topline,
.community-first-comment-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.community-first-comment-text {
    margin: 6px 0 7px;
    color: var(--text-primary);
    font-size: 0.86rem;
    line-height: 1.38;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.community-first-comment-meta {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.discover-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.discover-author {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discover-card-cta {
    flex: 0 0 auto;
    font-weight: 800 !important;
}

.discover-card-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.discover-card-test-cta {
    box-shadow: 0 12px 28px rgba(34, 197, 94, 0.16);
}

.discover-adapt-context-card {
    overflow: hidden;
    border: 1px solid rgba(34, 211, 238, 0.24) !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 212, 170, 0.13), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.9)) !important;
    box-shadow: 0 18px 46px rgba(2, 8, 23, 0.26);
}

.discover-adapt-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.discover-adapt-eyebrow {
    width: fit-content;
    color: #0f172a !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.discover-adapt-chip-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.discover-adapt-chip {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.discover-adapt-title {
    color: var(--text-primary);
    font-size: 1.18rem;
    font-weight: 900;
    margin-bottom: 7px;
}

.discover-adapt-copy {
    max-width: 920px;
    color: var(--text-secondary);
    line-height: 1.62;
    margin-bottom: 12px;
}

.discover-adapt-rule {
    display: flex;
    align-items: flex-start;
    color: var(--text-primary);
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(2, 6, 23, 0.34);
}

.community-strategy-card {
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    background: radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.08), transparent 34%),
                linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.92)) !important;
}

.community-feed-toolbar-card {
    overflow: hidden;
}

.community-feed-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: 22px;
    align-items: center;
    padding: 4px;
}

.community-feed-copy {
    min-width: 0;
}

.community-feed-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 999px;
    color: #67e8f9;
    background: rgba(8, 47, 73, 0.24);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.community-feed-intro {
    max-width: 720px;
    color: var(--text-secondary);
    line-height: 1.65;
}

.community-feed-controls {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 22px;
    background:
        radial-gradient(circle at 90% 0%, rgba(0, 212, 170, 0.12), transparent 32%),
        rgba(2, 6, 23, 0.28);
}

.community-feed-search {
    min-height: 44px;
    border-radius: 14px !important;
}

.community-feed-sort-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.community-feed-sort-btn {
    border-radius: 999px !important;
    font-weight: 850 !important;
    white-space: nowrap;
}

.community-feed-grid {
    align-items: stretch;
}

.community-top-card-grid {
    align-items: stretch;
}

.community-top-card-col {
    display: flex;
}

.community-top-card-col > .card,
.community-top-card-col > .alert {
    width: 100%;
}

.community-feed-col {
    display: flex;
}

.community-feed-col > .card,
.community-feed-col > .alert {
    width: 100%;
}

.community-feed-loadmore {
    display: grid;
    place-items: center;
    gap: 14px;
}

.community-feed-progress {
    width: min(560px, 100%);
}

.community-feed-progress-shell {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background: rgba(2, 6, 23, 0.36);
}

.community-feed-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
    font-size: 0.82rem;
}

.community-feed-count {
    color: var(--text-primary);
    font-weight: 900;
}

.community-feed-status {
    color: var(--text-secondary);
    text-align: right;
}

.community-feed-progress-track {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
}

.community-feed-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00d4aa, #22d3ee, #7dd3fc);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.28);
    transition: width 260ms ease;
    will-change: width;
    backface-visibility: hidden;
}

.community-load-more-btn {
    min-width: 220px;
    border-radius: 999px !important;
    padding: 11px 22px !important;
    font-weight: 900 !important;
    box-shadow: 0 14px 34px rgba(0, 212, 170, 0.18);
}

.community-card-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.community-forecast-pill {
    align-items: center;
    align-self: flex-start;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 999px;
    background: rgba(8, 47, 73, 0.24);
    color: #dbeafe;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 800;
    gap: 5px;
    line-height: 1.15;
    max-width: 235px;
    padding: 7px 10px;
}

.community-forecast-copy {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.community-forecast-label {
    color: #67e8f9;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.community-forecast-asset {
    color: #f8fafc;
}

.community-forecast-confidence {
    color: #cbd5e1;
    font-weight: 700;
}

.community-forecast-horizon {
    color: #93c5fd;
    font-weight: 750;
}

.community-forecast-pill--up {
    border-color: rgba(34, 197, 94, 0.32);
    background: rgba(20, 83, 45, 0.24);
}

.community-forecast-pill--down {
    border-color: rgba(239, 68, 68, 0.32);
    background: rgba(127, 29, 29, 0.24);
}

.community-forecast-pill--stable {
    border-color: rgba(245, 158, 11, 0.32);
    background: rgba(120, 53, 15, 0.22);
}

.community-forecast-pill--empty {
    border-color: rgba(148, 163, 184, 0.20);
    background: rgba(15, 23, 42, 0.36);
    color: #94a3b8;
}

.discover-detail-modal .modal-content {
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 20% 0%, rgba(34, 211, 238, 0.13), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(12, 45, 67, 0.96));
    box-shadow: 0 34px 90px rgba(2, 8, 23, 0.62);
}

.discover-detail-modal .modal-header,
.discover-detail-modal .modal-footer {
    border-color: rgba(148, 163, 184, 0.16);
}

.discover-detail-body {
    color: var(--text-primary);
}

.discover-detail-hero {
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
}

.discover-detail-hero-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.discover-detail-lead {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.55;
    margin: 0;
    max-width: 760px;
}

.discover-detail-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.discover-detail-pill {
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.08);
    color: #c7f9ff;
    font-size: 0.78rem;
    font-weight: 750;
    padding: 7px 10px;
}

.discover-detail-chart {
    border: 1px solid rgba(34, 211, 238, 0.16);
    border-radius: 22px;
    background: rgba(2, 8, 23, 0.28);
    overflow: hidden;
    padding: 12px;
}

.discover-detail-chart .discover-sparkline {
    height: 168px !important;
}

.discover-detail-chart .discover-sparkline-svg {
    height: 150px !important;
    object-fit: contain;
    overflow: hidden;
}

.discover-detail-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.discover-detail-kpi {
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.045);
    padding: 12px;
}

.discover-detail-kpi-label {
    color: var(--text-secondary);
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.discover-detail-kpi-value {
    display: block;
    font-size: 1.35rem;
    margin-top: 4px;
}

.discover-detail-kpi--positive .discover-detail-kpi-value {
    color: #22c55e;
}

.discover-detail-kpi--negative .discover-detail-kpi-value {
    color: #ef4444;
}

.discover-detail-kpi--warning .discover-detail-kpi-value {
    color: #f59e0b;
}

.discover-detail-kpi--info .discover-detail-kpi-value {
    color: #60a5fa;
}

.discover-detail-rule {
    align-items: flex-start;
    border: 1px solid rgba(34, 211, 238, 0.14);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.40);
    color: #dbeafe;
    display: flex;
    font-size: 0.88rem;
    gap: 8px;
    line-height: 1.45;
    margin-top: 12px;
    padding: 12px;
}

.discover-detail-section {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.035);
    margin-bottom: 12px;
    padding: 16px;
}

.discover-detail-section h5 {
    color: var(--text-primary);
    font-weight: 850;
    margin-bottom: 8px;
}

.discover-detail-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.62;
    margin: 0;
}

.discover-detail-section--muted {
    background: rgba(34, 211, 238, 0.055);
}

.community-vote-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 5px;
    border-radius: 999px;
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.055), rgba(0, 212, 170, 0.035)),
        rgba(2, 6, 23, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.community-vote-btn {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(15, 23, 42, 0.62) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
    will-change: transform;
    backface-visibility: hidden;
}

.community-vote-btn:hover,
.community-vote-btn:focus {
    transform: translateY(-1px);
    color: #f8fafc !important;
    outline: none !important;
}

.community-vote-btn-up:hover,
.community-vote-btn-up:focus {
    background: rgba(0, 212, 170, 0.16) !important;
    border-color: rgba(0, 212, 170, 0.45) !important;
    color: #5eead4 !important;
}

.community-vote-btn-down:hover,
.community-vote-btn-down:focus {
    background: rgba(245, 158, 11, 0.13) !important;
    border-color: rgba(245, 158, 11, 0.38) !important;
    color: #fbbf24 !important;
}

.community-vote-count {
    min-width: 26px;
    color: var(--text-primary);
    font-weight: 850;
    text-align: center;
}

.community-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 9px;
    margin-top: 13px;
}

.community-card-action {
    align-items: center !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    justify-content: center !important;
    text-transform: none !important;
    min-height: 36px;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0;
    line-height: 1.1 !important;
    padding: 9px 12px !important;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
    will-change: transform;
    backface-visibility: hidden;
}

.community-card-action:hover,
.community-card-action:focus {
    transform: translateY(-1px);
    outline: none !important;
}

.community-card-action-comment {
    grid-column: 1 / -1;
    background: rgba(15, 23, 42, 0.58) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
}

.community-card-action-comment:hover,
.community-card-action-comment:focus {
    background: rgba(34, 211, 238, 0.08) !important;
    border-color: rgba(34, 211, 238, 0.30) !important;
    color: #e0f2fe !important;
}

.community-card-action-share {
    background: rgba(15, 23, 42, 0.42) !important;
    border: 1px solid rgba(148, 163, 184, 0.20) !important;
    color: #d7e5f7 !important;
    box-shadow: none !important;
}

.community-card-action-share:hover,
.community-card-action-share:focus {
    background: rgba(99, 102, 241, 0.10) !important;
    border-color: rgba(125, 211, 252, 0.38) !important;
    color: #ffffff !important;
}

.community-card-action-follow {
    background: rgba(20, 184, 166, 0.10) !important;
    border: 1px solid rgba(45, 212, 191, 0.30) !important;
    color: #99f6e4 !important;
    box-shadow: none !important;
}

.community-card-action-follow:hover,
.community-card-action-follow:focus {
    background: rgba(20, 184, 166, 0.16) !important;
    border-color: rgba(94, 234, 212, 0.56) !important;
    color: #ecfeff !important;
}

.community-card-action-share.is-copied,
.profile-public-share-btn.is-copied {
    border-color: rgba(34, 197, 94, 0.85) !important;
    color: #eafff2 !important;
    background: rgba(34, 197, 94, 0.18) !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25), 0 12px 30px rgba(34, 197, 94, 0.18) !important;
}

.community-card-action-run {
    background: linear-gradient(135deg, #0066ff, #00d8ff 58%, #48f1d2) !important;
    border: 0 !important;
    color: #03111f !important;
    box-shadow: 0 14px 34px rgba(0, 216, 255, 0.20);
}

.community-card-action-run:hover,
.community-card-action-run:focus {
    box-shadow: 0 18px 42px rgba(0, 216, 255, 0.28);
    color: #020617 !important;
}

.community-card-action-adapt {
    background: rgba(2, 6, 23, 0.38) !important;
    border: 1px solid rgba(34, 211, 238, 0.26) !important;
    color: #a5f3fc !important;
}

.community-card-action-adapt:hover,
.community-card-action-adapt:focus {
    background: rgba(34, 211, 238, 0.09) !important;
    border-color: rgba(34, 211, 238, 0.48) !important;
    color: #ecfeff !important;
}

.community-card-main-button,
.community-card-main-content {
    display: block;
    width: 100%;
    color: inherit;
    text-align: left;
}

.community-card-main-button {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    margin: -4px -4px 6px;
    padding: 4px;
    transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.community-card-main-button:hover {
    background: rgba(34, 211, 238, 0.045);
    transform: translateY(-1px);
}

.community-card-main-button:focus-visible {
    outline: 2px solid rgba(34, 211, 238, 0.85);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(34, 211, 238, 0.12);
}

.community-comment-drawer {
    margin-top: 10px;
}

.community-comment-modal .modal-dialog {
    max-width: min(1180px, calc(100vw - 34px));
}

.community-comment-modal .modal-content {
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(34, 211, 238, 0.12), transparent 34%),
        var(--bg-secondary);
    box-shadow: 0 34px 90px rgba(2, 8, 23, 0.52);
    overflow: hidden;
}

.community-modal-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
    gap: 18px;
    align-items: start;
}

.community-modal-card-preview .community-strategy-card {
    margin-bottom: 0 !important;
    transform: none !important;
}

.community-modal-card-preview .community-card-actions,
.community-modal-card-preview .community-comment-drawer,
.community-modal-card-preview .community-first-comment-preview {
    display: none;
}

.community-modal-editorial {
    display: grid;
    gap: 12px;
    align-content: start;
}

.community-modal-side-panel {
    display: grid;
    gap: 14px;
    align-content: start;
}

.community-editorial-section {
    border: 1px solid rgba(34, 211, 238, 0.16);
    background: linear-gradient(135deg, rgba(11, 17, 34, 0.84), rgba(15, 75, 95, 0.34));
    border-radius: 16px;
    padding: 14px 16px;
}

.community-editorial-section-title {
    color: #67e8f9;
    font-weight: 800;
    letter-spacing: 0.01em;
    margin-bottom: 8px;
}

.community-editorial-section-text {
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
    white-space: pre-line;
}

.profile-public-headline {
    color: #67e8f9;
    font-size: 1rem;
    font-weight: 800;
    margin: 6px 0 4px;
}

.profile-public-links {
    margin-top: 14px;
}

.profile-public-links-label {
    display: block;
    color: rgba(148, 163, 184, 0.86);
    font-weight: 700;
    margin-bottom: 8px;
}

.profile-public-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-public-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #cffafe;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.24);
    border-radius: 999px;
    padding: 7px 11px;
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.profile-public-link:hover {
    color: #ffffff;
    background: rgba(34, 211, 238, 0.2);
    text-decoration: none;
}

.profile-public-share-btn {
    border-radius: 999px !important;
    border-color: rgba(125, 211, 252, 0.32) !important;
    color: #d7e5f7 !important;
    font-weight: 850 !important;
    background: rgba(15, 23, 42, 0.42) !important;
}

.profile-public-share-btn:hover,
.profile-public-share-btn:focus {
    background: rgba(34, 211, 238, 0.10) !important;
    color: #ffffff !important;
}

.community-modal-discussion {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.045);
}

.community-modal-discussion-head {
    margin-bottom: 12px;
}

.community-modal-discussion-title {
    color: var(--text-primary);
    font-weight: 900;
    font-size: 1rem;
}

.community-modal-discussion-subtitle {
    color: var(--text-secondary);
}

.community-modal-comments-list {
    max-height: min(48vh, 520px);
    overflow-y: auto;
    padding-right: 4px;
    margin-bottom: 12px;
}

.community-modal-comment-input {
    min-height: 86px;
    margin-bottom: 10px;
}

.community-modal-comment-submit {
    width: 100%;
    font-weight: 850 !important;
}

.community-modal-loading-shell {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 360px;
}

.community-modal-loading-dots {
    display: inline-flex;
    gap: 7px;
}

.community-modal-loading-dot {
    animation: communityModalDotPulse 0.9s ease-in-out infinite;
    background: linear-gradient(135deg, #37d5ff, #31f5a8);
    border-radius: 999px;
    box-shadow: 0 0 18px rgba(49, 245, 168, 0.25);
    height: 8px;
    width: 8px;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.community-modal-loading-dot:nth-child(2) {
    animation-delay: 0.12s;
}

.community-modal-loading-dot:nth-child(3) {
    animation-delay: 0.24s;
}

.community-modal-loading-label {
    color: var(--text-secondary);
    font-size: 0.92rem;
}

@keyframes communityModalDotPulse {
    0%, 80%, 100% {
        opacity: 0.42;
        transform: translateY(0) scale(0.86);
    }
    40% {
        opacity: 1;
        transform: translateY(-4px) scale(1);
    }
}

.discover-quickstart-card {
    border-radius: 22px !important;
}

.discover-quickstart-icon {
    font-size: 1.55rem;
    margin-bottom: 10px;
}

.discover-quickstart-title {
    color: var(--text-primary);
    font-weight: 800;
    margin-bottom: 6px;
}

.discover-quickstart-copy {
    color: var(--text-secondary);
    min-height: 48px;
    font-size: 0.92rem;
}

.discover-context-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 18px !important;
}

.discover-banner-link {
    padding: 0 0 0 8px !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
}

/* --- Advisory / CGP guided workspace --- */
.advisory-hero,
.advisory-panel-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.13), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(16, 185, 129, 0.12), transparent 28%),
        linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(2, 6, 23, 0.88));
    box-shadow: var(--shadow-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.advisory-hero {
    padding: 22px;
}

.advisory-subtab-body {
    margin-top: 14px;
}

.advisory-merged-tabs-block .tab-content {
    padding-top: 14px;
}

.advisory-panel-card {
    padding: 18px 20px;
}

.advisory-panel-card .advisory-eyebrow {
    display: none;
}

.advisory-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #0f172a;
    background: var(--gradient-logo-title);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.advisory-hero-title,
.advisory-panel-title {
    color: var(--text-primary);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.advisory-hero-title {
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.advisory-hero-copy,
.advisory-panel-copy {
    max-width: 900px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0;
}

.advisory-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.advisory-step-card,
.mifid-client-card,
.cgp-client-card,
.cgp-suitability-step-card,
.cgp-suitability-run-card,
.cgp-suitability-result-card,
.cgp-detail-card,
.cgp-strategy-info-card {
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    border-radius: 18px !important;
    background: rgba(15, 23, 42, 0.64) !important;
    box-shadow: 0 16px 38px rgba(2, 8, 23, 0.22);
}

.advisory-step-card {
    display: flex;
    min-height: 148px;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
}

.advisory-step-main {
    display: flex;
    gap: 10px;
}

.advisory-step-icon,
.mifid-module-icon,
.cgp-strategy-info-head i,
.cgp-verdict-main i {
    color: var(--color-accent);
}

.advisory-step-icon {
    padding-top: 2px;
    font-size: 1.05rem;
}

.advisory-step-title,
.mifid-module-title,
.cgp-step-title,
.cgp-panel-title {
    color: var(--text-primary);
    font-weight: 850;
}

.advisory-step-copy,
.mifid-module-copy,
.cgp-step-copy {
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.45;
    margin-bottom: 0;
}

.advisory-step-cta {
    align-self: flex-start;
    padding: 0 !important;
    color: var(--color-accent) !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

.mifid-shell,
#cgp-tab-container {
    padding-bottom: 34px;
}

.cgp-sub-tabs-block .tab-content {
    padding-top: 18px;
}

.mifid-client-rail,
.mifid-workspace-card {
    border-radius: 22px !important;
}

.mifid-rail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mifid-rail-title {
    color: var(--text-primary);
    font-weight: 850;
}

.mifid-new-client-btn {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.mifid-rail-copy {
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

.mifid-client-search {
    min-height: 42px;
    border-radius: 14px !important;
}

.mifid-client-list-container {
    max-height: 620px;
    overflow-y: auto;
    padding-right: 2px;
}

.mifid-client-list {
    display: grid;
    gap: 10px;
}

.mifid-client-card {
    padding: 0 !important;
    color: inherit !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.mifid-client-card:hover,
.cgp-client-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, 0.42) !important;
    background: rgba(15, 23, 42, 0.82) !important;
}

.mifid-client-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
}

.mifid-client-copy,
.mifid-client-score {
    display: grid;
    gap: 2px;
}

.mifid-client-name,
.cgp-client-card-name {
    color: var(--text-primary);
    font-weight: 850;
}

.mifid-client-profile,
.mifid-client-score-label,
.cgp-result-muted {
    color: var(--text-secondary);
}

.mifid-client-score {
    text-align: right;
}

.mifid-client-score-value,
.mifid-profile-score-value,
.cgp-detail-score-value {
    font-weight: 950;
    letter-spacing: -0.03em;
}

.mifid-empty-state,
.mifid-client-empty,
.cgp-client-cards-empty {
    display: grid;
    min-height: 360px;
    place-items: center;
    align-content: center;
    gap: 10px;
    color: var(--text-secondary);
    text-align: center;
}

.mifid-empty-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 18px;
    color: #0f172a;
    background: var(--gradient-logo-title);
    font-size: 1.35rem;
}

.mifid-empty-title {
    color: var(--text-primary);
    font-weight: 900;
}

.mifid-empty-copy {
    max-width: 520px;
    margin-bottom: 0;
}

.mifid-empty-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.mifid-empty-steps span {
    padding: 6px 10px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.mifid-profile-header-card {
    border-left: 5px solid var(--color-accent) !important;
    border-radius: 22px !important;
}

.mifid-profile-name {
    color: var(--text-primary);
    font-weight: 900;
    margin-bottom: 2px;
}

.mifid-profile-score-col,
.mifid-profile-score {
    display: grid;
    justify-items: end;
    align-content: center;
}

.mifid-profile-score-value {
    font-size: 2rem;
}

.mifid-profile-score-max,
.mifid-profile-label {
    color: var(--text-secondary);
}

.mifid-module-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 10px 0 18px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 18px;
    background: rgba(148, 163, 184, 0.07);
}

.mifid-module-intro-line {
    margin: 8px 0 16px;
    padding-left: 12px;
    border-left: 2px solid rgba(34, 211, 238, 0.45);
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

.mifid-module-icon {
    padding-top: 2px;
    font-size: 1.1rem;
}

.mifid-question-card {
    border-radius: 18px !important;
}

.mifid-save-bar {
    position: sticky;
    bottom: 12px;
    z-index: 2;
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 20px;
    background: rgba(2, 6, 23, 0.88);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.mifid-save-helper {
    color: var(--text-secondary);
    font-size: 0.84rem;
    margin-bottom: 0;
}

.mifid-save-button {
    border-radius: 14px !important;
    font-weight: 900 !important;
}

.cgp-client-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cgp-client-card {
    width: 100%;
    padding: 14px !important;
    color: inherit !important;
    text-align: left !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.cgp-client-card-topline,
.cgp-detail-header,
.cgp-verdict-header,
.cgp-risk-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cgp-client-card-name {
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--text-primary);
}

.cgp-client-card-profile-pill,
.cgp-client-card-tags span,
.cgp-detail-tags span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
}

.cgp-client-card-profile-pill {
    padding: 6px 8px;
}

.cgp-client-card-note {
    min-height: 42px;
    margin: 10px 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.45;
}

.cgp-client-card-tags,
.cgp-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cgp-client-card-tags span,
.cgp-detail-tags span {
    padding: 6px 8px;
}

.cgp-client-card-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.cgp-client-card-kpis div,
.cgp-result-mini-card {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(148, 163, 184, 0.08);
}

.cgp-client-card-kpis small,
.cgp-result-label,
.cgp-table-eyebrow {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cgp-client-card-kpis strong,
.cgp-result-mini-card strong {
    color: var(--text-primary);
    font-size: 0.86rem;
}

.cgp-table-heading {
    margin: 16px 0 10px;
}

.cgp-suitability-step-card,
.cgp-suitability-run-card {
    display: flex;
    gap: 12px;
    padding: 16px;
}

.cgp-step-number {
    display: grid;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 12px;
    color: #0f172a;
    background: var(--gradient-logo-title);
    font-weight: 950;
}

.cgp-suitability-run-card {
    align-items: center;
    justify-content: space-between;
}

.cgp-suitability-verdict-copy {
    display: flex;
    gap: 12px;
}

.cgp-suitability-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.cgp-strategy-info-card {
    padding: 12px;
}

.cgp-strategy-info-card.is-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
}

.cgp-strategy-info-head {
    display: flex;
    gap: 10px;
    color: var(--text-primary);
}

.cgp-strategy-info-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.cgp-strategy-info-kpis span {
    display: grid;
    gap: 2px;
    padding: 8px;
    border-radius: 12px;
    background: rgba(148, 163, 184, 0.08);
}

.cgp-strategy-info-kpis small {
    color: var(--text-secondary);
}

.cgp-strategy-info-kpis strong {
    color: var(--text-primary);
}

.cgp-detail-card,
.cgp-suitability-result-card {
    padding: 16px;
}

.cgp-detail-title,
.cgp-verdict-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cgp-detail-title i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    color: #0f172a;
    background: var(--gradient-logo-title);
}

.cgp-client-note-block {
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    line-height: 1.55;
}

.cgp-profile-reminder-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.cgp-profile-reminder-grid div {
    display: grid;
    gap: 4px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(34, 211, 238, 0.07);
}

.cgp-profile-reminder-grid small {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cgp-profile-reminder-grid strong {
    color: var(--text-primary);
    font-size: 0.86rem;
}

.cgp-client-strategies-placeholder {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px dashed rgba(148, 163, 184, 0.28);
    border-radius: 16px;
    color: var(--text-secondary);
    background: rgba(148, 163, 184, 0.06);
}

.cgp-client-strategies-placeholder i {
    color: var(--color-accent);
}

.cgp-profile-reminder-grid + .cgp-panel-title,
.cgp-profile-reminder-grid + .cgp-panel-title + .cgp-client-strategies-placeholder {
    display: none;
}

.cgp-client-strategy-catalog {
    margin-top: 24px;
}

.cgp-client-strategy-catalog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cgp-client-strategy-copy {
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.45;
}

.cgp-client-strategy-count {
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.1);
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 850;
}

.cgp-client-portfolio-summary {
    margin-top: 22px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(34, 211, 238, 0.16);
    border-radius: 20px;
    background:
        radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.15), transparent 34%),
        radial-gradient(circle at 100% 20%, rgba(16, 185, 129, 0.10), transparent 32%),
        rgba(15, 23, 42, 0.58);
}

.cgp-client-portfolio-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.cgp-client-portfolio-head span {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.11);
    color: var(--color-accent);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cgp-client-portfolio-head p {
    max-width: 520px;
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.45;
}

.cgp-client-decision-grid,
.cgp-client-advisory-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}

.cgp-client-portfolio-value-card,
.cgp-client-diagnostic-card,
.cgp-client-target-card,
.cgp-client-lines-card {
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background: rgba(2, 6, 23, 0.24);
}

.cgp-client-portfolio-value-card {
    display: grid;
    gap: 4px;
}

.cgp-client-portfolio-value-card small,
.cgp-client-diagnostic-head small,
.cgp-client-target-head small {
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cgp-client-portfolio-value-card strong {
    color: var(--text-primary);
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 950;
    letter-spacing: -0.04em;
}

.cgp-client-portfolio-value-card span {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.cgp-client-diagnostic-head,
.cgp-client-target-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.cgp-client-diagnostic-status {
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 950;
}

.cgp-client-diagnostic-status.is-ok {
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
}

.cgp-client-diagnostic-status.is-watch {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.15);
}

.cgp-client-diagnostic-status.is-risk {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.15);
}

.cgp-client-diagnostic-list {
    display: grid;
    gap: 7px;
}

.cgp-client-diagnostic-list div {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}

.cgp-client-diagnostic-list i {
    color: var(--color-accent);
    margin-top: 2px;
}

.cgp-client-portfolio-total-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.cgp-client-portfolio-main,
.cgp-client-portfolio-side {
    min-width: 0;
}

.cgp-client-portfolio-chart {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.22), rgba(2, 6, 23, 0.28)),
        rgba(2, 6, 23, 0.22);
}

.cgp-client-portfolio-chart-img {
    display: block;
    width: 100%;
    height: 132px;
    object-fit: fill;
}

.cgp-client-portfolio-chart.is-empty {
    display: grid;
    place-items: center;
}

.cgp-client-portfolio-empty-line {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 50%;
    border-top: 2px dashed rgba(148, 163, 184, 0.28);
}

.cgp-client-portfolio-empty-label {
    position: relative;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.88);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 850;
}

.cgp-client-portfolio-scope-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.cgp-client-portfolio-scope {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border: 1px solid rgba(34, 211, 238, 0.16);
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.07);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
}

.cgp-client-portfolio-side {
    display: grid;
    gap: 10px;
}

.cgp-client-portfolio-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.cgp-client-portfolio-kpi {
    display: grid;
    gap: 3px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 15px;
    background: rgba(2, 6, 23, 0.30);
}

.cgp-client-portfolio-kpi small {
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cgp-client-portfolio-kpi strong {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 950;
}

.cgp-client-portfolio-kpi.is-positive strong {
    color: #86efac;
}

.cgp-client-portfolio-kpi.is-risk strong {
    color: #fca5a5;
}

.cgp-client-portfolio-allocation {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 16px;
    background: rgba(2, 6, 23, 0.24);
}

.cgp-client-portfolio-allocation-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cgp-client-portfolio-allocation-head small,
.cgp-client-portfolio-allocation-row-head {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 850;
}

.cgp-client-portfolio-allocation-head strong {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 900;
}

.cgp-client-portfolio-allocation-row {
    display: grid;
    gap: 4px;
}

.cgp-client-portfolio-allocation-row-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.cgp-client-portfolio-allocation-row-head span {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cgp-client-portfolio-allocation-track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.13);
}

.cgp-client-portfolio-allocation-track div {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--logo-blue), var(--logo-cyan));
}

.cgp-client-portfolio-allocation-empty {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.cgp-client-target-card,
.cgp-client-lines-card {
    display: grid;
    align-content: start;
    gap: 8px;
}

.cgp-client-target-head strong {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 900;
}

.cgp-client-target-row,
.cgp-client-portfolio-line {
    display: grid;
    gap: 5px;
    padding: 8px;
    border-radius: 13px;
    background: rgba(148, 163, 184, 0.07);
}

.cgp-client-target-row-head,
.cgp-client-line-meta,
.cgp-client-line-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cgp-client-target-row-head,
.cgp-client-line-meta {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 850;
}

.cgp-client-line-name strong,
.cgp-client-line-meta strong {
    color: var(--text-primary);
}

.cgp-client-line-name small {
    color: var(--text-secondary);
}

.cgp-client-target-track {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.13);
}

.cgp-client-target-bar-current {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--logo-blue), var(--logo-cyan));
}

.cgp-client-target-marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 15px;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.8);
}

.cgp-client-portfolio-line.is-empty {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.cgp-client-strategy-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(150px, 0.7fr) auto;
    gap: 8px;
    margin-bottom: 12px;
}

.cgp-client-strategy-add-btn {
    border-radius: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap;
}

.cgp-client-strategy-grid {
    display: grid;
    gap: 10px;
}

.cgp-client-strategy-card {
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 18px;
    background:
        radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.09), transparent 34%),
        rgba(15, 23, 42, 0.68);
}

.cgp-client-strategy-head,
.cgp-client-strategy-meta,
.cgp-client-strategy-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cgp-client-strategy-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.cgp-client-strategy-name {
    color: var(--text-primary);
    font-weight: 900;
}

.cgp-client-strategy-assets,
.cgp-client-strategy-meta {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.cgp-client-strategy-status {
    flex: 0 0 auto;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
}

.cgp-client-strategy-status.is-watchlist { color: #67e8f9; background: rgba(8, 145, 178, 0.18); }
.cgp-client-strategy-status.is-proposed { color: #fde68a; background: rgba(245, 158, 11, 0.18); }
.cgp-client-strategy-status.is-active { color: #86efac; background: rgba(34, 197, 94, 0.18); }
.cgp-client-strategy-status.is-paused { color: #c4b5fd; background: rgba(139, 92, 246, 0.18); }
.cgp-client-strategy-status.is-archived { color: #cbd5e1; background: rgba(100, 116, 139, 0.22); }

.cgp-client-strategy-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0;
}

.cgp-client-strategy-metrics div {
    display: grid;
    gap: 2px;
    padding: 9px;
    border-radius: 13px;
    background: rgba(148, 163, 184, 0.08);
}

.cgp-client-strategy-metrics small {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cgp-client-strategy-metrics strong {
    color: var(--text-primary);
}

.cgp-client-strategy-controls {
    justify-content: flex-start;
}

.cgp-client-strategy-status-select {
    min-width: 150px;
}

.cgp-client-strategy-weight-field {
    display: grid;
    gap: 3px;
    min-width: 92px;
}

.cgp-client-strategy-weight-field small {
    color: var(--text-secondary);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cgp-client-strategy-weight-input {
    border-radius: 10px !important;
    min-height: 31px !important;
}

.cgp-client-strategy-action {
    padding: 0 !important;
    color: var(--color-accent) !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    text-decoration: none !important;
}

.cgp-client-strategy-action.is-danger {
    color: #fca5a5 !important;
}

.cgp-detail-profile,
.cgp-answer-list,
.cgp-detail-table {
    color: var(--text-secondary);
}

.cgp-answer-list {
    max-height: 220px;
    overflow-y: auto;
}

.cgp-risk-level-badge {
    border-radius: 999px !important;
    padding: 8px 10px !important;
}

.cgp-risk-bars {
    display: grid;
    gap: 12px;
}

.cgp-risk-bar {
    padding: 12px;
    border-radius: 16px;
    background: rgba(148, 163, 184, 0.08);
}

.cgp-risk-progress {
    height: 8px !important;
    margin-top: 8px;
    border-radius: 999px !important;
    background: rgba(148, 163, 184, 0.16) !important;
}

.cgp-violations-list {
    color: var(--danger, #ef4444);
    font-size: 0.9rem;
}

.cgp-no-violations {
    color: var(--success, #22c55e);
    font-weight: 800;
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .discover-hero {
        padding: 18px;
    }

    .community-modal-content-grid {
        grid-template-columns: 1fr;
    }

    .community-feed-toolbar {
        grid-template-columns: 1fr;
    }

    .advisory-step-grid,
    .cgp-client-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cgp-client-portfolio-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cgp-client-portfolio-total-grid {
        grid-template-columns: 1fr;
    }

    .cgp-client-decision-grid,
    .cgp-client-advisory-grid {
        grid-template-columns: 1fr;
    }

    .cgp-suitability-run-card,
    .cgp-detail-header,
    .cgp-client-portfolio-head,
    .cgp-client-strategy-catalog-head,
    .cgp-client-strategy-head,
    .cgp-client-strategy-meta,
    .cgp-client-strategy-controls,
    .cgp-verdict-header {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 575.98px) {
    .discover-shell {
        padding-top: 8px;
    }

    .discover-hero {
        padding: 16px;
        border-radius: 16px;
    }

    .discover-intent-chip {
        width: 100%;
        justify-content: center;
    }

    .discover-kpi-row {
        grid-template-columns: 1fr;
    }

    .discover-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .community-card-topline,
    .community-card-actions {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .community-feed-sort-group {
        grid-template-columns: 1fr;
    }

    .community-feed-progress-copy {
        flex-direction: column;
        gap: 4px;
    }

    .community-feed-status {
        text-align: left;
    }

    .advisory-step-grid,
    .cgp-client-card-grid,
    .cgp-client-card-kpis,
    .cgp-client-portfolio-kpis,
    .cgp-profile-reminder-grid,
    .cgp-client-strategy-add-row,
    .cgp-client-strategy-metrics,
    .cgp-strategy-info-kpis {
        grid-template-columns: 1fr;
    }

    .mifid-profile-score-col {
        justify-items: start;
        margin-top: 12px;
    }

    .mifid-empty-steps,
    .cgp-suitability-actions,
    .cgp-client-portfolio-allocation-head,
    .cgp-client-diagnostic-head,
    .cgp-client-target-head,
    .cgp-client-target-row-head,
    .cgp-client-line-meta,
    .cgp-client-line-name {
        align-items: stretch;
        flex-direction: column;
    }

    .discover-card-cta {
        width: 100%;
    }

    .discover-card-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .discover-adapt-topline,
    .discover-adapt-chip-row {
        align-items: stretch;
        flex-direction: column;
    }
}
.ai-model-card {
  background: linear-gradient(145deg, rgba(7, 19, 32, 0.96), rgba(10, 28, 45, 0.92));
  border: 1px solid rgba(80, 220, 190, 0.18);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  color: var(--text-primary);
  height: 100%;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  will-change: transform;
  backface-visibility: hidden;
}

.ai-model-card:hover {
  transform: translateY(-2px);
  border-color: rgba(80, 220, 190, 0.42);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.3);
}

.ai-model-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ai-model-rank {
  min-width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #041417;
  font-weight: 800;
  background: linear-gradient(135deg, #53f2d4, #2f8cff);
}

.ai-model-name {
  color: var(--text-primary);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ai-model-bio {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.45;
}

.ai-model-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.ai-model-metrics > div {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  padding: 9px 8px;
  text-align: center;
}

.ai-model-metrics strong,
.ai-model-metrics small {
  display: block;
}

.ai-model-metrics strong {
  color: #f8fafc;
  font-size: 1rem;
}

.ai-model-metrics small {
  color: var(--text-secondary);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   PRE-LAUNCH VISUAL HARDENING
   Prevent browser-specific overflow in dense Dash result screens.
   ========================================================================== */

.content-wrapper,
.tab-content,
.tab-pane,
.card,
.card-body,
.card-header {
    min-width: 0;
    max-width: 100%;
}

.results-summary-card .card-header,
.benchmark-comparison-card .card-header {
    overflow-wrap: anywhere;
    word-break: normal;
}

.results-summary-row {
    min-width: 0;
}

.results-summary-column {
    min-width: 0;
    max-width: 100%;
}

.results-pnl-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.results-pnl-card .card-body {
    min-width: 0;
    max-width: 100%;
}

.results-pnl-card .card-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    min-width: 0;
    overflow-wrap: anywhere;
}

.results-pnl-value {
    font-size: clamp(1.55rem, 4vw, 2.5rem) !important;
    line-height: 1.05;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

.results-metrics-table {
    display: grid;
    gap: 8px;
}

.results-metric-row {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 13px;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) max-content;
    min-width: 0;
    padding: 9px 11px;
}

.results-metric-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.results-metric-label-main {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    line-height: 1.15;
    margin-bottom: 1px;
}

.results-metric-label small {
    display: block;
    overflow-wrap: anywhere;
}

.results-metric-description {
    color: var(--text-secondary);
    display: block;
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.22;
    max-width: 44ch;
    opacity: 0.76;
}

.results-metric-value {
    background: rgba(8, 18, 36, 0.30);
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 999px;
    justify-self: end;
    min-width: 104px;
    overflow-wrap: anywhere;
    padding: 5px 9px;
    text-align: right;
    word-break: break-word;
}

/* --------------------------------------------------------------------------
   Metrique refusee faute d'echantillon (19/08/2026)
   --------------------------------------------------------------------------
   `_na_with_custom_reason` (results_layout.py) rend un <span> « N/A » suivi
   d'un <small> portant le motif. Ces trois classes etaient emises sans AUCUNE
   regle CSS : les deux textes se collaient bout a bout dans la pastille de
   valeur, ce qui donnait « N/APas assez de trades (9/20) » a l'ecran.
   Le motif passe donc sous la valeur, en encre secondaire, et la pastille
   cesse d'imposer sa hauteur d'une ligne. */
.metric-na-with-reason {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    line-height: 1.2;
    text-align: right;
}

.metric-na-value {
    font-weight: 600;
}

.metric-na-reason {
    color: var(--text-secondary, #cbd5e1);
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    max-width: 22ch;
    opacity: 0.9;
    white-space: normal;
}

/* Dans un tableau (metriques avancees), la cellule n'est pas une pastille :
   le motif se cale a gauche comme le reste de la colonne. */
.benchmark-comparison-value .metric-na-with-reason,
td .metric-na-with-reason {
    align-items: inherit;
    text-align: inherit;
}

.benchmark-comparison-table {
    min-width: 720px;
    table-layout: fixed;
}

.benchmark-comparison-header,
.benchmark-comparison-label,
.benchmark-comparison-value {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
}

.benchmark-comparison-value {
    font-variant-numeric: tabular-nums;
}

.dash-table-container,
.dash-spreadsheet-container {
    max-width: 100%;
}

@media (max-width: 1199.98px) {
    .results-summary-card .list-group {
        margin-bottom: 0.75rem;
    }

    .results-summary-row {
        row-gap: 1rem;
    }

    .results-metric-value {
        min-width: 96px;
    }
}

@media (max-width: 767.98px) {
    .results-pnl-value {
        font-size: clamp(1.35rem, 8vw, 2rem) !important;
    }

    .results-metrics-table {
        font-size: 12.5px !important;
    }

    .results-metric-row {
        align-items: flex-start;
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .results-metric-value {
        justify-self: start;
        min-width: 0;
        text-align: left !important;
    }
}

/* ------------------------------------------------------------------ */
/* KPI tiles (results summary) — SOTA fintech: small-caps muted label, */
/* strong tabular-nums value, semantic color, subtle raised surface.   */
/* ------------------------------------------------------------------ */
.results-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.results-kpi {
    background: rgba(148, 163, 184, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 12px;
    padding: 14px 16px;
    min-width: 0;
}

.results-kpi--hero {
    grid-column: 1 / -1;
    border-left: 3px solid #00bf9a;
}

.results-kpi-label {
    font-size: 0.85rem;
    color: var(--text-secondary, #a8b3c4);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.results-kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

[data-theme="light"] .results-kpi {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.10);
}

[data-theme="light"] .results-kpi-label {
    color: var(--text-secondary, #5b6472);
}

/* ------------------------------------------------------------------ */
/* Sleek tables (portfolio/book dashboards) — no vertical borders,     */
/* thin row separators, uppercase muted header, tabular numerics.      */
/* Opt-in class: existing tables and visual baselines are untouched.   */
/* ------------------------------------------------------------------ */
.table-sleek th {
    font-size: 0.82rem;
    color: var(--text-secondary, #a8b3c4);
    font-weight: 600;
    border-top: none !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.28) !important;
    border-left: none !important;
    border-right: none !important;
}

.table-sleek td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.table-sleek tbody tr:hover {
    background: rgba(148, 163, 184, 0.06);
}

[data-theme="light"] .table-sleek th {
    color: var(--text-secondary, #5b6472);
    border-bottom-color: rgba(15, 23, 42, 0.20) !important;
}

[data-theme="light"] .table-sleek td {
    border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

/* ------------------------------------------------------------------ */
/* P4 — "L'outil d'apres" : Portfolio dashboard authored redesign.     */
/* Discipline chromatique assagie (verdict couleur Louis, Jul 2026) :  */
/* neutres du theme partout + UN SEUL teal de marque en touches rares  */
/* (echine, numeros de section, quelques filets, le chiffre-verdict    */
/* rendement) + un rouge reserve aux pertes reelles. Aucun cyan, aucune */
/* rampe multi-teintes turquoise. Echelle typographique XXL pour les   */
/* chiffres-verdict, numerotation de section (01/02/03...) sur une     */
/* echine verticale, cartels "musee du risque" sous les visualisations */
/* cles. Scope strictement prefixe .p4-* : aucune autre surface        */
/* n'est affectee.                                                     */
/* ------------------------------------------------------------------ */

.p4-portfolio {
    position: relative;
    padding-left: 30px;
}

.p4-portfolio::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    /* Une seule teinte (teal de marque) qui s'estompe — jamais une
       deuxieme teinte (cyan) en cours de degrade. */
    background: linear-gradient(180deg,
        rgba(0, 191, 154, 0.65) 0%,
        rgba(0, 191, 154, 0.28) 50%,
        rgba(148, 163, 184, 0.10) 100%);
}

.p4-panel {
    background: var(--gradient-card), var(--bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 6px;
    padding: 24px 28px 28px;
    margin-bottom: 30px;
    position: relative;
}

[data-theme="light"] .p4-panel {
    background: var(--gradient-card), var(--bg-secondary);
    box-shadow: var(--shadow-card);
}

.p4-section-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.p4-num {
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1;
    color: rgba(0, 191, 154, 0.6);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    flex-shrink: 0;
    padding-top: 2px;
}

.p4-title-col {
    flex: 1 1 auto;
    min-width: 0;
}

.p4-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-primary);
}

.p4-section-icon {
    /* Was the vivid cyan highlight, repeated on all 8 section headers —
       exactly the "gadget" reading Louis flagged. Neutral now; the teal
       identity of the page lives in the spine and the numbers, not in
       every icon. */
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.p4-section-subtitle {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-top: 6px;
    max-width: 780px;
}

.p4-subhead {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.p4-cartel {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-secondary);
    border-left: 2px solid rgba(0, 191, 154, 0.45);
    padding: 4px 0 4px 14px;
    margin-top: 16px;
    max-width: 780px;
}

/* --- Hero verdict numbers -------------------------------------------- */
.p4-hero-row {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 4px;
}

.p4-hero-tile {
    display: flex;
    flex-direction: column;
}

.p4-hero-value {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.p4-hero-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.p4-hero-sep {
    width: 1px;
    align-self: stretch;
    min-height: 56px;
    background: rgba(148, 163, 184, 0.18);
}

/* --- Metrics picker (audit 01/08 report lot) --------------------------- */
.p4-metrics-picker-block {
    padding: 10px 0 4px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    margin-top: 12px;
}

.p4-metrics-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}

.p4-metrics-picker .form-check {
    margin-bottom: 6px;
    padding-left: 1.6em;
}

.p4-metrics-picker .form-check-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.p4-metrics-picker .form-check-input:checked {
    background-color: #00bf9a;
    border-color: #00bf9a;
}

/* --- Dense metric strip (desk-style ticker line) ---------------------- */
.p4-metric-strip {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    margin-top: 20px;
    padding-top: 16px;
}

.p4-metric-strip--tight {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 14px;
}

.p4-strip-item {
    flex: 1 1 128px;
    padding-right: 16px;
    margin-right: 16px;
    margin-bottom: 12px;
    border-right: 1px solid rgba(148, 163, 184, 0.14);
}

.p4-strip-item:last-child {
    border-right: none;
}

.p4-strip-value {
    font-size: 1.22rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.p4-strip-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Strategy color swatch (attribution table) ------------------------ */
.p4-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

/* --- Allocation column: align donut with the hero row on lg+ ---------- */
.p4-allocation-col {
    border-left: 1px solid rgba(148, 163, 184, 0.14);
    padding-left: 20px;
}

@media (max-width: 991.98px) {
    .p4-allocation-col {
        border-left: none;
        padding-left: 0;
        margin-top: 20px;
    }
    .p4-hero-value {
        font-size: 2.6rem;
    }
}

/* --- Light theme parity for the P4 dashboard ---------------------------- */
/* Most .p4-* rules already lean on theme tokens (var(--text-primary),
   var(--text-secondary)) and are theme-safe by construction. The two
   exceptions are the brand-teal accents authored as low-alpha rgba() over
   a dark card: alpha-blended over a WHITE card surface, that same alpha
   washes the teal out toward a pale mint with too little contrast to read
   as "signature accent" (the section numeral in particular carries real
   ordering information, not just decoration). Swap to the darker teal
   variant (P4_TEAL_DARK / #0a8a70, already used for hairlines) at a higher
   alpha so both stay legible without changing which two elements are
   allowed to carry the brand teal. */
[data-theme="light"] .p4-num {
    color: rgba(10, 138, 112, 0.85);
}

[data-theme="light"] .p4-cartel {
    border-left-color: rgba(10, 138, 112, 0.55);
}

[data-theme="light"] .p4-portfolio::before {
    background: linear-gradient(180deg,
        rgba(10, 138, 112, 0.55) 0%,
        rgba(10, 138, 112, 0.22) 50%,
        rgba(148, 163, 184, 0.16) 100%);
}

/* ------------------------------------------------------------------ */
/* Benchmark "duel" — Résultats > Performance vs Benchmark.            */
/* Design ref: design_proposals/03-benchmark-duel (Jul 2026), chromie  */
/* adaptée à la doctrine actée par Louis :                             */
/*  - le teal de marque (#00bf9a) marque l'IDENTITE de la stratégie    */
/*    uniquement (en-tête de colonne, puce du hero) — jamais le signe. */
/*  - vert/rouge = les tokens gain/perte EXISTANTS de l'app            */
/*    (utility.constants.COLORS['gain']/['loss'] = #008B8B / #D81B60), */
/*    réservés aux métriques où "plus" est objectivement mieux         */
/*    (rendement, alpha). Aucun cyan, aucun dégradé décoratif.         */
/*  - beta neutre (gris) même si sa référence "benchmark" vaut 1,0 par */
/*    construction : ce n'est ni bon ni mauvais en soi.                */
/*  - corrélation / tracking error / ratio d'information : purement    */
/*    relationnelles, un seul chip central, tiret des deux côtés.      */
/* Scope strictement .bmk-duel-* : aucune autre surface affectée.      */
/* ------------------------------------------------------------------ */

.bmk-duel {
    padding-top: 4px;
}

/* Volet « méthodologie et détail » des cartes d'audit (WFO/PBO, 16/08) :
   <details> natif — l'accordéon dbc perdait son libellé sous les surcharges
   d'accordéon de l'app (il ne restait qu'un chevron). */
.audit-details {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.audit-details-summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    list-style: none;
}

.audit-details-summary::marker,
.audit-details-summary::-webkit-details-marker {
    display: none;
}

.audit-details-summary::before {
    content: "\25B8";  /* triangle fermé */
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.15s ease;
}

.audit-details[open] > .audit-details-summary::before {
    transform: rotate(90deg);
}

.audit-details-body {
    padding: 4px 14px 14px;
}

/* Bandeau de verdict WFO/PBO (retour Louis 16/08) : la phrase de tête est
   la première chose lue, les éléments de preuve viennent dessous en liste
   courte. Pas de gras au milieu du texte — la hiérarchie passe par la
   taille et l'espacement. */
.wfo-verdict-headline {
    font-size: 0.95rem;
    line-height: 1.5;
}

.wfo-verdict-evidence {
    font-size: 0.83rem;
    line-height: 1.5;
    padding-left: 1.1rem;
    opacity: 0.92;
}

/* Cartel « question posée » (retour Louis 16/08) : une seule encre par
   paragraphe — il se distingue de la légende par la taille et la couleur de
   texte principale, jamais par du gras au milieu du gris. */
.bmk-duel-question {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.55;
    max-width: 78ch;
    margin-bottom: 10px;
}

.bmk-duel-caption {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 78ch;
    margin-bottom: 18px;
}

/* --- Hero face-à-face ------------------------------------------------ */
/* Jul 2026 fix: real strategies can post large/negative returns, so the
   two hero numbers can each run to 7-8 characters ("-179.88 %"). A 2-column
   grid with the "vs"/delta ABSOLUTELY centered over it (the original design
   ref) overlapped the numbers on real data. The center now reserves its own
   grid track — nothing can ever render on top of it. */
.bmk-duel-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr);
    align-items: stretch;
    background: rgba(148, 163, 184, 0.045);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    margin-bottom: 26px;
    overflow: hidden;
}

.bmk-duel-hero-half {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.bmk-duel-hero-half--strat {
    align-items: flex-end;
    text-align: right;
}

.bmk-duel-hero-half--bench {
    align-items: flex-start;
    text-align: left;
}

.bmk-duel-hero-label {
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
}

.bmk-duel-hero-label--strat {
    color: #00bf9a;
    justify-content: flex-end;
}

.bmk-duel-hero-label--bench {
    color: var(--text-secondary);
}

.bmk-duel-hero-swatch {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: #00bf9a;
    display: inline-block;
    flex-shrink: 0;
}

.bmk-duel-hero-value {
    font-size: clamp(1.5rem, 3.4vw, 2.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    max-width: 100%;
}

.bmk-duel-hero-value--pos { color: #008B8B; }
.bmk-duel-hero-value--neg { color: #D81B60; }
.bmk-duel-hero-value--neutral { color: var(--text-primary); }

.bmk-duel-hero-sub {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.bmk-duel-hero-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    border-left: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    min-width: 0;
}

.bmk-duel-hero-vs-chip {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-tertiary);
    font-size: 0.72rem;
    font-weight: 700;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.bmk-duel-hero-delta {
    background: var(--bg-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 14px;
    white-space: nowrap;
    border: 1px solid transparent;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
}

.bmk-duel-hero-delta.bmk-duel-delta--pos { color: #008B8B; border-color: rgba(0, 139, 139, 0.4); }
.bmk-duel-hero-delta.bmk-duel-delta--neg { color: #D81B60; border-color: rgba(216, 27, 96, 0.4); }
.bmk-duel-hero-delta.bmk-duel-delta--neutral { color: var(--text-tertiary); border-color: var(--border-light); }

/* --- Column headers --------------------------------------------------- */
.bmk-duel-headers {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr);
    padding: 6px 0 10px 0;
}

.bmk-duel-header {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.bmk-duel-header--strat { text-align: right; color: #00bf9a; }
.bmk-duel-header--bench { text-align: left; }

/* --- Duel rows: mirrored bars growing from the central axis ---------- */
.bmk-duel-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr);
    align-items: center;
    gap: 0;
    padding-top: 20px;
}

.bmk-duel-side {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 30px;
    min-width: 0;
}

.bmk-duel-side--strat { justify-content: flex-end; }
.bmk-duel-side--bench { justify-content: flex-start; }

.bmk-duel-bar-track {
    width: 124px;
    max-width: 26vw;
    height: 8px;
    display: flex;
    flex-shrink: 0;
}

.bmk-duel-bar-track--strat { justify-content: flex-end; }
.bmk-duel-bar-track--bench { justify-content: flex-start; }

.bmk-duel-bar {
    height: 8px;
    border-radius: 3px;
    min-width: 2px;
}

.bmk-duel-bar--pos { background: #008B8B; }
.bmk-duel-bar--neg { background: #D81B60; }
/* Neutral bars (beta + relational rows): brighter on the strategy side so
   "this is real data" reads even without a directional judgment color;
   dimmer on the benchmark side since it's always the reference, never the
   thing being evaluated. */
.bmk-duel-bar--neutral { background: rgba(148, 163, 184, 0.85); }
.bmk-duel-bar--bench { background: rgba(148, 163, 184, 0.45); }

.bmk-duel-value {
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 0;
    flex-shrink: 1;
    overflow-wrap: anywhere;
}

.bmk-duel-side--strat .bmk-duel-value { text-align: right; }
.bmk-duel-side--bench .bmk-duel-value { text-align: left; }

.bmk-duel-value--pos { color: #008B8B; }
.bmk-duel-value--neg { color: #D81B60; }
.bmk-duel-value--neutral { color: var(--text-primary); }
.bmk-duel-value--dim { color: var(--text-tertiary); font-weight: 500; font-size: 0.92rem; }

/* --- Central axis: line, metric chip, delta / value chip -------------- */
.bmk-duel-axis {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 0 4px;
    min-width: 0;
}

.bmk-duel-axis-line {
    position: absolute;
    top: -20px;
    bottom: 6px;
    left: 50%;
    width: 1px;
    background: var(--border-light);
}

/* Chip + optional ⓘ icon share a row so the icon never sits INSIDE the
   line-clamped text box (that combination clipped/mis-laid-out the icon).
   The chip flexes to fill the remaining width and wraps its own text. */
.bmk-duel-chip-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-bottom: 7px;
}

.bmk-duel-chip {
    position: relative;
    z-index: 2;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 0.72rem;
    line-height: 1.2;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 8px;
    /* Real translated labels ("Bêta (risque systémique)", "Rendement
       Benchmark") can be wider than the 148px axis column — wrap onto up
       to 2 lines rather than truncate silently under a neighboring bar
       (Jul 2026 fix: nowrap + overflow:hidden let the chip visually spill
       into the value columns on either side). */
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bmk-duel-chip-row .bmk-duel-chip {
    margin-bottom: 0;
}

.bmk-duel-chip--value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    padding: 5px 11px;
}

.bmk-duel-delta {
    position: relative;
    z-index: 2;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 10px;
    white-space: nowrap;
}

.bmk-duel-delta--pos { color: #008B8B; background: rgba(0, 139, 139, 0.10); border: 1px solid rgba(0, 139, 139, 0.32); }
.bmk-duel-delta--neg { color: #D81B60; background: rgba(216, 27, 96, 0.10); border: 1px solid rgba(216, 27, 96, 0.32); }
.bmk-duel-delta--neutral { color: var(--text-tertiary); background: rgba(148, 163, 184, 0.08); border: 1px solid var(--border-light); }

/* --- Tip line under each row -------------------------------------------- */
.bmk-duel-tip {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 78ch;
    margin: 10px auto 20px auto;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-light);
}

.bmk-duel-metrics > .bmk-duel-tip:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* --- Light theme parity ------------------------------------------------- */
/* Same darker-teal substitution as the P4 dashboard (P4_TEAL_DARK):
   #00bf9a alpha-blended over a white card washes out to a pale mint with
   too little contrast — the identity color must stay readable. */
[data-theme="light"] .bmk-duel-hero-label--strat,
[data-theme="light"] .bmk-duel-header--strat {
    color: #0a8a70;
}

[data-theme="light"] .bmk-duel-hero-swatch {
    background: #0a8a70;
}

[data-theme="light"] .bmk-duel-hero {
    background: rgba(15, 23, 42, 0.03);
}

/* --- Narrow screens: stack the mirrored columns ------------------------- */
@media (max-width: 767.98px) {
    .bmk-duel-hero {
        grid-template-columns: 1fr;
    }

    .bmk-duel-hero-half--strat {
        align-items: flex-start;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }

    .bmk-duel-hero-half--bench {
        padding-top: 34px;
    }

    .bmk-duel-hero-label--strat { justify-content: flex-start; }

    .bmk-duel-hero-vs {
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .bmk-duel-headers,
    .bmk-duel-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .bmk-duel-header--bench { display: none; }

    .bmk-duel-row {
        padding-top: 16px;
    }

    .bmk-duel-side--strat,
    .bmk-duel-side--bench {
        justify-content: space-between;
    }

    .bmk-duel-bar-track {
        max-width: 55vw;
    }

    .bmk-duel-axis {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
        padding: 4px 0;
    }

    .bmk-duel-axis-line { display: none; }

    .bmk-duel-chip { margin-bottom: 0; }
}

/* Bandeau d'identification d'un rapport de risque (audit institutionnel
   27/07/2026) : arrete, perimetre, devise, statut du modele. Sans lui, un
   ecran de risque n'est pas opposable dans un dossier de comite. */
.report-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid #00bf9a;
    border-radius: 10px;
}

.report-header-label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
}

.report-header-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e5f3ff;
}

/* ============================================================
   EXPORT & REPORTING — onglet Résultats (refonte 17/08/2026)
   Retour Louis : « design outdated ».

   État précédent, mesuré au rendu : `build_export_section`
   retournait une LISTE NUE de 24 contrôles (ni carte, ni titre)
   déversée à la fin de la page, avec trois boutons pleine
   largeur en trois couleurs saturées (info bleu / warning orange
   / dégradé vert→cyan) pour trois documents de MÊME nature, trois
   pilules CSV grises qui lisaient comme désactivées, et des
   reliquats Bootstrap 4 (`mr-2`, `font-weight-bold`).

   Cet onglet n'est PAS dans le namespace `.bk-root` : les styles
   reprennent la même DA (surface opaque, bordure visible, pilules,
   cyan en accent rare) avec leurs propres tokens locaux.
   ============================================================ */
.export-panel {
    --xp-surface: #0b1220;
    --xp-border: rgba(148, 163, 184, 0.22);
    --xp-hairline: rgba(255, 255, 255, 0.07);
    --xp-cyan: #00f2ff;
    --xp-ink: #cbd5e1;
    --xp-muted: #94a3b8;
    background: var(--xp-surface);
    border: 1px solid var(--xp-border);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.export-panel-head {
    padding: 1.05rem 1.5rem 1.1rem;
    background: rgba(255, 255, 255, 0.045);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
.export-panel-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #ffffff;
    line-height: 1.15;
}
.export-panel-lede {
    display: block;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--xp-muted);
    margin-top: 5px;
    max-width: 78ch;
}
.export-panel-body { padding: 1.4rem 1.5rem 1.5rem; }

/* Légende de groupe — même rôle que `.bk-table-caption` côté book */
.export-caption {
    font-size: 0.68rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--xp-muted);
    margin-bottom: 6px;
}

/* --- Documents : UNE action primaire, des variantes secondaires ---
   Trois documents de même nature ne portent pas trois couleurs. Le
   rapport standard est l'action principale ; Monte Carlo et DIC sont
   des variantes du même geste. */
.export-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-bottom: 0.35rem;
}
.export-actions .export-primary { grid-column: 1 / -1; }

.export-panel .btn.export-primary,
.export-panel .btn.export-secondary,
.export-panel .btn.export-csv {
    border-radius: 999px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.2px;
    box-shadow: none !important;
    /* Les boutons sont posés en `color="link"` pour neutraliser les couleurs
       Bootstrap (info/warning/success) : il faut donc retirer le soulignement
       et la couleur de lien qui viennent avec, sinon trois actions se lisent
       comme trois hyperliens. */
    text-decoration: none !important;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.export-panel .btn.export-primary:hover,
.export-panel .btn.export-secondary:hover,
.export-panel .btn.export-csv:hover { text-decoration: none !important; }
.export-panel .btn.export-primary {
    background: linear-gradient(135deg, #ffffff 0%, #60a5fa 100%) !important;
    border: none !important;
    color: #050a14 !important;
    padding: 0.72rem 1.25rem !important;
}
.export-panel .btn.export-secondary {
    background: transparent !important;
    border: 1px solid var(--xp-border) !important;
    color: var(--xp-ink) !important;
    padding: 0.62rem 1rem !important;
}
.export-panel .btn.export-secondary:hover:not(:disabled) {
    border-color: rgba(0, 242, 255, 0.55) !important;
    color: #ffffff !important;
}
.export-panel .btn.export-csv {
    background: transparent !important;
    border: 1px solid var(--xp-hairline) !important;
    color: var(--xp-muted) !important;
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    padding: 0.4rem 0.9rem !important;
}
.export-panel .btn.export-csv:hover:not(:disabled) {
    border-color: var(--xp-border) !important;
    color: var(--xp-ink) !important;
}
/* Données brutes : une LIGNE compacte, jamais trois pilules pleine
   largeur empilées (elles pesaient autant que les rapports). */
.export-csv-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Indisponible par le plan : l'icône du document RESTE (un cadenas qui
   remplace l'icône se lit comme une icône cassée), le plan requis part
   dans une pastille séparée. */
.export-panel .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.export-plan-badge {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.66rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--xp-muted);
    border: 1px solid var(--xp-border);
    border-radius: 999px;
    padding: 1px 8px;
    vertical-align: middle;
}

/* Volet de configuration — libellé TOUJOURS visible (un volet replié
   sans nom est pire qu'un volet ouvert). */
.export-config > summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--xp-ink);
    padding: 0.55rem 0;
    list-style: none;
}
.export-config > summary::-webkit-details-marker { display: none; }
.export-config > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.5rem;
    color: var(--xp-muted);
    transition: transform .15s ease;
}
.export-config[open] > summary::before { transform: rotate(90deg); }
.export-config-body {
    padding: 0.35rem 0 0.2rem;
    border-top: 1px solid var(--xp-hairline);
    margin-top: 0.2rem;
}
.export-scope-note {
    font-size: 0.78rem;
    color: var(--xp-muted);
    border-left: 2px solid var(--xp-border);
    padding-left: 0.7rem;
    margin: 0.1rem 0 0.9rem;
}
/* Champs qui ne s'appliquent pas au choix courant : MASQUÉS, jamais
   démontés (doctrine « labels fantômes » : un id qui disparaît du DOM
   fait échouer toute la mise à jour du callback qui l'écrit). */
.export-hidden { display: none !important; }
.export-hairline { border: 0; border-top: 1px solid var(--xp-hairline); margin: 1.1rem 0 0.9rem; }

/* ============================================================
   ONGLET RÉSULTATS — portage de la DA « P4 » du portefeuille
   (retour Louis 17/08 : « les cards de l'onglet portfolio ont
   clairement la meilleure DA avec le fond plus sombre »).

   Ce que la DA du portefeuille fait mieux, et qui est repris ici :
     · surface PLATE et SOMBRE — `--gradient-card` sur `--bg-secondary`
       (#020c1b) au lieu du verre translucide `--card-bg` posé sur le
       fond de page, qui remontait la carte au lieu de la creuser ;
     · rayon 6 px au lieu de 16 : un panneau de rapport, pas une
       tuile d'application ;
     · en-tête NUMÉROTÉ (01, 02, 03…) avec filet fin, au lieu d'un
       bandeau de carte générique ;
     · colonne vertébrale teal qui relie les sections d'une même page.

   Le numéro est un COMPTEUR CSS : il suit l'ordre du DOM, donc il
   reste juste quand une section conditionnelle (benchmark, stress,
   walk-forward) apparaît ou disparaît. Aucun constructeur Python à
   renuméroter à la main — c'était la seule façon de porter la DA sur
   les douze cartes de l'onglet sans les réécrire une par une.
   ============================================================ */
.p4-results {
    position: relative;
    padding-left: 30px;
}
.p4-results::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(0, 191, 154, 0.65) 0%,
        rgba(0, 191, 154, 0.28) 50%,
        rgba(148, 163, 184, 0.10) 100%);
}

/* Surface : `!important` obligatoire — CARD_STYLE / CARD_HEADER_STYLE sont
   appliqués en style INLINE par les constructeurs partagés, et un style
   inline bat une règle de feuille. */
.p4-results > .card,
.p4-results > .export-panel {
    background: var(--gradient-card), var(--bg-secondary) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    margin-bottom: 30px !important;
    overflow: visible;
}

.p4-results > .card > .card-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: transparent !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: 0 !important;
    padding: 24px 28px 16px !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0;
}
/* Numerotation SUPPRIMEE (retour Louis 17/08 : « enleve les numeros
   partout »). Le compteur CSS reste inutile ici : ce sont les titres, en
   degrade, qui portent desormais l'identite des sections. */
/* Les icônes des en-têtes passent en encre neutre : la teinte de marque
   vit dans la colonne vertébrale et dans les numéros, jamais répétée sur
   chaque pictogramme (même arbitrage que `.p4-section-icon`). */
.p4-results > .card > .card-header i.fas,
.p4-results > .card > .card-header i.far {
    color: var(--text-secondary) !important;
    font-size: 0.95rem;
}
.p4-results > .card > .card-body {
    padding: 20px 28px 28px !important;
}

/* Le panneau d'export suit la même peau : il porte son propre en-tête
   (titre + chapô), donc pas de compteur — il clôt la page, il ne
   s'inscrit pas dans la numérotation des sections d'analyse. */
.p4-results > .export-panel > .export-panel-head {
    background: transparent !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
    padding: 24px 28px 16px !important;
}
.p4-results > .export-panel > .export-panel-body {
    padding: 20px 28px 28px !important;
}
.p4-results > .export-panel .export-panel-title {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* En-tête de section repliable dans l'onglet Résultats : un TITRE, pas un
   bouton-lien. Le teal `#008B8B` codé en dur et les capitales sortaient du
   système typographique de la DA portefeuille. */
.p4-results .results-section-toggle,
.p4-results .results-section-toggle:hover,
.p4-results .results-section-toggle:focus {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-transform: none !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    letter-spacing: 0;
}
.p4-results .adv-metrics-chevron {
    font-size: 0.72rem !important;
    color: var(--text-secondary) !important;
    opacity: 0.75;
}

/* Première box des résultats — refonte 17/08 (audit UI + trader + user).
   Le héros et les bandeaux réutilisent les tokens `p4-*` du portefeuille ;
   seule la pastille de second rang est nouvelle. */
/* Montant secondaire : SA PROPRE LIGNE, sous la valeur principale. Posé à
   côté d'un nombre de 3,4 rem, il entrait en concurrence avec lui — sur
   « 544,52 % » suivi de « 544 520,99 USD », les deux se lisaient comme un
   seul bloc de chiffres (retour Louis 17/08). */
.p4-hero-value-badge {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
}
/* Le héros des résultats respire moins que celui du portefeuille : quatre
   tuiles au lieu de deux, sur une carte qui porte ensuite deux bandeaux. */
.results-verdict-row { margin-bottom: 1.6rem; }

/* Retour Louis 19/08 : la rangée s'arrêtait au milieu du cadre. Héritée de
   `.p4-hero-row` (flex + gap fixe de 28 px, sans distribution), elle laissait
   les quatre tuiles tassées à gauche et un vide à droite — le même défaut de
   « colonne courte à remplir » que la refonte du 17/08 avait corrigé sur la
   BOÎTE mais pas sur sa première ligne.
   Quatre colonnes de largeur ÉGALE plutôt qu'un `space-between` : les tuiles
   n'ont pas la même largeur naturelle (« Rendement total » porte un montant
   en devise au second rang, « Sharpe » tient en quatre caractères), donc une
   distribution par les espaces produirait des écarts irréguliers là où l'œil
   attend une grille. `min-width: 0` autorise la césure du libellé plutôt que
   de laisser une tuile déborder sa colonne. */
.results-verdict-row {
    gap: 20px;
    align-items: stretch;
}
.results-verdict-row > .p4-hero-tile {
    flex: 1 1 0;
    min-width: 0;
    justify-content: flex-end;
}

/* Retour Louis 20/08 : « le 130 % est plus haut ». Le repli flex ci-dessus
   aligne les tuiles par le BAS — les quatre libellés tombent donc sur une
   ligne, mais la tuile « Rendement total » est la SEULE à porter un montant
   en devise au second rang, et cette ligne supplémentaire pousse son chiffre
   de 3,4 rem d'environ 28 px au-dessus des trois autres. Sur la rangée qui
   ouvre l'écran de résultats, ce sont les grands chiffres qu'on lit d'abord :
   c'est leur ligne de base qui doit tenir, pas seulement celle des libellés.

   Les trois rangs (valeur / montant secondaire / libellé) sont donc portés
   par la GRILLE de la rangée, pas par chaque tuile : `subgrid` fait entrer
   les enfants des quatre tuiles dans les mêmes rangs, et le rang du montant
   reste réservé — vide — dans les tuiles qui n'en ont pas. Les deux lignes
   de base sont alignées en même temps, sans nœud fantôme dans le DOM.
   Le `grid-row` explicite sur chaque enfant est ce qui rend ça vrai : sans
   lui, une tuile sans montant placerait son libellé dans le rang 2 et on
   aurait rétabli le décalage qu'on vient de corriger.

   `@supports` plutôt qu'un remplacement sec : sur un moteur sans subgrid,
   la rangée retombe sur le comportement flex ci-dessus (alignement par le
   bas), qui reste lisible — jamais sur une grille à moitié appliquée. */
@supports (grid-template-rows: subgrid) {
    .results-verdict-row {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        column-gap: 20px;
        /* Le row-gap d'une grille se propage aux rangs de la subgrid : il
           doit rester nul, sinon il s'insère ENTRE la valeur, le montant et
           le libellé de chaque tuile. L'écart interne reste porté par les
           marges de `.p4-hero-value-badge` et `.p4-hero-label`. */
        row-gap: 0;
        align-items: stretch;
    }
    .results-verdict-row > .p4-hero-tile {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        /* `justify-content: flex-end` du repli flex ci-dessus poussait le
           contenu vers le BAS (axe principal d'une colonne flex). Sur une
           grille, la même déclaration pousse la colonne implicite de la tuile
           vers la DROITE : mesuré, les quatre chiffres se retrouvaient collés
           au bord droit de leur colonne, en drapeau à gauche. Remis à
           `start`, et les enfants s'étirent sur la largeur de la tuile. */
        justify-content: start;
        justify-items: stretch;
    }
    .results-verdict-row > .p4-hero-tile > .p4-hero-value { grid-row: 1; }
    .results-verdict-row > .p4-hero-tile > .p4-hero-value-badge { grid-row: 2; }
    .results-verdict-row > .p4-hero-tile > .p4-hero-label { grid-row: 3; }

    /* Quatre colonnes ne tiennent pas sous 768 px : deux rangées de deux.
       Le row-gap devant rester nul (cf. ci-dessus), la respiration entre les
       deux rangées est posée sur les tuiles du haut. */
    @media (max-width: 767.98px) {
        .results-verdict-row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .results-verdict-row > .p4-hero-tile:nth-child(-n+2) {
            margin-bottom: 22px;
        }
    }
}

/* AUCUN libellé ne doit être coupé par sa boîte (« Nombre total de tr… »
   sur l'écran-vitrine du produit). Sur un outil qui vend l'exactitude de ses
   chiffres, une ellipse CSS coûte plus cher qu'elle ne fait gagner. */
.p4-strip-label,
.results-kpi-label {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
}

/* En-tête à deux lignes (nom de stratégie + période) : le `display:flex` du
   bandeau numéroté doit aligner le numéro en HAUT du titre, pas au centre
   d'un bloc de deux lignes. */
.p4-results > .card > .card-header .p4-title-col { min-width: 0; }
.p4-results > .card > .card-header .p4-section-subtitle {
    font-weight: 400;
    margin-top: 4px;
}

/* Cartes de l'onglet Résultats montées HORS de `build_results_layout`
   (« Auditer ce résultat », conteneurs WFO/PBO) : même peau que les sections
   numérotées, sans le compteur — ce sont des panneaux d'ACTION sur le
   résultat, pas des sections d'analyse. Même règle que le panneau d'export. */
.p4-panel-standalone,
#wfo-results-container > .card,
#pbo-results-container > .card {
    background: var(--gradient-card), var(--bg-secondary) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    margin-bottom: 30px !important;
}
.p4-panel-standalone > .card-header,
#wfo-results-container > .card > .card-header,
#pbo-results-container > .card > .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
    border-radius: 0 !important;
    padding: 24px 28px 16px !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}
.p4-panel-standalone > .card-body,
#wfo-results-container > .card > .card-body,
#pbo-results-container > .card > .card-body {
    padding: 20px 28px 28px !important;
}

/* Bandeaux de métriques de l'onglet Résultats : GRILLE à colonnes égales.
   Retour Louis 17/08 : « le décalage des chiffres donne un effet bâclé ».
   En flex `1 1 128px`, chaque tuile prenait la largeur de son contenu : les
   valeurs ne tombaient sur aucun rythme régulier, les séparateurs verticaux
   se plaçaient à des intervalles inégaux, et un libellé qui passait sur deux
   lignes (« Rendement / capital investi », « Ouvertures de position »)
   décalait la ligne de base de ses voisins. En grille, les colonnes sont
   égales, les séparateurs réguliers, et une hauteur minimale de libellé
   absorbe le passage à deux lignes sans rien déplacer. */
.p4-results .p4-metric-strip {
    display: grid;
    /* `auto-fill`, PAS `auto-fit` : auto-fit effondre les pistes vides, donc
       un bandeau de 3 métriques étalait ses colonnes sur toute la largeur
       pendant que celui de 7 les serrait — les deux bandeaux de la même carte
       n'avaient aucun rythme commun. Avec auto-fill, la piste garde sa
       largeur : les colonnes tombent au même endroit d'un bandeau à l'autre. */
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 0;
    flex-wrap: nowrap;
}
.p4-results .p4-metric-strip .p4-strip-item {
    flex: none;
    padding: 0 16px;
    margin: 0;
    min-width: 0;
}
.p4-results .p4-metric-strip .p4-strip-item:first-child { padding-left: 0; }
/* Le trait de séparation est porté par le bord GAUCHE : en grille, un bord
   droit sur « sauf le dernier » retombe au mauvais endroit dès que la
   grille passe à la ligne. */
.p4-results .p4-metric-strip .p4-strip-item {
    border-right: none;
    border-left: 1px solid rgba(148, 163, 184, 0.14);
}
.p4-results .p4-metric-strip .p4-strip-item:first-child { border-left: none; }
/* Deux lignes de libellé ne doivent pas décaler les tuiles voisines. */
.p4-results .p4-metric-strip .p4-strip-label {
    min-height: 2.4em;
    align-items: flex-start;
}
/* Un MONTANT ne se coupe jamais en deux lignes (« 100,000.00 » / « EUR ») :
   la valeur est insécable, et le corps est calé pour qu'un montant à six
   chiffres tienne dans une piste de 158 px. C'est la contrainte qui fixe la
   largeur de piste, pas l'inverse. */
.p4-results .p4-metric-strip .p4-strip-value {
    font-size: 1.12rem;
    white-space: nowrap;
}


/* ============================================================
   TITRES : DEGRADE PARTOUT (retour Louis 17/08 : « laisse les
   gradient sur tous les titres, j'ai besoin d'uniformite »).

   Les en-tetes de l'onglet Resultats et les panneaux hors flux
   (audit, export, WFO/PBO) portaient une encre blanche pleine
   pendant que les titres de cartes du reste de l'app etaient en
   degrade : deux traitements pour un meme niveau de titre.
   ============================================================ */
/* Le degrade est porte par `.p4-card-title`, PAS par la boite de l'en-tete.
   Mesure a l'appui : la boite fait 1148 px, donc un titre pose a gauche
   n'echantillonnait que le debut de la rampe (le blanc) et un titre plus long
   allait un peu plus loin dans le bleu — chaque carte affichait un degrade
   different (retour Louis 17/08). Sur un `inline-block` dimensionne au texte,
   la rampe complete se joue sur chaque titre, a l'identique. */
.p4-card-title {
    display: inline-block;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    background: linear-gradient(135deg, #ffffff 0%, #60a5fa 55%, #00f2ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Les en-tetes gardent une encre pleine : seul le titre est en degrade. */
.p4-results > .card > .card-header,
.p4-panel-standalone > .card-header,
#wfo-results-container > .card > .card-header,
#pbo-results-container > .card > .card-header {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: currentColor !important;
}
.p4-results > .card > .card-header .p4-section-subtitle {
    color: var(--text-secondary) !important;
}
.p4-results > .card > .card-header i,
.p4-panel-standalone > .card-header i,
.p4-results .results-section-toggle i {
    color: var(--text-secondary) !important;
}

/* ============================================================
   PICTOGRAMMES D'AIDE DANS LES EN-TETES (retour Louis 17/08 :
   « mettre les picots dans la bonne place et bien alignes,
   l'espace entre le picot et le titre »).

   Le bouton d'aide porte une cible tactile de 44x44 (WCAG 2.5.5)
   : dans un en-tete de section, ce carre de 44 px autour d'un
   glyphe de 14 px, plus sa marge de 6 px, plus le `gap` de 18 px
   de l'en-tete, ouvrait un trou de plus de 40 px entre le titre
   et son ⓘ. On repasse au gabarit COMPACT deja sanctionne par le
   produit pour les contextes denses, et on aligne sur la LIGNE DE
   BASE du titre : avec un titre sur deux lignes (nom + periode),
   un alignement centre faisait flotter le picto au milieu du bloc.
   ============================================================ */
.p4-results > .card > .card-header,
.p4-panel-standalone > .card-header,
#wfo-results-container > .card > .card-header,
#pbo-results-container > .card > .card-header {
    align-items: baseline;
    gap: 8px;
}
.p4-results > .card > .card-header .training-info-icon,
.p4-panel-standalone > .card-header .training-info-icon,
#wfo-results-container > .card > .card-header .training-info-icon,
#pbo-results-container > .card > .card-header .training-info-icon,
.p4-results .p4-subhead .training-info-icon,
.p4-results .p4-strip-label .training-info-icon,
.p4-results .p4-hero-label .training-info-icon {
    min-width: 22px;
    min-height: 22px;
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0 0 0 2px;
    font-size: 0.78em;
    align-self: center;
    transform: translateY(1px);
}
/* Le pictogramme de tete (famille de la section) se cale lui aussi sur la
   ligne de base du titre, jamais au centre d'un bloc de deux lignes. */
.p4-results > .card > .card-header > i.fas,
.p4-panel-standalone > .card-header > i.fas {
    align-self: baseline;
    position: relative;
    top: 1px;
}


/* Un `H5` residuel dans un en-tete ne doit pas imposer sa taille : le niveau
   de titre est fixe par `.p4-card-title`, une seule fois pour tout l'onglet. */
.p4-results > .card > .card-header h5,
.p4-panel-standalone > .card-header h5 {
    font-size: inherit;
    margin: 0;
    background: none;
    -webkit-text-fill-color: currentColor;
}

/* === Tableau de stress test : lisibilite (retour Louis 19/08) ============
   Trois defauts constates a l'ecran sur l'onglet « Chocs parametriques ».

   1. La ligne de reference (« Reference — sans choc ») etait NOIRE SUR NOIRE.
      Toutes les autres lignes portent une encre INLINE (`_dd_color`,
      `_sharpe_color`, `return_ink`) et restaient donc lisibles ; la ligne de
      reference, elle, n'en pose aucune et retombait sur une couleur heritee
      invisible sur le fond de carte. On lui pose une encre explicite plutot
      que de compter sur l'heritage — c'est la seule ligne du tableau dont la
      couleur ne porte aucune information, elle doit juste se lire.
   2. La colonne « Scenario » empietait sur « Rendement » : elle porte trois
      blocs empiles (nom, description, fenetre de greffe) dont la fenetre
      « Choc injecte du AAAA-MM-JJ au AAAA-MM-JJ » est la plus longue chaine
      du tableau. Sans largeur declaree, l'auto-layout la laissait pousser la
      colonne voisine. Largeurs fixees + cesure autorisee.
   3. Les cellules chiffrees doivent rester alignees a droite : un tableau de
      montants aligne a gauche ne se compare pas en diagonale.            */
.stress-baseline-row td,
.stress-baseline-row td span,
.card .table > tbody > tr.stress-baseline-row > td {
    color: var(--text-primary) !important;
}
.stress-baseline-row .stress-baseline-scope,
.stress-baseline-row .stress-scenario-desc {
    color: var(--text-secondary) !important;
}
/* La ligne de reference ouvre le tableau : un filet la separe des scenarios
   greffes, qui ne sont pas de meme nature (elle n'a pas de choc). */
.stress-baseline-row > td {
    border-bottom: 2px solid var(--border-light) !important;
}
#stress-test-tabs ~ * .table,
.stress-baseline-row,
.stress-not-tested-row {
    vertical-align: top;
}
.stress-graft-window,
.stress-scenario-desc {
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Les <td> n'heritent pas de l'alignement pose sur les <th> : les quatre
   colonnes chiffrees (rendement, DD, Sharpe, trades) sont alignees a droite
   explicitement, la colonne Severite reste a gauche avec sa pastille. */
.stress-scenarios-table > tbody > tr > td:nth-child(n+2):nth-child(-n+5) {
    text-align: right;
}