/* Aerium menu replica — a browser rebuild of the in-game shell.
   Every dimension here is transcribed from TWDO3/uilib.lua so the site and the
   product agree: window 880x600 (uilib.lua:1414), top bar 42px, sub-tab strip
   28px, status bar 16px, columns 50%-6px, rows 32px, 18px checkboxes, 72x20
   keybind chips, 4px slider tracks, 30x18 colour swatches, hairlines at 0.92,
   and radii {Win 8, Panel 6, Row 4} from RADII at uilib.lua:174.

   Rows deliberately have NO border-radius: `Row()` never calls Corner(), which
   makes them the one square-cornered element in the whole menu. */

.m {
  /* Palette defaults are the Sakura preset (uilib.lua:29-52). menu.js rewrites
     these when the Settings theme dropdown changes. */
  --m-bg: #000000;
  --m-panel: #0e0e0e;
  --m-element: #181818;
  --m-inner: #0a0a0a;
  --m-text: #dedede;
  --m-muted: #808084;
  --m-accent: #fed4ff;
  --m-accent2: #c8aac8;
  --m-stroke: #faf0fa;
  --m-hair: rgba(250, 240, 250, 0.08);       /* stroke @ 0.92 */
  --m-hair-strong: rgba(250, 240, 250, 0.14); /* stroke @ 0.86 */
  /* Alphas the source states as Roblox TRANSPARENCY, so the CSS value is the
     complement. These were hardcoded rgba() against Sakura's values and so
     never followed the theme picker:
       chip idle 0.55 tr -> 0.45 alpha
       opt unselected 0.4 tr -> 0.60 alpha
       opt selected 0.1 tr -> 0.90 alpha
       opt hover 0.05 tr -> 0.95 alpha
       btn stroke hover 0.72 tr -> 0.28 alpha  */
  --m-chip: rgba(10, 10, 10, 0.45);
  --m-opt: rgba(24, 24, 24, 0.60);
  --m-opt-sel: rgba(24, 24, 24, 0.90);
  --m-opt-hover: rgba(24, 24, 24, 0.95);
  --m-seg: rgba(10, 10, 10, 0.60);   /* keybind modal segments, 0.6 tr */
  --m-warn: #ffc850;                 /* uilib.lua:51, deliberately not a theme key */
  --m-font: 'Montserrat', system-ui, sans-serif;
  --m-mono: 'Roboto Mono', ui-monospace, monospace;
  --m-w: 880px;
  --m-h: 600px;
  color: var(--m-text);
  font-family: var(--m-font);
}

/* Scale the whole 880x600 window down to fit narrow viewports rather than
   reflowing it — the source notes the columns deliberately never fold. */
/* height fallback: the scaler is absolutely positioned so .m__fit has no
   intrinsic height and depends on JS setting it. If JS never runs the menu
   collapses to nothing, which reads as "it did not load". aspect-ratio gives
   it the right box from the CSS alone.
   overflow:hidden is load-bearing too. `transform: scale()` is visual only --
   the scaler's LAYOUT box stays 880px, so on a phone that 880 leaks into the
   parent's scroll width and the page grows a horizontal scrollbar. */
