/* ==========================================================================
   FiveMRides Map Studio ([fivem_map_studio]) - scoped to .fms
   Shared Studio components (top bar, buttons, cards, fields, viewport frame,
   tool rail, toasts) come from fmr-studio-ui.css (.fsu-*), loaded first, the
   page backdrop from refined-tools.css (body.fmr-tool-surface). This sheet
   keeps the Map Studio layout: tool rail, layers / quick add / frame on the
   left, the map canvas in the middle, properties / theme / output on the right.
   ========================================================================== */

.fms {
    position: fixed; inset: 0; z-index: 2147483000; height: 100vh; height: 100dvh;
    color: var(--fsu-text);
    font: 500 13px/1.45 var(--fsu-font);
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(168, 85, 247, .10), transparent 60%),
        radial-gradient(900px 500px at 100% 120%, rgba(0, 240, 255, .06), transparent 60%),
        var(--fsu-bg);
    isolation: isolate;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}
.fms *, .fms *::before, .fms *::after { box-sizing: border-box; }
.fms [hidden] { display: none !important; }
:where(.fms) button, :where(.fms) input, :where(.fms) select { font: inherit; color: inherit; }
.fms button { text-transform: none; letter-spacing: normal; text-shadow: none; min-height: 0; min-width: 0; margin: 0; line-height: 1.2; }
.fms button:focus { outline: none; }
.fms button:focus-visible, .fms input:focus-visible, .fms select:focus-visible { outline: 2px solid rgba(0, 240, 255, .7); outline-offset: 2px; }
.fms a { color: var(--fsu-cyan); }
.fms a.fsu-btn { color: var(--fsu-text); }
.fms a.fsu-btn-accent { color: #c9fbff; }
.fms h1, .fms h2, .fms h3 { margin: 0; color: var(--fsu-text); letter-spacing: 0; text-transform: none; }
.fms p { margin: 0; }
.fms code { font: 600 11px/1.4 var(--fsu-mono); color: #bff6ff; background: rgba(0, 240, 255, .06); padding: 1px 5px; border-radius: 5px; word-break: break-all; }
.fms input[type=text], .fms select {
    width: 100%; height: 32px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--fsu-line2);
    background: var(--fsu-bg2); color: var(--fsu-text); outline: none; box-shadow: none; margin: 0;
}
.fms select { appearance: auto; }
.fms input[type=text]:focus, .fms select:focus { border-color: rgba(0, 240, 255, .55); }
.fms input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 16px; margin: 2px 0 0; padding: 0; background: transparent; border: 0; box-shadow: none; cursor: pointer; }
.fms input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, rgba(255, 47, 158, .55), rgba(168, 85, 247, .55)); }
.fms input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, rgba(255, 47, 158, .55), rgba(168, 85, 247, .55)); }
.fms input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 2px solid var(--fsu-pink); box-shadow: 0 0 8px rgba(255, 47, 158, .5); }
.fms input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--fsu-pink); }
.fms input[type=range]:focus-visible { outline: none; }
.fms input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(0, 240, 255, .45); }
.fms .fms-mono { font-family: var(--fsu-mono); }
html:has(.fms) { overflow: hidden; }

.fms-app { height: 100%; display: flex; flex-direction: column; }

/* top bar */
.fms .fms-name {
    width: min(230px, 18vw); height: 28px; margin-left: 6px; padding: 0 8px; border: 1px solid transparent; background: transparent;
    font: 700 15px/1 var(--fsu-display); border-left: 1px solid var(--fsu-line); border-radius: 0 7px 7px 0;
}
.fms .fms-name:hover { border-color: var(--fsu-line2); }
.fms-save { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: var(--fsu-muted); }
.fms-save .fsu-i { width: 15px; height: 15px; }
.fms-save.is-ok .fsu-i { color: var(--fsu-good); }
.fms-save.is-saving .fsu-i { color: var(--fsu-cyan); animation: fms-pulse 1s infinite; }
.fms-save.is-off .fsu-i { color: var(--fsu-warn); }
.fms-topacts { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.fms-credits { text-decoration: none; }
.fms-exportbtn small { font-size: 10.5px; font-weight: 700; opacity: .85; padding-left: 7px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, .3); }

/* body grid */
.fms-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 52px 268px minmax(0, 1fr) 320px; gap: 10px; padding: 10px; }
.fms-rail { width: 52px; }
.fms-left, .fms-right { min-height: 0; }
.fms-right { display: flex; flex-direction: column; gap: 10px; }
.fms-tabs { flex: none; }
.fms-tabs button .fsu-i { width: 13px; height: 13px; }
.fms-panel { display: flex; flex-direction: column; gap: 10px; }

/* layers */
.fms-layers { display: flex; flex-direction: column; gap: 2px; }
.fms-layer { display: grid; grid-template-columns: 28px 28px minmax(0, 1fr) 64px; align-items: center; gap: 2px; padding: 2px 4px 2px 0; border-radius: 8px; }
.fms-layer:hover { background: rgba(255, 255, 255, .03); }
.fms-layer-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-weight: 600; font-size: 12.5px; padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fms-layer-name small { font: 600 10.5px/1 var(--fsu-mono); color: var(--fsu-dim); }
.fms-layer.is-hidden .fms-layer-name { color: var(--fsu-dim); text-decoration: line-through; text-decoration-color: rgba(141, 152, 171, .4); }
.fms-layer.is-locked .fms-layer-name::after { content: ""; }
.fms-layer input[type=range] { margin: 0; }

