/* ==========================================================================
   x3fw design system
   Mobile first. One scale for space, one for type, one accent.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
    /* Base colour, plus the opaque surfaces used only where backdrop-filter
       is unavailable and the glass has to fall back to something solid. */
    --bg:           #0b0b0d;
    --surface:      #141417;
    --surface-sunk: #0e0e11;

    /* Text */
    --fg:            #ececee;
    --fg-muted:      #9d9da6;
    --fg-subtle:     #6e6e78;

    /* Accent: one restrained purple, used for state and the primary action */
    --accent:        #4a13fd;
    --accent-hover:  #5a28fd;
    --accent-press:  #501bff;
    --accent-fg:     #0b0b0d;
    --accent-tint:   rgba(139, 124, 232, 0.12);
    --accent-line:   rgba(139, 124, 232, 0.42);

    /* Semantic */
    --danger:        #e5646b;
    --danger-tint:   rgba(229, 100, 107, 0.10);
    --danger-line:   rgba(229, 100, 107, 0.32);
    --warn:          #dda853;
    --warn-tint:     rgba(221, 168, 83, 0.10);
    --warn-line:     rgba(221, 168, 83, 0.30);
    --ok:            #5aab72;

    /* Type */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            Helvetica, Arial, sans-serif;
    --fs-xs:   11px;
    --fs-sm:   12px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   17px;
    --fs-xl:   21px;

    /* Space */
    --s-1:  4px;
    --s-2:  8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 44px;

    /* Radius */
    --r-xs:  6px;
    --r-sm:  8px;
    --r-md: 11px;
    --r-lg: 14px;
    --r-pill: 999px;

    /* Motion. Short and functional, nothing decorative. */
    --t-fast: 120ms;
    --t-base: 180ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Glass material.
       One recipe, four intensities. Blur stays moderate on purpose: heavy
       blur erases the structure the edge lens needs in order to bend
       anything, and the result stops reading as glass and starts reading as
       fog. Saturation lifts the colour the ambient field puts behind it. */
    --glass-blur: 16px;
    --glass-sat: 135%;

    /* Dark mode glass is smoked, not milky. The body of the material is a dark
       translucent tint that lets the field colour through and keeps text at
       full contrast; the light comes from the rim and the sheen instead. */
    --glass-bg:      rgba(14, 14, 20, 0.58);
    --glass-bg-sunk: rgba(10, 10, 15, 0.50);

    /* The specular rim. Light comes from the upper left, so the leading edge
       catches it, the trailing edge only picks up a faint bounce. */
    --glass-rim: linear-gradient(145deg,
        rgba(255, 255, 255, 0.50) 0%,
        rgba(255, 255, 255, 0.13) 22%,
        rgba(255, 255, 255, 0.03) 46%,
        rgba(255, 255, 255, 0.02) 62%,
        rgba(255, 255, 255, 0.18) 100%);

    --glass-sheen: radial-gradient(125% 85% at 32% -25%,
        rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0) 62%);

    /* Divider inside a glass surface. An opaque grey line would read as a
       seam in something translucent. */
    --hairline: rgba(255, 255, 255, 0.09);

    --glass-lift:  0 14px 34px -16px rgba(0, 0, 0, 0.72);
    --glass-lift-high: 0 28px 68px -22px rgba(0, 0, 0, 0.80);

    /* Layout */
    --page-max: 720px;
    --gutter: 16px;
    --header-h: 56px;
    --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
    :root {
        --gutter: 28px;
        --header-h: 64px;
    }
}

/* --- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    /* The base colour lives here so the ambient canvas at z-index -1 can sit
       above it while the page content stays above the canvas. */
    background: var(--bg);
    color-scheme: dark;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100dvh;
    background: transparent;
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.5;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    overscroll-behavior-y: none;
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
}

button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent-tint); }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --- Ambient field ------------------------------------------------------ */
/* The WebGL canvas sits behind every glass surface so the material has colour
   and movement to refract. The gradient underneath is the fallback for a
   browser or device where WebGL never starts. */

#field {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(70% 55% at 18% 12%, #221a45 0%, rgba(34, 26, 69, 0) 62%),
        radial-gradient(65% 55% at 88% 82%, #131c3c 0%, rgba(19, 28, 60, 0) 60%),
        radial-gradient(55% 45% at 52% 48%, #1d1339 0%, rgba(29, 19, 57, 0) 65%),
        var(--bg);
}

/* Fine grain disabled to prevent CPU SVG feTurbulence rasterization lag during scroll. */
.grain {
    display: none;
}

/* --- Glass material ----------------------------------------------------- */

.glass {
    position: relative;
    background-color: rgba(18, 18, 26, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.09);
    background-image: var(--glass-sheen);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.28),
        var(--glass-lift);
    transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}

