/* ==========================================================================
   PORTFOLIO — BALANCED VIOLET / BLUE
   À charger APRÈS ton CSS actuel.
   Objectif : moderne et dynamique, sans neon/glow ni UI "IA/SaaS".
   ========================================================================== */

:root {
    /* Backgrounds */
    --color-bg-base: #090d18 !important;
    --color-bg-surface: #101727 !important;
    --color-bg-elevated: #151e32 !important;
    --color-bg-card: #101727 !important;
    --color-bg-input: #0c1220 !important;

    /* Borders */
    --color-border: rgba(180, 194, 230, 0.11) !important;
    --color-border-md: rgba(180, 194, 230, 0.18) !important;
    --color-border-hover: rgba(108, 120, 246, 0.70) !important;

    /* Main palette */
    --color-violet: #8b6df6 !important;
    --color-violet-dim: rgba(139, 109, 246, 0.12) !important;
    --color-violet-glow: rgba(139, 109, 246, 0.00) !important;

    --color-blue: #4f7df3;
    --color-blue-dim: rgba(79, 125, 243, 0.12);

    /* Legacy aliases: keep old components compatible */
    --color-pink: #8b6df6 !important;
    --color-pink-dim: rgba(139, 109, 246, 0.10) !important;
    --color-pink-glow: rgba(139, 109, 246, 0) !important;

    --color-cyan: #4f7df3 !important;
    --color-cyan-dim: rgba(79, 125, 243, 0.10) !important;
    --color-cyan-glow: rgba(79, 125, 243, 0) !important;

    --color-purple: #8b6df6 !important;

    /* Text */
    --color-text-primary: #f4f7ff !important;
    --color-text-secondary: #aeb8cf !important;
    --color-text-muted: #71809e !important;

    /* Keep gradients out of the visual language */
    --grad-accent: #8b6df6 !important;
    --grad-accent-soft: rgba(139, 109, 246, 0.12) !important;
    --grad-divider: rgba(180, 194, 230, 0.15) !important;

    /* Normal depth, never colored glow */
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.20) !important;
    --shadow-card-hover: 0 16px 42px rgba(0, 0, 0, 0.27) !important;
    --shadow-cyan: none !important;
    --shadow-pink: none !important;
    --shadow-violet: none !important;

    /* Middle ground between "bubble UI" and ultra-square */
    --radius-sm: 6px !important;
    --radius-md: 8px !important;
    --radius-lg: 10px !important;
    --radius-xl: 12px !important;
    --radius-2xl: 14px !important;

    --transition-fast: 140ms ease !important;
    --transition-base: 200ms ease !important;
    --transition-slow: 280ms ease !important;
}

/* --------------------------------------------------------------------------
   BASE / TYPE
   -------------------------------------------------------------------------- */

html,
body {
    background: var(--color-bg-base) !important;
}

body {
    color: var(--color-text-primary) !important;
}

/* Undo the "kill every shadow" rule from the classic pass if present. */
body * {
    text-shadow: none !important;
}

.display-title {
    font-weight: 800 !important;
    letter-spacing: -0.045em !important;
}

.section-title,
.dashboard-title,
.portfolio-page-title,
.auth-left-title {
    font-weight: 750 !important;
    letter-spacing: -0.025em !important;
}

.text-gradient,
.text-gradient-cyan {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--color-violet) !important;
}

.eyebrow {
    letter-spacing: 0.16em !important;
    font-weight: 600 !important;
}

.eyebrow-pink {
    color: var(--color-violet) !important;
}

.eyebrow-cyan {
    color: var(--color-blue) !important;
}

.section-description {
    color: #8290ad !important;
}

.section-eyebrow::before,
.section-eyebrow::after {
    height: 1px !important;
    opacity: 1 !important;
    max-width: 72px !important;
}

.section-eyebrow::before {
    background: rgba(139, 109, 246, 0.55) !important;
}

.section-eyebrow::after {
    background: rgba(79, 125, 243, 0.55) !important;
}

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

.navbar-portfolio {
    background: rgba(9, 13, 24, 0.90) !important;
    border-bottom: 1px solid var(--color-border) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.navbar-brand-icon {
    border-radius: 7px !important;
    background: var(--color-violet) !important;
    box-shadow: none !important;
}

.navbar-link,
.lang-btn {
    border-radius: 7px !important;
}

.navbar-link:hover,
.lang-btn:hover {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: var(--color-border-md) !important;
    transform: none !important;
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero-section {
    isolation: isolate;
}

/* Thin technical frame: visual energy without glow. */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 28px;
    z-index: 0;
    pointer-events: none;
}

.hero-left,
.hero-right {
    position: relative;
    z-index: 2;
}

.hero-left::before {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-bottom: 1.25rem;
    border-radius: 2px;
    background: var(--color-violet);
}

.hero-specs-grid {
    gap: 0.7rem !important;
}

.hero-spec-item {
    min-width: 180px;
    padding: 0.7rem 0.85rem !important;
    border: 1px solid var(--color-border) !important;
    border-left: 2px solid rgba(79, 125, 243, 0.85) !important;
    border-radius: 8px !important;
    background: rgba(16, 23, 39, 0.64) !important;
}

.hero-spec-label {
    letter-spacing: 0.10em !important;
    color: var(--color-text-muted) !important;
}

.hero-spec-value {
    font-size: 1.5rem !important;
    font-weight: 750 !important;
    margin-bottom: 0 !important;
}

.hero-tags {
    gap: 0.45rem !important;
}

.hero-tag {
    border-radius: 6px !important;
    border: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    color: var(--color-text-secondary) !important;
    padding: 0.28rem 0.62rem !important;
}

.hero-tag:nth-child(even) {
    border-color: rgba(79, 125, 243, 0.22) !important;
}

.hero-tag:nth-child(odd) {
    border-color: rgba(139, 109, 246, 0.22) !important;
}

/* --------------------------------------------------------------------------
   FILTERS
   -------------------------------------------------------------------------- */

.filter-bar,
.filter-bar-2 {
    gap: 0.45rem !important;
}

.filter-btn {
    border-radius: 7px !important;
    padding: 0.48rem 0.85rem !important;
    background: rgba(16, 23, 39, 0.76) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-secondary) !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.filter-btn:hover {
    color: var(--color-text-primary) !important;
    border-color: rgba(79, 125, 243, 0.55) !important;
    background: var(--color-bg-elevated) !important;
    box-shadow: none !important;
}

.filter-btn.active,
.filter-btn.active-all,
.filter-btn.active-cat {
    background: rgba(139, 109, 246, 0.13) !important;
    border-color: rgba(139, 109, 246, 0.75) !important;
    color: #d9d2ff !important;
    box-shadow: inset 0 -2px 0 rgba(139, 109, 246, 0.75) !important;
}

/* --------------------------------------------------------------------------
   MODEL CARDS
   -------------------------------------------------------------------------- */

.model-card {
    position: relative;
    background: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-card) !important;
    transform: translateY(0);
    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base) !important;
}

/* Small accent notch instead of a glowing outline. */
.model-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 18px;
    width: 46px;
    height: 2px;
    z-index: 4;
    background: var(--color-violet);
}

.model-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(108, 120, 246, 0.52) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

.model-card-figure {
    background: #080c15 !important;
    border-bottom: 1px solid var(--color-border) !important;
}

.model-card-figure::after {
    background: rgba(9, 13, 24, 0.08) !important;
}

.model-card-pulse {
    width: 6px !important;
    height: 6px !important;
    background: var(--color-blue) !important;
    box-shadow: none !important;
    animation: none !important;
    opacity: 0.8;
}

/* If the "classic" pass hid it, keep featured metadata available but restrained. */
.model-card-featured {
    border-radius: 6px !important;
    background: rgba(245, 158, 11, 0.10) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.author-badge,
.viewport-author-badge {
    background: rgba(9, 13, 24, 0.84) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 7px !important;
    padding: 0.25rem 0.55rem 0.25rem 0.25rem !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: none !important;
}

.author-badge-avatar,
.viewport-author-avatar,
.comment-avatar {
    border-radius: 5px !important;
}

.model-card-body {
    gap: 0.8rem !important;
}

.model-card-title {
    font-weight: 750 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
}

.model-card:hover .model-card-title {
    color: #c8d5ff !important;
}

.category-badge,
.category-badge-cyan,
.category-badge-pink,
.category-badge-amber,
.category-badge-muted {
    border-radius: 5px !important;
    border: 1px solid rgba(139, 109, 246, 0.18) !important;
    background: rgba(139, 109, 246, 0.075) !important;
    color: #9f91df !important;
    padding: 0.18rem 0.45rem !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.card-divider {
    height: 1px !important;
    border-radius: 0 !important;
    background: var(--color-border) !important;
    opacity: 1 !important;
}

.stats-grid {
    gap: 0.4rem !important;
}

.stat-chip {
    border: 1px solid rgba(180, 194, 230, 0.075) !important;
    border-radius: 6px !important;
    background: rgba(7, 11, 20, 0.42) !important;
    padding: 0.42rem 0.55rem !important;
    color: var(--color-text-secondary) !important;
    box-shadow: none !important;
}

.stat-chip-icon-cyan,
.stat-chip-icon-purple {
    color: var(--color-blue) !important;
}

.stat-chip-icon-pink {
    color: var(--color-violet) !important;
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.btn-primary-gradient,
.btn-submit,
.btn-submit-inline,
.auth-submit-btn,
.auth-submit-btn.register-gradient {
    border-radius: 8px !important;
    background: var(--color-violet) !important;
    border: 1px solid var(--color-violet) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transform: translateY(0);
}

.btn-primary-gradient:hover,
.btn-submit:hover,
.btn-submit-inline:hover,
.auth-submit-btn:hover,
.auth-submit-btn.register-gradient:hover {
    background: #7659e8 !important;
    border-color: #7659e8 !important;
    opacity: 1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

.btn-ghost-outline,
.btn-accent-outline,
.btn-inspect,
.btn-edit,
.btn-featured,
.btn-like,
.btn-pdf,
.btn-show-more {
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid var(--color-border-md) !important;
    color: var(--color-text-secondary) !important;
    box-shadow: none !important;
}

.btn-ghost-outline:hover,
.btn-accent-outline:hover,
.btn-inspect:hover,
.btn-edit:hover,
.btn-featured:hover,
.btn-like:hover,
.btn-pdf:hover,
.btn-show-more:hover {
    background: rgba(79, 125, 243, 0.07) !important;
    border-color: rgba(79, 125, 243, 0.48) !important;
    color: var(--color-text-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   PROFILE / INFO CARDS
   -------------------------------------------------------------------------- */

.about-hero-card {
    padding: 1.6rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    background: rgba(16, 23, 39, 0.55) !important;
    box-shadow: var(--shadow-card) !important;
}

.about-avatar,
.about-avatar img {
    border-radius: 14px !important;
}

.about-avatar {
    padding: 3px !important;
    border: 1px solid rgba(139, 109, 246, 0.55) !important;
    background: transparent !important;
    box-shadow: 7px 7px 0 rgba(79, 125, 243, 0.08) !important;
}

.portfolio-sidebar-card,
.portfolio-sidebar-card-highlight,
.portfolio-sidebar-card-warning,
.chart-card,
.legal-content-card,
.comment-form,
.comment-item,
.comments-panel,
.inspect-header,
.inspect-sidebar,
.inspect-main,
.portfolio-form-card-glass,
.auth-form-card,
.social-stat-box {
    border-radius: 10px !important;
}

.portfolio-sidebar-card {
    background: rgba(16, 23, 39, 0.62) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: none !important;
    transition:
        transform var(--transition-base),
        border-color var(--transition-base) !important;
}

.portfolio-sidebar-card:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 125, 243, 0.32) !important;
}

.models-grid > .portfolio-sidebar-card:nth-child(1) {
    border-top: 2px solid rgba(139, 109, 246, 0.62) !important;
}

.models-grid > .portfolio-sidebar-card:nth-child(2) {
    border-top: 2px solid rgba(79, 125, 243, 0.62) !important;
}

.models-grid > .portfolio-sidebar-card:nth-child(3) {
    border-top: 2px solid rgba(139, 109, 246, 0.42) !important;
}

.portfolio-sidebar-highlight-icon {
    filter: saturate(0.6);
}

/* --------------------------------------------------------------------------
   FORMS / TOOL UI
   -------------------------------------------------------------------------- */

.input,
.textarea,
.select,
.comment-textarea,
.auth-input,
.portfolio-form-card-glass input,
.portfolio-form-card-glass textarea,
.portfolio-form-card-glass select {
    border-radius: 7px !important;
    background: var(--color-bg-input) !important;
    border-color: var(--color-border-md) !important;
    box-shadow: none !important;
}

.input:focus,
.textarea:focus,
.select:focus,
.comment-textarea:focus,
.auth-input:focus,
.portfolio-form-card-glass input:focus,
.portfolio-form-card-glass textarea:focus,
.portfolio-form-card-glass select:focus {
    outline: 2px solid rgba(79, 125, 243, 0.18) !important;
    outline-offset: 1px !important;
    border-color: rgba(79, 125, 243, 0.72) !important;
    box-shadow: none !important;
}

.inspect-page,
.portfolio-page-wrapper {
    background: var(--color-bg-base) !important;
}

.inspect-header,
.viewport-toolbar,
.comments-panel,
.comment-form,
.legal-content-card,
.portfolio-form-card-glass,
.portfolio-sidebar-card,
.chart-card,
.auth-form-card {
    background: var(--color-bg-surface) !important;
    border-color: var(--color-border) !important;
}

.chart-card {
    box-shadow: var(--shadow-card) !important;
}

.chart-card:hover {
    border-color: rgba(79, 125, 243, 0.42) !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .hero-section::before {
        display: none;
    }

    .hero-left::before {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-tag {
        padding: 0.25rem 0.5rem !important;
    }

    .model-card:hover,
    .portfolio-sidebar-card:hover {
        transform: none !important;
    }

    .about-hero-card {
        padding: 1.2rem !important;
    }
}

/* ==========================================================================
   V2 — NAVBAR / FOOTER / FLASH
   Même direction : bleu-noir + violet/bleu, profondeur discrète, zéro glow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   NAVBAR — components moved out of inline Twig styles
   -------------------------------------------------------------------------- */

.brand-accent {
    color: var(--color-violet) !important;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.navbar-dashboard-btn,
.navbar-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.42rem 0.8rem;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.015em;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
    box-shadow: none !important;
}

.navbar-dashboard-btn {
    color: #bcb2ee;
    background: rgba(139, 109, 246, 0.07);
    border: 1px solid rgba(139, 109, 246, 0.22);
}

.navbar-dashboard-btn:hover {
    color: var(--color-text-primary);
    background: rgba(139, 109, 246, 0.12);
    border-color: rgba(139, 109, 246, 0.42);
    transform: translateY(-1px);
}

.navbar-login-btn {
    color: #fff;
    background: var(--color-violet);
    border: 1px solid var(--color-violet);
}

.navbar-login-btn:hover {
    color: #fff;
    background: #7659e8;
    border-color: #7659e8;
    transform: translateY(-1px);
}

.navbar-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(139, 109, 246, 0.34);
    background: var(--color-bg-elevated);
    box-shadow: none;
}

.navbar-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lang-switcher {
    display: flex !important;
    align-items: center;
    margin-left: 0.1rem !important;
}

.lang-btn-pure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 3px;
    border-radius: 7px;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
}

.lang-btn-pure:hover {
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--color-border);
}

.lang-flag {
    width: 24px;
    height: 24px;
    display: block;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}

.navbar-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    border: 1px solid var(--color-border-md);
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.navbar-burger:hover {
    color: var(--color-text-primary);
    border-color: rgba(79, 125, 243, 0.40);
    background: rgba(79, 125, 243, 0.06);
}

.navbar-mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 49;
    padding: 0.85rem 1rem 1rem;
    flex-direction: column;
    gap: 0.2rem;
    background: rgba(9, 13, 24, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.22);
}

.navbar-mobile-link {
    position: relative;
    padding: 0.72rem 0.8rem !important;
    border-radius: 7px !important;
}

.navbar-mobile-link::before {
    content: "";
    width: 3px;
    height: 3px;
    margin-right: 0.35rem;
    border-radius: 1px;
    background: var(--color-blue);
    opacity: 0.65;
}

.navbar-mobile-link:hover::before {
    background: var(--color-violet);
    opacity: 1;
}


/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.main-footer {
    background: #0b101c !important;
    border-top: 1px solid var(--color-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015) !important;
}

.footer-container {
    max-width: 1500px !important;
}

.footer-grid {
    position: relative;
}

/* A small technical accent, not a gradient/glow. */
.footer-grid::before {
    content: "";
    position: absolute;
    top: -1.8rem;
    left: 0;
    width: 52px;
    height: 2px;
    background: var(--color-violet);
}

.footer-logo-icon {
    border-radius: 8px !important;
    background: var(--color-violet) !important;
    box-shadow: none !important;
}

.footer-logo-text {
    letter-spacing: 0.045em !important;
}

.footer-desc,
.footer-contact-text {
    color: #7f8ca7 !important;
}

.footer-eyebrow {
    color: #71809e !important;
    letter-spacing: 0.14em !important;
}

.footer-socials {
    gap: 0.4rem !important;
}

.footer-social-link {
    width: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
    border: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: #7f8ca7 !important;
    box-shadow: none !important;
    transform: translateY(0);
}

.footer-social-link:hover {
    color: #cbd7f5 !important;
    border-color: rgba(79, 125, 243, 0.42) !important;
    background: rgba(79, 125, 243, 0.06) !important;
    transform: translateY(-2px);
    box-shadow: none !important;
}

.footer-link {
    position: relative;
    width: fit-content;
    border-radius: 5px !important;
    color: #8794ad !important;
    background: transparent !important;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast) !important;
}

.footer-link:hover {
    color: var(--color-text-primary) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    transform: translateX(2px) !important;
}

/* This is the old "Me contacter" neon button replacement. */
.footer-btn-contact {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 36px;
    padding: 0.5rem 0.85rem !important;
    border-radius: 7px !important;
    border: 1px solid rgba(139, 109, 246, 0.30) !important;
    background: rgba(139, 109, 246, 0.065) !important;
    color: #bdb3ed !important;
    font-size: 0.75rem;
    font-weight: 650 !important;
    letter-spacing: 0.015em !important;
    text-transform: none !important;
    box-shadow: none !important;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast) !important;
}