.m__fit { position: relative; width: 100%; aspect-ratio: 880 / 600; overflow: hidden; }
.m__boot {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  color: var(--muted); font-size: 14px; text-align: center; padding: 0 24px;
}
.m__boot--err { color: var(--danger, #ff5a5a); }
.m__boot code { color: var(--accent-2); }
.m__scaler {
  position: absolute; top: 0; left: 0;
  width: var(--m-w); height: var(--m-h);
  transform-origin: 0 0;
}

.win {
  width: var(--m-w); height: var(--m-h);
  background: var(--m-bg);
  /* Hair(Root, true): 0.86 transparency = 14% alpha. This was full-strength
     #faf0fa -- the bright white outline around the whole window. */
  border: 1px solid var(--m-hair-strong);
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ------------------------------------------------------------- top bar --- */

.m__top {
  height: 42px; flex: none; display: flex; align-items: center;
  background: var(--m-panel); border-bottom: 1px solid var(--m-hair-strong);
  padding: 0 12px; gap: 12px;
}
.m__brand { display: flex; align-items: center; gap: 6px; flex: none; width: 132px; }
.m__name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.m__beta {
  font-size: 10px; font-weight: 700; color: var(--m-muted);
  height: 16px; display: inline-flex; align-items: center;
  border: 1px solid var(--m-hair); border-radius: 7px; padding: 0 5px;
}
/* 10 tab labels at 13px do not fit the 620px the strip gets once the 132px
   brand block and the 128px search box are taken, so the real menu's strip
   scrolls. It does here too, and the type is tightened a notch so all ten are
   visible at 880 without scrolling in the common case. */
.m__tabs {
  display: flex; align-items: center; gap: 0; flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.m__tabs::-webkit-scrollbar { display: none; }
.m__tab {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 5px 7px; border-radius: 6px; flex: none;
  font-family: inherit; font-size: 12.5px; color: var(--m-muted);
  white-space: nowrap; transition: color 0.15s;
}
.m__tab:hover { color: var(--m-text); }
.m__tab:focus-visible {
  outline: 1px solid var(--m-accent); outline-offset: -1px;
  border-radius: 6px; opacity: 0.55;
}
.m__tab.on { color: var(--m-text); }
.m__tab.on::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -3px;
  /* BackgroundTransparency 0.2 -> 80% alpha. TabUL is a plain Frame. */
  height: 2px; background: var(--m-accent); opacity: 0.8;
}
.m__search {
  position: relative; flex: none; width: 128px; height: 26px;
  background: var(--m-inner); border-radius: 6px;
  display: flex; align-items: center;
}
.m__search input {
  width: 100%; height: 100%; background: none; border: 0; outline: 0;
  color: var(--m-text); font-family: inherit; font-size: 13px;
  padding: 0 30px 0 8px;
}
.m__search input::placeholder { color: var(--m-muted); }
.m__count {
  position: absolute; right: 8px; font-family: var(--m-mono);
  font-size: 11px; color: var(--m-accent); pointer-events: none;
}
.m__count:empty { display: none; }
/* Per-tab hit count while a search is active. */
.m__tabn {
  margin-left: 5px; font-family: var(--m-mono); font-size: 10px;
  color: var(--m-accent); border: 1px solid var(--m-accent);
  border-radius: 999px; padding: 0 4px; vertical-align: 1px;
}

/* ---------------------------------------------------------- sub-tab bar --- */
/* Only rendered when a tab has more than one sub-tab, which in the real menu
   is Visuals alone (uilib.lua SetSubBarVisible(#TabObj._SubTabs > 1)). */
.m__subs {
  height: 28px; flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  /* Background at 0.2 transparency = 80% alpha, driven from the theme. The
     source puts no hairline on this band. */
  background: var(--m-bg); opacity: 0.8;
}
.m__sub {
  position: relative; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; color: var(--m-muted);
  padding: 4px 2px; transition: color 0.15s;
}
.m__sub.on { color: var(--m-text); }
.m__sub.on::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: -3px;
  height: 2px; background: var(--m-accent); opacity: 0.9;
}

/* -------------------------------------------------------------- content --- */

/* Content is Size 1,-98 at y=74, so its bottom always lands at 600-24.
   `flex: 1` ran it straight into the status bar. */
.m__body { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 4px 10px 8px; }
.m__body { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.45) transparent; }
.m__col { flex: 0 0 calc(50% - 6px); overflow-y: auto; padding: 6px 0 10px; }
.m__col::-webkit-scrollbar { width: 3px; }
.m__col::-webkit-scrollbar-thumb { background: #fff; opacity: 0.45; }
.m__col { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.45) transparent; }

.sec {
  background: var(--m-panel); border: 1px solid var(--m-hair);
  border-radius: 4px; margin-bottom: 10px; overflow: hidden;
}
.sec__head {
  height: 26px; display: flex; align-items: center;
  padding: 0 10px; position: relative;
}
.sec__head::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--m-accent); opacity: 0.35;
}
.sec__t { font-size: 13px; font-weight: 700; color: var(--m-text); }
/* A bare TextLabel: BackgroundTransparency 1, no fill, no border, fixed 20x14
   at right inset 24px. The accent pill border I had here never existed. */
.sec__pill {
  position: absolute; right: 24px; top: 6px; width: 20px; height: 14px;
  font-family: var(--m-mono); font-size: 11px; color: var(--m-accent);
  display: none; align-items: center; justify-content: center;
}
.sec__pill.on { display: flex; }
.sec__body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 5px; }

/* ----------------------------------------------------------------- row --- */
/* Square corners on purpose. */
.row {
  height: 32px; display: flex; align-items: center; gap: 6px;
  background-color: transparent;
  padding: 0 4px; position: relative;
  transition: background-color 0.15s;
}
.row:hover { background-color: rgba(24, 24, 24, 0.88); }
.row.on { background-color: rgba(24, 24, 24, 0.72); }
.row.on:hover { background-color: rgba(24, 24, 24, 0.5); }

