@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* MaV — self-contained: fonts + tokens + shared + all component page styles (verbatim). */

/* ═══ TOKENS ═══ */
/* MaV Design System — CSS Tokens
   Source: Figma 8dGEq5WuFEitIQxYUmezTr (Modular App Visualizer)
   Updated: commit d096ab452566e346bbc0a9a4a187d023434f9ad0
   Token names match Figma verbatim — slashes preserved, typos preserved.
   ─────────────────────────────────────────────────────────────────────── */

/* Web fonts loaded non-blocking via <link> in each HTML file (was a render-blocking @import) */

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 0 — Primitive palette (baseColors.js)
   Raw hex values. Only source of hex in this file.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Fyscal core ──────────────────────────────────────────────────────── */
  --bc-white:         #ffffff;
  --bc-black:         #171717;
  --bc-grey:          #efefef;

  /* Brand */
  --bc-primary-light: #352eff;
  --bc-primary-dark:  #a1ff5b;
  --bc-secondary:     #0053ff;
  --bc-tertiary1:     #7c9dff;
  --bc-tertiary2:     #030192;
  --bc-variation:     #ff00ff;

  /* ── Mono scale ───────────────────────────────────────────────────────── */
  --bc-mono100-l: #e5e5e5;  --bc-mono100-d: #242424;
  --bc-mono200-l: #cccccc;  --bc-mono200-d: #484848;
  --bc-mono300-l: #b2b2b2;  --bc-mono300-d: #6a6a6a;
  --bc-mono400-l: #999999;  --bc-mono400-d: #666666;
  --bc-mono500:   #7f7f7f;
  --bc-mono600-l: #666666;  --bc-mono600-d: #999999;
  --bc-mono700-l: #4c4c4c;  --bc-mono700-d: #b2b2b2;
  --bc-mono800-l: #333333;  --bc-mono800-d: #cccccc;
  --bc-mono900-l: #191919;  --bc-mono900-d: #e5e5e5;

  /* ── System ───────────────────────────────────────────────────────────── */
  --bc-danger:        #ff0000;   --bc-danger-dark:   #e93a2a;
  --bc-danger-soft:   #ff00001a;
  --bc-success:       #629c28;   --bc-success-soft:  #629c281a;
  --bc-warning:       #ff8400;   --bc-warning-soft:  #ff84001a;
  --bc-natural:       #d9d9d9;
  --bc-primary-soft:  #352eff1a;

  /* ── poliPurple ramp ──────────────────────────────────────────────────── */
  --bc-polipurple-800: #20104d;
  --bc-polipurple-700: #351a80;
  --bc-polipurple-600: #4a25b3;
  --bc-polipurple-500: #6a35ff;
  --bc-polipurple-400: #9772ff;
  --bc-polipurple-300: #b49aff;
  --bc-polipurple-200: #d2c2ff;
  --bc-polipurple-100: #e8dfff;

  /* ── orangeSunshine ramp ─────────────────────────────────────────────── */
  --bc-orange-800: #4d2914;
  --bc-orange-700: #804322;
  --bc-orange-600: #b35f30;
  --bc-orange-500: #ff8744;
  --bc-orange-400: #ffab7c;
  --bc-orange-300: #ffc3a2;
  --bc-orange-200: #ffdbc7;
  --bc-orange-100: #ffefe6;

  /* ── pinkPong ramp ───────────────────────────────────────────────────── */
  --bc-pink-800: #4d1421;
  --bc-pink-700: #802138;
  --bc-pink-600: #b32e4e;
  --bc-pink-500: #ff426f;
  --bc-pink-400: #ff7b9a;
  --bc-pink-300: #ffa0b7;
  --bc-pink-200: #ffc6d4;
  --bc-pink-100: #ffe1e9;

  /* ── manna ramp ──────────────────────────────────────────────────────── */
  --bc-manna-800: #4d3d15;
  --bc-manna-700: #806623;
  --bc-manna-600: #b38e30;
  --bc-manna-500: #ffcb45;
  --bc-manna-400: #ffdb7d;
  --bc-manna-300: #ffe5a2;
  --bc-manna-200: #ffefc7;
  --bc-manna-100: #ffefc7;

  /* ── neoPaccha ramp ──────────────────────────────────────────────────── */
  --bc-neopaccha-800: #454c13;
  --bc-neopaccha-700: #727f20;
  --bc-neopaccha-600: #a0b22d;
  --bc-neopaccha-500: #e5fe40;
  --bc-neopaccha-400: #edfe79;
  --bc-neopaccha-300: #f2ff9f;
  --bc-neopaccha-200: #f7ffc6;
  --bc-neopaccha-100: #fbffe6;

  /* ── yoyo ramp ───────────────────────────────────────────────────────── */
  --bc-yoyo-800: #33134d;
  --bc-yoyo-700: #552080;
  --bc-yoyo-600: #772cb3;
  --bc-yoyo-500: #aa3fff;
  --bc-yoyo-400: #c379ff;
  --bc-yoyo-300: #d59fff;
  --bc-yoyo-200: #e5c5ff;
  --bc-yoyo-100: #f4e5ff;

  /* ── parkGreen ramp ──────────────────────────────────────────────────── */
  --bc-parkgreen-800: #124d34;
  --bc-parkgreen-700: #1e8057;
  --bc-parkgreen-600: #29b379;
  --bc-parkgreen-500: #3bffad;
  --bc-parkgreen-400: #76ffc6;
  --bc-parkgreen-300: #9dffd6;
  --bc-parkgreen-200: #c4ffe6;
  --bc-parkgreen-100: #ddfff1;

  /* ── yellowNeon ──────────────────────────────────────────────────────── */
  --bc-yellowneon: #e3d506;

  /* ── Error / Warning / Info / Success scales ─────────────────────────── */
  --bc-error-500: #ee4d37;  --bc-error-400: #f05e4b;
  --bc-error-300: #f47564;  --bc-error-200: #f6a69b;  --bc-error-100: #fce2dd;
  --bc-warn-500:  #f08d32;  --bc-warn-400:  #f29947;
  --bc-warn-300:  #f5ac6a;  --bc-warn-200:  #f8c699;  --bc-warn-100:  #fbddc2;
  --bc-info-500:  #144cc7;  --bc-info-400:  #2c5ecd;
  --bc-info-300:  #3f6fd9;  --bc-info-200:  #89a5e3;  --bc-info-100:  #c2d0f2;
  --bc-succ-500:  #06c270;  --bc-succ-400:  #1fc87f;
  --bc-succ-300:  #4fe3a3;  --bc-succ-200:  #83e0b8;  --bc-succ-100:  #e6f9f1;

  /* ── kiqBase ─────────────────────────────────────────────────────────── */
  --bc-kiq-primary:          #710cbe;
  --bc-kiq-primary-shades:   #3a1264;
  --bc-kiq-secondary:        #9dff34;
  --bc-kiq-secondary-shades: #96d747;

  /* ── Neon collection ─────────────────────────────────────────────────── */
  --bc-neon-black:       #101010;
  --bc-neon-primary:     #05005d;
  --bc-neon-secondary:   #a1ff5b;
  --bc-neon-tertiary1:   #4af482;
  --bc-neon-tertiary2:   #00ffff;
  --bc-neon-variation:   #ff0090;
  --bc-neon-variation2:  #2d34ef;
  --bc-neon-shade100:    #6bf800;
  --bc-neon-shade200:    #62e400;

  /* Neon Tint/Primary */
  --bc-neon-tintp100: #fafaff;  --bc-neon-tintp200: #e8e6ff;
  --bc-neon-tintp300: #d5d3ff;  --bc-neon-tintp400: #c4bfff;
  --bc-neon-tintp500: #b0abff;  --bc-neon-tintp600: #9d98ff;
  --bc-neon-tintp700: #8b84ff;  --bc-neon-tintp800: #7871ff;
  --bc-neon-tintp900: #665eff;

  /* Neon Shade/Primary */
  --bc-neon-shadep100: #05005d;  --bc-neon-shadep200: #060071;
  --bc-neon-shadep300: #070085;  --bc-neon-shadep400: #090098;
  --bc-neon-shadep500: #0900ab;  --bc-neon-shadep600: #0a00bf;
  --bc-neon-shadep700: #0b00d4;  --bc-neon-shadep800: #0c00e6;
  --bc-neon-shadep900: #0d00fa;

  /* Neon Tint/Secondary */
  --bc-neon-tints100: #fbfff9;  --bc-neon-tints200: #f0ffe4;
  --bc-neon-tints300: #e4ffd1;  --bc-neon-tints400: #daffbe;
  --bc-neon-tints500: #ceffa9;  --bc-neon-tints600: #c4ff96;
  --bc-neon-tints700: #b8ff82;  --bc-neon-tints800: #adff6f;
  --bc-neon-tints900: #96ff47;

  /* Tint/Primary extended (light mode) */
  --bc-tintp100-l: #eaeaff;  --bc-tintp100-d: #e1e5ef;
  --bc-tintp200-l: #d6d5ff;  --bc-tintp200-d: #c3cce0;
  --bc-tintp300-l: #c2c0ff;  --bc-tintp300-d: #8a9ac0;
  --bc-tintp400-l: #aeabff;  --bc-tintp400-d: #556aa0;
  --bc-tintp500-l: #9a96ff;  --bc-tintp500-d: #3c538f;
  --bc-tintp600-l: #8581ff;  --bc-tintp600-d: #253b7f;
  --bc-tintp700-l: #716cff;  --bc-tintp700-d: #10226e;
  --bc-tintp800-l: #5d57ff;  --bc-tintp800-d: #0a1b61;
  --bc-tintp900-l: #4942ff;  --bc-tintp900-d: #060070;

  /* Shade/Primary extended */
  --bc-shadep100-l: #2f29e5;  --bc-shadep100-d: #040050;
  --bc-shadep200-l: #2a24cc;  --bc-shadep200-d: #05005e;
  --bc-shadep300-l: #2520b2;  --bc-shadep300-d: #040050;
  --bc-shadep400-l: #1f1b99;  --bc-shadep400-d: #030043;
  --bc-shadep500-l: #1a177f;  --bc-shadep500-d: #020037;
  --bc-shadep600-l: #151266;  --bc-shadep600-d: #01002a;
  --bc-shadep700-l: #0f0d4c;  --bc-shadep700-d: #01001f;
  --bc-shadep800-l: #0a0933;  --bc-shadep800-d: #000014;
  --bc-shadep900-l: #050419;  --bc-shadep900-d: #010111;

  /* Tint/Secondary extended */
  --bc-tints100-l: #e6edff;  --bc-tints100-d: #f6fff1;
  --bc-tints200-l: #ccddff;  --bc-tints200-d: #edffe3;
  --bc-tints300-l: #b2cbff;  --bc-tints300-d: #e4ffd5;
  --bc-tints400-l: #9abaff;  --bc-tints400-d: #d2ffb7;
  --bc-tints500-l: #6697ff;  --bc-tints500-d: #c9ffa7;
  --bc-tints600-l: #4c86ff;  --bc-tints600-d: #bfff96;
  --bc-tints700-l: #3276ff;  --bc-tints700-d: #b5ff85;
  --bc-tints800-l: #1964ff;  --bc-tints800-d: #aeff79;
  --bc-tints900-l: #0053ff;  --bc-tints900-d: #a3ff68;

  /* Misc */
  --bc-bubble-outcoming: #352eff19;
  --bc-toggle-disabled2: #e4ebff;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 1 — Semantic shorthand aliases (doc use)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --mav-primary:      #352eff;
  --mav-primary-dark: #a1ff5b;
  --mav-secondary:    #0053ff;
  --mav-tertiary-1:   #7c9dff;
  --mav-tertiary-2:   #030192;

  /* Neutral surface */
  --mav-bg:           #ffffff;
  --mav-bg-secondary: #e5e5e5;
  --mav-surface:      #ffffff;
  --mav-fg:           #171717;
  --mav-muted:        #7f7f7f;
  --mav-border:       #efefef;
  --mav-placeholder:  #b2b2b2;

  /* System */
  --mav-danger:       #ff0000;
  --mav-warning:      #ff8400;
  --mav-success:      #629c28;
  --mav-info:         #144cc7;

  /* Typography — font family tokens */
  --font-jakarta:   'Plus Jakarta Sans', sans-serif;
  --font-inter:     'Inter', sans-serif;
  --font-poppins:   'Poppins', sans-serif;
  --font-unbounded: 'Unbounded', sans-serif;
  --font-sfpro:     'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Active font — override this token to switch the whole system */
  --font-active:  'Plus Jakarta Sans', sans-serif;

  /* Semantic aliases — always reference the active family */
  --font-display: var(--font-active);
  --font-body:    var(--font-active);
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Canonical Figma token */
  --core\/font-family: var(--font-active);

  /* Figma text styles (verbatim, per-property) — PARTIAL SET
     Extracted from styles used on Colors page (7:1040).
     Full set pending Typography page extraction.
     Families route through swappable role tokens (customiser architecture) —
     override the role token to retheme; Figma's literal family is noted per style. */
  --font-role-display: var(--font-unbounded);  /* display/expressive text */
  --font-role-body:    var(--font-sfpro);      /* body/reading text */

  --Text-md\/Regular\/font-family:    var(--font-role-display);  /* Figma: Unbounded */
  --Text-md\/Regular\/font-weight:    300;  /* Figma style: Light */
  --Text-md\/Regular\/font-size:      16px;
  --Text-md\/Regular\/line-height:    1.5;
  --Text-md\/Regular\/letter-spacing: 0;

  --Body-Text-lg\/Semibold\/font-family:    var(--font-role-body);  /* Figma: SF Pro Text */
  --Body-Text-lg\/Semibold\/font-weight:    600;
  --Body-Text-lg\/Semibold\/font-size:      18px;
  --Body-Text-lg\/Semibold\/line-height:    1.2;
  --Body-Text-lg\/Semibold\/letter-spacing: -0.02em;  /* Figma: -2% */

  /* Extended semantic aliases */
  --mav-bg-tertiary: #e6edff;   /* tinted primary bg (swipeup, bg-tertiary) */
  --mav-code-bg:     #0d0d0d;   /* code block bg — invariant dark */
  --mav-focus-ring:  rgba(53,46,255,0.4); /* primary focus shadow color */

  /* Light surface aliases (used in screen mockups / light-theme UI) */
  --bc-surface:      #f5f5f5;   /* near-white light surface / input bg */
  --bc-surface-soft: #f8f8f8;   /* softer near-white */
  --bc-surface-ios:  #f2f2f7;   /* iOS system background (subtle blue tint) */

  /* Platform / dev illustration tokens */
  --bc-android-bg:    #0a1628;  /* Android mockup body / dark navy */
  --bc-android-brand: #1a237e;  /* Material Design indigo accent */
  --bc-code-dark:     #1a1a2e;  /* Dark navy for code block backgrounds */
  --bc-code-comment:  #4a6a8a;  /* Code comment color in syntax examples */
  --bc-success-dark:  #3a6a00;  /* Dark green for AAA accessibility labels */

  /* Radii */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Spacing */
  --space-0:   0px;
  --space-2:   2px;
  --space-4:   4px;
  --space-6:   6px;
  --space-8:   8px;
  --space-10:  10px;
  --space-12:  12px;
  --space-14:  14px;
  --space-16:  16px;
  --space-18:  18px;
  --space-20:  20px;
  --space-24:  24px;
  --space-28:  28px;
  --space-32:  32px;
  --space-36:  36px;
  --space-38:  38px;
  --space-40:  40px;
  --space-44:  44px;
  --space-48:  48px;
  --space-54:  54px;
  --space-56:  56px;
  --space-64:  64px;

  /* Figma spacing scale (verbatim) — Spacing page (11:133).
     Tailwind-style step names (step × 4 = px); dot in Figma name → hyphen (0.5 → 0-5). */
  --spacing\/0:   var(--space-0);    /* 0rem */
  --spacing\/0-5: var(--space-2);    /* 0.125rem */
  --spacing\/1:   var(--space-4);    /* 0.25rem */
  --spacing\/1-5: var(--space-6);    /* 0.375rem */
  --spacing\/2:   var(--space-8);    /* 0.5rem */
  --spacing\/2-5: var(--space-10);   /* 0.625rem */
  --spacing\/3:   var(--space-12);   /* 0.75rem */
  --spacing\/3-5: var(--space-14);   /* 0.875rem */
  --spacing\/4:   var(--space-16);   /* 1rem */
  --spacing\/5:   var(--space-20);   /* 1.25rem */
  --spacing\/6:   var(--space-24);   /* 1.5rem */
  --spacing\/7:   var(--space-28);   /* 1.75rem */
  --spacing\/8:   var(--space-32);   /* 2rem */
  --spacing\/9:   var(--space-36);   /* 2.25rem */
  --spacing\/10:  var(--space-40);   /* 2.5rem */
  --spacing\/11:  var(--space-44);   /* 2.75rem */
  --spacing\/12:  var(--space-48);   /* 3rem */
  --spacing\/14:  var(--space-56);   /* 3.5rem */
  --spacing\/16:  var(--space-64);   /* 4rem */

  /* Shadows */
  --shadow-xs:    0px 2px 4px 0px rgba(16,16,19,0.16);
  --shadow-sm:    0px 2px 4px 0px rgba(16,16,19,0.04), 0px 16px 32px -4px rgba(16,16,19,0.10);
  --shadow-md:    0px 2px 4px 0px rgba(16,16,19,0.04), 0px 24px 48px -8px rgba(16,16,19,0.12);
  --shadow-lg:    0px 2px 4px 0px rgba(16,16,19,0.04), 0px 40px 80px -16px rgba(16,16,19,0.16);
  --shadow-xl:     0px 2px 4px 0px rgba(0,0,0,0.04), 0px 56px 112px -20px rgba(0,0,0,0.18);
  --shadow-custom: 0px 0px 0px 1px rgba(16,16,19,0.08), 0px 8px 16px 0px rgba(16,16,19,0.04);
  --shadow-input:  0px 1px 0px -1px rgba(0,0,0,0.05), 0px 1px 2px -1px rgba(0,0,0,0.05), 0px 2px 4px -2px rgba(0,0,0,0.05), 0px 3px 6px -3px rgba(0,0,0,0.05);
  --shadow-focus:  0 0 0 3px rgba(53,46,255,0.4);
  --focus\/primary: 0 0 0 3px rgba(89,156,219,0.4);  /* Figma effect style focus/primary #599CDB66 */

  /* Figma effect styles (verbatim) — Shadows page (9:97).
     Distinct from the --shadow-* scale above (that one uses rgba(16,16,19,…));
     --shadow\/sm is the same value as --shadow-input. */
  --shadow\/sm:  0px 1px 0px -1px rgba(0,0,0,0.05), 0px 1px 2px -1px rgba(0,0,0,0.05), 0px 2px 4px -2px rgba(0,0,0,0.05), 0px 3px 6px -3px rgba(0,0,0,0.05);
  --shadow\/md:  0px 4px 4px -2px rgba(0,0,0,0.04), 0px 1px 3px 0px rgba(0,0,0,0.04);
  --shadow\/lg:  0px 3px 6px -3px rgba(0,0,0,0.08), 0px 6px 12px -6px rgba(0,0,0,0.08);
  --shadow\/xl:  0px 6px 12px -6px rgba(0,0,0,0.10), 0px 12px 24px -12px rgba(0,0,0,0.08);
  --shadow\/2xl: 0px 12px 24px -12px rgba(0,0,0,0.12), 0px 16px 32px -16px rgba(0,0,0,0.08);

  /* Blur */
  --blur-xs: blur(4px);
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(24px);
  --blur-xl: blur(32px);

  /* Gradients */
  --gradient-bubble-bot: linear-gradient(142deg, rgba(181,210,243,0.10) 0%, #1a5896 100%);
  --gradient-brand:      linear-gradient(135deg, var(--bc-primary-soft) 0%, var(--bc-dark-primary-soft) 100%);
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 1 — Foundation color tokens (Figma verbatim, light mode)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Core */
  --Main\/White:       #ffffff;
  --Main\/Black:       #171717;
  --Main\/Grey:        #efefef;
  --Main\/Transparant: #ffffff00;
  --Main\/Primary:     #352eff;
  --Main\/Secondary:   #0053ff;
  --Main\/Tertiary-1:  #7c9dff;
  --Main\/Tertiary-2:  #030192;
  --Main\/Variation:   #ff00ff;

  /* Mono */
  --Mono\/100: #e5e5e5;
  --Mono\/200: #cccccc;
  --Mono\/300: #b2b2b2;
  --Mono\/400: #999999;
  --Mono\/500: #7f7f7f;
  --Mono\/600: #666666;
  --Mono\/700: #4c4c4c;
  --Mono\/800: #333333;
  --Mono\/900: #191919;

  /* System */
  --System\/Danger:       #ff0000;
  --System\/Danger-soft:  #ff00001a;
  --System\/Danger-dark:  #e93a2a;
  --System\/Success:      #629c28;
  --System\/Success-soft: #629c281a;
  --System\/Warning:      #ff8400;
  --System\/Warning-soft: #ff84001a;
  --System\/Natural:      #d9d9d9;
  --System\/Primary:      #352eff;
  --System\/Primary-soft: #352eff1a;

  /* Tint/Primary */
  --Tint\/Primary\/100: #eaeaff;
  --Tint\/Primary\/200: #d6d5ff;
  --Tint\/Primary\/300: #c2c0ff;
  --Tint\/Primary\/400: #aeabff;
  --Tint\/Primary\/500: #9a96ff;
  --Tint\/Primary\/600: #8581ff;
  --Tint\/Primary\/700: #716cff;
  --Tint\/Primary\/800: #5d57ff;
  --Tint\/Primary\/900: #4942ff;

  /* Shade/Primary */
  --Shade\/Primary\/100: #2f29e5;
  --Shade\/Primary\/200: #2a24cc;
  --Shade\/Primary\/300: #2520b2;
  --Shade\/Primary\/400: #1f1b99;
  --Shade\/Primary\/500: #1a177f;
  --Shade\/Primary\/600: #151266;
  --Shade\/Primary\/700: #0f0d4c;
  --Shade\/Primary\/800: #0a0933;
  --Shade\/Primary\/900: #050419;

  /* Tint/Secondary */
  --Tint\/Secondary\/100: #e6edff;
  --Tint\/Secondary\/200: #ccddff;
  --Tint\/Secondary\/300: #b2cbff;
  --Tint\/Secondary\/400: #9abaff;
  --Tint\/Secondary\/500: #6697ff;
  --Tint\/Secondary\/600: #4c86ff;
  --Tint\/Secondary\/700: #3276ff;
  --Tint\/Secondary\/800: #1964ff;
  --Tint\/Secondary\/900: #0053ff;

  /* Shade/Secondary */
  --Shade\/Secondary\/100: #004ae6;
  --Shade\/Secondary\/200: #0042cc;
  --Shade\/Secondary\/300: #003ab2;
  --Shade\/Secondary\/400: #003199;
  --Shade\/Secondary\/500: #00297f;
  --Shade\/Secondary\/600: #002166;
  --Shade\/Secondary\/700: #00184c;
  --Shade\/Secondary\/800: #000f33;
  --Shade\/Secondary\/900: #000819;

  /* Tint/Tertiary */
  --Tint\/Tertiary\/100: #f1f5ff;
  --Tint\/Tertiary\/200: #e4ebff;
  --Tint\/Tertiary\/300: #d7e1ff;
  --Tint\/Tertiary\/400: #cbd7ff;
  --Tint\/Tertiary\/500: #b0c5ff;
  --Tint\/Tertiary\/600: #a4bbff;
  --Tint\/Tertiary\/700: #96b0ff;
  --Tint\/Tertiary\/800: #89a6ff;
  --Tint\/Tertiary\/900: #7c9dff;

  /* Tint/Tertiary 2 */
  --Tint\/Tertiary-2\/100: #e5e5f4;
  --Tint\/Tertiary-2\/200: #cccce9;
  --Tint\/Tertiary-2\/300: #b3b2de;
  --Tint\/Tertiary-2\/400: #9a99d3;
  --Tint\/Tertiary-2\/500: #8180c8;
  --Tint\/Tertiary-2\/600: #6766bd;
  --Tint\/Tertiary-2\/700: #4e4db2;
  --Tint\/Tertiary-2\/800: #3533a7;
  --Tint\/Tertiary-2\/900: #1c1a9c;

  /* Shade/Tertiary */
  --Shade\/Tertiary\/100: #6f8de5;
  --Shade\/Tertiary\/200: #637dcc;
  --Shade\/Tertiary\/300: #566db2;
  --Shade\/Tertiary\/400: #4a5f99;
  --Shade\/Tertiary\/500: #3e4e7f;
  --Shade\/Tertiary\/600: #313e66;
  --Shade\/Tertiary\/700: #252f4c;
  --Shade\/Tertiary\/800: #171f34;
  --Shade\/Tertiary\/900: #0b0f19;

  /* Shade/Tertiary 2 */
  --Shade\/Tertiary-2\/100: #020084;
  --Shade\/Tertiary-2\/200: #020074;
  --Shade\/Tertiary-2\/300: #020066;
  --Shade\/Tertiary-2\/400: #010057;
  --Shade\/Tertiary-2\/500: #010049;
  --Shade\/Tertiary-2\/600: #01003a;
  --Shade\/Tertiary-2\/700: #00002b;
  --Shade\/Tertiary-2\/800: #00001d;
  --Shade\/Tertiary-2\/900: #00000e;

  /* Color — doc-page neutrals (Figma "Netural" typo preserved) */
  --Color\/Netural\/White: #ffffff;
  --Color\/Gray\/300:      #c8c8c8;
  --Color\/Gray\/500:      #a1a1a1;
  --Color\/Dark\/500:      #06050e;

  /* Other — dimensions (Figma numbers are px) */
  --Other\/Radius\/xs: var(--radius-xs);
  --Other\/Radius\/md: var(--radius-md);
  --Other\/Gap\/4:  6px;
  --Other\/Gap\/15: 40px;

  /* Line chart */
  --Line-Chart\/line-loss:        #ff0000;
  --Line-Chart\/gradient-loss:    #ff00001a;
  --Line-Chart\/line-gain:        #629c28;
  --Line-Chart\/gradient-gain:    #629c281a;
  --Line-Chart\/line-warning:     #ff8400;
  --Line-Chart\/gradient-warning: #ff84001a;
  --Line-Chart\/Natural:          #d9d9d9;
  --Line-Chart\/line-brand:       #352eff;
  --Line-Chart\/gradient-brand:   #352eff1a;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYER 2 — Semantic & component tokens (light mode)
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Background */
  --background\/bg-default:   #ffffff;
  --background\/bg-secondary: #e5e5e5;
  --background\/bg-tertiary:  #e6edff;

  /* Bottom sheet / overlay */
  --color\/blanket\/bold:     #0d0d0d80;
  --radius\/sheet\/lg:        32px;

  /* Text */
  --main-text\/default:     #171717;
  --main-text\/description: #7f7f7f;
  --main-text\/placeholder: #b2b2b2;
  --main-text\/disabled:    #cccccc;
  --main-text\/brand:       #352eff;
  --main-text\/inverterd:   #ffffff;

  /* Icon */
  --icon\/default:  #171717;
  --icon\/active:   #352eff;
  --icon\/subtle:   #b2b2b2;
  --icon\/disabled: #cccccc;
  --icon\/inverted: #ffffff;

  /* Divider (intentional typo — match Figma exactly) */
  --devider\/default: #efefef;

  /* Border */
  --border\/default:  #171717;
  --border\/inverted: #ffffff;
  --border\/active:   #352eff;
  --border\/subtle:   #efefef;
  --border\/disabled: #cccccc;

  /* Button — primary */
  --btn\/primary\/default:       #352eff;
  --btn\/primary\/hover:         #171717;  /* Figma 52:24315 — hover is near-black (was #7c9dff) */
  --btn\/primary\/clicked:       #030192;
  --btn\/primary\/disabled:      #e5e5e5;
  --btn\/primary\/loading:       #352eff;
  --btn\/primary\/text-default:  #ffffff;
  --btn\/primary\/text-inverted: #171717;

  /* Button — secondary */
  --btn\/secondary\/default:          transparent;
  --btn\/secondary\/hover:            #efefef;
  --btn\/secondary\/clicked:          #352eff;
  --btn\/secondary\/disabled:         transparent;
  --btn\/secondary\/loading:          #ffffff;
  --btn\/secondary\/default-outline:  #efefef;
  --btn\/secondary\/hover-outline:    #7c9dff;
  --btn\/secondary\/clicked-outline:  #ffffff;
  --btn\/secondary\/loading-outline:  #352eff;
  --btn\/secondary\/disabled-outline: #cccccc;
  --btn\/secondary\/text-default:     #171717;
  --btn\/secondary\/text-inverted:    #171717;

  /* Button — text-only */
  --btn\/textonly\/default:  #352eff;
  --btn\/textonly\/hover:    #7c9dff;
  --btn\/textonly\/clicked:  #030192;
  --btn\/textonly\/disabled: #e5e5e5;
  --btn\/textonly\/loading:  #352eff;

  /* Button — sliding */
  --btn\/sliding\/default:          #352eff;
  --btn\/sliding\/hover:            #7c9dff;
  --btn\/sliding\/clicked:          #030192;
  --btn\/sliding\/disabled:         #e5e5e5;
  --btn\/sliding\/Bg:               #ffffff;
  --btn\/sliding\/sliding-disabled: #cccccc;
  --btn\/sliding\/text-default:     #ffffff;
  --btn\/sliding\/text-inverted:    #171717;

  /* Button — swipeup */
  --btn\/swipeup\/default:       #352eff;
  --btn\/swipeup\/hover:         #7c9dff;
  --btn\/swipeup\/clicked:       #030192;
  --btn\/swipeup\/disabled:      #e5e5e5;
  --btn\/swipeup\/loading:       #352eff;
  --btn\/swipeup\/Bg-2:          #e6edff;
  --btn\/swipeup\/text-default:  #ffffff;
  --btn\/swipeup\/text-inverted: #171717;

  /* Input field */
  --input-field\/default\/bg-box:           #ffffff;
  --input-field\/default\/outline-box:      #cccccc;
  --input-field\/default\/text-placeholder: #b2b2b2;
  --input-field\/active\/bg-box-active:      #ffffff;
  --input-field\/active\/outline-box-active: #191919;
  --input-field\/active\/text-active:        #191919;
  --input-field\/focus\/bg-box:             #ffffff;
  --input-field\/focus\/outline-box:        #352eff;
  --input-field\/focus\/text-placeholder:   #191919;
  --input-field\/error\/bg-box:             #ff00001a;
  --input-field\/error\/outline-box:        #ff0000;
  --input-field\/error\/text-placeholder:   #191919;
  --input-field\/error\/label-error:        #ff0000;
  --input-field\/error\/icon-error:         #ff0000;
  --input-field\/disabled\/bg-box-disabled:      #efefef;
  --input-field\/disabled\/outline-box-disabled: #cccccc;
  --input-field\/disabled\/text-disabled:        #b2b2b2;

  /* Progress bar (Figma variable names — fill is shade/primary/900) */
  --shade\/primary\/900: #0d00fa;
  --brand\/primary\/200: #99c2e9;
  --grey\/200:           #ececec;
  --grey\/600:           #5e5e5e;

  /* OTP */
  --OTP\/default\/bg-box:           #ffffff;
  --OTP\/default\/outline-box:      #cccccc;
  --OTP\/default\/text-placeholder: #b2b2b2;
  --OTP\/focus\/bg-box:             #ffffff;
  --OTP\/focus\/outline-box:        #352eff;
  --OTP\/focus\/text-placeholder:   #191919;
  --OTP\/active\/bg-box-active:      #ffffff;
  --OTP\/active\/outline-box-active: #191919;
  --OTP\/active\/text-active:        #191919;
  --OTP\/disabled\/bg-box-disabled:      #efefef;
  --OTP\/disabled\/outline-box-disabled: #cccccc;
  --OTP\/disabled\/text-disabled:        #cccccc;

  /* Checkbox */
  --Checkbox\/default\/bg-box:           #ffffff;
  --Checkbox\/default\/outline-box:      #cccccc;
  --Checkbox\/default\/text-placeholder: #b2b2b2;
  --Checkbox\/active\/bg-box-active:      #352eff;
  --Checkbox\/active\/outline-box-active: #191919;
  --Checkbox\/active\/text-active:        #191919;
  --Checkbox\/disabled\/bg-box-disabled:      #e5e5e5;
  --Checkbox\/disabled\/outline-box-disabled: #b2b2b2;
  --Checkbox\/disabled\/text-disabled:        #cccccc;

  /* Radio (active dot uses --icon/active so it re-themes with the checkbox) */
  --Account\/outline-account-primary: #efefef;
  --Radio\/Radio-Button-Secondary:    #cccccc;

  /* Toggle */
  --toggle\/default\/bg-box:           #e5e5e5;
  --toggle\/default\/text-placeholder: #b2b2b2;
  --toggle\/active\/bg-box-active:     #352eff;
  --toggle\/active\/text-active:       #191919;
  --toggle\/disabled\/bg-box-disabled:   #e5e5e5;
  --toggle\/disabled\/text-disabled:     #cccccc;
  --toggle\/disabled\/bg-box-disabled-2: #e4ebff;

  /* Loader */
  --loader\/spin: #352eff;

  /* Tabs */
  --Tabs\/Tab-Default: #e4ebff;
  --Tabs\/Tab-Active:  #352eff;

  /* Account tile / Select-SOF + Button dock */
  --account\/bg-account-card:           #ffffff;
  --account\/bg-account-card-secondary: #ffffff;
  --account\/outline-account-primary:   #efefef;
  --account\/text-default:              #171717;
  --button-dock\/bg-dock:               #ffffff;

  /* Alert (note: "waring" is intentional Figma typo) */
  --alert\/primary\/bg-box:      #352eff1a;
  --alert\/primary\/text-brand:  #352eff;
  --alert\/primary\/icon:        #352eff;
  --alert\/waring\/bg-box:       #ff84001a;
  --alert\/waring\/text-warning: #ff8400;
  --alert\/waring\/icon:         #ff8400;
  --alert\/success\/bg-box:      #629c281a;
  --alert\/success\/text-success:#629c28;
  --alert\/success\/icon:        #629c28;
  --alert\/danger\/bg-box:       #ff00001a;
  --alert\/danger\/text-danger:  #ff0000;
  --alert\/danger\/icon:         #ff0000;

  /* Badge & chip (note: "waring" is intentional Figma typo) */
  --badge\ \&\ chip\/primary\/bg-box:  #352eff;
  --badge\ \&\ chip\/primary\/text:    #ffffff;
  --badge\ \&\ chip\/primary\/outline: #7c9dff;
  --badge\ \&\ chip\/primary\/icon:    #ffffff;
  --badge\ \&\ chip\/white\/bg-box:    #e5e5e5;
  --badge\ \&\ chip\/white\/text:      #171717;
  --badge\ \&\ chip\/white\/outline:   #efefef;
  --badge\ \&\ chip\/white\/icon:      #171717;
  --badge\ \&\ chip\/waring\/bg-box:   #ff84001a;
  --badge\ \&\ chip\/waring\/text:     #ff8400;
  --badge\ \&\ chip\/waring\/outline:  #ff8400;
  --badge\ \&\ chip\/waring\/icon:     #ff8400;
  --badge\ \&\ chip\/success\/bg-box:  #629c281a;
  --badge\ \&\ chip\/success\/text:    #629c28;
  --badge\ \&\ chip\/success\/outline: #629c28;
  --badge\ \&\ chip\/success\/icon:    #629c28;
  --badge\ \&\ chip\/danger\/bg-box:   #ff00001a;
  --badge\ \&\ chip\/danger\/text:     #ff0000;
  --badge\ \&\ chip\/danger\/outline:  #ff0000;
  --badge\ \&\ chip\/danger\/icon:     #ff0000;

  /* Avatar — Figma component set 206:7252
     bg/text alias existing tokens; status-online is the one new value (green/500). */
  --avatar\/grey\/bg:       var(--Main\/Grey);
  --avatar\/grey\/text:     var(--main-text\/default);
  --avatar\/primary\/bg:    var(--background\/bg-tertiary);
  --avatar\/primary\/text:  var(--main-text\/brand);
  --avatar\/red\/bg:        var(--System\/Danger-soft);
  --avatar\/red\/text:      var(--System\/Danger);
  --avatar\/status-online:  #7cc731;
  --avatar\/status-ring:    #ffffff;

  /* Toast */
  --toast\/bg-default: #ffffff;
  --toast\/text-title: #171717;
  --toast\/text-desc:  #7f7f7f;
  --toast\/icon:       #171717;
  --toast\/outline:    #efefef;

  /* Nav bar */
  --nav\ bar\/bg-primary:   #030192;
  --nav\ bar\/bg-secondary: #efefef;
  --nav\ bar\/bg-tertiary:  #ffffff;
  --nav\ bar\/bg-card:      #efefef;
  --nav\ bar\/active-state: #352eff;
  --nav\ bar\/icon-default: #171717;
  --nav\ bar\/text-default: #171717;

  /* Menu */
  --menu\/bg-primary:   #030192;
  --menu\/bg-secondary: #efefef;
  --menu\/bg-tertiary:  #ffffff;

  /* Loader */
  --loader\/spin: #352eff;

  /* Coachmark */
  --coachmark\/dots:             #352eff;
  --coachmark\/dot-dash:         #352eff;
  --coachmark\/text-title:       #ffffff;
  --coachmark\/text-description: #ffffff;

  /* Bubble */
  --bubble\/bg-incoming:       #efefef;
  --bubble\/bg-outcoming:      #352eff19;
  --bubble\/name-incoming:     #352eff;
  --bubble\/text-outcoming:    #171717;
  --bubble\/text-incoming:     #171717;
  --bubble\/bg-outcoming-reply:#352eff19;
  --bubble\/outline-incoming:  #352eff;

  /* Balance */
  --Balance\/Bg:           #ffffff;
  --Balance\/Bg-secondary: #efefef;

  /* Header / App Bar */
  --Header-app\ bar\/bg-header: #ffffff;

  /* Gain & Loss */
  --gain\&loss\/success\/bg-box:    #629c281a;
  --gain\&loss\/success\/text-gain: #629c28;
  --gain\&loss\/success\/icon:      #629c28;
  --gain\&loss\/danger\/bg-box:     #ff00001a;
  --gain\&loss\/danger\/text-loss:  #ff0000;
  --gain\&loss\/danger\/icon:       #ff0000;

  /* Typography tokens */
  --core\/font-family:         'Plus Jakarta Sans', sans-serif;
  --core\/font-weight\/Medium: 500;
  --core\/font-weight\/Bold:   700;
  --medium\/sm:  12px;
  --medium\/md:  14px;
  --medium\/lg:  16px;
  --medium\/xl:  18px;
  --medium\/xl2: 20px;
  --body\/xs:    10px;
  --body\/sm:    12px;
  --body\/md:    14px;
  --body\/lg:    16px;
  --body\/xl:    18px;
  --body\/xl2:   20px;

  /* Spacing tokens — full scale */
  --Spacing\/0:   var(--space-0);
  --Spacing\/4:   var(--space-4);
  --Spacing\/8:   var(--space-8);
  --Spacing\/10:  var(--space-10);
  --Spacing\/12:  var(--space-12);
  --Spacing\/14:  var(--space-14);
  --Spacing\/16:  var(--space-16);
  --Spacing\/18:  var(--space-18);
  --Spacing\/20:  var(--space-20);
  --Spacing\/24:  var(--space-24);
  --Spacing\/28:  var(--space-28);
  --Spacing\/32:  var(--space-32);
  --Spacing\/38:  var(--space-38);
  --Spacing\/44:  var(--space-44);
  --Spacing\/48:  var(--space-48);
  --Spacing\/54:  var(--space-54);

  /* Spacing semantic aliases */
  --spacing\/header\/none: var(--space-0);
  --spacing\/header\/xs:   var(--space-4);
  --spacing\/header\/sm:   var(--space-8);
  --spacing\/header\/md:   var(--space-16);
  --spacing\/header\/lg:   var(--space-24);

  /* Border radius tokens */
  --border\/border-radius\/xs:   var(--radius-xs);
  --border\/border-radius\/sm:   var(--radius-sm);
  --border\/border-radius\/md:   var(--radius-md);
  --border\/border-radius\/lg:   var(--radius-lg);
  --border\/border-radius\/full: var(--radius-full);

  /* Border width tokens */
  --border-width\/xs: 1px;
  --border-width\/sm: 2px;
  --border-width\/md: 4px;

  /* Layout constraint tokens */
  --layout\/container-padding:  var(--space-20);
  --layout\/max-content-width:  343px;
  --layout\/otp-root-gap:       var(--space-32);
  --layout\/otp-field-gap:      var(--space-16);

  /* OTP slot tokens */
  --otp-slot\/width:     var(--space-48);
  --otp-slot\/height:    var(--space-48);
  --otp-slot\/padding-h: var(--space-16);
  --otp-slot\/padding-v: var(--space-14);
  --otp-slot\/gap:       var(--space-8);
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE overrides
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Aliases */
  --mav-primary:      #a1ff5b;
  --mav-bg:           #171717;
  --mav-bg-secondary: #242424;
  --mav-surface:      #1f1f1f;
  --mav-fg:           #ffffff;
  --mav-muted:        #7f7f7f;
  --mav-border:       #484848;
  --mav-placeholder:  #6a6a6a;

  /* Foundation overrides */
  --Main\/White:       #171717;
  --Main\/Black:       #ffffff;
  --Main\/Grey:        #cccccc;
  --Main\/Primary:     #a1ff5b;
  --Main\/Secondary:   #a1ff5b;
  --Main\/Tertiary-2:  #a1ff5b;

  --Mono\/100: #242424;
  --Mono\/200: #484848;
  --Mono\/300: #6a6a6a;
  --Mono\/400: #666666;
  --Mono\/600: #999999;
  --Mono\/700: #b2b2b2;
  --Mono\/800: #cccccc;
  --Mono\/900: #e5e5e5;

  /* Tint/Primary dark */
  --Tint\/Primary\/100: #e1e5ef;
  --Tint\/Primary\/200: #c3cce0;
  --Tint\/Primary\/300: #8a9ac0;
  --Tint\/Primary\/400: #556aa0;
  --Tint\/Primary\/500: #3c538f;
  --Tint\/Primary\/600: #253b7f;
  --Tint\/Primary\/700: #10226e;
  --Tint\/Primary\/800: #0a1b61;
  --Tint\/Primary\/900: #060070;

  /* Shade/Primary dark */
  --Shade\/Primary\/100: #040050;
  --Shade\/Primary\/200: #05005e;
  --Shade\/Primary\/300: #040050;
  --Shade\/Primary\/400: #030043;
  --Shade\/Primary\/500: #020037;
  --Shade\/Primary\/600: #01002a;
  --Shade\/Primary\/700: #01001f;
  --Shade\/Primary\/800: #000014;
  --Shade\/Primary\/900: #010111;

  /* Tint/Secondary dark */
  --Tint\/Secondary\/100: #f6fff1;
  --Tint\/Secondary\/200: #edffe3;
  --Tint\/Secondary\/300: #e4ffd5;
  --Tint\/Secondary\/400: #d2ffb7;
  --Tint\/Secondary\/500: #c9ffa7;
  --Tint\/Secondary\/600: #bfff96;
  --Tint\/Secondary\/700: #b5ff85;
  --Tint\/Secondary\/800: #aeff79;
  --Tint\/Secondary\/900: #a3ff68;

  /* Shade/Secondary dark */
  --Shade\/Secondary\/100: #8bde4e;
  --Shade\/Secondary\/200: #76be41;
  --Shade\/Secondary\/300: #629e35;
  --Shade\/Secondary\/400: #4e8029;
  --Shade\/Secondary\/500: #3c631e;
  --Shade\/Secondary\/600: #2a4813;
  --Shade\/Secondary\/700: #233c10;
  --Shade\/Secondary\/800: #1c300d;
  --Shade\/Secondary\/900: #010300;

  /* Semantic overrides */
  --background\/bg-default:   #171717;
  --background\/bg-secondary: #242424;
  --background\/bg-tertiary:  #f6fff1;

  /* Bottom sheet / overlay — scrim slightly stronger over dark UI */
  --color\/blanket\/bold:     #00000099;
  --radius\/sheet\/lg:        32px;

  --main-text\/default:     #ffffff;
  --main-text\/brand:       #a1ff5b;
  --main-text\/inverterd:   #171717;

  --icon\/default:  #ffffff;
  --icon\/active:   #a1ff5b;
  --icon\/inverted: #171717;

  --devider\/default: #484848;
  --border\/default:  #ffffff;
  --border\/active:   #a1ff5b;
  --border\/subtle:   #b2b2b2;

  --btn\/primary\/default:      #a1ff5b;
  --btn\/primary\/disabled:     #242424;
  --btn\/primary\/text-default: #171717;
  --btn\/textonly\/default:     #a1ff5b;
  --btn\/textonly\/clicked:     #a1ff5b;

  --input-field\/default\/bg-box:            #171717;
  --input-field\/default\/outline-box:       #484848;
  --input-field\/default\/text-placeholder:  #6a6a6a;
  --input-field\/active\/bg-box-active:       #171717;
  --input-field\/active\/outline-box-active:  #e5e5e5;
  --input-field\/active\/text-active:         #e5e5e5;
  --input-field\/focus\/bg-box:              #171717;
  --input-field\/focus\/outline-box:         #a1ff5b;
  --input-field\/focus\/text-placeholder:    #e5e5e5;

  --OTP\/default\/bg-box:            #171717;
  --OTP\/default\/outline-box:       #484848;
  --OTP\/focus\/bg-box:              #171717;
  --OTP\/focus\/outline-box:         #a1ff5b;
  --OTP\/focus\/text-placeholder:    #e5e5e5;
  --OTP\/active\/bg-box-active:       #171717;
  --OTP\/active\/outline-box-active:  #e5e5e5;
  --OTP\/active\/text-active:         #e5e5e5;

  --loader\/spin: #a1ff5b;
  --Tabs\/Tab-Active: #a1ff5b;
  --account\/bg-account-card:           #242424;
  --account\/bg-account-card-secondary: #1f1f1f;
  --account\/outline-account-primary:   #484848;
  --account\/text-default:              #e5e5e5;
  --button-dock\/bg-dock:               #171717;
  --toggle\/default\/bg-box:       #242424;
  --toggle\/active\/bg-box-active: #a1ff5b;

  --Checkbox\/active\/bg-box-active: #a1ff5b;

  --alert\/primary\/bg-box:     #352eff1a;
  --alert\/primary\/text-brand: #a1ff5b;

  --badge\ \&\ chip\/primary\/bg-box: #a1ff5b;
  --badge\ \&\ chip\/primary\/text:   #171717;
  --badge\ \&\ chip\/primary\/icon:   #171717;

  --toast\/bg-default: #171717;
  --toast\/text-title: #ffffff;
  --toast\/icon:       #ffffff;
  --toast\/outline:    #484848;

  --nav\ bar\/bg-primary:   #ffffff;
  --nav\ bar\/bg-secondary: #ffffff;
  --nav\ bar\/bg-card:      #ffffff;
  --nav\ bar\/active-state: #ffffff;
  --nav\ bar\/icon-default: #ffffff;
  --nav\ bar\/text-default: #ffffff;

  --loader\/spin: #a1ff5b;

  --coachmark\/dots:     #ffffff;
  --coachmark\/dot-dash: #ffffff;

  /* Chat bubbles — dark: incoming dark-grey, outgoing solid blue,
     sender name re-themes to lime (per the Figma dark screen). */
  --bubble\/bg-incoming:       #2c2c2e;
  --bubble\/bg-outcoming:      #2f43d9;
  --bubble\/name-incoming:     #a1ff5b;
  --bubble\/text-outcoming:    #ffffff;
  --bubble\/text-incoming:     #f2f2f2;
  --bubble\/bg-outcoming-reply:#ffffff26;
  --bubble\/outline-incoming:  #a1ff5b;

  --Balance\/Bg:           #171717;
  --Balance\/Bg-secondary: #484848;

  --Header-app\ bar\/bg-header: #171717;

  --System\/Primary:    #a1ff5b;
  --System\/Primary-soft: #a1ff5b1a;

  --Line-Chart\/line-brand:     #a1ff5b;
  --Line-Chart\/gradient-brand: #a1ff5b1a;
}