.glass-bar {
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    background-color: var(--glass-bg);
}

/* Interactive surfaces light up along the rim on hover, the way a real bevel
   does when it turns towards a light. */
.glass-interactive:hover { border-color: rgba(255, 255, 255, 0.22); }

.glass-sunk { background-color: rgba(10, 10, 15, 0.72); }

.glass-deep {
    background-color: rgba(16, 16, 24, 0.92);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.34),
        var(--glass-lift-high);
}

/* Without backdrop-filter the surfaces would be near invisible, so fall back
   to solid panels that still respect the palette. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background-color: var(--surface); }
    .glass-sunk { background-color: var(--surface-sunk); }
    .model[aria-pressed="true"] { background-color: #241f42; }
}

/* --- Loading screen ----------------------------------------------------- */
/* Visible only while fonts and the scooter images are still resolving.
   Two properties animate, opacity and transform, so it stays cheap on a
   low-end phone. */

.boot {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    gap: var(--s-5);
    /* Same colours the ambient field settles into, so handing over from the
       loader to the page is a fade rather than a flash. */
    background:
        radial-gradient(70% 55% at 18% 12%, #221a45 0%, rgba(34, 26, 69, 0) 62%),
        radial-gradient(65% 55% at 88% 82%, #131c3c 0%, rgba(19, 28, 60, 0) 60%),
        var(--bg);
    transition: opacity 220ms var(--ease);
}

.boot[data-done="1"] { opacity: 0; pointer-events: none; }

.boot-inner {
    display: grid;
    justify-items: center;
    gap: var(--s-5);
}

.boot-mark {
    width: 52px;
    height: 52px;
    object-fit: contain;
    opacity: 0.9;
    animation: boot-breathe 1.6s var(--ease) infinite;
}

.boot-track {
    width: 132px;
    height: 2px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}

.boot-track > i {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    animation: boot-slide 1.1s var(--ease) infinite;
}

@keyframes boot-breathe {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

@keyframes boot-slide {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(360%); }
}

/* --- Header ------------------------------------------------------------- */

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    padding: 0 var(--gutter);
    padding-top: env(safe-area-inset-top, 0px);
}

/* A full width bar wants light along its bottom edge, not a frame around all
   four sides, so the rim is replaced by a single hairline. */
.glass-bar {
    /* A nav bar sits over moving content, so it frosts harder than a panel:
       enough that what slides underneath reads as light and colour rather than
       as ghosted text. */
    --glass-blur: 26px;
    background-color: rgba(11, 11, 16, 0.66);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(255, 255, 255, 0.07),
        0 10px 30px -20px rgba(0, 0, 0, 0.9);
}

.glass-bar::after { display: none; }

.header-inner {
    max-width: var(--page-max);
    height: var(--header-h);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.brand-mark { width: 26px; height: 26px; object-fit: contain; flex: none; }

.brand-name {
    font-size: var(--fs-md);
    font-weight: 650;
    letter-spacing: -0.02em;
}

.brand-tag {
    display: none;
    font-size: var(--fs-sm);
    color: var(--fg-subtle);
    padding-left: var(--s-3);
    margin-left: var(--s-1);
    border-left: 1px solid var(--hairline);
}

@media (min-width: 560px) { .brand-tag { display: block; } }

.header-spacer { flex: 1 1 auto; }

/* --- Language switch ---------------------------------------------------- */

.lang {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--r-sm);
}

.lang-btn {
    min-width: 38px;
    height: 30px;
    padding: 0 var(--s-2);
    border-radius: var(--r-xs);
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--fg-subtle);
    transition: color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}

.lang-btn:hover { color: var(--fg-muted); }

.lang-btn[aria-pressed="true"] {
    color: var(--fg);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

/* --- Page shell --------------------------------------------------------- */

.page {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--s-5) var(--gutter) calc(var(--s-8) + var(--safe-b));
}

@media (min-width: 768px) {
    .page { padding-top: var(--s-7); }
}

/* --- Tabs --------------------------------------------------------------- */

.tabs {
    display: flex;
    gap: var(--s-5);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: var(--s-6);
}

.tab {
    position: relative;
    height: 40px;
    padding: 0 2px;
    font-size: var(--fs-base);
    font-weight: 550;
    color: var(--fg-subtle);
    transition: color var(--t-fast) var(--ease);
}

.tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}

.tab:hover { color: var(--fg-muted); }

.tab[aria-selected="true"] { color: var(--fg); }
.tab[aria-selected="true"]::after { opacity: 1; }

