/* Generated from lliu56/minicut feat/mini-ui @ 0f92b091, packages/ui/src. Do not edit; regenerate. */
/* ---- tokens.css ---- */
/* ============================================================
   @minicut/ui tokens.

   Copied from the locked reference docs/design/mini-ui-v2.html (Mini UI V2). Same names, same
   values. tests/tokens.test.ts fails if any of them drift from the reference.

   This is the ONLY file in the package with colour, size or duration literals. Every component
   reads these by name (tests/guards.test.ts).

   Grounds: Studio is the default. Put data-m="night" or data-m="light" on any element (normally
   <body>) and everything inside it switches, the way the reference switches body[data-m]. Each
   ground re-declares the shared set on [data-m] so tokens built from --m-bg (the focus ring)
   follow the ground they sit in.

   Not carried: the V1 block at the top of the reference (--ac, --canvas and the rest). The
   reference says that block is generated from MiniCut's app/globals.css and only paints the
   "Now" comparison samples. It is the cyan set V2 takes out.
   ============================================================ */

/* ---------- Type, sizes, corners, motion, status. Reference :root (V2) ---------- */
:root, [data-m] {
  color-scheme: dark;
  --m-font: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --m-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --m-t-11: 11px; --m-l-11: 14px;
  --m-t-12: 12px; --m-l-12: 16px;
  --m-t-13: 13px; --m-l-13: 18px;
  --m-t-14: 14px; --m-l-14: 20px;
  --m-t-16: 16px; --m-l-16: 22px;
  --m-t-18: 18px; --m-l-18: 24px;
  --m-t-20: 20px; --m-l-20: 26px;

  --m-h-xs: 20px; --m-h-sm: 24px; --m-h-md: 28px; --m-h-lg: 32px; --m-h-xl: 36px;
  --m-r-1: 4px; --m-r-2: 6px; --m-r-3: 8px; --m-r-4: 12px; --m-r-5: 14px;

  --m-dur-1: 120ms; --m-dur-2: 160ms; --m-dur-3: 220ms;
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* status: the only hues in the app chrome. No yellow, no amber, no cyan. */
  --m-ok:   #3ECF8E;
  --m-warn: #FF8A73;
  --m-bad:  #F0646C;
  --m-plan: #8F88FF;   /* Studio plan badge only */
}

/* ---------- GROUND A, STUDIO. Today's minicut ground, kept. Default ---------- */
:root, [data-m], [data-m="studio"] {
  --m-bg:      #121212;
  --m-panel:   #161616;
  --m-raised:  #1a1a1a;
  --m-glass:   rgba(28, 28, 28, 0.86);
  --m-tip:     #262626;
  --m-input:   rgba(0, 0, 0, 0.22);
  --m-code:    #0d0d0d;
}

/* ---------- GROUND B, NIGHT. One step deeper, so pictures and the glass read brighter ---------- */
[data-m="night"] {
  --m-bg:      #0b0b0c;
  --m-panel:   #111112;
  --m-raised:  #151516;
  --m-glass:   rgba(24, 24, 25, 0.88);
  --m-tip:     #222224;
  --m-input:   rgba(0, 0, 0, 0.30);
  --m-code:    #080809;
}

/* ---------- Text, overlays, lines, materials. Reference body block ---------- */
:root, [data-m] {
  --m-fg:   #f2f2f2;
  --m-fg-2: rgba(255, 255, 255, 0.66);
  --m-fg-3: rgba(255, 255, 255, 0.50);
  --m-fg-4: rgba(255, 255, 255, 0.34);
  --m-ov-1: rgba(255, 255, 255, 0.04);
  --m-ov-2: rgba(255, 255, 255, 0.07);
  --m-ov-3: rgba(255, 255, 255, 0.10);
  --m-line:   rgba(255, 255, 255, 0.07);
  --m-line-2: rgba(255, 255, 255, 0.11);
  --m-line-3: rgba(255, 255, 255, 0.18);
  --m-line-hi: rgba(255, 255, 255, 0.42);

  /* MATERIALS. The high-end part. Each is a face, an edge, a lit lip and a shadow. */
  --m-face-card:  linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008) 60%);
  --m-lip-card:   inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --m-sheen:      radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.05), transparent 55%);
  /* BUTTONS ARE FLAT (Li, round 5): one solid fill, a 1px edge, no gradient,
     no lit lip, no drop shadow. Depth stays on cards, menus and modals only. */
  --m-face-glass: rgba(255, 255, 255, 0.07);
  --m-face-glass-hover: rgba(255, 255, 255, 0.11);
  --m-edge-glass: rgba(255, 255, 255, 0.10);
  --m-lip-glass:  0 0 0 0 transparent;
  --m-face-light: #ededed;
  --m-face-light-hover: #ffffff;
  --m-light-fg:   #111111;
  --m-lip-light:  0 0 0 0 transparent;
  --m-shadow-control: 0 0 0 0 transparent;
  --m-shadow-float:   0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.55);
  --m-shadow-modal:   0 2px 6px rgba(0, 0, 0, 0.4), 0 28px 72px rgba(0, 0, 0, 0.65);
  --m-focus: 0 0 0 1px var(--m-bg), 0 0 0 3px rgba(255, 255, 255, 0.30);
}

