/* twin hi-fi mockups — Figma-aligned tokens, layout & chrome
   Self-contained: no wireframes.css dependency.
   Fonts: Outfit + Material Symbols Outlined (icons) + system UI via --font-sans
   Token source: ux.md §2.1–2.9  */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");
/* Material Symbols Outlined — ligature icons (use icon name as text, e.g. arrow_forward). See Google Fonts / Icons. */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");

/* ── Design tokens — UI kit palette ONLY (8 ramps × 10 steps) ─────
   Do not use hex/rgba outside these scales; use color-mix() for alpha. */

:root {
  /* Primary Brand (blues) */
  --pb-0: #3a39ff;
  --pb-10: #4d4cff;
  --pb-20: #6160ff;
  --pb-30: #7574ff;
  --pb-40: #8888ff;
  --pb-50: #9c9cff;
  --pb-60: #b0afff;
  --pb-70: #c3c3ff;
  --pb-80: #d7d7ff;
  --pb-90: #ebebff;

  /* Secondary Brand (lavenders) */
  --sb-0: #dcb8fe;
  --sb-10: #dfbffe;
  --sb-20: #e3c6fe;
  --sb-30: #e6cdfe;
  --sb-40: #ead4fe;
  --sb-50: #eddbfe;
  --sb-60: #f1e2fe;
  --sb-70: #f4e9fe;
  --sb-80: #f8f0fe;
  --sb-90: #fbf7fe;

  /* Third (coral) */
  --tc-0: #de3f17;
  --tc-10: #e1522e;
  --tc-20: #e46545;
  --tc-30: #e7785c;
  --tc-40: #eb8b73;
  --tc-50: #ee9f8b;
  --tc-60: #f1b2a2;
  --tc-70: #f5c5b9;
  --tc-80: #f8d8d0;
  --tc-90: #fbebe7;

  /* Primary Dark (navy / slate) */
  --pd-0: #0b0539;
  --pd-10: #231d4c;
  --pd-20: #3b3760;
  --pd-30: #545074;
  --pd-40: #6c6988;
  --pd-50: #85829c;
  --pd-60: #9d9baf;
  --pd-70: #b5b4c3;
  --pd-80: #ceced7;
  --pd-90: #e6e6eb;

  /* Primary Background (warm off-whites) */
  --pbg-0: #f8f3ee;
  --pbg-10: #f8f4ef;
  --pbg-20: #f7f5f1;
  --pbg-30: #f8f6f3;
  --pbg-40: #f9f7f4;
  --pbg-50: #faf9f6;
  --pbg-60: #fbfaf8;
  --pbg-70: #fcfbf9;
  --pbg-80: #fdfcfb;
  --pbg-90: #fefdfd;

  /* Green success */
  --g-0: #308242;
  --g-10: #448e54;
  --g-20: #599b67;
  --g-30: #6ea77a;
  --g-40: #82b48d;
  --g-50: #97c0a0;
  --g-60: #accbb3;
  --g-70: #c0d9c6;
  --g-80: #d5e6d9;
  --g-90: #eaf2ec;

  /* Red danger */
  --r-0: #d91d17;
  --r-10: #dc332e;
  --r-20: #e04a45;
  --r-30: #e4605c;
  --r-40: #e77773;
  --r-50: #ec8e8b;
  --r-60: #efa4a2;
  --r-70: #f3bbb9;
  --r-80: #f7d1d0;
  --r-90: #fbe8e7;

  /* Yellow / amber */
  --y-0: #ffaa00;
  --y-10: #ffb219;
  --y-20: #ffbb33;
  --y-30: #ffc34c;
  --y-40: #ffcc66;
  --y-50: #ffd47f;
  --y-60: #ffdd99;
  --y-70: #ffe5b2;
  --y-80: #ffeecc;
  --y-90: #fff6e5;

  /* ── Semantic aliases (reference palette vars only) ─────────── */
  --text-primary: var(--pd-10);
  --text-heading: var(--pd-0);
  --deep-ink: var(--pd-0);
  --text-secondary: var(--pd-50);
  --placeholder: var(--pd-60);
  --disabled-text: var(--pd-70);
  --meta: var(--pd-50);

  --white: var(--pbg-90);
  --surface: var(--pbg-90);
  --card-surface: var(--pbg-70);

  --wire: var(--pd-60);
  --divider: var(--pbg-30);
  --input-border: var(--pd-90);
  --disabled-border: var(--pd-80);

  --primary: var(--pb-10);
  --primary-hover: var(--pb-0);
  --primary-focus: var(--pb-0);
  --primary-focus-ring: var(--pb-60);
  --primary-pressed: var(--pb-0);
  --primary-surface: var(--pb-90);
  --primary-surface-dark: var(--pb-80);
  --disabled-bg: var(--pd-90);

  --success: var(--g-0);
  --success-bg: var(--g-90);
  --warning: var(--y-0);
  --warning-bg: var(--y-90);
  --error: var(--r-0);
  --error-bg: var(--r-90);

  /* Persona / legacy names → palette */
  --police-blue: var(--pd-40);
  --marigold: var(--y-30);
  --blueberry: var(--pd-30);
  --ink: var(--pd-0);
  --stone: var(--pd-90);
  --buff: var(--sb-80);
  --citrine-brown: var(--y-0);

  /* Flat elevation (palette-based mixes) */
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--pd-0) 5%, transparent);
  --shadow-2: 0 2px 8px color-mix(in srgb, var(--pd-0) 6%, transparent);
  --shadow-3: 0 4px 12px color-mix(in srgb, var(--pd-0) 8%, transparent);
  --shadow-4: 0 8px 24px color-mix(in srgb, var(--pd-0) 10%, transparent);
  --shadow-5: 0 16px 40px color-mix(in srgb, var(--pd-0) 7%, transparent);

  --mix-pd-40-04: color-mix(in srgb, var(--pd-40) 4%, transparent);
  --mix-pd-40-06: color-mix(in srgb, var(--pd-40) 6%, transparent);
  --mix-pd-40-08: color-mix(in srgb, var(--pd-40) 8%, transparent);
  --mix-pd-40-10: color-mix(in srgb, var(--pd-40) 10%, transparent);
  --mix-pd-40-12: color-mix(in srgb, var(--pd-40) 12%, transparent);
  --mix-pd-0-45: color-mix(in srgb, var(--pd-0) 45%, transparent);
  --mix-pbg-90-75: color-mix(in srgb, var(--pbg-90) 75%, transparent);
  --mix-pbg-90-78: color-mix(in srgb, var(--pbg-90) 78%, transparent);
  --mix-pbg-90-60: color-mix(in srgb, var(--pbg-90) 60%, transparent);
  --mix-pb-10-15: color-mix(in srgb, var(--pb-10) 15%, transparent);
  --mix-y-30-15: color-mix(in srgb, var(--y-30) 15%, transparent);
  --mix-pd-0-15: color-mix(in srgb, var(--pd-0) 15%, transparent);

  /* Card kit */
  --gradient-card-hero: linear-gradient(180deg, var(--pb-80) 0%, var(--pbg-90) 100%);
  --tag-bg: var(--pb-90);

  /* Radius */
  --radius-input: 12px;
  --radius-card: 16px;
  --radius-card-lg: 24px;
  --radius-list-row: 14px;
  --radius-btn: 40px;
  --radius-chip: 20px;
  --radius-swatch: 8px;

  /* Typography */
  --font-sans: "Outfit", system-ui, -apple-system, sans-serif;
}