/* --- Section scaffolding ------------------------------------------------ */

.step { margin-bottom: var(--s-6); }

.step-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}

.step-index {
    font-size: var(--fs-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fg-subtle);
    letter-spacing: 0.08em;
}

.step-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--fg-muted);
}

/* --- Scooter picker ----------------------------------------------------- */

.models {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
}

@media (min-width: 620px) {
    .models { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.model {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-3) var(--s-2);
    border-radius: var(--r-lg);
    text-align: left;
    transition: background-color var(--t-base) var(--ease),
                box-shadow var(--t-base) var(--ease),
                transform var(--t-fast) var(--ease);
}

.model:active:not(:disabled) { transform: scale(0.985); }

/* Selection tints the glass itself and warms its rim, rather than drawing a
   frame around it. */
.model[aria-pressed="true"] {
    background-color: rgba(53, 45, 102, 0.58);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 -1px 0 rgba(0, 0, 0, 0.26),
        0 0 0 1px rgba(139, 124, 232, 0.30),
        0 16px 40px -18px rgba(93, 76, 214, 0.55);
}

.model[aria-pressed="true"]::after {
    opacity: 1;
    background: linear-gradient(145deg,
        rgba(214, 205, 255, 0.75) 0%,
        rgba(160, 145, 240, 0.20) 24%,
        rgba(255, 255, 255, 0.03) 52%,
        rgba(178, 165, 246, 0.28) 100%);
}

.model:disabled { opacity: 0.34; }

.model-figure {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    overflow: hidden;
}

.model-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--t-base) var(--ease);
}

.model[aria-pressed="true"] .model-figure img { transform: scale(1.04); }

.model-name {
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--t-fast) var(--ease);
}

.model[aria-pressed="true"] .model-name { color: var(--fg); }

.model-check {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(93, 76, 214, 0.6);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.model[aria-pressed="true"] .model-check { opacity: 1; transform: scale(1); }

.model-check svg { width: 10px; height: 10px; stroke: var(--accent-fg); stroke-width: 2.6; fill: none; }

.model-soon {
    position: absolute;
    top: var(--s-2);
    left: var(--s-2);
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    background: rgba(10, 10, 13, 0.55);
    border: 1px solid var(--hairline);
    border-radius: var(--r-xs);
}

/* --- Segmented control -------------------------------------------------- */

.segments {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-md);
}

.segment {
    height: 38px;
    padding: 0 var(--s-2);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: 550;
    letter-spacing: 0.01em;
    color: var(--fg-subtle);
    transition: color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}

.segment:hover:not(:disabled):not([aria-pressed="true"]) {
    color: var(--fg-muted);
    background: rgba(255, 255, 255, 0.04);
}

/* The selected segment is a brighter piece of the same material sliding on
   top of the track. */
.segment[aria-pressed="true"] {
    color: var(--fg);
    background: rgba(255, 255, 255, 0.10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22),
        0 4px 12px -4px rgba(0, 0, 0, 0.45);
}

.segment:disabled { opacity: 0.3; }

/* --- Notices ------------------------------------------------------------ */

.notice {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3);
    margin-bottom: var(--s-3);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--fg-muted);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--hairline);
    border-left: 2px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--r-sm);
}

.notice svg { width: 15px; height: 15px; flex: none; margin-top: 1px; stroke-width: 1.7; fill: none; stroke: currentColor; }

.notice--warn {
    color: var(--warn);
    background: var(--warn-tint);
    border-color: var(--warn-line);
    border-left-color: var(--warn);
}

.notice--danger {
    color: var(--danger);
    background: var(--danger-tint);
    border-color: var(--danger-line);
    border-left-color: var(--danger);
}

/* --- Accordion ---------------------------------------------------------- */

.panel {
    border-radius: var(--r-lg);
    margin-bottom: var(--s-3);
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    min-height: 50px;
    padding: var(--s-3) var(--s-4);
    text-align: left;
    transition: background-color var(--t-fast) var(--ease);
}

.panel-head:hover { background: rgba(255, 255, 255, 0.035); }

.panel-title {
    font-size: var(--fs-base);
    font-weight: 550;
    color: var(--fg);
}

.panel-chevron {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: var(--fg-subtle);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--t-base) var(--ease);
}

.panel[data-open="1"] .panel-chevron { transform: rotate(180deg); }

.panel-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--t-base) var(--ease);
}

.panel[data-open="1"] .panel-body { grid-template-rows: 1fr; }

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

.panel-content {
    padding: var(--s-4) var(--s-4);
    border-top: 1px solid var(--hairline);
}

/* --- Field label row ---------------------------------------------------- */