/* ══════════════════════════════════════════════════════════════════════════
   NEON THEME
   Set data-theme="neon" on <html> or <body> to activate.
   Deep navy + electric lime brand. Invariant palette (same light & dark).
   ══════════════════════════════════════════════════════════════════════════ */
[data-theme="neon"] {
  --mav-primary:      #a1ff5b;
  --mav-bg:           #101010;
  --mav-bg-secondary: #1a1a1a;
  --mav-surface:      #161616;
  --mav-fg:           #ffffff;
  --mav-muted:        #7f7f7f;
  --mav-border:       #2a2a2a;
  --mav-placeholder:  #4c4c4c;
  --mav-secondary:    #a1ff5b;
  --mav-tertiary-1:   #4af482;
  --mav-tertiary-2:   #00ffff;

  --Main\/White:       #ffffff;
  --Main\/Black:       #101010;
  --Main\/Grey:        #efefef;
  --Main\/Primary:     #05005d;
  --Main\/Secondary:   #a1ff5b;
  --Main\/Tertiary-1:  #4af482;
  --Main\/Tertiary-2:  #00ffff;
  --Main\/Variation:   #ff0090;

  --background\/bg-default:   #101010;
  --background\/bg-secondary: #1a1a1a;

  --main-text\/default:     #ffffff;
  --main-text\/brand:       #a1ff5b;
  --main-text\/inverterd:   #101010;

  --icon\/default:  #ffffff;
  --icon\/active:   #a1ff5b;
  --icon\/inverted: #101010;

  --btn\/primary\/default:      #a1ff5b;
  --btn\/primary\/hover:        #4af482;
  --btn\/primary\/clicked:      #6bf800;
  --btn\/primary\/text-default: #101010;

  --toggle\/active\/bg-box-active: #a1ff5b;
  --Checkbox\/active\/bg-box-active: #a1ff5b;

  --loader\/spin: #a1ff5b;

  /* Tint/Primary (neon) */
  --Tint\/Primary\/100: #fafaff;
  --Tint\/Primary\/200: #e8e6ff;
  --Tint\/Primary\/300: #d5d3ff;
  --Tint\/Primary\/400: #c4bfff;
  --Tint\/Primary\/500: #b0abff;
  --Tint\/Primary\/600: #9d98ff;
  --Tint\/Primary\/700: #8b84ff;
  --Tint\/Primary\/800: #7871ff;
  --Tint\/Primary\/900: #665eff;

  /* Shade/Primary (neon) */
  --Shade\/Primary\/100: #05005d;
  --Shade\/Primary\/200: #060071;
  --Shade\/Primary\/300: #070085;
  --Shade\/Primary\/400: #090098;
  --Shade\/Primary\/500: #0900ab;
  --Shade\/Primary\/600: #0a00bf;
  --Shade\/Primary\/700: #0b00d4;
  --Shade\/Primary\/800: #0c00e6;
  --Shade\/Primary\/900: #0d00fa;

  /* Tint/Secondary (neon) */
  --Tint\/Secondary\/100: #fbfff9;
  --Tint\/Secondary\/200: #f0ffe4;
  --Tint\/Secondary\/300: #e4ffd1;
  --Tint\/Secondary\/400: #daffbe;
  --Tint\/Secondary\/500: #ceffa9;
  --Tint\/Secondary\/600: #c4ff96;
  --Tint\/Secondary\/700: #b8ff82;
  --Tint\/Secondary\/800: #adff6f;
  --Tint\/Secondary\/900: #96ff47;
}

/* ═══ SHARED ═══ */
/* MaV Design System — Shared Layout + Component Utilities */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mav-fg);
  background: var(--mav-bg);
  -webkit-font-smoothing: antialiased;
  transition: background 0.2s, color 0.2s;
}

/* ── Doc layout ───────────────────────────────────────────────────────── */
.doc-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.doc-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid var(--mav-border);
  padding: 24px 0;
  background: var(--mav-bg);
}

.doc-main {
  padding: 48px 64px;
  max-width: 1100px;
}

/* ── Sidebar nav ──────────────────────────────────────────────────────── */
.sidebar-logo {
  padding: 0 24px 20px;
  border-bottom: 1px solid var(--mav-border);
  margin-bottom: 16px;
}

.sidebar-logo-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.sidebar-logo-icon {
  width: 32px; height: 32px;
  background: var(--mav-primary);
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.sidebar-logo-icon svg { fill: var(--bc-white); }
[data-theme="dark"] .sidebar-logo-icon svg { fill: var(--bc-black); }

.sidebar-logo-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--mav-fg);
  letter-spacing: -0.01em;
}

.sidebar-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mav-muted);
  padding: 16px 24px 6px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1px 12px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mav-muted);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.sidebar-link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--mav-muted);
  transition: color 0.15s;
}

.sidebar-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-link:hover {
  color: var(--mav-fg);
  background: var(--mav-border);
}

.sidebar-link:hover .sidebar-link-icon { color: var(--mav-fg); }

.sidebar-link.active {
  color: var(--mav-fg);
  font-weight: 600;
  background: var(--mav-bg-secondary);
}

.sidebar-link.active .sidebar-link-icon { color: var(--mav-primary); }

/* ── Page header ──────────────────────────────────────────────────────── */
.page-header { margin-bottom: 48px; }

.page-breadcrumb {
  font-size: 12px;
  color: var(--mav-muted);
  margin-bottom: 8px;
}

.page-breadcrumb a { color: var(--mav-primary); text-decoration: none; }

.page-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mav-fg);
  line-height: 1.2;
}

.page-desc {
  font-size: 16px;
  color: var(--mav-muted);
  margin-top: 8px;
  max-width: 560px;
}

/* ── Section ──────────────────────────────────────────────────────────── */
.section { margin-bottom: 56px; }

.section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--mav-fg);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}

.section-desc {
  font-size: 13px;
  color: var(--mav-muted);
  margin-bottom: 20px;
}

.section-divider {
  height: 1px;
  background: var(--mav-border);
  margin: 40px 0;
}

/* ── Component preview card ───────────────────────────────────────────── */
.preview-card {
  border: 1px solid var(--mav-border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.preview-canvas {
  padding: 40px;
  background: var(--mav-bg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.preview-canvas.dark-bg {
  background: var(--bc-black);
}

.preview-canvas.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.preview-meta {
  padding: 14px 20px;
  background: var(--mav-bg-secondary);
  border-top: 1px solid var(--mav-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.preview-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--mav-fg);
}

.preview-sublabel {
  font-size: 11px;
  color: var(--mav-muted);
}

/* ── Color swatch ─────────────────────────────────────────────────────── */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}

.swatch {
  border-radius: 8px;
  overflow: hidden;
  cursor: default;
}

.swatch-color {
  height: 60px;
  width: 100%;
}

.swatch-info {
  padding: 6px 8px;
  background: var(--mav-bg);
  border: 1px solid var(--mav-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.swatch-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--mav-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swatch-hex {
  font-size: 10px;
  color: var(--mav-muted);
  font-family: var(--font-mono);
}

/* ── Token row ────────────────────────────────────────────────────────── */
.token-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.token-table th {
  text-align: left;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mav-muted);
  border-bottom: 1px solid var(--mav-border);
}

.token-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--mav-border);
  vertical-align: middle;
}

.token-table tr:last-child td { border-bottom: none; }

.token-name {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mav-primary);
}

.token-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mav-muted);
}

.token-swatch-sm {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.08);
  vertical-align: middle;
  margin-right: 6px;
}

/* ── Chip / Badge ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
}

.badge-primary { background: var(--mav-primary); color: var(--bc-white); }
[data-theme="dark"] .badge-primary { color: var(--bc-black); }
.badge-success  { background: color-mix(in srgb, var(--mav-success) 12%, transparent); color: var(--mav-success); }
.badge-warning  { background: color-mix(in srgb, var(--mav-warning) 12%, transparent); color: var(--mav-warning); }
.badge-danger   { background: color-mix(in srgb, var(--mav-danger) 10%, transparent); color: var(--mav-danger); }
.badge-neutral  { background: var(--mav-border); color: var(--mav-muted); }

/* ── Theme toggle ─────────────────────────────────────────────────────── */
.theme-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--mav-border);
  background: var(--mav-bg);
  color: var(--mav-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.theme-btn:hover {
  background: var(--mav-border);
  color: var(--mav-fg);
}

/* ── Top bar ──────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 48px;
  background: var(--mav-bg);
  border-bottom: 1px solid var(--mav-border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.topbar-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mav-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.topbar-back:hover { color: var(--mav-fg); }

.topbar-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--mav-fg);
}

.topbar-spacer { flex: 1; }

/* ── Grid layouts ─────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-sidebar { display: none; }
  .doc-main { padding: 24px 20px; }
}

/* ── Code block ───────────────────────────────────────────────────────── */
.code-block {
  background: var(--mav-code-bg);
  border-radius: 8px;
  padding: 16px 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--bc-mono100-l);
  margin: 12px 0;
}

.code-block .token-k { color: var(--mav-primary-dark); }
.code-block .token-s { color: var(--mav-tertiary-1); }
.code-block .token-c { color: var(--bc-mono600-l); }

/* ── Spacing guide ────────────────────────────────────────────────────── */
.space-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--mav-border);
}

.space-bar {
  background: var(--mav-primary);
  height: 16px;
  border-radius: 2px;
  opacity: 0.7;
}

.space-label { font-size: 12px; font-family: var(--font-mono); color: var(--mav-fg); min-width: 80px; }
.space-desc  { font-size: 12px; color: var(--mav-muted); }

/* ── Scrollbar ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--mav-border); border-radius: 9999px; }

/* ═══════════════════════════════════════════════════════════════════════
   MOTION LAYER — global microanimations, applied to every page.
   Smooth + clean: responsive interactive feedback, a soft content reveal,
   and a whole-page cross-fade when switching light/dark.
   All gated behind prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {

  /* interactive feedback on primitives that don't already define their own */
  button, a, summary, [role="button"],
  input, select, textarea,
  .swatch, .token-swatch, .token-swatch-sm,
  .sidebar-link, .theme-btn {
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, box-shadow .2s ease, transform .12s ease, opacity .18s ease;
  }

  /* universal, subtle press — component-specific rules (bigger scales) still win */
  button:not(:disabled):active,
  [role="button"]:active { transform: scale(.97); }

  /* the docs theme toggle + back link get a gentle lift */
  .theme-btn:hover, .topbar-back:hover { transform: translateY(-1px); }

  /* demo cards: soft reveal on load + hover elevation */
  .preview-card {
    animation: mav-rise .5s cubic-bezier(.22, .9, .3, 1) both;
    transition: box-shadow .25s ease, border-color .2s ease;
  }
  .preview-card:hover { box-shadow: 0 10px 34px rgba(0, 0, 0, .07); }
  .section:nth-of-type(2) .preview-card { animation-delay: .04s; }
  .section:nth-of-type(3) .preview-card { animation-delay: .08s; }
  .section:nth-of-type(4) .preview-card { animation-delay: .12s; }

  /* token table rows wake up on hover */
  .token-table tbody tr { transition: background-color .15s ease; }
  .token-table tbody tr:hover { background: var(--mav-bg-secondary); }

  @keyframes mav-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Whole-page cross-fade when toggling light/dark (added briefly by theme.js) */
