/* ==========================================================================
   FiveMRides Studio UI (fmr-studio-ui.css) - ONE look for every Studio tool
   --------------------------------------------------------------------------
   Shared design tokens and components, extracted from the Livery Studio
   (Oct 2026). Used by the Livery Studio and the Debadger. Neutral names:
   every class starts with .fsu-, every token with --fsu-.

   How a tool adopts it (e.g. a future Clothing Studio):
     1. Enqueue this sheet BEFORE the tool's own sheet (wp_enqueue_style
        handle 'fmr-studio-ui', then add it to the tool sheet's dependencies).
     2. Put class="fsu" on the tool root: it defines the tokens and the base
        typography. Tool sheets may alias them (e.g. --line: var(--fsu-line)).
     3. Build the markup with the components below; keep tool-specific layout
        (grid columns, positions inside the viewport) in the tool's own sheet.
        State classes are shared: .is-on (active), .is-done (step done),
        .is-over (drag over), .is-busy (button spinner).
     4. A tool that lives inside a themed page (theme rules with !important on
        generic classes such as .fro-btn) only needs a small guard in its own
        sheet; do not fork the components.

   Components
     Tokens + root ....... .fsu (colors, gradient, radii, fonts, shadows)
     Icons ............... .fsu-i (inline 24x24 stroke SVG)
     Top bar ............. .fsu-top, .fsu-brand (> b), .fsu-logo, .fsu-beta,
                           .fsu-steps (> li > button | .fsu-step, li.is-on / li.is-done),
                           .fsu-top-spacer, .fsu-credits
     Buttons ............. .fsu-btn (+ -sm -lg -block -primary -accent -ghost, .is-busy),
                           .fsu-iconbtn (+ -sm, .is-on), .fsu-chip (+ .is-on)
     Panel cards ......... .fsu-side (scrolling column), .fsu-card (+ -grow),
                           .fsu-card-head (> h3 uppercase title), .fsu-count, .fsu-head-actions,
                           .fsu-note, .fsu-empty
     Lists ............... .fsu-list (scroll area), .fsu-row (+ .is-on), .fsu-tick, .fsu-row-name,
                           .fsu-row-meta (small mono counts)
     Fields .............. .fsu-search, .fsu-seg (+ -sm -block, button.is-on),
                           .fsu-switch, .fsu-check (+ -sm), .fsu-toggle
     Viewport ............ .fsu-viewport (frame + soft backdrop), .fsu-legend, .fsu-vtools,
                           .fsu-vsep, .fsu-hint, .fsu-tip, .fsu-loading, .fsu-spinner
     Tool rail ........... .fsu-rail, .fsu-tool (+ .is-on, > kbd), .fsu-rail-sep
     Upload screen ....... .fsu-hero (> h1 | .fsu-hero-title), .fsu-eyebrow, .fsu-grad, .fsu-lead,
                           .fsu-chips, .fsu-drop (+ .is-over, .fsu-drop-idle, .fsu-drop-icon,
                           .fsu-drop-note, .fsu-drop-guest), .fsu-how (step cards)
     Toasts .............. .fsu-toasts, .fsu-toast (+ .is-ok .is-warn .is-error)
   Not shared yet (still in livery-studio.css): sliders, swatches/palette, the
   Livery part tree, sheet/layers/presets, modals.
   ========================================================================== */