.field-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-base);
    color: var(--fg-muted);
    min-width: 0;
}

.group-label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: var(--s-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.divider {
    height: 1px;
    background: var(--hairline);
    margin: var(--s-5) 0;
}

.sub-divider {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: var(--s-5) 0 var(--s-4);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-subtle);
}

.sub-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

/* --- Info button and popover -------------------------------------------- */

.info {
    position: relative;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: var(--fg-subtle);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

/* Comfortable touch target without changing the visual size. */
.info::after {
    content: "";
    position: absolute;
    inset: -12px;
}

.info:hover, .info[data-open="1"] {
    color: var(--fg);
    border-color: var(--fg-subtle);
}

.info-pop {
    position: fixed;
    z-index: 120;
    max-width: 290px;
    padding: 10px 12px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--fg-muted);
    background: rgba(20, 20, 26, 0.72);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-sm);
    box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                visibility var(--t-fast);
}

.info-pop[data-open="1"] { opacity: 1; visibility: visible; transform: none; }

/* --- Slider ------------------------------------------------------------- */

.slider { margin-bottom: var(--s-5); }
.slider:last-child { margin-bottom: 0; }

.slider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-2);
}

.slider-value {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: var(--fs-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    flex: none;
}

.slider-unit {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--fg-subtle);
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 26px;
    background: none;
    cursor: pointer;
    touch-action: pan-y;
}

/* Track is painted from --fill, which app.js sets as a percentage. */
input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--r-pill);
    background: linear-gradient(to right,
        var(--accent) 0 var(--fill, 0%),
        rgba(255, 255, 255, 0.14) var(--fill, 0%) 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: var(--r-pill);
    background: linear-gradient(to right,
        var(--accent) 0 var(--fill, 0%),
        rgba(255, 255, 255, 0.14) var(--fill, 0%) 100%);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border-radius: var(--r-pill);
    background: var(--fg);
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: transform var(--t-fast) var(--ease);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--fg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

input[type="range"]:disabled { cursor: not-allowed; }
input[type="range"]:disabled::-webkit-slider-thumb { background: var(--fg-subtle); }
input[type="range"]:disabled::-moz-range-thumb { background: var(--fg-subtle); }

.slider[data-disabled="1"] { opacity: 0.42; }

/* --- Toggle row --------------------------------------------------------- */

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: 44px;
    padding: var(--s-1) 0;
}

.toggle-row + .toggle-row { border-top: 1px solid var(--hairline); }

.toggle-text { display: grid; gap: 2px; min-width: 0; }

.toggle-desc {
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--fg-subtle);
}

.toggle-desc--danger {
    color: var(--danger);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.switch {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    margin-right: -8px;
    cursor: pointer;
}

.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.switch-track {
    position: relative;
    width: 40px;
    height: 23px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.13);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: background-color var(--t-base) var(--ease);
}

.switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: var(--r-pill);
    background: var(--fg-muted);
    transition: transform var(--t-base) var(--ease),
                background-color var(--t-base) var(--ease);
}

.switch input:checked + .switch-track {
    background: var(--accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 14px -2px rgba(139, 124, 232, 0.55);
}
.switch input:checked + .switch-track::after {
    transform: translateX(17px);
    background: #fff;
}

.switch input:focus-visible + .switch-track {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.switch input:disabled + .switch-track { opacity: 0.4; }
.switch:has(input:disabled) { cursor: not-allowed; }

/* --- Presets ------------------------------------------------------------ */

.presets { margin-bottom: var(--s-4); }

.preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
}

@media (min-width: 480px) {
    .preset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.preset {
    height: 40px;
    padding: 0 var(--s-3);
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--fg-muted);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}

.preset:hover {
    color: var(--fg);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.085);
}
.preset:active { transform: translateY(1px); }
.preset[data-tone="danger"] { color: var(--danger); }
.preset[data-tone="danger"]:hover { border-color: var(--danger-line); background: var(--danger-tint); }

/* --- Action bar --------------------------------------------------------- */
/* Sticks to the bottom of the viewport so the primary action stays in reach
   one-handed on a phone. It is part of the flow, not an overlay, so nothing is
   ever covered by it. */

.actions {
    padding-top: var(--s-3);
    margin-top: var(--s-6);
}

/* On a phone the primary action follows the scroll so it stays within reach of
   a thumb. On a pointer device it simply ends the form. */
@media (max-width: 767px) {
    .actions {
        position: sticky;
        bottom: 0;
        z-index: 40;
        padding-bottom: calc(var(--s-3) + var(--safe-b));
        /* A glass shelf rather than a fade to black: content stays legible as
           it slides underneath instead of dissolving into the background. */
        background: linear-gradient(to bottom,
            rgba(12, 12, 16, 0) 0,
            rgba(12, 12, 16, 0.55) 26%,
            rgba(12, 12, 16, 0.80) 100%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 26%);
    }
}