/* ── Base typography & body ─────────────────────────────────────── */
.hifi-body {
  margin: 0;
  min-height: 100vh;
  background: var(--pbg-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.hifi-body a {
  text-decoration: none;
}

/* ── twin button family (§2.8 Figma kit: primary, secondary, text, icon) ─ */
.twin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 24px;
  border-radius: 9999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.twin-btn:focus-visible {
  outline: none;
}

.twin-btn:disabled,
.twin-btn[disabled] {
  cursor: not-allowed;
  box-shadow: none;
}

/* Trailing icon (Material Symbols ligature) */
.twin-btn__icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.125em;
  line-height: 1;
  width: 1.125em;
  height: 1.125em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
}

.twin-btn--sm {
  min-height: 32px;
  padding: 4px 20px;
  font-size: 14px;
  line-height: 20px;
  gap: 6px;
}

.twin-btn--sm .twin-btn__icon {
  width: 1.1em;
  height: 1.1em;
}

.twin-btn--xs {
  min-height: 28px;
  padding: 2px 16px;
  font-size: 12px;
  line-height: 16px;
  gap: 4px;
}

.twin-btn--xs .twin-btn__icon {
  width: 1em;
  height: 1em;
}

/* ── Primary (filled) — label + icon must stay white on purple ──── */
.twin-btn-primary {
  background: var(--primary);
  color: #ffffff;
  border-color: transparent;
}

.twin-btn-primary .twin-btn__icon {
  color: #ffffff;
}

.twin-btn-primary:hover:not(:disabled):not([disabled]) {
  background: var(--primary-hover);
  color: #ffffff;
}

.twin-btn-primary:focus-visible {
  background: var(--primary-hover);
  color: #ffffff;
  box-shadow: 0 0 0 2px var(--primary-focus-ring);
}

.twin-btn-primary:active:not(:disabled):not([disabled]) {
  background: var(--primary-pressed);
  color: #ffffff;
  box-shadow: none;
}

.twin-btn-primary:disabled,
.twin-btn-primary[disabled] {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  border-color: transparent;
}

/* ── Secondary (outline / Figma kit) ────────────────────────────── */
.twin-btn-secondary {
  background: var(--white);
  color: var(--primary);
  border-color: var(--primary);
}

.twin-btn-secondary:hover:not(:disabled):not([disabled]) {
  background: var(--primary-surface);
}

.twin-btn-secondary:focus-visible {
  background: var(--white);
  border-color: var(--primary-hover);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}

.twin-btn-secondary:active:not(:disabled):not([disabled]) {
  background: var(--primary-surface-dark);
  box-shadow: none;
}

.twin-btn-secondary:disabled,
.twin-btn-secondary[disabled] {
  background: var(--white);
  color: var(--disabled-text);
  border-color: var(--disabled-border);
}

/* ── Text (ghost label + optional pill fill on interaction) ─────── */
.twin-btn-text {
  background: transparent;
  color: var(--primary);
  border-color: transparent;
}

.twin-btn-text:hover:not(:disabled):not([disabled]) {
  background: var(--primary-surface);
}

.twin-btn-text:focus-visible {
  background: var(--white);
  border-color: var(--primary);
  box-shadow: none;
}

.twin-btn-text:active:not(:disabled):not([disabled]) {
  background: var(--primary-surface-dark);
}

.twin-btn-text:disabled,
.twin-btn-text[disabled] {
  background: transparent;
  color: var(--disabled-text);
  border-color: transparent;
}

/* ── Icon-only (circular: filled / outline / ghost) ─────────────── */
.twin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  background: transparent;
  color: var(--primary);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.twin-icon-btn:focus-visible {
  outline: none;
}

.twin-icon-btn:disabled,
.twin-icon-btn[disabled] {
  cursor: not-allowed;
  box-shadow: none;
}

.twin-icon-btn .twin-btn__icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.twin-icon-btn--md {
  width: 56px;
  height: 56px;
}

.twin-icon-btn--sm {
  width: 44px;
  height: 44px;
}

.twin-icon-btn--sm .twin-btn__icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
}

