/* ============================================================
   RESET
============================================================ */

* {
    box-sizing: border-box;
}


:root {

    --bg: #07111f;
    --panel: #0d1b2a;
    --panel-2: #102337;
    --border: rgba(255, 255, 255, 0.09);
    --text: #eef7ff;
    --muted: #8ea6bb;
    --accent: #38bdf8;
    --accent-2: #0ea5e9;
    --danger: #fb7185;
    --inactive: #101923;

    --shadow:
        0 20px 60px rgba(0, 0, 0, 0.28);

    --ease-out:
        cubic-bezier(0.22, 1, 0.36, 1);

    --duration-panel:
        0.45s;

    --duration-ui:
        0.35s;

    --viz-fill-min:
        clamp(280px, 42dvh, 420px);

    --viz-fill-height:
        clamp(320px, 58dvh, 720px);
}


@keyframes fade-slide-in {

    from {

        opacity:
            0;

        transform:
            translateY(10px);
    }

    to {

        opacity:
            1;

        transform:
            none;
    }
}


@keyframes scale-fade-in {

    from {

        opacity:
            0;

        transform:
            scale(0.96) translateY(8px);
    }

    to {

        opacity:
            1;

        transform:
            none;
    }
}


@keyframes cell-pop-in {

    from {

        opacity:
            0;

        transform:
            scale(0.94) translateY(8px);
    }

    to {

        opacity:
            1;

        transform:
            none;
    }
}


@keyframes result-pulse {

    0%,
    100% {

        transform:
            scale(1);
    }

    45% {

        transform:
            scale(1.015);
    }
}


/* ============================================================
   BASE
============================================================ */

html {

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:
        var(--bg);

    color:
        var(--text);

    overflow-x:
        hidden;
}


body {

    margin: 0;

    min-height: 100vh;

    background:

        radial-gradient(
            circle at 15% 0%,
            rgba(14, 165, 233, 0.13),
            transparent 28rem
        ),

        radial-gradient(
            circle at 90% 10%,
            rgba(56, 189, 248, 0.08),
            transparent 24rem
        ),

        var(--bg);
}


button,
input {

    font: inherit;
}


button {

    cursor: pointer;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    line-height:
        1;

    text-align:
        center;
}


/* ============================================================
   APP
============================================================ */

.app {

    width:
        min(
            1500px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

    padding:
        42px 0 60px;
}


/* ============================================================
   HEADER
============================================================ */

.header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 24px;

    margin-bottom: 28px;
}


.eyebrow {

    margin:
        0 0 8px;

    color:
        var(--accent);

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.16em;
}


h1 {

    margin:
        0 0 8px;

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    line-height:
        1;

    letter-spacing:
        -0.04em;
}


.subtitle {

    max-width:
        720px;

    margin-bottom:
        0;

    color:
        var(--muted);

    line-height:
        1.6;
}


.header-badge {

    flex-shrink:
        0;

    padding:
        10px 14px;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    color:
        var(--muted);

    background:
        rgba(255, 255, 255, 0.03);

    font-size:
        0.8rem;

    font-weight:
        700;
}


/* ============================================================
   LAYOUT
============================================================ */

.layout {

    display:
        grid;

    grid-template-columns:
        minmax(60px, auto)
        1fr;

    gap:
        22px;

    align-items:
        start;
}


.layout > * {

    min-width:
        0;
}


.panel {

    border:
        1px solid var(--border);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(16, 35, 55, 0.96),
            rgba(10, 25, 40, 0.96)
        );

    box-shadow:
        var(--shadow);
}


/* ============================================================
   CONTROLES
============================================================ */

.controls {

    position:
        sticky;

    top:
        20px;

    width:
        370px;

    max-width:
        370px;

    padding:
        24px;

    overflow:
        hidden;

    transition:
        width var(--duration-panel) var(--ease-out),
        max-width var(--duration-panel) var(--ease-out),
        padding var(--duration-panel) var(--ease-out);
}


.controls.collapsed {

    width:
        60px;

    max-width:
        60px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        6px;

    padding:
        12px 10px;
}


.controls-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        16px;

    padding-bottom:
        12px;

    border-bottom:
        1px solid var(--border);

    transition:
        margin var(--duration-panel) var(--ease-out),
        padding var(--duration-panel) var(--ease-out),
        border-color var(--duration-panel) var(--ease-out);
}


.controls-toolbar-title {

    margin:
        0;

    overflow:
        hidden;

    max-width:
        220px;

    font-size:
        1rem;

    font-weight:
        750;

    white-space:
        nowrap;

    opacity:
        1;

    transform:
        translateX(0);

    transition:
        max-width var(--duration-panel) var(--ease-out),
        opacity 0.28s ease,
        transform 0.35s var(--ease-out);
}


.controls-collapse-btn {

    position:
        relative;

    display:
        block;

    width:
        40px;

    height:
        40px;

    flex-shrink:
        0;

    padding:
        0;

    border:
        1px solid rgba(251, 191, 36, 0.55);

    border-radius:
        11px;

    color:
        #fbbf24;

    background:
        rgba(251, 191, 36, 0.16);

    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.08),
        0 4px 14px rgba(251, 191, 36, 0.12);

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.28s ease;
}


.controls-collapse-btn:hover {

    border-color:
        rgba(251, 191, 36, 0.9);

    color:
        #fde68a;

    background:
        rgba(251, 191, 36, 0.28);

    box-shadow:
        0 0 0 1px rgba(251, 191, 36, 0.16),
        0 6px 18px rgba(251, 191, 36, 0.22);

    transform:
        translateY(-1px);
}


.controls-icon-desktop,
.controls-menu-icon,
.controls-close-icon {

    position:
        absolute;

    top:
        0;

    left:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    line-height:
        0;

    pointer-events:
        none;

    transition:
        transform 0.4s var(--ease-out),
        opacity 0.2s ease;
}


.controls-menu-icon,
.controls-close-icon {

    display:
        none;
}


.controls-icon-desktop svg,
.controls-menu-icon svg,
.controls-close-icon svg {

    display:
        block;

    width:
        18px;

    height:
        18px;
}


.layout.controls-collapsed
.controls-icon-desktop {

    transform:
        rotate(180deg);
}


.layout.controls-collapsed
.controls-toolbar {

    display:
        flex;

    justify-content:
        center;

    width:
        100%;

    margin:
        0;

    padding:
        0;

    border-bottom:
        0;
}


.layout.controls-collapsed
.controls-toolbar-title {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    margin:
        -1px;

    padding:
        0;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    opacity:
        0;

    pointer-events:
        none;
}


