/* ============================================================
   MONSTER GROWTH — DESIGN TOKENS
   The single source of truth. Import into every surface.
   ============================================================ */

/* ---------- Typography: Pangram ----------
   Pangram is the licensed display + text family, from Pangram Pangram Foundry.
   Files live under /fonts and cover 7 weights (200 → 900).
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Pangram';
  src: url('fonts/Pangram-ExtraLight.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('fonts/Pangram-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('fonts/Pangram-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('fonts/Pangram-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('fonts/Pangram-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('fonts/Pangram-ExtraBold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('fonts/Pangram-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ------- COLOR : Brand ------- */
  --mg-green:          #A8D64C;  /* primary accent, CTA */
  --mg-green-hover:    #B8E35E;
  --mg-green-press:    #94BD3E;
  --mg-dark:           #123136;  /* accent surface / headers */
  --mg-dark-2:         #0D2428;  /* deeper variant */
  --mg-grey:           #9F9F9F;  /* secondary text / borders */
  --mg-white:          #FFFFFF;

  /* ------- COLOR : Neutral scale ------- */
  --mg-ink-950:        #0A0A0A;
  --mg-ink-900:        #161616;  /* dark-mode canvas */
  --mg-ink-800:        #1F1F1F;
  --mg-ink-700:        #2A2A2A;
  --mg-ink-600:        #3D3D3D;
  --mg-ink-500:        #6A6A6A;
  --mg-ink-400:        var(--mg-grey);   /* FIX: was `--mg-grey` (invalid, missing var()) */
  --mg-ink-300:        #C7C7C7;
  --mg-ink-200:        #E4E4E4;
  --mg-ink-100:        #F2F2F2;
  --mg-ink-50:         #FAFAFA;

  /* ------- SEMANTIC : Light mode (default) ------- */
  --bg:                #FFFFFF;
  --bg-sunken:         #FAFAFA;
  --bg-elevated:       #FFFFFF;
  --surface-accent:    #123136; /* dark card on light bg */
  --fg:                #0A0A0A;
  --fg-muted:          #6A6A6A;
  --fg-subtle:         #9F9F9F;
  --fg-on-accent:      #FFFFFF;
  --fg-on-green:       #0A0A0A;
  --border:            #E4E4E4;
  --border-strong:     #C7C7C7;
  --accent:            var(--mg-green);
  --accent-fg:         #0A0A0A;

  /* ------- COLOR : Green-for-text (accessible on light; flips in dark) -------
     --mg-green is a spotlight FILL; it fails WCAG as text on light (~1.5:1).
     Use --mg-green-text for green emphasis words / links on light surfaces. */
  --mg-green-text:     #4D6B16;   /* 6.1:1 on white */

  /* ------- COLOR : Category accents -------
     Identity layer for the 4 categories. Hues are CONSTANT across modes and
     used for eyebrows, badges, icon tints, hover underlines — NEVER as CTAs
     (green owns CTAs). Amber (#F2B33D) and sky (#60A5FA) are deliberately NOT
     used here — they stay reserved for semantic warning / info. */
  --mg-cat-local:      #A8D64C;   /* Local Services (core) */
  --mg-cat-ecom:       #F08A6E;   /* Ecommerce */
  --mg-cat-national:   #5FCFA8;   /* National Service */
  --mg-cat-saas:       #B58CF0;   /* SaaS */
  /* Category text — accessible in each mode (dark values in the dark scopes) */
  --mg-cat-local-text:    var(--mg-green-text);
  --mg-cat-ecom-text:     #B4472E;   /* 5.4:1 on white */
  --mg-cat-national-text: #1E7A5A;   /* 5.3:1 on white */
  --mg-cat-saas-text:     #6D3FB0;   /* 7.0:1 on white */

  /* ------- COLOR : Section washes (low-sat brand tints; flip in dark) -------
     For alternating marketing section backgrounds — never gradients. */
  --mg-wash-green:     #F4F9EA;
  --mg-wash-teal:      #EDF6F3;
  --mg-cream:          #FBFAF7;   /* warm neutral alternating band */
  --mg-teal-700:       #1B3D43;   /* dark-teal step for card-on-dark layering (constant) */

  /* ------- TYPOGRAPHY ------- */
  --font-sans:         'Pangram', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display:      'Pangram', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Weights — full Pangram family, 7 weights */
  --fw-extralight:     200;
  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-bold:           700;
  --fw-extrabold:      800;
  --fw-black:          900;

  /* Type scale — headings are uppercase, tight-tracked */
  --fs-display:        clamp(3.5rem, 7vw, 6.5rem);   /* 56 → 104 */
  --fs-h1:             clamp(2.5rem, 4.5vw, 4rem);   /* 40 → 64 */
  --fs-h2:             clamp(2rem,   3.2vw, 3rem);   /* 32 → 48 */
  --fs-h3:             clamp(1.5rem, 2.2vw, 2rem);   /* 24 → 32 */
  --fs-h4:             1.25rem;                       /* 20 */
  --fs-lg:             1.125rem;                      /* 18 */
  --fs-base:           1rem;                          /* 16 */
  --fs-sm:             0.875rem;                      /* 14 */
  --fs-xs:             0.75rem;                       /* 12 */
  --fs-eyebrow:        0.75rem;                       /* 12 caps */

  --lh-display:        0.95;
  --lh-heading:        1.05;
  --lh-body:           1.55;

  --tr-display:        -0.03em;
  --tr-heading:        -0.02em;
  --tr-eyebrow:        0.14em;

  /* ------- SPACING ------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  --section-y:         clamp(80px, 10vw, 120px);
  --gutter:            clamp(24px, 5vw, 48px);

  /* ------- RADIUS / STROKE ------- */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;
  --stroke: 1px;
  --stroke-heavy: 2px;

  /* ------- MOTION ------- */
  --ease:        cubic-bezier(.2,.7,.2,1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    360ms;

  /* ------- FOCUS (shared brand focus ring) ------- */
  --focus-ring:  0 0 0 3px rgba(168,214,76,0.45);

  /* ------- ELEVATION (restrained) ------- */
  --shadow-1:  0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --shadow-2:  0 6px 18px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-3:  0 24px 48px rgba(0,0,0,.14), 0 6px 12px rgba(0,0,0,.06);
}