.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 100%;
    min-height: 48px;
    padding: 0 var(--s-5);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--r-md);
    overflow: hidden;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease),
                opacity var(--t-fast) var(--ease);
}

/* Solid buttons get the same lit bevel as the glass, so they read as part of
   the material rather than as flat rectangles dropped on top of it. */
.btn--primary::after,
.btn--danger::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, rgba(0, 0, 0, 0.14));
}

.btn:active:not(:disabled) { transform: scale(0.99); }

.btn--primary {
    background: var(--accent);
    color: var(--accent-fg);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 12px 30px -12px rgba(110, 92, 232, 0.85);
}
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn--primary:active:not(:disabled) { background: var(--accent-press); }

.btn--secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--fg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.btn--secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.10); }

.btn--danger {
    background: var(--danger);
    color: #1a0709;
    box-shadow: 0 12px 30px -12px rgba(229, 100, 107, 0.7);
}
.btn--danger:hover:not(:disabled) { filter: brightness(1.07); }

.btn--ghost {
    min-height: 40px;
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--fg-subtle);
}
.btn--ghost:hover:not(:disabled) { color: var(--fg-muted); }

.btn:disabled { opacity: 0.4; }

.spinner {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: var(--r-pill);
    border: 2px solid currentColor;
    border-top-color: transparent;
    opacity: 0.85;
    animation: spin 0.7s linear infinite;
}

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

/* Turnstile only takes space when Cloudflare decides a challenge is needed. */
.challenge:not(:empty) { margin-bottom: var(--s-3); display: flex; justify-content: center; }

/* --- Cards -------------------------------------------------------------- */

.card {
    padding: var(--s-4);
    border-radius: var(--r-lg);
    margin-bottom: var(--s-3);
}

.card-title {
    font-size: var(--fs-base);
    font-weight: 600;
    margin-bottom: var(--s-1);
}

.card-sub {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--fg-subtle);
    margin-bottom: var(--s-4);
}

/* --- Flash progress ----------------------------------------------------- */

.flash-bar {
    height: 3px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
    margin-top: var(--s-3);
}

.flash-bar > i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(139, 124, 232, 0.65);
    transition: width var(--t-base) var(--ease);
}

.flash-status {
    margin-top: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--fg-subtle);
    font-variant-numeric: tabular-nums;
    min-height: 18px;
}

/* --- Links list --------------------------------------------------------- */

.link-grid { display: grid; gap: var(--s-2); }

@media (min-width: 560px) {
    .link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 46px;
    padding: 0 var(--s-4);
    font-size: var(--fs-sm);
    font-weight: 550;
    color: var(--fg-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}

.link-btn:hover {
    color: var(--fg);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.085);
}
.link-btn img { width: 18px; height: 18px; flex: none; object-fit: contain; }

.credits { display: grid; gap: var(--s-4); }

.credit-name {
    font-size: var(--fs-base);
    font-weight: 550;
    margin-bottom: 2px;
}

.credit-role {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--fg-subtle);
}

.mirrors { display: grid; gap: var(--s-2); }

.mirrors a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 var(--s-3);
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.mirrors a:hover { color: var(--fg); border-color: rgba(255, 255, 255, 0.18); }
.mirrors svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.7; fill: none; opacity: 0.6; }

/* --- Footer ------------------------------------------------------------- */

.footer {
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-sm);
    color: var(--fg-subtle);
    text-align: center;
}

/* --- Toast -------------------------------------------------------------- */

.toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--s-5) + var(--safe-b));
    z-index: 150;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: calc(100% - 2 * var(--gutter));
    max-width: 420px;
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-sm);
    line-height: 1.45;
    border-radius: var(--r-md);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity var(--t-base) var(--ease),
                transform var(--t-base) var(--ease),
                visibility var(--t-base);
}