.layout.controls-collapsed
.controls-body {

    max-height:
        0;

    margin:
        0;

    opacity:
        0;

    transform:
        translateX(-10px);

    pointer-events:
        none;
}


.controls-quick-nav {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        6px;

    overflow:
        hidden;

    max-height:
        0;

    margin-top:
        0;

    opacity:
        0;

    transform:
        translateY(-6px);

    pointer-events:
        none;

    visibility:
        hidden;

    transition:
        max-height var(--duration-panel) var(--ease-out),
        margin var(--duration-panel) var(--ease-out),
        opacity 0.3s ease,
        transform 0.35s var(--ease-out),
        visibility 0s linear 0.35s;
}


.layout.controls-collapsed
.controls-quick-nav {

    max-height:
        640px;

    width:
        100%;

    margin-top:
        0;

    opacity:
        1;

    transform:
        none;

    pointer-events:
        auto;

    visibility:
        visible;

    transition-delay:
        0.08s,
        0.08s,
        0.12s,
        0.12s,
        0s;
}


.controls-quick-divider {

    width:
        24px;

    height:
        1px;

    margin:
        2px 0;

    background:
        rgba(255, 255, 255, 0.12);
}


.controls-quick-btn {

    display:
        grid;

    width:
        40px;

    height:
        40px;

    place-items:
        center;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius:
        11px;

    color:
        #cfe8f8;

    background:
        rgba(255, 255, 255, 0.04);

    opacity:
        0;

    transform:
        scale(0.82);

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        opacity 0.28s ease,
        transform 0.28s var(--ease-out);
}


.layout.controls-collapsed
.controls-quick-nav > *:nth-child(1) { transition-delay: 0.08s; }
.layout.controls-collapsed
.controls-quick-nav > *:nth-child(2) { transition-delay: 0.11s; }
.layout.controls-collapsed
.controls-quick-nav > *:nth-child(3) { transition-delay: 0.14s; }
.layout.controls-collapsed
.controls-quick-nav > *:nth-child(4) { transition-delay: 0.17s; }
.layout.controls-collapsed
.controls-quick-nav > *:nth-child(5) { transition-delay: 0.2s; }
.layout.controls-collapsed
.controls-quick-nav > *:nth-child(6) { transition-delay: 0.23s; }
.layout.controls-collapsed
.controls-quick-nav > *:nth-child(7) { transition-delay: 0.26s; }
.layout.controls-collapsed
.controls-quick-nav > *:nth-child(8) { transition-delay: 0.29s; }
.layout.controls-collapsed
.controls-quick-nav > *:nth-child(9) { transition-delay: 0.32s; }
.layout.controls-collapsed
.controls-quick-nav > *:nth-child(10) { transition-delay: 0.35s; }
.layout.controls-collapsed
.controls-quick-nav > *:nth-child(11) { transition-delay: 0.38s; }


.layout.controls-collapsed
.controls-quick-btn {

    opacity:
        1;

    transform:
        none;
}


.layout.controls-collapsed
.controls-quick-btn:hover {

    transform:
        translateY(-1px);
}


.layout.controls-collapsed
.controls-quick-btn:active {

    transform:
        translateY(0);
}


.controls-quick-btn svg {

    width:
        18px;

    height:
        18px;
}


.controls-quick-btn:hover {

    border-color:
        rgba(56, 189, 248, 0.55);

    color:
        #ffffff;

    background:
        rgba(14, 165, 233, 0.18);

    transform:
        translateY(-1px);
}


.controls-quick-btn:active {

    transform:
        translateY(0);
}


.controls-body {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    overflow:
        hidden;

    max-height:
        2400px;

    opacity:
        1;

    transform:
        translateX(0);

    transition:
        max-height var(--duration-panel) var(--ease-out),
        opacity 0.3s ease,
        transform 0.35s var(--ease-out);
}


.control-accordion {

    border:
        1px solid var(--border);

    border-radius:
        14px;

    background:
        rgba(0, 0, 0, 0.14);

    overflow:
        hidden;
}


.control-accordion-header {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        14px 16px;

    cursor:
        pointer;

    list-style:
        none;

    user-select:
        none;
}


.control-accordion-header::-webkit-details-marker {

    display:
        none;
}


.control-accordion-heading {

    flex:
        1;

    min-width:
        0;
}


.control-accordion-heading h2 {

    margin:
        0 0 4px;

    font-size:
        0.95rem;
}


.control-accordion-heading p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.78rem;

    line-height:
        1.4;
}


.control-accordion-chevron {

    flex-shrink:
        0;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        1.1rem;

    line-height:
        1;

    transition:
        transform 0.25s var(--ease-out),
        color 0.15s ease;
}


.control-accordion[open]
.control-accordion-chevron {

    transform:
        rotate(90deg);

    color:
        var(--accent);
}


.control-accordion-body {

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    padding:
        0 16px 16px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

    animation:
        accordion-in 0.32s var(--ease-out);
}


@keyframes accordion-in {

    from {

        opacity:
            0;

        transform:
            translateY(-8px);
    }

    to {

        opacity:
            1;

        transform:
            none;
    }
}


.control-accordion-body
.form-grid:first-child,
.control-accordion-body
.quick-actions:first-child,
.control-accordion-body
.edit-mode:first-child,
.control-accordion-body
.legend:first-child,
.control-accordion-body
.filtration-list:first-child {

    margin-top:
        14px;
}


.control-accordion-body
.edit-mode {

    margin-top:
        0;
}


.control-accordion-body
.legend {

    margin-top:
        0;

    padding-top:
        0;

    border-top:
        0;
}


.accordion-subtitle {

    margin:
        4px 0 0;

    color:
        var(--muted);

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.02em;

    text-transform:
        uppercase;
}


.sr-only {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    margin:
        -1px;

    padding:
        0;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;
}


.section-title {

    display:
        flex;

    gap:
        12px;

    align-items:
        flex-start;
}


.section-spacing {

    margin-top:
        28px;
}


.number {

    display:
        grid;

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    place-items:
        center;

    border:
        1px solid rgba(56, 189, 248, 0.3);

    border-radius:
        10px;

    color:
        var(--accent);

    background:
        rgba(56, 189, 248, 0.08);

    font-size:
        0.72rem;

    font-weight:
        800;
}


.section-title h2,
.panel-header h2,
.formula-panel h2 {

    margin:
        2px 0 4px;

    font-size:
        1rem;
}


.section-title p,
.panel-header p {

    margin-bottom:
        0;

    color:
        var(--muted);

    font-size:
        0.82rem;

    line-height:
        1.45;
}


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

.form-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin-top:
        16px;
}