/* ------- DARK MODE : shared override set -------
   These values apply in TWO situations, so both modes are first-class:
   (1) OS prefers dark AND the author hasn't forced light  → prefers-color-scheme block below
   (2) an explicit [data-theme="dark"] on the root         → this block
   Keep the two blocks in sync. */
[data-theme="dark"] {
  --bg:                var(--mg-ink-900);
  --bg-sunken:         #0E0E0E;
  --bg-elevated:       var(--mg-ink-800);
  --surface-accent:    #123136;
  --fg:                #FFFFFF;
  --fg-muted:          #C7C7C7;
  --fg-subtle:         #9F9F9F;
  --fg-on-accent:      #FFFFFF;
  --border:            #2A2A2A;
  --border-strong:     #3D3D3D;

  /* flipped color extensions */
  --mg-green-text:        #B8E35E;
  --mg-cat-ecom-text:     #F3A98F;
  --mg-cat-national-text: #7FD9BC;
  --mg-cat-saas-text:     #C7A6F4;
  --mg-wash-green:        #16241A;
  --mg-wash-teal:         #102320;
  --mg-cream:             #0E0E0E;

  --shadow-1:  0 1px 2px rgba(0,0,0,.4);
  --shadow-2:  0 8px 24px rgba(0,0,0,.5);
  --shadow-3:  0 24px 56px rgba(0,0,0,.6);
}

/* Auto dark for OS-dark users who haven't explicitly chosen light.
   A manual [data-theme="light"] or [data-theme="dark"] always wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg:                var(--mg-ink-900);
    --bg-sunken:         #0E0E0E;
    --bg-elevated:       var(--mg-ink-800);
    --surface-accent:    #123136;
    --fg:                #FFFFFF;
    --fg-muted:          #C7C7C7;
    --fg-subtle:         #9F9F9F;
    --fg-on-accent:      #FFFFFF;
    --border:            #2A2A2A;
    --border-strong:     #3D3D3D;

    --mg-green-text:        #B8E35E;
    --mg-cat-ecom-text:     #F3A98F;
    --mg-cat-national-text: #7FD9BC;
    --mg-cat-saas-text:     #C7A6F4;
    --mg-wash-green:        #16241A;
    --mg-wash-teal:         #102320;
    --mg-cream:             #0E0E0E;

    --shadow-1:  0 1px 2px rgba(0,0,0,.4);
    --shadow-2:  0 8px 24px rgba(0,0,0,.5);
    --shadow-3:  0 24px 56px rgba(0,0,0,.6);
  }
}

/* ============================================================
   BASE RESET — apply where the tokens are imported
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Respect reduced-motion: neutralize the pulse/shimmer/transition animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   UTILITY : TYPOGRAPHY CLASSES
   ============================================================ */
.mg-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  margin: 0;
}
.mg-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-transform: uppercase;
  margin: 0;
}
.mg-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-transform: uppercase;
  margin: 0;
}
.mg-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.mg-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: 1.25;
  margin: 0;
}
/* Sentence-case marketing heading variants — for long conversion headlines
   where all-caps reads as shouting. Same scale/weight, mixed case. */
.mg-display--sentence,
.mg-h1--sentence,
.mg-h2--sentence { text-transform: none; letter-spacing: var(--tr-heading); }
.mg-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0;
}
.mg-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg);
}
.mg-body-lg { font-size: var(--fs-lg); }
.mg-body-sm { font-size: var(--fs-sm); }
.mg-muted   { color: var(--fg-muted); }

/* ============================================================
   COMPONENT : BUTTON
   ============================================================ */
