/* ============================================================================
   Nzinga design system for web prototypes
   A one-to-one reproduction of the components the phone app (apps/mobile) is
   built from, so that every prototype page looks like the real app.
   Palette: Nzinga Electric (utils/color-theme.ts + app/contexts/ThemeColors.tsx).
   Type: the compact scale in apps/mobile/tailwind.config.js fontSize:
   text-xs 11/15, sm 13/18, base 15/21, lg 16/22, xl 18/24, 2xl 21/27,
   3xl 25/31, 4xl 28/34, 5xl 34/40, 6xl 44/50. Spacing is Tailwind's (1 unit =
   4px) with spacing.global = 16px; rounded-lg 8, xl 12, 2xl 16, 3xl 24.
   React Native Text with no text-* class renders at 14px with the font's own
   line height (~1.2 for SF Pro): Button labels, Section subtitles and links,
   Placeholder subtitles, Avatar initials and Input text use that default.
   Only font-outfit / font-outfit-bold use Outfit; everything else is the
   platform font.
   Source of truth: apps/mobile/components/* (Luna base; Feedy, Walley,
   Multia, Courso where noted) and components/brand/{Cowrie,Wordmark}.tsx.
   ============================================================================ */

/* ---- Tokens: utils/color-theme.ts (Tailwind vars) + app/contexts/ThemeColors.tsx (JS) */
.nz, .nz[data-theme="dark"] {
  --color-primary: #F7F7FA;
  --color-invert: #0B0B10;
  --color-secondary: #16161D;
  --color-background: #0B0B10;
  --color-darker: #000000;
  --color-text: #F7F7FA;
  --color-subtext: #A8A8B3;
  --color-highlight: #C8FF2E;                   /* Volt: action, money, accepted. Content on it is black */
  --color-accent: #C8FF2E;                      /* coloured text (Volt in dark) */
  --color-border: rgba(247, 247, 250, 0.14);
  --color-gradient: rgba(11, 11, 16, 0.7);
  --color-magenta: #FF2D7A;                     /* recording, live */
  --color-flame: #FF6A1F;                       /* warmth, warnings, withdraw */
  --color-cyan: #19E0E6;                        /* information */
  --color-violet: #7C5CFF;                      /* models, AI */
  /* ThemeColors.tsx values that have no Tailwind class */
  --color-on-highlight: #0B0B10;                /* colors.onHighlight (brand black) */
  --color-sheet: #16161D;                       /* colors.sheet: ActionSheetThemed */
  --color-placeholder: rgba(247, 247, 250, 0.4);/* colors.placeholder */
  --color-icon: #F7F7FA;                        /* colors.icon: Icon default, Chip icon */
  --color-state: rgba(247, 247, 250, 0.3);      /* colors.state */
  --color-switch: rgba(247, 247, 250, 0.4);     /* colors.switch */
  --color-chat-bg: #16161D;                     /* colors.chatBg */
  --color-gradient-js: rgba(11, 11, 16, 1);     /* colors.gradient (JS differs from the Tailwind var) */
  --tint: 18%;                                  /* StatusBadge fill: tone + alpha 2E in dark */
  color-scheme: dark;
}
.nz[data-theme="light"] {
  --color-primary: #0B0B10;
  --color-invert: #F7F7FA;
  --color-secondary: #FFFFFF;
  --color-background: #F7F7FA;
  --color-darker: #ECECF1;
  --color-text: #0B0B10;
  --color-subtext: #55555F;
  --color-highlight: #C8FF2E;
  --color-accent: #5C7A00;                      /* Volt darkened for text on light grounds */
  --color-border: rgba(11, 11, 16, 0.12);
  --color-gradient: rgba(11, 11, 16, 0.08);
  --color-magenta: #FF2D7A;
  --color-flame: #FF6A1F;
  --color-cyan: #0FA9AE;
  --color-violet: #7C5CFF;
  --color-on-highlight: #0B0B10;
  --color-sheet: #FFFFFF;
  --color-placeholder: rgba(11, 11, 16, 0.4);
  --color-icon: #0B0B10;
  --color-state: rgba(11, 11, 16, 0.3);
  --color-switch: #CFCFD6;
  --color-chat-bg: #ECECF1;
  --color-gradient-js: rgba(11, 11, 16, 0.08);
  --tint: 14%;                                  /* StatusBadge fill: tone + alpha 24 in light */
  color-scheme: light;
}
.nz {
  /* Fixed colours the app uses by name: Tailwind white/black (text-white on photos, text-black on Volt and on
     the session panels) and the brand gradient (Cowrie spectrum, RecordButton, AiCircle). */
  --white: #ffffff; --black: #000000;
  --brand-spectrum: linear-gradient(to bottom, #FF2D7A, #FF6A1F, #C8FF2E);
  --global: 20px;   /* tailwind.config.js spacing.global */
  --font-system: -apple-system, "SF Pro Text", "SF Pro Display", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-outfit: "Outfit", var(--font-system);
  font-family: var(--font-system);
  font-size: 14px;            /* RN default Text size */
  line-height: 1.2;           /* RN default: the font's own line height */
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
}
.nz *, .nz *::before, .nz *::after { box-sizing: border-box; }
.nz button, .nz input { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.nz svg { display: block; }
.nz p, .nz h1, .nz h2, .nz h3 { margin: 0; font-weight: inherit; }

/* ---- Shadows: utils/useShadow.ts shadowPresets ------------------------------- *
   getShadow defaults: shadowColor #000, shadowOpacity 0.2, shadowRadius 3.84, offset 0/2.
   iOS shadowRadius is mapped 1:1 to the CSS blur radius (react-native-web convention).
   large passes shadowColor 'rgba(0,0,0,0.2)' AND keeps shadowOpacity 0.2, so its
   effective alpha is 0.04: much softer than the other three.                      */
.nz .shadow-small  { box-shadow: 0 1px 2.5px rgba(0,0,0,.2); }
.nz .shadow-medium { box-shadow: 0 3px 5px rgba(0,0,0,.2); }
.nz .shadow-large  { box-shadow: 0 5px 20.84px rgba(0,0,0,.04); }
.nz .shadow-card   { box-shadow: 0 2px 3.84px rgba(0,0,0,.2); }
.nz .shadow-sm     { box-shadow: 0 1px 2px rgba(0,0,0,.05); }   /* NativeWind shadow-sm (Switch thumb) */

/* ---- Icon (components/Icon.tsx): Lucide, strokeWidth 2, default size 24, colour colors.text */
.nz .icon { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nz .icon-11 { width: 11px; height: 11px; } .nz .icon-12 { width: 12px; height: 12px; } .nz .icon-14 { width: 14px; height: 14px; } .nz .icon-15 { width: 15px; height: 15px; }
.nz .icon-16 { width: 16px; height: 16px; } .nz .icon-18 { width: 18px; height: 18px; }
.nz .icon-20 { width: 20px; height: 20px; } .nz .icon-22 { width: 22px; height: 22px; } .nz .icon-25 { width: 25px; height: 25px; }
.nz .icon-30 { width: 30px; height: 30px; } .nz .icon-34 { width: 34px; height: 34px; } .nz .icon-40 { width: 40px; height: 40px; }
/* Icon variant="contained" (bg-secondary) / "bordered" (border border-border), rounded-full.
   iconSize xs w-8/16 · s w-10/20 · m w-12/24 · l w-16/32 · xl w-20/40 · xxl w-24/48 (CSS names sm/md/lg = s/m/l) */
.nz .icon-box { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 9999px; }
.nz .icon-box.xs { width: 32px; height: 32px; } .nz .icon-box.xs .icon { width: 16px; height: 16px; }
.nz .icon-box.sm { width: 40px; height: 40px; } .nz .icon-box.sm .icon { width: 20px; height: 20px; }
.nz .icon-box.md { width: 48px; height: 48px; } .nz .icon-box.md .icon { width: 24px; height: 24px; }
.nz .icon-box.lg { width: 64px; height: 64px; } .nz .icon-box.lg .icon { width: 32px; height: 32px; }
.nz .icon-box.xl { width: 80px; height: 80px; } .nz .icon-box.xl .icon { width: 40px; height: 40px; }
.nz .icon-box.xxl { width: 96px; height: 96px; } .nz .icon-box.xxl .icon { width: 48px; height: 48px; }
.nz .icon-box.contained { background: var(--color-secondary); }
.nz .icon-box.bordered  { border: 1px solid var(--color-border); }
.nz .icon-box.volt { background: var(--color-highlight); color: var(--color-on-highlight); }

/* ---- Brand (components/brand/Cowrie.tsx, Wordmark.tsx; docs/logo) ------------- *
   Cowrie: an ellipse 56×80 (7:10) with a slit of rounded bars in the ground colour; eleven bars at 32px and up,
   seven below. `spectrum` fills the shell top → bottom Magenta → Flame → Volt. Wordmark: Outfit ExtraBold
   outlines with hand-set kerning (viewBox 3079 × 1000); the two-line form adds NETWORK (3079 × 1421). Both are
   drawn as SVG and never retyped as text. The prototypes build them in JS from the same geometry.            */
.nz .cowrie { display: block; flex: none; }
.nz .wordmark { display: block; flex: none; color: var(--color-text); fill: currentColor; }

/* ---- Button (components/Button.tsx) ---------------------------------------- *
   TouchableOpacity relative px-4 items-center justify-center · size small py-2 / medium py-3 /
   large py-3.5 (48pt) · rounded lg (8) default, full · label: RN Text "font-medium" at the 14px
   default, text-invert on primary, text-primary on secondary/outline/ghost · primary bg-primary ·
   secondary bg-secondary · outline border border-border bg-transparent · ghost bg-transparent ·
   disabled opacity-50 · iconStart mr-2 / iconEnd ml-2 at 16 / 18 / 20 by size.
   The Volt CTA is className="!bg-highlight" textClassName="!text-black" (iconColor onHighlight);
   the withdraw button is variant outline with "!border-flame" / "!text-flame".                     */
.nz .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 1.2; font-weight: 500; color: var(--color-primary); }
.nz .btn.w-full { display: flex; width: 100%; }
.nz .btn-primary   { background: var(--color-primary); color: var(--color-invert); }
.nz .btn-secondary { background: var(--color-secondary); }
.nz .btn-outline   { border: 1px solid var(--color-border); background: transparent; }
.nz .btn-ghost     { background: transparent; }
.nz .btn-highlight { background: var(--color-highlight); color: var(--black); }
.nz .btn-danger    { border: 1px solid var(--color-flame); color: var(--color-flame); background: transparent; }
.nz .btn-small  { padding-top: 8px;  padding-bottom: 8px; }
.nz .btn-large  { padding-top: 12px; padding-bottom: 12px; min-height: 44px; }
.nz .btn .icon { width: 18px; height: 18px; }           /* medium */
.nz .btn-small .icon { width: 16px; height: 16px; } .nz .btn-large .icon { width: 20px; height: 20px; }
.nz .btn .icon { margin-right: 8px; } .nz .btn .icon.end { margin-right: 0; margin-left: 8px; }
.nz .btn-disabled { opacity: .5; }
/* Welcome pills (app/(join)/welcome.tsx, from Luna): flex-1 flex-row items-center justify-center rounded-full
   py-4 · Sign in: border border-border, LogIn 20 colors.text · I have an invite: bg-text, Ticket 20
   colors.invert · label ml-2 text-sm font-medium                                                          */
.nz .pill-btn { display: flex; flex: 1; align-items: center; justify-content: center; padding: 12px 0; border-radius: 9999px; border: 1px solid var(--color-border); font-size: 12.5px; line-height: 17px; font-weight: 500; }
.nz .pill-btn.solid { background: var(--color-text); color: var(--color-invert); border-color: transparent; }
.nz .pill-btn .icon { width: 20px; height: 20px; margin-right: 8px; }

/* ---- Input (components/forms/Input.tsx) ------------------------------------ *
   Field is an RNTextInput at the 14px default, text-primary, bg-transparent, placeholderTextColor
   colors.placeholder (classic) / transparent (animated, underlined: the label is the placeholder) ·
   error: border-magenta + "mt-1 text-xs text-magenta" · right icon: absolute right-3, top-[18px]
   (classic top-[16px]), Icon 20 colors.text, field pr-10.
   animated (default): mb-global · field rounded-lg border px-3 py-3 h-14 · the label floats from
     top 16 / 16px / colors.placeholder to top -8 / 12px / colors.text on a colors.bg box (inline sizes,
     not text-* classes, so the compact scale does not touch them).
   classic: mb-global · label ThemedText "mb-2 font-medium" (14px) · field rounded-2xl border px-3 h-14.
     Search fields pass "!rounded-full !border-transparent !bg-secondary" (.input-field.search).
   underlined: mb-6 · field border-b-2 px-0 py-3 h-14 · label at left 0, no box.                       */
.nz .input { position: relative; margin-bottom: var(--global); }
.nz .input-field { position: relative; display: flex; align-items: center; height: 56px; padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 14px; line-height: 1.2; color: var(--color-primary); background: transparent; }
.nz .input-field .placeholder { color: var(--color-placeholder); }
.nz .input-field.pr-10 { padding-right: 40px; }
.nz .input-field.search { border-radius: 9999px; border-color: transparent; background: var(--color-secondary); }
.nz .input-label-float { position: absolute; left: 16px; top: -8px; padding: 0 8px; background: var(--color-background); font-size: 12px; line-height: 1.2; color: var(--color-text); z-index: 2; white-space: nowrap; }
.nz .input-label-rest  { position: absolute; left: 16px; top: 16px; padding: 0 8px; background: var(--color-background); font-size: 16px; line-height: 1.2; color: var(--color-placeholder); z-index: 2; white-space: nowrap; pointer-events: none; }
.nz .input.classic .input-field { border-radius: 16px; }
.nz .input-label { display: block; margin-bottom: 8px; font-weight: 500; }
.nz .input.underlined { margin-bottom: 24px; }
.nz .input.underlined .input-field { border: 0; border-bottom: 2px solid var(--color-border); border-radius: 0; padding: 12px 0; }
.nz .input.underlined .input-label-float, .nz .input.underlined .input-label-rest { left: 0; padding: 0; background: none; }
.nz .input.error .input-field { border-color: var(--color-magenta); }
.nz .input-error { margin-top: 4px; font-size: 11px; line-height: 15px; color: var(--color-magenta); }
.nz .input-field .right-icon { position: absolute; right: 12px; top: 18px; width: 20px; height: 20px; color: var(--color-text); }
.nz .input.classic .input-field .right-icon { top: 16px; }

/* ---- CodeInput (components/CodeInput.tsx, Nzinga) ---------------------------- *
   flex-row gap-2 of h-14 flex-1 rounded-lg border bg-transparent boxes over a hidden TextInput ·
   border-border, the current box border-highlight, error border-magenta · digit text-2xl font-semibold ·
   caret h-7 w-0.5 bg-highlight blinking 500 ms · error mt-2 text-xs text-magenta · disabled opacity-60  */
.nz .code-boxes { display: flex; gap: 8px; }
.nz .code-boxes span { flex: 1; height: 56px; border-radius: 8px; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 26px; font-weight: 600; }
.nz .code-boxes span.cur { border-color: var(--color-highlight); }
.nz .code-boxes span.cur:empty::after { content: ""; width: 2px; height: 28px; background: var(--color-highlight); animation: nz-caret 1s steps(1) infinite; }
.nz .code-boxes.error span { border-color: var(--color-magenta); }
@keyframes nz-caret { 50% { opacity: 0 } }

/* ---- Chip (components/Chip.tsx) ---------------------------------------------- *
   rounded-full flex-row items-center justify-center · bg-secondary, selected bg-text · label
   text-subtext, selected text-invert · xs px-1.5 py-0.5 text-xs · sm px-2 py-0.5 text-xs · md px-3 py-1
   text-sm (default) · lg px-4 py-1.5 text-base · xl px-5 py-2 text-lg · xxl px-6 py-2.5 text-xl · icon
   -ml-1 mr-2 at 12/14/16/18/20/24, colour colors.icon in both states                                 */
.nz .chip { display: inline-flex; align-items: center; justify-content: center; padding: 4px 12px; border-radius: 9999px; background: var(--color-secondary); color: var(--color-subtext); font-size: 12.5px; line-height: 17px; white-space: nowrap; }
.nz .chip.selected { background: var(--color-text); color: var(--color-invert); }
.nz .chip.xs { padding: 2px 6px; font-size: 11px; line-height: 15px; }
.nz .chip.sm { padding: 2px 8px; font-size: 11px; line-height: 15px; }
.nz .chip.lg { padding: 6px 16px; font-size: 14px; line-height: 20px; }
.nz .chip.xl { padding: 8px 20px; font-size: 15px; line-height: 21px; }
.nz .chip.xxl { padding: 10px 24px; font-size: 17px; line-height: 22px; }
.nz .chip .icon { width: 16px; height: 16px; margin-left: -4px; margin-right: 8px; color: var(--color-icon); }
.nz .chip.xs .icon { width: 12px; height: 12px; } .nz .chip.sm .icon { width: 14px; height: 14px; }
.nz .chip.lg .icon { width: 18px; height: 18px; } .nz .chip.xl .icon { width: 20px; height: 20px; } .nz .chip.xxl .icon { width: 24px; height: 24px; }
.nz .chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- ListLink (components/ListLink.tsx) -------------------------------------- *
   Pressable (hasBorder: border-b border-border) › row flex-row items-center py-5 · icon in a View mr-4,
   iconSize 18 · title text-base font-medium · description text-xs text-subtext · showChevron: View
   opacity-20 › ChevronRight 20 · disabled opacity-50 · className (px-5 in groups) lands on the row      */
.nz .list-link { display: flex; align-items: center; width: 100%; padding: 20px 0; text-align: left; }
.nz .list-link.has-border { border-bottom: 1px solid var(--color-border); }
.nz .list-link > .icon { width: 18px; height: 18px; margin-right: 16px; }
.nz .list-link .body { flex: 1; min-width: 0; }
.nz .list-link .title { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.nz .list-link .description { display: block; font-size: 11px; line-height: 15px; color: var(--color-subtext); }
.nz .list-link .chevron { width: 20px; height: 20px; opacity: .2; }
.nz .list-link.disabled { opacity: .5; }

/* ---- Header (components/Header.tsx, variant default) ------------------------- *
   w-full flex-row justify-between bg-background px-global pb-3, paddingTop insets.top · left side flex-1
   flex-row items-center: back TouchableOpacity mr-global py-4 › ArrowLeft 24 colors.icon; title View py-4
   › Text text-lg font-bold text-primary (a leftComponent replaces the title, without the py-4 View) ·
   middleComponent flex-1 py-4 centred (Home: the Wordmark at 92) · right side flex-1 justify-end, each
   item ml-6 · HeaderIcon: h-7 w-7, Icon 25, hasBadge: h-4 w-4 rounded-full border-2 border-border
   bg-magenta at -top-0 -right-[3px]                                                                  */
.nz .header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--global) 12px; background: var(--color-background); }
.nz .header .side { display: flex; align-items: center; flex: 1; min-width: 0; }
.nz .header .side.right { justify-content: flex-end; }
.nz .header .middle { display: flex; align-items: center; justify-content: center; flex: 1; padding: 16px 0; }
.nz .header .back { display: flex; align-items: center; padding: 16px 0; margin-right: var(--global); }
.nz .header .title { padding: 16px 0; font-size: 15px; line-height: 21px; font-weight: 700; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz .header .item { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 24px; position: relative; }
.nz .header .item .icon { width: 25px; height: 25px; }
.nz .header .item .badge { position: absolute; right: -3px; top: 0; width: 16px; height: 16px; border-radius: 9999px; border: 2px solid var(--color-border); background: var(--color-magenta); z-index: 1; }
.nz .header .item.wide { width: auto; }
/* variant="transparent": absolute top, LinearGradient rgba(0,0,0,.6) → .3 → transparent, pt-4 pb-10, white title */
.nz .header.transparent { position: absolute; left: 0; right: 0; top: 0; z-index: 100; padding: 16px calc(2 * var(--global)) 40px; background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.3), transparent); }
.nz .header.transparent .back { padding: 0; }
.nz .header.transparent .title { padding: 0; color: var(--white); }
.nz .header.transparent .back .icon { color: var(--white); }
/* Recording screen leftComponent: rounded-full border bg-background px-3 py-1.5, a breathing h-2.5 w-2.5
   magenta dot (subtext when paused) mr-2, text-sm font-semibold "Recording" / "Paused"                      */