.form-grid .full-width {

    grid-column:
        1 / -1;
}


.shape-actions {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        8px;

    margin-top:
        12px;
}


.autosave-status {

    margin:
        10px 0 0;

    color:
        #6f9f7a;

    font-size:
        0.68rem;

    font-weight:
        700;
}


label > span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #c9d8e5;

    font-size:
        0.78rem;

    font-weight:
        700;
}


input {

    width:
        100%;

    min-width:
        0;

    padding:
        11px 12px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    outline:
        none;

    color:
        var(--text);

    background:
        #071521;

    transition:
        0.2s ease;
}


input:focus {

    border-color:
        rgba(56, 189, 248, 0.65);

    box-shadow:
        0 0 0 3px
        rgba(56, 189, 248, 0.1);
}


.input-unit {

    position:
        relative;
}


.input-unit input {

    padding-right:
        40px;
}


.input-unit span {

    position:
        absolute;

    top:
        50%;

    right:
        12px;

    transform:
        translateY(-50%);

    color:
        var(--muted);

    pointer-events:
        none;

    font-size:
        0.78rem;
}


/* ============================================================
   MODE SELECTION
============================================================ */

.edit-mode {

    margin-top:
        16px;

    padding:
        13px;

    border:
        1px solid
        rgba(56, 189, 248, 0.15);

    border-radius:
        12px;

    background:
        rgba(56, 189, 248, 0.045);
}


.edit-mode-header {

    display:
        flex;

    gap:
        10px;

    align-items:
        flex-start;
}


.edit-mode-icon {

    display:
        grid;

    width:
        28px;

    height:
        28px;

    flex:
        0 0 28px;

    place-items:
        center;

    border-radius:
        8px;

    color:
        var(--accent);

    background:
        rgba(56, 189, 248, 0.1);

    font-size:
        0.8rem;
}


.edit-mode-header strong {

    display:
        block;

    margin-bottom:
        3px;

    font-size:
        0.76rem;
}


.edit-mode-header p {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.68rem;

    line-height:
        1.4;
}


.edit-mode-info {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        10px;

    padding-top:
        9px;

    border-top:
        1px solid var(--border);

    color:
        var(--muted);

    font-size:
        0.7rem;
}


.edit-mode-info strong {

    color:
        var(--accent);
}


/* ============================================================
   INFOS CELLULE
============================================================ */

.cell-info {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;

    margin-top:
        14px;
}


.cell-info div {

    padding:
        11px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, 0.025);
}


.cell-info div:last-child {

    grid-column:
        1 / -1;
}


.cell-info span,
.cell-info strong {

    display:
        block;
}


.cell-info span {

    margin-bottom:
        3px;

    color:
        var(--muted);

    font-size:
        0.7rem;
}


.cell-info strong {

    font-size:
        0.85rem;
}


/* ============================================================
   BOUTONS
============================================================ */

.quick-actions {

    display:
        flex;

    gap:
        8px;

    margin-top:
        15px;
}


.save-load-actions {

    margin-top:
        12px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        8px;
}


.secondary-btn,
.ghost-btn {

    border-radius:
        10px;

    padding:
        10px 13px;

    font-size:
        0.78rem;

    font-weight:
        800;

    transition:
        0.2s ease;
}


.secondary-btn {

    border:
        1px solid
        rgba(56, 189, 248, 0.35);

    color:
        #e9f8ff;

    background:
        rgba(14, 165, 233, 0.13);
}


.secondary-btn:hover {

    background:
        rgba(14, 165, 233, 0.22);

    transform:
        translateY(-1px);
}


.ghost-btn {

    border:
        1px solid var(--border);

    color:
        var(--muted);

    background:
        transparent;
}


.ghost-btn:hover {

    color:
        var(--text);

    background:
        rgba(255, 255, 255, 0.05);
}


.danger-btn {

    width:
        100%;

    border:
        1px solid rgba(251, 113, 133, 0.45);

    border-radius:
        12px;

    padding:
        11px 14px;

    color:
        #fff1f2;

    background:
        rgba(251, 113, 133, 0.18);

    font-size:
        0.88rem;

    font-weight:
        700;

    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}


.danger-btn:hover {

    border-color:
        rgba(251, 113, 133, 0.75);

    background:
        rgba(251, 113, 133, 0.3);
}


.filtration-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.filtration-list:empty::before {

    content:
        "Aucune filtration ajoutée.";

    display:
        block;

    padding:
        10px 12px;

    border:
        1px dashed rgba(255, 255, 255, 0.14);

    border-radius:
        10px;

    color:
        var(--muted);

    font-size:
        0.82rem;
}


.filtration-item {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        10px 10px 10px 12px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius:
        10px;

    background:
        rgba(0, 0, 0, 0.18);

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.25s var(--ease-out),
        opacity 0.25s ease;
}


.filtration-item.filtration-item-enter {

    animation:
        fade-slide-in 0.38s var(--ease-out) both;
}


.filtration-item.is-editing {

    align-items:
        flex-start;

    animation:
        none;
}


.filtration-item-content,
.filtration-item-info {

    flex:
        1;

    min-width:
        0;
}