.mg-btn {
  --_bg: var(--mg-green);
  --_fg: #0A0A0A;
  --_br: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--stroke) solid var(--_br);
  border-radius: var(--r-pill);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  white-space: nowrap;
}
.mg-btn:hover   { background: var(--mg-green-hover); transform: translateY(-1px); }
.mg-btn:active  { background: var(--mg-green-press); transform: translateY(0); }
.mg-btn:focus-visible { outline: 2px solid var(--mg-green); outline-offset: 3px; }

.mg-btn--secondary {
  --_bg: transparent;
  --_fg: var(--fg);
  --_br: var(--border-strong);
}
.mg-btn--secondary:hover { background: transparent; border-color: var(--fg); }

.mg-btn--dark {
  --_bg: var(--mg-dark);
  --_fg: #FFFFFF;
}
.mg-btn--dark:hover { background: var(--mg-dark-2); }

.mg-btn--ghost {
  --_bg: transparent;
  --_fg: var(--fg);
  padding: 14px 8px;
}
.mg-btn--ghost:hover { background: transparent; color: var(--mg-green-text); }

.mg-btn--sm  { padding: 10px 16px; font-size: 0.8125rem; }
.mg-btn--lg  { padding: 18px 28px; font-size: 1rem; }

/* ============================================================
   COMPONENT : BADGE / PILL
   ============================================================ */
.mg-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bg-sunken);
  color: var(--fg);
  border: var(--stroke) solid var(--border);
}
.mg-pill--accent {
  background: var(--mg-green);
  color: #0A0A0A;
  border-color: transparent;
}
.mg-pill--dark {
  background: var(--mg-dark);
  color: var(--mg-white);
  border-color: transparent;
}
.mg-pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   COMPONENT : CARD
   ============================================================ */