.nz .live-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 9999px; border: 1px solid var(--color-border); background: var(--color-background); font-size: 12.5px; line-height: 17px; font-weight: 600; }
.nz .live-pill i { width: 10px; height: 10px; margin-right: 8px; border-radius: 9999px; background: var(--color-magenta); animation: nz-breathe 1.4s ease-in-out infinite; }
.nz .live-pill.paused i { background: var(--color-subtext); animation: none; }
@keyframes nz-breathe { 50% { opacity: .25 } }

/* ---- Section (components/layout/Section.tsx) --------------------------------- *
   w-full · title ThemedText font-bold at titleSize sm text-sm / md text-base / lg text-lg / xl (default)
   text-xl / 2xl / 3xl / 4xl · link ThemedText text-primary underline (14px default) in a w-full
   justify-between row · subtitle ThemedText text-subtext (14px default) · icon 24 mr-4               */
.nz .section { width: 100%; }
.nz .section-head { display: flex; align-items: center; }
.nz .section-title { display: flex; align-items: center; justify-content: space-between; width: 100%; font-weight: 700; font-size: 17px; line-height: 22px; }
.nz .section-title.sm { font-size: 12.5px; line-height: 17px; }
.nz .section-title.md, .nz .section-title.base { font-size: 14px; line-height: 20px; }
.nz .section-title.lg { font-size: 15px; line-height: 21px; } .nz .section-title.\32xl { font-size: 20px; line-height: 26px; }
.nz .section-title.\33xl { font-size: 23px; line-height: 29px; } .nz .section-title.\34xl { font-size: 26px; line-height: 32px; }
.nz .section-title .link { font-size: 14px; line-height: 1.2; font-weight: 400; color: var(--color-primary); text-decoration: underline; }
.nz .section-subtitle { color: var(--color-subtext); font-size: 14px; line-height: 1.2; }
.nz .section-icon { margin-right: 16px; }
.nz .section.p-sm { padding: 8px 0; } .nz .section.p-md { padding: 16px 0; } .nz .section.p-lg { padding: 24px 0; } .nz .section.p-xl { padding: 32px 0; }