.footer-btn-contact:hover {
    color: var(--color-text-primary) !important;
    background: rgba(79, 125, 243, 0.09) !important;
    border-color: rgba(79, 125, 243, 0.48) !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}

.footer-btn-contact svg {
    color: var(--color-blue);
}

.footer-bottom {
    border-top: 1px solid rgba(180, 194, 230, 0.07);
}

.footer-copy-text,
.footer-tech-text {
    color: #65738f !important;
}


/* --------------------------------------------------------------------------
   FLASH / ALERTS
   Data colors remain semantic; visible chrome stays restrained.
   -------------------------------------------------------------------------- */

.alert-info {
    border-radius: 8px !important;
    background: var(--color-bg-surface) !important;
    border: 1px solid var(--color-border-md) !important;
    color: var(--color-text-secondary) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

.alert-info svg,
.alert-info a {
    color: var(--color-blue) !important;
}

/* Common toast shells used by Stimulus/toast libraries. */
[data-controller="flash"] + *,
.flash-message,
.toast,
.toast-message,
.alert {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}


/* --------------------------------------------------------------------------
   SMALL SCREENS
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .navbar-portfolio {
        height: 56px !important;
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }

    .navbar-brand {
        gap: 0.45rem !important;
        font-size: 0.78rem !important;
    }

    .navbar-brand-icon {
        width: 30px !important;
        height: 30px !important;
    }

    .navbar-dashboard-btn,
    .navbar-login-btn {
        padding: 0.4rem 0.55rem;
        font-size: 0;
        gap: 0;
    }

    .navbar-dashboard-btn svg,
    .navbar-login-btn svg {
        width: 16px;
        height: 16px;
    }

    .navbar-avatar {
        display: none;
    }

    .lang-btn-pure {
        width: 30px;
        height: 30px;
    }

    .lang-flag {
        width: 22px;
        height: 22px;
    }

    .navbar-mobile-menu {
        top: 56px;
    }

    .footer-grid::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-link {
        width: auto;
    }

    .footer-link:hover {
        transform: none !important;
    }

    .footer-btn-contact {
        min-width: 150px;
    }
}

/* ==========================================================================
   V3 — AUTHENTIFICATION
   Connexion / inscription / déconnexion
   Direction : panneau d'application moderne, violet + bleu, sans glow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BACKGROUND / MODAL SHELL
   -------------------------------------------------------------------------- */

.auth-bg-ghost {
    background: #090d18 !important;
    filter: none !important;
    opacity: 1 !important;
}

.auth-bg-ghost-content {
    position: absolute !important;
    inset: 0 !important;
    padding: 7rem 6vw !important;
    gap: 1rem !important;
    opacity: 1 !important;
}

/* The old fake "badges" become quiet interface skeletons. */
.auth-bg-ghost-bar-1,
.auth-bg-ghost-bar-2,
.auth-bg-ghost-badge-1,
.auth-bg-ghost-badge-2,
.auth-bg-ghost-badge-3 {
    background: #101727 !important;
    border: 1px solid rgba(180, 194, 230, 0.055) !important;
    box-shadow: none !important;
}

.auth-bg-ghost-bar-1 {
    width: min(320px, 48vw) !important;
    height: 36px !important;
    border-radius: 8px !important;
}

.auth-bg-ghost-bar-2 {
    width: min(500px, 72vw) !important;
    height: 72px !important;
    border-radius: 10px !important;
}

.auth-bg-ghost-badges {
    gap: 0.7rem !important;
}

.auth-bg-ghost-badge-1,
.auth-bg-ghost-badge-2,
.auth-bg-ghost-badge-3 {
    height: 32px !important;
    border-radius: 7px !important;
}

.auth-backdrop {
    background: rgba(5, 8, 15, 0.72) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

.auth-modal-wrapper {
    padding-top: 5.5rem !important;
    padding-bottom: 2rem !important;
}

.auth-modal-container {
    max-width: 900px !important;
    gap: 3rem !important;
}

.auth-left-panel {
    position: relative;
}

.auth-left-panel::before {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    margin-bottom: 1.25rem;
    border-radius: 2px;
    background: var(--color-blue);
}

.auth-left-panel .eyebrow {
    margin-bottom: 0.8rem !important;
}

.auth-panel-title {
    font-weight: 780 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.02 !important;
}

.auth-panel-desc {
    color: #8996af !important;
    line-height: 1.75 !important;
}

/* --------------------------------------------------------------------------
   LEFT VISUAL / FEATURES
   -------------------------------------------------------------------------- */

.auth-image-box {
    height: 170px !important;
    border-radius: 10px !important;
    border: 1px solid var(--color-border) !important;
    background: #0d1422 !important;
    box-shadow: 8px 8px 0 rgba(79, 125, 243, 0.035) !important;
}

.auth-image-box img {
    opacity: 0.38 !important;
    filter: grayscale(0.35) saturate(0.65) contrast(1.05) !important;
}

.auth-image-overlay {
    background: rgba(9, 13, 24, 0.32) !important;
}

/* Small flat markers instead of emoji / colorful badges. */
.auth-features-list {
    gap: 0.55rem !important;
}

.auth-feature-item {
    min-height: 38px;
    padding: 0.45rem 0.55rem !important;
    gap: 0.65rem !important;
    border-left: 1px solid var(--color-border-md);
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.auth-feature-item:hover {
    border-left-color: rgba(79, 125, 243, 0.68);
    background: rgba(79, 125, 243, 0.035);
}

.auth-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: #0d1422;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    color: #aeb8cf !important;
}

.auth-feature-icon.is-violet {
    border-color: rgba(139, 109, 246, 0.27);
    color: #b9acf2 !important;
}

.auth-feature-icon.is-blue {
    border-color: rgba(79, 125, 243, 0.27);
    color: #9cb5f7 !important;
}

.auth-feature-text {
    font-size: 0.81rem !important;
    color: #9ba7be !important;
}

/* --------------------------------------------------------------------------
   AUTH CARD
   -------------------------------------------------------------------------- */

.auth-form-card,
.auth-form-card.login-variant,
.auth-form-card.register-variant {
    max-width: 410px !important;
    padding: 2rem !important;
    border-radius: 11px !important;
    background: #101727 !important;
    border: 1px solid var(--color-border-md) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32) !important;
}

/* Short accent mark, not a full-width gradient rail. */
.auth-form-accent-line {
    top: -1px !important;
    left: 24px !important;
    right: auto !important;
    width: 52px !important;
    height: 2px !important;
    background: var(--color-violet) !important;
    border-radius: 0 0 2px 2px !important;
    opacity: 1 !important;
}

.auth-form-header {
    margin-bottom: 1.6rem !important;
}

.auth-form-title {
    font-weight: 760 !important;
    letter-spacing: -0.025em !important;
}

.auth-btn-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    border-radius: 7px !important;
    border: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--color-text-muted) !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast) !important;
}

.auth-btn-close:hover {
    color: var(--color-text-primary) !important;
    border-color: rgba(79, 125, 243, 0.45) !important;
    background: rgba(79, 125, 243, 0.055) !important;
}

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */

.auth-form .form-group {
    margin-bottom: 1rem !important;
}

.form-label {
    color: #aab5ca !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.025em !important;
}

.form-label-optional {
    color: #64728d !important;
}

.form-input {
    min-height: 42px !important;
    padding: 0.66rem 0.8rem !important;
    border-radius: 7px !important;
    background: #0b111d !important;
    border: 1px solid rgba(180, 194, 230, 0.14) !important;
    color: var(--color-text-primary) !important;
    box-shadow: none !important;
}

.form-input::placeholder {
    color: #56647d !important;
}

.form-input:hover {
    border-color: rgba(180, 194, 230, 0.22) !important;
}

.form-input:focus {
    outline: 2px solid rgba(79, 125, 243, 0.12) !important;
    outline-offset: 1px !important;
    border-color: rgba(79, 125, 243, 0.65) !important;
    box-shadow: none !important;
}

.btn-toggle-pw {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    right: 0.45rem !important;
    border-radius: 5px !important;
    color: #6d7b96 !important;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

.btn-toggle-pw:hover {
    color: #aebbd3 !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

/* Upload zone: technical, not playful. */
.portfolio-file-dropzone {
    padding: 1.05rem !important;
    border: 1px dashed rgba(180, 194, 230, 0.20) !important;
    border-radius: 8px !important;
    background: #0b111d !important;
}

.portfolio-file-dropzone:hover {
    border-color: rgba(79, 125, 243, 0.48) !important;
    background: rgba(79, 125, 243, 0.035) !important;
}

.portfolio-file-dropzone-icon {
    margin-bottom: 0.5rem !important;
}

.portfolio-file-dropzone-icon svg {
    width: 25px !important;
    height: 25px !important;
    color: #8298d7 !important;
    opacity: 0.8 !important;
}

/* --------------------------------------------------------------------------
   AUTH ACTIONS
   -------------------------------------------------------------------------- */

.auth-submit-btn,
.auth-submit-btn.register-gradient {
    width: 100% !important;
    min-height: 42px !important;
    margin-top: 0.35rem !important;
    padding: 0.65rem 0.9rem !important;
    border-radius: 7px !important;
    background: var(--color-violet) !important;
    border: 1px solid var(--color-violet) !important;
    color: #fff !important;
    font-size: 0.79rem !important;
    font-weight: 680 !important;
    letter-spacing: 0.015em !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.auth-submit-btn:hover,
.auth-submit-btn.register-gradient:hover {
    background: #7659e8 !important;
    border-color: #7659e8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16) !important;
}

.auth-divider-container {
    margin: 1.2rem 0 !important;
}

.auth-divider-line {
    background: rgba(180, 194, 230, 0.09) !important;
}

.auth-divider-text {
    color: #596781 !important;
    letter-spacing: 0.06em !important;
}

.auth-btn-secondary {
    min-height: 40px !important;
    padding: 0.6rem 0.8rem !important;
    border-radius: 7px !important;
    border: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.018) !important;
    color: #9aa7bf !important;
    font-size: 0.78rem !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.auth-btn-secondary:hover {
    border-color: rgba(79, 125, 243, 0.38) !important;
    background: rgba(79, 125, 243, 0.05) !important;
    color: var(--color-text-primary) !important;
}

/* Errors keep semantic red, but with lower saturation. */
.auth-alert-error {
    border-radius: 7px !important;
    background: rgba(213, 77, 94, 0.055) !important;
    border: 1px solid rgba(213, 77, 94, 0.20) !important;
    color: #e69aa5 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   LOGOUT
   -------------------------------------------------------------------------- */

.logout-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
    border: 1px solid var(--color-border-md);
    border-radius: 11px;
    background: #101727;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30);
    position: relative;
}

.logout-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 24px;
    width: 52px;
    height: 2px;
    background: var(--color-blue);
}

.logout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.logout-title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.35rem;
    font-weight: 760;
    letter-spacing: -0.025em;
}

.logout-message {
    margin: 0;
    color: #96a3bb;
    font-size: 0.84rem;
    line-height: 1.7;
}

.logout-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.logout-form {
    display: block;
    width: 100%;
}

/* Slightly more serious action without turning it into a red danger button. */
.logout-submit {
    background: #7458dc !important;
    border-color: #7458dc !important;
}

.logout-submit:hover {
    background: #684ccf !important;
    border-color: #684ccf !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .auth-modal-wrapper {
        align-items: flex-start !important;
        padding: 4.7rem 1rem 1.2rem !important;
        overflow-y: auto !important;
    }

    .auth-modal-container,
    .auth-modal-container.padded {
        padding: 0 !important;
    }

    .auth-form-card,
    .auth-form-card.login-variant,
    .auth-form-card.register-variant,
    .logout-panel {
        max-width: 100% !important;
        padding: 1.35rem !important;
        border-radius: 9px !important;
    }

    .auth-form-header {
        margin-bottom: 1.25rem !important;
    }
}

/* ==========================================================================
   V4 — AUTH AS REAL MODALS OVER THE HOME HERO
   La vraie page d'accueil est affichée derrière via iframe same-origin.
   ========================================================================== */

.auth-home-preview {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    background: #090d18;
}

.auth-home-preview-frame {
    position: absolute;
    inset: -14px;
    width: calc(100% + 28px);
    height: calc(100% + 28px);
    border: 0;
    pointer-events: none;
    user-select: none;

    /* Le léger scale masque les bords créés par le blur. */
    transform: scale(1.018);
    transform-origin: center;

    /* On garde les couleurs du portfolio, mais très en retrait. */
    filter: blur(7px) saturate(0.72) brightness(0.52);
    opacity: 0.92;
}

/* Le backdrop existant devient simplement le voile de lisibilité. */
.auth-backdrop {
    z-index: 40 !important;
    background:
        linear-gradient(
            to bottom,
            rgba(5, 8, 15, 0.40),
            rgba(5, 8, 15, 0.70)
        ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
}

/* La modale reste le seul contenu interactif. */
.auth-modal-wrapper {
    z-index: 50 !important;
}

/* La vieille fausse silhouette n'est plus utilisée. */
.auth-bg-ghost {
    display: none !important;
}

/* Un peu plus de séparation avec la vraie home derrière. */
.auth-form-card,
.auth-form-card.login-variant,
.auth-form-card.register-variant,
.logout-panel {
    background: rgba(16, 23, 39, 0.965) !important;
    border-color: rgba(180, 194, 230, 0.18) !important;
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.42),
        0 1px 0 rgba(255, 255, 255, 0.025) inset !important;
}

/* Le panneau texte reste lisible sans devenir une deuxième carte. */
.auth-left-panel {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

/* Les images décoratives internes deviennent inutiles quand le vrai hero est derrière. */
.auth-image-box.auth-image-box-optional {
    display: none !important;
}

@media (max-width: 767px) {
    .auth-home-preview-frame {
        inset: -10px;
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        transform: scale(1.025);
        filter: blur(6px) saturate(0.68) brightness(0.46);
    }

    .auth-backdrop {
        background: rgba(5, 8, 15, 0.66) !important;
    }
}

/* Respecte les préférences d'accessibilité. */
@media (prefers-reduced-motion: reduce) {
    .auth-home-preview-frame {
        transform: none;
    }
}

/* ==========================================================================
   V5 — DASHBOARD / MODEL WORKSPACE
   Dense et technique, mais calme : violet + bleu, zéro glow.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DASHBOARD SHELL
   -------------------------------------------------------------------------- */

.dashboard-page {
    min-height: 100vh;
    padding: 2.5rem 1.5rem 4rem;
    background: var(--color-bg-base);
    color: var(--color-text-primary);
}

.dashboard-shell {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.dashboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.dashboard-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.dashboard-title-mark {
    width: 3px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 2px;
    background: var(--color-violet);
}

.dashboard-title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    font-weight: 780 !important;
    letter-spacing: -0.04em !important;
}

.dashboard-subtitle {
    margin: 0;
    color: #7f8da8;
    font-size: 0.86rem;
}

.dashboard-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.dashboard-actions .btn-ghost-outline,
.dashboard-actions .btn-accent-outline {
    min-height: 36px;
    padding: 0.48rem 0.72rem !important;
    border-radius: 7px !important;
    font-size: 0.73rem;
    font-weight: 620;
    letter-spacing: 0;
    text-transform: none;
}

.dashboard-admin-link {
    color: #cdbd8b !important;
    border-color: rgba(197, 164, 91, 0.24) !important;
}

.dashboard-admin-link:hover {
    color: #ead9a5 !important;
    border-color: rgba(197, 164, 91, 0.44) !important;
    background: rgba(197, 164, 91, 0.055) !important;
}

.dashboard-logout-link {
    color: #b5969e !important;
    border-color: rgba(202, 119, 137, 0.18) !important;
}

.dashboard-logout-link:hover {
    color: #d7acb5 !important;
    border-color: rgba(202, 119, 137, 0.38) !important;
    background: rgba(202, 119, 137, 0.05) !important;
}

/* --------------------------------------------------------------------------
   KPI SUMMARY
   -------------------------------------------------------------------------- */

.dashboard-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.dashboard-summary-card {
    position: relative;
    min-height: 102px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.55rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #101727;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

.dashboard-summary-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 16px;
    width: 38px;
    height: 2px;
    background: var(--color-violet);
}

.dashboard-summary-card.is-blue::before {
    background: var(--color-blue);
}

.dashboard-summary-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.61rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #66758f;
}

.dashboard-summary-value {
    color: #eef3ff;
    font-size: 1.75rem;
    font-weight: 780;
    line-height: 1;
    letter-spacing: -0.035em;
}

.dashboard-summary-meta {
    color: #53627c;
    font-size: 0.68rem;
}

/* --------------------------------------------------------------------------
   MODEL GRID / CARDS
   -------------------------------------------------------------------------- */

.dashboard-page .models-grid {
    gap: 1rem !important;
}

.dashboard-page .model-card {
    border-radius: 10px !important;
}

.dashboard-page .model-card::before {
    width: 38px;
}

.dashboard-page .model-card-figure {
    height: 220px;
}

.dashboard-page .model-card-featured {
    left: 12px !important;
    top: 12px !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 5px !important;
    background: rgba(197, 164, 91, 0.08) !important;
    border-color: rgba(197, 164, 91, 0.22) !important;
    color: #cdbd8b !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.58rem !important;
    letter-spacing: 0.08em !important;
}

.dashboard-page .category-badge {
    color: #a99ce7 !important;
    background: rgba(139, 109, 246, 0.06) !important;
}

.dashboard-page .model-card-description {
    min-height: 2.4em;
}

/* Compact technical readouts. */
.dashboard-page .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
}

.dashboard-page .stat-chip {
    min-width: 0;
    padding: 0.38rem 0.48rem !important;
    background: rgba(5, 9, 16, 0.30) !important;
    border-color: rgba(180, 194, 230, 0.065) !important;
}

.dashboard-stat-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid rgba(79, 125, 243, 0.18);
    color: #8eabf4;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.53rem;
    font-weight: 700;
}

.dashboard-stat-code.is-violet {
    border-color: rgba(139, 109, 246, 0.20);
    color: #aa9ceb;
}