/* ============================================================
   COMPONENT VALUES. Every value below is read off a component rule in the reference, where it
   sits as a literal. Naming them here keeps the components literal-free and the rendered values
   identical. The Daylight block further down carries the reference's "Daylight fixes" the same
   way, as overrides of these names.
   ============================================================ */
:root, [data-m] {
  /* hairlines and small steps */
  --m-hair: 1px;
  --m-hair-2: 1.5px;
  --m-hair-3: 2px;

  /* spacing, by pixel value, as the reference writes paddings, gaps and margins */
  --m-sp-1: 1px;  --m-sp-2: 2px;  --m-sp-3: 3px;  --m-sp-4: 4px;  --m-sp-5: 5px;
  --m-sp-6: 6px;  --m-sp-7: 7px;  --m-sp-8: 8px;  --m-sp-9: 9px;  --m-sp-10: 10px;
  --m-sp-11: 11px; --m-sp-12: 12px; --m-sp-13: 13px; --m-sp-14: 14px; --m-sp-16: 16px;
  --m-sp-18: 18px; --m-sp-20: 20px; --m-sp-22: 22px; --m-sp-24: 24px; --m-sp-28: 28px;
  --m-sp-29: 29px; --m-sp-32: 32px; --m-sp-36: 36px; --m-sp-44: 44px; --m-sp-48: 48px;

  /* the mono micro label (.micro) and the quieter pane label (.lab) */
  --m-t-micro: 10.5px; --m-l-micro: 14px; --m-track-micro: 0.08em;
  --m-t-lab: 9.5px;    --m-l-lab: 12px;
  --m-t-10: 10px;
  --m-t-11-5: 11.5px;

  /* icons: Lucide, 15 in a 28 control, stroke 1.6 */
  --m-icon: 15px;
  --m-icon-14: 14px;
  --m-icon-13: 13px;
  --m-icon-12: 12px;
  --m-icon-11: 11px;
  --m-icon-stroke: 1.6;

  /* page and title tracking */
  --m-track-title: -0.015em;
  --m-track-h2: -0.01em;
  --m-track-stat: -0.02em;

  /* buttons and keys (.btn, .btn-danger, .spin, .kbd) */
  --m-press: 0.985;
  --m-danger-fg: #ff9a9f;
  --m-dur-spin: 0.8s;
  --m-kbd: 18px;

  /* inputs (.input, textarea.input, .select) */
  --m-input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  --m-input-ring: 0 0 0 3px rgba(255, 255, 255, 0.06);
  --m-textarea-min: 76px;
  --m-select-min: 160px;

  /* floating surfaces (.menu, .toast, .modal): top lip, frost, open rise */
  --m-lip-float: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --m-frost-menu: blur(18px) saturate(150%);
  --m-menu-w: 228px;
  --m-pop-max: 320px;
  --m-rise: 4px;

  /* choice controls (.chk, .sw, .seg) */
  --m-chk: 14px;
  --m-chk-tick-w: 7px;
  --m-chk-tick-h: 4px;
  --m-chk-tick: 1.6px;
  --m-radio-dot: 6px;
  --m-radio-edge: var(--m-line-hi);
  --m-r-pill: 999px;
  --m-sw-w: 26px;
  --m-sw-h: 16px;
  --m-sw-knob: 12px;
  --m-sw-travel: 10px;
  --m-sw-track: var(--m-ov-3);
  --m-sw-knob-off: #bdbdbd;
  --m-sw-track-on: rgba(255, 255, 255, 0.86);
  --m-sw-knob-on: #121212;
  --m-seg-track: rgba(0, 0, 0, 0.25);
  --m-seg-btn: 22px;

  /* badges, dots, avatars, tooltip (.badge, .dot, .av, .tip, @keyframes breathe) */
  --m-lip-badge: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --m-lip-live: var(--m-lip-glass);
  --m-plan-fg: #c3bfff;
  --m-media-scrim: rgba(14, 14, 14, 0.62);
  --m-media-fg: #ffffff;
  --m-frost-media: blur(8px);
  --m-dot: 6px;
  --m-live-dot: #ffffff;
  --m-breathe-from: rgba(255, 255, 255, 0.5);
  --m-breathe-to: rgba(255, 255, 255, 0);
  --m-breathe-r: 3px;
  --m-dur-breathe: 1.6s;
  --m-av: 24px;
  --m-av-sm: 20px;
  --m-face-av: linear-gradient(180deg, #3a3a3a, #252525);
  --m-lip-av: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --m-lip-tip: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --m-tip-delay: 400ms;
  --m-toast-ms: 4000ms;

  /* modal and toast (.modal, .scrim, .toast) */
  --m-modal-sm: 420px;
  --m-modal-md: 560px;
  --m-modal-lg: 720px;
  --m-lip-modal: var(--m-lip-float);
  --m-scrim: rgba(0, 0, 0, 0.55);
  --m-toast-w: 344px;
  --m-frost-toast: blur(18px);

  /* data table (.dt) */
  --m-dt-min: 640px;
  --m-dt-th: 34px;
  --m-dt-td: 40px;
  --m-dt-dense: 32px;
  --m-dt-fit: 44px;
  --m-dt-act: 52px;
  --m-dt-act-btn: 88px;
  --m-dt-act-two: 160px;

  /* media tiles (.tile, .thumb) */
  --m-r-0: 0;
  --m-tile-min: 176px;
  --m-tile-ring: 0 0 0 1px rgba(255, 255, 255, 0.35);
  --m-thumb-shade: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45));
  --m-media-btn: rgba(14, 14, 14, 0.66);
  --m-media-veil: rgba(0, 0, 0, 0.42);
  --m-media-track: rgba(255, 255, 255, 0.12);
  --m-media-fill: linear-gradient(90deg, rgba(255, 255, 255, 0.55), #ffffff);

  /* code and keys (.code, .tk-*, .keyf) */
  --m-l-code: 19px;
  --m-lip-code: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --m-tk-s: #a9d6b9;
  --m-tk-n: #f2b39f;
  --m-copied-ms: 1800ms;

  /* runs, trace, stats, charts (.run, .sd, .step, .stat, .prog, .spark, .bars) */
  --m-sd: 7px;
  --m-run-edge: rgba(255, 255, 255, 0.7);
  --m-trace-lane: 46%;
  --m-lane: rgba(255, 255, 255, 0.32);
  --m-lane-now: linear-gradient(90deg, rgba(255, 255, 255, 0.4), #ffffff);
  --m-l-stat: 26px;
  --m-stat-sk: 96px;
  --m-lip-prog: inset 0 1px 1px rgba(0, 0, 0, 0.35);
  --m-prog-fill: linear-gradient(90deg, rgba(255, 255, 255, 0.5), #ffffff);
  --m-spark-h: 30px;
  --m-spark-line: rgba(255, 255, 255, 0.55);
  --m-spark-dot: #ffffff;
  --m-spark-dot-d: 4.4px;
  --m-bars-h: 112px;

  /* empty state (.empty, .ei) */
  --m-empty-icon: 34px;
  --m-empty-measure: 34ch;

  /* console shell (.win, .side, .ws, .mark, .main, .top) */
  --m-side-w: 212px;
  --m-top-h: 46px;
  --m-ws-h: 36px;
  --m-mark: 18px;
  --m-r-mark: 5px;
  --m-shell-h: 100dvh;
  --m-main-glow: radial-gradient(70% 50% at 50% 0%, rgba(255, 255, 255, 0.025), transparent 70%);
  --m-top-bg: color-mix(in srgb, var(--m-bg) 84%, transparent);
  --m-bal-sk: 48px;
  /* any opaque colour: mask images read only alpha */
  --m-mask: #000000;

  /* sign-in (ours, from the kit) */
  --m-auth-w: 360px;
  --m-auth-ts: 65px;

  /* request detail (ours, from .kv) */
  --m-fact-label: 96px;
  --m-next-min: 320px;
  --m-next-h: 112px;
}

/* ---------- GROUND C, DAYLIGHT. Paper ground, white lit cards, near-black main button ---------- */
[data-m="light"] {
  color-scheme: light;
  --m-bg:      #f6f6f5;
  --m-panel:   #ffffff;
  --m-raised:  #ffffff;
  --m-glass:   rgba(255, 255, 255, 0.84);
  --m-tip:     #ffffff;
  --m-input:   #ffffff;
  --m-code:    #fafaf9;

  --m-fg:   #161616;
  --m-fg-2: rgba(0, 0, 0, 0.68);
  --m-fg-3: rgba(0, 0, 0, 0.53);
  --m-fg-4: rgba(0, 0, 0, 0.36);
  --m-ov-1: rgba(0, 0, 0, 0.025);
  --m-ov-2: rgba(0, 0, 0, 0.05);
  --m-ov-3: rgba(0, 0, 0, 0.09);
  --m-line:   rgba(0, 0, 0, 0.07);
  --m-line-2: rgba(0, 0, 0, 0.11);
  --m-line-3: rgba(0, 0, 0, 0.18);
  --m-line-hi: rgba(0, 0, 0, 0.55);

  --m-face-card:  linear-gradient(180deg, #ffffff, #fdfdfc 60%);
  --m-lip-card:   inset 0 1px 0 #ffffff, 0 1px 2px rgba(0, 0, 0, 0.04);
  --m-sheen:      radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.9), transparent 55%);
  --m-face-glass: #ffffff;
  --m-face-glass-hover: #f3f3f2;
  --m-edge-glass: rgba(0, 0, 0, 0.12);
  --m-lip-glass:  0 0 0 0 transparent;
  --m-face-light: #161616;
  --m-face-light-hover: #2c2c2c;
  --m-light-fg:   #fafafa;
  --m-lip-light:  0 0 0 0 transparent;
  --m-shadow-control: 0 0 0 0 transparent;
  --m-shadow-float:   0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.10);
  --m-shadow-modal:   0 2px 6px rgba(0, 0, 0, 0.06), 0 28px 72px rgba(0, 0, 0, 0.18);
  --m-focus: 0 0 0 1px var(--m-bg), 0 0 0 3px rgba(0, 0, 0, 0.28);

  /* status, one step deeper so text on a 12% tint stays readable on white */
  --m-ok:   #158a57;
  --m-warn: #d4553c;
  --m-bad:  #d93b43;
  --m-plan: #6b61e8;
}