.mg-card {
  background: var(--bg-elevated);
  border: var(--stroke) solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.mg-card:hover { border-color: var(--fg); }
.mg-card--accent {
  background: var(--mg-dark);
  color: var(--mg-white);
  border-color: transparent;
}
.mg-card--accent .mg-muted { color: #C7C7C7; }

/* ============================================================
   COMPONENT : INPUT
   ============================================================ */
.mg-input {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--fg);
  background: var(--bg);
  border: var(--stroke) solid var(--border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--dur-base) var(--ease);
}
.mg-input:focus {
  outline: none;
  border-color: var(--mg-green);
  box-shadow: var(--focus-ring);
}
.mg-input::placeholder { color: var(--fg-subtle); }

/* ============================================================
   CATEGORY ACCENT UTILITIES
   Identity helpers for the 4 categories. Use on eyebrows, badges,
   icon tints, hover underlines — NEVER on CTAs (green owns CTAs).
   ============================================================ */
.mg-cat-local    { --mg-cat: var(--mg-cat-local);    --mg-cat-text: var(--mg-cat-local-text); }
.mg-cat-ecom     { --mg-cat: var(--mg-cat-ecom);     --mg-cat-text: var(--mg-cat-ecom-text); }
.mg-cat-national { --mg-cat: var(--mg-cat-national); --mg-cat-text: var(--mg-cat-national-text); }
.mg-cat-saas     { --mg-cat: var(--mg-cat-saas);     --mg-cat-text: var(--mg-cat-saas-text); }
.mg-cat-eyebrow  { color: var(--mg-cat-text); }
.mg-cat-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: color-mix(in srgb, var(--mg-cat) 16%, transparent);
  color: var(--mg-cat-text);
  border: var(--stroke) solid color-mix(in srgb, var(--mg-cat) 32%, transparent);
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.mg-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.mg-section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
/* Alternating section washes (theme-aware) */
.mg-section--wash-green { background: var(--mg-wash-green); }
.mg-section--wash-teal  { background: var(--mg-wash-teal); }
.mg-section--cream      { background: var(--mg-cream); }

/* ============================================================
   TOOTHED-O MOTIF — reusable CSS mask
   Usage: <span class="mg-motif"></span>
   ============================================================ */
.mg-motif {
  display: inline-block;
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url('assets/logo-motif-white.svg') center / contain no-repeat;
          mask: url('assets/logo-motif-white.svg') center / contain no-repeat;
  vertical-align: -0.14em;
}

/* ============================================================
   MONSTER-BITE MOTIF — diagonal split surface
   The signature MonsterGrowth shape: a two-step diagonal where
   one color "bites" into another at the vertical center. Works
   on slides, web hero sections, social cards, billboards.

   Usage:
     <div class="mg-bite mg-bite--right">
       <div class="mg-bite__cut"></div>
       <div class="mg-bite__a">…content on green…</div>
       <div class="mg-bite__b">…content on dark…</div>
     </div>

   Modifiers: --right (default), --left, --top
   ============================================================ */
.mg-bite {
  position: relative;
  background: var(--mg-green);
  overflow: hidden;
  isolation: isolate;
}
.mg-bite__cut {
  position: absolute; inset: 0;
  background: var(--mg-dark);
  z-index: 0;
}
.mg-bite--right .mg-bite__cut {
  /* Right-bite: dark enters top at 63%, pinches in to 51% at ~10% height
     (the "tooth point"), then leans steadily right out the bottom at 70%.
     Geometry traced from the canonical sales-deck title slide. */
  clip-path: polygon(63% 0, 100% 0, 100% 100%, 70% 100%, 51% 10%);
}
.mg-bite--left .mg-bite__cut {
  /* Mirror of right-bite */
  clip-path: polygon(0 0, 37% 0, 49% 10%, 30% 100%, 0 100%);
}
.mg-bite--top .mg-bite__cut {
  /* Top-bite: dark sits across the top with the tooth point at 10% from left.
     Bottom edge slants from ~28% on left to ~36% on right. */
  clip-path: polygon(0 0, 100% 0, 100% 36%, 10% 49%, 0 28%);
}
.mg-bite--bottom .mg-bite__cut {
  /* Bottom-bite: dark across the bottom, tooth point at 10% from left */
  clip-path: polygon(0 100%, 100% 100%, 100% 64%, 10% 51%, 0 72%);
}
/* Inverted: green bites into dark canvas — swap colors */
.mg-bite--inverse { background: var(--mg-dark); }
.mg-bite--inverse .mg-bite__cut { background: var(--mg-green); }

.mg-bite__a, .mg-bite__b { position: relative; z-index: 1; }

/* ============================================================
   TOOTH EDGE — sawtooth divider strip
   A horizontal band whose lower (or upper) edge is a row of
   triangles, biting into the surface beneath. Use as a section
   divider in any context.

   Usage:
     <div class="mg-tooth-edge">…optional content…</div>
     <!-- The tooth row sits below; place this above any surface -->
   ============================================================ */
.mg-tooth-edge {
  position: relative;
  background: var(--mg-green);
  color: var(--mg-dark);
  padding: 0 var(--sp-6);
  height: 56px;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mg-tooth-edge::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -16px;
  height: 16px;
  background: inherit;
  clip-path: polygon(
    0 0,    4% 100%,  8% 0,   12% 100%, 16% 0,  20% 100%,
    24% 0,  28% 100%, 32% 0,  36% 100%, 40% 0,  44% 100%,
    48% 0,  52% 100%, 56% 0,  60% 100%, 64% 0,  68% 100%,
    72% 0,  76% 100%, 80% 0,  84% 100%, 88% 0,  92% 100%,
    96% 0,  100% 100%
  );
}
.mg-tooth-edge--inverse { background: var(--mg-dark); color: var(--mg-green); }
/* Pair the tooth edge with a panel below, with a 16px buffer for the teeth */
.mg-tooth-edge + .mg-tooth-panel {
  background: var(--mg-dark);
  color: var(--mg-white);
  padding: calc(var(--sp-6) + 16px) var(--sp-6) var(--sp-6);
}

/* ============================================================
   DIAGONAL STRIPE PATTERN — repeating green/dark stripes
   For texture: section dividers, footer accents, packaging.
   ============================================================ */
.mg-stripes {
  background-image: repeating-linear-gradient(
    -25deg,
    var(--mg-green) 0 24px,
    var(--mg-dark)  24px 28px
  );
}
.mg-stripes--fine {
  background-image: repeating-linear-gradient(
    -25deg,
    var(--mg-green) 0 8px,
    var(--mg-dark)  8px 10px
  );
}

/* ============================================================
   BITE BADGE — small toothed disc with motif inside
   The "watermark O" pulled out as a reusable signature element.
   Use bottom-left of slides, in email signatures, on packaging.
   ============================================================ */
.mg-bite-badge {
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--mg-green);
  color: var(--mg-dark);
  flex-shrink: 0;
}
.mg-bite-badge::before {
  content: "";
  width: 70%; height: 70%;
  background: currentColor;
  -webkit-mask: url('assets/logo-motif-white.svg') center / contain no-repeat;
          mask: url('assets/logo-motif-white.svg') center / contain no-repeat;
}
.mg-bite-badge--dark { background: var(--mg-dark); color: var(--mg-green); }
.mg-bite-badge--white { background: var(--mg-white); color: var(--mg-dark); }


/* ============================================================
   ============================================================
   DASHBOARD TOKENS — Operator / SaaS surfaces
   Adds high-density tokens on top of the brand system without
   changing any existing brand variables. Use inside .mg-dash.
   ============================================================
   ============================================================ */