.filtration-item-info {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.filtration-item-name {

    font-size:
        0.88rem;

    font-weight:
        700;
}


.filtration-item-capacity {

    color:
        var(--muted);

    font-size:
        0.78rem;
}


.filtration-item-actions {

    display:
        flex;

    flex-shrink:
        0;

    align-items:
        center;

    gap:
        4px;
}


.filtration-item-fields {

    display:
        grid;

    flex:
        1;

    gap:
        8px;

    min-width:
        0;
}


.filtration-field {

    display:
        grid;

    gap:
        4px;
}


.filtration-field span {

    color:
        var(--muted);

    font-size:
        0.72rem;

    font-weight:
        650;
}


.filtration-item-fields input {

    width:
        100%;

    min-width:
        0;

    padding:
        7px 9px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius:
        8px;

    color:
        var(--text);

    background:
        rgba(0, 0, 0, 0.22);

    font-size:
        0.84rem;
}


.filtration-item-fields input:focus {

    outline:
        none;

    border-color:
        rgba(56, 189, 248, 0.55);

    box-shadow:
        0 0 0 2px
        rgba(56, 189, 248, 0.15);
}


.filtration-edit-btn,
.filtration-save-btn,
.filtration-cancel-btn,
.filtration-remove-btn {

    display:
        grid;

    width:
        28px;

    height:
        28px;

    place-items:
        center;

    border:
        0;

    border-radius:
        8px;

    padding:
        0;

    line-height:
        1;

    cursor:
        pointer;
}


.icon-glyph {

    display:
        grid;

    place-items:
        center;

    width:
        1em;

    height:
        1em;

    line-height:
        1;
}


.filtration-remove-btn
.icon-glyph,
.filtration-cancel-btn
.icon-glyph,
.dialog-close-btn
.icon-glyph {

    transform:
        translateY(-0.08em);
}


.filtration-edit-btn {

    color:
        #cfe8f8;

    background:
        rgba(56, 189, 248, 0.12);
}


.filtration-edit-btn svg {

    width:
        15px;

    height:
        15px;
}


.filtration-edit-btn:hover {

    color:
        #ffffff;

    background:
        rgba(56, 189, 248, 0.24);
}


.filtration-save-btn {

    color:
        #dcfce7;

    background:
        rgba(34, 197, 94, 0.16);

    font-size:
        1rem;

    line-height:
        1;
}


.filtration-save-btn:hover {

    background:
        rgba(34, 197, 94, 0.28);
}


.filtration-cancel-btn,
.filtration-remove-btn {

    color:
        #fecdd3;

    background:
        rgba(251, 113, 133, 0.12);

    font-size:
        1.25rem;

    line-height:
        1;
}


.filtration-cancel-btn:hover,
.filtration-remove-btn:hover {

    color:
        #fff1f2;

    background:
        rgba(251, 113, 133, 0.28);
}


.filtration-add {

    display:
        grid;

    gap:
        12px;
}


.filtration-form {

    display:
        grid;

    gap:
        12px;

    overflow:
        hidden;

    max-height:
        0;

    opacity:
        0;

    transform:
        translateY(-6px);

    pointer-events:
        none;

    transition:
        max-height 0.42s var(--ease-out),
        opacity 0.28s ease,
        transform 0.32s var(--ease-out);
}


.filtration-form.is-open {

    max-height:
        280px;

    opacity:
        1;

    transform:
        none;

    pointer-events:
        auto;
}


.filtration-form[hidden] {

    max-height:
        0 !important;

    opacity:
        0 !important;

    pointer-events:
        none !important;
}


.filtration-form-actions {

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        8px;
}


.reset-warning,
.reset-dialog-note {

    margin:
        0;

    color:
        var(--muted);

    font-size:
        0.84rem;

    line-height:
        1.45;
}


.reset-dialog-note {

    margin-top:
        10px;

    color:
        #fecdd3;
}


.volume-breakdown {

    display:
        block;

    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        0.76rem;

    font-weight:
        500;
}


.result-card.primary
.volume-breakdown {

    color:
        rgba(238, 247, 255, 0.72);
}


/* ============================================================
   LEGENDE
============================================================ */

.legend {

    margin-top:
        24px;

    padding-top:
        18px;

    border-top:
        1px solid var(--border);
}


.legend-title {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--muted);

    font-size:
        0.72rem;

    font-weight:
        700;
}


.gradient {

    height:
        10px;

    border-radius:
        99px;

    background:
        linear-gradient(
            90deg,
            #dff8ff 0%,
            #5fd6ff 35%,
            #168bd0 70%,
            #073d80 100%
        );
}


.legend-labels {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        0.65rem;
}


.inactive-legend {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        12px;

    color:
        var(--muted);

    font-size:
        0.65rem;
}


.inactive-example {

    width:
        18px;

    height:
        12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        4px;

    background:
        repeating-linear-gradient(
            -45deg,
            #101923,
            #101923 4px,
            #16222e 4px,
            #16222e 8px
        );
}


/* ============================================================
   CONTENU
============================================================ */

.content {

    display:
        grid;

    gap:
        22px;
}


/* ============================================================
   GRILLE
============================================================ */

.grid-panel,
.visualization-panel {

    padding:
        24px;

    overflow:
        visible;

    animation:
        fade-slide-in 0.55s var(--ease-out) both;
}


.visualization-panel {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

    min-width:
        0;
}


.view-panels-stack {

    display:
        grid;

    grid-template:
        1fr / 1fr;

    align-items:
        stretch;

    position:
        relative;

    width:
        100%;

    min-width:
        0;
}


.view-panels-stack:has(
    .view-panel-fill.view-panel-active
) {

    min-height:
        var(--viz-fill-height);
}


.view-panels-stack:not(
    :has(.view-panel-fill.view-panel-active)
) {

    min-height:
        0;
}


.view-tabs {

    display:
        flex;

    gap:
        8px;

    margin-bottom:
        18px;

    padding:
        4px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.03);
}


.view-tab {

    flex:
        1;

    border:
        0;

    border-radius:
        8px;

    padding:
        10px 14px;

    color:
        var(--muted);

    background:
        transparent;

    font-size:
        0.8rem;

    font-weight:
        800;

    transition:
        color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s var(--ease-out);
}


.view-tab:hover {

    color:
        var(--text);

    background:
        rgba(255, 255, 255, 0.05);

    transform:
        translateY(-1px);
}


.view-tab.active {

    color:
        #e9f8ff;

    background:
        rgba(14, 165, 233, 0.22);

    box-shadow:
        inset
        0 0 0 1px
        rgba(56, 189, 248, 0.28);

    transform:
        none;
}


.view-panels-stack
> .view-panel {

    grid-area:
        1 / 1;

    width:
        100%;

    min-width:
        0;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(12px);

    pointer-events:
        none;

    transition:
        opacity var(--duration-ui) var(--ease-out),
        transform var(--duration-ui) var(--ease-out),
        visibility 0s linear var(--duration-ui);
}


.view-panels-stack
> .view-panel:not(.view-panel-active) {

    position:
        absolute;

    top:
        0;

    left:
        0;

    height:
        100%;
}


.view-panels-stack
> .view-panel.view-panel-fill.view-panel-active {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    min-height:
        var(--viz-fill-height);

    height:
        100%;
}


.view-panels-stack
> .view-panel.view-panel-active {

    position:
        relative;

    opacity:
        1;

    visibility:
        visible;

    transform:
        none;

    pointer-events:
        auto;

    z-index:
        1;

    transition-delay:
        0s;
}


.view-panel-header {

    margin-bottom:
        18px;
}


.view-panel-header h3 {

    margin:
        2px 0 4px;

    font-size:
        1rem;
}


.view3d-hint {

    margin:
        0 0 12px;

    color:
        var(--muted);

    font-size:
        0.78rem;

    line-height:
        1.45;
}


.cross-section-wrapper {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    width:
        100%;

    min-height:
        var(--viz-fill-min);

    border:
        1px solid var(--border);

    border-radius:
        14px;

    overflow:
        hidden;

    background:
        #07111f;

    animation:
        fade-slide-in 0.4s var(--ease-out) both;
}