/* ---------- Daylight component values (the reference's "Daylight fixes") ---------- */
[data-m="light"] {
  --m-danger-fg: #b8323a;
  --m-input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  --m-input-ring: 0 0 0 3px rgba(0, 0, 0, 0.06);
  --m-lip-float: inset 0 1px 0 #ffffff;
  --m-sw-track: rgba(0, 0, 0, 0.14);
  --m-sw-knob-off: #ffffff;
  --m-sw-track-on: #161616;
  --m-sw-knob-on: #ffffff;
  --m-seg-track: rgba(0, 0, 0, 0.045);
  /* The reference's Daylight fix `.chk:checked { border-color: transparent }` also reaches radios. Copied as is. */
  --m-radio-edge: transparent;
  --m-lip-badge: none;
  --m-lip-live: inset 0 0 0 1px var(--m-edge-glass);
  --m-plan-fg: #554bd0;
  --m-live-dot: var(--m-fg);
  --m-breathe-from: rgba(0, 0, 0, 0.35);
  --m-breathe-to: rgba(0, 0, 0, 0);
  --m-face-av: linear-gradient(180deg, #f4f4f3, #e4e4e2);
  --m-lip-av: inset 0 1px 0 #ffffff;
  --m-lip-tip: 0 0 0 0 transparent;
  --m-lip-modal: 0 0 0 0 transparent;
  --m-scrim: rgba(20, 20, 20, 0.28);
  --m-tile-ring: 0 0 0 1px rgba(0, 0, 0, 0.55);
  --m-lip-code: none;
  --m-tk-s: #2f7a52;
  --m-tk-n: #b4532f;
  --m-run-edge: #161616;
  --m-lane: rgba(0, 0, 0, 0.22);
  --m-lane-now: linear-gradient(90deg, rgba(0, 0, 0, 0.35), #161616);
  --m-lip-prog: inset 0 1px 1px rgba(0, 0, 0, 0.06);
  --m-prog-fill: linear-gradient(90deg, rgba(0, 0, 0, 0.45), #161616);
  --m-spark-line: rgba(0, 0, 0, 0.5);
  --m-spark-dot: #161616;
}
/* ---- base.css ---- */
/* @minicut/ui base. What the reference sets on body and on every element, scoped to the kit. */

*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }

/* A ground: the page background, text colour and type the reference puts on <body>. */
.m-root, [data-m] {
  background: var(--m-bg);
  color: var(--m-fg);
  font: 400 var(--m-t-13)/var(--m-l-13) var(--m-font);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--m-dur-3) var(--m-ease);
}

.m-mono { font-family: var(--m-mono); font-variant-numeric: tabular-nums; }
.m-micro { font: 500 var(--m-t-micro)/var(--m-l-micro) var(--m-mono); letter-spacing: var(--m-track-micro); text-transform: uppercase; color: var(--m-fg-3); }
.m-lab { font: 500 var(--m-t-lab)/var(--m-l-lab) var(--m-mono); letter-spacing: var(--m-track-micro); text-transform: uppercase; color: var(--m-fg-4); }

/* Visually hidden, still read by screen readers. */
.m-sr { position: absolute; width: var(--m-hair); height: var(--m-hair); margin: calc(-1 * var(--m-hair)); padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-pop { from { opacity: 0; transform: translateY(var(--m-rise)); } }
@keyframes m-breathe { 0%, 100% { box-shadow: 0 0 0 0 var(--m-breathe-from); } 50% { box-shadow: 0 0 0 var(--m-breathe-r) var(--m-breathe-to); opacity: 0.7; } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  :where([class^="m-"], [class*=" m-"]), :where([class^="m-"], [class*=" m-"])::before, :where([class^="m-"], [class*=" m-"])::after { animation: none !important; transition: none !important; }
}
/* ---- components/Card/Card.css ---- */
/* Reference: .card */
.m-card { border: var(--m-hair) solid var(--m-line); border-radius: var(--m-r-4); background: var(--m-sheen), var(--m-face-card), var(--m-panel); box-shadow: var(--m-lip-card); min-width: 0; }
/* Reference: .panel-h */
.m-panel-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-sp-8); padding: var(--m-sp-10) var(--m-sp-12); border-bottom: var(--m-hair) solid var(--m-line); }
.m-panel-h > b { font-weight: 500; white-space: nowrap; }
/* ---- components/Button/Button.css ---- */
/* Reference: .btn and its variants and sizes */
.m-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--m-sp-6); height: var(--m-h-md); padding: 0 var(--m-sp-11); border-radius: var(--m-r-3); border: var(--m-hair) solid transparent; font-size: var(--m-t-13); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; background: transparent; transition: background var(--m-dur-1) var(--m-ease), color var(--m-dur-1) var(--m-ease), border-color var(--m-dur-1) var(--m-ease), scale var(--m-dur-1) var(--m-ease); }
.m-btn:focus-visible { outline: none; box-shadow: var(--m-focus); }
.m-btn:active:not(:disabled):not([aria-disabled="true"]) { scale: var(--m-press); }
.m-btn-primary { background: var(--m-face-light); color: var(--m-light-fg); box-shadow: var(--m-lip-light), var(--m-shadow-control); }
.m-btn-primary:hover { background: var(--m-face-light-hover); }
.m-btn-glass { background: var(--m-face-glass); color: var(--m-fg); border-color: var(--m-edge-glass); box-shadow: var(--m-lip-glass), var(--m-shadow-control); }
.m-btn-glass:hover { background: var(--m-face-glass-hover); }
.m-btn-outline { border-color: var(--m-line-2); color: var(--m-fg); }
.m-btn-outline:hover { border-color: var(--m-line-3); background: var(--m-ov-1); }
.m-btn-ghost { color: var(--m-fg-2); }
.m-btn-ghost:hover { background: var(--m-ov-2); color: var(--m-fg); }
.m-btn-danger { background: color-mix(in srgb, var(--m-bad) 14%, transparent); color: var(--m-danger-fg); border-color: color-mix(in srgb, var(--m-bad) 28%, transparent); }
.m-btn-danger:hover { background: color-mix(in srgb, var(--m-bad) 24%, transparent); }
.m-btn:disabled { background: var(--m-ov-1); color: var(--m-fg-4); border-color: transparent; box-shadow: none; cursor: not-allowed; }
.m-btn[aria-busy="true"] { cursor: progress; }
.m-btn-sm { height: var(--m-h-sm); padding: 0 var(--m-sp-8); font-size: var(--m-t-12); border-radius: var(--m-r-2); gap: var(--m-sp-5); }
.m-btn-sm svg.m-i { width: var(--m-icon-13); height: var(--m-icon-13); }
.m-btn-lg { height: var(--m-h-lg); padding: 0 var(--m-sp-13); }