.mg-dash {
  /* ----- Density: type ----- */
  --d-fs-data:        13px;     /* table rows, secondary numbers */
  --d-fs-data-sm:     12px;     /* meta, microcopy */
  --d-fs-kpi:         44px;     /* KPI hero number */
  --d-fs-kpi-sm:      28px;     /* compact KPI */
  --d-fs-label:       11px;     /* uppercase labels */

  /* ----- Density: rhythm ----- */
  --d-row:            36px;     /* dense table row min-height */
  --d-row-tight:      28px;     /* very dense */
  --d-pad-card:       20px;
  --d-pad-cell:       10px 14px;
  --d-pad-cell-tight: 6px 12px;
  --d-gap:            16px;

  /* ----- Surfaces (dark-first; light-mode override below) ----- */
  --d-bg:             #0B1416;          /* canvas, deeper than brand ink-900 to feel app-y */
  --d-bg-2:           #0F1B1E;          /* secondary panel */
  --d-surface:        #14252A;          /* card bg */
  --d-surface-2:      #1A3036;          /* hover / nested */
  --d-side:           #08111A;          /* sidebar — slight blue-shift to feel cool */
  --d-line:           #1F3A40;          /* divider */
  --d-line-2:         #294C53;          /* stronger divider, header bottom */
  --d-line-soft:      rgba(255,255,255,0.06);
  --d-fg:             #F4F7F6;
  --d-fg-2:           #B6C4C6;          /* secondary text */
  --d-fg-3:           #7A8C8E;          /* tertiary / placeholder */
  --d-fg-4:           #4F6064;          /* disabled */
  --d-focus:          0 0 0 2px rgba(168,214,76,.45);

  /* ----- Semantic statuses ----- */
  --d-success:        #A8D64C;          /* brand green carries success */
  --d-success-bg:     rgba(168,214,76,0.12);
  --d-warning:        #F2B33D;          /* warm amber, oklch-aligned with green */
  --d-warning-bg:     rgba(242,179,61,0.14);
  --d-danger:         #EF4444;
  --d-danger-bg:      rgba(239,68,68,0.14);
  --d-info:           #60A5FA;
  --d-info-bg:        rgba(96,165,250,0.14);
  --d-neutral:        #9F9F9F;
  --d-neutral-bg:     rgba(159,159,159,0.14);

  /* ----- Pipeline phase states (5) ----- */
  --d-phase-pending:  #4F6064;          /* slate */
  --d-phase-running:  #60A5FA;          /* blue, animated */
  --d-phase-done:     #A8D64C;          /* green */
  --d-phase-failed:   #EF4444;          /* red */
  --d-phase-skipped:  #7A8C8E;          /* muted */

  /* ----- Chart palette (oklch-derived, brand-green at L≈0.83 C≈0.16) ----- */
  --d-c-1: #A8D64C;                     /* brand green (hero) */
  --d-c-2: #5FCFA8;                     /* teal */
  --d-c-3: #60A5FA;                     /* sky */
  --d-c-4: #B58CF0;                     /* lavender */
  --d-c-5: #F2B33D;                     /* amber */
  --d-c-6: #F08A6E;                     /* coral */

  /* Dimmed variants for area fills */
  --d-c-1-soft: rgba(168,214,76,0.18);
  --d-c-2-soft: rgba(95,207,168,0.18);
  --d-c-3-soft: rgba(96,165,250,0.18);
  --d-c-4-soft: rgba(181,140,240,0.18);
  --d-c-5-soft: rgba(242,179,61,0.18);
  --d-c-6-soft: rgba(240,138,110,0.18);

  /* ----- Sizes ----- */
  --d-r-card:         12px;
  --d-r-control:      8px;
  --d-r-pill:         999px;
  --d-side-w:         224px;
  --d-side-w-collapsed: 64px;
  --d-topbar-h:       56px;

  /* ----- Mono — tabular numerics for stats ----- */
  --d-font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Light-mode overrides for dashboard (dark is default per request) */
[data-theme="light"] .mg-dash {
  --d-bg:             #FAFAFA;
  --d-bg-2:           #F2F2F2;
  --d-surface:        #FFFFFF;
  --d-surface-2:      #FAFAFA;
  --d-side:           #FFFFFF;
  --d-line:           #E4E4E4;
  --d-line-2:         #C7C7C7;
  --d-line-soft:      rgba(0,0,0,0.04);
  --d-fg:             #0A0A0A;
  --d-fg-2:           #3D3D3D;
  --d-fg-3:           #6A6A6A;
  --d-fg-4:           #9F9F9F;
  --d-success-bg:     rgba(148,189,62,0.18);
  --d-warning-bg:     rgba(242,179,61,0.18);
  --d-danger-bg:      rgba(239,68,68,0.10);
  --d-info-bg:        rgba(96,165,250,0.14);
  --d-neutral-bg:     rgba(159,159,159,0.14);
}

/* ----- Surfaces ----- */
.mg-dash {
  background: var(--d-bg);
  color: var(--d-fg);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
}
.mg-dash--canvas { min-height: 100vh; }

/* ----- App shell ----- */
.mg-dash__app {
  display: grid;
  grid-template-columns: var(--d-side-w) 1fr;
  min-height: 100vh;
}
.mg-dash__side {
  background: var(--d-side);
  border-right: 1px solid var(--d-line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: auto;
}
.mg-dash__main { display: flex; flex-direction: column; min-width: 0; }
.mg-dash__topbar {
  height: var(--d-topbar-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
  border-bottom: 1px solid var(--d-line);
  background: var(--d-bg);
  position: sticky; top: 0; z-index: 5;
}
.mg-dash__body { padding: 24px; }

/* ----- Card ----- */
.mg-dash-card {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  padding: var(--d-pad-card);
}
.mg-dash-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.mg-dash-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-fg);
  margin: 0;
}
.mg-dash-card__sub { font-size: 12px; color: var(--d-fg-3); }

/* ----- KPI ----- */
.mg-kpi {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  min-height: 132px;
}
.mg-kpi__label {
  font-size: var(--d-fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-fg-3);
}
.mg-kpi__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--d-fs-kpi);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--d-fg);
  font-feature-settings: "tnum" 1;
}
.mg-kpi__value em { font-style: normal; color: var(--d-success); }
.mg-kpi__delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700;
  font-feature-settings: "tnum" 1;
}
.mg-kpi__delta--up   { color: var(--d-success); }
.mg-kpi__delta--down { color: var(--d-danger); }
.mg-kpi__delta--flat { color: var(--d-fg-3); }
.mg-kpi__spark { margin-top: auto; height: 36px; width: 100%; }
.mg-kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--d-fg-3); font-size: 12px; }