/* toggle */
.cb {
  width: 18px; height: 18px; flex: none; border-radius: 4px;
  background: var(--m-inner); border: 1px solid var(--m-hair-strong);
  display: grid; place-items: center; cursor: pointer;
  color: var(--m-bg); font-size: 14px; font-weight: 700; line-height: 1;
}
.row.on .cb { background: var(--m-accent); }
.lbl {
  flex: 1; min-width: 0; font-size: 14px; color: var(--m-muted);
  background: none; border: 0; font-family: inherit; text-align: left;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row.on .lbl { color: var(--m-text); }
.chip {
  width: 72px; height: 20px; flex: none; border-radius: 4px;
  /* CHIP_FILL_IDLE 0.55 is a transparency -> 45% alpha, not 55%. */
  background: var(--m-chip); border: 1px solid var(--m-hair);
  display: flex; align-items: center; font-family: var(--m-mono);
  font-size: 11px; color: var(--m-muted); cursor: pointer; padding: 0 4px;
}
.chip:hover, .chip.live { background: var(--m-inner); border-color: var(--m-hair-strong); }
.chip.bound { color: var(--m-accent); }
.chip span { flex: 1; text-align: center; }
.chip b { width: 18px; text-align: center; color: var(--m-accent2); font-weight: 500; }

/* slider */
.sld { flex: 1; min-width: 0; position: relative; }
.sld__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sld__n { font-size: 13px; color: var(--m-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sld__v {
  font-size: 13px; color: var(--m-text);
  background: none; border: 0; width: 60px;
  text-align: right; cursor: text; padding: 0;
}
.sld__v:focus { outline: 1px solid var(--m-accent); border-radius: 2px; }
/* uilib.lua:2224-2231 -- Hit is 18px tall at y=14 and the track sits at
   0.5,-2 inside it, so the track occupies y=21..25. `margin-top: 8px` after
   an auto-height label dropped it to ~y=30, overflowing the 32px row. */
.sld__track {
  position: absolute; left: 4px; right: 4px; top: 21px;
  height: 4px; background: var(--m-element);
  border-radius: 2px; cursor: pointer; touch-action: none;
}
.sld__track::after { content: ''; position: absolute; inset: -10px 0; }
.sld__track:focus-visible { outline: 2px solid var(--m-accent); outline-offset: 4px; }
.sld__fill { position: absolute; inset: 0 auto 0 0; background: var(--m-accent); border-radius: 2px; }
.sld__knob {
  position: absolute; top: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: var(--m-accent); transform: translateY(-50%);
}
.sld__knob::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  background: var(--m-accent); opacity: 0;
}
.sld__track:hover .sld__knob::before { opacity: 0.18; }
/* 10 -> 12px while hovering or dragging: the only feedback a slider gives. */
.sld__track:hover .sld__knob,
.sld__track.act .sld__knob { width: 12px; height: 12px; margin-left: -6px; }

/* dropdown / multidropdown */
.dd { flex: 1; min-width: 0; display: flex; align-items: center; cursor: pointer; background: none; border: 0; font-family: inherit; padding: 0; }
.dd__n { flex: 1; text-align: left; font-size: 14px; color: var(--m-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__v {
  width: 76px; text-align: right; font-size: 14px; color: var(--m-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The source uses ">" with Rotation = 90 in F.Display (bold): a thin
   angle bracket on its side, not a filled triangle. */
.dd__c {
  width: 24px; text-align: center; color: var(--m-muted);
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.dd__c > span { display: block; transform: rotate(90deg); }

/* button, keybind, textbox, colour */
.btn2 {
  height: 32px; width: 100%; background: var(--m-inner);
  border: 1px solid var(--m-hair-strong); border-radius: 4px;
  color: var(--m-text); font-family: inherit; font-size: 13px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
/* Hover: 0.86 -> 0.72 transparency is 14% -> 28% alpha. */
.btn2:hover { background: var(--m-element); border-color: var(--m-chip); }
.swatch {
  width: 30px; height: 18px; flex: none; border-radius: 4px;
  border: 1px solid var(--m-hair-strong); cursor: pointer;
}
.tb { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb__n { width: 40%; font-size: 13px; color: var(--m-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb__i {
  flex: 1; min-width: 0; height: 22px; background: var(--m-inner);
  border: 0; border-radius: 4px; padding: 0 8px; color: var(--m-text);
  font-family: inherit; font-size: 13px; outline: 0;
}
.tb__i:focus { box-shadow: 0 0 0 1px var(--m-accent); }
.tb__i::placeholder { color: var(--m-muted); }

/* --------------------------------------------------------------- popup --- */

.pop {
  position: absolute; z-index: 40; background: var(--m-panel);
  border: 1px solid var(--m-hair-strong); border-radius: 6px;
  padding: 4px; min-width: 100%; max-height: 220px; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}
.pop__o {
  width: 100%; border: 0; font-family: inherit; text-align: left;
  display: flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: 4px; font-size: 13px; color: var(--m-text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* `isSel and 0.1 or 0.4` is a TRANSPARENCY -> 90% alpha selected, 60%
   unselected. I had 10% selected and no fill unselected. */
.pop__o { background: var(--m-element); background-color: var(--m-opt); }
.pop__o:hover { background-color: var(--m-opt-hover); }
.pop__o:focus-visible { outline: 2px solid var(--m-accent); outline-offset: -2px; background-color: var(--m-opt-hover); }
.pop__o.sel { background-color: var(--m-opt-sel); color: var(--m-accent); }
.pop__o i { width: 16px; font-style: normal; color: var(--m-accent); }

/* colour picker popup */
.cpop { position: absolute; z-index: 40; width: 230px; background: var(--m-panel); border: 1px solid var(--m-hair-strong); border-radius: 6px; padding: 6px; }
.cpop__sv { position: relative; height: 64px; border-radius: 4px; cursor: crosshair; }
.cpop__cur { position: absolute; width: 6px; height: 6px; border-radius: 3px; border: 1px solid #fff; transform: translate(-50%, -50%); pointer-events: none; }
.cpop__row { display: flex; gap: 6px; margin-top: 6px; }
.cpop__hue { width: 14px; height: 64px; border-radius: 4px; cursor: pointer; background: linear-gradient(to bottom,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.cpop__hex { flex: 1; height: 18px; background: var(--m-inner); border: 0; border-radius: 4px; color: var(--m-text); font-family: var(--m-mono); font-size: 12px; padding: 0 6px; outline: 0; min-width: 0; }
.cpop__prev { height: 14px; border-radius: 4px; border: 1px solid var(--m-hair); margin-top: 6px; }

/* Keybind modal -- uilib.lua:639-723. Fixed 300x230 (300x242 in the
   conflict state), a 104x52 keycap, HOLD/TOGGLE segments, and a clear button. */
.scrim {
  position: absolute; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.62);   /* BackgroundTransparency 0.38 */
  display: grid; place-items: center;
}
.modal {
  position: relative; width: 300px; height: 230px;
  background: var(--m-panel); border: 1px solid var(--m-hair-strong);
  border-radius: 8px; overflow: hidden;
}
.modal.conflict { height: 242px; }
.modal__t {
  position: absolute; left: 16px; top: 18px; right: 16px;
  font-size: 14px; font-weight: 500; color: var(--m-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal__rule { position: absolute; left: 16px; right: 16px; top: 41px; height: 1px; background: var(--m-accent); opacity: 0.28; }
.modal__cap {
  position: absolute; left: 98px; top: 56px; width: 104px; height: 52px;
  background: var(--m-inner); border: 1px solid var(--m-hair-strong);
  border-radius: 6px; display: grid; place-items: center;
  font-family: var(--m-mono); font-size: 25px; color: var(--m-muted);
}
.modal__cap.live { background: var(--m-accent); color: var(--m-bg); }
.modal__hint { position: absolute; left: 16px; right: 16px; top: 114px; text-align: center; font-size: 12px; color: var(--m-muted); }
.modal__segs { position: absolute; left: 16px; right: 16px; top: 146px; display: flex; gap: 10px; }
.modal__seg {
  flex: 1; height: 28px; border-radius: 4px; cursor: pointer;
  background: var(--m-inner); background-color: var(--m-seg);
  border: 0; font: inherit; font-size: 12px; color: var(--m-muted);
}
.modal__seg.on { background-color: var(--m-inner); color: var(--m-text); }
.modal__clear {
  position: absolute; left: 16px; right: 16px; top: 184px; height: 28px;
  border-radius: 4px; border: 0; cursor: pointer; font: inherit; font-size: 13px;
  background: var(--m-inner); background-color: var(--m-seg); color: var(--m-muted);
}
.modal__warn {
  position: absolute; left: 16px; right: 16px; top: 142px; height: 44px;
  border-radius: 4px; padding: 6px 10px; font-size: 12px; color: var(--m-warn);
  background: var(--m-inner);
  border: 1px solid rgba(255, 200, 80, 0.45);
  display: flex; align-items: center;
}
.modal__acts { position: absolute; left: 16px; right: 16px; top: 196px; display: flex; gap: 10px; }
.modal__act {
  flex: 1; height: 28px; border-radius: 4px; border: 0; cursor: pointer;
  font: inherit; font-size: 13px; background: var(--m-inner); color: var(--m-text);
}
.modal__act.take { background: var(--m-accent); color: var(--m-bg); }

/* ---------------------------------------------------------- empty state --- */

/* uilib.lua:1599-1604 -- 14px Muted, centred, `no matches for "<raw>"`. */
.m__empty { padding: 28px 16px; text-align: center; font-size: 14px; color: var(--m-muted); }

/* ---------------------------------------------------------------- toast --- */

/* Library:Notify is a 300x56 card, 4-deep, bottom-right, Element @ 0.04 with a
   2px severity edge. It replaces flash() overwriting the breadcrumb. */
.m__toasts {
  position: absolute; right: 18px; bottom: 26px; z-index: 70;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.m__toast {
  position: relative; width: 300px; min-height: 56px; overflow: hidden;
  background: var(--m-element); background-color: var(--m-opt);
  border: 1px solid var(--m-hair); border-radius: 4px;
  padding: 9px 12px 9px 14px; pointer-events: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.m__toast::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--m-accent);
}
.m__toast b { font-size: 13px; font-weight: 700; }
.m__toast span { font-size: 12px; color: var(--m-muted); }
.m__toast::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--m-accent); width: 100%; transform-origin: 0 50%;
  animation: tbar 2.6s linear forwards;
}
@keyframes tbar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------------------------------------------------------- resize grip --- */

.m__grip {
  position: absolute; right: 0; bottom: 0; width: 24px; height: 24px;
  display: grid; place-items: end; padding: 2px; cursor: nwse-resize;
  color: var(--m-muted); font-size: 13px; z-index: 30;
}

/* ---------------------------------------------------------- status bar --- */

.m__status {
  height: 16px; flex: none; display: flex; align-items: center;
  padding: 0 10px; font-size: 10px; color: var(--m-muted);
}
.m__crumb { flex: 1; }
/* StatusText is Size 1,-56 at x=10 -> right edge 46px in. */
.m__stat { font-family: var(--m-mono); text-align: right; padding-right: 36px; }

/* ------------------------------------------------------------- section --- */

.mdemo { position: relative; display: flex; justify-content: center; }
.mdemo__bg {
  position: absolute; inset: 0; border-radius: 10px;
  background-size: cover; background-position: center;
  filter: brightness(0.34) saturate(0.55);
  border: 1px solid var(--m-hair);
}
.mdemo__win { position: relative; min-width: 0; }
.mdemo__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: end; margin-bottom: 28px; }
.mdemo__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mdemo__points li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); }
.mdemo__points .ic { color: var(--accent); }
.more { margin-top: 18px; }
.more > summary {
  cursor: pointer; font-size: 13px; color: var(--muted);
  list-style: none; display: flex; align-items: center; gap: 7px;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:hover { color: var(--text); }
.more__in { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 5px; }

@media (max-width: 900px) {
  .mdemo__head { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
}

/* Hue-bar cursor -- uilib.lua:2699, a 3px white bar tracking the hue. It
   overlays the bar, so it must not be a flex sibling or it pushes the hex
   field out. */
.cpop__row { position: relative; }
.cpop__hcur {
  position: absolute; left: 0; width: 14px; height: 3px; margin-top: -1.5px;
  background: #fff; border-radius: 1px; pointer-events: none;
}

/* The browser preview reflows on phones so controls retain readable sizes. */
.m__tab:focus-visible { opacity: 1; outline: 2px solid var(--m-accent); }
@media (max-width: 640px) {
  .m__fit { height: 620px; aspect-ratio: auto; }
  .m__scaler { position: relative; width: 100%; height: 620px; }
  .win { width: 100%; height: 620px; }
  .m__top { height: auto; min-height: 104px; flex-wrap: wrap; padding: 10px; gap: 8px; }
  .m__brand { width: auto; flex: 1; }
  .m__tabs { flex: 1 0 100%; order: 3; min-height: 38px; }
  .m__tab { min-height: 36px; padding: 8px 10px; font-size: 13px; }
  .m__search { width: 144px; height: 34px; }
  .m__body { display: block; overflow-y: auto; padding: 8px; }
  .m__col { width: 100%; height: auto; overflow: visible; }
  .sec__body { gap: 6px; padding: 8px; }
  .row { min-height: 44px; height: auto; font-size: 13px; }
  .sld { height: 44px; padding-top: 2px; }
  .sld__track { top: auto; bottom: 6px; }
  .row .lbl { color: var(--m-text); }
  .m__status { height: 28px; font-size: 9px; }
  .m__grip { display: none; }
  .m__stat { padding-right: 0; }
}