/* Likes/comments become metadata, not emoji chips. */
.social-stats-frame {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.social-stat-box {
    min-height: 34px;
    padding: 0.4rem 0.55rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(180, 194, 230, 0.07) !important;
    border-radius: 6px !important;
    background: rgba(5, 9, 16, 0.24) !important;
    color: #8390a9 !important;
    font-size: 0.7rem;
    box-shadow: none !important;
}

.social-stat-label {
    color: #66758f;
}

.social-stat-value {
    color: #cbd5e9;
    font-family: "JetBrains Mono", monospace;
    font-weight: 650;
}

/* --------------------------------------------------------------------------
   MODEL ACTIONS
   -------------------------------------------------------------------------- */

.dashboard-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.dashboard-card-actions form {
    width: 100%;
    margin: 0;
}

.dashboard-card-actions .btn-inspect,
.dashboard-card-actions .btn-edit,
.dashboard-card-actions .btn-danger,
.dashboard-card-actions .btn-featured {
    width: 100%;
    min-height: 36px;
    padding: 0.45rem 0.55rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 7px !important;
    font-size: 0.7rem !important;
    font-weight: 620 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none;
    box-shadow: none !important;
}

.dashboard-card-actions .btn-danger {
    cursor: pointer;
    color: #c698a2 !important;
    background: transparent !important;
    border: 1px solid rgba(202, 119, 137, 0.18) !important;
}

.dashboard-card-actions .btn-danger:hover {
    color: #e0b0ba !important;
    background: rgba(202, 119, 137, 0.055) !important;
    border-color: rgba(202, 119, 137, 0.38) !important;
    transform: translateY(-1px);
}

.dashboard-card-actions .btn-featured {
    color: #b9a97d !important;
    border-color: rgba(197, 164, 91, 0.18) !important;
}

.dashboard-card-actions .btn-featured:hover {
    color: #e1d09b !important;
    background: rgba(197, 164, 91, 0.055) !important;
    border-color: rgba(197, 164, 91, 0.36) !important;
}

.dashboard-action-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   DELETE DIALOG
   -------------------------------------------------------------------------- */

.dashboard-delete-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
}

.dashboard-delete-dialog::backdrop {
    background: rgba(4, 7, 13, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.dashboard-delete-modal {
    position: relative;
    width: min(390px, calc(100vw - 2rem));
    padding: 1.45rem;
    border: 1px solid rgba(180, 194, 230, 0.16);
    border-radius: 10px;
    background: #101727;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
}

.dashboard-delete-modal::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    width: 44px;
    height: 2px;
    background: #b96c7c;
}

.dashboard-modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
}

.dashboard-delete-title {
    margin: 0 2rem 0.65rem 0;
    color: #e6c0c8;
    font-size: 1rem;
    font-weight: 720;
}

.dashboard-delete-text {
    margin: 0;
    color: #909db4;
    font-size: 0.8rem;
    line-height: 1.65;
}

.dashboard-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.dashboard-delete-confirm {
    min-height: 34px;
    padding: 0.45rem 0.8rem !important;
    border-radius: 7px !important;
    border: 1px solid rgba(202, 119, 137, 0.32) !important;
    background: rgba(202, 119, 137, 0.10) !important;
    color: #e1b0ba !important;
    cursor: pointer;
    box-shadow: none !important;
}

.dashboard-delete-confirm:hover {
    background: rgba(202, 119, 137, 0.16) !important;
    border-color: rgba(202, 119, 137, 0.50) !important;
}

/* --------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */

.dashboard-empty-state {
    grid-column: 1 / -1;
    padding: 3rem 1.5rem;
    text-align: center;
    border: 1px dashed rgba(180, 194, 230, 0.13);
    border-radius: 10px;
    background: rgba(16, 23, 39, 0.45);
}

.dashboard-empty-state .empty-state-title {
    margin: 0 0 0.4rem;
    color: #dbe3f3;
    font-size: 1.05rem;
}

.dashboard-empty-state .empty-state-sub {
    margin: 0 0 1.2rem;
    color: #74829b;
}

/* --------------------------------------------------------------------------
   ADD / EDIT WORKSPACE PAGES
   -------------------------------------------------------------------------- */

.portfolio-page-wrapper {
    min-height: 100vh;
    background: var(--color-bg-base) !important;
    color: var(--color-text-primary);
}

.portfolio-page-inner {
    max-width: 1240px !important;
}

.portfolio-page-header {
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--color-border);
}

.portfolio-page-title {
    font-weight: 780 !important;
    letter-spacing: -0.04em !important;
}

.portfolio-form-grid {
    gap: 1rem !important;
}

.portfolio-form-card-glass {
    position: relative;
    padding: 1.5rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 10px !important;
    background: #101727 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18) !important;
}

.portfolio-form-card-glass::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    width: 46px;
    height: 2px;
    background: var(--color-violet);
}

.form-textarea,
.form-select {
    width: 100%;
    border-radius: 7px !important;
    background: #0b111d !important;
    border: 1px solid rgba(180, 194, 230, 0.14) !important;
    color: var(--color-text-primary) !important;
    box-shadow: none !important;
}

.form-textarea:focus,
.form-select:focus {
    outline: 2px solid rgba(79, 125, 243, 0.12) !important;
    outline-offset: 1px;
    border-color: rgba(79, 125, 243, 0.62) !important;
    box-shadow: none !important;
}

.portfolio-file-dropzone {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.portfolio-form-actions {
    gap: 0.5rem !important;
    padding-top: 0.3rem;
}

.portfolio-sidebar {
    gap: 0.75rem !important;
}

.portfolio-sidebar-card,
.portfolio-sidebar-card-highlight,
.portfolio-sidebar-card-warning {
    border: 1px solid var(--color-border) !important;
    border-radius: 9px !important;
    background: rgba(16, 23, 39, 0.66) !important;
    box-shadow: none !important;
}

.portfolio-sidebar-card-highlight {
    border-left: 2px solid rgba(79, 125, 243, 0.54) !important;
}

.portfolio-sidebar-card-highlight.is-violet {
    border-left-color: rgba(139, 109, 246, 0.58) !important;
}

.portfolio-sidebar-card-warning {
    border-left: 2px solid rgba(197, 164, 91, 0.55) !important;
    color: #b9aa84 !important;
}

.portfolio-sidebar-item {
    align-items: center !important;
}

.portfolio-tip-icon,
.portfolio-sidebar-highlight-icon,
.portfolio-sidebar-warning-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 5px !important;
    border: 1px solid rgba(180, 194, 230, 0.10);
    background: #0d1422 !important;
    color: #98a6bf !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.55rem !important;
    font-weight: 700;
    filter: none !important;
}

.portfolio-tip-icon.is-blue {
    border-color: rgba(79, 125, 243, 0.22);
    color: #94aff5 !important;
}

.portfolio-tip-icon.is-violet {
    border-color: rgba(139, 109, 246, 0.22);
    color: #ac9eeb !important;
}

.portfolio-sidebar-highlight-title {
    color: #cbd5e8 !important;
}

.portfolio-sidebar-highlight-desc,
.portfolio-tip-text,
.portfolio-sidebar-warning-text {
    color: #8491a9 !important;
}

.dashboard-legal-card {
    border-left-color: rgba(139, 109, 246, 0.50) !important;
    background: rgba(16, 23, 39, 0.66) !important;
}

.dashboard-legal-desc {
    font-size: 0.72rem !important;
    line-height: 1.55 !important;
}

.dashboard-legal-link {
    color: #a99ce7 !important;
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px solid rgba(169, 156, 231, 0.32);
}

.dashboard-legal-link:hover {
    color: #c4b9f0 !important;
    border-bottom-color: rgba(196, 185, 240, 0.65);
}

.portfolio-stat-list {
    display: flex;
    flex-direction: column;
}

.stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(180, 194, 230, 0.07);
}

.stat-row:last-child {
    border-bottom: 0;
}

.stat-row-label {
    color: #71809b !important;
    font-size: 0.72rem;
}

.stat-row-value {
    color: #cdd7e9 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
}

.dashboard-inspect-link {
    width: 100%;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .dashboard-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-actions {
        justify-content: flex-start;
    }

    .dashboard-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .dashboard-page {
        padding: 1.3rem 0.9rem 2.5rem;
    }

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

    .dashboard-page .model-card-figure {
        height: 200px;
    }

    .portfolio-form-card-glass {
        padding: 1.1rem !important;
    }

    .dashboard-delete-actions {
        flex-direction: column-reverse;
    }

    .dashboard-delete-actions > * {
        width: 100%;
    }
}

/* ==========================================================================
   V6 — 3D INSPECTOR / VIEWPORT WORKSPACE
   Direction : vrai outil 3D / devtool, dense, moderne, violet + bleu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE / HEADER
   -------------------------------------------------------------------------- */

.inspect-page {
    min-height: 100vh !important;
    padding: 0.8rem 0.8rem 2rem !important;
    background: #090d18 !important;
    color: var(--color-text-secondary) !important;
}

.inspect-container {
    width: 100% !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    gap: 0.75rem !important;
}

.inspect-header {
    min-height: 64px;
    padding: 0.75rem 0.9rem !important;
    gap: 1rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 9px !important;
    background: #101727 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16) !important;
    overflow: visible !important;
}

.inspect-header::before {
    top: -1px !important;
    left: 18px !important;
    width: 46px !important;
    height: 2px !important;
    background: var(--color-violet) !important;
}

.inspect-mode-tag {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    padding: 0 !important;
    margin-bottom: 0.2rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #71809b !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.59rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.13em !important;
    text-transform: uppercase;
}

.inspect-mode-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--color-blue);
}

.inspect-title {
    margin: 0 !important;
    color: #eef3ff !important;
    font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
    font-weight: 760 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.1;
}

.inspect-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
}

.inspect-actions .comment-actions {
    display: flex;
}

.inspect-icon-action,
.btn-delete-comment {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    border: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.018) !important;
    color: #7d8aa4 !important;
    cursor: pointer;
    box-shadow: none !important;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast) !important;
}

.inspect-icon-action svg,
.btn-delete-comment svg {
    width: 15px !important;
    height: 15px !important;
    stroke: currentColor !important;
}

.inspect-icon-action:hover,
.btn-delete-comment:hover {
    color: #aab6cd !important;
    border-color: rgba(79, 125, 243, 0.34) !important;
    background: rgba(79, 125, 243, 0.045) !important;
    transform: translateY(-1px);
}

.inspect-icon-action.is-danger,
.btn-delete-comment.is-danger {
    color: #ac7d87 !important;
    border-color: rgba(202, 119, 137, 0.16) !important;
}

.inspect-icon-action.is-danger:hover,
.btn-delete-comment.is-danger:hover {
    color: #dbabb5 !important;
    border-color: rgba(202, 119, 137, 0.34) !important;
    background: rgba(202, 119, 137, 0.05) !important;
}

.inspect-icon-action.is-report,
.btn-delete-comment.is-report {
    color: #a99670 !important;
    border-color: rgba(197, 164, 91, 0.15) !important;
}

.inspect-icon-action.is-report:hover,
.btn-delete-comment.is-report:hover {
    color: #d1bf8e !important;
    border-color: rgba(197, 164, 91, 0.34) !important;
    background: rgba(197, 164, 91, 0.05) !important;
}

/* Like is metadata/action, not a neon pill. */
.btn-like {
    min-height: 34px !important;
    padding: 0.42rem 0.65rem !important;
    gap: 0.4rem !important;
    border-radius: 7px !important;
    border: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.018) !important;
    color: #8794ac !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}