/* ---- Avatar (components/Avatar.tsx) ------------------------------------------ *
   rounded-full bg-secondary items-center justify-center · xxs 28 · xs 32 · sm 40 · md 48 (default) ·
   lg 64 · xl 80 · xxl 96 · border: border-2 border-border · initials text-center font-medium at 14px  */
.nz .avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 9999px; background: var(--color-secondary); overflow: hidden; font-size: 14px; line-height: 1.2; font-weight: 500; text-align: center; }
.nz .avatar.xxs { width: 28px; height: 28px; } .nz .avatar.xs { width: 32px; height: 32px; }
.nz .avatar.sm  { width: 40px; height: 40px; } .nz .avatar.md { width: 48px; height: 48px; }
.nz .avatar.lg  { width: 64px; height: 64px; } .nz .avatar.xl { width: 80px; height: 80px; }
.nz .avatar.xxl { width: 96px; height: 96px; }
.nz .avatar.bordered { border: 2px solid var(--color-border); }
.nz .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 9999px; }

/* ---- Switch (components/forms/Switch.tsx) ------------------------------------ *
   row flex-row items-center py-1 · optional icon View mr-3, Icon 20 · body flex-1: label text-base
   font-medium, description text-sm text-subtext · track h-6 w-10 rounded-full, off bg-secondary / on
   bg-highlight · thumb my-0.5 h-5 w-5 rounded-full bg-white shadow-sm, translateX 1 → 17.67            */
.nz .switch-row { display: flex; align-items: center; padding: 4px 0; }
.nz .switch-row > .icon { width: 20px; height: 20px; margin-right: 12px; }
.nz .switch-row .body { flex: 1; min-width: 0; padding-right: 8px; }
.nz .switch-row .label { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.nz .switch-row .description { display: block; font-size: 12.5px; line-height: 17px; color: var(--color-subtext); }
.nz .switch { position: relative; width: 40px; height: 24px; border-radius: 9999px; background: var(--color-secondary); flex: none; }
/* Prototype aid, not in the source: an off track is bg-secondary, which vanishes inside a bg-secondary card, so it gets a hairline */
.nz .card-group .switch, .nz .bg-secondary .switch { box-shadow: inset 0 0 0 1px var(--color-border); }
.nz .switch::after { content: ""; position: absolute; top: 2px; left: 0; transform: translateX(1px); width: 20px; height: 20px; border-radius: 9999px; background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: transform .2s; }
.nz .switch[aria-checked="true"] { background: var(--color-highlight); box-shadow: none; }
.nz .switch[aria-checked="true"]::after { transform: translateX(17.67px); }

/* ---- Expandable (components/Expandable.tsx) ---------------------------------- *
   wrapper border-b border-border · row flex-row items-center py-5 · icon View mr-3, Icon 24 · title
   text-base font-medium · description text-sm text-subtext · ChevronDown 20 rotating 180° · content View
   px-4 pb-4 pt-4 (children: "text-sm leading-6 text-subtext")                                         */
.nz .expandable { border-bottom: 1px solid var(--color-border); }
.nz .expandable-row { display: flex; align-items: center; width: 100%; padding: 20px 0; text-align: left; }
.nz .expandable-row > .icon:first-child { width: 24px; height: 24px; margin-right: 12px; }
.nz .expandable-row .body { flex: 1; min-width: 0; }
.nz .expandable-row .title { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.nz .expandable-row .description { display: block; font-size: 12.5px; line-height: 17px; color: var(--color-subtext); }
.nz .expandable-row .chevron { width: 20px; height: 20px; transition: transform .3s; margin-left: 8px; }
.nz .expandable[data-open="true"] .chevron { transform: rotate(180deg); }
.nz .expandable-content { padding: 16px; font-size: 13px; line-height: 24px; color: var(--color-subtext); }

/* ---- ThemeTabs (components/ThemeTabs.tsx) ------------------------------------ *
   bar h-[48px] flex-row border-b border-border bg-background · fixed: each tab flex-1 px-3 · scrollview:
   px-4, content width · label text-base, active text-accent · indicator absolute bottom-0 h-[2px] w-full
   bg-highlight                                                                                         */
.nz .theme-tabs { display: flex; height: 48px; border-bottom: 1px solid var(--color-border); background: var(--color-background); }
.nz .theme-tab { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 14px; line-height: 20px; color: var(--color-primary); white-space: nowrap; }
.nz .theme-tabs.scroll { overflow-x: auto; scrollbar-width: none; }
.nz .theme-tabs.scroll::-webkit-scrollbar { display: none; }
.nz .theme-tabs.scroll .theme-tab { flex: none; padding: 0 16px; }
.nz .theme-tab.active { color: var(--color-accent); }
.nz .theme-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-highlight); }

/* ---- Tab bar ((tabs)/_layout.tsx from Feedy + components/TabButton.tsx) -------- *
   TabList alignItems center, bg colors.bg, paddingBottom insets.bottom (prototype 20px) · TabButton
   w-1/5 › items-center pt-4 · icon 24 (stroke 2.5 focused), wrapper opacity-40 unless focused · label
   mt-px text-[9px] text-text, labelAnimated: hidden (opacity 0, translateY 10) unless focused · badge
   absolute -right-1.5 -top-1 h-3 w-3 rounded-full bg-magenta · centre slot: View w-1/5 items-center pt-4 ›
   Pressable h-10 w-10 rounded-full bg-highlight › Mic 18 colors.onHighlight (pushes /screens/record)  */