.fsu {
    --fsu-bg: #06080e;
    --fsu-bg2: #0a0d15;
    --fsu-panel: #0e121b;
    --fsu-panel2: #131925;
    --fsu-panel3: #1a2131;
    --fsu-line: #1f2839;
    --fsu-line2: #2c3850;
    --fsu-text: #e8edf5;
    --fsu-muted: #8d98ab;
    --fsu-dim: #5f6b7e;
    --fsu-cyan: var(--fro-accent, #00f0ff);
    --fsu-pink: #ff2f9e;
    --fsu-purple: var(--fro-accent-2, #a855f7);
    --fsu-good: #34d399;
    --fsu-warn: #fbbf24;
    --fsu-bad: #f87171;
    --fsu-grad: linear-gradient(120deg, #ff2f9e 0%, #a855f7 52%, #00d9ff 100%);
    --fsu-grad-soft: linear-gradient(120deg, rgba(255, 47, 158, .22), rgba(168, 85, 247, .22));
    --fsu-card-bg: linear-gradient(180deg, rgba(19, 25, 37, .92), rgba(14, 18, 27, .92));
    --fsu-r: 14px;
    --fsu-r-sm: 10px;
    --fsu-r-xs: 7px;
    --fsu-shadow: 0 10px 40px rgba(0, 0, 0, .45);
    --fsu-ease: cubic-bezier(.2, .8, .2, 1);
    --fsu-font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --fsu-display: Rajdhani, Inter, sans-serif;
    --fsu-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.fsu-i { width: 18px; height: 18px; flex: none; display: block; }

/* ------------------------------------------------------------------ top bar */
.fsu-top {
    height: 54px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 14px;
    border-bottom: 1px solid var(--fsu-line);
    background: linear-gradient(180deg, rgba(14, 18, 27, .96), rgba(10, 13, 21, .96));
    backdrop-filter: blur(10px);
    position: relative; z-index: 5;
}
.fsu-top::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 47, 158, .5), rgba(0, 240, 255, .5), transparent);
    opacity: .55;
}
.fsu-brand { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.fsu .fsu-brand b { font: 700 16px/1 var(--fsu-display); letter-spacing: .02em; }
.fsu-logo {
    width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #fff;
    background: var(--fsu-grad); box-shadow: 0 0 18px rgba(255, 47, 158, .35), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.fsu-logo .fsu-i { width: 17px; height: 17px; }
.fsu-beta {
    font: 800 9px/1 var(--fsu-display); letter-spacing: .16em; padding: 4px 6px 3px; border-radius: 5px;
    color: var(--fsu-pink); border: 1px solid rgba(255, 47, 158, .55); background: rgba(255, 47, 158, .08);
}
.fsu-steps { list-style: none; display: flex; gap: 4px; margin: 0 0 0 10px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .03); border: 1px solid var(--fsu-line); }
.fsu .fsu-steps li { list-style: none; margin: 0; }
.fsu .fsu-steps button, .fsu-steps .fsu-step {
    box-shadow: none; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 0 5px; border-radius: 999px; border: 0;
    background: transparent; color: var(--fsu-muted); cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 12.5px;
    transition: background .2s var(--fsu-ease), color .2s var(--fsu-ease);
}
.fsu-steps .fsu-step { cursor: default; opacity: .45; }
.fsu .fsu-steps button span, .fsu .fsu-steps .fsu-step > span:first-child {
    width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800;
    background: var(--fsu-panel3); color: var(--fsu-muted); transition: inherit;
}
.fsu .fsu-steps button:not(:disabled):hover { color: var(--fsu-text); background: rgba(255, 255, 255, .05); }
.fsu .fsu-steps button:disabled { cursor: default; opacity: .45; }
.fsu-steps li.is-done .fsu-step, .fsu-steps li.is-on .fsu-step { opacity: 1; }
.fsu .fsu-steps li.is-done button span, .fsu .fsu-steps li.is-done .fsu-step > span:first-child { background: rgba(0, 240, 255, .15); color: var(--fsu-cyan); }
.fsu .fsu-steps li.is-on button, .fsu-steps li.is-on .fsu-step { color: #fff; background: linear-gradient(120deg, rgba(255, 47, 158, .22), rgba(168, 85, 247, .22)); box-shadow: inset 0 0 0 1px rgba(255, 47, 158, .45); }
.fsu .fsu-steps li.is-on button span, .fsu .fsu-steps li.is-on .fsu-step > span:first-child { background: var(--fsu-grad); color: #fff; }
.fsu-top-spacer { flex: 1; }
.fsu-credits {
    display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px;
    padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(0, 240, 255, .25); background: rgba(0, 240, 255, .06); color: var(--fsu-text); font-weight: 600;
}
.fsu-credits .fsu-i { width: 15px; height: 15px; color: var(--fsu-cyan); }

/* ------------------------------------------------------------------ buttons */
.fsu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
    border-radius: var(--fsu-r-sm); border: 1px solid var(--fsu-line2); background: var(--fsu-panel2); color: var(--fsu-text);
    font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
    transition: transform .15s var(--fsu-ease), background .2s, border-color .2s, box-shadow .2s, opacity .2s;
}
.fsu-btn:hover { background: var(--fsu-panel3); border-color: #3b4864; }
.fsu-btn:active { transform: translateY(1px); }
.fsu-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.fsu-btn .fsu-i { width: 16px; height: 16px; }
.fsu-btn-sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; gap: 5px; }
.fsu-btn-sm .fsu-i { width: 14px; height: 14px; }
.fsu-btn-lg { height: 46px; font-size: 14.5px; border-radius: 12px; }
.fsu-btn-block { width: 100%; }
.fsu-btn-primary {
    border: 0; color: #fff; background: var(--fsu-grad); background-size: 140% 100%; background-position: 0 0;
    box-shadow: 0 6px 22px rgba(255, 47, 158, .28), inset 0 0 0 1px rgba(255, 255, 255, .14);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.fsu-btn-primary:hover { background: var(--fsu-grad); background-size: 140% 100%; background-position: 100% 0; box-shadow: 0 8px 30px rgba(255, 47, 158, .4), inset 0 0 0 1px rgba(255, 255, 255, .2); }
.fsu-btn-accent { border-color: rgba(0, 240, 255, .35); background: rgba(0, 240, 255, .07); color: #c9fbff; }
.fsu-btn-accent:hover { background: rgba(0, 240, 255, .14); border-color: rgba(0, 240, 255, .6); }
.fsu-btn-ghost { background: transparent; border-color: transparent; color: var(--fsu-muted); }
.fsu-btn-ghost:hover { background: rgba(255, 255, 255, .05); color: var(--fsu-text); border-color: transparent; }
.fsu-btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.fsu-btn.is-busy::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: fsu-spin .7s linear infinite; }
.fsu-iconbtn {
    width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; border: 1px solid transparent; padding: 0;
    background: transparent; color: var(--fsu-muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; box-shadow: none;
}
.fsu-iconbtn:hover { background: rgba(255, 255, 255, .06); color: var(--fsu-text); }
.fsu-iconbtn:disabled { opacity: .35; cursor: default; background: transparent; }
.fsu-iconbtn.is-on { color: var(--fsu-cyan); background: rgba(0, 240, 255, .1); border-color: rgba(0, 240, 255, .3); }
.fsu-iconbtn-sm { width: 28px; height: 28px; border-radius: 7px; }
.fsu-iconbtn-sm .fsu-i { width: 15px; height: 15px; }
.fsu-chip {
    box-shadow: none; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--fsu-line2); background: rgba(10, 13, 21, .7);
    color: var(--fsu-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.fsu-chip:hover { color: var(--fsu-text); border-color: rgba(0, 240, 255, .45); background: rgba(0, 240, 255, .08); }
.fsu-chip.is-on { color: #fff; background: linear-gradient(120deg, rgba(255, 47, 158, .25), rgba(168, 85, 247, .25)); border-color: rgba(255, 47, 158, .55); }

/* ------------------------------------------------------------ upload screen */
.fsu-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; max-width: 1280px; margin: 0 auto; }
.fsu-eyebrow { color: var(--fsu-pink); font: 700 12px/1 var(--fsu-display); letter-spacing: .22em; margin-bottom: 14px; }
.fsu .fsu-hero h1, .fsu-hero-title { font: 700 clamp(34px, 4.4vw, 60px)/1.02 var(--fsu-display); letter-spacing: -.005em; margin-bottom: 16px; }
.fsu-grad { background: var(--fsu-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.fsu-lead { color: #b9c3d3; font-size: 16px; line-height: 1.6; max-width: 560px; }
.fsu-chips { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 9px 22px; }
.fsu .fsu-chips li { display: flex; align-items: center; gap: 8px; color: #d6dde9; font-weight: 600; }
.fsu-chips .fsu-i { width: 16px; height: 16px; color: var(--fsu-cyan); padding: 2px; border-radius: 50%; background: rgba(0, 240, 255, .12); }
.fsu-drop {
    position: relative; min-height: 360px; border-radius: 22px; padding: 34px; display: grid; place-items: center; text-align: center;
    background: linear-gradient(160deg, rgba(26, 33, 49, .92), rgba(12, 16, 25, .95));
    border: 1px solid var(--fsu-line2); box-shadow: var(--fsu-shadow), inset 0 1px 0 rgba(255, 255, 255, .04);
    transition: border-color .2s, box-shadow .2s, transform .2s var(--fsu-ease); outline: none;
}
.fsu-drop::before {
    content: ""; position: absolute; inset: 12px; border-radius: 16px; border: 1.5px dashed rgba(141, 152, 171, .28); pointer-events: none; transition: border-color .2s;
}
.fsu-drop:hover::before, .fsu-drop:focus-visible::before { border-color: rgba(0, 240, 255, .45); }
.fsu-drop.is-over { border-color: var(--fsu-cyan); box-shadow: 0 0 0 4px rgba(0, 240, 255, .12), 0 0 60px rgba(0, 240, 255, .18); transform: scale(1.01); }
.fsu-drop.is-over::before { border-color: var(--fsu-cyan); }
.fsu-drop-idle { display: grid; justify-items: center; gap: 12px; position: relative; }
.fsu-drop-icon {
    width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; color: #fff; margin-bottom: 4px;
    background: var(--fsu-grad); box-shadow: 0 12px 40px rgba(255, 47, 158, .35), inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.fsu-drop-icon .fsu-i { width: 32px; height: 32px; }
.fsu .fsu-drop h2 { font: 700 26px/1.1 var(--fsu-display); }
.fsu .fsu-drop p { color: var(--fsu-muted); max-width: 380px; }
.fsu-drop .fsu-btn { margin-top: 6px; height: 44px; padding: 0 22px; font-size: 14px; }
.fsu-drop-note { font-size: 12px; color: var(--fsu-dim) !important; }
.fsu-drop-guest .fsu-drop-icon { background: var(--fsu-panel3); box-shadow: none; color: var(--fsu-muted); }
.fsu-drop-guest { gap: 12px; align-content: center; }
.fsu-how { list-style: none; padding: 0; margin: 34px auto 0; max-width: 1280px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fsu .fsu-how li { display: grid; gap: 6px; padding: 18px; border-radius: var(--fsu-r); border: 1px solid var(--fsu-line); background: rgba(14, 18, 27, .7); }
.fsu .fsu-how span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--fsu-grad); margin-bottom: 4px; }
.fsu .fsu-how b { font: 700 17px/1.2 var(--fsu-display); }
.fsu .fsu-how small { color: var(--fsu-muted); font-size: 13px; line-height: 1.5; }

/* ------------------------------------------------------------- panel cards */
.fsu-side { min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; scrollbar-width: thin; scrollbar-color: #2a3448 transparent; }
.fsu-side::-webkit-scrollbar, .fsu-list::-webkit-scrollbar { width: 8px; }
.fsu-side::-webkit-scrollbar-thumb, .fsu-list::-webkit-scrollbar-thumb { background: #263043; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.fsu-card {
    flex: none; padding: 13px; border-radius: var(--fsu-r); border: 1px solid var(--fsu-line);
    background: var(--fsu-card-bg);
    box-shadow: 0 4px 22px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .03);
    display: flex; flex-direction: column; gap: 10px;
}
.fsu-card-grow { flex: 1 1 auto; min-height: 220px; }
.fsu-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.fsu .fsu-card-head h3 { font: 700 11.5px/1 var(--fsu-display); letter-spacing: .16em; text-transform: uppercase; color: #c9d2e0; }
.fsu-count { color: var(--fsu-dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.fsu .fsu-count b { color: var(--fsu-cyan); font-weight: 700; }
.fsu-head-actions { display: flex; gap: 2px; }
.fsu-note { color: var(--fsu-dim); font-size: 12px; line-height: 1.5; }
.fsu-empty { color: var(--fsu-dim); padding: 14px 6px; text-align: center; font-size: 12.5px; }

/* lists (Livery panel rows: tick, mono name, small mono counts) */
.fsu-list { flex: 1; min-height: 120px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: #2a3448 transparent; }
.fsu-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 6px 0 4px; border-radius: 9px; transition: background .12s; cursor: pointer; }
.fsu-row:hover { background: rgba(255, 255, 255, .04); }
.fsu-tick {
    -webkit-appearance: none; appearance: none; width: 18px; height: 18px; flex: none; margin: 0; border-radius: 5px; border: 1.5px solid var(--fsu-line2); background: var(--fsu-bg2);
    display: inline-grid; place-items: center; color: #fff; cursor: pointer; padding: 0; transition: all .15s;
}
.fsu-tick:checked, .fsu-row.is-on .fsu-tick { background: linear-gradient(135deg, #00c8ff, #18d8ff); border-color: transparent; color: #04141a; box-shadow: 0 0 10px rgba(24, 216, 255, .45); }
.fsu-tick:checked::after { content: ""; width: 4px; height: 8px; border: solid #04141a; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.fsu-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/1.3 var(--fsu-mono); }
.fsu-row.is-on .fsu-row-name { color: #bff6ff; }
.fsu-row-meta { display: flex; flex-direction: column; align-items: flex-end; font: 600 11px/1.1 var(--fsu-mono); color: var(--fsu-muted); }
.fsu .fsu-row-meta small { color: var(--fsu-dim); font-size: 10px; font-weight: 500; }

/* fields */
.fsu-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px; border-radius: var(--fsu-r-sm); background: var(--fsu-bg2); border: 1px solid var(--fsu-line); transition: border-color .15s, box-shadow .15s; }
.fsu-search:focus-within { border-color: rgba(0, 240, 255, .55); box-shadow: 0 0 0 3px rgba(0, 240, 255, .1); }
.fsu-search .fsu-i { width: 15px; height: 15px; color: var(--fsu-dim); }
.fsu .fsu-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--fsu-text); font: inherit; outline: none; }
.fsu-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--fsu-bg2); border: 1px solid var(--fsu-line); }
.fsu .fsu-seg button { box-shadow: none; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--fsu-muted); font-weight: 600; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; transition: all .15s; }
.fsu .fsu-seg button sup { color: var(--fsu-pink); font-size: 9px; margin-left: 1px; }
.fsu .fsu-seg button:hover { color: var(--fsu-text); }
.fsu .fsu-seg button.is-on { background: linear-gradient(120deg, rgba(255, 47, 158, .25), rgba(168, 85, 247, .25)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 47, 158, .45); }
.fsu-seg button .fsu-i { width: 14px; height: 14px; }
.fsu .fsu-seg-sm button { height: 26px; padding: 0 8px; font-size: 11.5px; }
.fsu-seg-block { display: flex; }
.fsu .fsu-seg-block button { flex: 1; justify-content: center; }
.fsu-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--fsu-muted); font-size: 12px; user-select: none; }
.fsu .fsu-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.fsu .fsu-switch > span { width: 30px; height: 17px; border-radius: 99px; background: var(--fsu-panel3); border: 1px solid var(--fsu-line2); position: relative; flex: none; transition: background .2s, border-color .2s; }
.fsu .fsu-switch > span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #7d889b; transition: transform .2s var(--fsu-ease), background .2s; }
.fsu .fsu-switch input:checked + span { background: linear-gradient(90deg, var(--fsu-pink), var(--fsu-purple)); border-color: transparent; }
.fsu .fsu-switch input:checked + span::after { transform: translateX(13px); background: #fff; }
.fsu .fsu-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0, 240, 255, .35); }
.fsu-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; color: #cdd5e2; font-size: 13px; user-select: none; }
.fsu .fsu-check input { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--fsu-line2); background: var(--fsu-bg2); flex: none; margin: 1px 0 0; display: grid; place-items: center; cursor: pointer; transition: all .15s; }
.fsu .fsu-check input:checked { background: linear-gradient(135deg, var(--fsu-pink), var(--fsu-purple)); border-color: transparent; }
.fsu .fsu-check input:checked::after { content: ""; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.fsu-check-sm { font-size: 12px; color: var(--fsu-muted); }
.fsu-check.is-shake { animation: fsu-shake .45s; }
.fsu-toggle { position: relative; cursor: pointer; }
.fsu .fsu-toggle input { position: absolute; opacity: 0; }
.fsu .fsu-toggle span { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--fsu-line2); background: var(--fsu-panel2); font-weight: 800; color: var(--fsu-muted); transition: all .15s; }
.fsu .fsu-toggle input:checked + span { color: #c9fbff; border-color: rgba(0, 240, 255, .5); background: rgba(0, 240, 255, .1); }
.fsu .fsu-toggle-wide span { font-weight: 600; font-size: 12px; }

/* ----------------------------------------------------------------- viewport */
.fsu-viewport {
    position: relative; min-width: 0; min-height: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--fsu-line);
    background:
        radial-gradient(ellipse 70% 55% at 50% 72%, rgba(120, 70, 220, .20), transparent 70%),
        radial-gradient(ellipse 90% 60% at 50% 110%, rgba(0, 240, 255, .07), transparent 70%),
        linear-gradient(180deg, #0b0e17 0%, #0a0c14 55%, #07090f 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 50px rgba(0, 0, 0, .35);
}
/* look only; each tool positions these inside its viewport */
.fsu-legend {
    display: flex; gap: 16px; align-items: center;
    padding: 8px 16px; border-radius: 999px; background: rgba(8, 10, 17, .72); border: 1px solid var(--fsu-line2); backdrop-filter: blur(10px);
    font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); pointer-events: none;
}
.fsu .fsu-legend span { display: flex; align-items: center; gap: 7px; color: #cfd7e3; }
.fsu .fsu-legend i { width: 11px; height: 11px; border-radius: 50%; }
.fsu .fsu-legend i.is-sel { background: #00a8ff; box-shadow: 0 0 10px #00a8ff; }
.fsu .fsu-legend i.is-unsel { background: #a39c95; }
.fsu .fsu-legend i.is-lock { background: #2b303a; border: 1px solid #4a5263; }
.fsu-vtools { display: flex; gap: 6px; align-items: center; }
.fsu-vtools .fsu-iconbtn { background: rgba(10, 13, 21, .7); border-color: var(--fsu-line2); width: 30px; height: 30px; }
.fsu-vtools .fsu-iconbtn .fsu-i { width: 15px; height: 15px; }
.fsu-vsep { width: 1px; height: 18px; background: var(--fsu-line2); margin: 0 2px; }
.fsu-hint { color: var(--fsu-dim); font-size: 12px; pointer-events: none; text-shadow: 0 1px 2px #000; }
.fsu-tip {
    position: absolute; left: 0; top: 0; pointer-events: none; display: grid; gap: 2px; padding: 8px 11px; border-radius: 10px;
    background: rgba(8, 10, 17, .9); border: 1px solid var(--fsu-line2); box-shadow: 0 8px 26px rgba(0, 0, 0, .5); backdrop-filter: blur(8px);
    min-width: 140px; z-index: 3;
}
.fsu .fsu-tip b { font: 600 12.5px var(--fsu-mono); color: #fff; }
.fsu .fsu-tip small { color: var(--fsu-muted); font-size: 11.5px; }
.fsu .fsu-tip em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #d8d2cc; margin-top: 2px; }
.fsu-tip.is-on { border-color: rgba(24, 216, 255, .5); }
.fsu .fsu-tip.is-on em { color: #18d8ff; }
.fsu .fsu-tip.is-lock em { color: var(--fsu-dim); }
.fsu-loading { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; background: rgba(6, 8, 14, .7); color: var(--fsu-muted); }
.fsu-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--fsu-pink); border-right-color: var(--fsu-purple); animation: fsu-spin .8s linear infinite; }

/* ---------------------------------------------------------------- tool rail */
.fsu-rail {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: var(--fsu-r); border: 1px solid var(--fsu-line);
    background: var(--fsu-card-bg); align-self: start; max-height: 100%; overflow-y: auto; scrollbar-width: none;
}
.fsu-tool { position: relative; width: 40px; height: 40px; padding: 0; box-shadow: none; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--fsu-muted); display: grid; place-items: center; cursor: pointer; transition: all .15s var(--fsu-ease); flex: none; }
.fsu-tool .fsu-i { width: 19px; height: 19px; }
.fsu .fsu-tool kbd { position: absolute; right: 3px; bottom: 2px; font-size: 8.5px; color: var(--fsu-dim); opacity: .85; }
.fsu-tool:hover { color: var(--fsu-text); background: rgba(255, 255, 255, .06); }
.fsu-tool.is-on { color: #fff; background: linear-gradient(135deg, rgba(255, 47, 158, .32), rgba(168, 85, 247, .32)); border-color: rgba(255, 47, 158, .55); box-shadow: 0 0 16px rgba(255, 47, 158, .25); }
.fsu .fsu-tool.is-on kbd { color: #ffd0e8; }
.fsu-rail-sep { width: 26px; height: 1px; background: var(--fsu-line2); margin: 4px 0; flex: none; }

/* ------------------------------------------------------------------- toasts */
.fsu-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 2147483200; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.fsu-toast {
    display: flex; align-items: center; gap: 10px; max-width: 420px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--fsu-line2);
    background: rgba(16, 20, 30, .95); backdrop-filter: blur(10px); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); color: var(--fsu-text); font-size: 13px; font-weight: 500;
    transform: translateY(12px); opacity: 0; transition: transform .3s var(--fsu-ease), opacity .3s;
}
.fsu-toast.is-in { transform: none; opacity: 1; }
.fsu-toast .fsu-i { width: 17px; height: 17px; color: var(--fsu-cyan); }
.fsu-toast.is-ok .fsu-i { color: var(--fsu-good); }
.fsu-toast.is-warn { border-color: rgba(251, 191, 36, .4); }
.fsu-toast.is-warn .fsu-i { color: var(--fsu-warn); }
.fsu-toast.is-error { border-color: rgba(248, 113, 113, .5); }
.fsu-toast.is-error .fsu-i { color: var(--fsu-bad); }

/* --------------------------------------------------------------- animations */
@keyframes fsu-spin { to { transform: rotate(360deg); } }
@keyframes fsu-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .fsu *, .fsu *::before, .fsu *::after { animation: none !important; transition: none !important; } }

/* --------------------------------------------------------------- responsive */
@media (max-width: 1440px) {
    .fsu .fsu-steps button, .fsu-steps .fsu-step { padding-right: 10px; }
}
@media (max-height: 820px) {
    .fsu-top { height: 48px; }
    .fsu-card { padding: 11px; gap: 8px; }
    .fsu-btn-lg { height: 42px; }
}
@media (max-width: 1100px) {
    .fsu .fsu-steps button, .fsu-steps .fsu-step { font-size: 0; gap: 0; padding: 0 5px; }
    .fsu .fsu-steps button span, .fsu .fsu-steps .fsu-step > span:first-child { font-size: 11px; }
    .fsu-hero { grid-template-columns: 1fr; }
    .fsu-how { grid-template-columns: 1fr; }
    .fsu-rail { flex-direction: row; flex-wrap: wrap; justify-content: center; align-self: stretch; }
    .fsu-side { overflow: visible; }
}
@media (max-width: 640px) {
    .fsu-top { gap: 6px; padding: 0 8px; }
    .fsu .fsu-brand b, .fsu-beta, .fsu .fsu-credits span { display: none; }
    .fsu-chips { grid-template-columns: 1fr; }
    .fsu-drop { padding: 24px 16px; min-height: 300px; }
    .fsu-legend { font-size: 11px; gap: 10px; padding: 6px 10px; max-width: calc(100% - 20px); overflow: hidden; }
}