.cross-section-toolbar {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-bottom:
        12px;
}


.cross-section-axis-btn {

    padding:
        7px 12px;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius:
        999px;

    color:
        var(--text);

    background:
        rgba(255, 255, 255, 0.04);

    font-size:
        0.82rem;

    font-weight:
        650;

    cursor:
        pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        transform 0.22s var(--ease-out);
}


.cross-section-axis-btn:hover {

    border-color:
        rgba(56, 189, 248, 0.45);

    background:
        rgba(14, 165, 233, 0.1);

    transform:
        translateY(-1px);
}


.cross-section-axis-btn.active {

    border-color:
        rgba(56, 189, 248, 0.75);

    color:
        #e0f2fe;

    background:
        rgba(14, 165, 233, 0.22);

    transform:
        none;
}


.cross-section-canvas {

    display:
        block;

    flex:
        1;

    width:
        100% !important;

    height:
        100% !important;

    min-height:
        var(--viz-fill-min);
}


.panel-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        15px;

    margin-bottom:
        22px;
}


.axis-hint {

    padding:
        7px 10px;

    border-radius:
        8px;

    color:
        var(--accent);

    background:
        rgba(56, 189, 248, 0.08);

    font-size:
        0.75rem;

    font-weight:
        800;
}


.grid-wrapper {

    position:
        relative;

    overflow:
        auto;

    padding:
        14px 14px 14px 35px;
}


.y-axis-label {

    position:
        absolute;

    top:
        50%;

    left:
        3px;

    transform:
        translateY(-50%);

    color:
        var(--accent);

    font-size:
        0.75rem;

    font-weight:
        800;
}


.depth-grid {

    display:
        grid;

    gap:
        10px;

    min-width:
        420px;

    padding:
        8px;

    overflow:
        visible;
}


/* ============================================================
   CELLULE
============================================================ */

.depth-cell {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    min-width:
        100px;

    min-height:
        156px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        10px;

    overflow:
        visible;

    background:
        #0e4d75;

    box-shadow:
        inset
        0 1px
        rgba(255, 255, 255, 0.08);

    transition:
        transform 0.15s ease,
        border-color 0.25s ease,
        opacity 0.35s ease,
        background-color 0.35s ease,
        box-shadow 0.15s ease;
}


.depth-cell.cell-enter {

    animation:
        cell-pop-in 0.42s var(--ease-out) both;
}


.depth-cell:hover {

    z-index:
        5;

    transform:
        translateY(-2px);

    border-color:
        rgba(255, 255, 255, 0.4);

    box-shadow:
        0 12px 28px
        rgba(0, 0, 0, 0.28),
        inset
        0 1px
        rgba(255, 255, 255, 0.08);
}


/* ============================================================
   CONTENU CELLULE
============================================================ */

.cell-main {

    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    min-height:
        auto;

    padding:
        22px 6px 6px;

    overflow:
        visible;

    z-index:
        2;
}


/* ============================================================
   DECOUPE CELLULE (bouton + editeur)
============================================================ */

.cell-fill-btn {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        4px;

    width:
        100%;

    max-width:
        132px;

    margin:
        0;

    padding:
        4px 6px 5px;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius:
        8px;

    color:
        inherit;

    background:
        rgba(0, 0, 0, 0.22);

    cursor:
        pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        transform 0.12s ease;
}


.cell-fill-btn:hover {

    border-color:
        rgba(56, 189, 248, 0.55);

    background:
        rgba(14, 165, 233, 0.12);

    transform:
        translateY(-1px);
}


.cell-fill-preview {

    display:
        block;

    overflow:
        hidden;

    border-radius:
        4px;

    background:
        rgba(16, 25, 35, 0.95);
}


.cell-fill-percent {

    margin-top:
        auto;

    padding:
        2px 7px;

    border-radius:
        5px;

    color:
        #06243b;

    background:
        rgba(255, 255, 255, 0.82);

    font-size:
        0.62rem;

    font-weight:
        800;

    line-height:
        1.2;

    flex-shrink:
        0;
}


/* ============================================================
   PROFONDEUR
============================================================ */

.depth-cell input.depth-input {

    width:
        100%;

    min-width:
        0;

    padding:
        0 2px;

    border:
        0;

    border-radius:
        4px;

    outline:
        none;

    color:
        white;

    background:
        rgba(0, 0, 0, 0.18);

    text-align:
        center;

    font-size:
        0.82rem;

    font-weight:
        850;

    text-shadow:
        0 1px 2px
        rgba(0, 0, 0, 0.45);
}


.depth-cell input.depth-input:focus {

    box-shadow:
        none;

    outline:
        2px solid
        rgba(255, 255, 255, 0.55);

    outline-offset:
        2px;

    border-radius:
        6px;
}


/* ============================================================
   REMPLISSAGE PARTIEL
============================================================ */

.depth-cell.partial-fill::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    border-radius:
        inherit;

    pointer-events:
        none;

    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 6px,
            rgba(255, 255, 255, 0.14) 6px,
            rgba(255, 255, 255, 0.14) 12px
        );
}


.depth-cell.inactive
.cell-fill-btn,
.depth-cell.inactive
.cell-fill-percent {

    display:
        none;
}


/* ============================================================
   COORDONNEES
============================================================ */

.cell-coordinate {

    position:
        absolute;

    top:
        7px;

    left:
        8px;

    z-index:
        3;

    padding:
        2px 6px;

    border-radius:
        5px;

    color:
        #06243b;

    background:
        rgba(255, 255, 255, 0.78);

    font-size:
        0.6rem;

    font-weight:
        800;

    line-height:
        1.2;

    pointer-events:
        none;
}


/* ============================================================
   CHECKBOX CELLULE
============================================================ */

.cell-toggle {

    position:
        relative;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        25px;

    height:
        25px;

    margin:
        0;

    padding:
        0;

    flex-shrink:
        0;

    cursor:
        pointer;
}


/*
 * On cache la checkbox native
 */

.cell-toggle input {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;
}


/*
 * Apparence de la checkbox
 */

.checkmark {

    position:
        relative;

    display:
        block;

    width:
        20px;

    height:
        20px;

    border:
        2px solid
        rgba(255,255,255,0.75);

    border-radius:
        6px;

    background:
        rgba(0,0,0,0.18);

    transition:
        0.15s ease;
}


/*
 * Cellule active
 */

.cell-toggle input:checked
+ .checkmark {

    border-color:
        #ffffff;

    background:
        var(--accent);

    box-shadow:
        0 0 0 3px
        rgba(56,189,248,0.18);
}