.nz .tab-bar { display: flex; align-items: center; background: var(--color-background); padding-bottom: 20px; flex: none; }
.nz .tab-button { position: relative; width: 20%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 16px; }
.nz .tab-button > .icon { opacity: .4; }
.nz .tab-button .label { margin-top: 1px; font-size: 9px; line-height: 12px; color: var(--color-text); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.nz .tab-button.focused > .icon { opacity: 1; stroke-width: 2.5; }
.nz .tab-button.focused .label, .nz .tab-button.label-static .label { opacity: 1; transform: none; }
.nz .tab-button .dot { position: absolute; right: calc(50% - 18px); top: 12px; width: 12px; height: 12px; border-radius: 9999px; background: var(--color-magenta); z-index: 1; }
.nz .tab-slot { width: 20%; display: flex; align-items: center; justify-content: center; align-self: center; padding-top: 16px; }
.nz .tab-record { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: var(--color-highlight); color: var(--color-on-highlight); }
.nz .tab-record .icon { width: 18px; height: 18px; }

/* ---- MultiStep (components/MultiStep.tsx, from Feedy) --------------------------- *
   Header: leftComponent ArrowLeft 24 in a py-4 Pressable (not on the first step); rightComponents: X 24 in
   a rounded-full p-2 Pressable (onClose) and a ghost small "Skip" Button on optional steps · step line
   "mb-8 w-full px-global": ProgressBar segments (one per step, or the whole setup), h 4, gap-1,
   rounded-full, track bg-border, fill bg-highlight · footer px-global py-3 › optional "mb-2 text-center
   text-xs text-magenta" error › Pressable rounded-full bg-highlight py-5 › Text text-base font-semibold
   text-black (opacity-50 while disabled). Setup screens outside the wizard use SetupProgress
   (px-global pb-2, the same line).                                                                      */
.nz .multistep-head { display: flex; align-items: center; padding: 0 var(--global) 12px; background: var(--color-background); }
.nz .multistep-head .back { display: flex; align-items: center; padding: 16px 0; }
.nz .multistep-head .close { display: flex; align-items: center; padding: 8px; border-radius: 9999px; margin-left: auto; }
.nz .multistep-head .skip { margin-left: auto; padding: 8px 16px; font-size: 14px; font-weight: 500; }
.nz .multistep-progress { display: flex; width: 100%; height: 4px; gap: 4px; }
.nz .multistep-progress > span { flex: 1; height: 100%; border-radius: 9999px; background: var(--color-border); overflow: hidden; }
.nz .multistep-progress > span.done { background: var(--color-highlight); }
.nz .multistep-steps { margin-bottom: 32px; padding: 0 var(--global); }
.nz .setup-progress { padding: 0 var(--global) 8px; }
.nz .multistep-foot { padding: 12px var(--global); }
.nz-phone .multistep-foot { padding-bottom: 30px; }   /* prototype: MultiStep pads insets.bottom */
.nz .multistep-next { display: flex; width: 100%; align-items: center; justify-content: center; padding: 20px 0; border-radius: 9999px; background: var(--color-highlight); color: var(--black); font-size: 14px; line-height: 20px; font-weight: 600; }
.nz .multistep-next.disabled { opacity: .5; }

/* ---- TipCard (components/TipCard.tsx, Luna's chat-home card) -------------------- *
   Pressable mb-2 min-h-[44px] flex-row items-center rounded-3xl border border-border bg-background ·
   md p-3: icon box h-7 w-7 rounded-xl bg-secondary, Icon 15 · lg p-4: box h-10 w-10, Icon 20 · the icon
   and label take the tone (text, accent, cyan, violet, magenta, flame); the card never changes colour ·
   body ml-3 mr-1 flex-1: label mb-0.5 text-[11px] font-semibold uppercase tracking-wider · title md
   text-sm font-semibold / lg text-base font-semibold leading-6 · note mt-0.5 text-xs text-subtext ·
   rightIcon h-9 w-9 centred, Icon 18 colors.subtext                                                     */
.nz .tip-card { display: flex; align-items: center; min-height: 44px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-background); text-align: left; --tone: var(--color-text); }
.nz .tip-card .icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 12px; background: var(--color-secondary); flex: none; color: var(--tone); }
.nz .tip-card .icon-wrap .icon { width: 15px; height: 15px; }
.nz .tip-card .body { flex: 1; min-width: 0; margin: 0 4px 0 12px; }
.nz .tip-card .label { display: block; margin-bottom: 2px; font-size: 11px; line-height: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tone); }
.nz .tip-card .text { display: block; font-size: 12.5px; line-height: 17px; font-weight: 600; }
.nz .tip-card .note { display: block; margin-top: 2px; font-size: 11px; line-height: 15px; color: var(--color-subtext); }
.nz .tip-card .right { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; color: var(--color-subtext); }
.nz .tip-card .right .icon { width: 18px; height: 18px; }
.nz .tip-card.lg { padding: 16px; }
.nz .tip-card.lg .icon-wrap { width: 40px; height: 40px; }
.nz .tip-card.lg .icon-wrap .icon { width: 20px; height: 20px; }
.nz .tip-card.lg .text { font-size: 15px; line-height: 24px; }
.nz .tip-card.t-highlight { --tone: var(--color-accent); } .nz .tip-card.t-cyan { --tone: var(--color-cyan); }
.nz .tip-card.t-violet { --tone: var(--color-violet); } .nz .tip-card.t-magenta { --tone: var(--color-magenta); }
.nz .tip-card.t-flame { --tone: var(--color-flame); }
.nz .tip-card.clamp2 .text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nz .tip-cards { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; }

/* CardScroller (components/CardScroller.tsx): horizontal ScrollView -mx-global px-global,
   columnGap = space (default 10), trailing h-px w-4 spacer                                       */
.nz .card-scroller { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(-1 * var(--global)); padding: 0 var(--global); scrollbar-width: none; }
.nz .card-scroller::-webkit-scrollbar { display: none; }
.nz .card-scroller > * { flex: none; }
.nz .card-scroller::after { content: ""; flex: none; width: 16px; height: 1px; }

/* ---- ConsentOption (components/ConsentOption.tsx, from Feedy's SubscriptionCard) ----- *
   Pressable relative mb-3 flex-row items-center rounded-2xl border bg-secondary, border-highlight when
   active else border-transparent, disabled opacity-60 · inner flex-1 px-4 py-3.5 · radio: Check 14
   stroke 3 in a mr-3 h-6 w-6 rounded-full border (active border-highlight bg-highlight, black check;
   else border-border, transparent check) · title text-base font-semibold · "Suggested" ml-2 rounded-full
   bg-background px-2 py-0.5 text-xs font-semibold text-accent · description mt-0.5 text-sm text-subtext ·
   pay line mt-2: Coins / CircleOff 14 + ml-1.5 text-xs font-medium (accent when paid, else subtext) ·
   choice icon ml-3 opacity-60, 20                                                                       */
.nz .plan-card { position: relative; display: flex; align-items: center; width: 100%; margin-bottom: 12px; border: 1px solid transparent; border-radius: 16px; background: var(--color-secondary); text-align: left; }
.nz .plan-card.active { border-color: var(--color-highlight); }
.nz .plan-card.disabled { opacity: .6; }
.nz .plan-card .inner { display: flex; align-items: center; flex: 1; min-width: 0; padding: 14px 16px; }
.nz .plan-card .radio { width: 24px; height: 24px; margin-right: 12px; border-radius: 9999px; border: 1px solid var(--color-border); flex: none; display: flex; align-items: center; justify-content: center; color: transparent; }
.nz .plan-card.active .radio { border-color: var(--color-highlight); background: var(--color-highlight); color: var(--black); }
.nz .plan-card .radio .icon { width: 14px; height: 14px; stroke-width: 3; }
.nz .plan-card .text { flex: 1; min-width: 0; }
.nz .plan-card .title { display: flex; align-items: center; flex-wrap: wrap; font-size: 14px; line-height: 20px; font-weight: 600; }
.nz .plan-card .badge { margin-left: 8px; padding: 2px 8px; border-radius: 9999px; background: var(--color-background); font-size: 11px; line-height: 15px; font-weight: 400; color: var(--color-subtext); border: 1px solid var(--color-border); background: transparent; }
.nz .plan-card .description { display: block; margin-top: 2px; font-size: 12.5px; line-height: 17px; color: var(--color-subtext); }
.nz .plan-card .pay { display: flex; align-items: center; margin-top: 8px; font-size: 11px; line-height: 15px; font-weight: 500; color: var(--color-subtext); }
.nz .plan-card .pay.paid { color: var(--color-subtext); }
.nz .plan-card .pay .icon { width: 14px; height: 14px; margin-right: 6px; }
.nz .plan-card .choice-icon { margin-left: 12px; opacity: .6; width: 20px; height: 20px; }
.nz .plan-card .trailing { margin-left: auto; font-size: 15px; line-height: 21px; }

/* ---- AudioPlayerBar (components/AudioPlayerBar.tsx, in Luna's ChatInput box) ------- *
   flex-row items-center rounded-[25px] border border-border bg-background px-3 py-3 + shadowPresets.card ·
   play h-11 w-11 rounded-full bg-primary › Play/Pause 18 colors.invert · bars ml-3 h-11 flex-1, 36 bars
   mx-px rounded-sm (played colors.highlight, else colors.subtext at .45) · time ml-3 min-w-[36px]
   text-right text-xs text-subtext tabular-nums · no file on this phone: ml-3 flex-1 text-xs text-subtext  */
.nz .chat-input { position: relative; border: 1px solid var(--color-border); border-radius: 25px; background: var(--color-background); box-shadow: 0 2px 3.84px rgba(0,0,0,.2); }
.nz .audio-player { display: flex; align-items: center; padding: 12px; }
.nz .audio-player .play { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; background: var(--color-primary); color: var(--color-invert); flex: none; }
.nz .audio-player .play .icon { width: 18px; height: 18px; }
.nz .audio-player .bars { display: flex; align-items: center; flex: 1; height: 44px; margin-left: 12px; }
.nz .audio-player .bars i { flex: 1; margin: 0 1px; border-radius: 2px; background: var(--color-subtext); opacity: .45; }
.nz .audio-player .bars i.on { background: var(--color-highlight); opacity: 1; }
.nz .audio-player .time { margin-left: 12px; min-width: 36px; text-align: right; font-size: 11px; line-height: 15px; color: var(--color-subtext); font-variant-numeric: tabular-nums; }
/* Recording controls (app/screens/recording.tsx): the same box, flex-row justify-center gap-4 p-4 · Pause/Play
   20 and Trash2 20 in h-11 w-11 rounded-full bg-secondary · Done: h-11 min-w-[120px] rounded-full bg-highlight
   px-6 gap-2 › Check 16 stroke 3 black + text-sm font-semibold text-black                                   */
.nz .record-controls { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px; }
.nz .round-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; flex: none; background: var(--color-secondary); }
.nz .round-btn.primary { background: var(--color-primary); color: var(--color-invert); }
.nz .round-btn .icon { width: 20px; height: 20px; }
.nz .done-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 120px; padding: 0 24px; border-radius: 9999px; background: var(--color-highlight); color: var(--black); font-size: 12.5px; line-height: 17px; font-weight: 600; }
.nz .done-pill .icon { width: 16px; height: 16px; stroke-width: 3; }
/* Recording LevelMeter: scrolling bars mx-px flex-1 rounded-full, magenta while live (opacity .35 → 1 left to
   right), subtext at .35 when paused · the waves.json Lottie stands in when the phone gives no levels      */
.nz .wave { display: flex; align-items: center; height: 56px; }
.nz .wave i { flex: 1; margin: 0 1px; background: var(--color-magenta); border-radius: 9999px; min-height: 3px; }
.nz .wave.live i { animation: nz-bob 1s ease-in-out infinite; }
@keyframes nz-bob { 0%,100% { transform: scaleY(.45) } 50% { transform: scaleY(1) } }

/* ---- RecordButton (components/RecordButton.tsx, on Luna's AiCircle) ------------------ *
   outer size × size (record.tsx: 200) · ring round(size × 0.56) bg-background + shadowPresets.large ·
   LinearGradient ring − 12, top → bottom brand Magenta → Flame → Volt · disc ring − 20 bg-background with a
   transparent → rgba(255,255,255,0.1) overlay · Icon Mic at round(disc × 0.3), strokeWidth 1.2, colors.text
   (magenta while live) · live: the ring breathes 1 → 1.06 and speaking.json plays over it at opacity 0.2 ·
   AiCircle itself (250 / 140 / 128 / 120, icon 34) uses the same three brand colours.                   */