html.theme-anim,
html.theme-anim *:not(svg):not(path):not(.dp-ind):not(.pg-ind) {
  transition: background-color .38s ease, color .38s ease,
              border-color .38s ease, fill .38s ease, stroke .38s ease, box-shadow .38s ease !important;
}

/* Animated numbers — a stepped value slides in directionally: up when it
   increases, down when it decreases (matches the pagination page count).
   Opt in with class "mav-num"; js/theme.js toggles the direction class. */
.mav-num { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .mav-num.mav-num-up   { animation: mav-num-up   .34s cubic-bezier(.34, 1.3, .4, 1); }
  .mav-num.mav-num-down { animation: mav-num-down .34s cubic-bezier(.34, 1.3, .4, 1); }
}
@keyframes mav-num-up   { from { opacity: 0; transform: translateY(9px);  } to { opacity: 1; transform: none; } }
@keyframes mav-num-down { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ COMPONENTS ═══ */

/* ══════════ _finance_dark_tmp.html ══════════ */
/* Balance card */
.balance-card{
  background:linear-gradient(135deg,var(--mav-primary) 0%,var(--mav-secondary) 100%);
  border-radius:20px;padding:28px;color:var(--bc-white);width:343px;
  box-shadow:0 8px 32px rgba(53,46,255,0.35);
}
.bal-label{font-size:12px;opacity:.7;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.bal-amount{font-size:36px;font-weight:700;letter-spacing:-0.02em;margin:6px 0 4px}
.bal-sub{font-size:12px;opacity:.6}
.bal-row{display:flex;justify-content:space-between;align-items:flex-end}
.bal-actions{display:flex;gap:12px;margin-top:24px}
.bal-btn{
  flex:1;padding:10px;border-radius:10px;
  background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.25);
  color:var(--bc-white);font-size:12px;font-weight:600;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;font-family:inherit;
}
.bal-btn svg{opacity:.9}

/* Dark balance card */
.balance-card-dk{
  background:linear-gradient(135deg,var(--mav-fg) 0%,var(--mav-code-bg) 100%);
  border:1px solid var(--bc-mono100-d);
}
.balance-card-dk .bal-btn{
  background:rgba(161,255,91,0.12);border-color:rgba(161,255,91,0.25);
}

/* Gain/Loss widget */
.stat-widget{
  display:flex;align-items:center;gap:12px;
  padding:16px;border-radius:12px;border:1px solid var(--mav-border);
  background:var(--mav-bg);
}
.stat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon-gain{background:color-mix(in srgb,var(--mav-success) 12%,transparent)}
.stat-icon-loss{background:rgba(255,0,0,0.08)}
.stat-icon-neutral{background:rgba(53,46,255,0.08)}
.stat-label{font-size:12px;color:var(--mav-muted);margin-bottom:2px}
.stat-value{font-size:20px;font-weight:700;color:var(--mav-fg);letter-spacing:-0.01em}
.stat-value-gain{color:var(--mav-success)}
.stat-value-loss{color:var(--mav-danger)}
.stat-change{font-size:11px;font-weight:500;margin-top:2px}
.stat-change-up{color:var(--mav-success)}
.stat-change-down{color:var(--mav-danger)}

/* Transaction list item */
.txn-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--mav-border);
}
.txn-item:last-child{border-bottom:none}
.txn-icon{width:42px;height:42px;border-radius:12px;background:var(--mav-border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.txn-body{flex:1}
.txn-name{font-size:14px;font-weight:600;color:var(--mav-fg)}
.txn-meta{font-size:12px;color:var(--mav-muted);margin-top:2px}
.txn-amount{font-size:15px;font-weight:700;text-align:right}
.txn-amount-credit{color:var(--mav-success)}
.txn-amount-debit{color:var(--mav-danger)}
.txn-date{font-size:11px;color:var(--mav-muted);margin-top:2px;text-align:right}

/* Mini chart bar */
.chart-bar-wrap{display:flex;align-items:flex-end;gap:6px;height:80px}
.chart-bar{border-radius:4px 4px 0 0;flex:1;transition:opacity .15s;cursor:pointer}
.chart-bar:hover{opacity:.7}
.chart-bar-active{background:var(--mav-primary)}
.chart-bar-inactive{background:var(--mav-border)}

/* Limit indicator */
.limit-track{height:8px;border-radius:9999px;background:var(--mav-border);overflow:hidden}
.limit-fill{height:100%;border-radius:9999px;transition:width .3s}

/* Account card (minimal) */
.acc-card{
  display:flex;align-items:center;gap:14px;
  padding:16px;border-radius:12px;border:1px solid var(--mav-border);
  background:var(--mav-bg);
}
.acc-logo{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.acc-info{flex:1}
.acc-bank{font-size:13px;font-weight:600;color:var(--mav-fg)}
.acc-num{font-size:11px;color:var(--mav-muted);font-family:var(--font-mono);margin-top:2px}
.acc-bal{font-size:15px;font-weight:700;color:var(--mav-fg)}
.acc-bal-sub{font-size:11px;color:var(--mav-muted)}

/* ══════════ app-bar.html ══════════ */
/* ══ Header / App Bar — Figma "❖ Top Navigation" (203:1615) ═══════════════════
   The mobile top navigation bar: an iOS status bar over a 56px row with a
   leading back icon, a centered screen title, and a trailing slot (elemAfter:
   none / text button / icon button / multiple icons). appearance = default
   (light) or inverted (dark surface); background token drives the fill. */

.appbar{width:375px;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;
  background:var(--Header-app\ bar\/bg-header,#ffffff);overflow:hidden;
  font-family:'Plus Jakarta Sans',sans-serif}
[data-theme=dark] .appbar{background:var(--Header-app\ bar\/bg-header,#171717)}

/* status bar */
.ab-status{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.ab-time{font-family:'Inter',-apple-system,sans-serif;font-weight:600;font-size:15px;color:var(--icon\/default,#171717);letter-spacing:.2px}
.ab-levels{display:flex;gap:6px;align-items:center}
.ab-levels svg{display:block;fill:var(--icon\/default,#171717)}
[data-theme=dark] .ab-time,[data-theme=dark] .ab-levels svg{color:var(--mav-fg,#fff);fill:var(--mav-fg,#fff)}

/* nav row */
.ab-row{height:56px;display:flex;align-items:center}
.ab-side{width:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:2px}
.ab-side.after{width:auto;min-width:44px;padding-right:8px}
.ab-title{flex:1 0 0;min-width:0;text-align:center;font-weight:700;font-size:16px;
  color:var(--main-text\/default,#171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
[data-theme=dark] .ab-title{color:var(--mav-fg,#fff)}

/* icon button */
.ab-ico{width:32px;height:32px;border:0;background:transparent;cursor:pointer;border-radius:999px;
  display:flex;align-items:center;justify-content:center;padding:0}
.ab-ico svg{width:24px;height:24px;stroke:var(--icon\/default,#171717);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ab-ico .dots{fill:var(--icon\/default,#171717);stroke:none}
[data-theme=dark] .ab-ico svg{stroke:var(--mav-fg,#fff)}
[data-theme=dark] .ab-ico .dots{fill:var(--mav-fg,#fff)}

/* text button */
.ab-txt{border:0;background:transparent;cursor:pointer;padding:0 8px;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:500;font-size:14px;color:var(--btn\/textonly\/default,#352eff);white-space:nowrap}
[data-theme=dark] .ab-txt{color:var(--btn\/textonly\/default,#a1ff5b)}

/* inverted appearance (dark bar on light screen) */
.appbar.inverted{background:#171717}
.appbar.inverted .ab-time,.appbar.inverted .ab-levels svg{color:#fff;fill:#fff}
.appbar.inverted .ab-title{color:#fff}
.appbar.inverted .ab-ico svg{stroke:#fff}
.appbar.inverted .ab-ico .dots{fill:#fff}
.appbar.inverted .ab-txt{color:var(--mav-primary-dark,#a1ff5b)}

/* framed variant (with hairline bottom border = background token off) */
.appbar.bordered{border-bottom:1px solid var(--mav-border,#efefef)}

/* stages */
.ab-stage{background:var(--mav-surface,#f5f5f5);border-radius:16px;padding:28px;display:flex;flex-wrap:wrap;gap:28px;justify-content:center}
.canvas-dark{background:var(--main\/white,#171717);border-radius:16px;padding:28px;display:flex;flex-wrap:wrap;gap:28px;justify-content:center}
.ab-cell{display:flex;flex-direction:column;gap:12px;align-items:center}
.ab-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.ab-frame{border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.phone{width:300px;border-radius:28px;overflow:hidden;border:1px solid var(--mav-border);background:var(--mav-bg,#fff)}
.phone-body{padding:20px;display:flex;flex-direction:column;gap:12px}
.phone-body .pl{height:12px;border-radius:6px;background:var(--mav-border)}

/* ══════════ auth-otp.html ══════════ */
/* ══ OTP Verification — Figma "• OTP" organism (162:1133) ═════════════════════
   Composes the OTP component into a verification screen: section header (title +
   description with phone), 6 code slots (Box or Boxless), a resend row (reset
   countdown + Resend Code), and a Verify button that enables once the code is
   complete. Reuses the OTP atom's --OTP/* tokens, so it re-themes in dark. */
.phone{width:360px;max-width:100%;border:1px solid var(--mav-border);border-radius:28px;overflow:hidden;
  background:var(--mav-bg);box-shadow:0 20px 50px -24px rgba(0,0,0,.35)}
.screen{padding:32px 24px;display:flex;flex-direction:column;gap:32px}
.otp-header{display:flex;flex-direction:column;gap:4px}
.otp-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;color:var(--main-text\/default,#171717)}
.otp-desc{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:16px;line-height:1.4;color:var(--main-text\/description,#7f7f7f)}
.otp-desc b{color:var(--main-text\/default,#171717);font-weight:700}
.otp-field{display:flex;flex-direction:column;gap:16px}
.otp-slots{display:flex;gap:8px}
.otp-resend{display:flex;align-items:center;justify-content:space-between}
.otp-timer{display:flex;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px}
.otp-timer .lbl{color:var(--main-text\/description,#7f7f7f)}
.otp-timer .t{color:var(--main-text\/default,#171717)}
.otp-resend-btn{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:12px;color:var(--btn\/textonly\/default,#352eff);background:none;border:0;cursor:pointer;padding:0}
.otp-resend-btn:disabled{color:var(--mav-muted);cursor:default}
.verify{width:100%;padding:12px;border:0;border-radius:var(--border\/border-radius\/sm,4px);cursor:not-allowed;
  background:var(--btn\/primary\/disabled,#e5e5e5);color:var(--btn\/primary\/text-default,#ffffff);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;transition:background .15s}
.verify.on{background:var(--btn\/primary\/default,#352eff);cursor:pointer}
[data-theme=dark] .verify.on{background:var(--mav-primary-dark);color:#171717}

/* OTP slot atom (boxed) */
.otp{width:48px;height:48px;box-sizing:border-box;text-align:center;outline:none;padding:0;
  border:1px solid var(--OTP\/default\/outline-box,#cccccc);background:var(--OTP\/default\/bg-box,#ffffff);
  border-radius:var(--border\/border-radius\/sm,4px);box-shadow:var(--shadow-input);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:18px;color:var(--OTP\/default\/text-placeholder,#b2b2b2)}
.otp.filled{border-color:var(--OTP\/active\/outline-box-active,#191919);color:var(--OTP\/active\/text-active,#191919)}
.otp:focus{border-color:var(--OTP\/focus\/outline-box,#352eff);box-shadow:0 0 0 3px rgba(53,46,255,.4);color:var(--OTP\/focus\/text-placeholder,#191919)}
.otp.error{background:var(--input-field\/error\/bg-box,#ff00001a);border-color:var(--input-field\/error\/outline-box,#ff0000);color:#191919}

/* boxless variant */
.otp2{display:inline-flex;flex-direction:column;align-items:center;gap:14px;width:48px}
.otp2 .d{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:18px;line-height:20px;color:var(--OTP\/default\/text-placeholder,#b2b2b2)}
.otp2 .u{width:100%;height:1px;background:var(--devider\/default,#efefef)}
.otp2.filled .d{color:var(--OTP\/active\/text-active,#191919)}
.otp2.filled .u{background:var(--OTP\/active\/outline-box-active,#191919)}
.otp2.is-focus .d{color:var(--OTP\/focus\/text-placeholder,#191919)}
[data-theme=dark] .otp2.is-focus .d{color:#e5e5e5}
.otp2.is-focus .u{background:var(--OTP\/focus\/outline-box,#352eff)}

.err-msg{display:flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--input-field\/error\/label-error,#ff0000)}
.err-msg svg{width:18px;height:18px;stroke:var(--input-field\/error\/icon-error,#ff0000);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.phones{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.state-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif;margin-bottom:6px}
.state-col{display:flex;flex-direction:column;gap:16px}

/* ══════════ auth.html ══════════ */
/* ══ Sign In / Sign Up — Figma "• Login/Sign Up" (139:2089) ══════════════════
   Organism: composes Input (+ label), Button, Checkbox-with-label, Divider, and
   Social buttons (Apple / Google / Facebook) into full auth forms. Every part
   reuses the design-system tokens, so the whole screen re-themes in dark. */
.phones{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.phone{width:360px;max-width:100%;border:1px solid var(--mav-border);border-radius:28px;overflow:hidden;
  background:var(--mav-bg);box-shadow:0 20px 50px -24px rgba(0,0,0,.35)}
.screen{padding:32px 24px;display:flex;flex-direction:column;gap:18px}
.auth-head{display:flex;flex-direction:column;gap:4px;margin-bottom:2px}
.auth-h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:24px;color:var(--main-text\/default,#171717)}
.auth-sub{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--main-text\/description,#7f7f7f)}

/* field (input + label) */
.f{display:flex;flex-direction:column;gap:8px}
.f-top{display:flex;align-items:center;justify-content:space-between}
.f-label{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/default,#171717)}
.f-link{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:var(--btn\/textonly\/default,#352eff);text-decoration:none}
.f-input{display:flex;align-items:center;gap:10px;padding:10px 16px;box-sizing:border-box;
  border:1px solid var(--input-field\/default\/outline-box,#cccccc);background:var(--input-field\/default\/bg-box,#ffffff);
  border-radius:var(--border\/border-radius\/sm,4px);box-shadow:var(--shadow-input)}
.f-input:focus-within{border-color:var(--input-field\/focus\/outline-box,#352eff)}
.f-input input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/default,#171717)}
.f-input input::placeholder{color:var(--input-field\/default\/text-placeholder,#b2b2b2)}
.f-ic{width:20px;height:20px;flex-shrink:0;stroke:var(--icon\/subtle,#b2b2b2);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* phone-code prefix */
.f-flag{width:22px;height:16px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(#a51931 0 20%,#fff 20% 33%,#2d2a4a 33% 67%,#fff 67% 80%,#a51931 80%)}
.f-code{display:flex;align-items:center;gap:4px;padding-right:10px;border-right:1px solid var(--devider\/default,#efefef);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:var(--main-text\/default,#171717)}

/* primary button */
.btn-primary{width:100%;padding:13px;border:0;border-radius:var(--border\/border-radius\/sm,4px);cursor:pointer;
  background:var(--btn\/primary\/default,#352eff);color:var(--btn\/primary\/text-default,#ffffff);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px}
[data-theme=dark] .btn-primary{background:var(--mav-primary-dark);color:#171717}

/* remember / terms checkbox row */
.cbx-row{display:flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--main-text\/default,#171717);cursor:pointer}
.cbx{width:16px;height:16px;box-sizing:border-box;border-radius:4px;border:1px solid var(--Checkbox\/default\/outline-box,#cccccc);
  background:var(--Checkbox\/default\/bg-box,#fff);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cbx.on{background:var(--Checkbox\/active\/bg-box-active,#352eff);border-color:var(--Checkbox\/active\/bg-box-active,#352eff)}
.cbx svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;display:none}
.cbx.on svg{display:block}
[data-theme=dark] .cbx.on svg{stroke:#171717}
.cbx-row a{color:var(--btn\/textonly\/default,#352eff);text-decoration:none;font-weight:700}

/* or-divider */
.or{display:flex;align-items:center;gap:16px}
.or::before,.or::after{content:"";flex:1;height:1px;background:#dbdbdb}
[data-theme=dark] .or::before,[data-theme=dark] .or::after{background:var(--mav-border)}
.or span{font-family:'Inter',sans-serif;font-weight:500;font-size:14px;color:var(--main-text\/description,#7f7f7f);white-space:nowrap}

/* social buttons */
.social{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;
  padding:12px 20px;border:1px solid var(--border\/subtle,#efefef);background:var(--mav-bg,#fff);
  border-radius:8px;box-shadow:var(--shadow-input);cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/default,#171717)}
.social svg{width:22px;height:22px;flex-shrink:0}
.social .ic-apple{fill:var(--main-text\/default,#171717)}

.auth-foot{text-align:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--main-text\/description,#7f7f7f);margin-top:4px}
.auth-foot a{color:var(--btn\/textonly\/default,#352eff);font-weight:700;text-decoration:none}
.stack{display:flex;flex-direction:column;gap:12px}

/* ══════════ avatars.html ══════════ */
/* ══ Avatar — Figma component set 206:7252 ══════════════════════════════
   Axes: Size 3xl/2xl/xl/lg/md/sm/xs · Type Image/Text · Shape Rounded/Squared ·
   Status On/Off · (Text) Color Grey/Primary/Red.
   Driven by a single --sz custom property: initials = 50% of size, dot = 21%. */
.avatar{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:var(--sz);height:var(--sz);flex-shrink:0;
  font-family:var(--font-active);font-weight:700;line-height:1;
  font-size:calc(var(--sz) * .5);
  overflow:visible;
}
.avatar img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;display:block;pointer-events:none;
}
.avatar-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:inherit;overflow:hidden}
/* shape */
.avatar.rounded{border-radius:50%}
.avatar.squared{border-radius:var(--border\/border-radius\/sm,4px)}
.avatar.rounded .avatar-inner{border-radius:50%}
.avatar.squared .avatar-inner{border-radius:var(--border\/border-radius\/sm,4px)}
/* text colors */
.avatar-grey   .avatar-inner{background:var(--avatar\/grey\/bg)}
.avatar-grey   {color:var(--avatar\/grey\/text)}
.avatar-primary .avatar-inner{background:var(--avatar\/primary\/bg)}
.avatar-primary{color:var(--avatar\/primary\/text)}
.avatar-red    .avatar-inner{background:var(--avatar\/red\/bg)}
.avatar-red    {color:var(--avatar\/red\/text)}
/* status dot — green fill + white ring, bottom-right */
.avatar-status{
  position:absolute;bottom:0;right:0;
  width:calc(var(--sz) * .21);height:calc(var(--sz) * .21);
  border-radius:50%;background:var(--avatar\/status-online);
  box-shadow:0 0 0 2px var(--avatar\/status-ring);
}
.avatar.squared .avatar-status{bottom:-2px;right:-2px}

/* Profile chip — avatar + name label below (Figma "Profile" 231:117159) */
.profile{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.profile .name{font-family:'Inter',sans-serif;font-size:14px;color:var(--main-text\/default,#171717)}

/* Stacked group (common usage — overlapping avatars) */
.avatar-stack{display:inline-flex;align-items:center}
.avatar-stack .avatar{box-shadow:0 0 0 2px var(--mav-bg)}
.avatar-stack .avatar+.avatar{margin-left:calc(var(--sz) * -.35)}
.avatar-more{display:inline-flex;align-items:center;justify-content:center;
  width:var(--sz);height:var(--sz);border-radius:50%;background:var(--avatar\/grey\/bg);
  color:var(--avatar\/grey\/text);font-family:var(--font-active);font-weight:700;
  font-size:calc(var(--sz)*.36);box-shadow:0 0 0 2px var(--mav-bg);margin-left:calc(var(--sz) * -.35)}

.size-row{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.size-col{display:flex;flex-direction:column;align-items:center;gap:8px}
.size-col .lbl{font-size:11px;color:var(--mav-muted);font-weight:500}
.row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}

/* ══════════ badges.html ══════════ */
/* ══ Badge & Chip — Figma "• Badge & Chip" page (52:28800) ═══════════════════
   Exported from the badge & chip component sets. Badges are 4px-radius
   (border/border-radius/sm), chips are 8px. Both consume the customiser-wired
   --badge & chip/* token namespace, so re-theming flows through automatically.
   Inter Medium 14/12/11px. "waring" spelling mirrors the Figma token typo. */

.badge-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.spec-grid{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-end}
.spec{display:flex;flex-direction:column;gap:12px;align-items:center}
.spec-lbl{font-size:11px;color:var(--mav-muted);letter-spacing:.02em}

/* ── Badge ─────────────────────────────────────────────────────────────── */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Inter',sans-serif;font-weight:500;font-size:14px;line-height:1;
  padding:6px 8px;border:1px solid transparent;
  border-radius:var(--border\/border-radius\/sm,4px);
  white-space:nowrap;overflow:hidden;
}
.b-sm{font-size:12px;padding:4px 8px;gap:6px}
.b-xs{font-size:11px;padding:3px 6px;gap:5px}

/* Filled (default type): bg-box fill + text token */
.b-primary{background:var(--badge\ \&\ chip\/primary\/bg-box,#352eff);color:var(--badge\ \&\ chip\/primary\/text,#fff)}
.b-red    {background:var(--badge\ \&\ chip\/danger\/bg-box,#ff00001a);color:var(--badge\ \&\ chip\/danger\/text,#ff0000)}
.b-green  {background:var(--badge\ \&\ chip\/success\/bg-box,#629c281a);color:var(--badge\ \&\ chip\/success\/text,#629c28)}
.b-orange {background:var(--badge\ \&\ chip\/waring\/bg-box,#ff84001a);color:var(--badge\ \&\ chip\/waring\/text,#ff8400)}

/* Outline: transparent fill, coloured 1px border, vivid text */
.b-outline{background:transparent}
.b-outline.b-primary{border-color:var(--badge\ \&\ chip\/primary\/outline,#7c9dff);color:var(--badge\ \&\ chip\/primary\/bg-box,#352eff)}
.b-outline.b-red    {border-color:var(--badge\ \&\ chip\/danger\/outline,#ff0000);color:var(--badge\ \&\ chip\/danger\/text,#ff0000)}
.b-outline.b-green  {border-color:var(--badge\ \&\ chip\/success\/outline,#629c28);color:var(--badge\ \&\ chip\/success\/text,#629c28)}
.b-outline.b-orange {border-color:var(--badge\ \&\ chip\/waring\/outline,#ff8400);color:var(--badge\ \&\ chip\/waring\/text,#ff8400)}

/* Clear: no fill, no border, vivid text only */
.b-clear{background:transparent;border-color:transparent}
.b-clear.b-primary{color:var(--badge\ \&\ chip\/primary\/bg-box,#352eff)}
.b-clear.b-red    {color:var(--badge\ \&\ chip\/danger\/text,#ff0000)}
.b-clear.b-green  {color:var(--badge\ \&\ chip\/success\/text,#629c28)}
.b-clear.b-orange {color:var(--badge\ \&\ chip\/waring\/text,#ff8400)}

/* Variation add-ons */
.b-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.b .ic{width:1em;height:1em;flex-shrink:0;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transform:scale(1.25)}

/* ── Chip ──────────────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  font-family:'Inter',sans-serif;font-weight:500;font-size:14px;line-height:1;
  padding:6px 12px;border:1px solid transparent;
  border-radius:var(--border\/border-radius\/md,8px);
  white-space:nowrap;overflow:hidden;cursor:pointer;transition:filter .15s}
.chip:hover{filter:brightness(.97)}
.chip-sm{font-size:12px;padding:4px 10px}
.chip-xs{font-size:11px;padding:3px 8px}

.chip-close{width:1em;height:1em;flex-shrink:0;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.9;transform:scale(1.15)}

/* Chip filled */
.chip-primary{background:var(--badge\ \&\ chip\/primary\/bg-box,#352eff);color:var(--badge\ \&\ chip\/primary\/text,#fff)}
.chip-red    {background:var(--badge\ \&\ chip\/danger\/bg-box,#ff00001a);color:var(--badge\ \&\ chip\/danger\/text,#ff0000)}
.chip-green  {background:var(--badge\ \&\ chip\/success\/bg-box,#629c281a);color:var(--badge\ \&\ chip\/success\/text,#629c28)}
.chip-orange {background:var(--badge\ \&\ chip\/waring\/bg-box,#ff84001a);color:var(--badge\ \&\ chip\/waring\/text,#ff8400)}
.chip-grey   {background:#f5f5f5;color:#171717}
.chip-white  {background:#fff;color:var(--badge\ \&\ chip\/white\/text,#171717);border-color:var(--badge\ \&\ chip\/white\/outline,#efefef)}
[data-theme=dark] .chip-grey{background:var(--mav-border);color:var(--mav-fg)}
[data-theme=dark] .chip-white{background:transparent}

/* Chip outline */
.chip-outline{background:transparent}
.chip-outline.chip-primary{border-color:var(--badge\ \&\ chip\/primary\/outline,#7c9dff);color:var(--badge\ \&\ chip\/primary\/bg-box,#352eff)}
.chip-outline.chip-red    {border-color:var(--badge\ \&\ chip\/danger\/outline,#ff0000);color:var(--badge\ \&\ chip\/danger\/text,#ff0000)}
.chip-outline.chip-green  {border-color:var(--badge\ \&\ chip\/success\/outline,#629c28);color:var(--badge\ \&\ chip\/success\/text,#629c28)}
.chip-outline.chip-orange {border-color:var(--badge\ \&\ chip\/waring\/outline,#ff8400);color:var(--badge\ \&\ chip\/waring\/text,#ff8400)}

/* Dark colour demo canvas */
.canvas-dark{background:var(--bc-mono900-l,#171717);border-radius:12px}
.canvas-dark .spec-lbl{color:#8a8a8a}

/* ══════════ balance.html ══════════ */
/* ══ Balance & Number — Figma "Balance" (236:6908) ═══════════════════════════
   Balance display cards: an available-balance header with a big amount + eye
   toggle and a trend badge, plus compact "Cashflow" cards (Default / Button /
   Detail) that wrap a wallet amount over a soft surface. Amounts use the
   Plus Jakarta Sans Bold "number" style. Re-themes in dark (primary → lime). */

/* shared number + label type */
.bal-label{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:12px;color:var(--Text\/Grey,#81878d)}
.bal-amount{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:32px;line-height:1;color:var(--main-text\/default,#171717);letter-spacing:-.5px}
.bal-eye{width:20px;height:20px;flex-shrink:0;stroke:var(--icon\/default,#171717);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-theme=dark] .bal-eye{stroke:var(--mav-fg,#e5e5e5)}

/* success trend badge */
.bal-badge{display:inline-flex;align-items:center;padding:2px 4px;border-radius:var(--border\/border-radius\/sm,4px);
  background:var(--badge\ \&\ chip\/success\/bg-box,#629c281a);border:1px solid var(--badge\ \&\ chip\/success\/outline,#629c28);
  font-family:'Inter',sans-serif;font-weight:500;font-size:12px;color:var(--badge\ \&\ chip\/success\/text,#629c28)}

/* ── Available-balance header card (375px) ── */
.bal-hero{width:375px;max-width:100%;box-sizing:border-box;padding:0 20px;display:flex;flex-direction:column;gap:20px}
.bal-hero .bal-head{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bal-hero .amt-row{display:flex;gap:8px;align-items:center;width:100%}

/* filled/outline action buttons */
.bal-actions{display:flex;gap:15px;width:100%}
.bal-btn{flex:1 0 0;min-width:0;display:flex;gap:8px;align-items:center;justify-content:center;
  padding:10px 16px;border-radius:var(--border\/border-radius\/sm,4px);border:0;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px}
.bal-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bal-btn.primary{background:var(--btn\/primary\/default,#352eff);color:var(--btn\/primary\/text-default,#ffffff)}
[data-theme=dark] .bal-btn.primary{background:var(--mav-primary-dark,#a1ff5b);color:#171717}
.bal-btn.secondary{background:transparent;border:1px solid var(--btn\/secondary\/default-outline,#efefef);color:var(--main-text\/default,#171717)}
[data-theme=dark] .bal-btn.secondary{border-color:var(--mav-border);color:var(--mav-fg)}

/* round icon action (Top Up / Send / …) */
.bal-quick{display:flex;gap:15px;width:100%}
.bal-quick .q{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.q-btn{width:40px;height:40px;box-sizing:border-box;border-radius:100px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border\/subtle,#efefef);background:transparent}
.q-btn svg{width:20px;height:20px;stroke:var(--icon\/default,#171717);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-theme=dark] .q-btn{border-color:var(--mav-border)}
[data-theme=dark] .q-btn svg{stroke:var(--mav-fg)}
.q-lbl{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:12px;color:var(--main-text\/default,#171717)}
[data-theme=dark] .q-lbl{color:var(--mav-fg)}

/* ── Cashflow card (Default / Button / Detail) ── */
.cf{width:361px;max-width:100%;box-sizing:border-box;background:var(--Balance\/Bg-secondary,#efefef);
  border-radius:12px;padding:4px;display:flex;flex-direction:column;gap:4px}
[data-theme=dark] .cf{background:var(--Balance\/Bg-secondary,#484848)}
.cf-head{display:flex;align-items:center;padding:8px 12px;gap:4px}
.cf-head.between{justify-content:space-between}
.cf-head.center{justify-content:center}
.cf-title{font-family:'Inter',sans-serif;font-weight:600;font-size:14px;color:var(--main-text\/default,#171717);white-space:nowrap}
[data-theme=dark] .cf-title{color:var(--mav-fg)}
.cf-head .bal-eye{width:20px;height:20px}
.cf-detail{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:12px;color:var(--btn\/textonly\/default,#352eff);cursor:pointer}
[data-theme=dark] .cf-detail{color:var(--btn\/textonly\/default,#a1ff5b)}

.cf-panel{background:var(--Balance\/Bg,#ffffff);border-radius:8px;padding:12px;display:flex;gap:12px;align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,.04)}
[data-theme=dark] .cf-panel{background:var(--Balance\/Bg,#171717)}
.cf-wallet{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cf-wallet .w-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/description,#7f7f7f)}
.cf-wallet .w-amt{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;color:var(--main-text\/default,#171717)}
[data-theme=dark] .cf-wallet .w-amt{color:var(--mav-fg)}

.cf-change{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:var(--border\/border-radius\/sm,4px);
  background:transparent;border:1px solid var(--btn\/secondary\/default-outline,#efefef);cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:var(--main-text\/default,#171717);white-space:nowrap}
.cf-change svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-theme=dark] .cf-change{border-color:var(--mav-border);color:var(--mav-fg)}

/* segmented control (Detail) */
.cf-seg{display:flex;height:32px;padding:2px;gap:0;border-radius:var(--border\/border-radius\/sm,4px);background:var(--background\/bg-secondary,#e5e5e5)}
.cf-seg .s{flex:1 0 0;min-width:0;display:flex;align-items:center;justify-content:center;border-radius:var(--border\/border-radius\/sm,4px);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:12px;color:var(--main-text\/description,#7f7f7f)}
.cf-seg .s.active{background:var(--background\/bg-default,#ffffff);color:var(--main-text\/default,#171717);box-shadow:0 0 .5px rgba(20,20,20,.04),0 0 4px rgba(20,20,20,.08)}
[data-theme=dark] .cf-seg .s.active{color:var(--mav-fg)}

/* income / expense split (Detail) */
.cf-split{display:flex;gap:12px;align-items:stretch;background:var(--Balance\/Bg,#ffffff);border-radius:8px;padding:12px;box-shadow:0 4px 12px rgba(0,0,0,.04)}
[data-theme=dark] .cf-split{background:var(--Balance\/Bg,#171717)}
.cf-split .col{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.cf-split .col .k{width:100%;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/description,#7f7f7f)}
.cf-split .col .v{width:100%;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px}
.cf-split .col .v.gain{color:var(--gain\&loss\/success\/text-gain,#629c28)}
.cf-split .col .v.loss{color:var(--gain\&loss\/danger\/text-loss,#ff0000)}
.cf-split .vr{width:1px;background:var(--devider\/default,#efefef);align-self:stretch}
[data-theme=dark] .cf-split .vr{background:var(--devider\/default,#484848)}

/* stages */
.bal-stage{background:var(--mav-surface,#f5f5f5);border-radius:16px;padding:32px;display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:flex-start}
.canvas-dark{background:var(--main\/white,#171717);border-radius:16px;padding:32px;display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:flex-start}
.bal-cell{display:flex;flex-direction:column;gap:12px;align-items:center}
.bal-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}

/* ══ Interactivity & microinteractions ═══════════════════════════════════ */
.try-badge{display:inline-block;vertical-align:middle;margin-left:8px;font-family:'Inter',sans-serif;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:999px;
  color:#fff;background:var(--btn\/primary\/default,#352eff)}
[data-theme=dark] .try-badge{background:var(--mav-primary-dark,#a1ff5b);color:#171717}

/* trend badge pops in on load */
@media (prefers-reduced-motion:no-preference){.bal-badge{animation:bal-pop .5s cubic-bezier(.34,1.4,.4,1) both}}
@keyframes bal-pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

/* eye / privacy toggle */
.bal-eye{cursor:pointer;transition:transform .18s ease,stroke .2s ease}
.bal-eye:hover{transform:scale(1.12)}
.bal-eye:active{transform:scale(.9)}

/* amount masking + count-up fade */
.bal-amount,.w-amt{transition:opacity .16s ease}
.bal-amount.masked,.w-amt.masked{letter-spacing:3px}

/* action buttons — press + hover + icon pop */
.bal-btn{transition:transform .12s ease,box-shadow .2s ease,background .2s ease,filter .2s ease}
.bal-btn.primary:hover{filter:brightness(1.04);box-shadow:0 8px 20px -8px var(--btn\/primary\/default,#352eff)}
[data-theme=dark] .bal-btn.primary:hover{box-shadow:0 8px 20px -8px var(--mav-primary-dark,#a1ff5b)}
.bal-btn.secondary:hover{background:var(--background\/bg-tertiary,#f4f6ff)}
[data-theme=dark] .bal-btn.secondary:hover{background:rgba(255,255,255,.06)}
.bal-btn:active{transform:scale(.96)}
.bal-btn svg,.q-btn svg{transition:transform .2s cubic-bezier(.34,1.4,.4,1)}
.bal-btn:hover svg{transform:scale(1.18)}

/* quick round actions */
.q-btn{cursor:pointer;transition:transform .16s cubic-bezier(.34,1.4,.4,1),border-color .2s ease,background .2s ease}
.q:hover .q-btn{border-color:var(--btn\/primary\/default,#352eff);background:var(--background\/bg-tertiary,#f4f6ff)}
[data-theme=dark] .q:hover .q-btn{border-color:var(--mav-primary-dark,#a1ff5b);background:rgba(255,255,255,.06)}
.q:active .q-btn{transform:scale(.9)}
.q:hover .q-btn svg{transform:scale(1.18)}

/* change / detail buttons */
.cf-change{transition:transform .12s ease,background .2s ease,border-color .2s ease}
.cf-change:hover{background:var(--background\/bg-tertiary,#f4f6ff)}
[data-theme=dark] .cf-change:hover{background:rgba(255,255,255,.06)}
.cf-change:active{transform:scale(.96)}
.cf-detail{transition:opacity .15s ease,transform .15s ease}
.cf-detail:hover{opacity:.7}
.cf-detail:active{transform:scale(.95)}

/* segmented Main/Secondary tabs — gliding indicator */
.cf-seg{position:relative}
.cf-seg .seg-ink{position:absolute;top:2px;bottom:2px;left:0;border-radius:var(--border\/border-radius\/sm,4px);
  background:var(--background\/bg-default,#ffffff);box-shadow:0 0 .5px rgba(20,20,20,.04),0 1px 4px rgba(20,20,20,.12);
  transition:transform .38s cubic-bezier(.34,1.1,.35,1),width .38s cubic-bezier(.34,1.1,.35,1);z-index:0}
[data-theme=dark] .cf-seg .seg-ink{background:var(--background\/bg-default,#171717)}
.cf-seg .s{position:relative;z-index:1;cursor:pointer;background:transparent !important;box-shadow:none !important;transition:color .25s ease}
/* number swap on tab change */
.cf-split .col .v{transition:opacity .18s ease,transform .18s ease}
.cf-split .col .v.swapping{opacity:0;transform:translateY(5px)}

@media (prefers-reduced-motion:reduce){
  .cf-seg .seg-ink{transition:none}
  .bal-btn:hover svg,.q:hover .q-btn svg{transform:none}
}

/* ══════════ blog.html ══════════ */
/* ══ Blog — Figma "• Blog" (139:2095) ═══════════════════════════════════════
   The Insights module: two content components over the tinted brand surface.
   • Blog Card (260×292): a full-bleed hero image, a "Course" badge, a date, a
     two-line title and a "Read more ›" affordance.
   • Blog List (335×120): a "Blog" badge, a title + "4 min read • MyWallSt" meta,
     and a square thumbnail.
   Both carry an Active (full colour) and a Read state (desaturated / muted).
   The surface is --background/bg-tertiary and the badge is the primary token,
   so both re-theme blue → lime in dark.

   Interactive: an Insights panel with Blogs/Courses tabs (gliding underline)
   that cross-fade between the list and a snap-scrolling card carousel. Tap any
   card or row to toggle Read (image desaturates, text mutes) — everything eases;
   cards lift and the hero zooms on hover, the chevron nudges. Gated behind
   prefers-reduced-motion. */

.blog{font-family:'Plus Jakarta Sans',sans-serif}

/* ── shared bits ──────────────────────────────────────────────────────────*/
.blog-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border-radius:var(--border\/border-radius\/sm,4px);
  background:var(--badge\ \&\ chip\/primary\/bg-box,#352eff);border:1px solid var(--badge\ \&\ chip\/primary\/outline,#7c9dff);
  color:var(--badge\ \&\ chip\/primary\/text,#fff);font-family:'Inter',sans-serif;font-weight:500;font-size:14px;line-height:1;white-space:nowrap;
  transition:background-color .45s ease,border-color .45s ease,color .45s ease}
/* card/row surface (--background/bg-tertiary) is a pale tint in BOTH themes,
   so on-surface text stays dark regardless of theme. */
.blog-title{font-weight:700;font-size:14px;line-height:1.25;color:#171717;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .45s ease}
.blog-date,.blog-meta{font-weight:500;font-size:12px;line-height:1.3;color:var(--main-text\/description,#7f7f7f);margin:0;transition:color .45s ease}
.blog-more{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:12px;color:var(--main-text\/description,#7f7f7f);transition:color .45s ease}
.blog-more svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s cubic-bezier(.34,1.1,.35,1)}

/* ── Blog Card ──────────────────────────────────────────────────────────── */
.blog-card{--surf:var(--background\/bg-tertiary,#e6edff);position:relative;width:260px;box-sizing:border-box;
  background:var(--surf);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;border:0;padding:0;font:inherit;
  transition:background-color .45s ease,transform .28s cubic-bezier(.34,1.1,.35,1),box-shadow .28s ease}
.blog-card .thumb{position:relative;height:173px;overflow:hidden;background:#1b1b2b}
.blog-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.9,.3,1),filter .45s ease,opacity .45s ease}
.blog-card .blog-badge{position:absolute;top:15px;left:16px;z-index:2}
.blog-card .body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:10px}
.blog-card .body .sh{display:flex;flex-direction:column;gap:4px}
.blog-card:hover{box-shadow:0 14px 34px rgba(0,0,0,.12);transform:translateY(-4px)}
.blog-card:hover .thumb img{transform:scale(1.06)}
.blog-card:hover .blog-more svg{transform:translateX(3px)}
.blog-card:active{transform:translateY(-1px) scale(.99)}

/* ── Blog List row ──────────────────────────────────────────────────────── */
.blog-list{--surf:var(--background\/bg-tertiary,#e6edff);position:relative;width:335px;max-width:100%;height:120px;box-sizing:border-box;
  background:var(--surf);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;border:0;padding:16px;font:inherit;
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  transition:background-color .45s ease,transform .24s cubic-bezier(.34,1.1,.35,1),box-shadow .24s ease}
.blog-list .sh{display:flex;flex-direction:column;gap:4px;max-width:170px;position:relative;z-index:1}
.blog-list .thumb{position:absolute;top:0;right:0;width:119px;height:120px;overflow:hidden;background:#1b1b2b}
.blog-list .thumb::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,var(--surf) 0%,transparent 42%);transition:background .45s ease}
.blog-list .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.22,.9,.3,1),filter .45s ease,opacity .45s ease}
.blog-list:hover{box-shadow:0 10px 26px rgba(0,0,0,.10);transform:translateY(-2px)}
.blog-list:hover .thumb img{transform:scale(1.06)}
.blog-list .blog-badge{position:relative;z-index:1}

/* ── Read (desaturated / muted) state, shared ───────────────────────────── */
.blog-card.read,.blog-list.read{--surf:#f1f1f3}
.read .thumb img{filter:grayscale(1);opacity:.7}
.read .blog-title,.read .blog-date,.read .blog-meta,.read .blog-more{color:var(--main-text\/disabled,#cccccc)}
.read .blog-badge{background:transparent;border-color:#e2e2e2;color:var(--main-text\/disabled,#cccccc)}

/* a tiny "Read" tick that fades in on the read state */
.blog-check{position:absolute;top:12px;right:12px;z-index:3;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;
  background:var(--badge\ \&\ chip\/primary\/bg-box,#352eff);color:#fff;opacity:0;transform:scale(.4);
  transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.5,.45,1)}
[data-theme=dark] .blog-check{color:#171717}
.blog-list .blog-check{top:50%;right:14px;margin-top:-11px}
.read .blog-check{opacity:1;transform:scale(1)}
.blog-check svg{width:13px;height:13px;stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ── Insights interactive panel ─────────────────────────────────────────── */
.insights{width:360px;max-width:100%;background:var(--mav-bg,#fff);border:1px solid var(--mav-border,#efefef);border-radius:26px;
  overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.08)}
.ins-head{display:flex;align-items:center;gap:12px;padding:18px 20px 0}
.ins-back{width:28px;height:28px;display:grid;place-items:center;border:0;background:none;color:var(--main-text\/default,#171717);cursor:pointer;border-radius:8px}
[data-theme=dark] .ins-back{color:var(--mav-fg)}
.ins-back svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ins-back:hover svg{transform:translateX(-3px)}
.ins-title{font-weight:700;font-size:16px;color:var(--main-text\/default,#171717);margin:0 auto 0 -28px;padding-left:28px}
[data-theme=dark] .ins-title{color:var(--mav-fg)}
.ins-tabs{position:relative;display:flex;margin:16px 20px 0;border-bottom:1px solid var(--mav-border,#efefef)}
.ins-tab{flex:1;padding:12px 0;border:0;background:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14px;
  color:var(--main-text\/description,#7f7f7f);transition:color .25s ease}
.ins-tab.on{color:var(--main-text\/default,#171717)}
[data-theme=dark] .ins-tab.on{color:var(--mav-fg)}
.ins-ink{position:absolute;bottom:-1px;height:2px;background:var(--badge\ \&\ chip\/primary\/bg-box,#352eff);border-radius:2px;
  transition:transform .4s cubic-bezier(.34,1.1,.35,1),width .4s cubic-bezier(.34,1.1,.35,1)}
.ins-body{position:relative;padding:16px 20px 22px}
.ins-panel{display:none;animation:ins-fade .4s cubic-bezier(.22,.9,.3,1) both}
.ins-panel.on{display:block}
@keyframes ins-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ins-carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:2px 20px 10px;scrollbar-width:none}
.ins-carousel::-webkit-scrollbar{display:none}
.ins-carousel .blog-card{scroll-snap-align:start;flex:0 0 auto}
.ins-rows{display:flex;flex-direction:column;gap:12px}
.ins-rows .blog-list{width:100%}

/* stages */
.blog-stage{background:var(--mav-surface,#f5f5f5);border-radius:16px;padding:34px 28px;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start}
.blog-cell{display:flex;flex-direction:column;gap:12px;align-items:center}
.blog-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.blog-hint{margin-top:14px;font-size:12px;color:var(--mav-muted);font-family:'Inter',sans-serif;text-align:center}
.canvas-dark{background:var(--main\/white,#171717);border-radius:16px;padding:34px 28px;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start}
.canvas-dark .blog-tag{color:#9a9a9a}

/* reveal on scroll */
@media (prefers-reduced-motion: no-preference){
  .blog-reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .6s cubic-bezier(.22,.9,.3,1)}
  .blog-reveal.in{opacity:1;transform:none}
}

/* ══════════ bottom-sheet.html ══════════ */
/* ══ Bottom Sheet — Figma "• Bottom Sheet" (271:7738) ════════════════════════
   A drawer that rises from the bottom over a dimmed blanket. Rounded 32px top
   (--radius/sheet/lg), --background/bg-default surface, soft elevation. Header
   is either nav (back · Title · close) or a title + text-only action button.
   A scrollable body (Section-Header title 18 + body 16/24). Optional Button
   Dock (primary button) and an iOS keyboard. A home indicator sits at the base.
   Scrim = --color/blanket/bold. Primary / text-only actions re-theme blue →
   lime in dark; the sheet surface flips to near-black.

   Motion: the sheet slides up on a soft ease while the blanket cross-fades;
   drag the header down (or tap the blanket / ✕ / back) to dismiss — it tracks
   the pointer and snaps. Focusing the field raises the keyboard and the sheet
   resizes; keys type. All gated behind prefers-reduced-motion. */

.bs{font-family:'Plus Jakarta Sans',sans-serif}

/* phone frame */
.phone{position:relative;width:330px;height:640px;border-radius:46px;background:#0b0b0d;padding:10px;box-sizing:border-box;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);flex:0 0 auto}
.phone-screen{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:var(--mav-bg,#fff);isolation:isolate}
[data-theme=dark] .phone-screen{background:#0e0e10}

/* faux app behind the sheet */
.bs-app{position:absolute;inset:0;display:flex;flex-direction:column;color:var(--main-text\/default,#171717)}
[data-theme=dark] .bs-app{color:#f2f2f2}
.bs-status{display:flex;align-items:center;justify-content:space-between;padding:14px 26px 0;font-size:13px;font-weight:700}
.bs-status .dots{display:flex;gap:3px;align-items:center}
.bs-status .dots i{width:15px;height:10px;border-radius:2px;background:currentColor;display:inline-block;opacity:.9}
.bs-app h4{margin:22px 22px 4px;font-size:22px;font-weight:800;letter-spacing:-.02em}
.bs-app .sub{margin:0 22px 16px;font-size:13px;color:var(--mav-muted)}
.bs-rows{padding:0 16px;display:flex;flex-direction:column;gap:10px}
.bs-rowi{display:flex;gap:12px;align-items:center;padding:12px;border-radius:14px;background:var(--mav-surface,#f5f5f5)}
[data-theme=dark] .bs-rowi{background:#1b1b1e}
.bs-rowi .ic{width:38px;height:38px;border-radius:10px;background:var(--background\/bg-tertiary,#e6edff);flex:0 0 38px}
.bs-rowi .ln{flex:1;display:flex;flex-direction:column;gap:6px}
.bs-rowi .ln b{height:9px;width:60%;border-radius:5px;background:currentColor;opacity:.82}
.bs-rowi .ln s{height:8px;width:40%;border-radius:5px;background:currentColor;opacity:.32}

/* blanket / scrim */
.bs-blanket{position:absolute;inset:0;background:var(--color\/blanket\/bold,rgba(13,13,13,.5));opacity:0;pointer-events:none;z-index:2}

/* sheet */
.bs-sheet{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;
  background:var(--background\/bg-default,#fff);border-radius:var(--radius\/sheet\/lg,32px) var(--radius\/sheet\/lg,32px) 0 0;
  box-shadow:0 -2px 12px rgba(0,0,0,.10);max-height:82%;transform:translateY(101%);will-change:transform;touch-action:none}
[data-theme=dark] .bs-sheet{box-shadow:0 -2px 18px rgba(0,0,0,.5)}

/* open state (motion added in the reduced-motion guard) */
.phone.open .bs-blanket{opacity:1;pointer-events:auto}
.phone.open .bs-sheet{transform:translateY(0)}

/* header */
.bs-head{display:flex;align-items:center;gap:8px;padding:16px 20px;cursor:grab;flex:0 0 auto}
.bs-head:active{cursor:grabbing}
.bs-head .ttl{flex:1;text-align:center;font-size:16px;font-weight:700;color:var(--main-text\/default,#171717)}
[data-theme=dark] .bs-head .ttl{color:#f2f2f2}
.bs-icon{width:24px;height:24px;flex:0 0 24px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:var(--icon\/default,#171717)}
[data-theme=dark] .bs-icon{color:#e8e8e8}
.bs-icon svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bs-icon.ghost{visibility:hidden}
.bs-textbtn{border:0;background:none;padding:0;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;
  color:var(--btn\/textonly\/default,#352eff)}
.bs-textbtn:active{opacity:.6}

/* body */
.bs-body{flex:1 1 auto;overflow-y:auto;padding:4px 16px 8px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.bs-body::-webkit-scrollbar{width:6px}
.bs-body::-webkit-scrollbar-thumb{background:var(--radio\/radio-button-primary,#b2b2b2);border-radius:999px}
.bs-body h5{margin:6px 0 4px;font-size:18px;font-weight:600;line-height:1.35;color:var(--main-text\/default,#171717)}
[data-theme=dark] .bs-body h5{color:#f2f2f2}
.bs-body p{margin:0 0 12px;font-size:15px;line-height:1.55;color:var(--main-text\/default,#171717)}
[data-theme=dark] .bs-body p{color:#d9d9d9}
.bs-field{width:100%;box-sizing:border-box;margin:2px 0 12px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--mav-border,#e5e5e5);
  background:var(--mav-bg,#fff);font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;color:var(--main-text\/default,#171717);
  outline:none;transition:border-color .2s ease,box-shadow .2s ease}
[data-theme=dark] .bs-field{background:#1b1b1e;color:#f2f2f2}
.bs-field:focus{border-color:var(--btn\/primary\/default,#352eff);box-shadow:0 0 0 3px color-mix(in srgb,var(--btn\/primary\/default,#352eff) 18%,transparent)}

/* button dock */
.bs-dock{flex:0 0 auto;background:var(--background\/bg-default,#fff);padding:16px;border-radius:var(--radius\/sheet\/lg,32px) var(--radius\/sheet\/lg,32px) 0 0;
  box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.bs-primary{width:100%;border:0;cursor:pointer;padding:16px;border-radius:8px;background:var(--btn\/primary\/default,#352eff);
  color:var(--btn\/primary\/text-default,#fff);font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:18px;
  transition:transform .12s ease,filter .2s ease}
[data-theme=dark] .bs-primary{color:#171717}
.bs-primary:hover{filter:brightness(1.05)}
.bs-primary:active{transform:scale(.98)}

/* home indicator */
.bs-home{flex:0 0 auto;height:26px;display:flex;align-items:center;justify-content:center}
.bs-home span{width:130px;height:5px;border-radius:100px;background:var(--main-text\/default,#171717);opacity:.9}
[data-theme=dark] .bs-home span{background:#f2f2f2}

/* iOS keyboard */
.bs-kbd{flex:0 0 auto;background:#d1d4db;padding-bottom:6px;user-select:none}
[data-theme=dark] .bs-kbd{background:#2b2c30}
.bs-kbd .accessory{display:flex;justify-content:flex-end;align-items:center;height:38px;padding:0 14px;background:#ebedf0;border-top:1px solid rgba(60,60,67,.18)}
[data-theme=dark] .bs-kbd .accessory{background:#3a3b40;border-top-color:rgba(255,255,255,.12)}
.bs-kbd .done{border:0;background:none;color:#007aff;font-family:'Inter',sans-serif;font-weight:600;font-size:16px;cursor:pointer}
[data-theme=dark] .bs-kbd .done{color:#4c9dff}
.bs-krow{display:flex;justify-content:center;gap:5px;padding:5px 4px}
.bs-key{min-width:27px;height:40px;flex:1;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  background:#fff;border-radius:5px;box-shadow:0 1px 0 rgba(0,0,0,.3);font-family:'Inter',sans-serif;font-size:17px;color:#111;
  transition:background .08s ease,transform .08s ease}
[data-theme=dark] .bs-key{background:#6a6c72;color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.5)}
.bs-key:active{background:#c7cbd3;transform:translateY(1px)}
.bs-key.wide{flex:1.5}.bs-key.space{flex:5}.bs-key.fn{background:#adb3bd;box-shadow:0 1px 0 rgba(0,0,0,.25);font-size:13px;font-weight:600}
[data-theme=dark] .bs-key.fn{background:#48494e}
.bs-krow.pad{padding-left:12px;padding-right:12px}

/* stages */
.bs-stage{background:var(--mav-surface,#f5f5f5);border-radius:16px;padding:34px 24px;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;align-items:flex-start}
.bs-triggers{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:26px}
.bs-trig{border:1px solid var(--mav-border,#e5e5e5);background:var(--mav-bg,#fff);color:var(--main-text\/default,#171717);
  border-radius:999px;padding:9px 18px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14px;cursor:pointer;
  transition:border-color .18s ease,transform .12s ease,background .18s ease}
[data-theme=dark] .bs-trig{color:var(--mav-fg);background:transparent}
.bs-trig:hover{border-color:var(--btn\/primary\/default,#352eff)}
.bs-trig:active{transform:scale(.96)}
.bs-cell{display:flex;flex-direction:column;align-items:center;gap:12px}
.bs-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.bs-hint{margin-top:14px;font-size:12px;color:var(--mav-muted);font-family:'Inter',sans-serif;text-align:center}
.canvas-dark{background:#000;border-radius:16px;padding:34px 24px;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;align-items:flex-start}
.canvas-dark .bs-tag{color:#9a9a9a}

@media (prefers-reduced-motion: no-preference){
  .bs-blanket{transition:opacity .38s ease}
  .bs-sheet{transition:transform .44s cubic-bezier(.22,.9,.3,1)}
  .bs-sheet.dragging{transition:none}
}

/* ══════════ button-dock.html ══════════ */
/* ══ Button Dock — Figma "Button Dock" (267:5230) ════════════════════════════
   A sticky bottom footer: a rounded-top surface (32px) with a full-width primary
   button, an optional checkbox row or secondary button, and an iOS home
   indicator. bg --button-dock/bg-dock, elevation 0 0 12 shadow. Re-themes in dark. */
.dock{width:375px;max-width:100%;box-sizing:border-box;background:var(--button-dock\/bg-dock,#ffffff);
  border-radius:32px 32px 0 0;box-shadow:0 0 12px rgba(0,0,0,.08);overflow:hidden}
.dock-inner{padding:16px;display:flex;flex-direction:column;gap:24px}
.dock-btns{display:flex;flex-direction:column;gap:12px}

.dock-btn{width:100%;padding:16px;border:0;border-radius:var(--border\/border-radius\/sm,4px);cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:18px;
  background:var(--btn\/primary\/default,#352eff);color:var(--btn\/primary\/text-default,#ffffff)}
[data-theme=dark] .dock-btn{background:var(--mav-primary-dark);color:#171717}
.dock-btn.secondary{background:transparent;border:1px solid var(--mav-border);color:var(--main-text\/default,#171717)}
[data-theme=dark] .dock-btn.secondary{background:transparent;color:var(--mav-fg)}

/* checkbox row (additional content) */
.dock-cbx{display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/default,#171717)}
.dock-cbx .cbx{width:16px;height:16px;box-sizing:border-box;border-radius:4px;flex-shrink:0;box-shadow:var(--shadow-input);
  border:1px solid var(--Checkbox\/default\/outline-box,#cccccc);background:var(--Checkbox\/default\/bg-box,#fff);
  display:flex;align-items:center;justify-content:center}
.dock-cbx .cbx.on{background:var(--Checkbox\/active\/bg-box-active,#352eff);border-color:var(--Checkbox\/active\/bg-box-active,#352eff)}
.dock-cbx .cbx svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;display:none}
.dock-cbx .cbx.on svg{display:block}
[data-theme=dark] .dock-cbx .cbx.on svg{stroke:#171717}
.dock-cbx a{color:var(--btn\/textonly\/default,#352eff);text-decoration:none;font-weight:700}

.home-ind{width:144px;height:5px;border-radius:100px;background:var(--btn\/primary\/hover,#171717);margin:0 auto 8px}
[data-theme=dark] .home-ind{background:var(--mav-fg,#e5e5e5)}

.dock-stage{background:var(--mav-surface,#f5f5f5);border-radius:16px;padding:24px 24px 0;display:flex;justify-content:center}
.dock-grid{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end}
.dock-cell{display:flex;flex-direction:column;gap:10px;align-items:center}
.dock-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.canvas-dark{background:var(--bc-mono900-l,#171717);border-radius:16px;padding:24px 24px 0}

/* in-context phone */
.phone{width:340px;height:420px;border-radius:32px;overflow:hidden;position:relative;
  background:var(--mav-bg,#fff);border:1px solid var(--mav-border);display:flex;flex-direction:column}
.phone-body{flex:1;padding:24px 20px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.phone-body .ph-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;color:var(--main-text\/default,#171717)}
.phone-body .ph-line{height:12px;border-radius:6px;background:var(--mav-border)}
.phone .dock{width:100%;box-shadow:0 -2px 12px rgba(0,0,0,.06)}

/* ══════════ buttons.html ══════════ */
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid var(--mav-border)}
.btn-row:last-child{border-bottom:none}
.btn-state-label{font-size:11px;color:var(--mav-muted);font-weight:500;min-width:70px;flex-shrink:0}
.btn-note{font-size:11px;color:var(--mav-muted)}

/* ══ Core button — Figma component set 52:24315 ══════════════════════════
   Axes: Size xs/sm/md/lg · Type Primary/Secondary/Clear/Swipe ·
   State Default/Hover/Focus/Disabled · icon-left/right, dropdown, icon-only */
.mav-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;border-radius:var(--border\/border-radius\/sm,4px);
  font-family:var(--font-active);font-size:var(--medium\/md,14px);font-weight:500;
  line-height:normal;white-space:nowrap;cursor:pointer;border:none;
  transition:background .15s,color .15s,box-shadow .15s,border-color .15s;
}
.mav-btn svg{width:20px;height:20px;flex-shrink:0}
/* sizes — icon stays 20px at every size */
.mav-btn-xs{padding:2px 8px;font-size:var(--medium\/sm,12px);gap:4px}
.mav-btn-sm{padding:6px 12px}
.mav-btn-lg{padding:16px;font-size:var(--medium\/xl,18px)}
/* icon-only */
.mav-btn-icononly{padding:10px}
.mav-btn-icononly.mav-btn-xs{padding:2px}
.mav-btn-icononly.mav-btn-sm{padding:6px}
.mav-btn-icononly.mav-btn-lg{padding:16px}

/* Primary */
.mav-btn-primary{background:var(--btn\/primary\/default);color:var(--btn\/primary\/text-default)}
.mav-btn-primary:hover{background:var(--btn\/primary\/hover)}
.mav-btn-primary:focus-visible,.mav-btn-primary.is-focus{background:var(--btn\/primary\/default);box-shadow:var(--shadow-focus);outline:none}
.mav-btn-primary:disabled,.mav-btn-primary.is-disabled{background:var(--btn\/primary\/disabled);color:var(--btn\/primary\/text-default);cursor:not-allowed}

/* Secondary (outline) */
.mav-btn-secondary{background:var(--btn\/secondary\/default);color:var(--btn\/secondary\/text-default);border:1px solid var(--btn\/secondary\/default-outline)}
.mav-btn-secondary:hover{background:var(--btn\/secondary\/hover);box-shadow:var(--shadow\/sm)}
.mav-btn-secondary:focus-visible,.mav-btn-secondary.is-focus{background:var(--btn\/secondary\/clicked);color:var(--btn\/primary\/text-default);border-color:var(--icon\/inverted,#ffffff);box-shadow:var(--focus\/primary);outline:none}
.mav-btn-secondary:disabled,.mav-btn-secondary.is-disabled{background:var(--btn\/secondary\/disabled);border-color:var(--btn\/secondary\/disabled-outline);color:var(--main-text\/disabled);cursor:not-allowed;box-shadow:none}

/* Clear (text-only) — zero padding at every size */
.mav-btn-clear{background:transparent;color:var(--btn\/textonly\/default);padding:0}
.mav-btn-clear.mav-btn-xs,.mav-btn-clear.mav-btn-lg{padding:0}
.mav-btn-clear:hover{color:var(--btn\/textonly\/hover)}
.mav-btn-clear:focus-visible,.mav-btn-clear.is-focus{color:var(--btn\/textonly\/clicked);outline:none}
.mav-btn-clear:disabled,.mav-btn-clear.is-disabled{color:var(--btn\/textonly\/disabled);cursor:not-allowed}

/* Swipe (bottom-sheet trigger) — top corners only */
.mav-btn-swipe{background:var(--btn\/swipeup\/default);color:var(--btn\/primary\/text-default);
  border-radius:var(--border\/border-radius\/md,8px) var(--border\/border-radius\/md,8px) 0 0}
.mav-btn-swipe:hover{background:var(--btn\/primary\/hover)}
.mav-btn-swipe:focus-visible,.mav-btn-swipe.is-focus{background:var(--btn\/primary\/clicked);box-shadow:var(--shadow-focus);outline:none}
.mav-btn-swipe:disabled,.mav-btn-swipe.is-disabled{background:var(--btn\/swipeup\/disabled);cursor:not-allowed}
.mav-btn-swipe.mav-btn-lg{padding:14px 20px}

/* ══ Social buttons — Figma set 52:25190 ═════════════════════════════════ */
.social-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--background\/bg-default);border:1px solid var(--border\/subtle);
  border-radius:8px;box-shadow:var(--shadow\/sm);
  font-family:var(--font-active);font-size:14px;font-weight:700;
  color:var(--main-text\/default);white-space:nowrap;cursor:pointer;
  padding:8px 16px;transition:background .15s,border-color .15s,box-shadow .15s;
}
.social-btn img{width:24px;height:24px;display:block}
.social-btn-sm{padding:6px 12px}
.social-btn-sm img{width:20px;height:20px}
.social-btn-lg{padding:12px 20px}
.social-btn:hover{background:var(--bc-mono100-l,#ececec);border-color:var(--bc-mono200-l,#dbdbdb);color:var(--mav-fg)}
.social-btn:focus-visible,.social-btn.is-focus{box-shadow:var(--focus\/primary);outline:none}
.social-btn:disabled,.social-btn.is-disabled{background:var(--background\/bg-default);border-color:#dbdbdb;color:#a5a5a5;cursor:not-allowed}
.social-btn:disabled img,.social-btn.is-disabled img{opacity:.4}
.social-btn-icononly{padding:8px}
.social-btn-icononly.social-btn-sm{padding:6px}
.social-btn-icononly.social-btn-lg{padding:12px}

/* ══ Text links — Figma set 52:26430 (no underline in any state) ════════ */
.tlink{display:inline-flex;align-items:center;gap:8px;padding:0;border:none;background:transparent;
  border-radius:4px;font-family:var(--font-active);font-size:var(--medium\/md,14px);font-weight:500;
  line-height:normal;white-space:nowrap;cursor:pointer;text-decoration:none;transition:color .15s,box-shadow .15s}
.tlink svg{width:20px;height:20px;flex-shrink:0}
.tlink-sm svg{width:16px;height:16px}
.tlink-primary{color:var(--btn\/textonly\/default)}
.tlink-primary:hover{color:#06111b}
.tlink-primary:focus-visible,.tlink-primary.is-focus{color:var(--input-field\/focus\/text-placeholder,#191919);box-shadow:var(--focus\/primary);outline:none}
.tlink-secondary{color:var(--icon\/default)}
.tlink-secondary:hover{color:#383838}
.tlink-secondary:focus-visible,.tlink-secondary.is-focus{box-shadow:var(--focus\/primary);outline:none}
.tlink-tertiary{color:var(--btn\/textonly\/default)}
.tlink-tertiary:hover{color:var(--icon\/default)}
.tlink-tertiary:focus-visible,.tlink-tertiary.is-focus{box-shadow:var(--focus\/primary);outline:none}
.tlink:disabled,.tlink.is-disabled{color:var(--btn\/textonly\/disabled);cursor:not-allowed}

/* ══ Button group — segmented control, Figma 52:26652 ═══════════════════ */
.btn-group{display:inline-flex;align-items:stretch;background:var(--mav-bg);
  border:1px solid var(--bc-mono200-l,#dbdbdb);border-radius:8px;overflow:hidden;box-shadow:var(--shadow\/sm)}
.bg-item{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;background:transparent;border:none;border-radius:0;cursor:pointer;
  font-family:var(--font-active);font-size:14px;font-weight:500;line-height:normal;
  color:var(--main-text\/default);white-space:nowrap;transition:background .15s}
.bg-item+.bg-item{border-left:1px solid var(--bc-mono200-l,#dbdbdb)}
.bg-item svg{width:20px;height:20px;flex-shrink:0}
.bg-item:hover{background:var(--bc-mono100-l,#ececec)}
.bg-item:disabled,.bg-item.is-disabled{color:var(--main-text\/description,#7f7f7f);cursor:not-allowed;background:transparent}
.btn-group-sm .bg-item{padding:6px 12px}
.btn-group-lg .bg-item{padding:14px 20px;font-size:18px}
.bg-item-icononly{padding:10px}
.bg-check{width:16px;height:16px;border-radius:4px;background:var(--Checkbox\/default\/bg-box);
  border:1px solid var(--Checkbox\/default\/outline-box);box-shadow:var(--shadow\/sm);flex-shrink:0}
.bg-item:hover .bg-check{box-shadow:0 0 0 3px rgba(53,46,255,.2)}
.bg-item:disabled .bg-check{background:var(--Checkbox\/disabled\/bg-box-disabled);border-color:var(--Checkbox\/disabled\/outline-box-disabled);box-shadow:none}

/* ══ Menu (circular) buttons — Figma 171:5378 / 171:5670 ════════════════ */
.menu-btn-wrap{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.menu-btn-wrap span{font-size:12px;font-weight:500;color:var(--main-text\/default);font-family:var(--font-active)}
.menu-btn{width:50px;height:50px;border-radius:50%;border:none;display:inline-flex;
  align-items:center;justify-content:center;cursor:pointer;transition:filter .15s;background:transparent}
.menu-btn:hover{filter:brightness(.95)}
.menu-btn svg{width:24px;height:24px}
.menu-btn-sm{width:40px;height:40px}
.menu-btn-sm svg{width:19px;height:19px}
.menu-btn-primary{background:var(--menu\/bg-primary);color:#fff}
.menu-btn-secondary{background:var(--menu\/bg-secondary);color:var(--icon\/default)}
.menu-btn-tertiary{background:var(--menu\/bg-tertiary,transparent);border:1px solid var(--border\/subtle);color:var(--icon\/default)}

/* ══ Slider / swipe-to-confirm — Figma Swipe Set 110:14854 ══════════════ */
.swipe{position:relative;display:flex;align-items:center;width:362px;max-width:100%;
  padding:4px 5px;border-radius:var(--border\/border-radius\/md,8px);gap:20px;user-select:none;overflow:hidden}
.swipe-thumb{display:flex;align-items:center;justify-content:center;padding:13px;flex-shrink:0;
  background:var(--btn\/sliding\/Bg,#fff);border-radius:8px;cursor:grab;touch-action:none;position:relative;z-index:2}
.swipe-thumb:active{cursor:grabbing}
.swipe-thumb svg{width:20px;height:20px;color:var(--btn\/sliding\/default)}
.swipe-label{flex:1;font-family:var(--font-active);font-size:var(--medium\/xl2,20px);font-weight:500;
  line-height:normal;white-space:nowrap;color:var(--btn\/sliding\/text-default);opacity:.5}
.swipe-hint{margin-left:auto;flex-shrink:0;width:24px;height:24px;color:rgba(255,255,255,.7)}
.swipe-v1{background:linear-gradient(to right,var(--btn\/sliding\/default),var(--btn\/sliding\/hover) 100%)}
.swipe-v2{background:linear-gradient(to right,var(--btn\/primary\/default),#ffdfd3)}
.swipe-pill,.swipe-pill .swipe-thumb{border-radius:50px}
.swipe-done{background:var(--btn\/sliding\/default)}
.swipe-done .swipe-label{opacity:1}
/* neumorphic (V3) */
.swipe-v3{background:linear-gradient(to bottom,#f1f4ff,#fcfdff);
  filter:drop-shadow(0 0 20px rgba(0,51,218,.1));
  box-shadow:inset 0 2px 1px 0 #fff,inset 0 -2px 1px 0 rgba(159,178,242,.25)}
.swipe-v3 .swipe-thumb{background:var(--btn\/sliding\/default);
  box-shadow:0 2px 1px 0 rgba(159,178,242,.5),0 -2px 1px 0 #fff,inset 0 2px 6px 0 #cfd8f9,inset 0 -2px 6px 0 #002285}
.swipe-v3 .swipe-thumb svg{color:#fff}
.swipe-v3 .swipe-label{color:var(--btn\/sliding\/hover);opacity:1}
.swipe-v3 .swipe-hint{color:var(--btn\/sliding\/hover)}
/* white card (V4) */
.swipe-v4{background:var(--background\/bg-default);border-radius:20px;filter:drop-shadow(0 0 20px rgba(0,51,218,.1))}
.swipe-v4 .swipe-thumb{background:var(--btn\/sliding\/default)}
.swipe-v4 .swipe-thumb svg{color:#fff}
.swipe-v4 .swipe-label{color:var(--btn\/sliding\/hover);opacity:1}
.swipe-v4 .swipe-hint{color:var(--btn\/sliding\/hover)}
/* toggle pills (V9/V10) */
.swipe-toggle{width:200px;padding:5px;border-radius:50px;display:flex;align-items:center;justify-content:space-between;background:var(--background\/bg-tertiary,#e6edff)}
.swipe-toggle .swipe-thumb{border-radius:50px;padding:13px}
.swipe-toggle .swipe-thumb svg{width:24px;height:24px}
.swipe-toggle-target{display:flex;align-items:center;justify-content:center;padding:11px;border:2px solid var(--btn\/sliding\/default);border-radius:50%;color:var(--btn\/sliding\/default)}
.swipe-toggle-target svg{width:24px;height:24px}
.swipe-toggle-open{background:#0033da}
.swipe-toggle-open .swipe-toggle-target{border:1px solid #9fb2f2;color:#fff}

.state-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:12px}
.state-card{border:1px solid var(--mav-border);border-radius:8px;padding:16px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--mav-bg)}
.state-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mav-muted)}
.dark-preview{background:var(--mav-fg);padding:24px;border-radius:8px}

/* Extensions (not in Figma) */
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--bc-white);
  border-radius:50%;animation:spin .6s linear infinite;display:inline-block;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.mav-btn-xl{padding:16px 24px;font-size:16px;width:100%;max-width:343px}

/* ══ Live Component Playground ═══════════════════════════════════════════ */
.playground{margin-top:20px;border:1px dashed var(--btn\/sliding\/default,#352eff);border-radius:12px;
  padding:22px;background:var(--background\/bg-tertiary,#f4f6ff);display:flex;flex-direction:column;gap:14px}
[data-theme=dark] .playground{background:#141b33}
.playground-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.playground-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--main-text\/default,#171717)}
[data-theme=dark] .playground-title{color:var(--mav-fg)}
.playground-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;
  background:var(--btn\/sliding\/default,#352eff);padding:3px 8px;border-radius:999px}
.playground-hint{font-size:12px;line-height:1.5;color:var(--mav-muted);font-family:'Inter',sans-serif;margin:0;max-width:52ch}
.playground-reset{font-size:12px;font-weight:600;color:var(--btn\/sliding\/default,#352eff);background:none;border:0;
  cursor:pointer;padding:6px 10px;border-radius:6px;transition:background .15s}
.playground-reset:hover{background:var(--background\/bg-default,#fff)}
[data-theme=dark] .playground-reset:hover{background:#1f2947}
.swipe-follow{width:100%;max-width:420px;background:linear-gradient(to right,var(--btn\/sliding\/default,#352eff),var(--btn\/sliding\/hover,#0033da))}
.swipe-follow .swipe-label{color:#fff}

/* full-screen takeover — circular reveal from the handle */
.takeover{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;color:#fff;background:linear-gradient(150deg,var(--btn\/sliding\/default,#352eff),var(--btn\/sliding\/hover,#0033da));
  clip-path:circle(0 at var(--ox,50%) var(--oy,90%));opacity:0;pointer-events:none;
  transition:clip-path .6s cubic-bezier(.4,0,.2,1),opacity .35s ease}
.takeover.on{clip-path:circle(150% at var(--ox,50%) var(--oy,90%));opacity:1;pointer-events:auto}
.takeover-check{width:92px;height:92px;border-radius:50%;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;transform:scale(.4);opacity:0;
  transition:transform .45s cubic-bezier(.34,1.5,.4,1) .2s,opacity .3s ease .2s}
.takeover.on .takeover-check{transform:scale(1);opacity:1}
.takeover-check svg{width:46px;height:46px;stroke:#fff;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .5s ease .45s}
.takeover.on .takeover-check svg{stroke-dashoffset:0}
.takeover-title{font-family:var(--font-active);font-size:26px;font-weight:700;transform:translateY(12px);opacity:0;
  transition:transform .4s ease .35s,opacity .35s ease .35s}
.takeover.on .takeover-title{transform:none;opacity:1}
.takeover-sub{font-family:'Inter',sans-serif;font-size:13px;opacity:0;transition:opacity .35s ease .45s}
.takeover.on .takeover-sub{opacity:.85}
.takeover-dismiss{margin-top:8px;font-family:'Inter',sans-serif;font-size:12px;opacity:0;transition:opacity .35s ease .55s}
.takeover.on .takeover-dismiss{opacity:.6}
@media (prefers-reduced-motion:reduce){
  .takeover{transition:opacity .2s ease}
  .takeover-check,.takeover-check svg,.takeover-title,.takeover-sub,.takeover-dismiss{transition:opacity .2s ease}
}

/* ══ Swipe-up-to-complete flow (Buy-BTC style) ═══════════════════════════ */
/* accent re-themes blue→lime in dark, matching the swipe-up token */
.swipe-complete-btn,.completeover{--co-accent:var(--btn\/primary\/default,#352eff);--co-ink:#0a0a0a}
[data-theme=dark] .swipe-complete-btn,[data-theme=dark] .completeover{--co-accent:var(--mav-primary-dark,#a1ff5b)}

/* the trigger — a full-width bar flush on a screen edge; drag it up (or tap) */
.swipe-complete-btn{position:relative;width:100%;max-width:420px;border:0;cursor:grab;touch-action:none;user-select:none;
  background:var(--co-accent);color:var(--bc-white,#ffffff);border-radius:20px 20px 0 0;padding:22px 24px 30px;
  display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--font-active);font-weight:700;font-size:16px;
  transition:transform .3s cubic-bezier(.32,.72,0,1),box-shadow .3s ease;box-shadow:0 -6px 24px -10px var(--co-accent)}
.swipe-complete-btn:active{cursor:grabbing}
.swipe-complete-btn .chev{display:flex;flex-direction:column;align-items:center;animation:swipeup-bounce 1.5s ease-in-out infinite}
.swipe-complete-btn .chev svg{width:22px;height:22px;stroke:var(--bc-white,#ffffff);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:-9px}
/* dark mode: bar is lime, so ink the label/chevrons black for contrast */
[data-theme=dark] .swipe-complete-btn{color:var(--co-ink,#0a0a0a)}
[data-theme=dark] .swipe-complete-btn .chev svg{stroke:var(--co-ink,#0a0a0a)}
@keyframes swipeup-bounce{0%,100%{transform:translateY(2px)}50%{transform:translateY(-4px)}}

/* full-screen completion overlay — expands from the button, then flips to success */
.completeover{position:fixed;inset:0;z-index:9999;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--co-accent);clip-path:circle(0 at var(--ox,50%) var(--oy,100%));opacity:0;pointer-events:none;
  transition:clip-path .6s cubic-bezier(.4,0,.2,1),opacity .3s ease,background-color .5s ease .15s}
.completeover.on{clip-path:circle(150% at var(--ox,50%) var(--oy,100%));opacity:1;pointer-events:auto}
.completeover.co-done{background:var(--co-ink)}

.co-phase{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:0 32px;
  transition:opacity .4s ease,transform .5s cubic-bezier(.4,0,.2,1)}
/* processing (lime) */
.co-processing{color:var(--co-ink)}
.co-logo{width:96px;height:96px;border-radius:50%;background:var(--co-ink);color:var(--co-accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-active);font-size:46px;font-weight:800;
  animation:co-pulse 1.2s ease-in-out infinite}
@keyframes co-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.co-proc-text{font-family:var(--font-active);font-size:22px;font-weight:700;letter-spacing:.01em}
.completeover.co-done .co-processing{opacity:0;transform:translateY(-48px)}
/* success (black) */
.co-success{opacity:0;transform:translateY(36px);color:var(--co-accent)}
.completeover.co-done .co-success{opacity:1;transform:none;transition-delay:.18s}
.co-check{width:120px;height:120px}
.co-check svg{width:120px;height:120px;stroke:var(--co-accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.co-check .co-ring{stroke-dasharray:295;stroke-dashoffset:295}
.co-check .co-tick{stroke-dasharray:44;stroke-dashoffset:44}
.completeover.co-done .co-check .co-ring{transition:stroke-dashoffset .55s ease .25s;stroke-dashoffset:0}
.completeover.co-done .co-check .co-tick{transition:stroke-dashoffset .4s ease .7s;stroke-dashoffset:0}
.co-title{font-family:var(--font-active);font-size:30px;font-weight:800}
.co-sub{font-family:'Inter',sans-serif;font-size:15px;color:#c9c9c9;margin:0}
/* Done button — appears with the success screen */
.co-done-btn{position:absolute;left:24px;right:24px;bottom:calc(40px + env(safe-area-inset-bottom));max-width:420px;margin:0 auto;
  padding:18px;border:0;border-radius:100px;background:var(--co-accent);color:var(--co-ink);
  font-family:var(--font-active);font-size:16px;font-weight:700;cursor:pointer;
  opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.completeover.co-done .co-done-btn{opacity:1;transform:none;transition-delay:.35s;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .completeover{transition:opacity .2s ease,background-color .2s ease}
  .co-phase,.co-check .co-ring,.co-check .co-tick,.co-done-btn,.swipe-complete-btn .chev{transition:opacity .2s ease;animation:none}
}

/* ══════════ cards.html ══════════ */
/* ══ Payment Cards — Figma "• Card" ═════════════════════════════════════════
   A template + swappable skin. 311×200 @ radius 18px (ISO/IEC 7810 ratio
   1.586:1). The data layer (number · holder · expiry) rides over a bottom scrim
   so it stays legible on any of the 16 background skins. Interactive: pick a
   swatch and the face cross-fades in; a soft diagonal sheen sweeps across, and
   the card tilts to the pointer. All motion gated behind prefers-reduced-motion. */
.cardx{display:flex;flex-direction:column;align-items:center;gap:28px;width:100%}
.cardx-stage{perspective:1100px}

.pcard{position:relative;width:min(88vw,400px);aspect-ratio:311/200;border-radius:20px;overflow:hidden;
  color:#fff;font-family:'Inter',sans-serif;flex-shrink:0;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.15);
  transform:perspective(1100px) rotateX(0) rotateY(0);transition:transform .4s cubic-bezier(.22,.9,.3,1),box-shadow .3s ease;
  will-change:transform}
.pcard.tilting{transition:box-shadow .3s ease}

.pcard-skins{position:absolute;inset:0;z-index:0;background:#171717}
.pcard-skins img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.pcard-skins img.on{opacity:1}

.pcard-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.14) 40%,rgba(0,0,0,0) 60%)}
.pcard-sheen{position:absolute;inset:-1px;z-index:2;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.28) 50%,transparent 66%)}

.pcard-data{position:absolute;inset:0;z-index:3;padding:22px 24px;display:flex;flex-direction:column;justify-content:flex-end;gap:16px}
.pcard-number{font-weight:500;font-size:22px;letter-spacing:.06em;line-height:1;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.pcard-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.pcard-label{font-size:9px;text-transform:uppercase;letter-spacing:.12em;opacity:.82;margin-bottom:4px}
.pcard-holder{font-size:13px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.pcard-exp{font-size:12px;text-align:right;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.pcard-exp .lbl{opacity:.8;margin-right:4px}

@media (prefers-reduced-motion: no-preference){
  .pcard-sheen{animation:cardSheen 5.5s ease-in-out infinite}
  @keyframes cardSheen{0%{transform:translateX(-130%)}55%{transform:translateX(130%)}100%{transform:translateX(130%)}}
  /* one-shot brighter sweep when the skin changes */
  .pcard.swapped .pcard-sheen{animation:cardSweep .7s ease-out}
  @keyframes cardSweep{0%{transform:translateX(-130%);opacity:1}100%{transform:translateX(130%);opacity:1}}
}

/* swatch picker */
.swatches{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;max-width:600px}
.swatch{width:68px;aspect-ratio:311/200;border-radius:9px;overflow:hidden;cursor:pointer;border:0;padding:0;position:relative;background:#171717;
  box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .16s cubic-bezier(.34,1.3,.4,1),box-shadow .2s ease}
.swatch img{width:100%;height:100%;object-fit:cover;display:block}
.swatch::after{content:"";position:absolute;inset:0;border-radius:9px;box-shadow:inset 0 0 0 0 var(--btn\/primary\/default,#352eff);transition:box-shadow .2s ease}
.swatch:hover{transform:translateY(-3px) scale(1.05)}
.swatch:active{transform:scale(.97)}
.swatch.on{transform:translateY(-2px)}
.swatch.on::after{box-shadow:inset 0 0 0 3px var(--btn\/primary\/default,#352eff),0 0 0 2px var(--btn\/primary\/default,#352eff)}
[data-theme=dark] .swatch.on::after{box-shadow:inset 0 0 0 3px var(--mav-primary-dark,#a1ff5b),0 0 0 2px var(--mav-primary-dark,#a1ff5b)}
.swatch-hint{font-size:12px;color:var(--mav-muted);font-family:'Inter',sans-serif;text-align:center}

/* gallery */
.card-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card-gallery figure{margin:0;display:flex;flex-direction:column;gap:8px}
.card-gallery .gcard{position:relative;aspect-ratio:311/200;border-radius:16px;overflow:hidden;background:#171717;box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
.card-gallery .gcard img{width:100%;height:100%;object-fit:cover;display:block}
.card-gallery figcaption{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}

/* ══════════ chart.html ══════════ */
/* ══ Chart — Figma "• Chart" (240:2719) ═════════════════════════════════════
   A transaction line chart card: a bold "Transaction" title, a type dropdown,
   a smooth spline over Sun–Thu with a gradient area fill, dashed value guides,
   haloed data points and value labels. Four transaction types —
   Loss (Expenses · red), Earn (Earnings · green), Flat (level · brand) and
   None (empty). The line colour routes through the --Line-Chart/* tokens, so
   the brand variant re-themes blue → lime in dark.

   Motion: on reveal the spline draws itself in (dash-offset), the area lifts &
   fades up, points pop in and value labels rise — all staggered and eased. The
   interactive card morphs smoothly between types: the spline tweens point by
   point, the numbers count, and the colour cross-fades. Points lift on hover.
   Everything is gated behind prefers-reduced-motion. */

.chart{font-family:'Plus Jakarta Sans',sans-serif}

/* card */
.chart-card{position:relative;width:100%;max-width:362px;box-sizing:border-box;
  background:var(--background\/bg-default,#fff);border:1px solid var(--border\/subtle,#efefef);
  border-radius:24px;padding:24px 0 8px;overflow:hidden;color:var(--Line-Chart\/line-gain,#629c28);
  transition:color .55s ease,border-color .3s ease,box-shadow .3s ease}
[data-theme=dark] .chart-card{background:var(--mav-bg,#171717);border-color:var(--mav-border,#2a2a2a)}
.chart--loss {color:var(--Line-Chart\/line-loss,#ff0000)}
.chart--gain {color:var(--Line-Chart\/line-gain,#629c28)}
.chart--brand{color:var(--Line-Chart\/line-brand,#352eff)}

/* head */
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;margin-bottom:22px}
.chart-title{margin:0;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--main-text\/default,#171717)}
[data-theme=dark] .chart-title{color:var(--mav-fg,#f2f2f2)}
.chart-drop{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;box-sizing:border-box;
  border:1px solid var(--btn\/secondary\/default-outline,#efefef);border-radius:var(--border\/border-radius\/sm,6px);
  background:none;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;
  color:var(--main-text\/default,#171717);white-space:nowrap;transition:border-color .2s ease,transform .12s ease,background-color .2s ease}
[data-theme=dark] .chart-drop{color:var(--mav-fg,#f2f2f2);border-color:var(--mav-border,#333)}
.chart-drop svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.34,1.1,.35,1)}
.chart-card[data-interactive] .chart-drop:hover{border-color:var(--Line-Chart\/line-brand,#352eff)}
.chart-card[data-interactive] .chart-drop:hover svg{transform:translateY(2px)}
.chart-drop:active{transform:scale(.96)}

/* plot */
.chart-plot{position:relative;padding:0 16px}
.chart-svg{display:block;width:100%;height:auto;overflow:visible}

.chart-line{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 4px 6px color-mix(in srgb,currentColor 26%,transparent))}
.chart-area{stroke:none}
.chart-guide{stroke:var(--Line-Chart\/Natural,#d9d9d9);stroke-width:1.4;stroke-dasharray:2 4;stroke-linecap:round}
[data-theme=dark] .chart-guide{stroke:#4a4a4a}
.chart-base{stroke:var(--Line-Chart\/Natural,#d9d9d9);stroke-width:1.4;opacity:.35}
[data-theme=dark] .chart-base{stroke:#3a3a3a}
.chart-halo{fill:var(--background\/bg-default,#fff)}
[data-theme=dark] .chart-halo{fill:var(--mav-bg,#171717)}
.chart-dot{fill:currentColor}
.chart-val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:10px;text-anchor:middle;
  fill:var(--main-text\/default,#171717)}
[data-theme=dark] .chart-val{fill:var(--mav-fg,#f2f2f2)}
.chart-day{font-family:'Inter',sans-serif;font-weight:400;font-size:11px;text-anchor:middle;
  fill:var(--main-text\/default,#171717);opacity:.4}
[data-theme=dark] .chart-day{fill:var(--mav-fg,#f2f2f2);opacity:.45}

/* per-point group — hover lift (interactive) */
.chart-pt{transform-box:fill-box}
.chart-card[data-interactive] .chart-pt{cursor:pointer}
.chart-card[data-interactive] .chart-pt .chart-dot,
.chart-card[data-interactive] .chart-pt .chart-halo{transition:r .22s cubic-bezier(.34,1.4,.4,1)}
.chart-card[data-interactive] .chart-pt:hover .chart-dot{r:5.4}
.chart-card[data-interactive] .chart-pt:hover .chart-halo{r:8.6}
.chart-card[data-interactive] .chart-pt:hover .chart-guide{opacity:.9;stroke-dasharray:none}
.chart-card[data-interactive] .chart-pt:hover .chart-val{font-weight:700}

/* empty state */
.chart-svg .chart-data{transition:opacity .4s ease}
.chart-svg.is-empty .chart-data{opacity:0;pointer-events:none}
.chart-empty{font-family:'Inter',sans-serif;font-size:12px;text-anchor:middle;fill:var(--main-text\/default,#171717);
  opacity:0;transition:opacity .4s ease .1s}
.chart-svg.is-empty .chart-empty{opacity:.35}

/* ── reveal animation (draw-in) — gated behind reduced-motion ─────────────── */
@media (prefers-reduced-motion: no-preference){
  .chart-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s cubic-bezier(.45,.05,.15,1)}
  .chart-svg.in .chart-line{stroke-dashoffset:0}
  .chart-area{opacity:0;transform:translateY(10px);transition:opacity .8s ease .12s,transform .85s cubic-bezier(.34,1.05,.35,1) .12s}
  .chart-svg.in .chart-area{opacity:1;transform:none}
  .chart-guide{opacity:0;transition:opacity .55s ease}
  .chart-svg.in .chart-guide{opacity:.6}
  .chart-dot-g{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;
    transition:transform .5s cubic-bezier(.34,1.5,.45,1),opacity .3s ease}
  .chart-svg.in .chart-dot-g{opacity:1;transform:scale(1)}
  .chart-val{opacity:0;transform:translateY(9px);transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.25,.4,1)}
  .chart-svg.in .chart-val{opacity:1;transform:none}
}

/* stage */
.chart-stage{background:var(--mav-surface,#f5f5f5);border-radius:16px;padding:36px 28px;display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.chart-cell{display:flex;flex-direction:column;gap:12px;align-items:center}
.chart-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.chart-solo{display:flex;justify-content:center}
.chart-hint{margin-top:16px;font-size:12px;color:var(--mav-muted);font-family:'Inter',sans-serif;text-align:center}
.chart-replay{display:inline-flex;align-items:center;gap:7px;margin-left:6px;padding:5px 12px;border-radius:999px;
  border:1px solid var(--mav-border,#e5e5e5);background:var(--mav-bg,#fff);color:var(--main-text\/default,#171717);
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .2s,transform .12s}
[data-theme=dark] .chart-replay{color:var(--mav-fg);background:transparent}
.chart-replay:hover{border-color:var(--Line-Chart\/line-brand,#352eff)}
.chart-replay:active{transform:scale(.95)}
.chart-replay svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.canvas-dark{background:var(--main\/white,#171717);border-radius:16px;padding:36px 28px;display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.canvas-dark .chart-tag{color:#9a9a9a}

/* ══════════ chat.html ══════════ */
/* ══ Chat Bubbles — Figma "• Chat ✅" (139:2096) ═════════════════════════════
   The full message-bubble system. Incoming = grey (--bubble/bg-incoming),
   outgoing = tinted primary (--bubble/bg-outcoming, → solid blue in dark).
   Sender name in --bubble/name-incoming (blue → lime). Plus Jakarta Sans body
   16px; timestamp 11px --main-text/description; green ✓✓ delivery.
   Families: Text (short / multi-line), Reacted, Replied (quoted block with a
   primary accent bar), Image (square / horizontal / vertical / placeholder /
   loading), Video (portrait / landscape / placeholder / loading, play overlay),
   and Link previews (image / icon / text / plain). Rounded 18px, the sender's
   bottom corner tucked to 6px — no exaggerated tail.

   Motion: bubbles reveal in sequence (rise + fade) as each thread scrolls in;
   media bubbles lift and the play button swells on hover; reaction pills pop.
   Gated behind prefers-reduced-motion. */

.chat{font-family:'Plus Jakarta Sans',sans-serif}

/* thread shell (phone-ish column) */
.cthread{display:flex;flex-direction:column;gap:12px;width:100%;max-width:390px;box-sizing:border-box;
  background:var(--mav-bg,#fff);border:1px solid var(--mav-border,#efefef);border-radius:22px;padding:20px 16px}
.cthread.plain{border:0;background:none;padding:0;gap:14px}

/* message row */
.cmsg{display:flex;align-items:flex-end;gap:8px;max-width:100%}
.cmsg.out{flex-direction:row-reverse}
.cmsg .col{display:flex;flex-direction:column;gap:4px;min-width:0;max-width:80%}
.cmsg.out .col{align-items:flex-end}

/* avatar (incoming) */
.cavatar{width:28px;height:28px;border-radius:50%;flex:0 0 28px;display:flex;align-items:center;justify-content:center;
  background:var(--background\/bg-secondary,#e5e5e5);color:var(--main-text\/default,#171717);
  font-weight:700;font-size:12px}
[data-theme=dark] .cavatar{background:#3a3a3c;color:#f2f2f2}
.cavatar.ghost{visibility:hidden}

/* bubble */
.cbubble{position:relative;padding:11px 14px;border-radius:18px;box-sizing:border-box;
  font-size:16px;line-height:1.35;color:var(--bubble\/text-incoming,#171717);
  background:var(--bubble\/bg-incoming,#efefef);transition:transform .12s ease}
.cmsg.in  .cbubble{border-bottom-left-radius:6px}
.cmsg.out .cbubble{background:var(--bubble\/bg-outcoming,#352eff19);color:var(--bubble\/text-outcoming,#171717);border-bottom-right-radius:6px}
.cshortrow{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}

.cname{font-weight:700;font-size:14px;color:var(--bubble\/name-incoming,#352eff);margin-bottom:3px;line-height:1.2}
.cmsg.out .cname{color:var(--bubble\/name-incoming,#352eff)}

.cmeta{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:5px}
.cshortrow .cmeta{margin-top:0;display:inline-flex}
.ctime{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.3px;color:var(--main-text\/description,#7f7f7f);white-space:nowrap}
.cmsg.out .cbubble .ctime{color:var(--main-text\/description,#7f7f7f)}
[data-theme=dark] .cmsg.out .cbubble .ctime{color:#c9d2ff}
.ccheck{width:16px;height:11px;flex:none;stroke:var(--System\/Success,#629c28);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-theme=dark] .cmsg.out .ccheck{stroke:#a9ff6b}

/* reaction pill */
.cbubble{overflow:visible}
.creact{position:absolute;bottom:-13px;display:inline-flex;align-items:center;gap:3px;
  background:var(--mav-bg,#fff);border:1px solid var(--mav-border,#e5e5e5);border-radius:999px;
  padding:2px 7px;font-size:12px;line-height:1.2;box-shadow:0 2px 6px rgba(0,0,0,.12);cursor:pointer;
  transition:transform .2s cubic-bezier(.34,1.5,.45,1)}
[data-theme=dark] .creact{background:#2c2c2e;border-color:#454547}
.cmsg.in  .creact{right:10px}
.cmsg.out .creact{left:10px}
.creact:hover{transform:scale(1.12)}
.creact .n{color:var(--main-text\/description,#7f7f7f);font-family:'Inter',sans-serif;font-weight:600}
[data-theme=dark] .creact .n{color:#b9b9bd}

/* quoted reply */
.cquote{display:block;border-left:3px solid var(--bubble\/outline-incoming,#352eff);
  background:rgba(53,46,255,.06);border-radius:6px;padding:6px 10px;margin-bottom:7px;max-width:100%}
[data-theme=dark] .cquote{background:rgba(255,255,255,.10);border-left-color:var(--bubble\/name-incoming,#a1ff5b)}
.cquote .who{display:block;font-weight:700;font-size:13px;color:var(--bubble\/name-incoming,#352eff);line-height:1.35}
.cquote .qt{display:block;font-size:13px;color:var(--main-text\/default,#171717);opacity:.8;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
[data-theme=dark] .cquote .qt{color:#e2e2e2}

/* media bubbles (image / video) */
.cbubble.media{padding:2px 2px 3px;overflow:hidden;font-size:0}
.cmedia{position:relative;border-radius:16px;overflow:hidden;background:#0d0f11;display:block}
.cmedia img{display:block;width:100%;height:100%;object-fit:cover}
.cmedia.square{width:236px;height:220px}
.cmedia.landscape{width:264px;height:132px}
.cmedia.vertical{width:230px;height:360px}
.cmedia.state{width:230px;height:200px;display:flex;align-items:center;justify-content:center;color:#5a5f66}
.cmedia.state svg{width:34px;height:34px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cmedia .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;
  background:rgba(20,20,20,.6);display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.34,1.4,.4,1),background .2s}
.cmedia .play svg{width:20px;height:20px;fill:#fff;margin-left:2px}
.cbubble.media:hover .cmedia img{transform:none}
.cbubble.media:hover .play{transform:translate(-50%,-50%) scale(1.12);background:rgba(20,20,20,.78)}
.cmedia .spin{width:30px;height:30px;border:3px solid rgba(255,255,255,.18);border-top-color:rgba(255,255,255,.75);border-radius:50%;animation:cspin 1s linear infinite}
@keyframes cspin{to{transform:rotate(360deg)}}
.cmedia .badge-time{position:absolute;right:8px;bottom:7px;display:flex;align-items:center;gap:4px;padding:2px 7px;border-radius:999px;
  background:rgba(0,0,0,.42);backdrop-filter:blur(4px)}
.cmedia .badge-time .ctime{color:#fff;font-size:11px}
.cmedia .badge-time .ccheck{stroke:#fff}

/* link preview */
.clink{width:236px;display:flex;flex-direction:column;font-size:0}
.clink .card{border-radius:12px;overflow:hidden;background:rgba(0,0,0,.05)}
[data-theme=dark] .clink .card{background:rgba(255,255,255,.07)}
.clink .hero{height:104px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 140% at 30% 10%,#123a86 0%,#0a1730 60%,#060b18 100%);color:#fff}
.clink .hero b{font-size:19px;font-weight:800;letter-spacing:-.02em;font-family:'Plus Jakarta Sans',sans-serif}
.clink .cbody{padding:10px 12px;position:relative}
.clink .cbody .row{display:flex;gap:8px;align-items:flex-start;justify-content:space-between}
.clink .t{font-size:14px;font-weight:700;line-height:1.25;color:var(--main-text\/default,#171717)}
[data-theme=dark] .clink .t{color:#f2f2f2}
.clink .d{font-size:12px;line-height:1.35;color:var(--main-text\/default,#171717);opacity:.72;margin-top:3px}
[data-theme=dark] .clink .d{color:#d0d0d0}
.clink .host{font-size:11px;color:var(--main-text\/description,#7f7f7f);margin-top:6px;font-family:'Inter',sans-serif}
.clink .mark{flex:0 0 26px;width:26px;height:26px;border-radius:6px;background:#171717;color:#fff;display:flex;align-items:center;justify-content:center}
[data-theme=dark] .clink .mark{background:#f2f2f2;color:#171717}
.clink .mark svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none}
.clink .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 4px 2px}
.clink .url{font-size:13px;color:#1a56db;font-weight:600;text-decoration:underline;font-family:'Plus Jakarta Sans',sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-theme=dark] .clink .url{color:#8ab4ff}
.clink.plainlink{padding:0}

/* stages */
.chat-stage{background:var(--mav-surface,#f5f5f5);border-radius:16px;padding:32px 24px;display:flex;flex-wrap:wrap;gap:26px;justify-content:center;align-items:flex-start}
.chat-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif;margin-bottom:10px;display:block;text-align:center}
.chat-col{display:flex;flex-direction:column}
.canvas-dark{background:var(--main\/white,#171717);border-radius:16px;padding:24px}
.canvas-dark .chat-tag{color:#9a9a9a}

/* reveal */
@media (prefers-reduced-motion: no-preference){
  .cmsg{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .55s cubic-bezier(.22,.9,.3,1)}
  .cthread.in .cmsg{opacity:1;transform:none}
  .creact{opacity:0;transform:scale(0)}
  .cthread.in .creact{opacity:1;transform:scale(1);transition:opacity .3s ease,transform .45s cubic-bezier(.34,1.5,.45,1)}
}

/* ══════════ coachmark.html ══════════ */
/* ══ Coachmark — Figma "‣ Coachmark" page (259:21967) ════════════════════════
   Onboarding tour tip: a dashed pointer (blue line + dot) connecting to a
   highlighted target, over a dark blanket, with white Title (PJS Medium 18) +
   Description (PJS Bold 14) + step "( n / N )". Six pointer appearances:
   top · top-left · top-right · bottom · bottom-left · bottom-right. */
.coach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.blanket{background:#141414;border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-height:180px}
.coach{display:flex;flex-direction:column;align-items:center;width:100%;max-width:340px}
.coach-ptr{color:var(--mav-primary,#352eff);display:flex;justify-content:center}
[data-theme=dark] .coach-ptr{color:var(--mav-primary-dark)}
.coach-ptr svg{overflow:visible}
.coach-txt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;text-align:center}
.coach-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:18px;color:#ffffff}
.coach-desc{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:#ffffff;opacity:.95}
.coach-step{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:#ffffff;opacity:.75}
.coach-tag{font-size:11px;color:#9a9a9a;font-family:'Inter',sans-serif;margin-bottom:6px}

/* Example phone */
.phone{position:relative;width:300px;height:600px;border-radius:28px;overflow:hidden;background:#141414;
  display:flex;flex-direction:column;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
.phone-target{position:absolute;top:96px;left:24px;right:24px;background:#fff;border-radius:8px;padding:12px 14px;
  display:flex;align-items:center;gap:8px;box-shadow:0 0 0 4px rgba(53,46,255,.5)}
.phone-target svg{width:18px;height:18px;stroke:#b2b2b2;stroke-width:1.8;fill:none;stroke-linecap:round}
.phone-target span{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:13px;color:#b2b2b2}
.phone-coach{position:absolute;top:150px;left:0;right:0;display:flex;flex-direction:column;align-items:center}
.phone-btn{position:absolute;left:16px;right:16px;bottom:20px;background:var(--mav-primary,#352eff);color:#fff;
  border:0;border-radius:12px;padding:15px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;cursor:pointer}
[data-theme=dark] .phone-btn{background:var(--mav-primary-dark);color:#171717}

/* ══════════ datepicker.html ══════════ */
/* ══ Datepicker — Figma "• Datepicker" (203:2602) ════════════════════════════
   A calendar card: month pager header, weekday labels, and a day grid whose
   cells carry states (default / hover / selected / focus / in-range / disabled
   / outside-month). Three types: Day (single), Range (start→end band), Year.
   Selected fill uses the primary token, re-theming blue → lime in dark. */
.dp{width:344px;max-width:100%;box-sizing:border-box;background:var(--mav-bg,#fff);
  border:1px solid var(--mav-border,#ececec);border-radius:16px;padding:24px;
  box-shadow:0 6px 12px -6px rgba(0,0,0,.1),0 12px 24px -12px rgba(0,0,0,.08);
  font-family:'Plus Jakarta Sans',sans-serif;--dp-accent:var(--btn\/primary\/default,#352eff);--dp-on:#fff}
[data-theme=dark] .dp{--dp-accent:var(--mav-primary-dark,#a1ff5b);--dp-on:#171717}

.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dp-nav{width:32px;height:32px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--mav-border,#dbdbdb);
  border-radius:8px;background:var(--mav-bg,#fff);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.dp-nav svg{width:18px;height:18px;stroke:var(--main-text\/default,#171717);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-theme=dark] .dp-nav svg{stroke:var(--mav-fg)}
.dp-nav.hidden{visibility:hidden}
.dp-month{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:var(--main-text\/description,#7f7f7f);cursor:pointer;transition:color .15s}
.dp-month:hover{color:var(--main-text\/default,#171717)}
[data-theme=dark] .dp-month:hover{color:var(--mav-fg)}
.dp-month svg{transition:transform .3s cubic-bezier(.34,1.1,.35,1)}
.dp-month svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px}
.dp-cell{height:40px;display:flex;align-items:center;justify-content:center;position:relative}
.dp-wd{font-weight:700;font-size:14px;color:var(--main-text\/placeholder,#b2b2b2);height:32px;display:flex;align-items:center}
.dp-day{width:32px;height:32px;border:0;background:none;padding:0;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/default,#171717);cursor:pointer;position:relative;z-index:1;transition:background .12s}
[data-theme=dark] .dp-day{color:var(--mav-fg)}
.dp-day:hover{background:var(--mav-bg-secondary,#e5e5e5)}
.dp-day.out{color:var(--main-text\/placeholder,#b2b2b2)}
.dp-day.hov{background:var(--mav-bg-secondary,#e5e5e5)}
.dp-day.sel{background:var(--dp-accent);color:var(--dp-on)}
.dp-day.sel:hover{background:var(--dp-accent)}
.dp-day.foc{box-shadow:0 0 0 2px var(--dp-accent)}
.dp-day.dis{color:var(--main-text\/placeholder,#b2b2b2);opacity:.55;cursor:not-allowed}
.dp-day.dis:hover{background:transparent}

/* range band */
.dp-cell.r::before{content:'';position:absolute;top:4px;bottom:4px;left:0;right:0;
  background:color-mix(in srgb, var(--dp-accent) 13%, transparent);z-index:0}
.dp-cell.r.rs::before{left:50%}
.dp-cell.r.re::before{right:50%}
.dp-cell.r.edge-l::before{border-top-left-radius:10px;border-bottom-left-radius:10px}
.dp-cell.r.edge-r::before{border-top-right-radius:10px;border-bottom-right-radius:10px}
.dp-cell.r .dp-day:not(.sel){color:var(--dp-accent)}
.dp-cell.r .dp-day:not(.sel):hover{background:transparent}

/* year grid */
.dp-years{display:grid;grid-template-columns:repeat(4,1fr);row-gap:8px;column-gap:6px}
.dp-year{border:0;background:none;padding:9px 0;border-radius:10px;text-align:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;
  color:var(--main-text\/default,#171717);cursor:pointer;transition:background .12s}
[data-theme=dark] .dp-year{color:var(--mav-fg)}
.dp-year:hover{background:var(--mav-bg-secondary,#e5e5e5)}
.dp-year.sel{background:var(--dp-accent);color:var(--dp-on)}
.dp-year.sel:hover{background:var(--dp-accent)}

/* stage */
.dp-stage{background:var(--mav-surface,#f5f5f5);border-radius:16px;padding:32px;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;align-items:flex-start}
.dp-cell-lbl{display:flex;flex-direction:column;gap:12px;align-items:center}
.dp-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.canvas-dark{background:var(--main\/white,#171717);border-radius:16px;padding:32px;display:flex;justify-content:center}

/* state legend */
.dp-legend{display:flex;flex-wrap:wrap;gap:26px;--dp-accent:var(--btn\/primary\/default,#352eff);--dp-on:#fff}
[data-theme=dark] .dp-legend{--dp-accent:var(--mav-primary-dark,#a1ff5b);--dp-on:#171717}
.dp-leg{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.dp-leg .dp-day{cursor:default}

/* ══════════ divider.html ══════════ */
/* ══ Divider — Figma "• Divider" page (52:30219) ═════════════════════════════
   A 1px rule that separates content. Types: Horizontal / Vertical.
   Colour is the --devider/default token (Figma's intentional "devider" typo),
   #efefef in light and #484848 in dark via the tokens.css theme override.
   In the current Figma, the Light and Heavy styles resolve to the same token. */
.dv{background:var(--devider\/default,#efefef);border:0;margin:0;flex-shrink:0}
.dv-h{width:100%;height:1px}
.dv-v{width:1px;align-self:stretch;min-height:48px}

.dv-demo{display:flex;flex-direction:column;gap:14px;width:100%;max-width:420px}
.dv-inline{display:flex;align-items:center;gap:16px;height:48px}
.dv-inline span{font-size:14px;color:var(--mav-fg);font-family:'Inter',sans-serif}

/* Menu/list usage sample */
.dv-list{width:100%;max-width:340px;border:1px solid var(--mav-border);border-radius:12px;overflow:hidden}
.dv-list .row{padding:14px 18px;font-size:14px;color:var(--mav-fg);font-family:'Inter',sans-serif}

/* Section-header usage: label centred on a rule */
.dv-labelled{display:flex;align-items:center;gap:16px;width:100%;max-width:420px}
.dv-labelled .lbl{font-size:12px;color:var(--mav-muted);white-space:nowrap;text-transform:uppercase;letter-spacing:.06em}

/* ══════════ feedback.html ══════════ */
/* ══ Alert — Figma component set 52:28340 ═══════════════════════════════
   padding 16px · radius 8px · no border · 10% tinted bg · text in variant color
   icon (bell-ringing) 19.43px · gap 16px icon↔content · gap 12px content↔actions */
.mav-alert{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:10px;
  font-family:var(--font-active);
}
.mav-alert.is-multiline{align-items:flex-start}
.alert-icon{flex-shrink:0;width:19.43px;height:19.43px}
.alert-icon svg{width:100%;height:100%;display:block}
.alert-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.mav-alert.is-multiline .alert-main{align-items:flex-start}
.alert-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.alert-title{font-weight:700;font-size:14px;line-height:1.3}
/* body copy stays neutral for legibility — only the icon + title carry the variant colour */
.alert-desc{font-weight:500;font-size:var(--medium\/md,14px);line-height:1.45;color:var(--main-text\/default,#171717)}
[data-theme=dark] .alert-desc{color:rgba(255,255,255,.7)}
/* the compact single-line state keeps the variant colour — there the colour IS the message */
.alert-single{font-weight:500;font-size:var(--medium\/md,14px);line-height:1.4;flex:1;min-width:0}
.alert-emoji{flex-shrink:0;width:20px;height:20px;font-size:18px;line-height:20px;text-align:center}
/* action buttons — always btn/textonly colors, 12px Medium, regardless of variant */
.alert-actions{display:flex;gap:16px;flex-shrink:0}
.alert-btn{background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-active);
  font-weight:500;font-size:var(--medium\/sm,12px);line-height:normal;white-space:nowrap;color:var(--btn\/textonly\/default)}
.alert-btn+.alert-btn{color:var(--btn\/textonly\/hover)}

/* Variant tints (bg-box = 10% alpha) + text/icon color */
.alert-primary{background:var(--alert\/primary\/bg-box);color:var(--alert\/primary\/text-brand)}
.alert-danger {background:var(--alert\/danger\/bg-box); color:var(--alert\/danger\/text-danger)}
.alert-success{background:var(--alert\/success\/bg-box);color:var(--alert\/success\/text-success)}
.alert-warning{background:var(--alert\/waring\/bg-box); color:var(--alert\/waring\/text-warning)}

/* Toast */
.mav-toast{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:10px;
  background:var(--bc-mono900-l);color:var(--bc-white);
  box-shadow:0 8px 32px rgba(0,0,0,0.24);
  font-size:14px;min-width:280px;max-width:360px;
}
.toast-icon{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.toast-icon svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.toast-body{flex:1;min-width:0}
.toast-title{font-weight:600;font-size:13px}
.toast-desc{font-size:12px;opacity:.6;margin-top:1px}
.toast-action{font-size:12px;font-weight:600;color:var(--mav-primary-dark);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .15s}
.toast-action:hover{opacity:.7}
.toast-close{display:flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:.4;cursor:pointer;font-size:16px;line-height:1;flex-shrink:0;transition:opacity .15s}
.toast-close:hover{opacity:.9}

.toast-success .toast-icon{background:var(--mav-primary-dark);color:var(--mav-fg)}
.toast-error   .toast-icon{background:var(--mav-danger);color:var(--bc-white)}
.toast-info    .toast-icon{background:var(--mav-tertiary-1);color:var(--bc-white)}
.toast-warning .toast-icon{background:var(--mav-warning);color:var(--bc-white)}
.toast-light{background:var(--bc-white);color:var(--bc-mono900-l);border:1px solid var(--mav-border);box-shadow:0 4px 24px rgba(0,0,0,0.10)}
.toast-light .toast-title{color:var(--bc-mono900-l)}
.toast-light .toast-close{color:var(--bc-mono900-l)}
.toast-light .toast-action{color:var(--mav-primary)}
.toast-light .toast-success .toast-icon{background:var(--mav-success);color:var(--bc-white)}

/* Inline field feedback — mirrors the Input Field component (--input-field/* tokens) */
.fb-demo{display:flex;flex-direction:column;gap:18px;width:100%;max-width:380px;font-family:'Plus Jakarta Sans',sans-serif}
.fb-group{display:flex;flex-direction:column;gap:8px}
.fb-label{font-weight:700;font-size:14px;color:var(--main-text\/default,#171717)}
[data-theme=dark] .fb-label{color:var(--mav-fg)}
.fb-input{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:4px;
  border:1px solid var(--input-field\/default\/outline-box,#cccccc);background:var(--input-field\/default\/bg-box,#fff);
  box-shadow:0 1px 2px rgba(0,0,0,.04);transition:border-color .15s,background .15s,box-shadow .15s}
.fb-input input{flex:1;min-width:0;border:0;background:none;outline:none;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;font-size:14px;color:var(--main-text\/default,#171717)}
[data-theme=dark] .fb-input input{color:var(--mav-fg)}
.fb-input input::placeholder{color:var(--input-field\/default\/text-placeholder,#b2b2b2);font-weight:700}
.fb-input .tail{width:20px;height:20px;flex-shrink:0}
.fb-msg{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;line-height:1.3}
.fb-input .tail svg,.fb-msg svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* states */
.fb-group.err .fb-input{border-color:var(--input-field\/error\/outline-box,#ff0000);background:var(--input-field\/error\/bg-box,#ff00001a)}
.fb-group.err .fb-msg{color:var(--input-field\/error\/label-error,#ff0000)}
.fb-group.err .fb-msg svg,.fb-group.err .tail svg{stroke:var(--input-field\/error\/icon-error,#ff0000)}
.fb-group.ok .fb-input{border-color:var(--System\/Success,#629c28);background:var(--System\/Success-soft,#629c281a)}
.fb-group.ok .fb-msg{color:var(--System\/Success,#629c28)}
.fb-group.ok .fb-msg svg,.fb-group.ok .tail svg{stroke:var(--System\/Success,#629c28)}
.fb-group.hint .fb-msg{color:var(--main-text\/description,#7f7f7f);font-weight:500}
.fb-group.hint .fb-msg svg{stroke:var(--main-text\/description,#7f7f7f)}

/* ══════════ finance.html ══════════ */
/* Balance card */
.balance-card{
  background:linear-gradient(135deg,var(--mav-primary) 0%,var(--mav-secondary) 100%);
  border-radius:20px;padding:28px;color:var(--bc-white);width:343px;
  box-shadow:0 8px 32px rgba(53,46,255,0.35);
}
.bal-label{font-size:12px;opacity:.7;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.bal-amount{font-size:36px;font-weight:700;letter-spacing:-0.02em;margin:6px 0 4px}
.bal-sub{font-size:12px;opacity:.6}
.bal-row{display:flex;justify-content:space-between;align-items:flex-end}
.bal-actions{display:flex;gap:12px;margin-top:24px}
.bal-btn{
  flex:1;padding:10px;border-radius:10px;
  background:rgba(255,255,255,0.18);border:1px solid rgba(255,255,255,0.25);
  color:var(--bc-white);font-size:12px;font-weight:600;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;font-family:inherit;
}
.bal-btn svg{opacity:.9}
.bal-btn{transition:background .15s,transform .12s}
.bal-btn:hover{background:rgba(255,255,255,0.28)}
.balance-card-dk .bal-btn:hover{background:rgba(161,255,91,0.2)}
.bal-btn:active{transform:scale(.96)}

/* Dark balance card */
.balance-card-dk{
  background:linear-gradient(135deg,var(--mav-fg) 0%,var(--mav-code-bg) 100%);
  border:1px solid var(--bc-mono100-d);
}
.balance-card-dk .bal-btn{
  background:rgba(161,255,91,0.12);border-color:rgba(161,255,91,0.25);
}

/* Gain/Loss widget */
.stat-widget{
  display:flex;align-items:center;gap:12px;
  padding:16px;border-radius:12px;border:1px solid var(--mav-border);
  background:var(--mav-bg);
}
.stat-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.stat-icon-gain{background:color-mix(in srgb,var(--mav-success) 12%,transparent)}
.stat-icon-loss{background:rgba(255,0,0,0.08)}
.stat-icon-neutral{background:rgba(53,46,255,0.08)}
.stat-label{font-size:12px;color:var(--mav-muted);margin-bottom:2px}
.stat-value{font-size:20px;font-weight:700;color:var(--mav-fg);letter-spacing:-0.01em}
.stat-value-gain{color:var(--mav-success)}
.stat-value-loss{color:var(--mav-danger)}
.stat-change{font-size:11px;font-weight:500;margin-top:2px}
.stat-change-up{color:var(--mav-success)}
.stat-change-down{color:var(--mav-danger)}

/* Transaction list — vertical stack of rows */
.txn-list{display:flex;flex-direction:column;width:100%;max-width:480px}
.txn-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--mav-border);
}
.txn-item:last-child{border-bottom:none}
.txn-icon{width:42px;height:42px;border-radius:12px;background:var(--mav-border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.txn-body{flex:1}
.txn-name{font-size:14px;font-weight:600;color:var(--mav-fg)}
.txn-meta{font-size:12px;color:var(--mav-muted);margin-top:2px}
.txn-amount{font-size:15px;font-weight:700;text-align:right}
.txn-amount-credit{color:var(--mav-success)}
.txn-amount-debit{color:var(--mav-danger)}
.txn-date{font-size:11px;color:var(--mav-muted);margin-top:2px;text-align:right}

/* Spend limit + chart layout */
.spend-grid{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start}
.spend-col{flex:1;min-width:min(100%,280px)}
.spend-head{font-size:13px;font-weight:700;color:var(--mav-fg);margin-bottom:14px}
.limit-block{margin-bottom:18px}
.limit-block:last-child{margin-bottom:0}
.limit-row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;margin-bottom:6px}
.limit-row .limit-used{font-weight:600;color:var(--mav-fg)}
.limit-row .limit-of{color:var(--mav-muted)}
.limit-note{font-size:11px;color:var(--mav-muted);margin-top:6px}
.limit-note-warn{color:var(--mav-warning);font-weight:600}
.limit-note-over{color:var(--mav-danger);font-weight:600}

/* Mini chart bar */
.chart-bar-wrap{display:flex;align-items:flex-end;gap:6px;height:96px}
.chart-bar{border-radius:4px 4px 0 0;flex:1;transition:opacity .15s,transform .12s;cursor:pointer;transform-origin:bottom}
.chart-bar:hover{opacity:.75}
.chart-bar-active{background:var(--mav-primary)}
.chart-bar-inactive{background:var(--mav-border)}
.chart-labels{display:flex;gap:6px;margin-top:8px}
.chart-labels span{flex:1;text-align:center;font-size:11px;color:var(--mav-muted)}
.chart-labels .chart-label-active{color:var(--mav-fg);font-weight:700}

/* Limit indicator */
.limit-track{height:8px;border-radius:9999px;background:var(--mav-border);overflow:hidden}
.limit-fill{height:100%;border-radius:9999px;transition:width .3s}
.limit-fill-ok{background:var(--mav-primary)}
.limit-fill-warn{background:var(--mav-warning)}
.limit-fill-over{background:var(--mav-danger)}

/* Account card (minimal) */
.acc-card{
  display:flex;align-items:center;gap:14px;
  padding:16px;border-radius:12px;border:1px solid var(--mav-border);
  background:var(--mav-bg);
}
.acc-logo{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;background:color-mix(in srgb,var(--mav-primary) 12%,transparent);color:var(--mav-primary)}
.acc-card{transition:border-color .15s,transform .12s}
.acc-card:hover{border-color:var(--mav-primary)}
.acc-add{color:var(--mav-muted);border-style:dashed!important;justify-content:center;cursor:pointer}
.acc-add > div{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.acc-add:hover{color:var(--mav-primary)}
.acc-info{flex:1}
.acc-bank{font-size:13px;font-weight:600;color:var(--mav-fg)}
.acc-num{font-size:11px;color:var(--mav-muted);font-family:var(--font-mono);margin-top:2px}
.acc-bal{font-size:15px;font-weight:700;color:var(--mav-fg)}
.acc-bal-sub{font-size:11px;color:var(--mav-muted)}

@media (prefers-reduced-motion:no-preference){
  .acc-card:hover{transform:translateY(-2px)}
  .chart-bar:hover{transform:scaleY(1.03)}
}

/* ══════════ forms.html ══════════ */
/* ══ Forms & Controls — Checkbox · Toggle · Search · Radio ═══════════════════
   Mobile-first: every demo lives in a constrained, full-width column so it
   reads like a real mobile control list and never overflows. Tokens:
   --Checkbox/* · --toggle/* · --input-field/* · --icon/active — active fills
   re-theme blue → lime in dark. */
.doc-main{min-width:0}                        /* let the content column shrink on mobile */
.preview-canvas{display:block}                /* plain block flow — no flex-item width quirks; demos left-align */
.token-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.token-table .token-name{overflow-wrap:anywhere}   /* long token names wrap on mobile */

.fc{width:100%;max-width:420px;min-width:0;font-family:'Inter',sans-serif}
.fc-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:20px 10px}
.fc-sw{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:12px;color:var(--mav-muted)}

/* labelled control list (checkbox/toggle/radio with text) */
.fc-list{display:flex;flex-direction:column;width:100%;max-width:420px}
.fc-item{display:flex;align-items:center;gap:12px;padding:14px 2px;border-bottom:1px solid var(--mav-border);min-width:0}
.fc-item:last-child{border-bottom:0}
.fc-item .grow{flex:1;min-width:0}
.fc-item .nm{font-size:15px;color:var(--mav-fg)}
.fc-item.is-disabled .nm{color:var(--main-text\/placeholder,#b2b2b2)}
.fc-tag{font-size:11px;color:var(--mav-muted);flex-shrink:0}

/* ── Checkbox — --Checkbox/* (16px · radius 4) ─────────────────────────────── */
.cbx{width:20px;height:20px;border-radius:5px;box-sizing:border-box;
  border:1.5px solid var(--Checkbox\/default\/outline-box,#cccccc);background:var(--Checkbox\/default\/bg-box,#fff);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;
  transition:box-shadow .15s,background .15s,border-color .15s}
.cbx svg{width:13px;height:13px;stroke:var(--icon\/inverted,#fff);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;display:none}
.cbx.is-focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--Checkbox\/active\/bg-box-active,#352eff) 22%,transparent);border-color:var(--Checkbox\/active\/bg-box-active,#352eff)}
.cbx.is-selected,.cbx.is-indeterminate{background:var(--Checkbox\/active\/bg-box-active,#352eff);border-color:var(--Checkbox\/active\/bg-box-active,#352eff)}
.cbx.is-selected .cb-check{display:block}
.cbx.is-indeterminate .cb-minus{display:block}
.cbx.is-disabled{background:var(--Checkbox\/disabled\/bg-box-disabled,#e5e5e5);border-color:var(--Checkbox\/disabled\/outline-box-disabled,#b2b2b2);box-shadow:none;cursor:not-allowed}
[data-theme=dark] .cbx.is-selected svg,[data-theme=dark] .cbx.is-indeterminate svg{stroke:#171717}
.cbx-field{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.cbx-field.text-left{flex-direction:row-reverse}

/* ── Toggle — --toggle/* (44×24 pill) ──────────────────────────────────────── */
.tgl{position:relative;width:44px;height:24px;border-radius:9999px;flex-shrink:0;cursor:pointer;padding:0;border:0;
  background:var(--toggle\/default\/bg-box,#e5e5e5);transition:background .2s,box-shadow .15s}
.tgl::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .22s cubic-bezier(.34,1.1,.35,1)}
.tgl.on{background:var(--toggle\/active\/bg-box-active,#352eff)}
.tgl.on::after{left:23px}
.tgl.is-hover{filter:brightness(.95)}
.tgl.is-focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--toggle\/active\/bg-box-active,#352eff) 28%,transparent)}
.tgl.is-disabled{cursor:not-allowed;background:var(--toggle\/disabled\/bg-box-disabled,#e5e5e5);opacity:.7}
.tgl.is-disabled.on{background:var(--toggle\/disabled\/bg-box-disabled-2,#e4ebff)}
.tgl-field{display:inline-flex;align-items:center;gap:12px;cursor:pointer}
.tgl-field.text-left{flex-direction:row-reverse}
/* toggle state matrix — shrinks to fit narrow screens */
.tgl-matrix{display:flex;flex-direction:column;gap:16px;width:100%;max-width:300px}
.tgl-line{display:grid;grid-template-columns:1fr 44px 44px;align-items:center;gap:18px}
.tgl-line .hd,.tgl-line .nm{font-size:12px;color:var(--mav-muted)}
.tgl-line .nm{font-size:14px;color:var(--mav-fg)}
.tgl-line .hd{text-align:center}

/* ── Search — --input-field/* ──────────────────────────────────────────────── */
.fc-field{display:flex;flex-direction:column;gap:8px;width:100%;max-width:400px}
.fc-flabel{font-size:13px;font-weight:600;color:var(--main-text\/default,#171717)}
[data-theme=dark] .fc-flabel{color:var(--mav-fg)}
.srch{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:8px;box-sizing:border-box;width:100%;
  border:1.5px solid var(--input-field\/default\/outline-box,#cccccc);background:var(--input-field\/default\/bg-box,#fff);
  transition:border-color .15s,background .15s,box-shadow .15s}
.srch svg{width:18px;height:18px;flex-shrink:0;color:var(--main-text\/placeholder,#b2b2b2);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.srch input{flex:1;min-width:0;border:0;outline:none;background:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;color:var(--main-text\/default,#171717)}
[data-theme=dark] .srch input{color:var(--mav-fg)}
.srch input::placeholder{color:var(--main-text\/placeholder,#b2b2b2)}
.srch .clear{cursor:pointer;color:var(--main-text\/placeholder,#b2b2b2);font-size:18px;line-height:1;flex-shrink:0}
.srch:focus-within,.srch.is-focus{border-color:var(--input-field\/focus\/outline-box,#352eff);box-shadow:0 0 0 3px color-mix(in srgb,var(--input-field\/focus\/outline-box,#352eff) 18%,transparent)}
.srch:focus-within svg,.srch.is-focus svg{color:var(--input-field\/focus\/outline-box,#352eff)}
.srch.is-error{border-color:var(--input-field\/error\/outline-box,#ff0000);background:var(--input-field\/error\/bg-box,#ff00001a)}
.srch.is-error svg{color:var(--input-field\/error\/icon-error,#ff0000)}
.fc-err{font-size:12px;font-weight:600;color:var(--input-field\/error\/label-error,#ff0000)}

/* ── Radio — --icon/active (16px · 2px) ────────────────────────────────────── */
.rdo{width:20px;height:20px;border-radius:50%;box-sizing:border-box;border:2px solid var(--Checkbox\/default\/outline-box,#cccccc);
  background:transparent;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s}
.rdo.is-active{border-color:var(--icon\/active,#352eff)}
.rdo.is-active::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--icon\/active,#352eff)}
.rdo.is-focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--icon\/active,#352eff) 22%,transparent)}
.rdo.is-disabled{border-color:var(--Radio\/Radio-Button-Secondary,#cccccc);background:var(--Radio\/Radio-Button-Secondary,#cccccc);cursor:not-allowed}
.rdo-field{display:inline-flex;align-items:center;gap:10px;cursor:pointer}

/* ── Mobile: keep everything inside the viewport ───────────────────────────── */
@media (max-width:768px){
  .doc-layout{display:block}   /* single full-width column; grid 1fr wasn't constraining */
  .doc-main{min-width:0;max-width:100%;width:100%;padding:24px 16px;box-sizing:border-box}
  .preview-card{max-width:100%;box-sizing:border-box}
  .preview-canvas{padding:20px 16px;box-sizing:border-box}
  .preview-canvas>*{max-width:100%}
  .fc,.fc-list,.fc-field,.tgl-matrix{max-width:100%}
  .fc-swatches{gap:18px 20px}
}

/* ══════════ input-amount.html ══════════ */
/* ══ Input Amount — Figma "• Input Amount" organism (139:2090) ════════════════
   An "enter amount" screen: a large amount field with round − / + steppers,
   a grid of quick-select amount chips, and a "nominal send" slider card. Composes
   Button, Chip-like presets, Progress/Slider and the amount display — token-driven
   so the whole screen re-themes in dark. */
.phone{width:375px;max-width:100%;border-radius:36px;overflow:hidden;position:relative;display:flex;flex-direction:column;
  background:var(--mav-bg,#fff);border:1px solid var(--mav-border);box-shadow:0 24px 60px -24px rgba(0,0,0,.4)}
.statusbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 6px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;color:var(--main-text\/default,#171717)}
.statusbar svg{fill:var(--main-text\/default,#171717)}
.topnav{display:flex;align-items:center;padding:8px 8px 12px;gap:4px}
.nav-ic{width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.nav-ic svg{width:22px;height:22px;stroke:var(--main-text\/default,#171717);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-title{flex:1;text-align:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;color:var(--main-text\/default,#171717)}

.body{padding:24px 20px;display:flex;flex-direction:column;gap:32px}

/* Big amount input */
.amt-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/default,#171717);text-align:center}
.amt-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:16px}
.amt-value{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:40px;line-height:1;color:var(--main-text\/default,#171717);min-width:110px;text-align:center}
.amt-value.error{color:var(--input-field\/error\/text-placeholder,#ff0000)}
.amt-btn{width:44px;height:44px;border-radius:50%;background:#030192;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.amt-btn svg{width:20px;height:20px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round}
[data-theme=dark] .amt-btn{background:var(--mav-primary-dark)}
[data-theme=dark] .amt-btn svg{stroke:#171717}

/* Quick-select chips */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chip{height:48px;border:1px solid var(--border\/subtle,#efefef);background:var(--mav-bg,#fff);border-radius:8px;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/default,#171717);transition:.12s}
.chip.on{background:var(--mav-primary,#352eff);border-color:var(--mav-primary,#352eff);color:#fff}
[data-theme=dark] .chip.on{background:var(--mav-primary-dark);color:#171717}

/* Nominal slider card */
.slider-card{border:1px solid var(--border\/subtle,#efefef);border-radius:12px;padding:16px;background:var(--mav-bg,#fff);
  box-shadow:0 10px 24px rgba(15,13,35,.05);display:flex;flex-direction:column;gap:16px}
.sc-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:14px;color:var(--main-text\/default,#171717)}
.sc-row{display:flex;align-items:center;justify-content:space-between}
.sc-amt{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:32px;color:var(--main-text\/default,#171717)}
.sc-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--border\/subtle,#efefef);background:var(--mav-bg,#fff);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.sc-btn.solid{background:#030192;border-color:#030192}
[data-theme=dark] .sc-btn.solid{background:var(--mav-primary-dark);border-color:var(--mav-primary-dark)}
.sc-btn svg{width:16px;height:16px;stroke:var(--main-text\/default,#171717);stroke-width:2.4;fill:none;stroke-linecap:round}
.sc-btn.solid svg{stroke:#fff}
[data-theme=dark] .sc-btn.solid svg{stroke:#171717}

.slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:8px;outline:none;
  background:linear-gradient(to right,var(--mav-primary,#352eff) 50%,#e6edff 50%)}
[data-theme=dark] .slider{background:linear-gradient(to right,var(--mav-primary-dark) 50%,#2a2740 50%)}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;
  border:4px solid var(--mav-primary,#352eff);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25)}
[data-theme=dark] .slider::-webkit-slider-thumb{border-color:var(--mav-primary-dark)}

/* dock */
.dock{padding:16px;border-radius:32px 32px 0 0;background:var(--button-dock\/bg-dock,#fff);box-shadow:0 0 12px rgba(0,0,0,.08)}
.btn-dock{width:100%;padding:15px;border:0;border-radius:var(--border\/border-radius\/sm,4px);cursor:pointer;
  background:var(--btn\/primary\/default,#352eff);color:var(--btn\/primary\/text-default,#fff);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px}
[data-theme=dark] .btn-dock{background:var(--mav-primary-dark);color:#171717}
.home-ind{width:135px;height:5px;border-radius:100px;background:var(--main-text\/default,#171717);margin:12px auto 2px}
.phones{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}

/* ══════════ inputs.html ══════════ */
/* ══ Input & dropdown family — Figma "• Input & dropdown" (52:30298) ═════════
   Input · Input dropdown · Input with label · Input with Search · Textarea ·
   Message input. All consume the --input-field/* token namespace (states re-theme
   in dark mode). Text is Plus Jakarta Sans Bold 14px; labels/descriptions Inter.
   Base padding 10/16 · radius 4px (textarea & message 8px) · shadow/sm. */

.field-wrap{display:flex;flex-direction:column;gap:8px;width:100%;max-width:380px}
.field-grid{display:flex;flex-direction:column;gap:18px}
.field-tag{font-size:12px;color:var(--mav-muted);font-family:'Inter',sans-serif}

/* Base field */
.field{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  padding:10px 16px;
  border:1px solid var(--input-field\/default\/outline-box,#cccccc);
  background:var(--input-field\/default\/bg-box,#ffffff);
  border-radius:var(--border\/border-radius\/sm,4px);
  box-shadow:var(--shadow-input);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;line-height:20px;
  color:var(--input-field\/active\/text-active,#191919);
  transition:border-color .15s,background .15s;
}
.field input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0}
.field input::placeholder{color:var(--input-field\/default\/text-placeholder,#b2b2b2);font-weight:700}
.fi{width:20px;height:20px;flex-shrink:0;stroke:var(--icon\/subtle,#b2b2b2);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fi-24{width:24px;height:24px}

/* Sizes */
.field-sm{padding:8px 14px}
.field-lg{padding:14px 16px}

/* States */
.field.is-filled{border-color:var(--input-field\/active\/outline-box-active,#191919)}
.field.is-focus{border-color:var(--input-field\/focus\/outline-box,#352eff)}
.field.is-error{background:var(--input-field\/error\/bg-box,#ff00001a);border-color:var(--input-field\/error\/outline-box,#ff0000)}
.field.is-disabled{background:var(--input-field\/disabled\/bg-box-disabled,#efefef);border-color:var(--input-field\/disabled\/outline-box-disabled,#cccccc);cursor:not-allowed;box-shadow:none}
.field.is-disabled input{color:var(--input-field\/disabled\/text-disabled,#b2b2b2);cursor:not-allowed}
.field.is-disabled input::placeholder{color:var(--input-field\/disabled\/text-disabled,#b2b2b2)}
/* live focus for interactive inputs */
.field:focus-within:not(.is-error):not(.is-disabled){border-color:var(--input-field\/focus\/outline-box,#352eff)}

/* Error helper row */
.field-err{display:flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--input-field\/error\/label-error,#ff0000)}
.field-err .fi{stroke:var(--input-field\/error\/icon-error,#ff0000);width:20px;height:20px}

/* Leading text / prefix chunk (e.g. https://) */
.field-prefix{color:var(--mav-muted);font-weight:700;white-space:nowrap}
.field-vline{width:1px;align-self:stretch;background:var(--devider\/default,#efefef);margin:-2px 2px}

/* Label block */
.lbl-block{display:flex;flex-direction:column;gap:4px;width:100%}
.lbl-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lbl-text{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/default,#171717)}
.lbl-btn{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:var(--btn\/textonly\/default,#352eff);background:none;border:0;cursor:pointer;padding:0}
.lbl-desc{font-family:'Inter',sans-serif;font-weight:700;font-size:14px;color:var(--main-text\/description,#7f7f7f)}

/* Textarea */
.ta{
  display:block;width:100%;box-sizing:border-box;min-height:160px;resize:vertical;
  padding:12px 16px;
  border:1px solid var(--input-field\/default\/outline-box,#cccccc);
  background:var(--input-field\/default\/bg-box,#ffffff);
  border-radius:var(--border\/border-radius\/md,8px);
  box-shadow:var(--shadow-input);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;line-height:20px;
  color:var(--input-field\/active\/text-active,#191919);outline:none;transition:border-color .15s,background .15s;
}
.ta::placeholder{color:var(--input-field\/default\/text-placeholder,#b2b2b2)}
.ta:focus-within,.ta.is-focus{border-color:var(--input-field\/focus\/outline-box,#352eff)}
.ta.is-error{background:var(--input-field\/error\/bg-box,#ff00001a);border-color:var(--input-field\/error\/outline-box,#ff0000)}
.ta.is-disabled{background:var(--input-field\/disabled\/bg-box-disabled,#efefef);border-color:var(--input-field\/disabled\/outline-box-disabled,#cccccc);color:var(--input-field\/disabled\/text-disabled,#b2b2b2);cursor:not-allowed;resize:none}

/* Message input */
.msg{
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  width:100%;box-sizing:border-box;min-height:152px;
  padding:12px 16px;
  border:1px solid var(--input-field\/default\/outline-box,#cccccc);
  background:var(--input-field\/default\/bg-box,#ffffff);
  border-radius:var(--border\/border-radius\/md,8px);
  transition:border-color .15s,background .15s;
}
.msg.is-focus{border-color:var(--input-field\/focus\/outline-box,#352eff)}
.msg.is-error{background:var(--input-field\/error\/bg-box,#ff00001a);border-color:var(--input-field\/error\/outline-box,#ff0000)}
.msg.is-disabled{background:var(--input-field\/disabled\/bg-box-disabled,#efefef);border-color:var(--input-field\/disabled\/outline-box-disabled,#cccccc)}
.msg-text{flex:1;border:none;outline:none;background:transparent;resize:none;width:100%;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;line-height:20px;color:var(--input-field\/active\/text-active,#191919)}
.msg-text::placeholder{color:var(--input-field\/default\/text-placeholder,#b2b2b2)}
.msg-bar{display:flex;align-items:center;justify-content:space-between}
.msg-tools{display:flex;align-items:center;gap:8px}
.msg-icon{display:flex;align-items:center;justify-content:center;padding:6px;border-radius:8px;background:none;border:0;cursor:pointer}
.msg-icon .fi{stroke:var(--icon\/default,#171717)}
.msg-icon:hover{background:var(--mav-border)}
.msg-vline{width:1px;align-self:stretch;background:var(--devider\/default,#efefef)}
.msg-send{display:flex;align-items:center;justify-content:center;padding:6px;border-radius:var(--border\/border-radius\/sm,4px);
  background:var(--btn\/primary\/disabled,#e5e5e5);border:0;cursor:pointer;transition:background .15s}
.msg-send .fi{stroke:#ffffff}
.msg-send.on{background:var(--mav-primary,#352eff)}
[data-theme=dark] .msg-send.on{background:var(--mav-primary-dark)}
[data-theme=dark] .msg-send.on .fi{stroke:#171717}

/* ══════════ list.html ══════════ */
/* ══ List — Figma "‣ List" page (125:4920) ═══════════════════════════════════
   A flexible row: optional leading (flag / icon / soft-icon chip / avatar /
   store logo), name (+ optional subtitle), optional trailing (check / button /
   tag). Rows divide with a 1px --border/subtle rule, 16px gap. */
.list{display:flex;flex-direction:column;width:100%;max-width:400px}
.li{display:flex;align-items:center;gap:16px;padding:8px 0 16px;border-bottom:1px solid var(--border\/subtle,#efefef)}
.li:last-child{border-bottom:0}
.li-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.li-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;line-height:20px;color:var(--main-text\/default,#171717)}
.li-sub{font-family:'Plus Jakarta Sans',sans-serif;font-weight:400;font-size:12px;line-height:16px;color:var(--main-text\/description,#7f7f7f)}
.li-ic{width:24px;height:24px;flex-shrink:0;stroke:var(--icon\/default,#171717);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.li-softic{display:flex;padding:8px;border-radius:8px;background:var(--System\/Primary-soft,#352eff1a);flex-shrink:0}
.li-softic svg{width:24px;height:24px;stroke:var(--icon\/active,#352eff);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.li-avatar{width:40px;height:40px;border-radius:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:15px}
.li-flag{width:22px;height:16px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(#a51931 0 16.6%,#f4f5f8 16.6% 33.3%,#2d2a4a 33.3% 66.6%,#f4f5f8 66.6% 83.3%,#a51931 83.3%)}
.li-check{width:24px;height:24px;flex-shrink:0;stroke:var(--main-text\/default,#171717);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.li-btn{padding:6px 12px;border:1px solid var(--btn\/secondary\/default-outline,#efefef);border-radius:4px;background:transparent;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:var(--main-text\/default,#171717);cursor:pointer;flex-shrink:0}
.li-store{width:34px;height:34px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;color:#fff}
.li-tag{padding:2px 6px;border-radius:6px;background:var(--badge\ \&\ chip\/white\/bg-box,#e5e5e5);border:1px solid var(--badge\ \&\ chip\/white\/outline,#efefef);
  color:var(--badge\ \&\ chip\/white\/icon,#171717);font-family:'Inter',sans-serif;font-weight:500;font-size:12px;flex-shrink:0}
.list-card{background:var(--mav-bg,#fff);border-radius:16px;padding:24px 20px;width:100%;max-width:440px;border:1px solid var(--mav-border)}
.canvas-dark{background:var(--bc-mono900-l,#171717);border-radius:16px;padding:24px 20px;width:100%;max-width:440px}

/* ══════════ loader.html ══════════ */
/* ══ Loader — Figma "• Loader" page (85:2727) ════════════════════════════════
   Comet spinner: a rounded head + fading tail, colour --loader/spin (#352eff,
   → lime in dark). CSS-only ring built from a conic-gradient tail + a radial
   head dot, masked to a ring and rotated. Sizes lg 48 / md 32 / sm 24 / xs 16. */
.loader{
  aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(farthest-side, var(--loader\/spin,#352eff) 94%, #0000) top center/var(--lw) var(--lw) no-repeat,
    conic-gradient(#0000 25%, var(--loader\/spin,#352eff));
  -webkit-mask:radial-gradient(farthest-side, #0000 calc(100% - var(--lw)), #000 calc(100% - var(--lw)));
          mask:radial-gradient(farthest-side, #0000 calc(100% - var(--lw)), #000 calc(100% - var(--lw)));
  animation:loader-spin .8s infinite linear;
}
@keyframes loader-spin{to{transform:rotate(1turn)}}
@media (prefers-reduced-motion: reduce){ .loader{animation-duration:2.4s} }

.loader-lg{width:48px;height:48px;--lw:5px}
.loader-md{width:32px;height:32px;--lw:4px}
.loader-sm{width:24px;height:24px;--lw:3px}
.loader-xs{width:16px;height:16px;--lw:2.5px}

.loader-grid{display:flex;align-items:flex-end;gap:56px}
.loader-cell{display:flex;flex-direction:column;align-items:center;gap:16px}
.loader-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.canvas-dark{background:var(--bc-mono900-l,#171717);border-radius:16px;padding:32px 24px}

/* usage samples */
.usage-row{display:flex;gap:40px;flex-wrap:wrap;align-items:center}
.usage-btn{display:inline-flex;align-items:center;gap:10px;background:var(--mav-primary,#352eff);color:#fff;
  border:0;border-radius:8px;padding:12px 20px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px}
[data-theme=dark] .usage-btn{background:var(--mav-primary-dark);color:#171717}
.usage-btn .loader{--loader\/spin:#fff}
[data-theme=dark] .usage-btn .loader{--loader\/spin:#171717}
.usage-card{width:100%;max-width:320px;border:1px solid var(--mav-border);border-radius:16px;padding:40px;
  display:flex;flex-direction:column;align-items:center;gap:14px}
.usage-card span{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--mav-muted)}

/* ══════════ message-chat.html ══════════ */
/* ══ Message Chat — Figma "‣ Message Chat" page (229:15404) ═══════════════════
   Centred empty / status state ("Headline") for a search / contacts panel.
   Optional media (illustration · icon · loader) + title (Inter Bold 24) +
   subtitle (Inter Regular 14 #7f7f7f). gap 12px, centred, max 327px text. */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:24px 25px;text-align:center;width:100%;max-width:400px;box-sizing:border-box}
.empty-title{font-family:'Inter',sans-serif;font-weight:700;font-size:24px;line-height:1.2;color:var(--main-text\/default,#171717)}
.empty-sub{font-family:'Inter',sans-serif;font-weight:400;font-size:14px;line-height:1.4;color:var(--main-text\/description,#7f7f7f);max-width:327px}
.empty-icon{width:54px;height:54px;border-radius:50%;background:var(--mav-primary,#352eff);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.empty-icon svg{width:28px;height:28px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-theme=dark] .empty-icon{background:var(--mav-primary-dark)}
[data-theme=dark] .empty-icon svg{stroke:#171717}
.empty-loader{width:48px;height:48px;border-radius:50%;border:4px solid var(--mav-border,#ececec);border-top-color:var(--mav-primary,#352eff);animation:espin .8s linear infinite}
@keyframes espin{to{transform:rotate(360deg)}}
[data-theme=dark] .empty-loader{border-top-color:var(--mav-primary-dark)}
.empty-illus{width:150px;height:120px;flex-shrink:0}

.panel{width:100%;max-width:380px;border:1px solid var(--mav-border);border-radius:16px;overflow:hidden;background:var(--mav-bg,#fff)}
.panel-search{margin:16px;display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--input-field\/default\/outline-box,#cccccc);border-radius:4px}
.panel-search svg{width:20px;height:20px;stroke:var(--icon\/subtle,#b2b2b2);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.panel-search span{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--input-field\/default\/text-placeholder,#b2b2b2)}
.canvas-dark{background:var(--bc-mono900-l,#171717);border-radius:16px;padding:8px}
.empty-cols{display:flex;flex-wrap:wrap;gap:24px}

/* ══════════ navigation.html ══════════ */
/* ══ Navigation — Figma "• Menu/Navbar" (139:2093) ══════════════════════════
   Bottom nav bar (Home · Statistic · Cards · Profile + floating Scan), tabs,
   pill tabs, stepper, breadcrumb/header. Active = --btn/primary/default
   (→ lime in dark). A gliding indicator slides between items on tap — the
   same motion as the pagination page control: cubic-bezier(.34,1.1,.35,1).
   Gated behind prefers-reduced-motion via a shared easing var. */
.nav{--accent:var(--btn\/primary\/default,#352eff);--glide:transform .42s cubic-bezier(.34,1.1,.35,1),width .42s cubic-bezier(.34,1.1,.35,1);
  font-family:'Plus Jakarta Sans',sans-serif}
[data-theme=dark] .nav{--accent:var(--mav-primary-dark,#a1ff5b)}
@media (prefers-reduced-motion:reduce){.nav{--glide:none}}

/* phone frame — realistic phone width; fills the column, which caps at a phone-sized 340px */
.nav-phone{width:100%;max-width:390px;box-sizing:border-box;border-radius:26px;overflow:hidden;
  border:1px solid var(--mav-border,#efefef);background:var(--mav-bg,#fff);box-shadow:0 12px 30px -12px rgba(0,0,0,.2)}
.nav-screen{height:150px;background:linear-gradient(160deg,var(--background\/bg-tertiary,#e6edff),var(--mav-bg,#fff));
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--mav-muted);font-family:'Inter',sans-serif}
[data-theme=dark] .nav-screen{background:linear-gradient(160deg,#1c2140,#141414)}

/* ── bottom nav bar with gliding top-indicator ──────────────────────────── */
.bnav{position:relative;display:flex;align-items:flex-end;background:var(--mav-bg,#fff);border-top:1px solid var(--mav-border,#efefef);
  padding:8px 6px 6px}
[data-theme=dark] .bnav{background:#141414;border-top-color:#2a2a2a}
.bnav-ink{position:absolute;top:0;height:3px;width:24px;border-radius:0 0 3px 3px;background:var(--accent);left:0;transition:var(--glide);pointer-events:none}
.bnav-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:7px 2px;cursor:pointer;
  color:var(--main-text\/default,#171717);transition:color .25s ease}
[data-theme=dark] .bnav-item{color:#d0d0d0}
.bnav-item svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.34,1.3,.4,1)}
.bnav-item .lbl{font-size:11px;font-weight:400;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:font-weight .1s}
.bnav-item.on{color:var(--accent)}
.bnav-item.on .lbl{font-weight:700}
.bnav-item.on svg{transform:translateY(-1px)}
.bnav-item:active svg{transform:scale(.88)}
.bnav-item.spacer{flex:0 0 44px;pointer-events:none;visibility:hidden}
/* floating scan button */
.bnav-scan{position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;
  background:var(--accent);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -4px color-mix(in srgb,var(--accent) 55%,transparent);transition:transform .16s ease,box-shadow .2s ease}
.bnav-scan svg{width:26px;height:26px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-theme=dark] .bnav-scan svg{stroke:#171717}
.bnav-scan:hover{transform:translateX(-50%) translateY(-2px)}
.bnav-scan:active{transform:translateX(-50%) scale(.92)}
/* home indicator */
.nav-home{display:flex;justify-content:center;padding:8px 0 10px;background:var(--mav-bg,#fff)}
[data-theme=dark] .nav-home{background:#141414}
.nav-home span{width:130px;height:5px;border-radius:100px;background:#b9c0c9}

/* ── gliding underline tabs ──────────────────────────────────────────────── */
.gtabs{position:relative;display:flex;border-bottom:1px solid var(--mav-border,#efefef);max-width:520px}
.gtabs-ink{position:absolute;bottom:-1px;height:2px;background:var(--accent);left:0;width:0;transition:var(--glide);border-radius:2px}
.gtab{flex:1;background:none;border:0;padding:12px 16px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;
  color:var(--mav-muted);cursor:pointer;white-space:nowrap;transition:color .2s ease}
.gtab.on{color:var(--accent);font-weight:600}
.gtab:hover:not(.on){color:var(--main-text\/default,#171717)}
[data-theme=dark] .gtab:hover:not(.on){color:var(--mav-fg)}

/* ── gliding pill tabs ───────────────────────────────────────────────────── */
.gpills{position:relative;display:inline-flex;gap:2px;background:var(--mav-bg-secondary,#eee);padding:4px;border-radius:999px}
[data-theme=dark] .gpills{background:#242424}
.gpills-ink{position:absolute;top:4px;bottom:4px;left:0;width:0;background:var(--mav-bg,#fff);border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);transition:var(--glide)}
[data-theme=dark] .gpills-ink{background:#3a3a3a}
.gpill{position:relative;z-index:1;background:none;border:0;padding:8px 18px;border-radius:999px;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:600;font-size:13px;color:var(--mav-muted);cursor:pointer;white-space:nowrap;transition:color .2s ease}
.gpill.on{color:var(--main-text\/default,#171717)}
[data-theme=dark] .gpill.on{color:var(--mav-fg)}

/* stepper */
.step-row{display:flex;align-items:center;max-width:460px}
.step-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.step-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.step-done{background:var(--accent);color:#fff}
[data-theme=dark] .step-done{color:#171717}
.step-active{background:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
[data-theme=dark] .step-active{color:#171717}
.step-todo{background:var(--mav-border,#e5e5e5);color:var(--mav-muted)}
.step-lbl{font-size:11px;font-weight:600;color:var(--mav-muted);font-family:'Inter',sans-serif}
.step-lbl.on{color:var(--accent)}
.step-conn{flex:1;height:2px;background:var(--mav-border,#e5e5e5);margin:0 6px 22px}
.step-conn.done{background:var(--accent)}

/* header + breadcrumb */
.top-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:var(--mav-bg,#fff);
  border:1px solid var(--mav-border,#efefef);border-radius:14px;max-width:460px}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;font-family:'Inter',sans-serif;flex-wrap:wrap}
.bc-link{color:var(--accent);cursor:pointer}
.bc-sep{color:var(--mav-muted);opacity:.5}
.bc-current{color:var(--main-text\/default,#171717);font-weight:600}
[data-theme=dark] .bc-current{color:var(--mav-fg)}
.th-title{font-size:18px;font-weight:700;color:var(--main-text\/default,#171717);margin-top:4px}
[data-theme=dark] .th-title{color:var(--mav-fg)}
.th-actions{display:flex;gap:8px}
.th-icon-btn{width:38px;height:38px;border-radius:50%;background:var(--mav-bg-secondary,#efefef);display:flex;align-items:center;justify-content:center;cursor:pointer;border:0;color:var(--main-text\/default,#171717);transition:transform .12s}
[data-theme=dark] .th-icon-btn{background:#242424;color:var(--mav-fg)}
.th-icon-btn:hover{transform:translateY(-1px)}
.th-icon-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

.nav-hint{margin-top:14px;font-size:12px;color:var(--mav-muted);font-family:'Inter',sans-serif;text-align:center}
.nav-cols{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;justify-content:center}
/* each column caps at a phone width and fills the viewport on small screens; columns
   stack automatically once two no longer fit side by side */
.nav-col{flex:0 0 auto;width:min(100%,340px);display:flex;flex-direction:column;gap:10px;align-items:center}
.nav-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.canvas-dark{background:var(--main\/white,#171717);border-radius:16px;padding:28px;display:flex;flex-wrap:wrap;gap:28px;justify-content:center;align-items:center}
.canvas-dark .nav-tag{color:#9a9a9a}
.canvas-dark .nav{max-width:100%}
.canvas-dark .nav .nav-phone{width:min(340px,100%)}

/* ── responsive: give phone frames room on small screens ─────────────────── */
@media (max-width:520px){
  .preview-canvas{padding:20px 12px}
  .canvas-dark{padding:20px 14px;gap:20px}
  .nav-cols{gap:22px}
}

/* ══════════ otp.html ══════════ */
/* ══ OTP — Figma "• OTP" page (137:1116) ═════════════════════════════════════
   Two variants × five states. V1 boxed (48×48, radius 4px). V2 boxless
   (digit over a 1px underline). Plus Jakarta Sans Medium 18px, centred.
   Boxed states use the --OTP/* tokens (focus → lime in dark), error uses
   --input-field/error/*. */

.otp-rows{display:flex;flex-direction:column;gap:16px}
.otp-row{display:flex;align-items:center;gap:24px}
.otp-tag{font-size:12px;color:var(--mav-muted);font-family:'Inter',sans-serif;min-width:64px}

/* ── V1 boxed slot ─────────────────────────────────────────────────────── */
.otp{display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;box-sizing:border-box;
  border:1px solid var(--OTP\/default\/outline-box,#cccccc);
  background:var(--OTP\/default\/bg-box,#ffffff);
  border-radius:var(--border\/border-radius\/sm,4px);
  box-shadow:var(--shadow-input);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:18px;
  color:var(--OTP\/default\/text-placeholder,#b2b2b2);
  text-align:center;caret-color:var(--OTP\/focus\/outline-box,#352eff);
  outline:none;transition:border-color .15s,box-shadow .15s,background .15s;padding:0}
.otp.filled{border-color:var(--OTP\/active\/outline-box-active,#191919);color:var(--OTP\/active\/text-active,#191919)}
.otp.is-focus,.otp:focus{border-color:var(--OTP\/focus\/outline-box,#352eff);box-shadow:0 0 0 3px rgba(53,46,255,.4);color:var(--OTP\/focus\/text-placeholder,#191919)}
.otp.error{background:var(--input-field\/error\/bg-box,#ff00001a);border-color:var(--input-field\/error\/outline-box,#ff0000);color:#191919;box-shadow:none}
.otp.disabled{background:var(--OTP\/disabled\/bg-box-disabled,#efefef);border-color:var(--OTP\/disabled\/outline-box-disabled,#cccccc);color:var(--OTP\/disabled\/text-disabled,#cccccc);box-shadow:none;cursor:not-allowed}

/* ── V2 boxless slot ───────────────────────────────────────────────────── */
.otp2{display:inline-flex;flex-direction:column;align-items:center;gap:14px;width:48px}
.otp2 .d{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:18px;line-height:20px;
  color:var(--OTP\/default\/text-placeholder,#b2b2b2)}
.otp2 .u{width:100%;height:1px;background:var(--devider\/default,#efefef)}
.otp2.filled .d{color:var(--OTP\/active\/text-active,#191919)}
.otp2.filled .u{background:var(--OTP\/active\/outline-box-active,#191919)}
.otp2.is-focus .d{color:var(--OTP\/focus\/text-placeholder,#191919)}
.otp2.is-focus .u{background:var(--OTP\/focus\/outline-box,#352eff)}
.otp2.error .d{color:#191919}
.otp2.error .u{background:var(--input-field\/error\/outline-box,#ff0000)}
.otp2.disabled .d{color:var(--OTP\/disabled\/text-disabled,#cccccc)}
.otp2.disabled .u{background:var(--OTP\/disabled\/outline-box-disabled,#cccccc)}
/* keep the error digit legible on the dark-red fill in dark mode */
[data-theme=dark] .otp.error,[data-theme=dark] .otp2.error .d{color:#e5e5e5}

/* ── Groups ────────────────────────────────────────────────────────────── */
.otp-group{display:inline-flex;gap:8px;align-items:flex-start}
.otp-err-msg{display:flex;align-items:center;gap:8px;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700;font-size:14px;color:var(--input-field\/error\/label-error,#ff0000);margin-top:8px}
.otp-err-msg svg{width:20px;height:20px;stroke:var(--input-field\/error\/icon-error,#ff0000);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.otp-cols{display:flex;flex-wrap:wrap;gap:40px}
.otp-col{display:flex;flex-direction:column;gap:16px}
.otp-col-title{font-size:13px;font-weight:600;color:var(--mav-fg);font-family:'Inter',sans-serif}
.otp-state-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif;margin-bottom:6px}

/* ══════════ pagination.html ══════════ */
/* ══ Pagination — Figma "• Pagination" (203:3134) ════════════════════════════
   Break a large set across pages. Types: Button group (connected), Clear button
   (spaced), Page count (Page X of Y), and Dots. A single active indicator glides
   between pages; dots stretch into a pill; prev/next nudge on hover. The active
   fill is the primary token, re-theming blue → lime in dark. */
.pg{--pg-accent:var(--btn\/primary\/default,#352eff);--pg-on:#fff;font-family:'Plus Jakarta Sans',sans-serif}
[data-theme=dark] .pg{--pg-accent:var(--mav-primary-dark,#a1ff5b);--pg-on:#171717}

.pg-ind{position:absolute;top:4px;bottom:4px;left:0;width:0;background:var(--pg-accent);z-index:0;
  border-radius:6px;transition:transform .4s cubic-bezier(.34,1.1,.35,1),width .4s cubic-bezier(.34,1.1,.35,1),opacity .2s;pointer-events:none}

/* items shared */
.pg-item{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 16px;min-width:40px;box-sizing:border-box;border:0;background:none;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;color:var(--main-text\/default,#171717);
  transition:color .2s,background .16s,transform .12s;white-space:nowrap}
[data-theme=dark] .pg-item{color:var(--mav-fg)}
.pg-item svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.pg-item.gap{cursor:default;color:var(--main-text\/placeholder,#b2b2b2)}
.pg-item.active{color:var(--pg-on)}
.pg-item:disabled{color:var(--main-text\/placeholder,#b2b2b2);opacity:.55;cursor:not-allowed}
.pg-item.nav:hover:not(:disabled) .ic-prev{transform:translateX(-3px)}
.pg-item.nav:hover:not(:disabled) .ic-next{transform:translateX(3px)}
.pg-item:active:not(:disabled){transform:scale(.94)}

/* Button group — connected bar */
.pg-group{position:relative;display:inline-flex;align-items:stretch;background:var(--mav-bg,#fff);
  border:1px solid var(--mav-border,#efefef);border-radius:8px;overflow:hidden;
  box-shadow:0 1px 2px -1px rgba(0,0,0,.06),0 3px 6px -3px rgba(0,0,0,.06)}
.pg-group .pg-item + .pg-item{border-left:1px solid var(--mav-border,#dbdbdb)}
.pg-group .pg-num:hover:not(.active){background:var(--mav-bg-secondary,#e5e5e5)}

/* Clear button — spaced pills */
.pg-clear{position:relative;display:inline-flex;align-items:center;gap:2px}
.pg-clear .pg-ind{border-radius:10px}
.pg-clear .pg-num{border-radius:10px}
.pg-clear .pg-num:hover:not(.active){background:var(--mav-bg-secondary,#e5e5e5)}

/* Page count */
.pg-count{display:inline-flex;align-items:center;gap:20px}
.pg-count .pg-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:8px;
  border:1px solid var(--mav-border,#dbdbdb);background:var(--mav-bg,#fff);cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:500;font-size:14px;color:var(--main-text\/default,#171717);box-shadow:0 1px 2px -1px rgba(0,0,0,.06);transition:transform .12s,border-color .15s,opacity .15s}
[data-theme=dark] .pg-count .pg-btn{color:var(--mav-fg)}
.pg-count .pg-btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.pg-count .pg-btn:hover:not(:disabled){border-color:var(--pg-accent)}
.pg-count .pg-btn:hover:not(:disabled) .ic-prev{transform:translateX(-3px)}
.pg-count .pg-btn:hover:not(:disabled) .ic-next{transform:translateX(3px)}
.pg-count .pg-btn:active:not(:disabled){transform:scale(.95)}
.pg-count .pg-btn:disabled{opacity:.5;cursor:not-allowed}
.pg-count .pg-label{font-weight:700;font-size:14px;color:var(--main-text\/default,#171717);min-width:96px;text-align:center}
[data-theme=dark] .pg-count .pg-label{color:var(--mav-fg)}

/* Dots */
.pg-dots{display:inline-flex;align-items:center;gap:8px}
.pg-dot{width:8px;height:8px;border-radius:999px;background:var(--mav-border,#e5e5e5);border:0;padding:0;cursor:pointer;
  transition:width .4s cubic-bezier(.34,1.2,.35,1),background .28s}
.pg-dot:hover:not(.on){background:var(--main-text\/placeholder,#b2b2b2)}
.pg-dot.on{width:24px;background:var(--pg-accent)}

/* stage */
.pg-stage{background:var(--mav-surface,#f5f5f5);border-radius:16px;padding:36px 28px;display:flex;flex-direction:column;gap:30px;align-items:center}
.pg-cell{display:flex;flex-direction:column;gap:12px;align-items:center}
.pg-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.canvas-dark{background:var(--main\/white,#171717);border-radius:16px;padding:36px;display:flex;flex-direction:column;gap:28px;align-items:center}
.canvas-dark .pg-tag{color:#9a9a9a}

/* ══════════ progress.html ══════════ */
/* ══ Progress Bar — Figma "• Progress" page (145:939) ════════════════════════
   400×6px track, radius 8px. Fill = --shade/primary/900 (#0d00fa), track =
   --brand/primary/200 (#99c2e9), disabled track = --grey/200 (#ececec).
   Percentage / labels use Inter 14px --grey/600. */
.pbar{position:relative;width:100%;max-width:400px;height:6px;border-radius:8px;
  background:var(--brand\/primary\/200,#99c2e9);overflow:hidden}
.pbar-fill{height:6px;border-radius:8px;background:var(--shade\/primary\/900,#0d00fa);transition:width .35s ease}
.pbar.is-disabled{background:var(--grey\/200,#ececec)}

/* Row with a caption / label */
.pbar-row{display:flex;align-items:center;gap:16px;width:100%;max-width:504px}
.pbar-row .pbar{flex:1}
.pbar-label{font-family:'Inter',sans-serif;font-weight:400;font-size:14px;line-height:20px;
  color:var(--grey\/600,#5e5e5e);min-width:44px}
.pbar-label.right{text-align:right}

.pbar-stack{display:flex;flex-direction:column;gap:14px;width:100%;max-width:504px}

/* Interactive demo */
.demo-ctl{display:flex;align-items:center;gap:14px;margin-top:8px;max-width:504px}
.demo-ctl input[type=range]{flex:1}

/* ══════════ section-header.html ══════════ */
/* ══ Section Header — Figma "❖ Section Header" (270:8099) ═════════════════════
   A titled row that opens a section: a title (+ optional description) on the
   left, with an optional trailing element — a "See all" text button or an icon
   button. Sizes S/M/L, left/center alignment, default/subtle/inverted
   appearance, and a skeleton loading state. All type is Plus Jakarta Sans. */
.sh{display:flex;gap:16px;align-items:baseline;width:343px;max-width:100%;box-sizing:border-box}
.sh-main{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:4px}
.sh-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;line-height:1.2;color:var(--main-text\/default,#171717);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}
.sh-desc{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;line-height:1.35;color:var(--main-text\/description,#7f7f7f);margin:0}

/* trailing: text button */
.sh-link{flex-shrink:0;font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;
  color:var(--main-text\/brand,#352eff);text-decoration:underline;cursor:pointer;background:none;border:0;white-space:nowrap}
[data-theme=dark] .sh-link{color:var(--main-text\/brand,#a1ff5b)}
/* trailing: icon button */
.sh-ico{flex-shrink:0;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--btn\/secondary\/default-outline,#efefef)}
.sh-ico svg{width:18px;height:18px;stroke:var(--icon\/default,#171717);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
[data-theme=dark] .sh-ico{border-color:var(--mav-border)}
[data-theme=dark] .sh-ico svg{stroke:var(--mav-fg)}

/* sizes */
.sh.lg .sh-title{font-size:24px}
.sh.lg .sh-desc{font-size:16px}
.sh.md .sh-title{font-size:20px}
.sh.md .sh-desc{font-size:16px}
.sh.sm .sh-title{font-size:14px}
.sh.sm .sh-desc{font-size:14px}

/* alignment */
.sh.center{justify-content:center}
.sh.center .sh-main{flex:0 1 auto;text-align:center}

/* appearance */
.sh.subtle .sh-title{color:var(--main-text\/title-subtle,#565656)}
.sh.subtle .sh-desc{color:var(--main-text\/title-subtle,#565656)}
.sh.inverted .sh-title{color:#ffffff}
.sh.inverted .sh-desc{color:#c7c7c7}
.sh.inverted .sh-link{color:var(--mav-primary-dark,#a1ff5b)}
.sh.inverted .sh-ico{border-color:#484848}
.sh.inverted .sh-ico svg{stroke:#ffffff}

/* skeleton */
.sh.skeleton .sh-title,.sh.skeleton .sh-desc{color:transparent;border-radius:4px;background:var(--skeleton,#e3e3e380)}
.sh.skeleton .sh-title{width:60%;height:1em}
.sh.skeleton .sh-desc{width:85%;height:.9em}
.sh.skeleton .sh-link{color:transparent;background:var(--skeleton,#e3e3e380);border-radius:4px;text-decoration:none}
.sh.skeleton .sh-ico{border-color:transparent;background:var(--skeleton,#e3e3e380)}
.sh.skeleton .sh-ico svg{visibility:hidden}
[data-theme=dark]{--skeleton:#ffffff14}

/* demo stage */
.sh-stage{background:var(--mav-surface,#f5f5f5);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:22px;align-items:stretch}
.sh-row{display:flex;flex-wrap:wrap;gap:40px}
.sh-cell{display:flex;flex-direction:column;gap:10px}
.sh-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif}
.sh-card{background:var(--mav-bg,#fff);border:1px solid var(--mav-border);border-radius:12px;padding:18px}
.canvas-dark{background:var(--main\/white,#171717);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:22px}
.canvas-dark .sh-tag{color:#9a9a9a}

/* ══════════ select-account.html ══════════ */
/* ══ Select Source of Funds — Figma "Account" organism (354:1868) ════════════
   A mobile screen: top navigation, a Standard Account tile, a radio-selectable
   Accounts List (with disabled / locked rows + inline message), and a bottom
   Button Dock. Composes Radio, Section header, Account tile, and Button atoms —
   all token-driven, so the whole screen re-themes in dark. */
.phone{width:375px;max-width:100%;border-radius:36px;overflow:hidden;position:relative;
  display:flex;flex-direction:column;background:var(--background\/bg-default,var(--mav-bg,#fff));
  border:1px solid var(--mav-border);box-shadow:0 24px 60px -24px rgba(0,0,0,.4)}

/* top nav */
.statusbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 6px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15px;color:var(--main-text\/default,#171717)}
.statusbar .lvl{display:flex;gap:6px;align-items:center}
.statusbar .lvl svg{stroke:var(--main-text\/default,#171717);fill:var(--main-text\/default,#171717)}
.topnav{display:flex;align-items:center;padding:8px 8px 12px;gap:4px}
.nav-ic{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:999px;cursor:pointer}
.nav-ic svg{width:22px;height:22px;stroke:var(--main-text\/default,#171717);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nav-title{flex:1;text-align:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;color:var(--main-text\/default,#171717)}

.sof-body{padding:16px;display:flex;flex-direction:column;gap:32px}
.sec-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:20px;color:var(--main-text\/default,#171717)}
.sec-title.sm{font-size:18px;font-weight:500}
.sec-desc{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:15px;color:var(--main-text\/description,#7f7f7f);margin-top:4px}

/* cards */
.card{border:1px solid var(--account\/outline-account-primary,#efefef);border-radius:var(--border\/border-radius\/sm,4px);
  padding:16px;display:flex;flex-direction:column;gap:16px;background:var(--account\/bg-account-card,#fff)}

/* account tile (standard) */
.acct-tile{display:flex;align-items:center;gap:16px}
.avatar{width:40px;height:40px;border-radius:20px;flex-shrink:0;
  background:linear-gradient(135deg,#f76b8a,#c9457a);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Plus Jakarta Sans'}
.acct-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acct-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:16px;color:var(--account\/text-default,#171717)}
.acct-num{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--main-text\/description,#7f7f7f)}
.acct-bal{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:14px;color:var(--account\/text-default,#171717)}

/* account list rows */
.acct-row{display:flex;align-items:center;gap:16px;padding:12px 16px;box-sizing:border-box;cursor:pointer;
  border:1px solid var(--account\/outline-account-primary,#efefef);border-radius:var(--border\/border-radius\/sm,4px);
  background:var(--account\/bg-account-card,#fff);transition:border-color .15s}
.acct-row.selected{border:2px solid var(--btn\/secondary\/loading-outline,#352eff);padding:11px 15px}
.acct-row.disabled{background:var(--background\/bg-secondary,#e5e5e5);border-color:var(--btn\/secondary\/disabled-outline,#cccccc);cursor:not-allowed}
.acct-row.disabled .acct-name,.acct-row.disabled .acct-bal{color:var(--main-text\/description,#7f7f7f)}
.row-ic{width:32px;height:32px;flex-shrink:0;stroke:var(--main-text\/default,#171717);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.acct-row.disabled .row-ic{stroke:var(--main-text\/description,#7f7f7f)}
.inline-msg{display:flex;align-items:center;gap:4px;margin-top:4px;font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;color:var(--main-text\/default,#171717)}
.inline-msg svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}

/* radio */
.rdo{width:16px;height:16px;border-radius:50%;box-sizing:border-box;flex-shrink:0;
  border:2px solid var(--account\/outline-account-primary,#efefef);display:flex;align-items:center;justify-content:center}
.rdo.active{border-color:var(--icon\/active,#352eff)}
.rdo.active::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--icon\/active,#352eff)}
.rdo.disabled{border-color:var(--Radio\/Radio-Button-Secondary,#cccccc);background:var(--Radio\/Radio-Button-Secondary,#cccccc)}
.sof-list{display:flex;flex-direction:column;gap:12px}

/* button dock */
.dock{padding:16px;border-radius:32px 32px 0 0;background:var(--button-dock\/bg-dock,#fff);
  box-shadow:0 0 12px rgba(0,0,0,.08)}
.btn-dock{width:100%;padding:16px;border:0;border-radius:var(--border\/border-radius\/sm,4px);cursor:pointer;
  background:var(--btn\/primary\/default,#352eff);color:var(--btn\/primary\/text-default,#fff);
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:18px}
[data-theme=dark] .btn-dock{background:var(--mav-primary-dark);color:#171717}
.home-ind{width:135px;height:5px;border-radius:100px;background:var(--main-text\/default,#171717);margin:12px auto 4px}

.phones{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}

/* ══════════ tabs.html ══════════ */
/* ══ Tabs — Figma "‣ Tabs" page (901:22860) ══════════════════════════════════
   48px tab bar. Full-width rail (--Tabs/Tab-Default #e4ebff) with a per-tab
   active indicator (--Tabs/Tab-Active #352eff → lime in dark). Label PJS Bold
   16px, selected #171717 / unselected #b2b2b2. Variants: 2/3/4 tabs, scrollable,
   skeleton; TabItem adds disabled, notify dot, and leading icon. */
.tabs{position:relative;display:flex;width:100%;max-width:375px}
.tabs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:999px;background:var(--Tabs\/Tab-Default,#e4ebff)}
.tab{flex:1;min-width:0;height:48px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;background:none;border:0}
.tab-label{display:flex;align-items:center;gap:8px;padding:12px 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:16px;color:var(--main-text\/placeholder,#b2b2b2)}
.tab.selected .tab-label{color:var(--main-text\/default,#171717)}
.tab.selected::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:999px;background:var(--Tabs\/Tab-Active,#352eff);z-index:1}
.tab.disabled{opacity:.4;cursor:not-allowed}
.tab-ic{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tab-label .tab-ic{color:inherit}
.tab-dot{width:8px;height:8px;border-radius:50%;background:var(--mav-danger,#ff0000);border:1.5px solid var(--mav-bg,#fff);flex-shrink:0}

/* scrollable: tabs keep intrinsic width and scroll horizontally */
.tabs-scroll{overflow-x:auto;max-width:375px}
.tabs-scroll .tab{flex:0 0 auto}

/* skeleton */
.tab-skel{width:70px;height:16px;border-radius:999px;background:var(--mav-border,#e5e5e5);margin:12px 16px}

.tabs-wrap{width:100%;max-width:375px}
.tabs-tag{font-size:11px;color:var(--mav-muted);font-family:'Inter',sans-serif;margin-bottom:8px}
.tab-panel{padding:20px 4px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--mav-muted)}
.canvas-dark{background:var(--bc-mono900-l,#171717);border-radius:16px;padding:20px}
.tabs-col{display:flex;flex-direction:column;gap:28px}

/* ══════════ toast.html ══════════ */
/* ══ Toast — Figma "• Toast" page (85:5234) ══════════════════════════════════
   560px card, radius 8px, shadow/xl. Coloured icon chip (soft System/* fill),
   title (PJS Bold 14) + description (PJS Medium 14 #7f7f7f), optional text
   button + close. Colours: Primary / Red / Orange / Green. Plus a Notification
   toast (title + desc, right-side button rail). */
.toast{display:flex;align-items:center;gap:16px;width:100%;max-width:560px;box-sizing:border-box;
  background:var(--toast\/bg-default,#ffffff);border:1px solid var(--toast\/outline,#efefef);
  border-radius:8px;padding:16px;font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:0 6px 12px -6px rgba(0,0,0,.10),0 12px 24px -12px rgba(0,0,0,.08)}
.toast-lead{display:flex;align-items:flex-start;gap:16px;flex:1;min-width:0}
.toast-ic{display:flex;padding:6px;border-radius:8px;flex-shrink:0}
.toast-ic svg{width:20px;height:20px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.toast-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.toast-title{font-weight:700;font-size:14px;line-height:1.3;color:var(--toast\/text-title,#171717)}
.toast-desc{font-weight:500;font-size:14px;line-height:1.3;color:var(--toast\/text-desc,#7f7f7f)}
.toast-1line .toast-title{font-weight:500}
.toast-btn{font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;
  color:var(--btn\/textonly\/default,#352eff);background:none;border:0;cursor:pointer;flex-shrink:0;white-space:nowrap}
.toast-x{width:24px;height:24px;flex-shrink:0;stroke:var(--icon\/default,#171717);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;cursor:pointer}

.toast-primary .toast-ic{background:var(--System\/Primary-soft,#352eff1a)} .toast-primary .toast-ic svg{stroke:var(--icon\/active,#352eff)}
.toast-red    .toast-ic{background:var(--System\/Danger-soft,#ff00001a)}  .toast-red    .toast-ic svg{stroke:#ff0000}
.toast-orange .toast-ic{background:var(--System\/Warning-soft,#ff84001a)} .toast-orange .toast-ic svg{stroke:#ff8400}
.toast-green  .toast-ic{background:var(--System\/Success-soft,#629c281a)} .toast-green  .toast-ic svg{stroke:#629c28}

/* Notification toast */
.ntoast{display:flex;align-items:stretch;width:100%;max-width:480px;box-sizing:border-box;
  background:var(--toast\/bg-default,#ffffff);border:1px solid var(--toast\/outline,#efefef);
  border-radius:8px;overflow:hidden;font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:0 6px 12px -6px rgba(0,0,0,.10),0 12px 24px -12px rgba(0,0,0,.08)}
.ntoast-body{flex:1;min-width:0;padding:16px;display:flex;flex-direction:column;gap:4px}
.ntoast-title{font-weight:500;font-size:14px;color:#121212}
.ntoast-desc{font-weight:700;font-size:14px;color:#4f4f4f}
.ntoast-actions{display:flex;flex-direction:column;border-left:1px solid #ececec}
.ntoast-btn{flex:1;display:flex;align-items:center;justify-content:center;padding:0 24px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:14px;
  color:var(--btn\/textonly\/default,#352eff);background:none;border:0;cursor:pointer;white-space:nowrap}
.ntoast-actions .ntoast-btn+.ntoast-btn{border-top:1px solid #ececec}
[data-theme=dark] .ntoast-title{color:var(--mav-fg)}

.toast-stack{display:flex;flex-direction:column;gap:16px;width:100%;max-width:560px}
.spec-tag{font-size:12px;color:var(--mav-muted);font-family:'Inter',sans-serif;min-width:120px}
.spec-line{display:flex;align-items:center;gap:24px}
.canvas-dark{background:var(--bc-mono900-l,#171717);border-radius:12px;padding:24px}