/* Reference: .spin */
.m-spin { animation: m-spin var(--m-dur-spin) linear infinite; }
/* ---- components/IconButton/IconButton.css ---- */
/* Reference: .ibtn, .ibtn.sm, .ibtn.xs, .ibtn.glass */
.m-ibtn { display: inline-grid; place-items: center; width: var(--m-h-md); height: var(--m-h-md); padding: 0; border-radius: var(--m-r-3); color: var(--m-fg-2); background: transparent; border: var(--m-hair) solid transparent; cursor: pointer; transition: background var(--m-dur-1) var(--m-ease), color var(--m-dur-1) var(--m-ease); }
.m-ibtn:hover { background: var(--m-ov-2); color: var(--m-fg); }
.m-ibtn:focus-visible { outline: none; box-shadow: var(--m-focus); }
.m-ibtn[aria-pressed="true"] { background: var(--m-ov-2); color: var(--m-fg); }
.m-ibtn:disabled { color: var(--m-fg-4); background: transparent; cursor: not-allowed; }
.m-ibtn.sm { width: var(--m-h-sm); height: var(--m-h-sm); border-radius: var(--m-r-2); }
.m-ibtn.sm svg.m-i { width: var(--m-icon-14); height: var(--m-icon-14); }
.m-ibtn.xs { width: var(--m-h-xs); height: var(--m-h-xs); border-radius: var(--m-r-1); }
.m-ibtn.xs svg.m-i { width: var(--m-icon-12); height: var(--m-icon-12); }
.m-ibtn.glass { background: var(--m-face-glass); border-color: var(--m-edge-glass); box-shadow: var(--m-lip-glass), var(--m-shadow-control); color: var(--m-fg); }
.m-ibtn.glass:hover { background: var(--m-face-glass-hover); }
.m-ibtn.glass:focus-visible { box-shadow: var(--m-focus); }
/* ---- components/Field/Field.css ---- */
/* Reference: .field, .label, .help */
.m-field { display: flex; flex-direction: column; gap: var(--m-sp-6); min-width: 0; }
.m-label { font-size: var(--m-t-12); font-weight: 500; color: var(--m-fg-2); }
.m-help { font-size: var(--m-t-12); color: var(--m-fg-3); }
.m-help.err { color: var(--m-bad); }
/* ---- components/Input/Input.css ---- */
/* Reference: .input, .iw. Textarea shares the box (see Textarea.css). */
.m-input { height: var(--m-h-md); width: 100%; padding: 0 var(--m-sp-10); border-radius: var(--m-r-3); background: var(--m-input); border: var(--m-hair) solid var(--m-line-2); box-shadow: var(--m-input-inset); color: var(--m-fg); font-size: var(--m-t-13); transition: border-color var(--m-dur-1) var(--m-ease), box-shadow var(--m-dur-1) var(--m-ease); }
.m-input::placeholder { color: var(--m-fg-4); }
.m-input:hover { border-color: var(--m-line-3); }
.m-input:focus, .m-input.focus-demo { outline: none; border-color: var(--m-line-hi); box-shadow: var(--m-input-inset), var(--m-input-ring); }
.m-input.bad { border-color: color-mix(in srgb, var(--m-bad) 55%, transparent); }
.m-input:disabled { opacity: 0.5; cursor: not-allowed; }
.m-iw { position: relative; display: flex; align-items: center; }
.m-iw > svg.m-i { position: absolute; left: var(--m-sp-9); color: var(--m-fg-3); width: var(--m-icon-14); height: var(--m-icon-14); pointer-events: none; }
.m-iw > svg.m-i + .m-input { padding-left: var(--m-sp-29); }
.m-iw > .m-kbd { position: absolute; right: var(--m-sp-6); }
/* ---- components/Textarea/Textarea.css ---- */
/* Reference: textarea.input */
textarea.m-input { height: auto; min-height: var(--m-textarea-min); padding: var(--m-sp-7) var(--m-sp-10); line-height: var(--m-l-13); resize: vertical; }
/* ---- components/Chip/Chip.css ---- */
/* Reference: .chip */
.m-chip { display: inline-flex; align-items: center; gap: var(--m-sp-6); height: var(--m-h-sm); padding: 0 var(--m-sp-9); border-radius: var(--m-r-2); background: var(--m-face-glass); border: var(--m-hair) solid var(--m-edge-glass); box-shadow: var(--m-lip-glass); color: var(--m-fg-2); font-size: var(--m-t-12); cursor: pointer; white-space: nowrap; }
.m-chip:hover { color: var(--m-fg); background: var(--m-face-glass-hover); }
.m-chip:focus-visible { outline: none; box-shadow: var(--m-focus); }
.m-chip[aria-pressed="true"] { color: var(--m-fg); border-color: var(--m-line-hi); }
.m-chip:disabled { color: var(--m-fg-4); cursor: not-allowed; }
.m-chip svg.m-i { width: var(--m-icon-13); height: var(--m-icon-13); }
/* ---- components/Segmented/Segmented.css ---- */
/* Reference: .seg */
.m-seg { display: inline-flex; gap: var(--m-sp-2); padding: var(--m-sp-2); border-radius: var(--m-r-3); background: var(--m-seg-track); border: var(--m-hair) solid var(--m-line); }
.m-seg button { height: var(--m-seg-btn); padding: 0 var(--m-sp-9); border: var(--m-hair) solid transparent; border-radius: var(--m-r-2); background: transparent; color: var(--m-fg-3); font-size: var(--m-t-12); font-weight: 500; cursor: pointer; transition: background var(--m-dur-1) var(--m-ease), color var(--m-dur-1) var(--m-ease); }
.m-seg button:hover { color: var(--m-fg); }
.m-seg button[aria-pressed="true"] { background: var(--m-face-glass); border-color: var(--m-edge-glass); color: var(--m-fg); }
.m-seg button:focus-visible { outline: none; box-shadow: var(--m-focus); }
.m-seg button:disabled { color: var(--m-fg-4); cursor: not-allowed; }
/* ---- components/Modal/Modal.css ---- */
/* Reference: .modal, .modal-h, .modal-b, .modal-f; .scrim's black 55% for the page dimmer */
.m-overlay { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--m-sp-16); background: var(--m-scrim); overflow-y: auto; animation: m-fade var(--m-dur-3) var(--m-ease); }
.m-modal { width: 100%; max-width: var(--m-modal-sm); border-radius: var(--m-r-5); background: var(--m-face-card), var(--m-raised); border: var(--m-hair) solid var(--m-line-2); box-shadow: var(--m-lip-modal), var(--m-shadow-modal); color: var(--m-fg); }
.m-overlay .m-modal { animation: m-pop var(--m-dur-3) var(--m-ease); }
.m-modal.md { max-width: var(--m-modal-md); }
.m-modal.lg { max-width: var(--m-modal-lg); }
.m-modal-h { display: flex; align-items: flex-start; gap: var(--m-sp-12); padding: var(--m-sp-16) var(--m-sp-16) 0 var(--m-sp-20); }
.m-modal-h h4 { margin: 0; font-size: var(--m-t-14); line-height: var(--m-l-14); font-weight: 600; flex: 1; }
.m-modal-b { padding: var(--m-sp-8) var(--m-sp-20) var(--m-sp-18); color: var(--m-fg-2); display: grid; gap: var(--m-sp-14); }
.m-modal-f { display: flex; justify-content: flex-end; gap: var(--m-sp-8); padding: var(--m-sp-12) var(--m-sp-16); border-top: var(--m-hair) solid var(--m-line); }
.m-modal-h + .m-modal-f { margin-top: var(--m-sp-16); }
/* ---- screens/Billing/Billing.css ---- */
/* Top-up card: the reference's .panel-b padding, a segmented pick and the main button on the right */
.m-topup { padding: var(--m-sp-12); display: grid; gap: var(--m-sp-12); }
.m-topup-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--m-sp-12); }
.m-topup-other { width: var(--m-select-min); }
.m-topup-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m-sp-12); }
.m-dt td .pos { color: var(--m-ok); }