.nz .ai-circle { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.nz .ai-circle .ring { position: relative; z-index: 1; width: 112px; height: 112px; border-radius: 9999px; background: var(--color-background); box-shadow: 0 5px 20.84px rgba(0,0,0,.04); display: flex; align-items: center; justify-content: center; }
.nz .ai-circle .ring::before { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 9999px; background: var(--brand-spectrum); }
.nz .ai-circle .disc { position: relative; width: 92px; height: 92px; border-radius: 9999px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.1)), var(--color-background); color: var(--color-text); display: flex; align-items: center; justify-content: center; }
.nz .ai-circle .disc .icon { width: 28px; height: 28px; stroke-width: 1.2; }
.nz .ai-circle.live .ring { animation: nz-pulse 1.8s ease-in-out infinite; }
.nz .ai-circle.live .disc { color: var(--color-magenta); }
.nz .ai-circle.live::after { content: ""; position: absolute; inset: 0; border-radius: 9999px; border: 2px solid var(--color-text); opacity: .2; animation: nz-speaking 1.6s ease-out infinite; pointer-events: none; }
@keyframes nz-pulse { 50% { transform: scale(1.06) } }
@keyframes nz-speaking { 0% { transform: scale(.6); opacity: .2 } 100% { transform: scale(1); opacity: 0 } }
.nz .ai-circle.luna { width: 250px; height: 250px; }
.nz .ai-circle.luna .ring { width: 140px; height: 140px; } .nz .ai-circle.luna .ring::before { width: 128px; height: 128px; }
.nz .ai-circle.luna .disc { width: 120px; height: 120px; } .nz .ai-circle.luna .disc .icon { width: 34px; height: 34px; }

/* ---- Cards ------------------------------------------------------------------- */
/* Bordered card (Luna profile.tsx header card; invite, privacy notes): rounded-3xl border border-border,
   no fill. Profile: px-6 py-10 › Avatar xl, mt-3 name text-2xl font-bold, text-sm text-subtext lines       */
.nz .card-outline { border: 1px solid var(--color-border); border-radius: 24px; padding: 40px 24px; background: transparent; }
/* List group (Luna profile.tsx): rounded-3xl bg-secondary + shadowPresets.medium, ListLink className px-5 */
.nz .card-group { border-radius: 24px; background: var(--color-secondary); box-shadow: 0 3px 5px rgba(0,0,0,.2); }
.nz .card-group.flat { box-shadow: none; }
.nz .card-group > .list-link, .nz .card-group > .switch-row { padding-left: 20px; padding-right: 20px; }
/* Info note (payout, payout-method, transaction): flex-row rounded-2xl bg-secondary p-4 › Icon 18 ›
   ml-3 flex-1 text-sm text-subtext                                                                        */
.nz .info-note { display: flex; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--color-secondary); font-size: 12.5px; line-height: 17px; color: var(--color-subtext); }
.nz .info-note > .icon { width: 18px; height: 18px; margin-right: 12px; color: var(--color-text); }
.nz .info-note.outline { background: transparent; border: 1px solid var(--color-border); border-radius: 24px; font-size: 11px; line-height: 20px; }
/* StatCard (components/StatCard.tsx, from Multia): CustomCard rounded-2xl bg-secondary p-global · title
   text-sm text-subtext (1 line) · value text-xl font-bold in a tone (default text, accent, cyan, magenta,
   violet) · caption text-xs text-subtext (2 lines) · icon: ml-2 h-8 w-8 rounded-full bg-background ›
   Icon 16 subtext · href: ChevronRight 16 subtext · trend pill mr-auto mt-10 rounded-full border bg-background
   px-3 py-1 › TrendingUp/Down 14 + ml-1 text-xs (accent up, magenta down)                                  */
.nz .stat-card { border-radius: 16px; padding: 16px; background: var(--color-secondary); min-width: 0; }
.nz .stat-card .top { display: flex; align-items: flex-start; justify-content: space-between; }
.nz .stat-card .label { display: block; font-size: 12.5px; line-height: 17px; color: var(--color-subtext); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz .stat-card .value { display: block; font-size: 17px; line-height: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz .stat-card .caption { display: block; font-size: 11px; line-height: 15px; color: var(--color-subtext); }
.nz .stat-card .icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 8px; border-radius: 9999px; background: var(--color-background); color: var(--color-subtext); flex: none; }
.nz .stat-card .icon-tile .icon { width: 16px; height: 16px; }
.nz .stat-card .value.accent { color: var(--color-accent); } .nz .stat-card .value.cyan { color: var(--color-cyan); }
.nz .stat-card .value.magenta { color: var(--color-magenta); } .nz .stat-card .value.violet { color: var(--color-violet); }
.nz .stat-card .trend { display: inline-flex; align-items: center; margin: 40px auto 0 0; padding: 4px 12px; border-radius: 9999px; border: 1px solid var(--color-border); background: var(--color-background); font-size: 11px; line-height: 15px; color: var(--color-accent); }
.nz .stat-card .trend.down { color: var(--color-magenta); }
.nz .stat-card .trend .icon { width: 14px; height: 14px; margin-right: 4px; }
/* Luna components/Card.tsx (present, unused by the screens): bg-secondary rounded-lg, image 200, body p-3:
   title mb-2 text-sm font-semibold, description text-xs text-subtext, price text-sm font-bold, rating 16 +
   text-xs font-semibold, button small mt-3 · badge absolute right-2 top-2 rounded-full px-2 py-1 bg #000
   text-xs font-medium text-white · overlay: transparent → rgba(0,0,0,0.3), caption p-4 text-white           */
.nz .card { display: flex; flex-direction: column; width: 100%; border-radius: 8px; background: var(--color-secondary); overflow: hidden; text-align: left; }
.nz .card.rounded-2xl { border-radius: 16px; }
.nz .card.has-shadow { box-shadow: 0 2px 3.84px rgba(0,0,0,.2); }
.nz .card .media { position: relative; width: 100%; height: 200px; background: var(--color-darker); }
.nz .card .badge { position: absolute; right: 8px; top: 8px; padding: 4px 8px; border-radius: 9999px; background: var(--black); font-size: 11px; line-height: 15px; font-weight: 500; color: var(--white); }
.nz .card .body { display: flex; flex-direction: column; flex: 1; padding: 12px; }
.nz .card .title { margin-bottom: 8px; font-size: 12.5px; line-height: 17px; font-weight: 600; }
.nz .card .description { font-size: 11px; line-height: 15px; color: var(--color-subtext); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz .card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.nz .card .price { font-size: 12.5px; line-height: 17px; font-weight: 700; }
.nz .card .rating { display: flex; align-items: center; font-size: 11px; line-height: 15px; font-weight: 600; }
.nz .card .rating .icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.nz .card .body .btn { margin-top: 12px; }
.nz .card.overlay .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.3)); }
.nz .card.overlay .caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; z-index: 1; color: var(--white); }
.nz .card.overlay .caption .title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--white); }
.nz .card.overlay .caption .description { color: var(--white); }

/* ---- FlipBalance (components/FlipBalance.tsx, from Walley) --------------------------- *
   flex-row items-center · every digit a 48pt-high overflow-hidden window holding the digit and "•" one above
   the other; hiding slides each up 48 (280 ms, cubic out, 30 ms stagger) · text-4xl font-bold, lineHeight 48 ·
   symbols, commas and dots stay put · read as one label ("Available balance $26.20" / "... hidden")       */