/* ----- Pills / status / phase ----- */
.mg-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: var(--d-r-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--d-neutral-bg);
  color: var(--d-fg-2);
  border: 1px solid transparent;
  white-space: nowrap;
}
.mg-tag--success { background: var(--d-success-bg); color: var(--d-success); }
.mg-tag--warning { background: var(--d-warning-bg); color: var(--d-warning); }
.mg-tag--danger  { background: var(--d-danger-bg);  color: var(--d-danger); }
.mg-tag--info    { background: var(--d-info-bg);    color: var(--d-info); }
.mg-tag--ghost   { background: transparent; border-color: var(--d-line); color: var(--d-fg-2); }
.mg-tag--solid   { background: var(--d-success); color: #0A1410; }

.mg-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--d-neutral); display: inline-block; }
.mg-dot--success { background: var(--d-success); }
.mg-dot--warning { background: var(--d-warning); }
.mg-dot--danger  { background: var(--d-danger); }
.mg-dot--info    { background: var(--d-info); }
.mg-dot--pending { background: var(--d-phase-pending); }
.mg-dot--running { background: var(--d-phase-running); box-shadow: 0 0 0 4px rgba(96,165,250,.18); animation: mg-pulse 1.6s ease-in-out infinite; }
.mg-dot--done    { background: var(--d-phase-done); }
.mg-dot--failed  { background: var(--d-phase-failed); }
.mg-dot--skipped { background: var(--d-phase-skipped); }
@keyframes mg-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(96,165,250,.20); }
  50%     { box-shadow: 0 0 0 7px rgba(96,165,250,.04); }
}

/* ----- Buttons (compact, dashboard-tuned) ----- */
.mg-dbtn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 32px; padding: 0 12px;
  border-radius: var(--d-r-control);
  background: var(--d-surface-2);
  color: var(--d-fg);
  border: 1px solid var(--d-line);
  font-family: var(--font-sans);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.mg-dbtn:hover { background: var(--d-line); border-color: var(--d-line-2); }
.mg-dbtn--primary {
  background: var(--mg-green); color: #0A1410; border-color: transparent;
}
.mg-dbtn--primary:hover { background: var(--mg-green-hover); }
.mg-dbtn--ghost { background: transparent; border-color: transparent; color: var(--d-fg-2); }
.mg-dbtn--ghost:hover { background: var(--d-surface-2); color: var(--d-fg); }
.mg-dbtn--danger { color: var(--d-danger); border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.08); }
.mg-dbtn--sm { height: 26px; padding: 0 10px; font-size: 12px; gap: 6px; }
.mg-dbtn--icon { width: 32px; padding: 0; }
.mg-dbtn[disabled] { opacity: .5; cursor: not-allowed; }
.mg-dbtn .icon { width: 14px; height: 14px; flex: 0 0 auto; }

/* ----- Inputs ----- */
.mg-din {
  height: 32px;
  padding: 0 12px;
  border-radius: var(--d-r-control);
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  color: var(--d-fg);
  font-family: var(--font-sans);
  font-size: 13px;
  width: 100%;
}
.mg-din::placeholder { color: var(--d-fg-3); }
.mg-din:focus { outline: none; border-color: var(--mg-green); box-shadow: var(--d-focus); }
.mg-din--search { padding-left: 32px; background-image: none; }

.mg-din-wrap { position: relative; }
.mg-din-wrap .icon-lead { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--d-fg-3); pointer-events: none; }

/* ----- Segmented ----- */
.mg-seg {
  display: inline-flex;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-control);
  padding: 2px;
  gap: 2px;
}
.mg-seg__btn {
  height: 26px; padding: 0 12px;
  border: none; background: transparent;
  color: var(--d-fg-2);
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.mg-seg__btn[aria-pressed="true"], .mg-seg__btn.is-on {
  background: var(--d-surface);
  color: var(--d-fg);
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

/* ----- Tabs ----- */
.mg-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--d-line); }
.mg-tabs__btn {
  appearance: none; border: none; background: transparent;
  padding: 12px 16px;
  color: var(--d-fg-3);
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: -1px;
}
.mg-tabs__btn:hover { color: var(--d-fg); }
.mg-tabs__btn[aria-selected="true"] { color: var(--d-fg); border-bottom-color: var(--mg-green); }
.mg-tabs__count {
  font-size: 11px; padding: 1px 6px;
  background: var(--d-surface-2); color: var(--d-fg-2);
  border-radius: var(--d-r-pill);
  letter-spacing: 0;
}