/*
 * Checkmark
 */

.cell-toggle input:checked
+ .checkmark::after {

    content:
        "";

    position:
        absolute;

    left:
        5px;

    top:
        1px;

    width:
        5px;

    height:
        10px;

    border:
        solid #06243b;

    border-width:
        0 2px 2px 0;

    transform:
        rotate(45deg);
}


/* ============================================================
   CELLULE INACTIVE
============================================================ */

.depth-cell.inactive {

    overflow:
        hidden;

    background:
        repeating-linear-gradient(
            -45deg,
            #101923,
            #101923 7px,
            #16222e 7px,
            #16222e 14px
        );

    border-color:
        rgba(255,255,255,0.07);

    opacity:
        0.65;

    transition:
        opacity 0.35s ease,
        background 0.35s ease,
        border-color 0.25s ease;
}


/*
 * Pas de coordonnées pour une cellule
 * hors bassin.
 */

.depth-cell.inactive
.cell-coordinate {

    display:
        none;
}


/*
 * Pas de profondeur pour une cellule
 * hors bassin.
 */

.depth-cell.inactive
input.depth-input {

    display:
        none;
}


.depth-cell.inactive
.cell-main {

    justify-content:
        center;

    padding-top:
        28px;
}


/*
 * La checkbox reste visible et centrée !
 */

.depth-cell.inactive
.cell-toggle {

    display:
        flex;
}


/* ============================================================
   AIDE
============================================================ */

.help {

    margin:
        20px 0 0;

    padding:
        12px 14px;

    border-radius:
        10px;

    color:
        #a9bfd0;

    background:
        rgba(255, 255, 255, 0.035);

    font-size:
        0.78rem;

    line-height:
        1.5;
}


/* ============================================================
   RESULTATS
============================================================ */

.results {

    display:
        grid;

    grid-template-columns:
        1.5fr repeat(3, 1fr);

    gap:
        12px;

    animation:
        fade-slide-in 0.55s var(--ease-out) 0.08s both;

    transition:
        transform 0.3s var(--ease-out);
}


.results.results-updated {

    animation:
        none;
}


.results.results-updated
.result-card {

    animation:
        result-pulse 0.45s var(--ease-out);
}


.result-card {

    min-width:
        0;

    padding:
        20px;

    border:
        1px solid var(--border);

    border-radius:
        15px;

    background:
        rgba(13, 27, 42, 0.88);

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s var(--ease-out);
}


.result-card.primary {

    border-color:
        rgba(56,189,248,0.28);

    background:
        linear-gradient(
            145deg,
            rgba(14,165,233,0.16),
            rgba(13,27,42,0.95)
        );
}


.result-label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--muted);

    font-size:
        0.72rem;

    font-weight:
        750;
}


.result-card strong {

    display:
        block;

    margin-bottom:
        5px;

    font-size:
        clamp(1.2rem,2vw,1.65rem);

    letter-spacing:
        -0.03em;

    transition:
        color 0.28s ease,
        transform 0.28s var(--ease-out);
}


.results.results-updated
.result-card.primary strong {

    color:
        #7dd3fc;
}


.result-card.primary strong {

    color:
        var(--accent);

    font-size:
        clamp(1.6rem,3vw,2.2rem);
}


.result-card > span:last-child {

    color:
        #6f8ba0;

    font-size:
        0.7rem;
}


/* ============================================================
   VUE 3D
============================================================ */

.view3d-container {

    flex:
        1;

    width:
        100%;

    min-height:
        var(--viz-fill-min);

    height:
        100%;

    border:
        1px solid var(--border);

    border-radius:
        14px;

    overflow:
        hidden;

    background:
        #07111f;

    animation:
        fade-slide-in 0.4s var(--ease-out) both;
}


.view3d-container canvas {

    display:
        block;

    width:
        100% !important;

    height:
        100% !important;
}


/* ============================================================
   FORMULE
============================================================ */

.formula-panel {

    padding:
        22px;
}


.formula {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        10px;

    margin:
        15px 0;

    padding:
        15px;

    border:
        1px solid var(--border);

    border-radius:
        12px;

    background:
        #071521;

    color:
        #d8e7f1;

    font-size:
        0.9rem;
}


.formula b {

    color:
        var(--accent);
}


.formula-panel p {

    margin-bottom:
        0;

    color:
        var(--muted);

    font-size:
        0.78rem;

    line-height:
        1.55;
}


/* ============================================================
   DIALOG
============================================================ */

dialog {

    width:
        min(400px, calc(100% - 30px));

    padding:
        24px;

    border:
        1px solid var(--border);

    border-radius:
        18px;

    color:
        var(--text);

    background:
        #0d1b2a;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,0.6);

    opacity:
        0;

    transform:
        scale(0.96) translateY(10px);

    transition:
        opacity var(--duration-ui) var(--ease-out),
        transform var(--duration-ui) var(--ease-out),
        overlay var(--duration-ui) allow-discrete;
}


dialog[open] {

    opacity:
        1;

    transform:
        none;
}


@starting-style {

    dialog[open] {

        opacity:
            0;

        transform:
            scale(0.96) translateY(10px);
    }
}


dialog::backdrop {

    background:
        rgba(0,0,0,0.65);

    backdrop-filter:
        blur(5px);

    transition:
        background-color var(--duration-ui) ease,
        backdrop-filter var(--duration-ui) ease;
}


@starting-style {

    dialog[open]::backdrop {

        background-color:
            rgba(0, 0, 0, 0);

        backdrop-filter:
            blur(0);
    }
}


dialog h2 {

    margin-bottom:
        8px;
}


dialog p {

    color:
        var(--muted);

    font-size:
        0.82rem;

    line-height:
        1.5;
}


.onboarding-dialog {

    width:
        min(520px, calc(100% - 30px));
}


.onboarding-steps {

    margin:
        16px 0;

    padding-left:
        20px;

    color:
        #c9d8e5;

    font-size:
        0.84rem;

    line-height:
        1.55;
}


.onboarding-note {

    margin-bottom:
        0;

    color:
        #8ea6bb;

    font-size:
        0.78rem;
}


.dialog-actions {

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        8px;

    margin-top:
        20px;
}


.fill-edit-dialog {

    width:
        min(720px, calc(100vw - 32px));

    max-width:
        calc(100vw - 32px);

    padding-top:
        18px;
}


.fill-edit-dialog-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        8px;
}


.fill-edit-dialog-header h2 {

    margin:
        0;

    flex:
        1;

    min-width:
        0;
}


.fill-edit-dialog-header
.dialog-close-btn {

    margin:
        0;
}


