/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
    --dark-1: #1d1927;
    --dark-2: #272136;
    --light-1: #eaeff3;
    --color-1: #fe5f4a;
    --color-2: #9e2e63;
    --color-3: #ff0067;
    --color-4: #9793bd;
    --light-muted-1: #fefeff;
    --light-muted-1-5: #ededef;
    --light-muted-2: #d2d2d2;
    --light-muted-3: #82818b;
    --light-muted-4: #58575e;
    --white: #ffffff;
    --dark-border: rgba(255, 255, 255, 0.12);
    --dark-hover: #292336;
    --main-padding: 20px;
    --spacing: 1.5rem;
    --grid-gap: 1.5rem;
    --container-max: 1280px;
}


/* ── Reset ──────────────────────────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ── Base ───────────────────────────────────────────────────────────────── */
body {
    font-family: 'Rubik', Arial, Helvetica, sans-serif;
    background-color: var(--light-1);
    color: var(--dark-1);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

p {
    font-size: .8rem;
}

h1 {
    font-weight: 200;
    font-size: 3rem;
}

.hero h1 {
    font-size: 4rem;
    line-height: 4rem;
}

h2 {
    font-weight: 200;
    font-size: 2.25rem;
    margin-bottom: 4px;
    line-height: 2.5rem;
}

.hero h2 {
    font-size: 1.75rem;
    line-height: 2rem;
}

.hero-section,
.page-banner {
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

h3 {
    font-weight: 400;
    font-size: 1.75rem;
    margin-bottom: 4px;
}

h4 {
    font-weight: 500;
    font-size: 1.375rem;
    margin-bottom: 4px;
}

h5 {
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 4px;
}


/* ── Anchors ────────────────────────────────────────────────────────────── */
a {
    color: var(--dark-1);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.15s;
}

a:not(.btn):hover { opacity: 0.7; }

a.color-1 { color: var(--color-1); }
a.color-2 { color: var(--color-2); }
a.color-3 { color: var(--color-3); }
a.color-4 { color: var(--color-4); }

.dark a:not(.btn),
.dark-2 a:not(.btn) { color: var(--light-muted-1); }

.container {
    margin-inline: auto;
    width: min(90vw, var(--container-max));
}

@media (min-width: 601px) {
    .container { width: min(85vw, var(--container-max)); }
}

@media (min-width: 993px) {
    .container { width: min(70vw, var(--container-max)); }
}

.test-container {
    min-height: calc(40vh - 40px);
}


/* ── Theme Surfaces ─────────────────────────────────────────────────────── */
.light {
    color: #161616;
    background: var(--light-1);
}

.white {
    background-color: #fff;
}

.dark {
    color: var(--light-muted-1);
    background: var(--dark-1);
}

.dark-h {
    color: var(--light-muted-3);
}

.dark-text,
.dark p,
body > nav {
    color: var(--light-muted-3);
}

.dark-2 {
    color: var(--light-muted-1);
    background: var(--dark-2);
}


/* ── Utilities ──────────────────────────────────────────────────────────── */
.rounded      { border-radius: 4px; }
.shadow       { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.panel-bleed  {
    width: min(calc(70vw + 200px), calc(var(--container-max) + 200px));
    margin: 0 auto;
    padding: 64px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 992px) {
    .panel-bleed {
        width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
}
.m-0     { margin: 0; }

.hoverable { transition: box-shadow 0.25s; }
.hoverable:hover {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.dark .hoverable:hover,
.dark-pattern .hoverable:hover {
    box-shadow: 0 0 20px #00000090, 0 4px 16px #00000090;
}

.mb   { margin-bottom: calc(var(--spacing) / 2); }
.mb-1 { margin-bottom: var(--spacing); }
.mb-2 { margin-bottom: calc(var(--spacing) * 2); }
.mb-3 { margin-bottom: calc(var(--spacing) * 3); }

.mt   { margin-top: calc(var(--spacing) / 2); }
.mt-1 { margin-top: var(--spacing); }
.mt-2 { margin-top: calc(var(--spacing) * 2); }
.mt-3 { margin-top: calc(var(--spacing) * 3); }

.pt   { padding-top: calc(var(--spacing) / 2); }
.pt-1 { padding-top: var(--spacing); }
.pt-2 { padding-top: calc(var(--spacing) * 2); }
.pb   { padding-bottom: calc(var(--spacing) / 2); }
.pb-1 { padding-bottom: var(--spacing); }
.pb-2 { padding-bottom: calc(var(--spacing) * 2); }
.p-1  { padding: var(--spacing); }
.p-c  { padding-top: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 3.5);}

.align-v { display: flex; align-items: center; }
.align-l { text-align: left; }
.align-r { text-align: right; }
.align-c { text-align: center; }


/* ── Grid ───────────────────────────────────────────────────────────────── */
/* 12-column CSS grid. Breakpoints:
   s — all screens (mobile-first base, < 601px)
   m — ≥ 601px  (tablet)
   l — ≥ 993px  (desktop)
   Usage: <div class="row"><div class="col s12 m6 l4">…</div></div>      */

.row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
}

.col { grid-column: auto / span 12; }

.s1  { grid-column: auto / span 1; }
.s2  { grid-column: auto / span 2; }
.s3  { grid-column: auto / span 3; }
.s4  { grid-column: auto / span 4; }
.s5  { grid-column: auto / span 5; }
.s6  { grid-column: auto / span 6; }
.s7  { grid-column: auto / span 7; }
.s8  { grid-column: auto / span 8; }
.s9  { grid-column: auto / span 9; }
.s10 { grid-column: auto / span 10; }
.s11 { grid-column: auto / span 11; }
.s12 { grid-column: auto / span 12; }

.offset-s1  { grid-column-start: 2; }
.offset-s2  { grid-column-start: 3; }
.offset-s3  { grid-column-start: 4; }
.offset-s4  { grid-column-start: 5; }
.offset-s5  { grid-column-start: 6; }
.offset-s6  { grid-column-start: 7; }
.offset-s7  { grid-column-start: 8; }
.offset-s8  { grid-column-start: 9; }
.offset-s9  { grid-column-start: 10; }
.offset-s10 { grid-column-start: 11; }
.offset-s11 { grid-column-start: 12; }

@media only screen and (min-width: 601px) {
    .m1  { grid-column: auto / span 1; }
    .m2  { grid-column: auto / span 2; }
    .m3  { grid-column: auto / span 3; }
    .m4  { grid-column: auto / span 4; }
    .m5  { grid-column: auto / span 5; }
    .m6  { grid-column: auto / span 6; }
    .m7  { grid-column: auto / span 7; }
    .m8  { grid-column: auto / span 8; }
    .m9  { grid-column: auto / span 9; }
    .m10 { grid-column: auto / span 10; }
    .m11 { grid-column: auto / span 11; }
    .m12 { grid-column: auto / span 12; }

    .offset-m1  { grid-column-start: 2; }
    .offset-m2  { grid-column-start: 3; }
    .offset-m3  { grid-column-start: 4; }
    .offset-m4  { grid-column-start: 5; }
    .offset-m5  { grid-column-start: 6; }
    .offset-m6  { grid-column-start: 7; }
    .offset-m7  { grid-column-start: 8; }
    .offset-m8  { grid-column-start: 9; }
    .offset-m9  { grid-column-start: 10; }
    .offset-m10 { grid-column-start: 11; }
    .offset-m11 { grid-column-start: 12; }
}

@media only screen and (min-width: 993px) {
    .l1  { grid-column: auto / span 1; }
    .l2  { grid-column: auto / span 2; }
    .l3  { grid-column: auto / span 3; }
    .l4  { grid-column: auto / span 4; }
    .l5  { grid-column: auto / span 5; }
    .l6  { grid-column: auto / span 6; }
    .l7  { grid-column: auto / span 7; }
    .l8  { grid-column: auto / span 8; }
    .l9  { grid-column: auto / span 9; }
    .l10 { grid-column: auto / span 10; }
    .l11 { grid-column: auto / span 11; }
    .l12 { grid-column: auto / span 12; }

    .offset-l1  { grid-column-start: 2; }
    .offset-l2  { grid-column-start: 3; }
    .offset-l3  { grid-column-start: 4; }
    .offset-l4  { grid-column-start: 5; }
    .offset-l5  { grid-column-start: 6; }
    .offset-l6  { grid-column-start: 7; }
    .offset-l7  { grid-column-start: 8; }
    .offset-l8  { grid-column-start: 9; }
    .offset-l9  { grid-column-start: 10; }
    .offset-l10 { grid-column-start: 11; }
    .offset-l11 { grid-column-start: 12; }
}



/* ── Eyebrow ────────────────────────────────────────────────────────────── */
.eyebrow {
    display: block;
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--eyebrow-color, var(--light-muted-3));
    margin-bottom: 6px;
}

.eyebrow.color-1 { --eyebrow-color: var(--color-1); }
.eyebrow.color-2 { --eyebrow-color: var(--color-2); }
.eyebrow.color-3 { --eyebrow-color: var(--color-3); }
.eyebrow.color-4 { --eyebrow-color: var(--color-4); }

.dark .eyebrow { color: var(--eyebrow-color, var(--light-muted-4)); }


/* ── Navigation ─────────────────────────────────────────────────────────── */
body > nav {
    padding: 10px 20px 7px;
    font-size: .8rem;
    display: flex;
    align-items: center;
}

.logo {
    width: 70px;
    text-align: center;
    margin-right: 10px;
}


/* ── Circular Chart ─────────────────────────────────────────────────────── */
.chart-cir {
    display: block;
    margin: 10px auto;
    max-width: 80%;
    max-height: 120px;
}

.chart-cir-bg {
    fill: none;
    stroke: var(--light-muted-1-5);
    stroke-width: 2.5;
}

.chart-cir-circle {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
    animation-play-state: paused;
}

.chart-cir.in-view .chart-cir-circle { animation-play-state: running; }

@keyframes progress {
    0% { stroke-dasharray: 0 100; }
}

.chart-cir.color-3 .chart-cir-circle { stroke: var(--color-3); }
.chart-cir.color-4  .chart-cir-circle { stroke: var(--color-4); }
.chart-cir.color-2 .chart-cir-circle { stroke: var(--color-2); }

.chart-cir-label {
    fill: var(--color-4);
    font-weight: 800;
    font-size: 0em;
    text-anchor: middle;
}

div:has(> .chart-cir-side-label) {
    display: flex;
    align-items: center;
    gap: 16px;
}

div:has(> .chart-cir-side-label) > .chart-cir {
    flex-shrink: 0;
    width: 120px;
    max-width: 120px;
    margin: 0;
}

.chart-cir-side-label p {
    font-size: .68rem;
    opacity: 0.6;
    margin-bottom: 4px;
}

.chart-cir-side-label h2 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

.dark .chart-cir-bg            { stroke: var(--dark-2); }
.dark .chart-cir-side-label p,
.dark .chart-cir-side-label h2 { color: var(--light-muted-1); }


/* ── Horizontal Bar Chart ───────────────────────────────────────────────── */
.chart-bar-group { display: flex; flex-direction: column; gap: 7px; }

.chart-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chart-bar-label {
    width: 110px;
    flex-shrink: 0;
    text-align: right;
    font-size: .72rem;
    opacity: 0.65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-bar-track {
    flex: 1;
    height: 10px;
    background: var(--light-muted-1-5);
    border-radius: 6px;
    overflow: hidden;
}

.chart-bar-fill {
    height: 100%;
    border-radius: 6px;
    width: 0;
    animation: bar-grow 0.7s ease-out both;
    animation-play-state: paused;
}

.chart-bar-group.in-view .chart-bar-fill { animation-play-state: running; }

@keyframes bar-grow {
    from { width: 0; }
    to   { width: var(--bar-width, 0%); }
}

.chart-bar-row:nth-child(2) .chart-bar-fill { animation-delay: .07s; }
.chart-bar-row:nth-child(3) .chart-bar-fill { animation-delay: .14s; }
.chart-bar-row:nth-child(4) .chart-bar-fill { animation-delay: .21s; }
.chart-bar-row:nth-child(5) .chart-bar-fill { animation-delay: .28s; }
.chart-bar-row:nth-child(6) .chart-bar-fill { animation-delay: .35s; }
.chart-bar-row:nth-child(7) .chart-bar-fill { animation-delay: .42s; }
.chart-bar-row:nth-child(8) .chart-bar-fill { animation-delay: .49s; }

.chart-bar-value {
    width: 36px;
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 700;
    text-align: right;
}

.chart-bar-fill.color-1 { background: var(--color-1); }
.chart-bar-fill.color-2 { background: var(--color-2); }
.chart-bar-fill.color-3 { background: var(--color-3); }
.chart-bar-fill.color-4  { background: var(--color-4); }

.dark .chart-bar-track { background: var(--dark-2); }


/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-group { display: flex; flex-wrap: wrap; gap: 10px; }

.btn {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 6px;
    border: none;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s, box-shadow 0.18s, padding-left 0.2s ease, padding-right 0.2s ease;
    text-align: center;
    white-space: nowrap;
    position: relative;
}

.btn:not([data-tooltip])::after {
    content: '\203A';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
}

.btn:not([data-tooltip]):hover {
    padding-left: 14px;
    padding-right: 26px;
}

.btn:not([data-tooltip]):hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.btn-white   { background-color: #fff;        color: var(--dark-1); border: 1px solid var(--light-muted-2); }
.btn-natural { background-color: var(--light-1); color: var(--dark-1); border: 1px solid var(--light-muted-2); }
.btn-grey    { background-color: #c4c4ce;     color: var(--dark-1); }
.btn-dark    { background-color: var(--dark-1); color: var(--light-muted-1); }
.btn-darker  { background-color: var(--dark-2); color: var(--light-muted-1); }
.btn-color-1 { background-color: var(--color-1); color: #fff; }
.btn-color-2 { background-color: var(--color-2); color: #fff; }
.btn-color-3 { background-color: var(--color-3); color: #fff; }
.btn-color-4 { background-color: var(--color-4); color: #fff; }

.btn-white:hover   { background-color: #fff;    opacity: 1; }
.btn-natural:hover { background-color: #d8e0e7; opacity: 1; }
.btn-grey:hover    { background-color: #aeaebb; color: var(--light-muted-1); opacity: 1; }
.btn-dark:hover    { background-color: var(--dark-hover); opacity: 1; }
.btn-darker:hover  { background-color: var(--dark-hover); opacity: 1; }
.btn-color-1:hover { background-color: #ff7a69; opacity: 1; }
.btn-color-2:hover { background-color: #b5356f; opacity: 1; }
.btn-color-3:hover { background-color: #ff338c; opacity: 1; }
.btn-color-4:hover { background-color: #aaa7cc; opacity: 1; }

.dark .btn-white   { border-color: #fff; }
.dark .btn-natural { border-color: var(--light-1); }
.dark .btn-dark    { border: 1px solid var(--dark-border); }
.dark .btn-darker  { border: 1px solid var(--dark-border); }


/* ── Dot Labels ─────────────────────────────────────────────────────────── */
.dot-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    line-height: 1;
}

.dot-label::before {
    content: '';
    display: inline-block;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--dot-color, var(--light-muted-3));
}

.dot-label.dot-s         { font-size: .7rem; }
.dot-label.dot-s::before { width: 7px;  height: 7px; }
.dot-label.dot-m         { font-size: .82rem; }
.dot-label.dot-m::before { width: 9px;  height: 9px; }
.dot-label.dot-l         { font-size: .95rem; }
.dot-label.dot-l::before { width: 12px; height: 12px; }

.dot-label.color-1 { --dot-color: var(--color-1); }
.dot-label.color-2 { --dot-color: var(--color-2); }
.dot-label.color-3 { --dot-color: var(--color-3); }
.dot-label.color-4  { --dot-color: var(--color-4); }
.dot-label.muted   { --dot-color: var(--light-muted-3); }


/* ── Lists ──────────────────────────────────────────────────────────────── */
.list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: .8rem;
}

.list li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 6px;
    line-height: 1.5;
}

.list li::before {
    content: '–';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--light-muted-3);
}

.list-check li {
    padding-left: 1.5em;
}

.list-check li::before {
    content: '';
    width: 15px;
    height: 15px;
    background-color: var(--check-color, var(--dark-1));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpolyline points='1,4 4,7 9,1' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.list-check.color-1 { --check-color: var(--color-1); }
.list-check.color-2 { --check-color: var(--color-2); }
.list-check.color-3 { --check-color: var(--color-3); }
.list-check.color-4 { --check-color: var(--color-4); }

.dark .list:not(.list-check) li::before { color: var(--light-muted-4); }

.dark .list-check:not(.color-1):not(.color-2):not(.color-3):not(.color-4) li::before {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpolyline points='1,4 4,7 9,1' fill='none' stroke='%231d1927' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ── Line Card ──────────────────────────────────────────────────────────── */
.line-card {
    position: relative;
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px 14px 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    border: 1px solid var(--light-muted-1-5);
}

.line-card::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 12px;
    bottom: 12px;
    width: 5px;
    border-radius: 5px;
    background: var(--line-color, var(--light-muted-2));
}

.line-card + .line-card { margin-top: 10px; }

.line-card.color-1 { --line-color: var(--color-1); }
.line-card.color-2 { --line-color: var(--color-2); }
.line-card.color-3 { --line-color: var(--color-3); }
.line-card.color-4  { --line-color: var(--color-4); }

.dark .line-card {
    background: var(--dark-2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border-color: var(--dark-1);
}


/* ── Forms ──────────────────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

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

.form-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--dark-1);
    margin-bottom: 6px;
}

.form-control {
    display: block;
    width: 100%;
    padding: 8px 0 12px;
    font-size: .8rem;
    font-family: inherit;
    color: var(--dark-1);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--light-muted-2);
    transition: border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.form-control::placeholder { color: var(--light-muted-3); }

.form-control:focus {
    outline: none;
    border-bottom-color: var(--dark-1);
}

textarea.form-control {
    min-height: 88px;
    resize: vertical;
    border: 1px solid var(--light-muted-2);
    border-radius: 4px;
    padding: 8px 10px;
}

textarea.form-control:focus {
    border-color: var(--dark-1);
    box-shadow: 0 0 0 3px rgba(29, 25, 39, 0.08);
}

.single-select { position: relative; }

.single-select-value {
    font-size: .8rem;
    color: var(--dark-1);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    cursor: pointer;
}

.form-check-input {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    accent-color: var(--dark-1);
    cursor: pointer;
    border: 1px solid var(--light-muted-2);
    background: transparent;
}

.form-check-label { font-size: .8rem; color: var(--dark-1); cursor: pointer; }


/* ── Chip Select ────────────────────────────────────────────────────────── */
.chip-select { position: relative; }

.chip-select-box {
    border: none;
    border-bottom: 1px solid var(--light-muted-2);
    padding: 8px 0;
    cursor: pointer;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    transition: border-color 0.15s;
    font-size: .8rem;
}

.chip-select-box:focus-within {
    border-bottom-color: var(--dark-1);
}

.chip-select-box .chip,
.chip-input-box .chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--dark-1);
    color: #fff;
    padding: 3px 8px 3px 10px;
    border-radius: 3px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
}

.chip-select-box .chip-remove,
.chip-input-box .chip-remove {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    opacity: 0.65;
}

.chip-select-box .chip-remove:hover,
.chip-input-box .chip-remove:hover { opacity: 1; }

.chip-select-placeholder { color: var(--light-muted-3); font-size: .8rem; }

.chip-select-arrow {
    margin-left: auto;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2382818b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0;
}

.chip-select-dropdown {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--light-muted-2);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
}

.chip-select-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: .8rem;
    color: var(--dark-1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chip-select-option:hover                     { background: var(--light-1); }
.chip-select-option.is-selected               { background: rgba(29, 25, 39, 0.06); font-weight: 600; color: var(--dark-1); }
.chip-select-option.is-selected::before       { content: '\2714'; font-size: .72rem; color: var(--dark-1); }
.chip-select-option:not(.is-selected)::before { content: ''; display: inline-block; width: 12px; }


/* ── Forms — Dark overrides ─────────────────────────────────────────────── */
.dark .form-label { color: var(--light-muted-2); }

.dark .form-control {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: var(--light-muted-1);
}

.dark .form-control::placeholder { color: var(--light-muted-3); }

.dark .form-control:focus {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.dark textarea.form-control {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark textarea.form-control:focus {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05);
}

.dark .single-select-value { color: var(--light-muted-1); }

.dark .form-check-label { color: var(--light-muted-2); }
.dark .form-check-input { accent-color: var(--light-muted-2); }

.dark .chip-select-box {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark .chip-select-box:focus-within {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.dark .chip-select-box .chip,
.dark .chip-input-box .chip {
    background: rgba(255, 255, 255, 0.1);
    color: var(--light-muted-1);
}

.dark .chip-select-box .chip-remove,
.dark .chip-input-box .chip-remove { color: var(--light-muted-2); }
.dark .chip-select-placeholder      { color: var(--light-muted-3); }

.dark .chip-select-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d2d2d2'/%3E%3C/svg%3E");
}

.dark .chip-select-dropdown {
    background: var(--dark-2);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark .chip-select-option             { color: var(--light-muted-2); }
.dark .chip-select-option:hover       { background: rgba(255, 255, 255, 0.05); }
.dark .chip-select-option.is-selected {
    background: rgba(255, 255, 255, 0.08);
    color: var(--light-muted-1);
    font-weight: 600;
}
.dark .chip-select-option.is-selected::before { color: var(--light-muted-1); }


/* ── Chip Input ─────────────────────────────────────────────────────────── */
.chip-input { position: relative; }

.chip-input-box {
    border: none;
    border-bottom: 1px solid var(--light-muted-2);
    padding: 8px 0;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    transition: border-color 0.15s;
    cursor: text;
}

.chip-input-box:focus-within { border-bottom-color: var(--dark-1); }

.chip-input-field {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    min-width: 80px;
    height: 20px;
    font-size: .8rem;
    font-family: inherit;
    color: var(--dark-1);
    padding: 0;
}

.chip-input-field::placeholder { color: var(--light-muted-3); }

.dark .chip-input-box {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark .chip-input-box:focus-within { border-bottom-color: rgba(255, 255, 255, 0.3); }

.dark .chip-input-field { color: var(--light-muted-1); }


/* ── Type-in Select ─────────────────────────────────────────────────────── */
.typeahead { position: relative; }

.typeahead-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--dark-1);
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
}

.typeahead-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: .8rem;
    color: var(--dark-1);
}

.typeahead-option:hover,
.typeahead-option.is-active { background: var(--light-muted-1-5); }

.typeahead-sub {
    display: block;
    font-size: .7rem;
    color: var(--light-muted-3);
    margin-top: 1px;
}

/* dark overrides */
.dark .typeahead-dropdown {
    background: var(--dark-2);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dark .typeahead-option               { color: var(--light-muted-2); }
.dark .typeahead-option:hover,
.dark .typeahead-option.is-active     { background: rgba(255, 255, 255, 0.07); }
.dark .typeahead-sub                  { color: var(--light-muted-4); }


/* ── DataTables — Shared ────────────────────────────────────────────────── */
.dark-dt table.dataTable,
.light-dt table.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 3px !important;
}

.dark-dt .dt-scroll-body,
.light-dt .dt-scroll-body {
    border-bottom: none !important;
}

.dark-dt table.dataTable thead th,
.light-dt table.dataTable thead th {
    padding: 10px 12px;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .02em;
    text-align: left !important;
    border: none !important;
}

.dark-dt table.dataTable tbody td,
.light-dt table.dataTable tbody td {
    padding: 9px 12px;
    font-size: .8rem;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.dark-dt table.dataTable tbody td:first-child,
.light-dt table.dataTable tbody td:first-child { border-radius: 6px 0 0 6px; }

.dark-dt table.dataTable tbody td:last-child,
.light-dt table.dataTable tbody td:last-child   { border-radius: 0 6px 6px 0; }

.dark-dt .dt-container,
.light-dt .dt-container { font-size: .8rem; }

.dark-dt .dt-layout-row,
.light-dt .dt-layout-row { margin: 10px 0; }

.dark-dt .dt-search input,
.dark-dt .dt-length select,
.light-dt .dt-search input,
.light-dt .dt-length select {
    border-radius: 3px;
    padding: 4px 8px;
    font-size: .8rem;
    font-family: inherit;
}

.dark-dt .dt-info,
.light-dt .dt-info { font-size: .75rem; }

.dark-dt .dt-paging .dt-paging-button,
.light-dt .dt-paging .dt-paging-button {
    border-radius: 3px;
    padding: 3px 8px;
    margin: 0 2px;
    cursor: pointer;
    font-size: .8rem;
    transition: all 0.15s;
}


/* ── DataTables — Dark ──────────────────────────────────────────────────── */
.dark-dt table.dataTable { color: var(--light-muted-3); }

.dark-dt table.dataTable thead th {
    background: var(--dark-2);
    color: var(--light-muted-1);
}

.dark-dt table.dataTable > tbody > tr       { background: rgba(255, 255, 255, 0.05); }
.dark-dt table.dataTable > tbody > tr.odd   { background: rgba(0, 0, 0, 0.2); }
.dark-dt table.dataTable > tbody > tr:hover { background: rgba(255, 255, 255, 0.08) !important; }

.dark-dt .dt-search input,
.dark-dt .dt-length select {
    background: var(--dark-1);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--light-muted-1);
}

.dark-dt .dt-search input:focus,
.dark-dt .dt-length select:focus {
    outline: none;
    border-color: var(--color-4);
}

.dark-dt .dt-info,
.dark-dt .dt-search label,
.dark-dt .dt-length label { color: var(--light-muted-3); }

.dark-dt .dt-paging .dt-paging-button,
.dark-dt .dt-paging .dt-paging-button:hover,
.dark-dt .dt-paging .dt-paging-button.current,
.dark-dt .dt-paging .dt-paging-button.current:hover,
.dark-dt .dt-paging .dt-paging-button.disabled,
.dark-dt .dt-paging .dt-paging-button.disabled:hover,
.dark-dt .dt-paging .dt-paging-button:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.dark-dt .dt-paging .dt-paging-button                       { color: var(--light-muted-3) !important; }
.dark-dt .dt-paging .dt-paging-button:hover:not(.disabled)  { background: rgba(255, 255, 255, 0.08) !important; color: var(--light-muted-1) !important; }
.dark-dt .dt-paging .dt-paging-button.current,
.dark-dt .dt-paging .dt-paging-button.current:hover         { color: var(--light-muted-1) !important; font-weight: 700; }
.dark-dt .dt-paging .dt-paging-button.disabled,
.dark-dt .dt-paging .dt-paging-button.disabled:hover        { opacity: 0.25; cursor: default; }


/* ── DataTables — Light ─────────────────────────────────────────────────── */
.light-dt table.dataTable { color: var(--dark-1); }

.light-dt table.dataTable thead th {
    background: transparent;
    color: var(--dark-1);
}

.light-dt table.dataTable > tbody > tr       { background: var(--light-1); }
.light-dt table.dataTable > tbody > tr.odd   { background: var(--light-muted-1-5); }
.light-dt table.dataTable > tbody > tr:hover { background: var(--light-muted-1-5) !important; }

.light-dt .dt-search input,
.light-dt .dt-length select {
    background: #fff;
    border: 1px solid var(--light-muted-2) !important;
    color: var(--dark-1);
}

.light-dt .dt-search input:focus,
.light-dt .dt-length select:focus {
    outline: none;
    border-color: var(--dark-1);
}

.light-dt .dt-info,
.light-dt .dt-search label,
.light-dt .dt-length label { color: var(--light-muted-3); }

.light-dt .dt-paging .dt-paging-button,
.light-dt .dt-paging .dt-paging-button:hover,
.light-dt .dt-paging .dt-paging-button.current,
.light-dt .dt-paging .dt-paging-button.current:hover,
.light-dt .dt-paging .dt-paging-button.disabled,
.light-dt .dt-paging .dt-paging-button.disabled:hover,
.light-dt .dt-paging .dt-paging-button:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.light-dt .dt-paging .dt-paging-button                       { color: var(--light-muted-3) !important; }
.light-dt .dt-paging .dt-paging-button:hover:not(.disabled)  { background: rgba(0, 0, 0, 0.05) !important; color: var(--dark-1) !important; }
.light-dt .dt-paging .dt-paging-button.current,
.light-dt .dt-paging .dt-paging-button.current:hover         { color: var(--dark-1) !important; font-weight: 700; }
.light-dt .dt-paging .dt-paging-button.disabled,
.light-dt .dt-paging .dt-paging-button.disabled:hover        { opacity: 0.35; cursor: default; }


/* ── Toast ──────────────────────────────────────────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    width: 320px;
    z-index: 10001;
    pointer-events: none;
}

.toast-wrapper {
    overflow: hidden;
    max-height: 200px;
    margin-top: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10), 0 8px 28px rgba(0, 0, 0, 0.18), 0 18px 44px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
    transition: max-height 0.28s ease 0.12s, margin-top 0.28s ease 0.12s, box-shadow 0.2s ease;
}

.toast-wrapper:first-child { margin-top: 0; }

.toast-collapsing {
    max-height: 0 !important;
    margin-top: 0 !important;
    box-shadow: none;
}

.toast-card {
    margin: 0;
    box-shadow: none;
    animation: toast-in 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-collapsing .toast-card {
    opacity: 0;
    transform: translateY(6px);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.modal-box {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 12px 40px rgba(0, 0, 0, 0.22), 0 24px 60px rgba(0, 0, 0, 0.14);
    animation: modal-in 0.25s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--dark-1);
    font-size: 15px;
    font-weight: 700;
    opacity: 0.45;
    transition: opacity 0.15s, background-color 0.15s;
}

.modal-close:hover { opacity: 1; background-color: var(--light-muted-1-5); }

.modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 6px;
    padding-right: 28px;
}

.modal-subtitle {
    font-size: .78rem;
    color: var(--light-muted-3);
    margin-bottom: 20px;
}

.modal-divider {
    border: none;
    border-top: 1px solid var(--light-muted-1-5);
    margin: 20px 0;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 24px;
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}


/* ── Tabs ───────────────────────────────────────────────────────────────── */
.tab-nav { display: flex; }

.tab-btn {
    position: relative;
    background: none;
    border: none;
    padding: 10px 0;
    margin-right: 24px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 500;
    color: var(--light-muted-3);
    cursor: pointer;
    white-space: nowrap;
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: var(--light-muted-2);
    transition: width 0.2s ease;
}

.tab-btn:hover:not(.active)::after { width: 100%; }
.tab-btn.active                    { color: var(--dark-1); font-weight: 600; }
.tab-btn.active::after             { width: 100%; background: var(--dark-1); transition: none; }

.tab-content {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 8px;
}

.dark .tab-btn               { color: var(--light-muted-3); }
.dark .tab-btn::after        { background: var(--light-muted-4); }
.dark .tab-btn.active        { color: var(--light-muted-1); }
.dark .tab-btn.active::after { background: var(--light-muted-1); }
.dark .tab-content           { background: var(--dark-2); }


/* ── Spinner ────────────────────────────────────────────────────────────── */
.spinner {
    display: inline-block;
    width: 48px;
    height: 48px;
    animation: spinner-rotate 1.4s linear infinite;
}

.spinner.sm  { width: 28px; height: 28px; }
.spinner.lg  { width: 72px; height: 72px; }
.spinner svg { display: block; width: 100%; height: 100%; }

.spinner-track {
    fill: none;
    stroke: var(--light-muted-1-5);
    stroke-width: 4;
}

.spinner-arc {
    fill: none;
    stroke: var(--light-muted-3);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 1, 126;
    stroke-dashoffset: 0;
    animation: spinner-dash 1.4s ease-in-out infinite;
}

.spinner.default .spinner-arc { stroke: var(--dark-1); }
.spinner.fff     .spinner-arc { stroke: #ffffff; }
.spinner.color-1 .spinner-arc { stroke: var(--color-1); }
.spinner.color-2 .spinner-arc { stroke: var(--color-2); }
.spinner.color-3 .spinner-arc { stroke: var(--color-3); }
.spinner.color-4  .spinner-arc { stroke: var(--color-4); }

.dark .spinner-track { stroke: var(--dark-2); }

@keyframes spinner-rotate {
    100% { transform: rotate(360deg); }
}

@keyframes spinner-dash {
    0%   { stroke-dasharray:  1, 126; stroke-dashoffset:    0; }
    50%  { stroke-dasharray: 90, 126; stroke-dashoffset:  -32; }
    100% { stroke-dasharray: 90, 126; stroke-dashoffset: -116; }
}


/* ── Badge ──────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--light-muted-1-5);
    color: var(--dark-1);
}

.dark .badge { background: var(--dark-2); color: var(--light-muted-2); }

.badge.color-1 { background: var(--color-1); color: #fff; }
.badge.color-2 { background: var(--color-2); color: #fff; }
.badge.color-3 { background: var(--color-3); color: #fff; }
.badge.color-4  { background: var(--color-4);  color: #fff; }
.badge.muted   { background: var(--light-muted-2); color: var(--dark-1); }


/* ── Tooltip ────────────────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--dark-1);
    color: var(--light-muted-1);
    padding: 4px 9px;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
}

[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--dark-1);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before { opacity: 1; }

.dark [data-tooltip]::after  { background: var(--light-muted-1-5); color: var(--dark-1); }
.dark [data-tooltip]::before { border-top-color: var(--light-muted-1-5); }


/* ── Stat Card ──────────────────────────────────────────────────────────── */
.stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    border: 1px solid var(--light-muted-1-5);
}

.stat-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--light-muted-3);
    margin-bottom: 8px;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--dark-1);
    margin-bottom: 8px;
}

.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 600;
}

.stat-trend.up   { color: var(--color-4); }
.stat-trend.down { color: var(--color-3); }

.dark .stat-card  { background: var(--dark-2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); border-color: var(--dark-1); }
.dark .stat-value { color: var(--light-muted-1); }


/* ── Toggle ─────────────────────────────────────────────────────────────── */
.form-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 7px;
}

.toggle-input { display: none; }

.toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--light-muted-2);
    border-radius: 20px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.toggle-track::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* To override the checked colour, set --toggle-color on the .form-toggle:
   .my-toggle { --toggle-color: var(--color-4); }          (light)
   .dark .my-toggle { --toggle-color: var(--color-4); }    (dark) */
.toggle-input:checked + .toggle-track           { background: var(--toggle-color, var(--color-4)); }
.toggle-input:checked + .toggle-track::after    { transform: translateX(16px); }
.toggle-input:disabled + .toggle-track          { opacity: 0.4; cursor: not-allowed; }

.dark .toggle-track                             { background: var(--dark-2); }
.dark .toggle-input:checked + .toggle-track     { background: var(--toggle-color, var(--color-4)); }


/* ── Date Input ─────────────────────────────────────────────────────────── */
input[type="date"].form-control,
input[type="time"].form-control { cursor: pointer; }

input[type="date"].form-control::-webkit-calendar-picker-indicator,
input[type="time"].form-control::-webkit-calendar-picker-indicator {
    opacity: 0.45;
    cursor: pointer;
}

.dark input[type="date"].form-control::-webkit-calendar-picker-indicator,
.dark input[type="time"].form-control::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.5;
}


/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-item { display: flex; align-items: center; font-size: .78rem; }

.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    margin: 0 8px;
    color: var(--light-muted-3);
    font-weight: 300;
}

.breadcrumb-item a {
    color: var(--light-muted-3);
    text-decoration: none;
    transition: color 0.15s;
}

.breadcrumb-item a:hover            { color: var(--dark-1); }
.breadcrumb-item.active             { color: var(--dark-1); font-weight: 600; }

.dark .breadcrumb-item a,
.dark-2 .breadcrumb-item a            { color: var(--light-muted-4); }
.dark .breadcrumb-item a:hover,
.dark-2 .breadcrumb-item a:hover      { color: var(--light-muted-1); }
.dark .breadcrumb-item.active,
.dark-2 .breadcrumb-item.active       { color: var(--light-muted-1); }
.dark .breadcrumb-item + .breadcrumb-item::before,
.dark-2 .breadcrumb-item + .breadcrumb-item::before { color: var(--light-muted-4); }


/* ── Stepper ────────────────────────────────────────────────────────────── */
.stepper { display: flex; align-items: flex-start; --stepper-color: var(--color-4); }
.stepper.color-1 { --stepper-color: var(--color-1); }
.stepper.color-2 { --stepper-color: var(--color-2); }
.stepper.color-3 { --stepper-color: var(--color-3); }
.stepper.color-5 { --stepper-color: var(--color-5); }
.stepper.color-6 { --stepper-color: var(--color-6); }

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 13px;
    left: calc(50% + 16px);
    right: calc(-50% + 16px);
    height: 2px;
    background: var(--light-muted-2);
}

.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--light-muted-2);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--light-muted-3);
    position: relative;
    z-index: 1;
}

.step-label {
    font-size: .68rem;
    margin-top: 7px;
    color: var(--light-muted-3);
    text-align: center;
    line-height: 1.3;
}

.step.is-complete:not(:last-child)::after   { background: var(--stepper-color); }
.step.is-complete .step-dot                 { background: var(--stepper-color); border-color: var(--stepper-color); color: #fff; }
.step.is-active .step-dot                   { background: var(--dark-1); border-color: var(--dark-1); color: #fff; }
.step.is-active .step-label                 { color: var(--dark-1); font-weight: 600; }

.dark .step-dot                             { background: var(--dark-2); border-color: var(--dark-2); color: var(--light-muted-3); }
.dark .step:not(:last-child)::after         { background: var(--dark-2); }
.dark .step-label                           { color: var(--light-muted-4); }
.dark .step.is-complete:not(:last-child)::after { background: var(--stepper-color); }
.dark .step.is-complete .step-dot           { background: var(--stepper-color); border-color: var(--stepper-color); color: #fff; }
.dark .step.is-active .step-dot             { background: var(--light-muted-1); border-color: var(--light-muted-1); color: var(--dark-1); }
.dark .step.is-active .step-label           { color: var(--light-muted-1); }


/* ── Accordion ──────────────────────────────────────────────────────────── */
.accordion {
    border: 1px solid var(--light-muted-2);
    border-radius: 6px;
    overflow: hidden;
}

.accordion-item + .accordion-item { border-top: 1px solid var(--light-muted-2); }

.accordion-trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 14px 16px;
    text-align: left;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--dark-1);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.15s;
}

.accordion-trigger:hover { background: var(--light-muted-1-5); }

.accordion-icon {
    font-size: .75rem;
    opacity: 0.45;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); }

/* grid-template-rows trick: smooth height animation without fixed max-height */
.accordion-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
}