/* ----- Sidebar nav ----- */
.mg-side-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 18px;
  border-bottom: 1px solid var(--d-line);
}
.mg-side-brand__mark {
  width: 28px; height: 28px;
  background: var(--mg-green);
  border-radius: 6px;
  display: grid; place-items: center;
}
.mg-side-brand__mark::before {
  content: ""; width: 70%; height: 70%;
  background: var(--mg-dark);
  -webkit-mask: url('../assets/logo-motif-green.svg') center / contain no-repeat;
          mask: url('../assets/logo-motif-green.svg') center / contain no-repeat;
}
.mg-side-brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mg-side-section {
  padding: 18px 12px 6px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--d-fg-4);
}
.mg-side-link {
  display: flex; align-items: center; gap: 10px;
  margin: 1px 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--d-fg-2);
  text-decoration: none;
  font-size: 13px; font-weight: 600;
  border: 1px solid transparent;
}
.mg-side-link .icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--d-fg-3); }
.mg-side-link:hover { background: var(--d-surface-2); color: var(--d-fg); }
.mg-side-link.is-active {
  background: rgba(168,214,76,0.10);
  color: var(--d-fg);
  border-color: rgba(168,214,76,0.18);
}
.mg-side-link.is-active .icon { color: var(--mg-green); }
.mg-side-link__count {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  padding: 1px 6px;
  background: var(--d-surface-2); color: var(--d-fg-2);
  border-radius: var(--d-r-pill);
  font-family: var(--d-font-mono);
}

/* ----- Breadcrumbs ----- */
.mg-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--d-fg-3); }
.mg-crumbs a { color: var(--d-fg-3); text-decoration: none; }
.mg-crumbs a:hover { color: var(--d-fg); }
.mg-crumbs__sep { color: var(--d-fg-4); }
.mg-crumbs__current { color: var(--d-fg); font-weight: 600; }

/* ----- Tables ----- */
.mg-dtable-wrap {
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
  background: var(--d-surface);
  overflow: hidden;
}
.mg-dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--d-fs-data);
  font-feature-settings: "tnum" 1;
}
.mg-dtable thead th {
  position: sticky; top: 0;
  background: var(--d-bg-2);
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-fg-3);
  padding: 9px 14px;
  border-bottom: 1px solid var(--d-line-2);
  white-space: nowrap;
  user-select: none;
}
.mg-dtable thead th.sortable { cursor: pointer; }
.mg-dtable thead th.sortable .arr { color: var(--d-fg-4); margin-left: 4px; }
.mg-dtable thead th.is-sorted { color: var(--d-fg); }
.mg-dtable thead th.is-sorted .arr { color: var(--mg-green); }
.mg-dtable tbody td {
  padding: var(--d-pad-cell);
  border-bottom: 1px solid var(--d-line);
  color: var(--d-fg);
  vertical-align: middle;
  height: var(--d-row);
}
.mg-dtable tbody tr:last-child td { border-bottom: none; }
.mg-dtable--tight tbody td { padding: var(--d-pad-cell-tight); height: var(--d-row-tight); }
.mg-dtable tbody tr:hover { background: var(--d-surface-2); }
.mg-dtable .num { text-align: right; font-variant-numeric: tabular-nums; }
.mg-dtable .mono { font-family: var(--d-font-mono); font-size: 12px; }
.mg-dtable .muted { color: var(--d-fg-3); }
.mg-dtable .delta-up   { color: var(--d-success); }
.mg-dtable .delta-down { color: var(--d-danger); }
.mg-dtable .url-cell {
  max-width: 360px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--d-font-mono); font-size: 12px;
  color: var(--d-fg-2);
}
.mg-dtable .url-cell:hover { color: var(--mg-green); cursor: pointer; }
.mg-dtable .checkbox { width: 24px; }

/* ----- Sparkbar (inline distribution bar) ----- */
.mg-sparkbar {
  height: 6px; width: 100%;
  background: var(--d-line);
  border-radius: 999px;
  overflow: hidden; display: flex;
}
.mg-sparkbar > span { display: block; height: 100%; }