.twin-icon-btn--xs {
  width: 36px;
  height: 36px;
}

.twin-icon-btn--xs .twin-btn__icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

/* Filled */
.twin-icon-btn--filled {
  background: var(--primary);
  color: #ffffff;
  border-color: transparent;
}

.twin-icon-btn--filled:hover:not(:disabled):not([disabled]) {
  background: var(--primary-hover);
  color: #ffffff;
}

.twin-icon-btn--filled:focus-visible {
  background: var(--primary-hover);
  color: #ffffff;
  box-shadow: 0 0 0 2px var(--primary-focus-ring);
}

.twin-icon-btn--filled:active:not(:disabled):not([disabled]) {
  background: var(--primary-pressed);
  color: #ffffff;
  box-shadow: none;
}

.twin-icon-btn--filled:disabled,
.twin-icon-btn--filled[disabled] {
  background: var(--disabled-bg);
  color: var(--disabled-text);
}

/* Outline */
.twin-icon-btn--outline {
  background: var(--white);
  border-color: var(--primary);
  color: var(--primary);
}

.twin-icon-btn--outline:hover:not(:disabled):not([disabled]) {
  background: var(--primary-surface);
}

.twin-icon-btn--outline:focus-visible {
  background: var(--white);
  border-color: var(--primary-hover);
  box-shadow: 0 0 0 3px var(--primary-focus-ring);
}