.toast[data-open="1"] { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Clear the sticky action bar on phones so the toast never lands on the
   primary button. 48px button plus its padding. */
@media (max-width: 767px) {
    .toast { bottom: calc(var(--s-3) + var(--safe-b) + 60px); }
}

.toast-dot {
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: var(--r-pill);
    background: var(--fg-subtle);
}

.toast[data-tone="ok"]    .toast-dot { background: var(--ok); }
.toast[data-tone="error"] .toast-dot { background: var(--danger); }

/* --- Modals ------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 180;
    display: grid;
    place-items: center;
    padding: var(--gutter);
    padding-bottom: calc(var(--gutter) + var(--safe-b));
    background: rgba(6, 6, 9, 0.62);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    overflow-y: auto;
}

.modal-box {
    width: 100%;
    max-width: 420px;
    max-height: calc(100dvh - 2 * var(--gutter));
    overflow-y: auto;
    padding: var(--s-5);
    border-radius: 22px;
}

.modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--s-3);
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline);
    border-radius: var(--r-pill);
}

.modal-eyebrow[data-tone="danger"] {
    color: var(--danger);
    background: var(--danger-tint);
    border-color: var(--danger-line);
}

.modal-title {
    font-size: var(--fs-xl);
    font-weight: 650;
    letter-spacing: -0.02em;
    margin-bottom: var(--s-1);
}

.modal-sub {
    font-size: var(--fs-sm);
    color: var(--fg-subtle);
    margin-bottom: var(--s-4);
}

.modal-body {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--fg-muted);
    padding-top: var(--s-4);
    border-top: 1px solid var(--hairline);
}

.modal-body b { color: var(--fg); font-weight: 600; }

.modal-actions { display: grid; gap: var(--s-2); margin-top: var(--s-5); }

/* --- Stock firmware ------------------------------------------------------
   The revert bar sits above the configuration because it is the one action
   that ignores every setting below it. On a narrow screen the button drops to
   its own full width row so it keeps a comfortable tap target. */

.stock-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    padding: var(--s-4);
    border-radius: var(--r-lg);
    margin-bottom: var(--s-3);
}

.stock-bar-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hairline);
}

.stock-bar-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--fg-muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stock-bar-text {
    display: grid;
    gap: 2px;
    flex: 1 1 160px;
    min-width: 0;
}

.stock-bar-title {
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.stock-bar-sub {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--fg-subtle);
}

.stock-bar-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 40px;
    padding: 0 var(--s-4);
    font-size: var(--fs-sm);
}

@media (max-width: 479px) {
    .stock-bar-btn { flex: 1 1 100%; width: 100%; min-height: 46px; }
}

.modal-box--list { max-width: 460px; }

.stock-list {
    display: grid;
    gap: var(--s-2);
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--hairline);
    max-height: min(46dvh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.stock-item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: 54px;
    padding: var(--s-3) var(--s-4);
    text-align: left;
    color: var(--fg);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}

.stock-item:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.085);
    border-color: rgba(255, 255, 255, 0.18);
}

.stock-item:active:not(:disabled) { transform: scale(0.99); }
.stock-item:disabled { cursor: default; opacity: 0.55; }
.stock-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.stock-item-text {
    display: grid;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.stock-item-name {
    font-size: var(--fs-base);
    font-weight: 600;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stock-item-meta {
    font-size: var(--fs-xs);
    color: var(--fg-subtle);
}

.stock-item-mark {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--fg-subtle);
}

.stock-item-mark svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stock-item:hover:not(:disabled) .stock-item-mark { color: var(--accent); }
.stock-item-mark .spinner { width: 14px; height: 14px; }

.stock-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 64px;
    padding: var(--s-4);
    font-size: var(--fs-sm);
    color: var(--fg-subtle);
    text-align: center;
}

.stock-note {
    margin-top: var(--s-3);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--fg-subtle);
}

.check {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding: var(--s-3);
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--fg-muted);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}

.check:hover { border-color: rgba(255, 255, 255, 0.18); }
.check:has(input:checked) {
    border-color: var(--accent-line);
    background: rgba(139, 124, 232, 0.14);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }

.check-box {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 1px;
    border-radius: var(--r-xs);
    border: 1px solid rgba(255, 255, 255, 0.20);
    transition: background-color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}

.check-box svg {
    width: 11px;
    height: 11px;
    stroke: var(--accent-fg);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0;
    transition: opacity var(--t-fast) var(--ease);
}

.check input:checked + .check-box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check-box svg { opacity: 1; }
.check input:focus-visible + .check-box { outline: 2px solid var(--accent); outline-offset: 2px; }

.countdown {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    font-weight: 500;
}

/* ==========================================================================
   Display (BLE) configuration
   ========================================================================== */

.nwo-hint {
    font-size: var(--fs-sm);
    color: var(--fg-subtle);
    line-height: 1.5;
    margin: var(--s-3) 0 0;
}

.panel-content > .nwo-hint:first-child { margin-top: 0; margin-bottom: var(--s-3); }

/* --- global presets ------------------------------------------------------ */

.nwo-preset-bar { display: grid; gap: var(--s-2); }

.nwo-preset-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    min-height: 30px;
    align-items: center;
}