.nz .flip-balance { display: flex; align-items: center; font-size: 28px; line-height: 48px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nz .flip-balance .d { display: inline-block; height: 48px; overflow: hidden; text-align: center; }
.nz .flip-balance .d > span { display: flex; flex-direction: column; transition: transform .28s cubic-bezier(.33,1,.68,1); }
.nz .flip-balance .d > span > b { height: 48px; font-weight: inherit; }
.nz .flip-balance.hidden .d > span { transform: translateY(-48px); }
/* Wallet's week pill beside it: ml-4 rounded-full bg-highlight px-2 py-1 › text-sm font-semibold text-black */
.nz .volt-pill { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 9999px; background: var(--color-highlight); color: var(--black); font-size: 12.5px; line-height: 17px; font-weight: 600; white-space: nowrap; }
.nz .volt-pill.xs { padding: 4px 10px; font-size: 11px; line-height: 15px; }

/* ---- BalanceChart (components/BalanceChart.tsx, from Walley) ------------------------- *
   react-native-chart-kit LineChart, height 220, transparent background, bezier line and fill in
   colors.highlight (fill opacity .25), dashed grid keyed off isDark, y labels via formatYLabel; Wallet
   reveals it by widening its window from 0 to the screen width over 2 s on focus. Prototypes draw an SVG. */
.nz .balance-chart { display: block; width: 100%; height: 160px; }
.nz .balance-chart .grid { stroke: var(--color-border); stroke-dasharray: 3 4; }
.nz .balance-chart .line { fill: none; stroke: var(--color-highlight); stroke-width: 2.5; }
.nz .balance-chart .area { fill: var(--color-highlight); opacity: .25; }
.nz .balance-chart text { fill: var(--color-subtext); font-size: 10px; }
.nz .reveal { animation: nz-reveal 2s cubic-bezier(.25,.1,.25,1) both; }
@keyframes nz-reveal { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }

/* ---- ActionButton (components/ActionButton.tsx, from Walley) -------------------------- *
   Pressable min-w-[70px] flex-col items-center · circle h-16 w-16 rounded-full: highlight bg-highlight with
   Icon 24 in colors.onHighlight, secondary border border-border bg-secondary with colors.text · label mt-2
   text-center text-sm font-semibold (2 lines) · disabled opacity-50                                        */
.nz .action-btn { display: flex; flex-direction: column; align-items: center; min-width: 70px; text-align: center; }
.nz .action-btn .circle { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 9999px; background: var(--color-highlight); color: var(--color-on-highlight); }
.nz .action-btn.secondary .circle { background: var(--color-secondary); border: 1px solid var(--color-border); color: var(--color-text); }
.nz .action-btn .label { margin-top: 8px; font-size: 11px; line-height: 15px; font-weight: 500; white-space: nowrap; }
.nz .action-btn.disabled { opacity: .5; }

/* ---- SessionCard (components/SessionCard.tsx, from Courso FeaturedCourse) -------------- *
   width 260 (Sessions screen: min(320, screen − 64)), min-h-[200px] justify-between rounded-3xl p-5 in the
   session's tone (bg-cyan / bg-violet / bg-magenta / bg-flame), black content · top row: icon tile h-11 w-11
   rounded-2xl bg-black/10 › Icon 22 stroke 2.2; status pill rounded-full bg-black/10 px-2.5 py-1 text-xs
   font-semibold ("New", "2 of 5 recorded", "Complete") · mt-6 title font-outfit-bold text-xl (2 lines) ·
   mt-1 "5 prompts · 8 min · about $1.60" text-sm text-black/70 · ProgressBar mt-3 h 5 bg-black/15 fill black  */
.nz .session-card { display: flex; flex-direction: column; justify-content: space-between; width: 260px; min-height: 200px; padding: 20px; border-radius: 24px; overflow: hidden; color: var(--black); text-align: left; }
.nz .session-card .tile { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 16px; background: rgba(0,0,0,.1); }
.nz .session-card .tile .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.nz .session-card .pill { padding: 4px 10px; border-radius: 9999px; background: rgba(0,0,0,.1); font-size: 11px; line-height: 15px; font-weight: 600; }
.nz .session-card .title { display: block; margin-top: 24px; font-family: var(--font-outfit); font-weight: 700; font-size: 17px; line-height: 22px; }
.nz .session-card .meta { display: block; margin-top: 4px; font-size: 12.5px; line-height: 17px; color: rgba(0,0,0,.7); }
.nz .session-card .progress { margin-top: 12px; height: 5px; background: rgba(0,0,0,.15); }
.nz .session-card .progress i { background: var(--black); }
.nz .session-card.panel { width: auto; min-height: 0; justify-content: flex-start; }
.nz .session-card.panel .tile { width: 48px; height: 48px; } .nz .session-card.panel .tile .icon { width: 24px; height: 24px; }
.nz .session-card.panel .title { margin-top: 20px; font-size: 23px; line-height: 29px; }
.nz .session-card.panel .progress { margin-top: 8px; height: 6px; }
/* SessionRow (components/SessionRow.tsx, from Courso CourseList): min-h-[44px] flex-row items-center py-1 ·
   tile mr-4 h-16 w-16 rounded-2xl in the tone, Icon 24 black · title text-base font-bold (1 line) · meta
   mt-0.5 gap-2 text-xs text-subtext: "5 prompts" · dot h-1 w-1 bg-border · Clock 11 + "8 min" · dot · status
   (accent when complete) · ProgressBar mt-2 h 4 unless new · right tile h-11 w-11 rounded-xl bg-secondary ›
   ChevronRight / Check 16                                                                                   */
.nz .session-row { display: flex; align-items: center; min-height: 44px; padding: 4px 0; width: 100%; text-align: left; }
.nz .session-row .tile { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-right: 16px; border-radius: 16px; color: var(--black); flex: none; }
.nz .session-row .body { flex: 1; min-width: 0; padding-right: 12px; }
.nz .session-row .title { display: block; font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz .session-row .meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 11px; line-height: 15px; color: var(--color-subtext); white-space: nowrap; }
.nz .session-row .meta .sep { width: 4px; height: 4px; border-radius: 9999px; background: var(--color-border); flex: none; }
.nz .session-row .meta .icon { width: 11px; height: 11px; margin-right: 4px; }
.nz .session-row .meta .done { color: var(--color-accent); }
.nz .session-row .progress { margin-top: 8px; height: 4px; }
.nz .session-row .end { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-secondary); flex: none; }
.nz .session-row .end .icon { width: 16px; height: 16px; }
/* PromptUnit (app/screens/session.tsx, Courso's unit row): min-h-[44px] flex-row items-center py-4 border-b ·
   tile mr-4 h-12 w-12 rounded-xl (bg-highlight with Check 20 when recorded, else bg-secondary with the
   number text-sm font-bold) · text-base text · mt-0.5 text-xs status ("Recorded" accent, "Up next"
   font-semibold, "Not yet" subtext) · right h-11 w-11 rounded-xl bg-secondary › Mic / RotateCcw 16          */
.nz .prompt-unit { display: flex; align-items: center; min-height: 44px; padding: 16px 0; border-bottom: 1px solid var(--color-border); width: 100%; text-align: left; }
.nz .prompt-unit:last-child { border-bottom: 0; }
.nz .prompt-unit .tile { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: 16px; border-radius: 12px; background: var(--color-secondary); font-size: 12.5px; line-height: 17px; font-weight: 700; flex: none; }
.nz .prompt-unit .tile.done { background: var(--color-highlight); color: var(--color-on-highlight); }
.nz .prompt-unit .tile .icon { width: 20px; height: 20px; stroke-width: 3; }
.nz .prompt-unit .body { flex: 1; min-width: 0; padding-right: 12px; font-size: 14px; line-height: 20px; }
.nz .prompt-unit .state { display: block; margin-top: 2px; font-size: 11px; line-height: 15px; color: var(--color-subtext); }
.nz .prompt-unit .state.done { color: var(--color-accent); } .nz .prompt-unit .state.next { color: var(--color-primary); font-weight: 600; }
.nz .prompt-unit .end { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-secondary); flex: none; }
.nz .prompt-unit .end .icon { width: 16px; height: 16px; }

/* ---- ActionSheetThemed (components/ActionSheetThemed.tsx) ------------------------ *
   background colors.sheet (#16161D / #FFFFFF), top radius 40, paddingBottom insets.bottom; screens add
   "px-global pb-4 pt-6" and a title "mb-1 / mb-4 text-xl font-bold" (or font-outfit-bold text-xl) · item
   groups rounded-2xl bg-background; rows flex-row items-center px-4/5 py-4 border-b, Icon 20 + text-base     */
.nz .sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; z-index: 20; }
.nz .sheet { width: 100%; background: var(--color-sheet); border-radius: 40px 40px 0 0; padding: 12px var(--global) 36px; max-height: 92%; overflow-y: auto; scrollbar-width: none; }
.nz .sheet .handle { width: 40px; height: 4px; border-radius: 9999px; background: var(--color-border); margin: 0 auto 16px; }
.nz .sheet-group { border-radius: 16px; background: var(--color-background); }
.nz .sheet-group + .sheet-group { margin-top: 16px; }
.nz .sheet-item { display: flex; align-items: center; width: 100%; padding: 16px; border-bottom: 1px solid var(--color-border); font-size: 14px; line-height: 20px; color: var(--color-primary); text-align: left; }
.nz .sheet-item:last-child { border-bottom: 0; }
.nz .sheet-item > .icon { width: 20px; height: 20px; margin-right: 12px; }
.nz .sheet-item .note { display: block; font-size: 11px; line-height: 15px; color: var(--color-subtext); }
.nz .sheet-item.flame { color: var(--color-flame); }
/* ConfirmationModal (components/ConfirmationModal.tsx): ActionSheet on colors.bg, top radius 20, p-8 pb-14 ·
   title mb-2 text-xl font-bold · message mb-6 text-subtext · two flex-1 rounded-lg px-4 py-3 buttons: cancel
   bg-secondary, confirm bg-flame with font-semibold text-black                                               */
.nz .confirm-sheet { width: 100%; background: var(--color-background); border-radius: 20px 20px 0 0; padding: 32px 32px 56px; }
.nz .confirm-sheet .actions { display: flex; gap: 12px; }
.nz .confirm-sheet .actions button { flex: 1; padding: 12px 16px; border-radius: 8px; text-align: center; background: var(--color-secondary); }
.nz .confirm-sheet .actions button.confirm { background: var(--color-flame); color: var(--black); font-weight: 600; }

/* ---- ProgressBar (components/ProgressBar.tsx, from Feedy) ---------------------------- *
   w-full rounded-full, height prop (default 8) · track bg-secondary (screens pass bg-background, bg-border,
   bg-black/15) · fill bg-highlight (sessions: bg-black) animated 0 → percentage over 1000 ms on focus ·
   `segments` draws gap-1 pieces instead of one bar                                                          */
.nz .progress { width: 100%; height: 8px; border-radius: 9999px; background: var(--color-secondary); overflow: hidden; }
.nz .progress i { display: block; height: 100%; border-radius: 9999px; background: var(--color-highlight); }
.nz .progress.on-bg { background: var(--color-background); }
.nz .progress.on-border { background: var(--color-border); }
.nz .progress.thin { height: 4px; }
.nz .segments { display: flex; gap: 4px; }
.nz .segments span { flex: 1; height: 6px; border-radius: 9999px; background: rgba(0,0,0,.15); }
.nz .segments span.done { background: var(--black); }

/* ---- TransactionItem (components/TransactionItem.tsx, from Walley) -------------------- *
   Pressable flex-row items-center py-3 minHeight 64 · circle mr-3 h-14 w-14 rounded-full bg-secondary ›
   Icon 24 · middle flex-1 pr-3: title text-lg font-bold, time text-sm text-subtext (1 line each) · right
   ml-auto items-end: amount text-lg font-semibold (income text-accent, pending text-cyan, else text-primary),
   method text-sm text-subtext                                                                               */