.accordion-body.is-open { grid-template-rows: 1fr; }

.accordion-body > div { overflow: hidden; }

.accordion-body-inner {
    padding: 0 16px 14px;
    font-size: .8rem;
    color: var(--light-muted-4);
    line-height: 1.6;
}

.dark .accordion                              { border-color: rgba(255, 255, 255, 0.1); }
.dark .accordion-item + .accordion-item       { border-color: rgba(255, 255, 255, 0.1); }
.dark .accordion-trigger                      { color: var(--light-muted-2); }
.dark .accordion-trigger:hover                { background: rgba(255, 255, 255, 0.05); }
.dark .accordion-body-inner                   { color: var(--light-muted-3); }


/* ── Skeleton ───────────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}

.skeleton {
    background: linear-gradient(90deg,
        var(--light-muted-2)   25%,
        var(--light-muted-1-5) 50%,
        var(--light-muted-2)   75%
    );
    background-size: 1200px 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    border-radius: 4px;
    display: block;
}

.dark .skeleton {
    background: linear-gradient(90deg,
        var(--dark-2)     25%,
        var(--dark-hover) 50%,
        var(--dark-2)     75%
    );
    background-size: 1200px 100%;
}

.skeleton-text   { height: 12px; margin-bottom: 8px; }
.skeleton-h      { height: 20px; margin-bottom: 12px; }
.skeleton-rect   { border-radius: 6px; }
.skeleton-circle { border-radius: 50%; }


/* ── Drawer ─────────────────────────────────────────────────────────────── */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    justify-content: flex-end;
    z-index: 10000;
}

@keyframes drawer-in {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.drawer {
    width: 420px;
    max-width: 90vw;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 32px rgba(0, 0, 0, 0.18);
    animation: drawer-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.drawer-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--light-muted-1-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.drawer-title { font-size: 1rem; font-weight: 700; color: var(--dark-1); }

.drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--dark-1);
    font-size: 15px;
    font-weight: 700;
    opacity: 0.45;
    transition: opacity 0.15s, background-color 0.15s;
}

.drawer-close:hover { opacity: 1; background-color: var(--light-muted-1-5); }

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--light-muted-4);
}

.drawer-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--light-muted-1-5);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
}