.nwo-preset-empty { font-size: var(--fs-sm); color: var(--fg-subtle); }

.nwo-chip {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--r-pill);
    overflow: hidden;
    transition: border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease);
}

.nwo-chip:hover { border-color: var(--accent-line); background: var(--accent-tint); }

.nwo-chip-load {
    appearance: none;
    border: 0;
    background: none;
    color: var(--fg);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 6px 4px 6px 12px;
    cursor: pointer;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nwo-chip-del {
    appearance: none;
    border: 0;
    background: none;
    color: var(--fg-subtle);
    font: inherit;
    font-size: 15px;
    line-height: 1;
    padding: 0 10px 0 6px;
    cursor: pointer;
}

.nwo-chip-del:hover { color: var(--danger); }

.nwo-preset-save { display: flex; gap: var(--s-2); }

.nwo-input {
    flex: 1 1 auto;
    min-width: 0;
    appearance: none;
    font: inherit;
    font-size: var(--fs-sm);
    color: var(--fg);
    background: var(--glass-bg-sunk);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    padding: 8px 12px;
}

.nwo-input::placeholder { color: var(--fg-subtle); }
.nwo-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.btn.nwo-btn-sm {
    flex: none;
    width: auto;
    min-height: 0;
    padding: 8px 16px;
    font-size: var(--fs-sm);
}

/* --- one element: toggle, then its own mode and colours ------------------ */

.nwo-el + .nwo-el {
    border-top: 1px solid var(--hairline);
    margin-top: var(--s-3);
    padding-top: var(--s-1);
}

.nwo-el-body {
    padding: 0 0 var(--s-4);
    animation: nwo-open var(--t-base) var(--ease);
}

@keyframes nwo-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nwo-el-body { animation: none; }
}

.segments.nwo-el-modes {
    margin-bottom: var(--s-3);
}

.nwo-el-modes .segment {
    font-size: var(--fs-sm);
    padding-top: 7px;
    padding-bottom: 7px;
}

.nwo-el-colors {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

/* Rainbow needs no input at all, fixed needs exactly one colour. */
.nwo-el-colors[data-mode="rainbow"] { display: none; }
.nwo-el-colors[data-mode="fixed"] .nwo-ramp,
.nwo-el-colors[data-mode="fixed"] .nwo-swatch--b { display: none; }
.nwo-el-colors[data-mode="fixed"] .nwo-swatch { flex: 1 1 auto; width: auto; }

.nwo-note {
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--fg-subtle);
    margin: var(--s-3) 0 0;
    padding-left: var(--s-3);
    border-left: 2px solid var(--accent-line);
}

.nwo-swatch {
    appearance: none;
    flex: none;
    width: 44px;
    height: 34px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r-sm);
    background: var(--glass-bg-sunk);
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.nwo-swatch:hover { border-color: var(--accent-line); }
.nwo-swatch:active { transform: scale(0.96); }
.nwo-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nwo-swatch > i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.nwo-swatch--sm { width: 34px; height: 28px; margin-right: var(--s-1); }

.nwo-ramp {
    flex: 1 1 auto;
    height: 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
}

.nwo-steps {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    margin-top: var(--s-3);
}

.nwo-steps[hidden] { display: none; }

.nwo-steps > i {
    height: 16px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* --- apply to every animated element ------------------------------------- */

.nwo-allbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}

.nwo-allbar .btn { flex: 1 1 200px; }

/* --- icon table ----------------------------------------------------------
   Every cell is a button: click it and the picker sets that one icon. The x
   in the corner appears once the icon carries a colour of its own. */

.nwo-icon-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}

.nwo-icon-tools .btn { flex: 1 1 180px; }
.nwo-icon-tools .btn--ghost { flex: 0 0 auto; margin-left: auto; }

.nwo-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: var(--s-2);
}

.nwo-icon {
    position: relative;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid transparent;
    min-height: 48px;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease),
                background var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}

.nwo-icon:hover { border-color: var(--accent-line); background: rgba(255, 255, 255, 0.06); }
.nwo-icon:active { transform: scale(0.95); }
.nwo-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.nwo-icon[data-stock-only="1"] { opacity: 0.45; }
.nwo-icon[data-locked="1"] { opacity: 0.3; cursor: not-allowed; }