.twin-icon-btn--outline:active:not(:disabled):not([disabled]) {
  background: var(--primary-surface-dark);
  box-shadow: none;
}

.twin-icon-btn--outline:disabled,
.twin-icon-btn--outline[disabled] {
  background: var(--white);
  border-color: var(--disabled-border);
  color: var(--disabled-text);
}

/* Ghost (icon only until hover / focus / press) */
.twin-icon-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
}

.twin-icon-btn--ghost:hover:not(:disabled):not([disabled]) {
  background: var(--primary-surface);
}

.twin-icon-btn--ghost:focus-visible {
  background: transparent;
  border-color: var(--primary);
  box-shadow: none;
}

.twin-icon-btn--ghost:active:not(:disabled):not([disabled]) {
  background: var(--primary-surface-dark);
}

.twin-icon-btn--ghost:disabled,
.twin-icon-btn--ghost[disabled] {
  background: transparent;
  color: var(--disabled-text);
}

/* ── Persona & legacy outline (brandbook / existing screens) ────── */
.twin-btn-gold {
  background: var(--marigold);
  color: var(--ink);
  border-color: transparent;
}

.twin-btn-gold:hover:not(:disabled):not([disabled]) {
  background: var(--y-20);
}

.twin-btn-blue {
  background: var(--blueberry);
  color: var(--white);
  border-color: transparent;
}

.twin-btn-blue:hover:not(:disabled):not([disabled]) {
  background: var(--pd-20);
}

.twin-btn-outline {
  background: transparent;
  border: 2px solid var(--police-blue);
  color: var(--police-blue);
}

.twin-btn-outline:hover:not(:disabled):not([disabled]) {
  background: var(--mix-pd-40-06);
}

.twin-btn-gold:disabled,
.twin-btn-gold[disabled],
.twin-btn-blue:disabled,
.twin-btn-blue[disabled] {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  border-color: transparent;
}

.twin-btn-outline:disabled,
.twin-btn-outline[disabled] {
  background: transparent;
  color: var(--disabled-text);
  border-color: var(--disabled-border);
}

/* ── twin generic card & glass (wireframes.css replacements) ─────── */
.twin-card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
  border: 1px solid transparent;
}

.twin-glass {
  background: var(--mix-pbg-90-75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--pbg-90) 50%, transparent);
}

/* ── Mobile device frame (§2.1 — 440×956 iPhone 17 Pro Max) ───── */
.hifi-canvas {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 1.5rem 1rem 3rem;
}

.hifi-device {
  width: 100%;
  max-width: 440px;
  /* Fixed phone height; content scrolls inside .hifi-main (see below). */
  height: min(956px, calc(100vh - 3rem));
  min-height: 0;
  background: var(--white);
  border-radius: 2rem;
  box-shadow: 0 12px 48px var(--mix-pd-40-10);
  border: 1px solid var(--mix-pd-40-08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Status bar (iOS chrome) ────────────────────────────────────── */
.hifi-status {
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--deep-ink);
  background: var(--stone);
}

/* ── Top bar ────────────────────────────────────────────────────── */
.hifi-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--white);
  border-bottom: 1px solid var(--input-border);
  flex-shrink: 0;
}

/* Logo / signet (design/logo/) */
.hifi-logo {
  display: flex;
  align-items: center;
  color: var(--deep-ink);
}

.hifi-signet {
  height: 18px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.hifi-signet--lg {
  height: 24px;
}

/* UI icons: Material Symbols Outlined (ligature text inside .hifi-icon, e.g. home, search, chat) */
.hifi-icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  color: inherit;
}

.hifi-icon--sm {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.hifi-icon--row {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.hifi-title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.hifi-topbar-spacer { width: 2.75rem; }

/* ── Scrollable main (in-frame drag / touch scroll, scrollbar hidden) ─ */
.hifi-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 16px;
  padding-bottom: 5.5rem;
}
.hifi-main::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.hifi-main--no-tabs { padding-bottom: 16px; }

/* ── Bottom tab bar — icon-button kit (ghost default / filled active) ─ */
.hifi-tabbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.4rem 0.2rem calc(0.4rem + env(safe-area-inset-bottom, 0));
  background: var(--pbg-90);
  border-top: 1px solid var(--pbg-40);
  box-shadow: 0 -1px 0 var(--mix-pd-40-06);
}