.btn-like:hover:not(:disabled) {
    color: #c1b5ef !important;
    border-color: rgba(139, 109, 246, 0.32) !important;
    background: rgba(139, 109, 246, 0.05) !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.btn-like.is-liked {
    color: #c4b8f2 !important;
    border-color: rgba(139, 109, 246, 0.40) !important;
    background: rgba(139, 109, 246, 0.08) !important;
    box-shadow: inset 0 -2px 0 rgba(139, 109, 246, 0.42) !important;
}

.like-icon {
    width: 14px !important;
    height: 14px !important;
}

.btn-back {
    min-height: 34px !important;
    padding: 0.42rem 0.65rem !important;
    border-radius: 7px !important;
    border: 1px solid var(--color-border) !important;
    background: transparent !important;
    color: #8b98b0 !important;
    font-size: 0.72rem !important;
    font-weight: 620 !important;
    text-decoration: none;
    box-shadow: none !important;
}

.btn-back:hover {
    color: var(--color-text-primary) !important;
    border-color: rgba(79, 125, 243, 0.34) !important;
    background: rgba(79, 125, 243, 0.045) !important;
    transform: translateY(-1px);
}

.btn-back svg {
    width: 14px !important;
    height: 14px !important;
}

/* --------------------------------------------------------------------------
   INLINE WARNINGS
   -------------------------------------------------------------------------- */

.inspect-alert-warning {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    min-height: 34px;
    padding: 0.42rem 0.6rem !important;
    border: 1px solid rgba(197, 164, 91, 0.16) !important;
    border-radius: 7px !important;
    background: rgba(197, 164, 91, 0.045) !important;
    color: #9f9274 !important;
    font-size: 0.69rem !important;
    box-shadow: none !important;
}

.inspect-alert-warning .alert-icon {
    width: 14px !important;
    height: 14px !important;
    stroke: #b7a57d !important;
}

.inspect-alert-warning .alert-link {
    color: #c1b5ef !important;
    font-weight: 650;
    text-decoration: none;
}

.inspect-alert-warning .alert-link:hover {
    color: #d4caf7 !important;
}

/* --------------------------------------------------------------------------
   MAIN LAYOUT / VIEWPORT
   -------------------------------------------------------------------------- */

.inspect-main-layout {
    gap: 0.75rem !important;
}

.inspect-viewport-wrapper {
    position: relative;
    border: 1px solid rgba(180, 194, 230, 0.13) !important;
    border-radius: 9px !important;
    background: #070b13 !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26) !important;
    transition:
        border-color var(--transition-base),
        box-shadow var(--transition-base) !important;
}

.inspect-viewport-wrapper:focus-within {
    border-color: rgba(79, 125, 243, 0.44) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

@media (min-width: 1024px) {
    .inspect-viewport-wrapper {
        min-height: min(76vh, 880px) !important;
    }
}

.viewport-canvas-container {
    background: #070b13;
}

/* Very subtle viewport frame corners. */
.inspect-viewport-wrapper::before,
.inspect-viewport-wrapper::after {
    content: "";
    position: absolute;
    z-index: 16;
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.inspect-viewport-wrapper::before {
    top: 10px;
    left: 10px;
    border-top: 1px solid rgba(79, 125, 243, 0.28);
    border-left: 1px solid rgba(79, 125, 243, 0.28);
}

.inspect-viewport-wrapper::after {
    right: 10px;
    bottom: 10px;
    border-right: 1px solid rgba(139, 109, 246, 0.25);
    border-bottom: 1px solid rgba(139, 109, 246, 0.25);
}

/* --------------------------------------------------------------------------
   LOADING
   -------------------------------------------------------------------------- */

.viewport-loading-overlay {
    background: rgba(7, 11, 19, 0.96) !important;
    backdrop-filter: none !important;
}

.viewport-spinner {
    width: 34px !important;
    height: 34px !important;
    margin-bottom: 0.85rem !important;
    border: 2px solid rgba(180, 194, 230, 0.09) !important;
    border-top-color: var(--color-blue) !important;
    border-right-color: rgba(139, 109, 246, 0.55) !important;
    box-shadow: none !important;
}

.viewport-loading-title {
    color: #cdd7e9 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.7rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

.viewport-loading-sub {
    color: #61708b !important;
    font-size: 0.68rem !important;
}

/* --------------------------------------------------------------------------
   AUTHOR WATERMARK
   -------------------------------------------------------------------------- */

.viewport-author-badge {
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    padding: 0.25rem 0.45rem 0.25rem 0.25rem !important;
    border: 1px solid rgba(180, 194, 230, 0.10) !important;
    border-radius: 7px !important;
    background: rgba(7, 11, 19, 0.74) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: none !important;
}

.viewport-author-avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(139, 109, 246, 0.22) !important;
}

.viewport-author-name {
    color: #8d9ab2 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.66rem !important;
}

/* --------------------------------------------------------------------------
   HUD / TOOLBAR
   -------------------------------------------------------------------------- */

.viewport-hud {
    bottom: 0.75rem !important;
    max-width: calc(100% - 1.5rem);
    padding: 0.3rem !important;
    gap: 0.1rem !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scrollbar-width: none;
    border: 1px solid rgba(180, 194, 230, 0.13) !important;
    border-bottom-color: rgba(180, 194, 230, 0.13) !important;
    border-radius: 8px !important;
    background: rgba(10, 15, 25, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30) !important;
}

.viewport-hud::-webkit-scrollbar {
    display: none;
}

.inspect-viewport-wrapper:hover .viewport-hud {
    border-bottom-color: rgba(180, 194, 230, 0.13) !important;
}

.hud-btn {
    min-height: 30px;
    flex-shrink: 0;
    padding: 0.34rem 0.48rem !important;
    gap: 0.36rem !important;
    border-radius: 6px !important;
    color: #77859f !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.66rem !important;
    font-weight: 580 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.hud-btn:hover {
    color: #c4cede !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.hud-btn.is-active,
.hud-btn.active {
    color: #a9bdf5 !important;
    background: rgba(79, 125, 243, 0.07) !important;
}

.hud-dot {
    width: 5px !important;
    height: 5px !important;
    border-radius: 1px !important;
    background: #516079 !important;
}

.hud-btn.is-active .hud-dot,
.hud-btn.active .hud-dot {
    background: var(--color-blue) !important;
}

.hud-divider {
    height: 14px !important;
    margin: 0 0.12rem !important;
    background: rgba(180, 194, 230, 0.09) !important;
}

.hud-flyout-btn {
    margin-bottom: 0.4rem !important;
    padding: 0.4rem 0.55rem !important;
    border: 1px solid rgba(180, 194, 230, 0.13) !important;
    border-radius: 6px !important;
    background: #111a2b !important;
    color: #8492aa !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.65rem !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34) !important;
}

.hud-flyout-btn:hover {
    color: #b6c8f7 !important;
    border-color: rgba(79, 125, 243, 0.26) !important;
    background: #151f32 !important;
}

/* Explode slider */
#explode-slider {
    width: 92px !important;
    height: 4px;
    margin: 0 0.45rem 0 0.15rem;
    flex-shrink: 0;
    accent-color: var(--color-violet);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   TECHNICAL SIDEBAR
   -------------------------------------------------------------------------- */

.inspect-sidebar {
    width: 100% !important;
    padding: 0.9rem !important;
    gap: 0.8rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 9px !important;
    background: #101727 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
}

@media (min-width: 1024px) {
    .inspect-sidebar {
        width: 240px !important;
    }
}

.sidebar-title {
    margin-bottom: 0.35rem !important;
    padding-bottom: 0.55rem !important;
    border-bottom: 1px solid rgba(180, 194, 230, 0.08) !important;
    color: #8693ad !important;
    font-size: 0.62rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.11em !important;
}

.sidebar-stats-list {
    gap: 0 !important;
}

.sidebar-stat-row {
    min-height: 38px;
    padding: 0.48rem 0 !important;
    border-bottom: 1px solid rgba(180, 194, 230, 0.065) !important;
}

.sidebar-stat-row.no-border {
    border-bottom: 0 !important;
}

.sidebar-stat-row .stat-label {
    color: #687791 !important;
    font-size: 0.69rem !important;
}

.sidebar-stat-row .stat-value,
.sidebar-stat-row .text-pink,
.sidebar-stat-row .text-amber,
.inspect-stat-value {
    color: #c3cee2 !important;
    font-family: "JetBrains Mono", monospace !important;
    font-size: 0.67rem !important;
    font-weight: 600 !important;
}

.sidebar-stat-row:nth-child(even) .stat-value,
.sidebar-stat-row:nth-child(even) .text-pink,
.sidebar-stat-row:nth-child(even) .text-amber {
    color: #aebdf0 !important;
}

.btn-pdf {
    width: 100%;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem !important;
    border-radius: 7px !important;
    border: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.018) !important;
    color: #8e9bb3 !important;
    font-size: 0.7rem !important;
    font-weight: 620 !important;
    text-decoration: none;
    box-shadow: none !important;
}

.btn-pdf:hover {
    color: #c0ccdf !important;
    border-color: rgba(139, 109, 246, 0.30) !important;
    background: rgba(139, 109, 246, 0.045) !important;
}

.btn-pdf svg {
    width: 14px;
    height: 14px;
}

/* --------------------------------------------------------------------------
   COMMENTS / ACTIVITY PANEL
   -------------------------------------------------------------------------- */

.inspect-comments-section {
    padding: 1rem !important;
    gap: 1rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 9px !important;
    background: #101727 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16) !important;
}

.comments-header-block {
    gap: 0.75rem !important;
}

.comments-title {
    padding-bottom: 0.7rem !important;
    gap: 0.55rem !important;
    border-bottom: 1px solid rgba(180, 194, 230, 0.08) !important;
    color: #d5deee !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

.comments-title-mark {
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--color-blue);
}

.comments-count {
    color: #64738d !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.67rem;
    font-weight: 600;
}

.comment-form {
    padding: 0.75rem !important;
    border: 1px solid rgba(180, 194, 230, 0.09) !important;
    border-radius: 8px !important;
    background: #0c1320 !important;
    box-shadow: none !important;
}

.comment-textarea {
    min-height: 84px;
    padding: 0.65rem 0.7rem !important;
    border: 1px solid rgba(180, 194, 230, 0.11) !important;
    border-radius: 7px !important;
    background: #090f1a !important;
    color: #d5deed !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.78rem !important;
    line-height: 1.6;
    resize: vertical !important;
}

.comment-textarea::placeholder {
    color: #53617a !important;
}

.comment-textarea:focus {
    outline: 2px solid rgba(79, 125, 243, 0.11) !important;
    outline-offset: 1px;
    border-color: rgba(79, 125, 243, 0.50) !important;
    box-shadow: none !important;
}

.btn-comment-submit {
    min-height: 34px !important;
    padding: 0.44rem 0.72rem !important;
    border: 1px solid var(--color-violet) !important;
    border-radius: 7px !important;
    background: var(--color-violet) !important;
    color: #fff !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

.btn-comment-submit:hover {
    border-color: #7659e8 !important;
    background: #7659e8 !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

.comments-divider {
    border-top-color: rgba(180, 194, 230, 0.07) !important;
}

.comments-list {
    gap: 0.55rem !important;
    max-height: 500px !important;
}

.comment-item {
    gap: 0.65rem !important;
    padding: 0.75rem !important;
    border: 1px solid rgba(180, 194, 230, 0.075) !important;
    border-radius: 8px !important;
    background: #0d1422 !important;
    box-shadow: none !important;
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast) !important;
}

.comment-item:hover {
    border-color: rgba(79, 125, 243, 0.15) !important;
    background: #0f1727 !important;
}

.comment-author-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(180, 194, 230, 0.10) !important;
    box-shadow: none !important;
}

.comment-username {
    color: #c7d1e4 !important;
    font-size: 0.72rem !important;
    font-weight: 650 !important;
}

.comment-date {
    color: #596882 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.58rem !important;
}

.comment-body {
    padding-left: 38px;
    color: #909db5 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.76rem !important;
    line-height: 1.65 !important;
}

.comments-empty-state {
    padding: 2rem 1rem !important;
    border: 1px dashed rgba(180, 194, 230, 0.10);
    border-radius: 8px;
    background: rgba(8, 13, 23, 0.30);
}

/* --------------------------------------------------------------------------
   INSPECT DIALOGS
   -------------------------------------------------------------------------- */

.inspect-dialog {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit;
}

.inspect-dialog::backdrop {
    background: rgba(4, 7, 13, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.comment-delete-modal-box {
    position: relative;
    width: min(390px, calc(100vw - 2rem)) !important;
    padding: 1.35rem !important;
    border: 1px solid rgba(180, 194, 230, 0.15) !important;
    border-radius: 10px !important;
    background: #101727 !important;
    color: var(--color-text-secondary) !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44) !important;
}

.comment-delete-modal-box::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    width: 42px;
    height: 2px;
    background: #b77986;
}

.btn-modal-close {
    right: 0.8rem !important;
    top: 0.8rem !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
    border: 1px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.018) !important;
    color: #77859d !important;
}

.btn-modal-close:hover {
    color: #c4cedf !important;
    border-color: rgba(79, 125, 243, 0.32) !important;
    background: rgba(79, 125, 243, 0.045) !important;
}

.modal-alert-title {
    margin: 0 2.2rem 0.6rem 0 !important;
    color: #dfbbc3 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.98rem !important;
    font-weight: 720 !important;
    letter-spacing: -0.015em;
}

.modal-alert-message {
    margin: 0 !important;
    color: #8e9bb2 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.77rem !important;
    line-height: 1.65 !important;
}

.comment-modal-actions {
    margin-top: 1.15rem !important;
    gap: 0.5rem !important;
}

.btn-modal-cancel,
.btn-modal-confirm {
    min-height: 34px !important;
    padding: 0.45rem 0.75rem !important;
    border-radius: 7px !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 620 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.btn-modal-cancel {
    border: 1px solid var(--color-border) !important;
    background: transparent !important;
    color: #8b98b0 !important;
}

.btn-modal-cancel:hover {
    color: #c5cede !important;
    border-color: rgba(79, 125, 243, 0.28) !important;
    background: rgba(79, 125, 243, 0.04) !important;
}

.btn-modal-confirm {
    border: 1px solid rgba(202, 119, 137, 0.30) !important;
    background: rgba(202, 119, 137, 0.09) !important;
    color: #daaab4 !important;
}

.btn-modal-confirm:hover {
    border-color: rgba(202, 119, 137, 0.46) !important;
    background: rgba(202, 119, 137, 0.14) !important;
    color: #e9bdc5 !important;
}

.comment-modal-backdrop {
    display: none !important;
}

/* --------------------------------------------------------------------------
   SCROLLBARS
   -------------------------------------------------------------------------- */

.inspect-page * {
    scrollbar-color: rgba(115, 132, 164, 0.28) transparent;
    scrollbar-width: thin;
}

.inspect-page *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.inspect-page *::-webkit-scrollbar-track {
    background: transparent;
}

.inspect-page *::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: rgba(115, 132, 164, 0.24);
}

.inspect-page *::-webkit-scrollbar-thumb:hover {
    background: rgba(115, 132, 164, 0.38);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .inspect-sidebar {
        flex-direction: row !important;
        align-items: flex-end;
    }

    .inspect-sidebar > div {
        flex: 1;
    }

    .btn-pdf {
        width: auto;
        min-width: 130px;
    }
}

@media (max-width: 700px) {
    .inspect-page {
        padding: 0.55rem 0.55rem 1.5rem !important;
    }

    .inspect-header {
        align-items: stretch !important;
    }

    .inspect-actions {
        justify-content: flex-start !important;
    }

    .inspect-alert-warning {
        order: 10;
        width: 100%;
    }

    .inspect-viewport-wrapper {
        min-height: 58vh;
        aspect-ratio: auto !important;
    }

    .viewport-hud {
        left: 0.55rem !important;
        right: 0.55rem !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }

    .inspect-sidebar {
        flex-direction: column !important;
        align-items: stretch;
    }

    .btn-pdf {
        width: 100%;
    }

    .inspect-comments-section {
        padding: 0.8rem !important;
    }

    .comment-body {
        padding-left: 0;
    }
}

/* ==========================================================================
   V6.1 — INSPECTOR HUD FIX
   Tous les contrôles restent visibles. Les flyouts ne sont plus clippés.
   ========================================================================== */

.viewport-hud {
    /* IMPORTANT: no horizontal slider */
    width: auto !important;
    max-width: calc(100% - 1.5rem) !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 0.2rem !important;
}

/* Keep every control available without scrolling. */
.viewport-hud .hud-btn,
.viewport-hud .hud-dropdown-container,
.viewport-hud .hud-divider,
.viewport-hud #explode-slider {
    flex-shrink: 0 !important;
}

/* Dropdowns need their own visible stacking context. */
.hud-dropdown-container {
    position: relative !important;
    overflow: visible !important;
    z-index: 30 !important;
}

/*
 * The previous toolbar used overflow-x:auto.
 * Absolute flyouts were therefore clipped even though inspect.js correctly
 * toggled the .is-open class.
 */
.hud-flyout-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    z-index: 80 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(4px) !important;
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast) !important;
}

.hud-flyout-btn.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* Two-option groups open as a compact panel above the parent control. */
.hud-flyout-btn.flyout-left {
    right: calc(50% + 3px) !important;
    left: auto !important;
}

.hud-flyout-btn.flyout-right {
    left: calc(50% + 3px) !important;
    right: auto !important;
}

/* Active parent gives clear feedback that its submenu is open. */
.hud-btn.is-active {
    color: #b7c7f5 !important;
    background: rgba(79, 125, 243, 0.08) !important;
}

/* Slider no longer consumes excessive toolbar width. */
#explode-slider {
    width: 76px !important;
    margin-right: 0.25rem !important;
}

/* Desktop: keep toolbar compact but let it use up to two rows if needed. */
@media (min-width: 701px) {
    .viewport-hud {
        min-width: 0 !important;
        padding: 0.3rem 0.35rem !important;
    }
}

/* Mobile/tablet: all controls visible, wrapping instead of scrolling. */
@media (max-width: 700px) {
    .viewport-hud {
        left: 0.55rem !important;
        right: 0.55rem !important;
        bottom: 0.55rem !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        padding: 0.35rem !important;
    }

    .hud-btn {
        min-height: 29px !important;
        padding: 0.3rem 0.42rem !important;
        font-size: 0.62rem !important;
    }

    .hud-divider {
        display: none !important;
    }

    #explode-slider {
        width: 68px !important;
    }
}

/* ==========================================================================
   V7 — CONTENT PAGES
   About / Thanks / Community / Legal / CGU
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED CONTENT BACKGROUNDS
   Rectangular technical ornaments only: no blobs, glow or loud gradients.
   -------------------------------------------------------------------------- */

.about-page,
.thanks-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    background: #090d18 !important;
}

.about-page::before,
.thanks-page::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 460px;
    height: 260px;
    top: 110px;
    left: -150px;
    border: 1px solid rgba(79, 125, 243, 0.08);
    transform: rotate(-5deg);
    pointer-events: none;
}

.about-page::after,
.thanks-page::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 380px;
    height: 520px;
    right: -130px;
    bottom: 110px;
    border: 1px solid rgba(139, 109, 246, 0.08);
    transform: rotate(6deg);
    pointer-events: none;
}

.about-page-inner,
.thanks-shell {
    position: relative;
    z-index: 1;
}

.about-page-inner::before,
.thanks-shell::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 4%;
    width: 72px;
    height: 2px;
    background: rgba(79, 125, 243, 0.34);
    pointer-events: none;
}

.about-page-inner::after,
.thanks-shell::after {
    content: "";
    position: absolute;
    left: 1%;
    top: 36%;
    width: 1px;
    height: 150px;
    background: rgba(139, 109, 246, 0.12);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */

.about-page {
    padding: 2.4rem 1.2rem 4.5rem !important;
}

.about-page-inner {
    width: 100%;
    max-width: 1500px !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.about-hero-card {
    display: grid !important;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    align-items: center !important;
    gap: clamp(2rem, 4vw, 4rem) !important;
    min-height: 360px;
    padding: clamp(1.5rem, 3vw, 2.6rem) !important;
    background: rgba(16, 23, 39, 0.93) !important;
}

.about-hero-card::before {
    width: 54px !important;
    background: var(--color-violet) !important;
}

.about-avatar {
    width: min(100%, 280px) !important;
    aspect-ratio: 1 / 1;
    justify-self: center;
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid rgba(139, 109, 246, 0.26) !important;
    box-shadow:
        10px 10px 0 rgba(79, 125, 243, 0.055),
        0 14px 34px rgba(0, 0, 0, 0.20) !important;
}

.about-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-hero-content {
    max-width: 900px !important;
}

.about-hero-content .portfolio-page-title {
    margin: 0.25rem 0 0.35rem !important;
    color: #f0f4ff !important;
    font-size: clamp(2.2rem, 5vw, 4.4rem) !important;
    line-height: 0.95 !important;
}

.about-hero-content .dashboard-subtitle {
    font-size: 0.92rem !important;
    color: #8694ae !important;
}

.about-desc {
    max-width: 900px !important;
    color: #939fb6 !important;
    line-height: 1.75 !important;
}

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem !important;
    margin-top: 1.2rem !important;
}

.about-actions .btn-primary-gradient,
.about-actions .btn-ghost-outline {
    min-height: 38px;
    border-radius: 7px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.about-section {
    position: relative;
    padding: 1.5rem 0 0.2rem !important;
    border-top: 1px solid rgba(180, 194, 230, 0.07);
}

.about-section-header {
    margin-bottom: 0.85rem !important;
}

.about-section-header .dashboard-title {
    font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
}

.about-skills-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

.about-skills-grid .portfolio-sidebar-card {
    min-height: 165px;
    padding: 1rem !important;
    border-radius: 9px !important;
    background: rgba(16, 23, 39, 0.72) !important;
}

.about-skill-code {
    min-width: 34px !important;
    width: auto !important;
    padding: 0 0.4rem;
    font-size: 0.55rem !important;
    letter-spacing: 0.06em;
}

.about-skills-grid .hero-tags {
    gap: 0.35rem !important;
    margin-top: 0.85rem !important;
}

.about-skills-grid .hero-tag {
    border-radius: 5px !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.68rem !important;
    background: rgba(255, 255, 255, 0.018) !important;
}

.about-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: start;
}

.about-grid-2 > div {
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(180, 194, 230, 0.07);
    border-radius: 9px;
    background: rgba(13, 20, 34, 0.50);
}

.about-timeline-item {
    padding: 0.75rem 0 0.9rem 0.85rem !important;
}

.timeline-dot-cyan {
    width: 7px !important;
    height: 7px !important;
    border-radius: 2px !important;
    background: var(--color-blue) !important;
    box-shadow: none !important;
}

.timeline-line {
    background: rgba(180, 194, 230, 0.09) !important;
}

.about-timeline-header {
    gap: 0.5rem !important;
}

.category-badge-cyan,
.category-badge-amber,
.category-badge-pink {
    border-radius: 5px !important;
    padding: 0.2rem 0.4rem !important;
    border: 1px solid rgba(180, 194, 230, 0.09) !important;
    background: rgba(255, 255, 255, 0.018) !important;
    color: #8f9db5 !important;
}

.about-cta {
    margin-top: 0.3rem;
    padding: 1rem 1.15rem !important;
    border-left-color: rgba(79, 125, 243, 0.50) !important;
    border-radius: 9px !important;
}

/* --------------------------------------------------------------------------
   THANKS
   -------------------------------------------------------------------------- */

.thanks-page {
    padding: 3rem 1.2rem 4.5rem;
}

.thanks-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.thanks-header {
    max-width: 820px;
    margin: 0 auto 2rem;
    text-align: center;
}

.thanks-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #8292ae;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.thanks-kicker::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--color-violet);
}

.thanks-title {
    margin: 0.65rem 0 0.7rem;
    color: #f0f4ff;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: 790;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.thanks-intro {
    max-width: 650px;
    margin: 0 auto;
    color: #8492ab;
    font-size: 0.88rem;
    line-height: 1.75;
}

.thanks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 2rem;
}

.thanks-card {
    position: relative;
    min-height: 310px;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(180, 194, 230, 0.09);
    border-radius: 10px;
    background: rgba(16, 23, 39, 0.80);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast),
        background-color var(--transition-fast);
}

.thanks-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    width: 42px;
    height: 2px;
    background: var(--color-violet);
}

.thanks-card.is-blue::before {
    background: var(--color-blue);
}

.thanks-card:hover {
    transform: translateY(-3px);
    border-color: rgba(79, 125, 243, 0.20);
    background: rgba(18, 27, 45, 0.90);
}

.thanks-card-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.thanks-card-mark {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid rgba(139, 109, 246, 0.25);
    background: rgba(139, 109, 246, 0.065);
    color: #c2b7f1;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    font-weight: 760;
}

.thanks-card-mark-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.thanks-card-mark-logo a {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.thanks-card-mark-logo img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 42px;
    max-height: 42px;

    object-fit: contain;
}

.thanks-card.is-blue .thanks-card-mark {
    border-color: rgba(79, 125, 243, 0.25);
    background: rgba(79, 125, 243, 0.06);
    color: #adc0f5;
}

