/* =====================================================================================================================
   MoTech UI — the design language of MoTech Studio, as one portable stylesheet.
   © Mohamed Amr Abdelaziz. Use: <link rel="stylesheet" href="motech-ui.css"> and keep fonts/ next to it.
   Dark is the main theme; <html data-theme="light"> switches to light (same structure, daylight colours).

   Contents
     1. Fonts                         7. Buttons
     2. Tokens (dark, light)          8. Switches (segmented), checkboxes, fields
     3. Base: page, type, selection   9. Tags, status pills, badges
     4. The light behind the glass   10. Progress: bars and rings, numbers
     5. Surfaces: glass cards, tiles 11. Feedback: toasts, dialogs
     6. Layout helpers               12. Motion: easing, entrances, attention
   ===================================================================================================================== */

/* ---------- 1. Fonts: Manrope, one family for everything (variable 200–800) ---------- */
@font-face {
  font-family: "Manrope"; src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; src: url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */
:root {
  color-scheme: dark;
  /* type */
  --mt-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mt-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ink (text) */
  --mt-ink: #F5F6F8;          /* titles, values */
  --mt-ink-2: #D6D8DE;        /* body text */
  --mt-muted: #A3A6AF;        /* labels, secondary */
  --mt-faint: #727580;        /* hints, disabled */

  /* the one accent, and colours with a fixed meaning */
  --mt-blue: #3F5BFF;         /* the accent: main actions, selection, focus */
  --mt-blue-soft: #6A80FF;    /* its light end: gradients, links on dark */
  --mt-green: #3DDC97;        /* running, done, good */
  --mt-amber: #FFC23D;        /* attention, paused, waiting */
  --mt-coral: #FF5A6E;        /* danger, error, stop */
  --mt-orchid: #D946EF;       /* simulation, "what if", preview */
  --mt-cyan: #3FC8FF;         /* finished, information */
  --mt-orange: #FF8A3D;       /* stopped, interrupted */
  --mt-green-ink: #3DDC97; --mt-amber-ink: #FFC23D; --mt-coral-ink: #FF8794; --mt-orchid-ink: #EAA2F8;   /* text on dark tints */
  --mt-spectrum: linear-gradient(90deg, #FF4D5E, #FF8A3D 20%, #FFD23D 40%, #3DDC97 60%, #3FC8FF 80%, #6A5CFF);   /* data scales only */

  /* surfaces */
  --mt-page: radial-gradient(1400px 900px at 50% -25%, #141417, #070708 60%, #040405 100%);
  --mt-raised: #1C1D22;       /* a flat raised area inside a card */
  --mt-well: #060608;         /* sunk areas: fields, switch tracks */
  --mt-field: #08090B;
  --mt-line: rgba(255, 255, 255, 0.055);
  --mt-line-2: rgba(255, 255, 255, 0.1);
  --mt-line-3: rgba(255, 255, 255, 0.18);
  --mt-track: rgba(255, 255, 255, 0.09);

  /* the light behind the glass (still: drawn once) */
  --mt-orb-1: rgba(70, 95, 255, 0.16); --mt-orb-2: rgba(60, 85, 255, 0.13); --mt-orb-3: rgba(90, 110, 255, 0.07); --mt-orb-4: rgba(120, 140, 255, 0.07);
  --mt-ring-1: rgba(120, 140, 255, 0.14); --mt-ring-2: rgba(90, 110, 255, 0.10);

  /* frosted glass: a tinted base, a light sheen from the top left, a lit rim, a deep soft shadow */
  --mt-glass-base: rgba(9, 9, 12, 0.8);
  --mt-glass-tint: linear-gradient(150deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.012) 40%, rgba(255, 255, 255, 0.005) 100%);
  --mt-glass-rim: linear-gradient(150deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0.09) 100%);
  --mt-glass-blur: blur(26px) saturate(170%);
  --mt-glass-shadow: 0 1px 24px -1px rgba(0, 0, 0, 0.4), 0 32px 64px -30px rgba(0, 0, 0, 1), 0 12px 24px -16px rgba(0, 0, 0, 0.85);
  --mt-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 -1px 0 rgba(0, 0, 0, 0.4), inset 0 0 50px -24px rgba(255, 255, 255, 0.07);
  --mt-tile: linear-gradient(160deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  --mt-tile-base: rgba(6, 6, 8, 0.55);

  /* raised controls: lit top edge, dark lower edge, soft drop */
  --mt-btn-bg: linear-gradient(180deg, #24252B 0%, #18191D 100%);
  --mt-btn-bg-hover: linear-gradient(180deg, #2E2F36 0%, #1F2025 100%);
  --mt-btn-depth: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.55), 0 8px 16px -10px rgba(0, 0, 0, 0.8);
  --mt-btn-press: inset 0 2px 5px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --mt-well-depth: inset 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 1px 0 rgba(255, 255, 255, 0.04);
  /* the coloured gradients: light top, full colour, deeper bottom */
  --mt-grad-blue: linear-gradient(180deg, #6A80FF 0%, #3F5BFF 55%, #3350F0 100%);
  --mt-grad-green: linear-gradient(180deg, #6BF0B6 0%, #3DDC97 55%, #22C381 100%);
  --mt-grad-coral: linear-gradient(180deg, #FF8593 0%, #FF5A6E 55%, #EA3D54 100%);
  --mt-grad-orchid: linear-gradient(180deg, #F2A5FF, #D946EF 60%, #B62ACB);

  /* shape (desktop: precise; touch: softer, see .mt-touch) */
  --mt-r-card: 12px;          /* cards, dialogs, menus */
  --mt-r-panel: 9px;          /* panels and tiles inside a card, toasts */
  --mt-r-ctl: 7px;            /* buttons, fields, switches */
  --mt-r-inner: 5px;          /* the pressed part of a switch */
  --mt-r-tag: 6px;            /* tags and chips */
  --mt-r-bar: 3px;            /* progress bars */

  /* spacing: a 4 px grid */
  --mt-1: 4px; --mt-2: 8px; --mt-3: 12px; --mt-4: 16px; --mt-5: 20px; --mt-6: 24px; --mt-8: 32px; --mt-10: 40px; --mt-12: 48px; --mt-16: 64px;

  /* motion */
  --mt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* everything that arrives or answers */
  --mt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* a small overshoot: toggles, pops */
  --mt-fast: 0.15s; --mt-base: 0.25s; --mt-slow: 0.6s;
  --mt-focus: 0 0 0 3px rgba(63, 91, 255, 0.45);
}
:root[data-theme="light"] {
  color-scheme: light;
  --mt-ink: #0E1015; --mt-ink-2: #33363F; --mt-muted: #6C6F79; --mt-faint: #A2A5AE;
  --mt-blue: #3550F5; --mt-blue-soft: #3F5BFF; --mt-green: #14B87A; --mt-amber: #E8A100; --mt-coral: #E5384F; --mt-orchid: #C026D3; --mt-cyan: #0EA5E9; --mt-orange: #EA6A12;
  --mt-green-ink: #0A8A57; --mt-amber-ink: #946200; --mt-coral-ink: #C8283E; --mt-orchid-ink: #9D1BAF;
  --mt-page: linear-gradient(180deg, #EEF1F6 0%, #E3E7EF 100%);
  --mt-raised: #EEF0F3; --mt-well: rgba(228, 232, 241, 0.75); --mt-field: #F3F4F7;
  --mt-line: rgba(16, 20, 32, 0.07); --mt-line-2: rgba(16, 20, 32, 0.12); --mt-line-3: rgba(16, 20, 32, 0.2); --mt-track: rgba(16, 20, 32, 0.1);
  --mt-orb-1: rgba(120, 110, 255, 0.42); --mt-orb-2: rgba(40, 200, 255, 0.45); --mt-orb-3: rgba(200, 90, 255, 0.28); --mt-orb-4: rgba(40, 220, 255, 0.38);
  --mt-ring-1: rgba(40, 210, 255, 0.55); --mt-ring-2: rgba(170, 110, 255, 0.45);
  --mt-glass-base: rgba(255, 255, 255, 0.5);
  --mt-glass-tint: linear-gradient(150deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.22) 100%);
  --mt-glass-rim: linear-gradient(150deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.55) 35%, rgba(200, 210, 240, 0.35) 70%, rgba(160, 170, 220, 0.4) 100%);
  --mt-glass-blur: blur(24px) saturate(160%);
  --mt-glass-shadow: 0 1px 24px -1px rgba(40, 50, 100, 0.1), 0 30px 60px -28px rgba(40, 50, 110, 0.38), 0 10px 22px -14px rgba(40, 50, 110, 0.22);
  --mt-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(40, 50, 100, 0.06), inset 0 0 40px -18px rgba(255, 255, 255, 0.9);
  --mt-tile: linear-gradient(160deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
  --mt-tile-base: rgba(255, 255, 255, 0.35);
  --mt-btn-bg: linear-gradient(180deg, #FFFFFF 0%, #F2F3F6 100%);
  --mt-btn-bg-hover: linear-gradient(180deg, #FFFFFF 0%, #F7F8FA 100%);
  --mt-btn-depth: inset 0 1px 0 #FFFFFF, inset 0 -2px 0 rgba(40, 50, 100, 0.07), 0 0 0 1px rgba(40, 50, 100, 0.1), 0 2px 3px rgba(40, 50, 100, 0.1), 0 10px 18px -10px rgba(40, 50, 110, 0.35);
  --mt-btn-press: inset 0 2px 4px rgba(16, 20, 32, 0.14), 0 0 0 1px rgba(16, 20, 32, 0.12);
  --mt-well-depth: inset 0 2px 5px rgba(40, 50, 100, 0.14), inset 0 0 0 1px rgba(40, 50, 100, 0.07), 0 1px 0 #FFFFFF;
  --mt-grad-blue: linear-gradient(180deg, #4B64FF, #3550F5);
}
/* touch screens (phones, a slide on a big screen): softer, rounder, larger */
.mt-touch { --mt-r-card: 22px; --mt-r-panel: 16px; --mt-r-ctl: 14px; --mt-r-inner: 11px; --mt-r-tag: 999px; }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.mt {
  margin: 0; min-height: 100vh; font: 14px/1.45 var(--mt-sans); color: var(--mt-ink-2); background: var(--mt-page);
  -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11";
}
.mt h1, .mt h2, .mt h3, .mt h4 { margin: 0; color: var(--mt-ink); font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.mt-display { font-size: clamp(40px, 6vw, 76px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; color: var(--mt-ink); }
.mt-h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.mt-h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.mt-h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.mt-lead { font-size: 18px; line-height: 1.5; color: var(--mt-muted); max-width: 62ch; }
.mt-body { font-size: 14px; line-height: 1.5; max-width: 70ch; }
.mt-label { font-size: 12.5px; font-weight: 600; color: var(--mt-muted); }
.mt-hint { font-size: 12.5px; color: var(--mt-muted); line-height: 1.5; }
.mt-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mt-big { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: var(--mt-ink); font-variant-numeric: tabular-nums; }
.mt-big small { font-size: 0.5em; font-weight: 700; color: var(--mt-muted); margin-left: 2px; }
.mt code, .mt-code { font: 12.5px/1.6 var(--mt-mono); }
.mt a:not([class]) { color: var(--mt-blue-soft); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mt ::selection { background: rgba(63, 91, 255, 0.35); color: inherit; }
.mt ::-webkit-scrollbar { width: 10px; height: 10px; }
.mt ::-webkit-scrollbar-thumb { background: var(--mt-line-3); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; }
.mt ::-webkit-scrollbar-track { background: transparent; }
.mt :focus-visible { outline: none; box-shadow: var(--mt-focus); }

/* ---------- 4. The light behind the glass: two soft orbs and two lit rings, still (the blur is computed once) ---------- */
body.mt::before, body.mt::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body.mt::before {
  background:
    radial-gradient(34vmax 34vmax at 88% 6%, var(--mt-orb-1), transparent 62%),
    radial-gradient(30vmax 30vmax at 8% 96%, var(--mt-orb-2), transparent 62%),
    radial-gradient(22vmax 22vmax at 58% 108%, var(--mt-orb-3), transparent 64%),
    radial-gradient(18vmax 18vmax at 30% -6%, var(--mt-orb-4), transparent 64%);
}
body.mt::after {
  background:
    radial-gradient(circle at 78% -18%, transparent 0 27vmax, var(--mt-ring-1) 27.4vmax, transparent 28.6vmax),
    radial-gradient(circle at 20% 118%, transparent 0 25vmax, var(--mt-ring-2) 25.4vmax, transparent 26.8vmax);
  filter: blur(6px); opacity: 0.8;
}

/* ---------- 5. Surfaces ---------- */
/* glass card: the main container (one level; never a card inside a card — use .mt-tile inside) */
.mt-card {
  position: relative; padding: var(--mt-5); border-radius: var(--mt-r-card);
  background: var(--mt-glass-tint) padding-box, linear-gradient(var(--mt-glass-base), var(--mt-glass-base)) padding-box, var(--mt-glass-rim) border-box;
  border: 1px solid transparent;
  backdrop-filter: var(--mt-glass-blur); -webkit-backdrop-filter: var(--mt-glass-blur);
  box-shadow: var(--mt-glass-shadow), var(--mt-glass-inset);
}
.mt-card > h3:first-child, .mt-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mt-card-head .mt-grow { flex: 1; }
/* a tile: a quieter panel inside a card (facts, a chart, a group of settings) */
.mt-tile {
  padding: var(--mt-4); border-radius: var(--mt-r-panel);
  background: var(--mt-tile) padding-box, linear-gradient(var(--mt-tile-base), var(--mt-tile-base)) padding-box, var(--mt-glass-rim) border-box;
  border: 1px solid transparent;
}
/* a dark stage for media (3D, camera, video, images): solid, never blurred behind */
.mt-stage { position: relative; overflow: hidden; border-radius: var(--mt-r-card); border: 1px solid transparent;
  background: radial-gradient(70% 75% at 50% 40%, rgba(120, 135, 255, 0.08), transparent 70%) padding-box, linear-gradient(#0A0B0F, #08090C) padding-box, var(--mt-glass-rim) border-box;
  box-shadow: var(--mt-glass-shadow); }
.mt-well { background: var(--mt-well); box-shadow: var(--mt-well-depth); border-radius: var(--mt-r-ctl); }
.mt-divider { height: 1px; background: var(--mt-line-2); border: 0; margin: var(--mt-4) 0; }

/* ---------- 6. Layout helpers ---------- */
.mt-row { display: flex; align-items: center; gap: var(--mt-3); flex-wrap: wrap; }
.mt-stack { display: flex; flex-direction: column; gap: var(--mt-3); }
.mt-grid { display: grid; gap: var(--mt-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.mt-grow { flex: 1; min-width: 0; }
.mt-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
.mt-facts dt { color: var(--mt-muted); }
.mt-facts dd { margin: 0; text-align: right; color: var(--mt-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 7. Buttons ---------- */
.mt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 16px;
  border: 0; border-radius: var(--mt-r-ctl); cursor: pointer; white-space: nowrap; text-decoration: none;
  font: 600 13.5px/1 var(--mt-sans); color: var(--mt-ink);
  background: var(--mt-btn-bg); box-shadow: var(--mt-btn-depth);
  transition: background var(--mt-fast), box-shadow var(--mt-fast), transform var(--mt-fast) var(--mt-ease-out), filter var(--mt-fast);
}
.mt-btn svg { width: 16px; height: 16px; flex: none; }
.mt-btn:hover:not(:disabled) { background: var(--mt-btn-bg-hover); box-shadow: var(--mt-btn-depth), 0 12px 22px -14px rgba(0, 0, 0, 0.9); }
.mt-btn:active:not(:disabled) { box-shadow: var(--mt-btn-press); transform: translateY(1px); }
.mt-btn:focus-visible { box-shadow: var(--mt-btn-depth), var(--mt-focus); }
.mt-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.mt-btn.primary, .mt-btn.go, .mt-btn.danger, .mt-btn.sim { color: #fff; }
.mt-btn.primary { background: var(--mt-grad-blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 -2px 3px rgba(0, 0, 40, 0.28), 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 26px -10px rgba(63, 91, 255, 0.9); }
.mt-btn.go { background: var(--mt-grad-green); color: #03261A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(0, 40, 20, 0.2), 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 24px -12px rgba(61, 220, 151, 0.8); }
.mt-btn.danger { background: var(--mt-grad-coral); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 3px rgba(60, 0, 10, 0.25), 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 24px -12px rgba(255, 90, 110, 0.8); }
.mt-btn.sim { background: var(--mt-grad-orchid); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 24px -12px rgba(217, 70, 239, 0.85); }
.mt-btn.primary:hover:not(:disabled), .mt-btn.go:hover:not(:disabled), .mt-btn.danger:hover:not(:disabled), .mt-btn.sim:hover:not(:disabled) { filter: brightness(1.08); }
.mt-btn.primary:active:not(:disabled), .mt-btn.go:active:not(:disabled), .mt-btn.danger:active:not(:disabled), .mt-btn.sim:active:not(:disabled) { box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35); filter: brightness(0.95); }
.mt-btn.ghost-danger { color: var(--mt-coral-ink); background: color-mix(in srgb, var(--mt-coral) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mt-coral) 35%, transparent); }
.mt-btn.quiet { background: transparent; box-shadow: none; color: var(--mt-muted); }
.mt-btn.quiet:hover:not(:disabled) { background: var(--mt-raised); color: var(--mt-ink); box-shadow: none; }
.mt-btn.small { min-height: 28px; padding: 0 11px; font-size: 12.5px; }
.mt-btn.large { min-height: 48px; padding: 0 24px; font-size: 15.5px; border-radius: calc(var(--mt-r-ctl) + 3px); }
.mt-btn.wide { width: 100%; }
.mt-ibtn { width: 36px; padding: 0; }          /* an icon button: add .mt-btn too; give it an aria-label */
.mt-ibtn.round { border-radius: 50%; }

/* ---------- 8. Switches, checkboxes, fields ---------- */
/* segmented switch: a sunk track, the chosen part raised in the accent (aria-pressed="true") */
.mt-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--mt-r-ctl); background: var(--mt-well); box-shadow: var(--mt-well-depth); }
.mt-seg button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 7px 14px; border-radius: var(--mt-r-inner); font: 600 13px/1 var(--mt-sans); color: var(--mt-muted);
  transition: color var(--mt-fast), background var(--mt-base) var(--mt-ease-out), box-shadow var(--mt-base);
}
.mt-seg button svg { width: 15px; height: 15px; }
.mt-seg button:hover { color: var(--mt-ink); }
.mt-seg button[aria-pressed="true"] { color: #fff; background: var(--mt-grad-blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px -8px rgba(63, 91, 255, 0.95); }
.mt-seg.sim button[aria-pressed="true"] { background: var(--mt-grad-orchid); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px -8px rgba(217, 70, 239, 0.95); }
.mt-seg.small button { padding: 5px 10px; font-size: 12px; }
/* on/off switch: <label class="mt-switch"><input type="checkbox"> Label</label> */
.mt-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: var(--mt-ink-2); }
.mt-switch input { appearance: none; -webkit-appearance: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 999px; cursor: pointer; flex: none;
  background: var(--mt-well); box-shadow: var(--mt-well-depth); transition: background var(--mt-base); }
.mt-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(180deg, #FFFFFF, #E4E6EC); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 -1px 1px rgba(0, 0, 0, 0.1);
  transition: transform var(--mt-base) var(--mt-ease-spring); }
.mt-switch input:checked { background: var(--mt-grad-green); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 14px -3px rgba(61, 220, 151, 0.7); }
.mt-switch input:checked::after { transform: translateX(16px); }
/* fields: a label above, the field sunk */
.mt-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--mt-3); }
.mt-field > span { font-size: 12.5px; font-weight: 600; color: var(--mt-muted); }
.mt-input, .mt-field input, .mt-field select, .mt-field textarea {
  width: 100%; min-height: 38px; padding: 9px 12px; border: 0; border-radius: var(--mt-r-ctl);
  font: 500 14px/1.3 var(--mt-sans); color: var(--mt-ink); background: var(--mt-field); box-shadow: var(--mt-well-depth);
  transition: box-shadow var(--mt-fast);
}
.mt-input::placeholder, .mt-field input::placeholder { color: var(--mt-faint); }
.mt-input:focus, .mt-field input:focus, .mt-field select:focus, .mt-field textarea:focus { outline: none; box-shadow: var(--mt-well-depth), 0 0 0 2px rgba(63, 91, 255, 0.75), 0 0 18px -4px rgba(63, 91, 255, 0.6); }
.mt-unit { position: relative; }
.mt-unit em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12.5px; color: var(--mt-muted); pointer-events: none; }

/* ---------- 9. Tags, status pills, badges ---------- */
.mt-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--mt-r-tag); font-size: 11.5px; font-weight: 700;
  background: var(--mt-raised); color: var(--mt-muted); white-space: nowrap; }
.mt-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mt-tag.live { color: var(--mt-green-ink); background: color-mix(in srgb, var(--mt-green) 15%, transparent); }
.mt-tag.warn { color: var(--mt-amber-ink); background: color-mix(in srgb, var(--mt-amber) 16%, transparent); }
.mt-tag.bad { color: var(--mt-coral-ink); background: color-mix(in srgb, var(--mt-coral) 15%, transparent); }
.mt-tag.sim { color: var(--mt-orchid-ink); background: color-mix(in srgb, var(--mt-orchid) 16%, transparent); }
.mt-tag.info { color: var(--mt-blue-soft); background: color-mix(in srgb, var(--mt-blue) 18%, transparent); }
/* a status pill: an icon square, a title, a detail (the app's "Everything is fine") */
.mt-pill { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 10px; border: 1px solid transparent;
  background: var(--mt-glass-tint) padding-box, linear-gradient(var(--mt-glass-base), var(--mt-glass-base)) padding-box, var(--mt-glass-rim) border-box;
  box-shadow: var(--mt-glass-shadow), var(--mt-glass-inset); }
.mt-pill .ic { width: 32px; height: 32px; border-radius: 7px; display: grid; place-items: center; flex: none; background: var(--mt-raised); color: var(--mt-ink); }
.mt-pill .ic svg { width: 16px; height: 16px; }
.mt-pill.ok .ic { background: color-mix(in srgb, var(--mt-green) 18%, transparent); color: var(--mt-green-ink); }
.mt-pill.warn .ic { background: color-mix(in srgb, var(--mt-amber) 20%, transparent); color: var(--mt-amber-ink); }
.mt-pill.bad .ic { background: color-mix(in srgb, var(--mt-coral) 18%, transparent); color: var(--mt-coral-ink); }
.mt-pill b { display: block; color: var(--mt-ink); font-size: 14px; }
.mt-pill small { display: block; color: var(--mt-muted); font-size: 12px; }
/* "Live" badge over media */
.mt-live { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff;
  background: rgba(10, 12, 18, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mt-live i { width: 8px; height: 8px; border-radius: 50%; background: #FF4D5E; box-shadow: 0 0 0 3px rgba(255, 77, 94, 0.25); animation: mt-ping 1.8s var(--mt-ease-out) infinite; }
/* avatar: initials on the accent */
.mt-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; flex: none;
  background: linear-gradient(160deg, #6A80FF, #3F5BFF); box-shadow: 0 6px 14px -8px rgba(63, 91, 255, 0.9); }
/* a status light (connection etc.) */
.mt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mt-faint); display: inline-block; }
.mt-dot.ok { background: var(--mt-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mt-green) 25%, transparent); }
.mt-dot.warn { background: var(--mt-amber); } .mt-dot.bad { background: var(--mt-coral); }

/* ---------- 10. Progress, numbers ---------- */
.mt-bar { height: 6px; border-radius: var(--mt-r-bar); background: var(--mt-track); overflow: hidden; }
.mt-bar > i { display: block; height: 100%; width: var(--v, 40%); border-radius: inherit; background: linear-gradient(90deg, #6A80FF, #3F5BFF); transition: width var(--mt-slow) var(--mt-ease-out); }
.mt-bar.live > i { background: linear-gradient(90deg, #6BF0B6, #22C381); }
.mt-bar.warn > i { background: linear-gradient(90deg, #FFD978, #FFB000); }
.mt-bar.spectrum > i { background: var(--mt-spectrum); }
/* ring: <svg class="mt-ring" viewBox="0 0 52 52" style="--v:.62"><circle class="t"/><circle class="v"/></svg> */
.mt-ring { width: 72px; height: 72px; transform: rotate(-90deg); }
.mt-ring circle { cx: 26px; cy: 26px; r: 22px; fill: none; stroke-width: 4; }
.mt-ring .t { stroke: var(--mt-track); }
.mt-ring .v { stroke: var(--mt-green); stroke-linecap: round; stroke-dasharray: calc(var(--v, 0.5) * 138.2) 138.2; transition: stroke-dasharray var(--mt-slow) var(--mt-ease-out); }
/* a KPI: a big number, a label under it (not a template of identical boxes: give each the size its meaning needs) */
.mt-kpi { display: flex; flex-direction: column; gap: 4px; }
.mt-kpi small { font-size: 12.5px; color: var(--mt-muted); font-weight: 600; }
/* a table */
.mt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mt-table th { text-align: left; font-size: 12px; font-weight: 700; color: var(--mt-muted); padding: 8px 10px; border-bottom: 1px solid var(--mt-line-2); }
.mt-table td { padding: 10px; border-bottom: 1px solid var(--mt-line); color: var(--mt-ink-2); font-variant-numeric: tabular-nums; }
.mt-table tr:hover td { background: var(--mt-raised); }
.mt-table .r { text-align: right; }

/* ---------- 11. Feedback ---------- */
.mt-toast { display: flex; align-items: flex-start; gap: 12px; width: min(380px, calc(100vw - 32px)); padding: 12px 14px; border-radius: var(--mt-r-panel);
  border: 1px solid transparent; background: var(--mt-glass-tint) padding-box, linear-gradient(var(--mt-glass-base), var(--mt-glass-base)) padding-box, var(--mt-glass-rim) border-box;
  backdrop-filter: var(--mt-glass-blur); -webkit-backdrop-filter: var(--mt-glass-blur); box-shadow: var(--mt-glass-shadow), var(--mt-glass-inset);
  animation: mt-toast-in 0.5s var(--mt-ease-out) both; }
.mt-toast .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; background: var(--mt-grad-blue); }
.mt-toast.good .ic { background: var(--mt-grad-green); color: #03261A; } .mt-toast.bad .ic { background: var(--mt-grad-coral); }
.mt-toast .ic svg { width: 16px; height: 16px; }
.mt-toast b { display: block; color: var(--mt-ink); font-size: 14px; } .mt-toast p { margin: 2px 0 0; font-size: 13px; color: var(--mt-muted); }
.mt-dialog { border: 1px solid transparent; padding: 22px; border-radius: var(--mt-r-card); color: var(--mt-ink-2); width: min(460px, calc(100vw - 32px));
  background: var(--mt-glass-tint) padding-box, linear-gradient(var(--mt-glass-base), var(--mt-glass-base)) padding-box, var(--mt-glass-rim) border-box;
  backdrop-filter: var(--mt-glass-blur); -webkit-backdrop-filter: var(--mt-glass-blur); box-shadow: var(--mt-glass-shadow), var(--mt-glass-inset); }
.mt-dialog::backdrop { background: rgba(5, 6, 10, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mt-dialog[open] { animation: mt-rise 0.45s var(--mt-ease-out) both; }
.mt-dialog h3 { font-size: 17px; margin-bottom: 8px; }
.mt-dialog footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- 12. Motion: arrive with an exponential ease-out; nothing loops unless it means something live ---------- */
@keyframes mt-rise { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes mt-toast-in { 0% { opacity: 0; transform: translateY(-22px) scale(0.92); filter: blur(4px); } 60% { opacity: 1; filter: none; } }
@keyframes mt-pop { 0% { transform: scale(0.96); } 60% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes mt-tick { 0% { color: var(--mt-blue-soft); transform: translateY(-3px); opacity: 0.6; } 100% { transform: none; opacity: 1; } }
@keyframes mt-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0.55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(255, 77, 94, 0); } }
@keyframes mt-sheen { from { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes mt-breathe { 50% { opacity: 0.9; transform: scale(1.02); } }
.mt-rise { animation: mt-rise var(--mt-slow) var(--mt-ease-out) both; }
.mt-rise:nth-child(2) { animation-delay: 0.05s; } .mt-rise:nth-child(3) { animation-delay: 0.1s; } .mt-rise:nth-child(4) { animation-delay: 0.15s; }
.mt-pop { animation: mt-pop 0.35s var(--mt-ease-spring); }
.mt-tick { animation: mt-tick 0.4s var(--mt-ease-out); }
@media (prefers-reduced-motion: reduce) {
  .mt *, .mt *::before, .mt *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* the MO monogram as a lit mark: <span class="mt-logo"><img src="logo/mo-logo-blue.svg" alt="MoTech"></span> */
.mt-logo { position: relative; display: inline-grid; place-items: center; isolation: isolate; }
.mt-logo img, .mt-logo svg { position: relative; z-index: 1; display: block; filter: drop-shadow(0 8px 18px rgba(63, 91, 255, 0.45)); }
.mt-logo::before { content: ""; position: absolute; inset: -20%; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(14px); opacity: 0.6;
  background: radial-gradient(closest-side, rgba(91, 116, 255, 0.55), rgba(217, 70, 239, 0.3) 55%, transparent); animation: mt-breathe 6s ease-in-out infinite; }