/* quick add */
.fms-genlist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fms .fms-gen { justify-content: flex-start; padding: 0 8px; font-size: 11.5px; }
.fms .fms-gen span { overflow: hidden; text-overflow: ellipsis; }
.fms .fms-gen.is-on { border-color: rgba(0, 240, 255, .5); background: rgba(0, 240, 255, .1); color: #c9fbff; }
.fms .fms-gen.is-on .fsu-i:last-child { margin-left: auto; color: var(--fsu-cyan); }

/* frames */
.fms-framegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fms-frame {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px; border-radius: 9px; border: 1px solid var(--fsu-line2);
    background: var(--fsu-bg2); cursor: pointer; transition: border-color .15s, background .15s;
}
.fms-frame:hover { border-color: rgba(0, 240, 255, .45); }
.fms-frame.is-on { border-color: rgba(255, 47, 158, .7); background: rgba(255, 47, 158, .08); box-shadow: 0 0 14px rgba(255, 47, 158, .2); }
.fms-frame img, .fms-frame-none { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; display: grid; place-items: center; background: #0b0e17; color: var(--fsu-dim); }
.fms-frame small { font-size: 11px; font-weight: 600; color: var(--fsu-muted); text-align: center; }
.fms-frame small em { font-style: normal; font-size: 9px; color: var(--fsu-pink); border: 1px solid rgba(255, 47, 158, .5); border-radius: 4px; padding: 0 3px; margin-left: 2px; }
.fms-frame.is-soon { opacity: .55; cursor: not-allowed; }

/* viewport */
.fms-stage { outline: none; touch-action: none; user-select: none; cursor: default; }
.fms-stage.is-over { box-shadow: inset 0 0 0 2px var(--fsu-cyan); }
.fms-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fms-stage[data-tool=pan], .fms-stage.is-space { cursor: grab; }
.fms-stage.is-panning { cursor: grabbing !important; }
.fms-stage[data-tool=text] { cursor: text; }
.fms-stage[data-tool=zone], .fms-stage[data-tool=rect], .fms-stage[data-tool=pen], .fms-stage[data-tool=picker] { cursor: crosshair; }
.fms-stage[data-tool=eraser] { cursor: none; }
.fms-stage[data-cursor=move] { cursor: move; }
.fms-stage[data-cursor=resize] { cursor: nwse-resize; }
.fms-stage[data-cursor=rotate] { cursor: alias; }
.fms-hintbar { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); max-width: calc(100% - 260px); pointer-events: none; text-align: center; }
.fms-hint { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(8, 10, 17, .66); border: 1px solid var(--fsu-line); backdrop-filter: blur(8px); color: var(--fsu-muted); }
.fms-vtop { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.fms-vtop .fsu-btn { background: rgba(10, 13, 21, .78); backdrop-filter: blur(8px); }
.fms-status {
    position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    background: rgba(8, 10, 17, .72); border: 1px solid var(--fsu-line2); backdrop-filter: blur(10px); pointer-events: none;
    font: 600 11.5px/1 var(--fsu-mono); color: #cfd7e3; white-space: nowrap;
}
.fms-status .fms-mode { color: var(--fsu-dim); }
.fms-zoomtools { position: absolute; right: 10px; bottom: 10px; }
.fms-restore {
    position: absolute; left: 50%; top: 52px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 12px;
    border: 1px solid rgba(0, 240, 255, .35); background: rgba(10, 18, 28, .92); box-shadow: var(--fsu-shadow); white-space: nowrap; z-index: 4;
}
.fms-restore > .fsu-i { color: var(--fsu-cyan); }

/* right panel fields */
.fms-field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--fsu-muted); min-width: 0; }
.fms-field > span:first-child { font-weight: 600; display: flex; justify-content: space-between; gap: 6px; }
.fms-field output { font: 600 11px/1.2 var(--fsu-mono); color: #c9d2e0; }
.fms-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.fms [data-scope] { display: flex; flex-direction: column; gap: 9px; }
.fms-colorwrap { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 3px; border-radius: 8px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); }
.fms-colorwrap input[type=color] { width: 26px; height: 24px; padding: 0; border: 0; border-radius: 5px; background: none; cursor: pointer; flex: none; }
.fms-colorwrap input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.fms-colorwrap input[type=color]::-webkit-color-swatch { border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px; }
.fms .fms-colorwrap code { background: none; padding: 0; color: var(--fsu-muted); font-size: 10.5px; }
.fms-colorgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fms-switch { font-size: 12px; color: #cdd5e2; }
.fms-fontprev { font-size: 26px; line-height: 1.25; padding: 6px 10px; border-radius: 8px; background: #090c14; border: 1px solid var(--fsu-line); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.fms .fsu-empty .fsu-i { display: inline-block; width: 22px; height: 22px; color: var(--fsu-dim); margin-bottom: 4px; }
.fms .fsu-empty b { color: var(--fsu-muted); }
.fms-warn { color: var(--fsu-warn) !important; display: flex; align-items: center; gap: 6px; }
.fms-warn .fsu-i { width: 14px; height: 14px; }
.fms-ok { color: var(--fsu-good); }
.fms-quote { font-size: 12.5px; color: #cdd5e2; line-height: 1.5; }
.fms .fsu-card > .fsu-btn-block + .fsu-btn-block { margin-top: -2px; }

/* theme presets */
.fms-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fms-preset { display: flex; flex-direction: column; gap: 6px; padding: 7px; border-radius: 10px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s var(--fsu-ease); }
.fms-preset:hover { border-color: rgba(255, 47, 158, .55); transform: translateY(-1px); }
.fms-preset b { font: 700 13px/1.1 var(--fsu-display); letter-spacing: .02em; }
.fms-sw { display: flex; height: 16px; border-radius: 5px; overflow: hidden; }
.fms-sw i { flex: 1; }

/* modal */
.fms-modal { position: fixed; inset: 0; z-index: 2147483100; display: grid; place-items: center; padding: 16px; background: rgba(3, 4, 8, .66); backdrop-filter: blur(6px); }
.fms-modal-card { width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--fsu-line2); background: linear-gradient(180deg, #141a27, #0d1119); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); }
.fms-modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--fsu-line); }
.fms-modal-head h2 { display: flex; align-items: center; gap: 8px; margin-right: auto; font: 700 20px/1.1 var(--fsu-display); }
.fms-modal-head h2 .fsu-i { width: 20px; height: 20px; color: var(--fsu-pink); }
.fms-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.fms-plist { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.fms-prow .fsu-row-name { font-family: var(--fsu-font); font-size: 13px; }
.fms-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fms-sum li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .025); border: 1px solid var(--fsu-line); }
.fms-sum li span { color: var(--fsu-muted); }
.fms-prog { display: grid; gap: 6px; }
.fms-prog small { color: var(--fsu-muted); }
.fms-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.fms-bar > div { height: 100%; border-radius: inherit; background: var(--fsu-grad); box-shadow: 0 0 16px rgba(255, 47, 158, .5); transition: width .3s var(--fsu-ease); }
.fms-done, .fms-err { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; }
.fms-done { border: 1px solid rgba(52, 211, 153, .4); background: rgba(52, 211, 153, .07); }
.fms-done > .fsu-i { color: var(--fsu-good); }
.fms-done > div { flex: 1; display: grid; gap: 2px; }
.fms-done small { color: var(--fsu-muted); }
.fms-err { border: 1px solid rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .07); color: #fecaca; }
.fms-err > .fsu-i { color: var(--fsu-bad); }

/* guest + admin notes (outside the app) */
.fms-guest { max-width: 640px; margin: 24px auto; padding: 28px; border: 1px solid rgba(255, 47, 158, .45); border-radius: 16px; text-align: center; background: #0a0a1a; color: var(--fsu-text); position: relative; z-index: 1; }
.fms-guest p { margin: 10px 0; }
.fms-admin-flag { margin: 0 0 12px; padding: 6px 12px; border: 1px dashed #ff2f9e; border-radius: 8px; font-size: 13px; }

@keyframes fms-pulse { 50% { opacity: .35; } }

@media (max-width: 1360px) {
    .fms-body { grid-template-columns: 52px 236px minmax(0, 1fr) 290px; }
    .fms-topacts .fsu-btn span, .fms-top .fsu-btn-ghost span { display: none; }
}
@media (max-width: 1100px) {
    .fms { position: static; height: auto; }
    html:has(.fms) { overflow: auto; }
    .fms-body { grid-template-columns: 1fr; }
    .fms-rail { width: auto; }
    .fms-stage { height: 70vh; }
    .fms-left, .fms-right { overflow: visible; }
    .fms .fms-name, .fms-save span { display: none; }
    .fms-hintbar { display: none; }
}
@media (max-width: 640px) {
    .fms-exportbtn small, .fms-exportbtn span { display: none; }
    .fms-status .fms-mode, .fms-status .fsu-vsep:nth-of-type(2) { display: none; }
    .fms-vtop .fsu-btn span { display: none; }
}

/* ==========================================================================
   Wave 2 (agent D): quick edit, heal, icons, text paths, label styles, base
   switcher, AI frame, templates, shortcuts, context menu, overview inset.
   ========================================================================== */
.fms-stage[data-tool=quick], .fms-stage[data-tool=curve], .fms-stage[data-tool=snap], .fms-stage[data-tool=icon] { cursor: crosshair; }
.fms-stage[data-tool=heal] { cursor: none; }
.fms-stage[data-cursor=point] { cursor: pointer; }

/* base switcher (top bar) + its settings card (top left of the map) */
.fms-basesw { margin-left: 8px; }
.fms .fms-baseseg button .fsu-i { width: 14px; height: 14px; }
.fms .fms-baseseg button.is-on { color: #fff; background: linear-gradient(135deg, rgba(0, 240, 255, .22), rgba(168, 85, 247, .26)); box-shadow: inset 0 0 0 1px rgba(0, 240, 255, .45); }
.fms-basecard {
    position: absolute; left: 10px; top: 10px; z-index: 3; width: 258px; display: flex; flex-direction: column; gap: 9px; padding: 10px 12px 12px;
    border-radius: 12px; border: 1px solid var(--fsu-line2); background: rgba(10, 13, 21, .9); backdrop-filter: blur(10px); box-shadow: var(--fsu-shadow);
}
.fms-basecard-head { display: flex; align-items: center; gap: 8px; }
.fms-basecard-head > .fsu-i { width: 16px; height: 16px; color: var(--fsu-cyan); }
.fms-basecard-head b { flex: 1; font: 700 14px/1.1 var(--fsu-display); letter-spacing: .02em; }
.fms-bsets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fms-bsets button { display: flex; flex-direction: column; gap: 3px; padding: 3px; border-radius: 8px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); cursor: pointer; }
.fms-bsets button.is-on { border-color: rgba(0, 240, 255, .7); }
.fms-bsets img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 5px; }
.fms-bsets small { font-size: 10px; color: var(--fsu-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fms .fms-attr-note { font-size: 10.5px; color: var(--fsu-dim); }
.fms-attrib {
    position: absolute; right: 10px; bottom: 54px; max-width: min(520px, calc(100% - 180px)); padding: 3px 8px; border-radius: 6px;
    background: rgba(8, 10, 17, .7); color: #aab4c4; font-size: 10.5px; line-height: 1.35; pointer-events: none; text-align: right;
}

/* overview inset */
.fms-mini {
    position: absolute; left: 10px; bottom: 48px; width: 66px; height: 99px; border-radius: 8px; overflow: hidden; z-index: 2;
    border: 1px solid var(--fsu-line2); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); cursor: pointer; opacity: .92; transition: width .2s var(--fsu-ease), height .2s var(--fsu-ease), opacity .2s;
}
.fms-mini:hover { width: 132px; height: 198px; opacity: 1; }
.fms-mini canvas { width: 100%; height: 100%; display: block; }

/* quick edit inline text */
.fms .fms-inline {
    position: absolute; z-index: 5; transform: translate(-50%, -50%); width: 220px; height: 34px; padding: 0 10px; border-radius: 8px;
    border: 1px solid rgba(0, 240, 255, .8); background: rgba(8, 10, 17, .92); color: #fff; font: 600 14px/1 var(--fsu-font);
    box-shadow: 0 0 0 4px rgba(0, 240, 255, .15), var(--fsu-shadow);
}

/* context menu */
.fms-ctx {
    position: absolute; z-index: 6; min-width: 214px; padding: 5px; border-radius: 11px; border: 1px solid var(--fsu-line2);
    background: rgba(14, 18, 27, .97); backdrop-filter: blur(10px); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.fms-ctx-head { padding: 5px 9px 6px; font: 700 10.5px/1 var(--fsu-font); letter-spacing: .08em; text-transform: uppercase; color: var(--fsu-dim); }
.fms .fms-ctx button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 0; border-radius: 7px; background: none; color: #d6dde8; cursor: pointer; text-align: left; font-size: 12.5px; }
.fms .fms-ctx button:hover:not(:disabled) { background: rgba(255, 47, 158, .14); color: #fff; }
.fms .fms-ctx button:disabled { opacity: .4; cursor: not-allowed; }
.fms-ctx button .fsu-i { width: 15px; height: 15px; color: var(--fsu-muted); }
.fms-ctx button span { flex: 1; }
.fms .fms-ctx kbd { font: 600 10px/1 var(--fsu-mono); color: var(--fsu-dim); }
.fms-ctx hr { border: 0; border-top: 1px solid var(--fsu-line); margin: 4px 2px; }

/* label style chips */
.fms-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.fms .fms-styles button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 3px 4px; border-radius: 9px; border: 1px solid var(--fsu-line2); background: #090c14; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.fms .fms-styles button:hover { border-color: rgba(0, 240, 255, .5); }
.fms .fms-styles button.is-on { border-color: rgba(255, 47, 158, .8); box-shadow: 0 0 12px rgba(255, 47, 158, .25); }
.fms-styles canvas { width: 100%; height: auto; aspect-ratio: 132 / 60; display: block; }
.fms-styles small { font-size: 10.5px; font-weight: 600; color: var(--fsu-muted); }
.fms-styles button.is-on small { color: #ffd0e8; }
.fms-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fms .fms-row3 .fsu-btn { padding: 0 6px; justify-content: center; font-size: 11.5px; }

/* icon picker */
.fms-ipick { display: flex; flex-direction: column; gap: 7px; }
.fms-isearch { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); }
.fms-isearch .fsu-i { width: 14px; height: 14px; color: var(--fsu-dim); flex: none; }
.fms .fms-isearch input[type=text] { border: 0; background: none; height: 30px; padding: 0; }
.fms-icats { display: flex; flex-wrap: wrap; gap: 4px; }
.fms .fms-icats button, .fms .fms-chips button { height: 24px; padding: 0 8px; border-radius: 99px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); color: var(--fsu-muted); font-size: 11px; font-weight: 600; cursor: pointer; }
.fms .fms-icats button.is-on, .fms .fms-chips button.is-on { color: #fff; border-color: rgba(255, 47, 158, .7); background: rgba(255, 47, 158, .14); }
.fms-igrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; max-height: 236px; overflow-y: auto; padding-right: 2px; }
.fms .fms-igrid button { aspect-ratio: 1; display: grid; place-items: center; padding: 5px; border-radius: 8px; border: 1px solid transparent; background: rgba(255, 255, 255, .03); color: #dfe6f0; cursor: pointer; }
.fms .fms-igrid button:hover { background: rgba(0, 240, 255, .1); border-color: rgba(0, 240, 255, .35); }
.fms .fms-igrid button.is-on { border-color: rgba(255, 47, 158, .8); background: rgba(255, 47, 158, .14); color: #fff; }
.fms-igrid svg, .fms-icur-prev svg { width: 100%; height: 100%; }
.fms-igrid .fsu-empty { grid-column: 1 / -1; }
.fms-icur { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 10px; background: #090c14; border: 1px solid var(--fsu-line); }
.fms-icur-prev { width: 34px; height: 34px; padding: 4px; border-radius: 8px; background: rgba(255, 47, 158, .12); color: #fff; flex: none; }
.fms-icur b { flex: 1; font-size: 13px; }
.fms-align { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.fms .fms-align .fsu-btn { justify-content: center; padding: 0 4px; }
.fms .fms-resample { align-self: end; justify-content: center; }
.fms-healstate:empty { display: none; }
.fms .fms-healstate { color: #c9fbff; }

/* modals: wide variant, shortcuts, AI frame, templates */
.fms-modal-card.is-wide { width: min(980px, 100%); }
.fms-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fms-keys h3 { font: 700 13px/1 var(--fsu-display); letter-spacing: .08em; text-transform: uppercase; color: var(--fsu-pink); margin-bottom: 8px; }
.fms-keys div { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); font-size: 12.5px; }
.fms .fms-keys kbd { flex: none; width: 128px; font: 600 11px/1.3 var(--fsu-mono); color: #c9fbff; }
.fms-keys span { color: #cdd5e2; }
.fms textarea { width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); color: var(--fsu-text); font: 500 13px/1.45 var(--fsu-font); resize: vertical; outline: none; box-shadow: none; margin: 0; }
.fms textarea:focus { border-color: rgba(0, 240, 255, .55); }
.fms-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fms .fms-colchip { display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 var(--fsu-mono); }
.fms-colchip i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .25); }
.fms-ai-off { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .07); }
.fms-ai-off > .fsu-i { color: var(--fsu-warn); width: 18px; height: 18px; flex: none; margin-top: 1px; }
.fms-ai-off div { display: grid; gap: 3px; }
.fms-ai-off small { color: var(--fsu-muted); }
.fms-ai .fsu-btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
.fms .fms-frame-ai { color: var(--fsu-pink); background: radial-gradient(circle at 50% 40%, rgba(255, 47, 158, .25), #0b0e17 70%); }
.fms-tpl-h { display: flex; align-items: center; gap: 7px; font: 700 15px/1 var(--fsu-display); letter-spacing: .04em; margin-top: 4px; }
.fms-tpl-h .fsu-i { width: 16px; height: 16px; color: var(--fsu-pink); }
.fms-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fms-tpl { display: flex; flex-direction: column; gap: 7px; padding: 7px; border-radius: 12px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); transition: border-color .15s, transform .15s var(--fsu-ease); }
.fms-tpl:hover { border-color: rgba(255, 47, 158, .6); transform: translateY(-2px); }
.fms-tpl-thumb { aspect-ratio: 2 / 3; border-radius: 8px; overflow: hidden; background: #141821; }
.fms-tpl-thumb canvas, .fms-tpl-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.fms-tpl-meta { display: grid; gap: 2px; min-height: 52px; }
.fms-tpl-meta b { font: 700 14px/1.1 var(--fsu-display); letter-spacing: .02em; }
.fms-tpl-meta small { font-size: 11px; color: var(--fsu-muted); line-height: 1.35; }
.fms .fms-tpl .fsu-btn { justify-content: center; }

@media (max-width: 1360px) {
    .fms-basesw .fsu-seg button span { display: none; }
}
@media (max-width: 1100px) {
    /* the app stays a full screen layer (no site header around it) and scrolls inside: map first, panels under it */
    .fms { position: fixed; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
    html:has(.fms) { overflow: hidden; }
    .fms-app { height: auto; min-height: 100%; }
    .fms-rail { order: 1; }
    .fms-stage { order: 2; }
    .fms-left { order: 3; }
    .fms-right { order: 4; }
    .fms-mini { display: none; }
    .fms-keys { grid-template-columns: 1fr 1fr; }
}
/* phones: viewing, templates and light edits; the map gets the screen, panels stack under it */
@media (max-width: 640px) {
    .fms-top { flex-wrap: wrap; row-gap: 6px; height: auto; padding-top: 6px; padding-bottom: 6px; }
    .fms-topacts { margin-left: 0; }
    .fms-basesw { order: 10; width: 100%; margin-left: 0; }
    .fms-basesw .fsu-seg { width: 100%; }
    .fms .fms-basesw .fsu-seg button { flex: 1; justify-content: center; }
    .fms-basesw .fsu-seg button span { display: inline; }
    .fms-body { padding: 6px; gap: 6px; }
    .fms-rail { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 4px; }
    .fms-rail .fsu-rail-sep { width: 1px; height: 22px; margin: 0 2px; }
    .fms-stage { height: 62vh; }
    .fms-basecard { width: calc(100% - 20px); }
    .fms-attrib { max-width: calc(100% - 20px); bottom: 46px; }
    .fms-keys { grid-template-columns: 1fr; }
    .fms-tplgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .fms-modal { padding: 8px; }
    .fms-modal-body { padding: 12px; }
    .fms-igrid { grid-template-columns: repeat(5, 1fr); }
    .fms-keysbtn, .fms-top .fsu-btn-ghost, .fms-credits { display: none; }
    .fms-top { gap: 6px; }
}

/* follow-up: explicit on / off state of the street and postal layers, Game view switch */
.fms .fms-gen.is-toggle { justify-content: flex-start; }
.fms-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex: none; background: var(--fsu-dim); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.fms-dot.is-on { background: var(--fsu-good); box-shadow: 0 0 8px rgba(52, 211, 153, .7); }
.fms .fms-gen.is-toggle:not(.is-on) { color: var(--fsu-muted); border-style: dashed; }
.fms-onoff { font: 700 10.5px/1 var(--fsu-mono); padding: 3px 7px; border-radius: 99px; color: var(--fsu-muted); border: 1px solid var(--fsu-line2); }
.fms-onoff.is-on { color: #c9fbe8; border-color: rgba(52, 211, 153, .55); background: rgba(52, 211, 153, .12); }
.fms-vtop .fms-gamebtn.fsu-btn-accent { background: rgba(0, 60, 70, .82); }
@media (max-width: 640px) { .fms-vtop .fms-gamebtn span { display: none; } }

/* ---- wave 3: import pack, expansions, live sync, maps-full dialog ---- */
.fms-dz { display: grid; justify-items: center; gap: 6px; padding: 22px 14px; border: 1.5px dashed var(--fsu-line2); border-radius: 14px; background: var(--fsu-bg2); text-align: center; cursor: pointer; color: var(--fsu-muted); transition: border-color .15s, background .15s; }
.fms-dz:hover, .fms-dz:focus-visible, .fms-dz.is-over { border-color: var(--fsu-cyan); background: rgba(0, 240, 255, .05); outline: none; }
.fms-dz > .fsu-i { width: 28px; height: 28px; color: var(--fsu-cyan); }
.fms-dz b { color: var(--fsu-text); font: 700 15px/1.2 var(--fsu-display); }
.fms-dz small { font-size: 11.5px; }
.fms-dz.is-off { opacity: .5; cursor: not-allowed; }
.fms-dz.has-file { border-style: solid; border-color: rgba(52, 211, 153, .5); }
.fms-dz-file { font: 600 12px/1.3 var(--fsu-mono); color: var(--fsu-good); word-break: break-all; }
.fms-unavail { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .07); }
.fms-unavail > .fsu-i { color: var(--fsu-warn); flex: none; }
.fms-unavail > div { display: grid; gap: 2px; font-size: 12.5px; }
.fms-unavail small { color: var(--fsu-muted); }
.fms-packs { display: grid; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--fsu-line); }
.fms-packs h4 { font: 700 12px/1 var(--fsu-display); letter-spacing: .06em; text-transform: uppercase; color: var(--fsu-muted); }
.fms-minelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fms-minelist li { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; border-radius: 8px; background: var(--fsu-bg2); border: 1px solid var(--fsu-line); }
.fms-minelist li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.is-soon { opacity: .6; }
.is-soon small { font-size: 10px; color: var(--fsu-muted); }
.fms-xrow { display: grid; gap: 6px; padding: 8px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); }
.fms-xhead { display: flex; align-items: center; gap: 6px; }
.fms-xhead b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px/1.1 var(--fsu-display); }
.fms-xgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.fms-xgrid label { display: grid; gap: 2px; font-size: 10px; color: var(--fsu-muted); font-weight: 700; }
.fms-xgrid input { width: 100%; min-width: 0; padding: 4px 5px; border-radius: 6px; border: 1px solid var(--fsu-line2); background: var(--fsu-panel); color: var(--fsu-text); font: 600 11.5px/1.2 var(--fsu-mono); }
.fms-xadd { display: grid; gap: 6px; margin-top: 6px; }
.fms-xmine { display: flex; gap: 4px; align-items: center; }
.fms-xmine .fsu-btn { flex: 1; }
.fms-code { display: flex; align-items: center; gap: 6px; margin: 4px 0; padding: 4px 4px 4px 8px; border-radius: 8px; background: #05070c; border: 1px solid var(--fsu-line2); }
.fms-code code { flex: 1; min-width: 0; font: 600 11.5px/1.35 var(--fsu-mono); color: #9be7ff; word-break: break-all; }
.fms-steps { margin: 6px 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12px; color: #cdd5e2; }
.fms-tokenbox { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .07); }
.fms-tokenbox small { color: var(--fsu-muted); font-size: 11px; }
.fms-livestat { margin: 6px 0; }
.fms-bad { color: var(--fsu-bad); }
.fms-good { color: var(--fsu-good); }
.fms-livestat li b { text-align: right; }
.fms-livecard .fms-steps > li { min-width: 0; overflow-wrap: anywhere; }
.fms-livecard .fms-steps code { word-break: break-all; }
.fms-livecard .fms-code { min-width: 0; max-width: 100%; }
.fms-livehow { margin: 6px 0; font-size: 12px; }
.fms-livecard .fms-livehow > summary { cursor: pointer; color: var(--fsu-muted); font: 600 12px/1.4 var(--fsu-font, inherit); text-transform: none; letter-spacing: 0; padding: 2px 0; margin: 0; background: none; border: 0; list-style: disclosure-closed inside; display: list-item; }
.fms-livecard .fms-livehow[open] > summary { list-style-type: disclosure-open; }
.fms-livecard .fms-livehow > summary::before, .fms-livecard .fms-livehow > summary::after { content: none; display: none; }
.fms-pvbtn { margin-top: 8px; }
.fms-sendlive { margin-top: 8px; }
.fms-exlive { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.fms-exlive .fms-sendlive { margin-top: 0; }
@media (max-width: 520px) { .fms-exlive { grid-template-columns: 1fr; } }
.fms-fulld .fms-plist { max-height: 46vh; overflow-y: auto; }
.fms-basecard { max-height: calc(100% - 20px); overflow-y: auto; }

/* ---- Oct 29 quality pass: export price + success, welcome, template filters, quick start, fit at 1366 ---- */
.fms-save.is-new .fsu-i { color: var(--fsu-dim); }
.fms .fms-gen-st { margin-left: auto; flex: none; font: 700 9.5px/1 var(--fsu-mono); font-style: normal; text-transform: uppercase; padding: 3px 5px; border-radius: 99px; color: var(--fsu-dim); border: 1px solid var(--fsu-line2); }
.fms .fms-gen-st.is-on { color: #c9fbe8; border-color: rgba(52, 211, 153, .55); background: rgba(52, 211, 153, .14); }
.fms .fms-gen span { min-width: 0; white-space: nowrap; }

/* export: price box, summary note, progress line, success + install steps */
.fms-pricebox { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 47, 158, .35); background: linear-gradient(120deg, rgba(255, 47, 158, .08), rgba(168, 85, 247, .08)); }
.fms-pricebox > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.fms-pricebox b { font: 700 20px/1.05 var(--fsu-display); letter-spacing: .02em; color: #fff; }
.fms-pricebox small { color: var(--fsu-muted); font-size: 12px; }
.fms-pricebox.is-short { border-color: rgba(251, 191, 36, .5); background: rgba(251, 191, 36, .07); }
.fms-pill { flex: none; font: 700 11px/1 var(--fsu-mono); padding: 5px 9px; border-radius: 99px; border: 1px solid rgba(255, 47, 158, .55); color: #ffd0e8; background: rgba(255, 47, 158, .12); white-space: nowrap; }
.fms-pill.is-ok { border-color: rgba(52, 211, 153, .55); color: #c9fbe8; background: rgba(52, 211, 153, .12); }
.fms .fms-sumnote { margin-top: -6px; text-align: right; font-size: 11px; }
.fms-prog small { display: flex; justify-content: space-between; gap: 8px; }
.fms-prog .fms-bar > div { background-size: 200% 100%; animation: fms-flow 1.6s linear infinite; }
@keyframes fms-flow { to { background-position: -200% 0; } }
.fms-success { display: grid; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid rgba(52, 211, 153, .45); background: radial-gradient(420px 160px at 0 0, rgba(52, 211, 153, .14), transparent 70%), rgba(52, 211, 153, .04); animation: fms-pop .35s var(--fsu-ease, ease-out); }
.fms-success-head { display: flex; align-items: center; gap: 10px; }
.fms-success-head > .fsu-i { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; color: #052e1f; background: var(--fsu-good); box-shadow: 0 0 22px rgba(52, 211, 153, .55); }
.fms-success-head div { display: grid; gap: 2px; }
.fms-success-head b { font: 700 19px/1.1 var(--fsu-display); color: #fff; }
.fms-success-head small, .fms-success-msg { color: var(--fsu-muted); font-size: 12px; }
.fms-install { margin: 0; padding: 0; list-style: none; counter-reset: fi; display: grid; gap: 6px; }
.fms-install li { counter-increment: fi; display: flex; gap: 9px; align-items: baseline; font-size: 12.5px; color: #cdd5e2; line-height: 1.45; }
.fms-install li::before { content: counter(fi); flex: none; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font: 700 11px/1 var(--fsu-mono); color: #c9fbff; background: rgba(0, 240, 255, .12); border: 1px solid rgba(0, 240, 255, .35); transform: translateY(3px); }
.fms-install code { word-break: break-all; }
.fms-excard .fms-sendlive { margin-top: 0; }
.fms-excard.is-done .fms-sum, .fms-excard.is-done .fms-sumnote, .fms-excard.is-done .fms-pricebox, .fms-excard.is-done .fsu-check, .fms-excard.is-done .fms-exnote { display: none; }
.fms-exportbtn { position: relative; }
.fms-exportbtn.is-running::after, .fms-exportbtn.is-ready::after { content: ""; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--fsu-bg); }
.fms-exportbtn.is-running::after { background: var(--fsu-cyan); animation: fms-pulse 1s infinite; }
.fms-exportbtn.is-ready::after { background: var(--fsu-good); box-shadow: 0 0 10px rgba(52, 211, 153, .8); }
@keyframes fms-pop { from { transform: scale(.97); opacity: 0; } }

/* empty selection: quick start */
.fms-qs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; counter-reset: qs; }
.fms .fms-qs button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.fms .fms-qs button:hover { border-color: rgba(255, 47, 158, .55); background: rgba(255, 47, 158, .06); }
.fms-qs .fsu-i { flex: none; width: 18px; height: 18px; color: var(--fsu-pink); }
.fms-qs span { display: grid; gap: 1px; min-width: 0; }
.fms-qs b { font-size: 12.5px; color: var(--fsu-text); }
.fms-qs small { font-size: 11px; color: var(--fsu-muted); }

/* templates: welcome strip, filters, clickable thumbnails with a category tag */
.fms-welcome { display: grid; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 47, 158, .35); background: radial-gradient(600px 200px at 0 0, rgba(255, 47, 158, .12), transparent 70%), radial-gradient(500px 200px at 100% 100%, rgba(0, 240, 255, .08), transparent 70%), var(--fsu-bg2); }
.fms-welcome-lead { font: 600 15px/1.4 var(--fsu-font); color: #e8edf5; }
.fms-steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fms-steps3 li { display: flex; gap: 10px; align-items: flex-start; }
.fms-steps3 i { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 700 13px/1 var(--fsu-display); font-style: normal; color: #fff; background: var(--fsu-grad); }
.fms-steps3 span { display: grid; gap: 2px; }
.fms-steps3 b { font-size: 13px; }
.fms-steps3 small { font-size: 11.5px; color: var(--fsu-muted); line-height: 1.35; }
.fms .fms-blank { justify-self: start; }
.fms-tplbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fms-tpl-h .fsu-count { font: 600 11px/1 var(--fsu-mono); margin-left: 4px; }
.fms .fms-tpl-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; }
.fms .fms-tpl-thumb img { transition: transform .25s var(--fsu-ease, ease-out); }
.fms .fms-tpl:hover .fms-tpl-thumb img { transform: scale(1.04); }
.fms-tpl-cat { position: absolute; left: 6px; top: 6px; font: 700 9.5px/1 var(--fsu-mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; padding: 4px 6px; border-radius: 6px; color: #fff; background: rgba(6, 8, 14, .72); backdrop-filter: blur(4px); }
.fms-tpl[hidden] { display: none !important; }

/* inline code in notes never breaks inside a command */
.fms .fsu-note code, .fms .fms-livecard code { word-break: normal; white-space: nowrap; }

/* hint: top left, never under the Game view / Radar buttons */
.fms-hintbar { left: 10px; right: 276px; max-width: none; transform: none; text-align: left; }
@media (max-width: 1500px) {
    .fms .fms-name { width: min(170px, 13vw); }
    .fms-top .fsu-btn-ghost span { display: none; }
    .fms-credits span { font-size: 12px; }
}
@media (max-width: 1440px) {
    .fms-save span, .fms-basesw .fsu-seg button span { display: none; }
}
@media (max-width: 1100px) {
    /* phone and tablet: the selected item's properties right under the map, the layers after */
    .fms-right { order: 3; }
    .fms-left { order: 4; }
    .fms-steps3 { grid-template-columns: 1fr; }
}

/* export: Community share box */
.fms-share { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); }
.fms-share.is-on { border-color: rgba(0, 240, 255, .35); }
.fms-share-head { display: flex; align-items: center; gap: 8px; }
.fms-share-head > .fsu-i { width: 16px; height: 16px; color: var(--fsu-cyan); }
.fms-share-head b { flex: 1; font: 700 14px/1.1 var(--fsu-display); letter-spacing: .02em; }
.fms-shareres { display: flex; align-items: center; gap: 6px; }
.fms-shareres .fsu-i { width: 14px; height: 14px; color: var(--fsu-cyan); flex: none; }
.fms-excard.is-done .fms-share { display: none; }
.fms .fms-gen.is-toggle { gap: 5px; padding: 0 6px; }
.fms .fms-gen.is-toggle .fsu-i { width: 13px; height: 13px; flex: none; }
.fms .fms-gen-st { padding: 2px 4px; font-size: 9px; }
.fms .fms-share input[type=text] { font-size: 13px; }

/* v1.4 custom icons ("Your icons" in the icon picker) */
.fms-cicons { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; border: 1px dashed rgba(0, 240, 255, .28); background: rgba(0, 240, 255, .04); }
.fms-cihead { display: flex; align-items: center; gap: 8px; }
.fms-cihead b { font-size: 12px; }
.fms-cihead small { flex: 1; color: var(--fsu-dim); font-size: 11px; }
.fms-ciopts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fms-cifit { display: inline-flex; gap: 3px; }
.fms .fms-cifit button { height: 24px; padding: 0 8px; border-radius: 99px; border: 1px solid var(--fsu-line2); background: var(--fsu-bg2); color: var(--fsu-muted); font-size: 11px; font-weight: 600; cursor: pointer; }
.fms .fms-cifit button.is-on { color: #fff; border-color: rgba(255, 47, 158, .7); background: rgba(255, 47, 158, .14); }
.fms-ciwhite { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fsu-muted); cursor: pointer; }
.fms-cigrid { max-height: 150px; }
.fms-ci { position: relative; }
.fms .fms-cigrid .fms-ci > button[data-cicon] { width: 100%; padding: 4px; background: repeating-conic-gradient(rgba(255, 255, 255, .06) 0 25%, transparent 0 50%) 0 0 / 10px 10px; }
.fms-cigrid img, .fms-icur-prev img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fms .fms-cigrid .fms-cidel { position: absolute; top: -4px; right: -4px; width: 17px; height: 17px; aspect-ratio: auto; padding: 2px; border-radius: 99px; background: #1a0d22; border: 1px solid rgba(255, 47, 158, .6); opacity: 0; transition: opacity .12s; }
.fms .fms-ci:hover .fms-cidel, .fms .fms-cidel:focus-visible { opacity: 1; }
@media (hover: none) { .fms .fms-cigrid .fms-cidel { opacity: 1; } }
.fms-cidel .fsu-i { width: 11px; height: 11px; }
.fms-icur-prev.is-custom { padding: 2px; }