.thanks-card-title {
    margin: 0;
    color: #e3e9f5;
    font-size: 1.05rem;
    font-weight: 720;
}

.thanks-card-subtitle {
    display: block;
    margin-top: 0.15rem;
    color: #7787a3;
    font-size: 0.7rem;
}

.thanks-card-copy {
    color: #8e9ab1;
    font-size: 0.8rem;
    line-height: 1.75;
}

.thanks-card-copy + .thanks-card-copy {
    margin-top: 0.8rem;
}

.thanks-card-footer {
    margin-top: 1.2rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(180, 194, 230, 0.065);
    color: #63718b;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.62rem;
}

.thanks-actions {
    display: flex;
    justify-content: center;
    margin-top: 1.4rem;
}

/* --------------------------------------------------------------------------
   COMMUNITY
   -------------------------------------------------------------------------- */

.community-page {
    min-height: 100vh;
    background: #090d18;
}

.community-section {
    border-top: 1px solid rgba(180, 194, 230, 0.05);
}

.community-heading {
    text-align: center;
    margin-bottom: 0.7rem;
}

.community-description {
    max-width: 620px;
    margin: 0 auto 2rem;
    text-align: center;
    color: #72819c;
    font-size: 0.84rem;
    line-height: 1.75;
}

.community-frame {
    display: block;
    width: 100%;
}

.community-stat-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(79, 125, 243, 0.18);
    border-radius: 4px;
    color: #91acf2;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.52rem;
    font-weight: 700;
}

.community-stat-code.is-violet {
    border-color: rgba(139, 109, 246, 0.20);
    color: #aa9ceb;
}

/* --------------------------------------------------------------------------
   LEGAL / CGU
   -------------------------------------------------------------------------- */

.legal-page {
    background: #090d18 !important;
}

.legal-layout {
    align-items: flex-start !important;
}

.legal-content-card {
    flex: 1;
    min-width: 0;
    padding: 1.2rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 9px !important;
    background: #101727 !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16) !important;
}

.legal-section {
    padding: 0.5rem 0 !important;
}

.legal-section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.75rem !important;
    color: #dce4f3 !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.legal-section-index {
    min-width: 26px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid rgba(79, 125, 243, 0.18);
    color: #91acf2;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.55rem;
    font-weight: 700;
}

.legal-text,
.legal-text-muted {
    color: #8d9ab1 !important;
    font-size: 0.78rem !important;
    line-height: 1.75 !important;
}

.legal-text-muted {
    color: #687790 !important;
}

.legal-text + .legal-text,
.legal-block-gap {
    margin-top: 0.55rem !important;
}

.legal-identity-box {
    margin: 0.75rem 0 !important;
    padding: 0.75rem !important;
    border: 1px solid rgba(180, 194, 230, 0.075) !important;
    border-left: 2px solid rgba(79, 125, 243, 0.46) !important;
    border-radius: 7px !important;
    background: #0c1320 !important;
}

.legal-identity-box.is-warning {
    border-left-color: rgba(197, 164, 91, 0.55) !important;
}

.identity-label {
    color: #687791 !important;
    font-size: 0.63rem !important;
}

.identity-value,
.legal-value,
.text-cyan {
    color: #c4cee0 !important;
    font-size: 0.72rem !important;
}

.legal-warning-label {
    color: #bca97b !important;
}

.legal-page .inspect-sidebar {
    position: sticky;
    top: 0.8rem;
}

.legal-page .lang-switcher {
    margin-left: auto !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .about-hero-card {
        grid-template-columns: 220px minmax(0, 1fr);
    }

    .about-skills-grid {
        grid-template-columns: 1fr !important;
    }

    .about-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 700px) {
    .about-page,
    .thanks-page {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }

    .about-page::before,
    .about-page::after,
    .thanks-page::before,
    .thanks-page::after {
        opacity: 0.55;
    }

    .about-hero-card {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .about-avatar {
        width: 170px !important;
        justify-self: start;
    }

    .about-hero-content .portfolio-page-title {
        font-size: 2.4rem !important;
    }

    .thanks-grid {
        grid-template-columns: 1fr;
    }

    .thanks-card {
        min-height: 260px;
    }

    .legal-page .inspect-sidebar {
        position: static;
    }
}

/* ==========================================================================
   V7.1 — PORTRAITS + THANKS BACKGROUND
   Portraits verticaux non recadrés + décor géométrique renforcé.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ABOUT — portrait vertical, photo entière visible
   -------------------------------------------------------------------------- */

.about-page .about-hero-card {
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) !important;
}

.about-page .about-avatar {
    width: min(100%, 290px) !important;
    height: auto !important;
    aspect-ratio: 4 / 4 !important;
    padding: 4px !important;
    background: #0b111d !important;
}

.about-page .about-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 9px !important;
}

/* --------------------------------------------------------------------------
   HOME / INDEX — mini portrait vertical dédié
   -------------------------------------------------------------------------- */

.home-about-card {
    display: grid !important;
    align-items: center !important;
    gap: clamp(1.4rem, 3vw, 2.6rem) !important;
}

.home-profile-avatar {
    width: 160px !important;
    height: auto !important;
    aspect-ratio: 4 / 4 !important;
    justify-self: center;
    padding: 3px !important;
    overflow: hidden;
    border-radius: 10px !important;
    border: 1px solid rgba(139, 109, 246, 0.28) !important;
    background: #0b111d !important;
    box-shadow:
        8px 8px 0 rgba(79, 125, 243, 0.055),
        0 12px 28px rgba(0, 0, 0, 0.18) !important;
}

.home-profile-avatar img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 7px !important;
}

/* --------------------------------------------------------------------------
   THANKS — more geometric background shapes
   -------------------------------------------------------------------------- */

.thanks-geometry {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.thanks-geometry span {
    position: absolute;
    display: block;
    pointer-events: none;
}

/* Large outlined frames */
.thanks-geo-1 {
    width: 300px;
    height: 180px;
    top: 7%;
    right: 5%;
    border: 1px solid rgba(79, 125, 243, 0.10);
    transform: rotate(8deg);
}

.thanks-geo-2 {
    width: 220px;
    height: 330px;
    left: 5%;
    top: 39%;
    border: 1px solid rgba(139, 109, 246, 0.085);
    transform: rotate(-7deg);
}

.thanks-geo-3 {
    width: 420px;
    height: 110px;
    right: -100px;
    bottom: 9%;
    border: 1px solid rgba(139, 109, 246, 0.075);
    transform: rotate(-5deg);
}

/* Small technical squares */
.thanks-geo-4 {
    width: 36px;
    height: 36px;
    left: 13%;
    top: 18%;
    border: 1px solid rgba(79, 125, 243, 0.16);
    transform: rotate(14deg);
}

.thanks-geo-5 {
    width: 22px;
    height: 22px;
    right: 18%;
    top: 48%;
    border: 1px solid rgba(139, 109, 246, 0.18);
    transform: rotate(45deg);
}

/* Lines / axes */
.thanks-geo-6 {
    width: 150px;
    height: 1px;
    left: 4%;
    bottom: 18%;
    background: rgba(79, 125, 243, 0.15);
    transform: rotate(-12deg);
}

.thanks-geo-7 {
    width: 1px;
    height: 130px;
    right: 9%;
    top: 26%;
    background: rgba(139, 109, 246, 0.13);
}

/* Small corner / bracket */
.thanks-geo-8 {
    width: 56px;
    height: 56px;
    left: 50%;
    bottom: 7%;
    border-left: 1px solid rgba(79, 125, 243, 0.14);
    border-bottom: 1px solid rgba(79, 125, 243, 0.14);
    transform: rotate(-12deg);
}

.thanks-shell {
    z-index: 2 !important;
}

@media (max-width: 980px) {
    .about-page .about-hero-card {
        grid-template-columns: 220px minmax(0, 1fr) !important;
    }

    .home-about-card {
        grid-template-columns: 145px minmax(0, 1fr) !important;
    }

    .home-profile-avatar {
        width: 135px !important;
    }
}

@media (max-width: 700px) {
    .about-page .about-hero-card,
    .home-about-card {
        grid-template-columns: 1fr !important;
    }

    .about-page .about-avatar {
        width: 210px !important;
        justify-self: start !important;
    }

    .home-profile-avatar {
        width: 150px !important;
        justify-self: start !important;
    }

    .thanks-geo-2,
    .thanks-geo-7 {
        display: none !important;
    }

    .thanks-geo-1,
    .thanks-geo-3 {
        opacity: 0.7;
    }
}

/* ==========================================================================
   V8 — 3S-GTE TECHNICAL SIMULATOR
   Simulator viewer + scientific analysis workspace
   ========================================================================== */

/* --------------------------------------------------------------------------
   SHARED SIMULATOR FOUNDATION
   -------------------------------------------------------------------------- */

.simulator-page,
.analysis-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background: #080c15 !important;
    color: #dce4f2;
}

.simulator-page::before,
.analysis-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(122, 140, 175, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122, 140, 175, 0.028) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 82%);
}

.simulator-page::after,
.analysis-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    top: 100px;
    right: -170px;
    width: 460px;
    height: 250px;
    border: 1px solid rgba(79, 125, 243, 0.07);
    transform: rotate(7deg);
    pointer-events: none;
}

.simulator-shell,
.analysis-shell {
    width: min(100%, 1900px) !important;
    max-width: 1900px !important;
    margin: 0 auto !important;
}

/* --------------------------------------------------------------------------
   SIMULATOR — TOP HEADER
   -------------------------------------------------------------------------- */

.simulator-page {
    padding: 0.3rem 0.3rem 0.5rem !important;
}

.simulator-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem !important;
}

.simulator-header {
    min-height: 68px;
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.8rem 0.95rem !important;
    border: 1px solid rgba(180, 194, 230, 0.10) !important;
    border-radius: 9px !important;
    background: rgba(16, 23, 39, 0.94) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
    position: relative;
    overflow: hidden;
}

.simulator-header::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    width: 46px;
    height: 2px;
    background: var(--color-violet);
}

.simulator-identity h1 {
    margin: 0 !important;
    color: #f1f5ff !important;
    font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
    font-weight: 780 !important;
    letter-spacing: -0.035em !important;
}

.simulator-identity p {
    margin: 0.2rem 0 0 !important;
    color: #6f7e99 !important;
    font-size: 0.7rem !important;
    font-family: "JetBrains Mono", monospace;
    letter-spacing: 0.05em;
}

.simulator-header-status {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.4rem !important;
    margin: 0 !important;
}

.simulator-header-status > div {
    min-width: 128px;
    padding: 0.48rem 0.65rem !important;
    border: 1px solid rgba(180, 194, 230, 0.075) !important;
    border-radius: 7px !important;
    background: #0c1320 !important;
}

.simulator-header-status dt {
    margin-bottom: 0.18rem !important;
    color: #5d6b84 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.54rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase;
}

.simulator-header-status dd,
.simulator-header-status strong {
    margin: 0 !important;
    color: #c9d3e5 !important;
    font-size: 0.7rem !important;
    font-weight: 650 !important;
}

.header-status-item--engine dd {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.engine-state-marker {
    width: 7px !important;
    height: 7px !important;
    border-radius: 2px !important;
    background: #59667d !important;
    box-shadow: none !important;
}

.engine-state-marker[data-state="running"],
.engine-state-marker[data-state="on"] {
    background: #72b98b !important;
}

/* --------------------------------------------------------------------------
   SIMULATOR — WORKSPACE
   -------------------------------------------------------------------------- */

.simulator-workspace {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 0.75rem !important;
    align-items: stretch;
}

.engine-viewer-panel,
.instrument-panel {
    border: 1px solid rgba(180, 194, 230, 0.10) !important;
    border-radius: 9px !important;
    background: rgba(13, 20, 34, 0.92) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.20) !important;
}

.engine-viewer-panel {
    min-width: 0;
    overflow: hidden;
}

.viewer-toolbar {
    min-height: 62px;
    padding: 0.75rem 0.85rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 1rem;
    border-bottom: 1px solid rgba(180, 194, 230, 0.075) !important;
    background: #101727 !important;
}

.viewer-toolbar h2,
.instrument-header h2 {
    margin: 0 !important;
    color: #dce5f4 !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
}

.viewer-toolbar p,
.instrument-header p {
    margin: 0.18rem 0 0 !important;
    color: #65748e !important;
    font-size: 0.62rem !important;
}

.viewer-method-data {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.3rem 0.55rem !important;
    max-width: 650px;
    color: #596881 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.55rem !important;
}

.viewer-method-data span {
    white-space: nowrap;
}

.viewer-method-data span::before {
    content: "·";
    margin-right: 0.45rem;
    color: #41506a;
}

.viewer-method-data span:first-child::before {
    display: none;
}

.viewer-method-data a {
    color: #849ef0 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(132, 158, 240, 0.25);
}

.viewer-method-data a:hover {
    color: #a9bcf5 !important;
}

.simulator-viewport {
    position: relative;
    min-height: clamp(520px, 68vh, 820px) !important;
    background: #060a11 !important;
    overflow: hidden;
}

.simulator-viewport::before,
.simulator-viewport::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.simulator-viewport::before {
    top: 12px;
    left: 12px;
    border-top: 1px solid rgba(79, 125, 243, 0.28);
    border-left: 1px solid rgba(79, 125, 243, 0.28);
}

.simulator-viewport::after {
    right: 12px;
    bottom: 12px;
    border-right: 1px solid rgba(139, 109, 246, 0.24);
    border-bottom: 1px solid rgba(139, 109, 246, 0.24);
}

#engineViewerCanvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.viewport-help {
    position: absolute !important;
    left: 0.75rem !important;
    bottom: 0.65rem !important;
    margin: 0 !important;
    padding: 0.3rem 0.45rem !important;
    border: 1px solid rgba(180, 194, 230, 0.075) !important;
    border-radius: 5px !important;
    background: rgba(7, 11, 19, 0.72) !important;
    color: #596881 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.54rem !important;
    backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------------
   SIMULATOR — COMMAND BAR
   -------------------------------------------------------------------------- */

.viewer-commandbar {
    min-height: 58px;
    padding: 0.55rem 0.65rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    flex-wrap: wrap !important;
    border-top: 1px solid rgba(180, 194, 230, 0.075) !important;
    background: #0d1422 !important;
}

.command-button,
.command-link {
    min-height: 34px !important;
    padding: 0.42rem 0.65rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid rgba(180, 194, 230, 0.11) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.018) !important;
    color: #8795ad !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.68rem !important;
    font-weight: 620 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast) !important;
}

.command-button:hover,
.command-link:hover {
    color: #c8d2e4 !important;
    border-color: rgba(79, 125, 243, 0.30) !important;
    background: rgba(79, 125, 243, 0.045) !important;
    transform: translateY(-1px);
}

.command-button[aria-pressed="true"] {
    color: #b4c4f6 !important;
    border-color: rgba(79, 125, 243, 0.38) !important;
    background: rgba(79, 125, 243, 0.075) !important;
    box-shadow: inset 0 -2px 0 rgba(79, 125, 243, 0.42) !important;
}

.command-button--engine[data-state="on"],
.command-button--engine[data-state="running"] {
    color: #a9d1b6 !important;
    border-color: rgba(91, 176, 119, 0.30) !important;
    background: rgba(91, 176, 119, 0.065) !important;
}

.command-button--throttle {
    min-width: 100px;
}

.command-button--throttle small {
    display: block;
    color: #596780;
    font-size: 0.52rem;
    font-weight: 500;
}

.throttle-command {
    min-width: 170px;
    padding: 0.38rem 0.55rem !important;
    border: 1px solid rgba(180, 194, 230, 0.08) !important;
    border-radius: 7px !important;
    background: #0a101b !important;
}

.throttle-command__header {
    margin-bottom: 0.28rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #65748e;
    font-size: 0.59rem;
}

.throttle-command__header strong {
    color: #aeb9cd !important;
    font-family: "JetBrains Mono", monospace;
}

.throttle-track,
.rpm-track {
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(180, 194, 230, 0.08) !important;
    overflow: hidden;
}

#throttleBarFill {
    display: block;
    height: 100%;
    background: var(--color-violet) !important;
    box-shadow: none !important;
}

.viewer-mode-group,
.viewer-utility-group {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.viewer-utility-group {
    margin-left: auto;
}

/* --------------------------------------------------------------------------
   SIMULATOR — INSTRUMENTATION
   -------------------------------------------------------------------------- */

.instrument-panel {
    min-width: 0;
    padding: 0 !important;
    overflow: hidden;
}

.instrument-header {
    min-height: 62px;
    padding: 0.75rem 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.6rem;
    border-bottom: 1px solid rgba(180, 194, 230, 0.075) !important;
    background: #101727 !important;
}

.limiter-state {
    padding: 0.22rem 0.38rem !important;
    border: 1px solid rgba(180, 194, 230, 0.09) !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #6f7d96 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.52rem !important;
    box-shadow: none !important;
}

.rpm-instrument {
    padding: 1rem 0.85rem !important;
    border-bottom: 1px solid rgba(180, 194, 230, 0.07) !important;
    background: #0c1320 !important;
}

.measure-label {
    color: #61708a !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.55rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rpm-value {
    display: block;
    margin: 0.3rem 0 0.6rem;
    color: #edf2fd !important;
    font-size: clamp(1.7rem, 3vw, 2.35rem) !important;
    font-weight: 790 !important;
    letter-spacing: -0.04em;
}

#rpmBarFill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--color-blue), var(--color-violet)) !important;
    box-shadow: none !important;
}

.rpm-scale {
    margin-top: 0.35rem;
    display: flex;
    justify-content: space-between;
    color: #43516a !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.48rem !important;
}

.instrument-pair {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(180, 194, 230, 0.07) !important;
}

.measure-block {
    min-height: 88px;
    padding: 0.8rem !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.4rem;
    border-right: 1px solid rgba(180, 194, 230, 0.07) !important;
    background: #0d1422 !important;
}

.measure-block:nth-child(even) {
    border-right: 0 !important;
}

.measure-block strong {
    color: #cbd5e7 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.86rem !important;
    font-weight: 650 !important;
}

/* --------------------------------------------------------------------------
   ANALYSIS — PAGE FOUNDATION
   -------------------------------------------------------------------------- */

.analysis-page {
    padding: 0.8rem 0.8rem 2.5rem !important;
}

.analysis-shell {
    display: flex;
    flex-direction: column;
    gap: 0.65rem !important;
}