.dialog-close-btn {

    display:
        grid;

    place-items:
        center;

    flex-shrink:
        0;

    width:
        40px;

    height:
        40px;

    margin:
        0;

    padding:
        0;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius:
        11px;

    color:
        #cbd5e1;

    background:
        rgba(255, 255, 255, 0.04);

    font-size:
        1.35rem;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}


.dialog-close-btn:hover {

    border-color:
        rgba(248, 113, 113, 0.55);

    color:
        #fecaca;

    background:
        rgba(248, 113, 113, 0.12);
}


.fill-edit-hint {

    margin-bottom:
        14px;

    color:
        var(--muted);

    font-size:
        0.88rem;

    line-height:
        1.45;
}


.fill-edit-toolbar {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        12px;
}


.fill-mode-btn {

    padding:
        8px 12px;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius:
        999px;

    color:
        var(--text);

    background:
        rgba(255, 255, 255, 0.04);

    font-size:
        0.82rem;

    font-weight:
        650;

    line-height:
        1.2;

    cursor:
        pointer;

    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        transform 0.22s var(--ease-out);
}


.fill-mode-btn:hover {

    border-color:
        rgba(56, 189, 248, 0.45);

    background:
        rgba(14, 165, 233, 0.1);

    transform:
        translateY(-1px);
}


.fill-mode-btn.active {

    border-color:
        rgba(56, 189, 248, 0.75);

    color:
        #e0f2fe;

    background:
        rgba(14, 165, 233, 0.22);

    transform:
        none;
}


.fill-edit-percent {

    padding:
        4px 10px;

    border-radius:
        999px;

    color:
        #06243b;

    background:
        rgba(255, 255, 255, 0.88);

    font-size:
        0.82rem;

    font-weight:
        800;
}


.fill-edit-history {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    margin-left:
        auto;
}


.fill-history-btn {

    padding:
        8px 10px;

    border:
        1px solid rgba(255, 255, 255, 0.14);

    border-radius:
        8px;

    color:
        #e2e8f0;

    background:
        rgba(255, 255, 255, 0.06);

    font-size:
        0.8rem;

    font-weight:
        700;

    line-height:
        1.2;

    white-space:
        nowrap;

    cursor:
        pointer;
}


.fill-history-btn:hover:not(:disabled) {

    border-color:
        rgba(56, 189, 248, 0.55);

    color:
        #e0f2fe;

    background:
        rgba(14, 165, 233, 0.16);
}


.fill-history-btn:disabled {

    opacity:
        0.4;

    cursor:
        not-allowed;
}


.fill-edit-depth-panel:not([hidden]) {

    display:
        grid;

    gap:
        12px;

    margin-bottom:
        14px;

    padding:
        12px 14px;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.04);

    animation:
        fade-slide-in 0.32s var(--ease-out) both;
}


.fill-edit-depth-panel[hidden] {

    display:
        none !important;
}


.fill-edit-depth-header {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        8px;

    color:
        var(--muted);

    font-size:
        0.86rem;
}


.fill-edit-base-depth {

    color:
        #e0f2fe;

    font-weight:
        700;
}


.fill-edit-depth-slider {

    display:
        grid;

    gap:
        8px;

    color:
        #e2e8f0;

    font-size:
        0.88rem;
}


.fill-edit-depth-controls {

    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    gap:
        12px;
}


.fill-edit-depth-controls input[type="range"] {

    width:
        100%;
}


.fill-edit-depth-controls output {

    min-width:
        4.5rem;

    color:
        #fbbf24;

    font-weight:
        800;

    text-align:
        right;
}


.fill-edit-depth-panel .ghost-btn {

    justify-self:
        start;
}


.fill-edit-depth-panel .ghost-btn:disabled,
.fill-edit-depth-controls input[type="range"]:disabled {

    opacity:
        0.45;

    cursor:
        not-allowed;
}


.fill-edit-canvas {

    display:
        block;

    width:
        100%;

    max-width:
        520px;

    height:
        auto;

    aspect-ratio:
        13 / 10;

    margin:
        0 auto;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius:
        12px;

    cursor:
        crosshair;
}


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

@media (max-width: 1050px) {

    .layout {

        grid-template-columns:
            1fr;

        gap:
            16px;
    }


    .content {

        gap:
            16px;

        min-width:
            0;
    }


    .layout.controls-collapsed {

        grid-template-columns:
            1fr;
    }


    .view-tabs {

        flex-wrap:
            wrap;
    }


    .view-tab {

        flex:
            1 1 calc(33.333% - 6px);

        min-width:
            88px;

        padding:
            9px 10px;

        font-size:
            0.76rem;
    }


    .view-panels-stack:has(
        .view-panel-fill.view-panel-active
    ) {

        min-height:
            clamp(
                280px,
                52dvh,
                620px
            );
    }


    .layout.controls-collapsed
    .controls-toolbar {

        justify-content:
            center;

        margin-bottom:
            0;

        padding-bottom:
            0;

        border-bottom:
            0;
    }


    .layout.controls-collapsed
    .controls {

        display:
            flex;

        flex-wrap:
            wrap;

        align-items:
            center;

        gap:
            8px;

        padding:
            10px 14px;
    }


    .layout.controls-collapsed
    .controls-quick-nav {

        flex-direction:
            row;

        flex-wrap:
            wrap;

        justify-content:
            flex-end;

        flex:
            1;

        margin-top:
            0;
    }


    .layout.controls-collapsed
    .controls-quick-divider {

        width:
            1px;

        height:
            24px;

        margin:
            0 2px;
    }


    .controls {

        position:
            static;

        width:
            100%;

        max-width:
            none;
    }


    .layout.controls-collapsed
    .controls,
    .controls.collapsed {

        width:
            100%;

        max-width:
            none;
    }


    .results {

        grid-template-columns:
            1fr 1fr;
    }


    .result-card.primary {

        grid-column:
            1 / -1;
    }
}


/* ============================================================
   MOBILE — MENU BAS TYPE BURGER
============================================================ */