/* ----- Alerts ----- */
.mg-alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--d-r-control);
  border: 1px solid var(--d-line);
  background: var(--d-surface);
  font-size: 13px;
  color: var(--d-fg);
}
.mg-alert__icon { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--d-fg-3); }
.mg-alert__title { font-weight: 700; margin-bottom: 2px; }
.mg-alert__body  { color: var(--d-fg-2); font-size: 12.5px; line-height: 1.5; }
.mg-alert--success { border-color: rgba(168,214,76,0.35); background: var(--d-success-bg); }
.mg-alert--success .mg-alert__icon { color: var(--d-success); }
.mg-alert--warning { border-color: rgba(242,179,61,0.35); background: var(--d-warning-bg); }
.mg-alert--warning .mg-alert__icon { color: var(--d-warning); }
.mg-alert--danger  { border-color: rgba(239,68,68,0.35); background: var(--d-danger-bg); }
.mg-alert--danger  .mg-alert__icon { color: var(--d-danger); }
.mg-alert--info    { border-color: rgba(96,165,250,0.35); background: var(--d-info-bg); }
.mg-alert--info    .mg-alert__icon { color: var(--d-info); }

/* ----- Skeleton ----- */
.mg-skel {
  background: linear-gradient(90deg, var(--d-line) 0%, var(--d-line-2) 50%, var(--d-line) 100%);
  background-size: 200% 100%;
  animation: mg-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  display: block;
}
@keyframes mg-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ----- Empty ----- */
.mg-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 56px 24px;
  text-align: center;
  color: var(--d-fg-3);
  border: 1px dashed var(--d-line-2);
  border-radius: var(--d-r-card);
  background: var(--d-bg-2);
}
.mg-empty__icon { width: 36px; height: 36px; margin-bottom: 14px; color: var(--d-fg-4); }
.mg-empty__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--d-fg); margin-bottom: 6px; font-size: 15px; }
.mg-empty__body  { max-width: 44ch; font-size: 13px; }

/* ----- Modal & Drawer ----- */
.mg-modal {
  background: var(--d-surface);
  border: 1px solid var(--d-line-2);
  border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.3);
  width: min(560px, 100%);
}
.mg-modal__head { padding: 16px 20px; border-bottom: 1px solid var(--d-line); display: flex; align-items: center; justify-content: space-between; }
.mg-modal__title { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.mg-modal__body { padding: 20px; }
.mg-modal__foot { padding: 14px 20px; border-top: 1px solid var(--d-line); display: flex; justify-content: flex-end; gap: 8px; }

/* ----- Filter bar ----- */
.mg-filterbar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-card);
}
.mg-filterbar__divider { width: 1px; height: 22px; background: var(--d-line); }

/* ----- Progress ----- */
.mg-progress {
  height: 6px; border-radius: 999px;
  background: var(--d-line); overflow: hidden;
  width: 100%;
}
.mg-progress > span { display: block; height: 100%; background: var(--mg-green); border-radius: 999px; transition: width .3s var(--ease); }
.mg-progress--info  > span { background: var(--d-info); }
.mg-progress--warning > span { background: var(--d-warning); }

/* ----- Donut ----- */
.mg-donut { --p: 50; --c: var(--mg-green);
  width: 96px; height: 96px;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--d-line) 0);
  display: grid; place-items: center;
  position: relative;
}
.mg-donut::before {
  content: ""; width: 70%; height: 70%;
  border-radius: 50%; background: var(--d-surface);
}
.mg-donut__val {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; letter-spacing: -0.02em;
  color: var(--d-fg);
}

/* ----- Trend arrow tiny ----- */
.tri-up { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid currentColor; display: inline-block; }
.tri-dn { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor; display: inline-block; }

/* ----- Inline icon utility ----- */
.mg-dash svg.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ----- Command palette ----- */
.mg-cmd {
  background: var(--d-surface);
  border: 1px solid var(--d-line-2);
  border-radius: 12px;
  width: min(560px, 100%);
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
  overflow: hidden;
}
.mg-cmd__input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--d-line); }
.mg-cmd__input input { flex: 1; background: transparent; border: none; outline: none; color: var(--d-fg); font-size: 14px; font-family: var(--font-sans); }
.mg-cmd__list { max-height: 320px; overflow: auto; padding: 6px 0; }
.mg-cmd__group { padding: 8px 14px 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-fg-4); }
.mg-cmd__item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; }
.mg-cmd__item:hover, .mg-cmd__item.is-active { background: var(--d-surface-2); }
.mg-cmd__shortcut { margin-left: auto; font-family: var(--d-font-mono); font-size: 11px; color: var(--d-fg-3); }
.mg-cmd__foot { padding: 8px 14px; border-top: 1px solid var(--d-line); font-size: 11px; color: var(--d-fg-3); display: flex; gap: 14px; }
kbd.mg-kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  font-family: var(--d-font-mono);
  font-size: 11px;
  color: var(--d-fg-2);
}

/* ----- Date range chip ----- */
.mg-daterange {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: var(--d-bg-2);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-control);
  font-size: 12.5px;
  color: var(--d-fg);
  cursor: pointer;
}
.mg-daterange .icon { width: 14px; height: 14px; color: var(--d-fg-3); }

/* ----- Chart axis text style ----- */
.mg-chart-axis { fill: var(--d-fg-3); font-size: 10.5px; font-family: var(--font-sans); font-weight: 600; }
.mg-chart-grid line { stroke: var(--d-line); stroke-dasharray: 2 4; }