.hifi-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 56px;
  max-width: 72px;
  padding: 4px 2px 6px;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-sans);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--pd-50);
  transition: color 0.15s ease;
}

/* Tab glyph sits in circular chrome (Material icon centered in padded circle) */
.hifi-tab .hifi-icon {
  width: 22px;
  height: 22px;
  font-size: 22px;
  padding: 11px;
  box-sizing: content-box;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--pd-50);
  background: transparent;
  border: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.hifi-tab:hover:not(.hifi-tab--active) .hifi-icon {
  background: var(--primary-surface);
  color: var(--primary);
}

.hifi-tab:active:not(.hifi-tab--active) .hifi-icon {
  background: var(--primary-surface-dark);
}

.hifi-tab:focus-visible {
  outline: none;
}

.hifi-tab:focus-visible .hifi-icon {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-focus-ring);
}

/* Active tab = .twin-icon-btn--filled semantics */
.hifi-tab--active {
  color: var(--pd-0);
}

.hifi-tab--active .hifi-icon {
  background: var(--primary);
  color: var(--pbg-90);
  border-color: transparent;
  box-shadow: none;
}

.hifi-tab--active:hover .hifi-icon {
  background: var(--primary-hover);
  color: var(--pbg-90);
}

.hifi-tab--active:active .hifi-icon {
  background: var(--primary-pressed);
}

.hifi-tab--active:focus-visible .hifi-icon {
  background: var(--primary-hover);
  box-shadow: 0 0 0 2px var(--primary-focus-ring);
}

/* Mentor (gold) shell */
.hifi-tabbar--gold .hifi-tab:hover:not(.hifi-tab--active) .hifi-icon {
  background: var(--y-90);
  color: var(--y-0);
}

.hifi-tabbar--gold .hifi-tab:active:not(.hifi-tab--active) .hifi-icon {
  background: var(--y-80);
}

.hifi-tabbar--gold .hifi-tab--active .hifi-icon {
  background: var(--marigold);
  color: var(--ink);
}

.hifi-tabbar--gold .hifi-tab--active:hover .hifi-icon {
  background: var(--y-20);
  color: var(--ink);
}

.hifi-tabbar--gold .hifi-tab--active:active .hifi-icon {
  background: var(--y-10);
}

.hifi-tabbar--gold .hifi-tab--active:focus-visible .hifi-icon {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--y-30) 45%, transparent);
}

/* ── Desktop shell (§6.3) ───────────────────────────────────────── */
.hifi-desktop {
  min-height: 100vh;
  background: var(--pbg-0);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

.hifi-desktop a {
  text-decoration: none;
}

.hifi-desktop__inner {
  display: flex;
  flex: 1;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 1rem 1.5rem 2rem;
  gap: 1.5rem;
}

.hifi-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hifi-sidebar__logo {
  padding: 0 1.25rem 1rem;
  color: var(--deep-ink);
  border-bottom: 1px solid var(--input-border);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hifi-sidebar__logo .hifi-signet { height: 22px; }
.hifi-sidebar__logo span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }

.hifi-sidebar__link {
  padding: 10px 1.25rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--police-blue);
  border-radius: 6px;
  margin: 0 0.5rem;
}

.hifi-sidebar__link--active {
  background: var(--mix-pd-40-10);
  color: var(--ink);
  font-weight: 600;
}

.hifi-desktop__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.hifi-desktop__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 12px 20px;
  box-shadow: var(--shadow-1);
}

.hifi-desktop__content {
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--shadow-2);
  flex: 1;
}

.hifi-back {
  font-size: 14px;
  font-weight: 500;
  color: var(--police-blue);
}

/* ── Landing (no device frame) ──────────────────────────────────── */
.hifi-landing-body {
  margin: 0;
  min-height: 100vh;
  background: var(--pbg-0);
  font-family: var(--font-sans);
  color: var(--text-primary);
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.hifi-landing-body a {
  text-decoration: none;
}

.hifi-landing-body .gfx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ── Utility classes ────────────────────────────────────────────── */
.hifi-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--police-blue);
  margin: 0 0 8px;
}

.hifi-ink   { color: var(--ink); }
.hifi-mt    { margin-top: 16px; }
.hifi-mb    { margin-bottom: 16px; }
.hifi-center { text-align: center; }

.hifi-link-hub {
  color: var(--blueberry);
  font-weight: 600;
  text-decoration: underline;
  font-size: 14px;
}