.nz .transaction { display: flex; align-items: center; min-height: 64px; padding: 12px 0; width: 100%; text-align: left; }
.nz .transaction .circle { width: 56px; height: 56px; margin-right: 12px; border-radius: 9999px; background: var(--color-secondary); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.nz .transaction .circle .icon { width: 24px; height: 24px; }
.nz .transaction .mid { flex: 1; min-width: 0; padding-right: 12px; }
.nz .transaction .title { display: block; font-size: 15px; line-height: 21px; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz .transaction .subtitle { display: block; font-size: 12.5px; line-height: 17px; color: var(--color-subtext); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz .transaction .right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.nz .transaction .amount { font-size: 15px; line-height: 21px; font-weight: 600; text-align: right; color: var(--color-primary); white-space: nowrap; }
.nz .transaction .amount.income { color: var(--color-accent); }
.nz .transaction .amount.pending { color: var(--color-cyan); }
.nz .transaction .method { display: block; font-size: 12.5px; line-height: 17px; color: var(--color-subtext); text-align: right; }
/* Recording rows (Home RecentRow, Library RecordingRow, Circle InviteRow): flex-row items-center border-b
   py-3.5 minHeight 64 · circle mr-3 h-10/h-11 rounded-full bg-secondary › Icon 20 (Home: in the state's
   tone) · title text-base font-medium · details text-xs text-subtext · right: StatusBadge, amount mt-1
   text-sm font-semibold text-accent                                                                         */
.nz .rec-row { display: flex; align-items: center; min-height: 64px; padding: 14px 0; border-bottom: 1px solid var(--color-border); width: 100%; text-align: left; }
.nz .rec-row .circle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: 12px; border-radius: 9999px; background: var(--color-secondary); flex: none; }
.nz .rec-row .circle.sm { width: 40px; height: 40px; }
.nz .rec-row .circle .icon { width: 20px; height: 20px; }
.nz .rec-row .mid { flex: 1; min-width: 0; padding-right: 12px; }
.nz .rec-row .title { display: block; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz .rec-row .sub { display: block; font-size: 11px; line-height: 15px; color: var(--color-subtext); }
.nz .rec-row .right { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.nz .rec-row .amt { margin-top: 4px; font-size: 12.5px; line-height: 17px; font-weight: 600; color: var(--color-accent); }
/* DetailItem (Walley send.tsx / transaction.tsx): flex-row justify-between py-4 border-b · label text-base ·
   value ml-4 flex-1 text-right text-lg font-semibold (1 line)                                                */
.nz .detail-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; line-height: 20px; }
.nz .detail-item:last-child { border-bottom: 0; }
.nz .detail-item b { margin-left: 16px; flex: 1; min-width: 0; text-align: right; font-size: 15px; line-height: 21px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Summary rows (How you're paid, Agreement): flex-row justify-between py-3.5 border-b · label text-sm
   text-subtext · value text-base font-semibold (How you're paid: text-accent)                               */
.nz .sum-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.nz .sum-row:last-child { border-bottom: 0; }
.nz .sum-row > span { font-size: 12.5px; line-height: 17px; color: var(--color-subtext); }
.nz .sum-row > b { margin-left: 16px; font-size: 14px; line-height: 20px; font-weight: 600; text-align: right; }
.nz .sum-row > .icon { width: 18px; height: 18px; margin-right: 12px; }
/* Statement row (Walley statements.tsx): flex-row items-center py-4 minHeight 64 · mr-4 h-12 w-12 rounded-full
   border border-border › File / Files 20 · title text-lg font-semibold · description text-sm text-subtext ·
   Download 20                                                                                               */
.nz .statement { display: flex; align-items: center; min-height: 64px; padding: 16px 0; width: 100%; text-align: left; }
.nz .statement .ring { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: 16px; border-radius: 9999px; border: 1px solid var(--color-border); flex: none; }
.nz .statement .ring .icon, .nz .statement > .icon { width: 20px; height: 20px; }
.nz .statement .title { display: block; font-size: 15px; line-height: 21px; font-weight: 600; }
.nz .statement .sub { display: block; font-size: 12.5px; line-height: 17px; color: var(--color-subtext); }

/* ---- Timelines ---------------------------------------------------------------- *
   Recording detail / Saved (Multia order-detail): flex-row · disc h-7 w-7 rounded-full (done bg-highlight +
   Check 14 stroke 3 black; failed bg-flame + X; current border-2 border-cyan with an h-2.5 w-2.5 bg-cyan dot;
   todo border border-border) with a w-px bg-border connector · body flex-1 pb-5: text-base font-medium (todo
   text-subtext), text-xs text-subtext. Saved uses h-8 w-8 discs with an icon 16 in a rounded-3xl bg-secondary
   px-5 pt-5 card.                                                                                           */
.nz .timeline .tl { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: start; padding-bottom: 20px; position: relative; }
.nz .timeline .tl::before { content: ""; position: absolute; left: 13.5px; top: 28px; bottom: 0; width: 1px; background: var(--color-border); }
.nz .timeline .tl:last-child { padding-bottom: 8px; } .nz .timeline .tl:last-child::before { display: none; }
.nz .timeline .dot { width: 28px; height: 28px; border-radius: 9999px; border: 1px solid var(--color-border); background: var(--color-background); display: flex; align-items: center; justify-content: center; color: var(--color-on-highlight); }
.nz .timeline .done .dot { background: var(--color-highlight); border-color: var(--color-highlight); }
.nz .timeline .current .dot { border: 2px solid var(--color-cyan); }
.nz .timeline .current .dot::after { content: ""; width: 10px; height: 10px; border-radius: 9999px; background: var(--color-cyan); }
.nz .timeline .failed .dot { background: var(--color-flame); border-color: var(--color-flame); color: var(--color-invert); }
.nz .timeline .dot .icon { width: 14px; height: 14px; stroke-width: 3; }
.nz .timeline .t { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.nz .timeline .todo .t { color: var(--color-subtext); }
.nz .timeline .s { display: block; font-size: 11px; line-height: 15px; color: var(--color-subtext); }
.nz .timeline.big .tl { grid-template-columns: 32px 1fr; } .nz .timeline.big .dot { width: 32px; height: 32px; }
.nz .timeline.big .tl::before { left: 15.5px; top: 32px; } .nz .timeline.big .dot .icon { width: 16px; height: 16px; }
.nz .timeline.big .todo .dot { color: var(--color-subtext); } .nz .timeline.big .todo .dot .icon { stroke-width: 2; }
.nz .timeline.big .todo .t { color: var(--color-text); }
/* Payout "Track your payout" (Walley send.tsx Success): Check (accent) / Circle (subtext) 24 · pl-5: label
   text-base text-subtext, value text-lg font-semibold (subtext until done) · connector ml-3 h-10 w-px bg-border */
.nz .transfer { display: flex; align-items: center; }
.nz .transfer > .icon { color: var(--color-subtext); }
.nz .transfer.done > .icon { color: var(--color-accent); }
.nz .transfer .body { flex: 1; padding-left: 20px; }
.nz .transfer .l { display: block; font-size: 14px; line-height: 20px; color: var(--color-subtext); }
.nz .transfer .v { display: block; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--color-subtext); }
.nz .transfer.done .v { color: var(--color-text); }
.nz .transfer-line { margin-left: 12px; width: 1px; height: 40px; background: var(--color-border); }

/* ---- Placeholder (components/Placeholder.tsx) ----------------------------------- *
   items-center justify-center bg-background p-4 · circle mb-4 h-20 w-20 rounded-full border border-border ›
   Icon 30 · title text-center text-xl font-bold · subtitle mb-4 text-center text-subtext (14px) · button
   Button outline rounded full mt-4 (href or onPress)                                                         */
.nz .placeholder:not(span) { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; background: var(--color-background); }
.nz .placeholder .circle { width: 80px; height: 80px; margin-bottom: 16px; border-radius: 9999px; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; }
.nz .placeholder .circle .icon { width: 30px; height: 30px; }
.nz .placeholder .title { font-size: 17px; line-height: 22px; font-weight: 700; text-align: center; }
.nz .placeholder .subtitle { margin-bottom: 16px; font-size: 14px; line-height: 1.2; color: var(--color-subtext); text-align: center; }

/* ---- StatusBadge (components/StatusBadge.tsx, from Multia's order pill) ----------------- *
   flex-row items-center rounded-full px-2 py-1 · fill: the tone's colour at alpha 2E (dark) / 24 (light) ·
   label text-xs font-semibold in the tone's colour · optional dot mr-1.5 h-1.5 w-1.5 rounded-full · tones
   highlight/green → accent ("Accepted", "Paid", "Joined"), cyan/amber → cyan ("In review", "Requested"),
   flame/red → flame ("Not accepted"), magenta, violet; muted: bg-secondary + text-subtext ("Private",
   "Withdrawn", "Available")                                                                                   */
.nz .status-pill { --tone: var(--color-subtext); display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 9999px; font-size: 11px; line-height: 15px; font-weight: 600; white-space: nowrap; color: var(--tone); background: color-mix(in srgb, var(--tone) var(--tint), transparent); flex: none; }
.nz .status-pill.muted { background: var(--color-secondary); color: var(--color-subtext); }
.nz .status-pill.highlight, .nz .status-pill.green { --tone: var(--color-accent); }
.nz .status-pill.cyan, .nz .status-pill.amber { --tone: var(--color-cyan); }
.nz .status-pill.flame, .nz .status-pill.red { --tone: var(--color-flame); }
.nz .status-pill.magenta { --tone: var(--color-magenta); }
.nz .status-pill.violet { --tone: var(--color-violet); }
.nz .status-pill.dot::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 9999px; background: var(--tone); }

/* ---- Phone frame for prototypes (not an app component) ----------------------------- *
   The screen is laid out at 392 CSS px (an iPhone's logical width) so every size inside is 1:1 with the app.
   On a desktop that is ~40% wider than a phone in the hand, so the frame is displayed at 0.82 to read true. */
.nz-phone { width: 392px; max-width: 100%; aspect-ratio: 392 / 812; background: #050507; border-radius: 54px; padding: 11px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(247,247,250,.08); zoom: .82; }
@media (max-width: 760px) { .nz-phone { zoom: 1; } }
.nz-phone .nz-screen { position: relative; height: 100%; border-radius: 44px; overflow: hidden; display: flex; flex-direction: column; background: var(--color-background); }
.nz-phone .status-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px 28px 6px; font-size: 14px; font-weight: 600; flex: none; }
.nz-phone .status-bar .battery { width: 24px; height: 11px; border: 1.5px solid currentColor; border-radius: 3px; position: relative; opacity: .9; }
.nz-phone .status-bar .battery::after { content: ""; position: absolute; inset: 1.5px 6px 1.5px 1.5px; background: currentColor; border-radius: 1px; }
.nz-phone .home-indicator { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); width: 128px; height: 5px; border-radius: 3px; background: var(--color-text); opacity: .85; pointer-events: none; z-index: 30; }
/* ThemedScroller (components/ThemeScroller.tsx): flex-1 bg-background px-global, trailing h-20 spacer */
.nz .themed-scroller { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 var(--global) 80px; background: var(--color-background); scrollbar-width: none; display: flex; flex-direction: column; }
.nz .themed-scroller::-webkit-scrollbar { display: none; }
.nz .themed-scroller > * { flex-shrink: 0; }
.nz .themed-scroller > .fill { flex: 1; display: flex; flex-direction: column; }
/* ThemedFooter (components/ThemeFooter.tsx): w-full bg-background px-global pt-global, paddingBottom insets.bottom (prototype: 28px) */
.nz .themed-footer { flex: none; padding: var(--global) var(--global) 28px; background: var(--color-background); }

/* ---- Tailwind utilities the app uses (compact scale) ------------------------- *
   Last in the file so that, as in Tailwind, a utility on an element wins over a component default.      */
.nz .text-xs  { font-size: 11px; line-height: 15px; }
.nz .text-sm  { font-size: 12.5px; line-height: 17px; }
.nz .text-base{ font-size: 14px; line-height: 20px; }
.nz .text-lg  { font-size: 15px; line-height: 21px; }
.nz .text-xl  { font-size: 17px; line-height: 22px; }
.nz .text-2xl { font-size: 20px; line-height: 26px; }
.nz .text-3xl { font-size: 23px; line-height: 29px; }
.nz .text-4xl { font-size: 26px; line-height: 32px; }
.nz .text-5xl { font-size: 34px; line-height: 40px; }
.nz .text-6xl { font-size: 44px; line-height: 50px; }
.nz .text-\[9px\] { font-size: 9px; line-height: 12px; }
.nz .text-\[11px\] { font-size: 11px; line-height: 15px; }
.nz .leading-5 { line-height: 20px; } .nz .leading-6 { line-height: 24px; }
.nz .uppercase { text-transform: uppercase; } .nz .tracking-wider { letter-spacing: .05em; } .nz .tracking-widest { letter-spacing: .1em; }
.nz .tabular { font-variant-numeric: tabular-nums; }
.nz .font-medium   { font-weight: 500; }
.nz .font-semibold { font-weight: 600; }
.nz .font-bold     { font-weight: 700; }
.nz .font-outfit      { font-family: var(--font-outfit); font-weight: 400; }
.nz .font-outfit-bold { font-family: var(--font-outfit); font-weight: 700; }
.nz .text-primary   { color: var(--color-primary); }
.nz .text-text      { color: var(--color-text); }
.nz .text-subtext   { color: var(--color-subtext); }
.nz .text-invert    { color: var(--color-invert); }
.nz .text-highlight { color: var(--color-highlight); }
.nz .text-accent    { color: var(--color-accent); }
.nz .text-magenta   { color: var(--color-magenta); }
.nz .text-flame     { color: var(--color-flame); }
.nz .text-cyan      { color: var(--color-cyan); }
.nz .text-violet    { color: var(--color-violet); }
.nz .text-white     { color: var(--white); }
.nz .text-black     { color: var(--black); }
.nz .text-black\/70 { color: rgba(0,0,0,.7); }
/* Older palette names some prototype markup still uses, mapped onto the theme as StatusBadge maps them */
.nz .text-green-500 { color: var(--color-accent); }
.nz .text-red-500   { color: var(--color-flame); }
.nz .text-center    { text-align: center; }
.nz .underline      { text-decoration: underline; }
.nz .opacity-20 { opacity: .2; } .nz .opacity-40 { opacity: .4; } .nz .opacity-50 { opacity: .5; } .nz .opacity-60 { opacity: .6; }
.nz .bg-background { background: var(--color-background); }
.nz .bg-secondary  { background: var(--color-secondary); }
.nz .bg-primary    { background: var(--color-primary); }
.nz .bg-text       { background: var(--color-text); }
.nz .bg-highlight  { background: var(--color-highlight); color: var(--black); }
.nz .bg-darker     { background: var(--color-darker); }
.nz .bg-magenta    { background: var(--color-magenta); }
.nz .bg-flame      { background: var(--color-flame); }
.nz .bg-cyan       { background: var(--color-cyan); }
.nz .bg-violet     { background: var(--color-violet); }
.nz .bg-black\/10  { background: rgba(0,0,0,.1); }
.nz .border        { border: 1px solid var(--color-border); }
.nz .border-b      { border-bottom: 1px solid var(--color-border); }
.nz .border-t      { border-top: 1px solid var(--color-border); }
.nz .border-dashed { border-style: dashed; }
.nz .border-highlight { border-color: var(--color-highlight); }
.nz .border-transparent { border-color: transparent; }
.nz .rounded-lg  { border-radius: 8px; }  .nz .rounded-xl  { border-radius: 12px; }
.nz .rounded-2xl { border-radius: 16px; } .nz .rounded-3xl { border-radius: 24px; }
.nz .rounded-full{ border-radius: 9999px; }
.nz .flex-row { display: flex; flex-direction: row; } .nz .flex-col { display: flex; flex-direction: column; }
.nz .items-center { align-items: center; } .nz .items-start { align-items: flex-start; } .nz .items-end { align-items: flex-end; }
.nz .justify-center { justify-content: center; } .nz .justify-between { justify-content: space-between; } .nz .justify-end { justify-content: flex-end; }
.nz .flex-1 { flex: 1 1 0%; min-width: 0; } .nz .flex-wrap { flex-wrap: wrap; } .nz .self-end { align-self: flex-end; } .nz .self-start { align-self: flex-start; }
.nz .gap-1 { gap: 4px; } .nz .gap-2 { gap: 8px; } .nz .gap-3 { gap: 12px; } .nz .gap-x-2 { column-gap: 8px; } .nz .gap-4 { gap: 16px; }
.nz .w-full { width: 100%; } .nz .h-full { height: 100%; }
.nz .px-global { padding-left: var(--global); padding-right: var(--global); }
.nz .p-global  { padding: var(--global); }
.nz .-mx-global{ margin-left: calc(-1 * var(--global)); margin-right: calc(-1 * var(--global)); }
.nz .mb-global { margin-bottom: var(--global); }
.nz .mr-global { margin-right: var(--global); }
.nz .mt-global { margin-top: var(--global); }
.nz .p-3 { padding: 12px; } .nz .p-4 { padding: 16px; } .nz .p-5 { padding: 20px; } .nz .p-6 { padding: 24px; }
.nz .px-3 { padding-left: 12px; padding-right: 12px; } .nz .px-4 { padding-left: 16px; padding-right: 16px; }
.nz .px-5 { padding-left: 20px; padding-right: 20px; } .nz .px-6 { padding-left: 24px; padding-right: 24px; }
.nz .px-8 { padding-left: 32px; padding-right: 32px; } .nz .px-10 { padding-left: 40px; padding-right: 40px; }
.nz .py-1 { padding-top: 4px; padding-bottom: 4px; } .nz .py-2 { padding-top: 8px; padding-bottom: 8px; }
.nz .py-3 { padding-top: 12px; padding-bottom: 12px; } .nz .py-3\.5 { padding-top: 14px; padding-bottom: 14px; } .nz .py-4 { padding-top: 16px; padding-bottom: 16px; }
.nz .py-5 { padding-top: 20px; padding-bottom: 20px; } .nz .py-6 { padding-top: 24px; padding-bottom: 24px; }
.nz .py-10 { padding-top: 40px; padding-bottom: 40px; } .nz .pt-2 { padding-top: 8px; } .nz .pt-4 { padding-top: 16px; } .nz .pt-6 { padding-top: 24px; } .nz .pt-10 { padding-top: 40px; }
.nz .pb-3 { padding-bottom: 12px; } .nz .pb-4 { padding-bottom: 16px; } .nz .pb-5 { padding-bottom: 20px; }
.nz .mb-1 { margin-bottom: 4px; } .nz .mb-2 { margin-bottom: 8px; } .nz .mb-3 { margin-bottom: 12px; } .nz .mb-4 { margin-bottom: 16px; } .nz .mb-5 { margin-bottom: 20px; } .nz .mb-6 { margin-bottom: 24px; }
.nz .mb-8 { margin-bottom: 32px; } .nz .mb-10 { margin-bottom: 40px; } .nz .mb-14 { margin-bottom: 56px; } .nz .mt-0\.5 { margin-top: 2px; } .nz .mt-1 { margin-top: 4px; } .nz .mt-2 { margin-top: 8px; }
.nz .mt-3 { margin-top: 12px; } .nz .mt-4 { margin-top: 16px; } .nz .mt-5 { margin-top: 20px; } .nz .mt-6 { margin-top: 24px; } .nz .mt-8 { margin-top: 32px; }
.nz .mt-10 { margin-top: 40px; } .nz .mt-14 { margin-top: 56px; } .nz .ml-1 { margin-left: 4px; } .nz .ml-2 { margin-left: 8px; } .nz .ml-3 { margin-left: 12px; }
.nz .ml-4 { margin-left: 16px; } .nz .ml-6 { margin-left: 24px; } .nz .ml-auto { margin-left: auto; } .nz .mr-1 { margin-right: 4px; }
.nz .mr-2 { margin-right: 8px; } .nz .mr-3 { margin-right: 12px; } .nz .mr-4 { margin-right: 16px; } .nz .mr-6 { margin-right: 24px; }
.nz .mx-auto { margin-left: auto; margin-right: auto; } .nz .my-3 { margin-top: 12px; margin-bottom: 12px; }
.nz .relative { position: relative; } .nz .absolute { position: absolute; } .nz .overflow-hidden { overflow: hidden; }


/* Wrapping: headings balance their lines, body text avoids a lone last word (the app uses iOS lineBreakStrategy standard). */
.nz h1, .nz h2, .nz h3, .nz .text-2xl, .nz .text-3xl, .nz .text-4xl, .nz .text-xl, .nz .font-outfit-bold { text-wrap: balance; }
.nz p, .nz .text-sm, .nz .text-base, .nz .description { text-wrap: pretty; }
/* Full-width CTAs are text-only, as in the templates */
.nz .btn-large > .icon { display: none; }
/* Choice rows: one line of copy, pay as a tag on the right (Feedy's selectable rows) */
.nz .plan-card .inner { padding: 12px 16px; }
.nz .plan-card .description { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nz .plan-card .paytag { margin-left: 12px; font-size: 11px; line-height: 15px; color: var(--color-subtext); white-space: nowrap; }
.nz .plan-card .paytag.paid { color: var(--color-text); }