.nwo-icon > i {
    display: block;
    flex: none;
    -webkit-mask-image: var(--m);
    mask-image: var(--m);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.nwo-icon-reset {
    position: absolute;
    top: 2px;
    right: 3px;
    width: 14px;
    height: 14px;
    line-height: 13px;
    text-align: center;
    font-size: 11px;
    border-radius: 50%;
    color: var(--fg-subtle);
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.nwo-icon[data-stock-only="0"] .nwo-icon-reset { opacity: 1; pointer-events: auto; }
.nwo-icon-reset:hover { color: var(--danger); }

/* --- boot logo ------------------------------------------------------------
   The preview is the real 167 x 60 slot on a dark plate, so what you see is
   what the display shows. */

.nwo-logo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    margin-top: var(--s-3);
}

.nwo-logo-shot {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 183px;
    height: 76px;
    border-radius: var(--r-sm);
    border: 1px solid var(--hairline);
    background: #0a0a0e;
    overflow: hidden;
}

.nwo-logo-shot > img {
    display: block;
    width: 167px;
    height: 60px;
    image-rendering: pixelated;
}

.nwo-logo-shot > i {
    display: block;
    flex: none;
    background: #fff;
    -webkit-mask-image: var(--m);
    mask-image: var(--m);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.nwo-logo-shot > [hidden] { display: none; }

.nwo-logo-side {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.nwo-logo-state {
    font-size: var(--fs-sm);
    color: var(--fg-subtle);
}

.nwo-logo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* --- state colour rows --------------------------------------------------- */

.nwo-status-row { align-items: center; }
.nwo-status-row[data-off="1"] .nwo-swatch { opacity: 0.4; }

/* --- colour picker ------------------------------------------------------- */

.modal-box--picker { max-width: 340px; }

.pick-field {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background: var(--hue, #f00);
    touch-action: none;
    cursor: crosshair;
    /* No overflow clipping here: the knob sits on the very edge when
       saturation or value is at its maximum and must stay whole. */
}

.pick-field-sat,
.pick-field-val {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.pick-field-sat { background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.pick-field-val { background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000); }

.pick-hue {
    position: relative;
    height: 26px;
    margin-top: var(--s-4);
    border-radius: var(--r-pill);
    border: 1px solid var(--hairline);
    touch-action: none;
    cursor: pointer;
    background: linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%,
                                       #00f 67%, #f0f 83%, #f00);
}

.pick-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.pick-field .pick-knob { top: 0; margin-top: -11px; }

.pick-foot {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-4);
}

.pick-preview {
    flex: none;
    width: 40px;
    height: 36px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.pick-hex {
    flex: 1 1 auto;
    text-transform: lowercase;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.pick-recent {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

.pick-recent:empty { display: none; }

.pick-chip {
    appearance: none;
    width: 26px;
    height: 26px;
    border-radius: var(--r-xs);
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    padding: 0;
}

.pick-chip:hover { border-color: #fff; }

@media (min-width: 560px) {
    .nwo-icons { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
}

/* ------------------------------------------------------------------ *
 * Unlock code: a D-pad, so a code can only ever be a sequence the
 * scooter can actually see.
 * ------------------------------------------------------------------ */

.dpad {
    display: grid;
    grid-template-columns: repeat(3, 52px);
    grid-template-rows: repeat(3, 52px);
    gap: var(--s-2);
    justify-content: center;
    margin: var(--s-3) auto var(--s-2);
}

.dpad-key {
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    color: var(--fg-muted);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid var(--hairline);
    border-radius: var(--r-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: color var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                background-color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
}

.dpad-key:hover:not(:disabled) {
    color: var(--fg);
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.085);
}
.dpad-key:active:not(:disabled) { transform: translateY(1px); }
.dpad-key[data-flash] { color: var(--accent, #fff); border-color: currentColor; }

.dpad-up    { grid-area: 1 / 2; }
.dpad-left  { grid-area: 2 / 1; }
.dpad-right { grid-area: 2 / 3; }
.dpad-down  { grid-area: 3 / 2; }

.dpad-hint {
    grid-area: 2 / 2;
    display: grid;
    place-items: center;
    font-size: var(--fs-xs, 11px);
    color: var(--fg-dim, #6b7280);
    text-align: center;
    line-height: 1.2;
}

.unlock-code {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 34px;
    padding: var(--s-2) var(--s-3);
    border: 1px dashed var(--hairline);
    border-radius: var(--r-sm);
    font-size: 19px;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--fg);
}
.unlock-code[data-empty] {
    font-size: var(--fs-sm);
    letter-spacing: normal;
    color: var(--fg-dim, #6b7280);
}

.unlock-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2px var(--s-3);
    margin-top: var(--s-2);
    font-size: var(--fs-xs, 11px);
    color: var(--fg-dim, #6b7280);
}
.unlock-legend span b { font-weight: 600; font-size: 13px; }

.unlock-actions {
    display: flex;
    gap: var(--s-2);
    justify-content: center;
    margin-top: var(--s-2);
}