.analysis-header {
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto auto;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.8rem 0.9rem !important;
    border: 1px solid rgba(180, 194, 230, 0.10) !important;
    border-radius: 9px !important;
    background: rgba(16, 23, 39, 0.95) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
    position: relative;
}

.analysis-header::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    width: 46px;
    height: 2px;
    background: var(--color-blue);
}

.analysis-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
}

.analysis-back-link {
    min-height: 34px;
    padding: 0.42rem 0.55rem !important;
    display: inline-flex !important;
    align-items: center;
    border: 1px solid rgba(180, 194, 230, 0.10) !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #8491a9 !important;
    font-size: 0.66rem !important;
    text-decoration: none !important;
}

.analysis-back-link:hover {
    color: #c6d0e2 !important;
    border-color: rgba(79, 125, 243, 0.30) !important;
    background: rgba(79, 125, 243, 0.04) !important;
}

.analysis-title-group h1 {
    margin: 0 !important;
    color: #eef3fd !important;
    font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
    font-weight: 770 !important;
    letter-spacing: -0.035em !important;
}

.analysis-title-group p {
    margin: 0.18rem 0 0 !important;
    color: #687791 !important;
    font-size: 0.65rem !important;
}

.analysis-header-state {
    display: flex !important;
    align-items: stretch;
    gap: 0.3rem !important;
}

.analysis-header-state > div {
    min-width: 112px;
    padding: 0.4rem 0.52rem !important;
    border: 1px solid rgba(180, 194, 230, 0.07) !important;
    border-radius: 6px !important;
    background: #0c1320 !important;
}

.analysis-header-state span,
.analysis-session-control > span {
    display: block;
    margin-bottom: 0.16rem;
    color: #586781 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.49rem !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.analysis-header-state strong {
    color: #bdc8dc !important;
    font-size: 0.64rem !important;
}

.analysis-header-actions {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    gap: 0.35rem !important;
}

.analysis-session-control {
    min-width: 210px;
}

.analysis-session-control select,
.compact-select select {
    min-height: 32px !important;
    padding: 0.35rem 1.8rem 0.35rem 0.5rem !important;
    border: 1px solid rgba(180, 194, 230, 0.11) !important;
    border-radius: 6px !important;
    background: #0a111d !important;
    color: #9facbf !important;
    font-size: 0.62rem !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   ANALYSIS — BUTTONS / SUMMARY / TABS
   -------------------------------------------------------------------------- */

.analysis-button,
.analysis-expand {
    min-height: 32px !important;
    padding: 0.38rem 0.56rem !important;
    border: 1px solid rgba(180, 194, 230, 0.11) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.018) !important;
    color: #8492aa !important;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
    font-size: 0.62rem !important;
    font-weight: 620 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
}

.analysis-button:hover,
.analysis-expand:hover {
    color: #c4cfdf !important;
    border-color: rgba(79, 125, 243, 0.30) !important;
    background: rgba(79, 125, 243, 0.045) !important;
}

.analysis-button--primary {
    color: #fff !important;
    border-color: var(--color-violet) !important;
    background: var(--color-violet) !important;
}

.analysis-button--primary:hover {
    color: #fff !important;
    border-color: #7659e8 !important;
    background: #7659e8 !important;
}

.analysis-button--danger,
.analysis-button--danger-muted {
    color: #b98e97 !important;
    border-color: rgba(202, 119, 137, 0.18) !important;
    background: rgba(202, 119, 137, 0.035) !important;
}

.analysis-summary {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.analysis-summary dl {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem !important;
    margin: 0 !important;
}

.analysis-summary dl > div {
    min-height: 78px;
    padding: 0.65rem 0.75rem !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(180, 194, 230, 0.075) !important;
    border-radius: 8px !important;
    background: rgba(16, 23, 39, 0.78) !important;
    position: relative;
    overflow: hidden;
}

.analysis-summary dl > div::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 14px;
    width: 32px;
    height: 2px;
    background: var(--color-violet);
}

.analysis-summary dl > div:nth-child(even)::before {
    background: var(--color-blue);
}

.analysis-summary dt {
    color: #64728b !important;
    font-size: 0.58rem !important;
}

.analysis-summary dd {
    margin: 0 !important;
    color: #d6dfef !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
}

.analysis-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    padding: 0.3rem !important;
    border: 1px solid rgba(180, 194, 230, 0.09) !important;
    border-radius: 8px !important;
    background: rgba(9, 14, 24, 0.94) !important;
    backdrop-filter: blur(10px);
}

.analysis-tab-list {
    display: flex !important;
    gap: 0.2rem !important;
    flex-wrap: wrap !important;
}

.analysis-tab {
    min-height: 30px !important;
    padding: 0.36rem 0.52rem !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #66758f !important;
    font-size: 0.61rem !important;
    font-weight: 620 !important;
}

.analysis-tab:hover {
    color: #aab7ca !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

.analysis-tab.is-active {
    color: #b8c8f5 !important;
    background: rgba(79, 125, 243, 0.075) !important;
    box-shadow: inset 0 -2px 0 rgba(79, 125, 243, 0.42) !important;
}

/* --------------------------------------------------------------------------
   ANALYSIS — PHYSICS CHAIN
   -------------------------------------------------------------------------- */

.physics-chain {
    padding: 0.75rem 0.85rem !important;
    border: 1px solid rgba(180, 194, 230, 0.075) !important;
    border-radius: 8px !important;
    background: rgba(13, 20, 34, 0.68) !important;
}

.physics-chain-heading {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 1rem;
    margin-bottom: 0.6rem !important;
}

.physics-chain-heading h2 {
    margin: 0 !important;
    color: #cbd5e6 !important;
    font-size: 0.76rem !important;
}

.physics-chain-heading p {
    margin: 0 !important;
    color: #596881 !important;
    font-size: 0.58rem !important;
}

.physics-chain-flow {
    display: flex !important;
    align-items: center !important;
    gap: 0.28rem !important;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
}

.physics-chain-step {
    flex-shrink: 0;
    padding: 0.3rem 0.42rem !important;
    border: 1px solid rgba(180, 194, 230, 0.075) !important;
    border-radius: 5px !important;
    background: #0b121f !important;
    color: #8391aa !important;
    font-size: 0.56rem !important;
}

.physics-chain-arrow {
    color: #40506b !important;
    font-size: 0.7rem !important;
}

/* --------------------------------------------------------------------------
   ANALYSIS — PANELS / CHARTS
   -------------------------------------------------------------------------- */

.analysis-content {
    display: flex !important;
    flex-direction: column;
    gap: 0.65rem !important;
}

.analysis-section {
    min-width: 0;
}

.analysis-panel {
    border: 1px solid rgba(180, 194, 230, 0.09) !important;
    border-radius: 9px !important;
    background: rgba(13, 20, 34, 0.92) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16) !important;
    overflow: hidden;
}

.analysis-panel-header {
    min-height: 62px;
    padding: 0.7rem 0.8rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.8rem;
    border-bottom: 1px solid rgba(180, 194, 230, 0.075) !important;
    background: #101727 !important;
}

.analysis-panel-header h2 {
    margin: 0 !important;
    color: #dbe4f3 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
}

.analysis-panel-header p {
    margin: 0.16rem 0 0 !important;
    color: #60708a !important;
    font-size: 0.58rem !important;
    line-height: 1.5;
}

.analysis-panel-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.3rem !important;
}

.analysis-panel-body {
    padding: 0.75rem !important;
    gap: 0.65rem !important;
}

.analysis-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 260px !important;
}

.analysis-split--wide {
    grid-template-columns: minmax(0, 1fr) 280px !important;
}

.analysis-split--cycle {
    grid-template-columns: minmax(0, 1fr) 300px !important;
}

.chart-frame {
    position: relative;
    min-width: 0;
    min-height: 380px !important;
    padding: 0.55rem !important;
    border: 1px solid rgba(180, 194, 230, 0.065) !important;
    border-radius: 7px !important;
    background: #080e18 !important;
    box-shadow: none !important;
}

.chart-frame--large {
    min-height: 460px !important;
}

.chart-frame--cycle,
.chart-frame--turbo,
.chart-frame--residual {
    min-height: 420px !important;
}

.chart-empty-state {
    color: #55647d !important;
    font-size: 0.67rem !important;
}

.engineering-balance,
.numerical-method {
    padding: 0.7rem !important;
    border: 1px solid rgba(180, 194, 230, 0.075) !important;
    border-radius: 7px !important;
    background: #0c1320 !important;
}

.engineering-balance h3,
.numerical-method h3,
.cycle-readout-section h3 {
    margin: 0 0 0.5rem !important;
    color: #9eacc2 !important;
    font-size: 0.65rem !important;
    font-weight: 650 !important;
}

.engineering-balance dl,
.numerical-method dl,
.cycle-readout-section dl,
.technical-table {
    margin: 0 !important;
}

.engineering-balance dl > div,
.numerical-method dl > div,
.cycle-readout-section dl > div,
.technical-table > div {
    min-height: 34px;
    padding: 0.36rem 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border-bottom: 1px solid rgba(180, 194, 230, 0.055) !important;
}

.engineering-balance dt,
.numerical-method dt,
.cycle-readout-section dt,
.technical-table dt {
    color: #64728b !important;
    font-size: 0.59rem !important;
}

.engineering-balance dd,
.numerical-method dd,
.cycle-readout-section dd,
.technical-table dd {
    margin: 0 !important;
    color: #bdc9dc !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.58rem !important;
    text-align: right;
}

.engineering-balance-result {
    margin-top: 0.25rem;
    padding: 0.45rem 0.35rem !important;
    border: 1px solid rgba(79, 125, 243, 0.13) !important;
    border-radius: 5px;
    background: rgba(79, 125, 243, 0.04) !important;
}

.reference-run-monitor {
    margin-top: 0.65rem !important;
    padding: 0.6rem !important;
    border: 1px solid rgba(180, 194, 230, 0.065) !important;
    border-radius: 6px !important;
    background: #090f1a !important;
}

.reference-run-monitor progress {
    width: 100%;
    height: 5px;
    accent-color: var(--color-violet);
}

.engineering-status,
.validation-statement,
.cycle-validation-conclusion {
    color: #68768e !important;
    font-size: 0.6rem !important;
    line-height: 1.55 !important;
}

/* --------------------------------------------------------------------------
   ANALYSIS — VALIDATION STACK / NO NESTED TESTS
   -------------------------------------------------------------------------- */

.analysis-validation-stack {
    padding: 0.75rem !important;
    display: flex;
    flex-direction: column;
    gap: 0.55rem !important;
}

.analysis-validation-intro {
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(79, 125, 243, 0.12);
    border-left: 2px solid rgba(79, 125, 243, 0.48);
    border-radius: 7px;
    background: rgba(79, 125, 243, 0.035);
}

.analysis-validation-intro strong {
    display: block;
    color: #cbd6e8;
    font-size: 0.72rem;
}

.analysis-validation-intro small {
    display: block;
    margin-top: 0.18rem;
    color: #66758e;
    font-size: 0.58rem;
    line-height: 1.55;
}

.cycle-validation-report,
.multi-point-validation,
.analysis-disclosure,
.validation-grid > section {
    border: 1px solid rgba(180, 194, 230, 0.075) !important;
    border-radius: 7px !important;
    background: #0c1320 !important;
    box-shadow: none !important;
}

.cycle-validation-report,
.multi-point-validation {
    padding: 0.75rem !important;
}

.analysis-disclosure {
    overflow: hidden;
}

.analysis-disclosure-summary {
    min-height: 54px;
    padding: 0.65rem 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.8rem;
    cursor: pointer;
    list-style: none;
    background: #0d1523 !important;
}

.analysis-disclosure-summary::-webkit-details-marker {
    display: none;
}

.analysis-disclosure-summary::after {
    content: "+";
    flex-shrink: 0;
    color: #6f82a4;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.9rem;
}

.analysis-disclosure[open] > .analysis-disclosure-summary::after {
    content: "−";
    color: #9db5f2;
}

.analysis-disclosure-summary strong {
    color: #bfcadc !important;
    font-size: 0.69rem !important;
}

.analysis-disclosure-summary small {
    display: block;
    margin-top: 0.12rem;
    color: #5e6d86 !important;
    font-size: 0.56rem !important;
    line-height: 1.45;
}

.analysis-disclosure-summary-meta {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #68768e !important;
    font-size: 0.56rem !important;
}

.analysis-disclosure-close-label {
    display: none;
}

.analysis-disclosure[open] .analysis-disclosure-open-label {
    display: none;
}

.analysis-disclosure[open] .analysis-disclosure-close-label {
    display: inline;
}

.analysis-disclosure-content {
    padding: 0.75rem !important;
    border-top: 1px solid rgba(180, 194, 230, 0.06);
}

.cycle-validation-report-header {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.65rem !important;
}

.cycle-validation-report-header h3 {
    margin: 0 !important;
    color: #bfcadc !important;
    font-size: 0.7rem !important;
}

.cycle-validation-report-header p {
    margin: 0.18rem 0 0 !important;
    color: #61708a !important;
    font-size: 0.57rem !important;
    line-height: 1.5;
}

.cycle-validation-report-actions,
.non-regression-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end;
    gap: 0.3rem !important;
}

.cycle-validation-overview,
.submodule-unit-test-overview,
.multi-point-validation-overview,
.transient-validation-overview,
.non-regression-overview {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 0.35rem !important;
    margin: 0 0 0.6rem !important;
}

.cycle-validation-overview > div,
.submodule-unit-test-overview > div,
.multi-point-validation-overview > div,
.transient-validation-overview > div,
.non-regression-overview > div {
    min-height: 58px;
    padding: 0.5rem 0.55rem !important;
    border: 1px solid rgba(180, 194, 230, 0.06) !important;
    border-radius: 6px;
    background: #09101b !important;
}

.cycle-validation-overview dt,
.submodule-unit-test-overview dt,
.multi-point-validation-overview dt,
.transient-validation-overview dt,
.non-regression-overview dt {
    margin-bottom: 0.22rem;
    color: #596881 !important;
    font-size: 0.52rem !important;
}

.cycle-validation-overview dd,
.submodule-unit-test-overview dd,
.multi-point-validation-overview dd,
.transient-validation-overview dd,
.non-regression-overview dd {
    margin: 0 !important;
    color: #b5c1d4 !important;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.57rem !important;
}

/* Tables */
.cycle-validation-table-wrapper,
.submodule-unit-test-table-wrapper,
.multi-point-validation-table-wrapper,
.transient-validation-table-wrapper,
.non-regression-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(180, 194, 230, 0.06);
    border-radius: 6px;
    background: #080e18;
}

.cycle-validation-table,
.submodule-unit-test-table,
.multi-point-validation-table,
.transient-validation-table,
.non-regression-table {
    width: 100%;
    border-collapse: collapse !important;
    font-size: 0.56rem !important;
}

.cycle-validation-table th,
.submodule-unit-test-table th,
.multi-point-validation-table th,
.transient-validation-table th,
.non-regression-table th {
    padding: 0.48rem 0.5rem !important;
    background: #0c1421 !important;
    color: #71809a !important;
    font-size: 0.51rem !important;
    font-weight: 650 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.cycle-validation-table td,
.submodule-unit-test-table td,
.multi-point-validation-table td,
.transient-validation-table td,
.non-regression-table td {
    padding: 0.45rem 0.5rem !important;
    border-top: 1px solid rgba(180, 194, 230, 0.055) !important;
    color: #8f9db4 !important;
    white-space: nowrap;
}

.validation-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
}

.validation-grid > section {
    padding: 0.65rem !important;
}

.validation-grid > section h3 {
    margin: 0 0 0.4rem !important;
    color: #aeb9cc !important;
    font-size: 0.64rem !important;
}

/* --------------------------------------------------------------------------
   ANALYSIS — FOOTER
   -------------------------------------------------------------------------- */

.analysis-footer {
    padding: 0.65rem 0.75rem !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(180, 194, 230, 0.06) !important;
    border-radius: 7px !important;
    background: rgba(13, 20, 34, 0.52) !important;
    color: #596780 !important;
    font-size: 0.55rem !important;
}

.analysis-footer a {
    color: #879fe8 !important;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .simulator-workspace {
        grid-template-columns: minmax(0, 1fr) 260px !important;
    }

    .analysis-header {
        grid-template-columns: 1fr auto;
    }

    .analysis-header-actions {
        grid-column: 1 / -1;
        justify-content: flex-start !important;
    }

    .analysis-summary dl {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .validation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    .simulator-header {
        grid-template-columns: 1fr;
    }

    .simulator-header-status {
        flex-wrap: wrap;
    }

    .simulator-workspace {
        grid-template-columns: 1fr !important;
    }

    .instrument-panel {
        display: grid;
        grid-template-columns: 1.2fr repeat(3, 1fr);
    }

    .instrument-header {
        grid-column: 1 / -1;
    }

    .rpm-instrument,
    .instrument-pair {
        border-bottom: 0 !important;
        border-right: 1px solid rgba(180, 194, 230, 0.07) !important;
    }

    .analysis-header {
        grid-template-columns: 1fr;
    }

    .analysis-header-state,
    .analysis-header-actions {
        justify-content: flex-start !important;
    }

    .analysis-split,
    .analysis-split--wide,
    .analysis-split--cycle {
        grid-template-columns: 1fr !important;
    }

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

    .physics-chain-heading {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 0.2rem;
    }
}