@media (max-width: 768px) {

    .layout {

        padding-bottom:
            calc(
                72px +
                env(safe-area-inset-bottom)
            );
    }


    .layout.mobile-menu-open {

        padding-bottom:
            calc(
                min(52vh, 380px) +
                env(safe-area-inset-bottom)
            );
    }


    .layout:not(.controls-collapsed) {

        padding-bottom:
            0;
    }


    .layout
    #controlsPanel {

        position:
            fixed;

        left:
            0;

        right:
            0;

        bottom:
            0;

        top:
            auto;

        width:
            100% !important;

        max-width:
            none !important;

        z-index:
            220;

        margin:
            0;

        border-radius:
            18px 18px 0 0;

        box-shadow:
            0 -12px 40px
            rgba(0, 0, 0, 0.45);
    }


    .layout.controls-collapsed
    #controlsPanel {

        display:
            flex;

        flex-direction:
            column;

        padding:
            0;

        max-height:
            calc(
                72px +
                env(safe-area-inset-bottom)
            );

        overflow:
            hidden;

        transition:
            max-height var(--duration-panel) var(--ease-out);
    }


    .layout.controls-collapsed.mobile-menu-open
    #controlsPanel {

        max-height:
            min(
                52vh,
                380px
            );
    }


    .layout.controls-collapsed
    .controls-toolbar {

        justify-content:
            center;

        margin:
            0;

        padding:
            10px 16px
            calc(
                10px +
                env(safe-area-inset-bottom)
            );

        border-bottom:
            0;

        flex-shrink:
            0;
    }


    .layout.controls-collapsed.mobile-menu-open
    .controls-toolbar {

        padding-bottom:
            10px;
    }


    .layout.controls-collapsed
    .controls-body {

        display:
            none !important;
    }


    .layout.controls-collapsed
    .controls-quick-nav {

        display:
            grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap:
            10px;

        width:
            100%;

        padding:
            0 16px 12px;

        margin:
            0;

        max-height:
            0;

        opacity:
            0;

        overflow:
            hidden;

        visibility:
            hidden;

        pointer-events:
            none;

        transform:
            none;
    }


    .layout.controls-collapsed.mobile-menu-open
    .controls-quick-nav {

        max-height:
            320px;

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;
    }


    .layout.controls-collapsed
    .controls-quick-btn {

        opacity:
            1;

        transform:
            none;
    }


    .layout.controls-collapsed
    .controls-quick-divider {

        display:
            none;
    }


    .layout:not(.controls-collapsed)
    #controlsPanel {

        display:
            flex;

        flex-direction:
            column;

        max-height:
            min(88dvh, 720px);

        padding:
            0;
    }


    .layout:not(.controls-collapsed)
    .controls-toolbar {

        padding:
            14px 16px 10px;

        border-bottom:
            1px solid var(--border);

        flex-shrink:
            0;
    }


    .layout:not(.controls-collapsed)
    .controls-toolbar-title {

        position:
            static;

        width:
            auto;

        height:
            auto;

        margin:
            0;

        clip:
            auto;

        opacity:
            1;

        pointer-events:
            auto;
    }


    .layout:not(.controls-collapsed)
    .controls-body {

        display:
            flex !important;

        flex:
            1;

        overflow-y:
            auto;

        max-height:
            calc(min(88dvh, 720px) - 56px);

        margin:
            0;

        opacity:
            1;

        transform:
            none;

        pointer-events:
            auto;

        padding:
            0 16px
            calc(
                16px +
                env(safe-area-inset-bottom)
            );
    }


    .layout:not(.controls-collapsed)
    .controls-quick-nav {

        display:
            none !important;
    }


    .layout.controls-collapsed
    .controls-icon-desktop {

        display:
            none !important;
    }


    .layout.controls-collapsed:not(.mobile-menu-open)
    .controls-menu-icon {

        display:
            flex !important;
    }


    .layout.controls-collapsed.mobile-menu-open
    .controls-menu-icon {

        display:
            none !important;
    }


    .layout.controls-collapsed.mobile-menu-open
    .controls-close-icon,
    .layout:not(.controls-collapsed)
    .controls-close-icon {

        display:
            flex !important;
    }


    .layout:not(.controls-collapsed)
    .controls-icon-desktop {

        display:
            none !important;
    }


    .controls-collapse-btn {

        width:
            48px;

        height:
            48px;
    }


    .mobile-menu-backdrop {

        position:
            fixed;

        inset:
            0;

        z-index:
            210;

        background:
            rgba(0, 0, 0, 0.55);

        backdrop-filter:
            blur(3px);

        opacity:
            0;

        pointer-events:
            none;

        transition:
            opacity 0.3s ease;
    }


    .mobile-menu-backdrop:not([hidden]) {

        opacity:
            1;

        pointer-events:
            auto;
    }


    .layout.controls-collapsed
    .controls,
    .layout.controls-collapsed
    .controls.collapsed {

        width:
            100%;

        max-width:
            none;

        flex-wrap:
            nowrap;
    }
}


@media (max-width: 600px) {

    :root {

        --viz-fill-min:
            clamp(220px, 38dvh, 360px);

        --viz-fill-height:
            clamp(
                260px,
                50dvh,
                520px
            );
    }


    .app {

        width:
            calc(100% - 16px);

        padding:
            20px 0 40px;
    }


    .header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;
    }


    .view-tabs {

        gap:
            6px;

        padding:
            3px;
    }


    .view-tab {

        flex:
            1 1 100%;

        min-width:
            0;
    }


    .view-panel-header {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            8px;
    }


    .cross-section-toolbar {

        flex-direction:
            column;
    }


    .cross-section-axis-btn {

        width:
            100%;
    }


    .fill-edit-dialog {

        width:
            calc(100vw - 20px);

        max-width:
            none;

        margin:
            auto;
    }


    .fill-edit-toolbar {

        gap:
            6px;
    }


    .fill-mode-btn,
    .fill-history-btn {

        font-size:
            0.74rem;

        padding:
            7px 9px;
    }


    .fill-edit-history {

        margin-left:
            0;

        width:
            100%;

        justify-content:
            center;
    }


    dialog {

        width:
            calc(100vw - 20px);

        max-width:
            none;

        padding:
            18px 16px;
    }


    .onboarding-dialog {

        width:
            calc(100vw - 20px);
    }


    .form-grid {

        grid-template-columns:
            1fr;
    }


    .shape-actions {

        grid-template-columns:
            1fr;
    }


    .cell-info {

        grid-template-columns:
            1fr;
    }


    .cell-info div:last-child {

        grid-column:
            auto;
    }


    .results {

        grid-template-columns:
            1fr;
    }


    .result-card.primary {

        grid-column:
            auto;
    }


    .quick-actions {

        flex-direction:
            column;
    }


    .grid-panel,
    .visualization-panel {

        padding:
            16px;
    }


    .depth-grid {

        min-width:
            300px;

        gap:
            8px;
    }


    .depth-cell {

        min-width:
            88px;

        min-height:
            140px;
    }


    .grid-wrapper {

        padding:
            12px 12px 12px 28px;

        -webkit-overflow-scrolling:
            touch;
    }
}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }
}