@media (max-width: 650px) {
    .simulator-page,
    .analysis-page {
        padding: 0.55rem 0.55rem 1.5rem !important;
    }

    .simulator-header-status,
    .analysis-header-state {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .simulator-header-status > div,
    .analysis-header-state > div {
        min-width: 0;
    }

    .viewer-toolbar {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .viewer-method-data {
        justify-content: flex-start !important;
    }

    .simulator-viewport {
        min-height: 55vh !important;
    }

    .viewer-commandbar {
        align-items: stretch !important;
    }

    .viewer-mode-group,
    .viewer-utility-group {
        width: 100%;
        margin-left: 0 !important;
        flex-wrap: wrap;
    }

    .throttle-command {
        width: 100%;
    }

    .instrument-panel {
        display: block;
    }

    .rpm-instrument,
    .instrument-pair {
        border-right: 0 !important;
        border-bottom: 1px solid rgba(180, 194, 230, 0.07) !important;
    }

    .analysis-title-group {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .analysis-header-state {
        grid-template-columns: repeat(3, 1fr);
    }

    .analysis-summary dl,
    .validation-grid {
        grid-template-columns: 1fr !important;
    }

    .analysis-tabs {
        position: static !important;
    }

    .analysis-tab-list {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .analysis-tab {
        flex-shrink: 0;
    }

    .analysis-panel-header,
    .cycle-validation-report-header {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .analysis-panel-actions,
    .cycle-validation-report-actions,
    .non-regression-actions {
        justify-content: flex-start !important;
    }

    .chart-frame,
    .chart-frame--large,
    .chart-frame--cycle,
    .chart-frame--turbo,
    .chart-frame--residual {
        min-height: 320px !important;
    }

    .analysis-disclosure-summary {
        align-items: flex-start !important;
    }

    .analysis-disclosure-summary-meta {
        display: none !important;
    }

    .analysis-footer {
        align-items: flex-start !important;
        flex-direction: column;
    }
}

/* ==========================================================================
   V8.1 — ANALYSIS WIDE MODE + FUNCTIONAL COLOR SYSTEM
   Full-width scientific workspace. Color identifies data domains.
   ========================================================================== */

/* --------------------------------------------------------------------------
   WIDE MODE
   -------------------------------------------------------------------------- */

.analysis-page {
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
}

.analysis-page .analysis-shell {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Keep only a tiny breathing margin even on ultrawide displays. */
@media (min-width: 1900px) {
    .analysis-page {
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
    }
}

/* Summary can make better use of wide screens. */
.analysis-summary dl {
    grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
}

/* --------------------------------------------------------------------------
   DOMAIN COLOR TOKENS
   Not decorative: each family has a stable meaning.
   -------------------------------------------------------------------------- */

.analysis-page {
    --analysis-violet: #9b83f5;
    --analysis-blue: #6f97f5;
    --analysis-cyan: #67b8c8;
    --analysis-green: #72b98b;
    --analysis-amber: #c5a45b;
    --analysis-rose: #c77c8d;

    --analysis-violet-soft: rgba(155, 131, 245, 0.09);
    --analysis-blue-soft: rgba(111, 151, 245, 0.09);
    --analysis-cyan-soft: rgba(103, 184, 200, 0.08);
    --analysis-green-soft: rgba(114, 185, 139, 0.08);
    --analysis-amber-soft: rgba(197, 164, 91, 0.08);
    --analysis-rose-soft: rgba(199, 124, 141, 0.08);
}

/* Summary KPIs */
.analysis-summary dl > div:nth-child(1)::before { background: var(--analysis-violet) !important; }
.analysis-summary dl > div:nth-child(2)::before { background: var(--analysis-blue) !important; }
.analysis-summary dl > div:nth-child(3)::before { background: var(--analysis-green) !important; }
.analysis-summary dl > div:nth-child(4)::before { background: var(--analysis-amber) !important; }
.analysis-summary dl > div:nth-child(5)::before { background: var(--analysis-rose) !important; }

.analysis-summary dl > div:nth-child(1) dd { color: #c2b7f3 !important; }
.analysis-summary dl > div:nth-child(2) dd { color: #b7c8f4 !important; }
.analysis-summary dl > div:nth-child(3) dd { color: #a9d2b8 !important; }
.analysis-summary dl > div:nth-child(4) dd { color: #d7bf84 !important; }
.analysis-summary dl > div:nth-child(5) dd { color: #d9abb5 !important; }

/* Tabs get a stable domain identity. */
.analysis-tab[data-analysis-tab="overview"].is-active {
    color: #c2b7f3 !important;
    background: var(--analysis-violet-soft) !important;
    box-shadow: inset 0 -2px 0 var(--analysis-violet) !important;
}

.analysis-tab[data-analysis-tab="dyno"].is-active {
    color: #b7c8f4 !important;
    background: var(--analysis-blue-soft) !important;
    box-shadow: inset 0 -2px 0 var(--analysis-blue) !important;
}

.analysis-tab[data-analysis-tab="cycle"].is-active {
    color: #b0d7df !important;
    background: var(--analysis-cyan-soft) !important;
    box-shadow: inset 0 -2px 0 var(--analysis-cyan) !important;
}

.analysis-tab[data-analysis-tab="pv"].is-active {
    color: #dec891 !important;
    background: var(--analysis-amber-soft) !important;
    box-shadow: inset 0 -2px 0 var(--analysis-amber) !important;
}

.analysis-tab[data-analysis-tab="turbo"].is-active {
    color: #9fc5ee !important;
    background: rgba(89, 152, 211, 0.08) !important;
    box-shadow: inset 0 -2px 0 #659bd0 !important;
}

.analysis-tab[data-analysis-tab="numerics"].is-active {
    color: #add2bb !important;
    background: var(--analysis-green-soft) !important;
    box-shadow: inset 0 -2px 0 var(--analysis-green) !important;
}

.analysis-tab[data-analysis-tab="validation"].is-active {
    color: #d8abb5 !important;
    background: var(--analysis-rose-soft) !important;
    box-shadow: inset 0 -2px 0 var(--analysis-rose) !important;
}

/* --------------------------------------------------------------------------
   PANEL DOMAIN ACCENTS
   -------------------------------------------------------------------------- */

.analysis-section .analysis-panel {
    position: relative;
}

.analysis-section .analysis-panel::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: -1px;
    left: 18px;
    width: 44px;
    height: 2px;
    background: var(--analysis-blue);
}

.analysis-section--dyno .analysis-panel::before { background: var(--analysis-blue); }
.analysis-section--cycle .analysis-panel::before { background: var(--analysis-cyan); }
.analysis-section--pv .analysis-panel::before { background: var(--analysis-amber); }
.analysis-section--turbo .analysis-panel::before { background: #659bd0; }
.analysis-section--numerics .analysis-panel::before { background: var(--analysis-green); }
.analysis-section--validation .analysis-panel::before { background: var(--analysis-rose); }

.analysis-section--dyno .analysis-panel-header h2 { color: #c7d5f3 !important; }
.analysis-section--cycle .analysis-panel-header h2 { color: #b8d7de !important; }
.analysis-section--pv .analysis-panel-header h2 { color: #ddc990 !important; }
.analysis-section--turbo .analysis-panel-header h2 { color: #b5ceed !important; }
.analysis-section--numerics .analysis-panel-header h2 { color: #b7d4c1 !important; }
.analysis-section--validation .analysis-panel-header h2 { color: #ddb5bd !important; }

/* --------------------------------------------------------------------------
   BIG CHARTS
   -------------------------------------------------------------------------- */

/*
 * P-V and cylinder cycle are graph-first views.
 * The graph gets the complete row, technical readouts go below it.
 */
.analysis-section--pv .analysis-split--wide,
.analysis-section--cycle .analysis-split--cycle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.6rem !important;
}

.analysis-section--pv .chart-frame--large {
    width: 100% !important;
    min-height: clamp(560px, 66vh, 880px) !important;
}

.analysis-section--cycle .chart-frame--cycle {
    width: 100% !important;
    min-height: clamp(600px, 70vh, 920px) !important;
}

/* P-V closure data becomes a horizontal engineering strip. */
.analysis-section--pv .engineering-balance--pv {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(170px, 0.65fr) minmax(0, 3.35fr);
    align-items: start;
    gap: 0.75rem !important;
    padding: 0.7rem 0.8rem !important;
    border-color: rgba(197, 164, 91, 0.14) !important;
    background: rgba(197, 164, 91, 0.025) !important;
}

.analysis-section--pv .engineering-balance--pv h3 {
    color: #c8b57f !important;
}

.analysis-section--pv .engineering-balance--pv dl {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(110px, 1fr));
    gap: 0.35rem !important;
}

.analysis-section--pv .engineering-balance--pv dl > div {
    min-height: 60px !important;
    padding: 0.48rem 0.55rem !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start !important;
    border: 1px solid rgba(197, 164, 91, 0.09) !important;
    border-radius: 6px !important;
    background: rgba(8, 14, 24, 0.60) !important;
}

.analysis-section--pv .engineering-balance--pv dd {
    color: #d8c48d !important;
    text-align: left !important;
}

.analysis-section--pv .engineering-balance--pv .validation-statement {
    grid-column: 1 / -1;
    margin: 0.15rem 0 0 !important;
    color: #8f8264 !important;
}

/* Cycle readouts become three horizontal columns beneath the chart. */
.analysis-section--cycle .engineering-balance--cycle {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem !important;
    padding: 0.6rem !important;
    border-color: rgba(103, 184, 200, 0.13) !important;
    background: rgba(103, 184, 200, 0.022) !important;
}

.analysis-section--cycle .cycle-readout-section {
    min-width: 0;
    padding: 0.65rem !important;
    border: 1px solid rgba(103, 184, 200, 0.08);
    border-radius: 6px;
    background: rgba(8, 14, 24, 0.58);
}

.analysis-section--cycle .cycle-readout-section h3 {
    color: #99c3cc !important;
    border-bottom: 1px solid rgba(103, 184, 200, 0.09);
    padding-bottom: 0.45rem;
}

.analysis-section--cycle .cycle-readout-section dd {
    color: #b5d4da !important;
}

/* Dyno also gets more chart width. */
.analysis-section--dyno .analysis-split--wide {
    grid-template-columns: minmax(0, 1fr) 240px !important;
}

.analysis-section--dyno .chart-frame--large {
    min-height: clamp(520px, 62vh, 800px) !important;
}

/* Turbo / numerics also scale vertically on larger screens. */
.analysis-section--turbo .chart-frame--turbo,
.analysis-section--numerics .chart-frame--residual {
    min-height: clamp(500px, 58vh, 760px) !important;
}

/* --------------------------------------------------------------------------
   CHART FRAME DOMAIN COLORS
   -------------------------------------------------------------------------- */

.analysis-section--dyno .chart-frame {
    border-color: rgba(111, 151, 245, 0.12) !important;
}

.analysis-section--cycle .chart-frame {
    border-color: rgba(103, 184, 200, 0.13) !important;
}

.analysis-section--pv .chart-frame {
    border-color: rgba(197, 164, 91, 0.14) !important;
}

.analysis-section--turbo .chart-frame {
    border-color: rgba(101, 155, 208, 0.13) !important;
}

.analysis-section--numerics .chart-frame {
    border-color: rgba(114, 185, 139, 0.13) !important;
}

/* Small colored axis corner, not glow. */
.analysis-section--dyno .chart-frame::before,
.analysis-section--cycle .chart-frame::before,
.analysis-section--pv .chart-frame::before,
.analysis-section--turbo .chart-frame::before,
.analysis-section--numerics .chart-frame::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    width: 18px;
    height: 18px;
    pointer-events: none;
    border-top: 1px solid;
    border-left: 1px solid;
    opacity: 0.55;
}

.analysis-section--dyno .chart-frame::before { border-color: var(--analysis-blue); }
.analysis-section--cycle .chart-frame::before { border-color: var(--analysis-cyan); }
.analysis-section--pv .chart-frame::before { border-color: var(--analysis-amber); }
.analysis-section--turbo .chart-frame::before { border-color: #659bd0; }
.analysis-section--numerics .chart-frame::before { border-color: var(--analysis-green); }

/* --------------------------------------------------------------------------
   DATA / VALIDATION COLOR
   -------------------------------------------------------------------------- */

.analysis-section--dyno .engineering-balance-result {
    border-color: rgba(111, 151, 245, 0.15) !important;
    background: var(--analysis-blue-soft) !important;
}

.analysis-section--pv .engineering-balance-result {
    border-color: rgba(197, 164, 91, 0.18) !important;
    background: var(--analysis-amber-soft) !important;
}

.analysis-section--numerics .numerical-method {
    border-color: rgba(114, 185, 139, 0.11) !important;
}

.analysis-section--numerics #numericalConvergenceStatus {
    color: #a8d0b6 !important;
}

/* Validation area intentionally uses more semantic status color. */
.analysis-validation-intro {
    border-color: rgba(199, 124, 141, 0.15) !important;
    border-left-color: var(--analysis-rose) !important;
    background: var(--analysis-rose-soft) !important;
}

.analysis-validation-intro strong {
    color: #dfb5be !important;
}

.analysis-section--validation .cycle-validation-report {
    border-left: 2px solid rgba(114, 185, 139, 0.45) !important;
}

.analysis-section--validation .multi-point-validation {
    border-left: 2px solid rgba(111, 151, 245, 0.45) !important;
}

.analysis-section--validation .submodule-unit-tests {
    border-left: 2px solid rgba(155, 131, 245, 0.45) !important;
}

.analysis-section--validation .transient-validation {
    border-left: 2px solid rgba(197, 164, 91, 0.45) !important;
}

.analysis-section--validation .non-regression-report {
    border-left: 2px solid rgba(199, 124, 141, 0.45) !important;
}

/* Status classes used by JS, if present. */
.analysis-page [data-validation-status="pass"],
.analysis-page [data-validation-status="passed"],
.analysis-page [data-validation-status="ok"],
.analysis-page [data-validation-status="valid"] {
    border-color: rgba(114, 185, 139, 0.26) !important;
}

.analysis-page [data-validation-status="fail"],
.analysis-page [data-validation-status="failed"],
.analysis-page [data-validation-status="error"] {
    border-color: rgba(199, 124, 141, 0.30) !important;
}

.analysis-page [data-validation-status="warning"],
.analysis-page [data-validation-status="warn"] {
    border-color: rgba(197, 164, 91, 0.30) !important;
}

/* --------------------------------------------------------------------------
   WIDER VALIDATION TABLES
   -------------------------------------------------------------------------- */

.analysis-validation-stack,
.analysis-section--validation .analysis-panel-body {
    width: 100%;
}

.multi-point-validation-table,
.non-regression-table,
.cycle-validation-table,
.submodule-unit-test-table,
.transient-validation-table {
    min-width: 100% !important;
}

/* The 12-column multipoint table genuinely needs horizontal room. */
.multi-point-validation-table {
    min-width: 1500px !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .analysis-page .analysis-shell {
        max-width: none !important;
    }

    .analysis-section--pv .engineering-balance--pv {
        grid-template-columns: 1fr !important;
    }

    .analysis-section--pv .engineering-balance--pv dl {
        grid-template-columns: repeat(4, minmax(120px, 1fr));
    }

    .analysis-section--cycle .engineering-balance--cycle {
        grid-template-columns: 1fr 1fr !important;
    }

    .analysis-section--cycle .cycle-readout-section:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .analysis-summary dl {
        grid-template-columns: 1fr !important;
    }

    .analysis-section--pv .chart-frame--large,
    .analysis-section--cycle .chart-frame--cycle,
    .analysis-section--dyno .chart-frame--large,
    .analysis-section--turbo .chart-frame--turbo,
    .analysis-section--numerics .chart-frame--residual {
        min-height: 360px !important;
    }

    .analysis-section--pv .engineering-balance--pv dl,
    .analysis-section--cycle .engineering-balance--cycle {
        grid-template-columns: 1fr !important;
    }

    .analysis-section--cycle .cycle-readout-section:last-child {
        grid-column: auto;
    }
}

/* ==========================================================================
   V8.2 — ANALYSIS TRUE FULL-WIDTH CHART LAYOUT
   Every active graph view fills the workspace:
   [ flexible chart ][ fixed technical data panel ]
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX THE REAL WIDTH BOTTLENECK
   -------------------------------------------------------------------------- */

/*
 * simulator-analysis.css can give analysis sections/panels their own sizing.
 * Force the complete active page chain to stretch across the viewport.
 */
.analysis-page .analysis-content,
.analysis-page .analysis-section,
.analysis-page .analysis-section.is-active,
.analysis-page .analysis-panel,
.analysis-page .analysis-panel--chart,
.analysis-page .analysis-panel-body {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.analysis-page .analysis-content {
    align-items: stretch !important;
}

.analysis-page .analysis-section {
    align-self: stretch !important;
    flex: 1 1 100% !important;
    grid-column: 1 / -1 !important;
}

.analysis-page .analysis-panel,
.analysis-page .analysis-panel--chart {
    align-self: stretch !important;
    flex: 1 1 auto !important;
}

/* The chart container itself must be allowed to consume the flexible column. */
.analysis-page .chart-frame {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.analysis-page .chart-frame canvas {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
}

/* --------------------------------------------------------------------------
   CONSISTENT GRAPH + RIGHT DATA LAYOUT
   -------------------------------------------------------------------------- */

/* Dyno */
.analysis-section--dyno .analysis-panel-body.analysis-split--wide {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 290px !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
}

/* P-V: restore the engineering data to the right. */
.analysis-section--pv .analysis-panel-body.analysis-split--wide {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 310px !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
}

.analysis-section--pv .engineering-balance--pv {
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
    padding: 0.75rem !important;
    background: rgba(197, 164, 91, 0.025) !important;
}

.analysis-section--pv .engineering-balance--pv dl {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.analysis-section--pv .engineering-balance--pv dl > div {
    min-height: 39px !important;
    padding: 0.42rem 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(197, 164, 91, 0.075) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.analysis-section--pv .engineering-balance--pv dt {
    min-width: 0;
    color: #80775f !important;
}

.analysis-section--pv .engineering-balance--pv dd {
    flex-shrink: 0;
    color: #d8c48d !important;
    text-align: right !important;
}

.analysis-section--pv .engineering-balance--pv .engineering-balance-result {
    margin-top: 0.25rem !important;
    padding: 0.45rem 0.4rem !important;
    border: 1px solid rgba(197, 164, 91, 0.16) !important;
    border-radius: 5px !important;
    background: var(--analysis-amber-soft) !important;
}

.analysis-section--pv .engineering-balance--pv .validation-statement {
    margin-top: 0.65rem !important;
}

/* Cylinder cycle: all 3 readout groups remain in the right column. */
.analysis-section--cycle .analysis-panel-body.analysis-split--cycle {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 350px !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
}

.analysis-section--cycle .engineering-balance--cycle {
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    padding: 0.55rem !important;
}

.analysis-section--cycle .cycle-readout-section,
.analysis-section--cycle .cycle-readout-section:last-child {
    width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
    padding: 0.55rem !important;
}

.analysis-section--cycle .cycle-readout-section dl > div {
    min-height: 32px !important;
}

/* Numerical conservation */
.analysis-section--numerics .analysis-panel-body.analysis-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 310px !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
}

/* Turbo: chart left, complete technical table right. */
.analysis-section--turbo .analysis-panel-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
}

.analysis-section--turbo .technical-table--two-columns {
    width: auto !important;
    min-width: 0 !important;
    align-self: stretch !important;
    padding: 0.7rem !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(101, 155, 208, 0.10) !important;
    border-radius: 7px !important;
    background: rgba(9, 16, 27, 0.62) !important;
}

.analysis-section--turbo .technical-table--two-columns > div {
    min-height: 40px !important;
    grid-column: auto !important;
}

/* --------------------------------------------------------------------------
   LARGE CHART HEIGHTS
   -------------------------------------------------------------------------- */

.analysis-section--dyno .chart-frame--large {
    min-height: clamp(560px, 68vh, 900px) !important;
}

.analysis-section--pv .chart-frame--large {
    min-height: clamp(600px, 72vh, 940px) !important;
}

.analysis-section--cycle .chart-frame--cycle {
    min-height: clamp(620px, 74vh, 960px) !important;
}

.analysis-section--turbo .chart-frame--turbo,
.analysis-section--numerics .chart-frame--residual {
    min-height: clamp(560px, 66vh, 880px) !important;
}

/* Right-side information panels stretch to graph height but keep content top-aligned. */
.analysis-section--dyno .engineering-balance,
.analysis-section--pv .engineering-balance,
.analysis-section--cycle .engineering-balance,
.analysis-section--numerics .numerical-method,
.analysis-section--turbo .technical-table {
    align-self: stretch !important;
    height: auto !important;
    max-height: none !important;
}

/* --------------------------------------------------------------------------
   USE ULTRAWIDE SPACE AGGRESSIVELY
   -------------------------------------------------------------------------- */

@media (min-width: 1500px) {
    .analysis-page {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .analysis-section--dyno .analysis-panel-body.analysis-split--wide {
        grid-template-columns: minmax(0, 1fr) 300px !important;
    }

    .analysis-section--pv .analysis-panel-body.analysis-split--wide {
        grid-template-columns: minmax(0, 1fr) 320px !important;
    }

    .analysis-section--cycle .analysis-panel-body.analysis-split--cycle {
        grid-template-columns: minmax(0, 1fr) 360px !important;
    }

    .analysis-section--numerics .analysis-panel-body.analysis-split {
        grid-template-columns: minmax(0, 1fr) 320px !important;
    }

    .analysis-section--turbo .analysis-panel-body {
        grid-template-columns: minmax(0, 1fr) 350px !important;
    }
}

/* --------------------------------------------------------------------------
   RESPONSIVE FALLBACK
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .analysis-section--dyno .analysis-panel-body.analysis-split--wide,
    .analysis-section--pv .analysis-panel-body.analysis-split--wide,
    .analysis-section--cycle .analysis-panel-body.analysis-split--cycle,
    .analysis-section--numerics .analysis-panel-body.analysis-split,
    .analysis-section--turbo .analysis-panel-body {
        grid-template-columns: 1fr !important;
    }

    .analysis-section--pv .engineering-balance--pv,
    .analysis-section--cycle .engineering-balance--cycle,
    .analysis-section--turbo .technical-table--two-columns {
        width: 100% !important;
    }

    .analysis-section--cycle .engineering-balance--cycle {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .analysis-section--cycle .cycle-readout-section:last-child {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 650px) {
    .analysis-section--cycle .engineering-balance--cycle {
        grid-template-columns: 1fr !important;
    }

    .analysis-section--cycle .cycle-readout-section:last-child {
        grid-column: auto !important;
    }

    .analysis-section--dyno .chart-frame--large,
    .analysis-section--pv .chart-frame--large,
    .analysis-section--cycle .chart-frame--cycle,
    .analysis-section--turbo .chart-frame--turbo,
    .analysis-section--numerics .chart-frame--residual {
        min-height: 380px !important;
    }
}

/* ==========================================================================
   V8.3 — SIMULATOR INDEX POLISH
   Viewer header clipping fix + stronger primary actions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   VIEWER TOOLBAR / VIEWPORT SEPARATION
   -------------------------------------------------------------------------- */

.simulator-page .engine-viewer-panel {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.simulator-page .viewer-toolbar {
    position: relative !important;
    z-index: 8 !important;
    flex: 0 0 auto !important;

    /* Never let the viewport overlap/crop title or subtitle. */
    width: 100% !important;
    height: auto !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 0.9rem 1rem 0.85rem !important;
    overflow: visible !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.1rem !important;

    border-bottom: 1px solid rgba(180, 194, 230, 0.09) !important;
    background: #101727 !important;
    box-sizing: border-box !important;
}

.simulator-page .viewer-toolbar > div:first-child {
    min-width: 210px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.18rem !important;
}

.simulator-page .viewer-toolbar h2 {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #e4ebf7 !important;
    font-size: 0.94rem !important;
    font-weight: 720 !important;
    line-height: 1.25 !important;
    overflow: visible !important;
}

.simulator-page .viewer-toolbar p {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #70809c !important;
    font-size: 0.64rem !important;
    line-height: 1.45 !important;
    overflow: visible !important;
    white-space: normal !important;
}

.simulator-page .simulator-viewport {
    position: relative !important;
    z-index: 1 !important;
    flex: 1 1 auto !important;

    /* Neutralize any legacy offset coming from simulator-home.css. */
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;

    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-top: 0 !important;
}

.simulator-page #engineViewerCanvas {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
}

/* A small technical separator reinforces where the viewport starts. */
.simulator-page .simulator-viewport::before {
    top: 12px !important;
}

/* --------------------------------------------------------------------------
   PRIMARY ACTION HIERARCHY
   -------------------------------------------------------------------------- */

/*
 * Engine start is the main action of this page.
 * Solid violet, but no glow/gradient.
 */
.simulator-page .command-button--engine {
    min-height: 38px !important;
    padding: 0.48rem 0.8rem !important;
    border-color: #8b6df6 !important;
    background: #8b6df6 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

.simulator-page .command-button--engine:hover {
    border-color: #7960e7 !important;
    background: #7960e7 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Running state turns functional green instead of staying violet. */
.simulator-page .command-button--engine[data-state="on"],
.simulator-page .command-button--engine[data-state="running"] {
    border-color: rgba(89, 165, 113, 0.68) !important;
    background: #477b59 !important;
    color: #eef9f1 !important;
}

.simulator-page .command-button--engine[data-state="on"]:hover,
.simulator-page .command-button--engine[data-state="running"]:hover {
    background: #518c65 !important;
    border-color: rgba(103, 188, 130, 0.78) !important;
}

/*
 * Analysis is the second strategic action.
 * Blue makes it distinct from engine control while still prominent.
 */
.simulator-page .viewer-utility-group .command-link,
.simulator-page .command-link--analysis {
    min-height: 38px !important;
    padding: 0.48rem 0.8rem !important;
    border-color: rgba(79, 125, 243, 0.58) !important;
    background: rgba(79, 125, 243, 0.14) !important;
    color: #c7d6fb !important;
    font-weight: 700 !important;
    box-shadow: inset 0 -2px 0 rgba(79, 125, 243, 0.34) !important;
}

.simulator-page .viewer-utility-group .command-link:hover,
.simulator-page .command-link--analysis:hover {
    border-color: #628bf1 !important;
    background: #3157aa !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

/* Fullscreen remains secondary beside the analysis CTA. */
.simulator-page .viewer-utility-group .command-button--utility {
    color: #7e8ca4 !important;
    background: rgba(255, 255, 255, 0.016) !important;
    border-color: rgba(180, 194, 230, 0.10) !important;
    box-shadow: none !important;
}

/* Throttle is important while driving, but below engine start in hierarchy. */
.simulator-page .command-button--throttle {
    border-color: rgba(79, 125, 243, 0.22) !important;
    color: #a9bced !important;
    background: rgba(79, 125, 243, 0.045) !important;
}

.simulator-page .command-button--throttle:hover,
.simulator-page .command-button--throttle[aria-pressed="true"] {
    border-color: rgba(79, 125, 243, 0.42) !important;
    background: rgba(79, 125, 243, 0.09) !important;
    color: #d0dcfb !important;
}

/* --------------------------------------------------------------------------
   COMMAND BAR SPACING
   -------------------------------------------------------------------------- */

.simulator-page .viewer-commandbar {
    padding: 0.65rem 0.75rem !important;
    gap: 0.45rem !important;
}

.simulator-page .viewer-mode-group {
    padding-left: 0.15rem;
}

.simulator-page .viewer-utility-group {
    gap: 0.4rem !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .simulator-page .viewer-toolbar {
        align-items: flex-start !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    .simulator-page .viewer-method-data {
        width: 100%;
        justify-content: flex-start !important;
    }
}

@media (max-width: 650px) {
    .simulator-page .viewer-toolbar {
        padding: 0.8rem !important;
    }

    .simulator-page .command-button--engine,
    .simulator-page .viewer-utility-group .command-link,
    .simulator-page .command-link--analysis {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   V9 — ERROR PAGES
   Geometric, calm, semantic. No glow / no gradient / no decorative emoji.
   ========================================================================== */

.error-page {
    --error-accent: #8b6df6;
    --error-accent-soft: rgba(139, 109, 246, 0.08);
    --error-accent-border: rgba(139, 109, 246, 0.25);

    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3rem 1.2rem;
    background: #090d18;
    color: #f4f7ff;
}

.error-page--403 {
    --error-accent: #c5a45b;
    --error-accent-soft: rgba(197, 164, 91, 0.07);
    --error-accent-border: rgba(197, 164, 91, 0.24);
}

.error-page--404 {
    --error-accent: #4f7df3;
    --error-accent-soft: rgba(79, 125, 243, 0.07);
    --error-accent-border: rgba(79, 125, 243, 0.24);
}

.error-page--413 {
    --error-accent: #9b83f5;
    --error-accent-soft: rgba(155, 131, 245, 0.08);
    --error-accent-border: rgba(155, 131, 245, 0.26);
}

.error-page--429 {
    --error-accent: #67a7d8;
    --error-accent-soft: rgba(103, 167, 216, 0.07);
    --error-accent-border: rgba(103, 167, 216, 0.24);
}

.error-page--500 {
    --error-accent: #b96f7f;
    --error-accent-soft: rgba(185, 111, 127, 0.075);
    --error-accent-border: rgba(185, 111, 127, 0.25);
}

.error-page--503 {
    --error-accent: #8b6df6;
    --error-accent-soft: rgba(139, 109, 246, 0.075);
    --error-accent-border: rgba(139, 109, 246, 0.25);
}

.error-geometry {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.error-geometry span {
    position: absolute;
    display: block;
    border: 1px solid var(--error-accent-border);
    opacity: 0.48;
}

.error-geo-1 {
    width: 430px;
    height: 250px;
    top: 8%;
    right: -120px;
    transform: rotate(8deg);
}

.error-geo-2 {
    width: 260px;
    height: 390px;
    left: -110px;
    bottom: 5%;
    transform: rotate(-7deg);
    opacity: 0.28 !important;
}

.error-geo-3 {
    width: 48px;
    height: 48px;
    top: 19%;
    left: 16%;
    transform: rotate(45deg);
    opacity: 0.62 !important;
}

.error-geo-4 {
    width: 115px;
    height: 1px;
    right: 12%;
    bottom: 19%;
    border: 0 !important;
    background: var(--error-accent);
    opacity: 0.18 !important;
    transform: rotate(-12deg);
}

.error-shell {
    width: min(100%, 860px);
    position: relative;
    z-index: 1;
    text-align: center;
}

.error-card {
    position: relative;
    padding: clamp(2rem, 5vw, 4.2rem);
    border: 1px solid rgba(180, 194, 230, 0.11);
    border-radius: 12px;
    background: rgba(16, 23, 39, 0.93);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.error-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 58px;
    height: 2px;
    transform: translateX(-50%);
    background: var(--error-accent);
}

.error-system-line {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.1rem;
    color: var(--error-accent);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.error-system-line::before {
    content: "";
    width: 18px;
    height: 2px;
    background: currentColor;
}

.error-code {
    margin: 0;
    color: rgba(244, 247, 255, 0.055);
    font-family: "JetBrains Mono", monospace;
    font-size: clamp(5.5rem, 15vw, 10rem);
    font-weight: 800;
    line-height: 0.82;
    letter-spacing: -0.08em;
    user-select: none;
}

.error-title {
    margin: -0.35rem 0 0.8rem;
    color: #f0f4ff;
    font-size: clamp(1.8rem, 4vw, 3.25rem);
    font-weight: 790;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.error-title span {
    color: var(--error-accent);
}

.error-description {
    max-width: 620px;
    margin: 0 auto;
    color: #8492ab;
    font-size: 0.9rem;
    line-height: 1.75;
}

.error-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.8rem;
}

.error-btn {
    min-height: 38px;
    padding: 0.52rem 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border-radius: 7px;
    border: 1px solid rgba(180, 194, 230, 0.12);
    background: rgba(255, 255, 255, 0.018);
    color: #8e9bb2;
    font-size: 0.73rem;
    font-weight: 650;
    text-decoration: none;
    box-shadow: none;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.error-btn:hover {
    color: #d8e0ef;
    border-color: var(--error-accent-border);
    background: var(--error-accent-soft);
    transform: translateY(-1px);
}

.error-btn--primary {
    border-color: var(--error-accent);
    background: var(--error-accent);
    color: #fff;
}

.error-btn--primary:hover {
    border-color: var(--error-accent);
    background: var(--error-accent);
    color: #fff;
    filter: brightness(1.08);
}

.error-meta {
    margin-top: 1.2rem;
    color: #4f5e78;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.56rem;
}

@media (max-width: 650px) {
    .error-page {
        padding: 1.2rem 0.75rem;
    }

    .error-card {
        padding: 2rem 1rem;
    }

    .error-code {
        font-size: 5.6rem;
    }

    .error-actions {
        flex-direction: column;
    }

    .error-btn {
        width: 100%;
    }

    .error-geo-2,
    .error-geo-3 {
        display: none;
    }
}

/* ==========================================================================
   SIMULATOR — CONDENSED HEADER
   Maquette cinématique intégrée au bandeau principal.
   ========================================================================== */

.simulator-page .simulator-header {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    min-height: 68px;
    align-items: center !important;
    column-gap: 1rem !important;
}

.simulator-page .simulator-header-main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.simulator-page .simulator-identity {
    flex: 0 0 auto;
}

.simulator-page .viewer-context {
    min-width: 0;
    padding-left: 1rem;
    border-left: 1px solid rgba(180, 194, 230, 0.10);
}

.simulator-page .viewer-context h2 {
    margin: 0 !important;
    color: #dce5f4 !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    line-height: 1.2;
    white-space: nowrap;
}

.simulator-page .viewer-context p {
    margin: 0.16rem 0 0 !important;
    color: #65748e !important;
    font-size: 0.56rem !important;
    line-height: 1.2;
    white-space: nowrap;
}

.simulator-page .simulator-header-method {
    max-width: none;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
}

.simulator-page .simulator-header-method > * {
    padding: 0 !important;
    border-left: 0 !important;
}

.simulator-page .simulator-header-method a {
    white-space: nowrap;
}

.simulator-page .engine-viewer-panel {
    display: flex !important;
    flex-direction: column !important;
}

.simulator-page .simulator-viewport {
    flex: 1 1 auto !important;
    min-height: clamp(570px, 74vh, 860px) !important;
}

@media (max-width: 1380px) {
    .simulator-page .simulator-header {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .simulator-page .simulator-header-method {
        display: none !important;
    }
}

@media (max-width: 900px) {
    .simulator-page .simulator-header {
        grid-template-columns: 1fr !important;
    }

    .simulator-page .simulator-header-main {
        width: 100%;
    }

    .simulator-page .simulator-header-status {
        width: 100%;
    }

    .simulator-page .simulator-viewport {
        min-height: 62vh !important;
    }
}

@media (max-width: 650px) {
    .simulator-page .simulator-header-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .simulator-page .viewer-context {
        padding-left: 0;
        border-left: 0;
    }

    .simulator-page .simulator-identity p,
    .simulator-page .viewer-context p {
        display: none;
    }
}

@media (min-width: 981px) and (min-height: 850px) {
    .simulator-page {
        width: 100%;
        height: calc(100dvh - 64px);
        min-height: 0 !important;
        padding: 10px 14px 14px !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    .simulator-shell {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column;
        gap: 10px !important;
    }

    .simulator-header {
        flex: 0 0 auto;
    }

    .simulator-workspace {
        flex: 1 1 auto;
        min-height: 0 !important;
        height: 0;
    }

    .engine-viewer-panel,
    .instrument-panel {
        min-height: 0 !important;
        height: 100%;
    }

    .simulator-viewport {
        min-height: 0 !important;
    }
}


/* ============================================================
   SIMULATOR — laptop / short viewport fallback
   Keep the simulator scrollable when the screen is wide but not tall.
   ============================================================ */
@media (min-width: 981px) and (max-height: 849px) {
    .simulator-page {
        width: 100%;
        height: auto !important;
        min-height: calc(100dvh - 64px) !important;
        padding: 10px 14px 14px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box;
    }

    .simulator-shell {
        width: 100% !important;
        height: auto !important;
        min-height: calc(100dvh - 64px) !important;
    }

    .simulator-workspace {
        height: auto !important;
        min-height: 0 !important;
    }

    .engine-viewer-panel,
    .instrument-panel {
        height: auto !important;
        min-height: 0 !important;
    }

    .simulator-viewer {
        min-height: 620px;
    }
}

/* ============================================================
   HOME — animated 3S-GTE hero
   Reference size: 1900 × 1300 on a 1920 × 1080 viewport
   ============================================================ */

.hero-engine-canvas {
    display: block;

    /*
     * Même ratio visuel que l'ancien:
     *
     * 1900 / 1920 = 98.958vw
     * 1900 / 1080 = 175.926dvh
     *
     * 1300 / 1920 = 67.708vw
     * 1300 / 1080 = 120.370dvh
     */
    width: min(
        1900px,
        98.958vw,
        175.926dvh
    ) !important;

    height: min(
        1300px,
        67.708vw,
        120.370dvh
    ) !important;

    max-width: none !important;
    max-height: none !important;

    background: transparent;
    pointer-events: none;
    touch-action: none;
    user-select: none;
}