/* ═══════════════════════════════════════════════════════════════
   STELLA Insights Mobile — Profile prototype
   Tokens copied from the STELLA Insights design system (colors.css,
   typography.css, spacing.css, base.css) so this runs standalone.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400..700;1,400..700&family=Fira+Sans:wght@400;500;600;700&display=swap');

:root {
  --stella-blue: #13294F;
  --stella-green: #69BE28;
  --stella-blue-deep: #002750;
  --stella-blue-mid: #1c3c73;
  --stella-blue-light: #779BD9;

  --background: #F8F9FB;
  --card: #ffffff;
  --secondary: #ECF3E4;
  --secondary-foreground: #13294F;
  --switch-background: #cbced4;

  --text-primary: #181d27;
  --text-secondary: #414651;
  --text-tertiary: #535862;
  --text-quarternary: #717680;
  --text-placeholder: #717680;
  --text-disabled: #a4a7ae;
  --border-primary: #d5d7da;
  --border-secondary: #e9eaeb;

  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;

  --success-100: #DCFCE7;
  --success-700: #15803D;
  --error-100: #FEE2E2;
  --error-600: #DC2626;
  --error-700: #B91C1C;
  --info-700: #1D4ED8;

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: "Fira Sans", "Inter", sans-serif;

  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: 16px;
  --radius-full: 9999px;

  --shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.04);
  --shadow-sm: 0px 1px 3px 0px rgba(10, 13, 18, 0.08), 0px 1px 2px -1px rgba(10, 13, 18, 0.04);
  --shadow-modal: 0px 24px 48px -12px rgba(16, 24, 40, 0.25);
  --shadow-focus-green: 0px 0px 0px 3px rgba(105, 190, 40, 0.12);
}

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

/* Guarantee the native `hidden` attribute actually hides — several
   elements here set their own `display` (flex/grid/inline-flex), which
   otherwise wins the specificity tie against the browser's built-in
   `[hidden] { display: none }` rule since author styles beat the UA
   stylesheet. */
[hidden] { display: none !important; }

html {
  height: 100%;
}
body {
  /* min-height (not height): body should fill at least one viewport, but
     must be free to grow taller when content needs more room — a fixed
     `height: 100%` caps body at exactly one viewport regardless of
     content, so anything past that (including shadow bleed) has nowhere
     to go and gets cut off instead of the page simply scrolling. */
  margin: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  background:
    radial-gradient(ellipse 520px 420px at 76% 54%, rgba(105,190,40,.13) 0%, rgba(105,190,40,.08) 30%, rgba(105,190,40,0) 68%),
    linear-gradient(180deg, #eef3f6 0%, #f4f8f1 58%, #eef3f6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe center`: center the composition when it fits in the viewport,
     but fall back to top-aligned once it doesn't — plain `center` lets an
     oversized child overflow equally above *and* below a fixed-height
     body, and the portion pushed above y=0 is unreachable (page scroll
     can't go negative), which silently clipped the phone's top edge on
     shorter screens. `safe` guarantees the whole composition, including
     the shadow bleed on every side, stays reachable by scrolling. */
  justify-content: safe center;
  /* The device's drop shadow bleeds well past its own box (the largest
     shadow layer is `0 30px 58px`, ~88px of visual reach below and ~58px
     to each side) but box-shadow doesn't count toward scrollable overflow
     — so without real padding to grow into, the page's scroll height stops
     exactly at the phone's edge and the shadow gets cut off with nothing
     to scroll into. This padding is sized to clear that bleed on every side. */
  padding: 48px 64px 104px;
  min-height: 100%;
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; margin: 0; }

/* ── Demo showcase chrome around the prototype ────────────────── */
/* Two-column landing composition: welcome and controls in the left rail,
   the working phone prototype as the first-load hero object on the right. */
.showcase-layout {
  position: relative;
  width: 100%;
  max-width: 1360px;
  min-height: min(860px, calc(100vh - 160px));
  /* Never let the flex parent (body) shrink this below its natural content
     size to force a one-viewport fit — the device mockup has a real fixed
     pixel size and can't compress, so shrinking this box just pushes the
     phone (and its drop shadow) past the container without growing the
     page to scroll into, which is what was clipping the shadow. Letting
     it size naturally means the page scrolls a little on shorter screens
     instead of silently cutting the shadow off. */
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(430px, 1fr) minmax(380px, 520px);
  grid-template-rows: min-content 1fr min-content min-content;
  grid-template-areas:
    "topbar stage"
    "hero stage"
    "notes stage"
    "footer stage";
  column-gap: clamp(56px, 8vw, 132px);
  align-items: center;
}
.showcase-topbar,
.showcase-hero,
.showcase-reviewer-notes,
.showcase-footer {
  width: 100%;
  max-width: 650px;
}

.showcase-topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: end;
  margin-bottom: 46px;
}
.showcase-brand { display: flex; align-items: center; gap: 9px; }
.showcase-logomark { width: 18px; height: auto; }
.showcase-brand span { font: 600 14px var(--font-heading); color: var(--stella-blue); }

.showcase-reset {
  display: flex; align-items: center; gap: 6px;
  font: 500 12.5px Inter;
  color: var(--text-quarternary);
  background: none;
  border: none;
  padding: 6px 4px;
  cursor: pointer;
}
.showcase-reset i { font-size: 13px; }
.showcase-reset:hover { color: var(--stella-blue); }

.showcase-hero {
  grid-area: hero;
  text-align: center;
  align-self: center;
  margin-top: -16px;
}
.showcase-eyebrow {
  display: inline-block;
  font: 700 10.5px Inter;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--secondary-foreground);
  background: var(--secondary);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 14px;
}
.showcase-hero h1 {
  font: 700 clamp(38px, 4.6vw, 64px)/1.03 var(--font-heading);
  color: var(--text-primary);
  letter-spacing: 0;
  text-wrap: balance;
}
.showcase-lede {
  max-width: 610px;
  margin: 18px auto 0;
  font: 400 clamp(16px, 1.4vw, 20px)/1.58 var(--font-sans);
  color: var(--text-tertiary);
  text-wrap: pretty;
}
.showcase-cta-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.showcase-primary-action,
.showcase-secondary-action {
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 0 18px;
  font: 700 13px var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
}
.showcase-primary-action {
  background: var(--stella-blue);
  border: 1px solid var(--stella-blue);
  color: #fff;
  box-shadow: 0 14px 28px rgba(19,41,79,.18);
}
.showcase-secondary-action {
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(19,41,79,.14);
  color: var(--stella-blue);
  box-shadow: 0 8px 20px rgba(19,41,79,.06);
}
.showcase-primary-action:hover,
.showcase-secondary-action:hover {
  transform: translateY(-1px);
}
.showcase-secondary-action:hover {
  border-color: rgba(19,41,79,.28);
}

.showcase-stage {
  grid-area: stage;
  justify-self: end;
  align-self: start;
  position: sticky;
  top: 28px;
  padding: 10px 0 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse 430px 320px at 50% 47%, rgba(105,190,40,.13) 0%, rgba(19,41,79,.06) 55%, rgba(19,41,79,0) 82%);
}
/* The prototype itself is built at a fixed 402×874 canvas (every screen uses
   hard-coded pixel values), so it can't just be given a smaller width/height
   — everything inside would misalign. Scaling the whole thing down instead
   keeps it pixel-perfect while landing on a size closer to a real iPhone
   as displayed on a screen, not the oversized box a 1:1 canvas renders as. */
.device-frame {
  width: 410px;
  height: 858px;
  padding: 12px 14px 16px;
  overflow: visible;
}
.device-frame .device {
  transform: scale(0.95);
  transform-origin: top left;
  box-shadow:
    0 30px 58px rgba(19,41,79,.20),
    0 10px 22px rgba(19,41,79,.12),
    0 0 0 1px rgba(19,41,79,.24),
    inset 0 0 0 1px rgba(255,255,255,.72);
}

.showcase-reviewer-notes {
  grid-area: notes;
  width: 100%;
  align-self: start;
  margin-top: 34px;
}
.showcase-reviewer-notes .notes {
  /* `.notes` is also used, unscoped, by the in-app notes panel elsewhere
     (white card, border, fixed max-width) — override that box styling
     here so this one renders as plain content, not a nested card. */
  max-width: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 16px;
}
.showcase-reviewer-notes .notes h3 {
  font: 700 13px var(--font-heading);
  color: var(--stella-blue);
}

/* Feature tour — one button per feature, each wired to actually drive the
   prototype (see app.js DEMO_ACTIONS) so a reviewer can see it, not just
   read about it. */
.demo-feature-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.demo-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: var(--card);
  border: 1px solid rgba(19,41,79,.08);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.demo-feature:hover,
.demo-feature:focus-visible {
  border-color: var(--stella-green);
  box-shadow: 0 8px 18px rgba(19,41,79,.08);
  transform: translateY(-1px);
}
.demo-feature:active {
  transform: translateY(0);
  box-shadow: none;
}
.demo-feature-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--secondary);
  color: var(--stella-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.demo-feature-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.demo-feature-name {
  font: 700 12.5px var(--font-heading);
  color: var(--text-primary);
}
.demo-feature-desc {
  font: 400 11.5px/1.45 var(--font-sans);
  color: var(--text-tertiary);
}
.demo-feature-go {
  flex-shrink: 0;
  font-size: 20px;
  color: var(--stella-green);
}

.showcase-footer {
  grid-area: footer;
  font: 400 11.5px Inter;
  color: var(--text-disabled);
  text-align: center;
  align-self: start;
  margin-top: 26px;
}

@media (max-width: 980px) {
  body {
    justify-content: flex-start;
    padding: 28px 32px 96px;
  }
  .showcase-layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "topbar"
      "hero"
      "stage"
      "notes"
      "footer";
    justify-items: center;
    row-gap: 24px;
    min-height: 0;
  }
  .showcase-topbar {
    width: 100%;
    margin-bottom: 6px;
  }
  .showcase-hero {
    margin-top: 0;
  }
  .showcase-stage {
    position: relative;
    top: auto;
    justify-self: center;
    padding-top: 0;
  }
  .showcase-reviewer-notes {
    margin-top: 0;
  }
}

@media (max-width: 520px) {
  .showcase-layout {
    overflow: hidden;
  }
  .showcase-topbar {
    gap: 16px;
  }
  .showcase-reset span {
    display: none;
  }
  .showcase-hero h1 {
    font-size: 34px;
  }
  .showcase-lede {
    font-size: 15px;
  }
  .showcase-cta-row {
    align-items: stretch;
    flex-direction: column;
  }
  .showcase-primary-action,
  .showcase-secondary-action {
    width: 100%;
  }
  .device-frame {
    width: 354px;
    height: 742px;
    padding: 10px 12px 14px;
  }
  .device-frame .device {
    transform: scale(0.821);
  }
}

/* ── iOS device frame ───────────────────────────────────────── */

.device {
  width: 402px;
  height: 874px;
  max-width: 100%;
  border-radius: 48px;
  overflow: hidden;
  position: relative;
  background: #F2F2F7;
  box-shadow: 0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  flex-shrink: 0;
}

.dynamic-island {
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 126px; height: 37px;
  border-radius: 24px;
  background: #000;
  z-index: 80;
}

.status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 0;
  height: 47px;
  font: 600 15px -apple-system, system-ui;
  color: #000;
  pointer-events: none;
}
.status-bar .time { font-weight: 600; }
.status-bar .icons { display: flex; align-items: center; gap: 5px; }
/* Dark screens (Launch, Face ID) sit on navy — the status bar flips to
   white to match real iOS behavior, driven by .device.status-dark in JS. */
.device.status-dark .status-bar { color: #fff; }

.screen-stack {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--background);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.32,.72,0,1), filter .34s ease;
  z-index: 1;
  visibility: hidden;
}
.screen.active { transform: translateX(0); z-index: 5; visibility: visible; }
.screen.behind { transform: translateX(-22%); filter: brightness(.86); z-index: 2; visibility: visible; }

.home-indicator {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 8px;
  pointer-events: none;
}
.home-indicator span {
  width: 139px; height: 5px;
  border-radius: 100px;
  background: rgba(0,0,0,0.25);
}

/* ── Shared screen chrome ───────────────────────────────────── */

.topbar {
  flex: none;
  padding: 56px 16px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border-secondary);
  display: flex;
  align-items: center;
  gap: 11px;
}
.topbar .back {
  font-size: 20px;
  color: var(--stella-blue);
  flex: none;
  display: flex;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  margin: -4px;
}
.topbar .titles { flex: 1; min-width: 0; }
.topbar .title { font: 600 15px/20px var(--font-heading); color: var(--text-primary); }
.topbar .subtitle { font: 400 12px/16px Inter; color: var(--text-quarternary); }
.topbar .action {
  font: 600 14px Inter;
  color: var(--stella-blue);
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin: -4px;
}
.topbar .action:disabled { color: var(--text-disabled); cursor: default; }

.scroll {
  flex: 1;
  overflow: auto;
  padding: 16px 16px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}

.card {
  flex: none;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.card-hd {
  padding: 11px 14px;
  background: #FAFBFC;
  border-bottom: 1px solid var(--slate-100);
  font: 700 10.5px Inter;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--slate-400);
  display: flex;
  align-items: center;
  gap: 7px;
}
.card-hd .lock { margin-left: auto; font-size: 13px; color: var(--slate-400); }

.row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--slate-100);
  background: none;
  border-left: none; border-right: none; border-top: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  cursor: default;
}
.row:last-child { border-bottom: none; }
button.row { cursor: pointer; }
button.row:active { background: var(--slate-50); }
.row .ic { font-size: 18px; color: var(--text-tertiary); flex: none; }
.row .main { flex: 1; min-width: 0; }
.row .t1 { font: 500 13.5px Inter; color: var(--text-primary); }
.row .t2 { font: 400 11.5px Inter; color: var(--text-quarternary); margin-top: 1px; }
.row .val { font: 500 13px Inter; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .lbl { font: 400 13px Inter; color: var(--text-quarternary); flex: 1; }
.row .chev { font-size: 13px; color: var(--slate-400); flex: none; }

.info-banner {
  flex: none;
  display: flex;
  gap: 9px;
  padding: 12px 13px;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: var(--radius-md);
}
.info-banner.neutral { background: #FAFBFC; border-color: var(--border-secondary); }
.info-banner .ic { font-size: 16px; color: var(--info-700); flex: none; margin-top: 1px; }
.info-banner.neutral .ic { color: var(--slate-400); }
.info-banner p { margin: 0; font: 400 12px/17px Inter; color: #1E40AF; }
.info-banner.neutral p { color: var(--text-quarternary); }

/* ── Forms ──────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 5px; }
.field label {
  display: block;
  font: 500 13px Inter;
  color: var(--text-secondary);
}
.field .hint { font: 400 11.5px/16px Inter; color: var(--text-quarternary); }
.field-row { display: flex; align-items: center; gap: 8px; }

.input {
  display: flex;
  height: 44px;
  width: 100%;
  min-width: 0;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  background: #fff;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus {
  border-color: var(--stella-green);
  box-shadow: 0 0 0 3px rgba(105,190,40,.2);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font: 500 12px Inter;
  line-height: 1.35;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  width: fit-content;
}
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-success { background: var(--success-100); color: var(--success-700); }

/* Switch */
.switch {
  display: inline-flex;
  align-items: center;
  width: 32px; height: 18px;
  padding: 1px;
  border-radius: 9999px;
  background: var(--switch-background);
  cursor: pointer;
  border: none;
  flex: none;
  transition: background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.switch .thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transform: translateX(0);
  transition: transform .15s ease;
}
.switch[aria-checked="true"] { background: var(--stella-green); }
.switch[aria-checked="true"] .thumb { transform: translateX(14px); }
.switch:focus-visible { box-shadow: 0 0 0 3px rgba(105,190,40,.25); }
.switch:disabled { opacity: .45; cursor: not-allowed; }

/* Rows with a permanently-disabled switch (e.g. "not configured for this
   rooftop" alert types) read as placeholder-gray, matching Figma. */
.row:has(.switch:disabled) .t1, .row:has(.switch:disabled) .ic { color: var(--text-disabled); }

button { font-family: var(--font-sans); }

/* ── Dashboard (base) screen ────────────────────────────────── */

.dash-hero {
  flex: none;
  height: 110px;
  background: linear-gradient(135deg, var(--stella-blue), var(--stella-blue-mid));
  border-radius: 14px;
  padding: 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dash-hero .k { font: 700 10.5px Inter; letter-spacing: .07em; text-transform: uppercase; opacity: .7; }
.dash-hero .v { font: 700 26px var(--font-heading); }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: none; }
.dash-tile {
  height: 88px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dash-tile .k { font: 500 11.5px Inter; color: var(--text-quarternary); }
.dash-tile .v { font: 700 20px var(--font-heading); color: var(--text-primary); }
.dash-list { display: flex; flex-direction: column; gap: 10px; }

.avatar-btn {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--stella-blue);
  color: #fff;
  font: 600 13.5px Inter;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
}
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.avatar-btn:active { filter: brightness(.92); }

.avatar-lg {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--stella-blue);
  color: #fff;
  font: 600 17px Inter;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
}
.avatar-lg img, .avatar-xl img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xl {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--stella-blue);
  color: #fff;
  font: 600 24px Inter;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Sheet ──────────────────────────────────────────────────── */

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }

.account-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 16px 16px 30px;
  box-shadow: 0 -24px 48px -12px rgba(16,24,40,.25);
  z-index: 50;
  transform: translateY(105%);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
  max-height: 88%;
  overflow: auto;
}
.account-sheet.open { transform: translateY(0); }

.sheet-grabber {
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--border-secondary);
  margin: 0 auto 16px;
  cursor: pointer;
}

.identity {
  display: flex;
  align-items: center;
  gap: 12px;
}
.identity .name { font: 600 16px/21px var(--font-heading); color: var(--text-primary); }
.identity .email {
  font: 400 12.5px/17px Inter; color: var(--text-quarternary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rooftop-pill {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding: 12px 13px;
  background: #F0FDE4;
  border: 1px solid #DCEBCB;
  border-radius: var(--radius-md);
  width: 100%;
  cursor: pointer;
  border-left: none; border-right: none; border-top: none;
  text-align: left;
  font-family: var(--font-sans);
}
.rooftop-pill:active { filter: brightness(.98); }
.rooftop-pill .ic { font-size: 19px; color: var(--stella-blue); flex: none; }
.rooftop-pill .main { flex: 1; min-width: 0; }
.rooftop-pill .k { font: 700 10.5px Inter; letter-spacing: .07em; text-transform: uppercase; color: #3F7A15; }
.rooftop-pill .v { font: 600 13.5px/18px Inter; color: var(--stella-blue); margin-top: 2px; }
.rooftop-pill .s { font: 400 11.5px/16px Inter; color: #3F7A15; }
.rooftop-pill .chev { font-size: 15px; color: #3F7A15; flex: none; }

.sheet-list { display: flex; flex-direction: column; gap: 1px; margin-top: 14px; }
.sheet-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px; border-radius: 6px;
  background: none; border: none; width: 100%; text-align: left;
  cursor: pointer; font-family: var(--font-sans);
}
.sheet-item:active { background: var(--slate-50); }
.sheet-item .ic { font-size: 19px; color: var(--text-tertiary); flex: none; }
.sheet-item .lbl { flex: 1; font: 500 14.5px Inter; color: var(--text-secondary); }
.sheet-item .hint { font: 400 12.5px Inter; color: var(--slate-400); flex: none; }
.sheet-item .chev { font-size: 14px; color: var(--slate-400); flex: none; }

.sheet-divider { height: 1px; background: var(--slate-100); margin: 12px 0; }

.sheet-item.danger .ic, .sheet-item.danger .lbl { color: var(--error-600); }

.sheet-version {
  text-align: center;
  font: 400 11px Inter;
  color: var(--slate-400);
  margin-top: 8px;
}

/* ── Action sheet (sign out confirm) ───────────────────────── */

.action-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 60;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.action-backdrop.open { opacity: 1; pointer-events: auto; }

.action-sheet {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 65;
  transform: translateY(115%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.action-sheet.open { transform: translateY(0); }
.action-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  overflow: hidden;
}
.action-btn {
  display: block;
  width: 100%;
  padding: 15px;
  text-align: center;
  font: 500 17px Inter;
  color: var(--stella-blue);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(60,60,67,.13);
  cursor: pointer;
}
.action-btn:last-child { border-bottom: none; }
.action-btn.destructive { color: var(--error-600); font-weight: 600; }
.action-btn:active { background: rgba(0,0,0,.04); }
.action-card.cancel .action-btn { font-weight: 600; }

/* ── Toast ──────────────────────────────────────────────────── */

.toast {
  position: absolute;
  left: 50%; bottom: 46px;
  transform: translate(-50%, 12px);
  background: rgba(24,29,39,.94);
  color: #fff;
  font: 500 13px Inter;
  padding: 10px 16px;
  border-radius: 999px;
  z-index: 95;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  white-space: nowrap;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── Auth: shared dark-screen chrome (Launch, Face ID) ───────── */

.screen[data-screen="launch"], .screen[data-screen="faceid"] {
  background: var(--stella-blue);
}
.screen[data-screen="launch"].sheet-behind {
  filter: blur(2px);
  opacity: .35;
  transition: filter .28s ease, opacity .28s ease;
}

.auth-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 28px;
}
.auth-actions {
  flex: none;
  padding: 0 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-logo { width: 186px; height: auto; }
.auth-title {
  font: 600 26px/33px var(--font-heading);
  color: #fff;
  letter-spacing: -.02em;
  margin-top: 26px;
  text-wrap: pretty;
}
.auth-sub {
  font: 400 14px/21px Inter;
  color: rgba(255,255,255,.6);
  margin-top: 10px;
  text-wrap: pretty;
}
.auth-link-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px;
  cursor: pointer;
}
.auth-link-row .ic { font-size: 14px; color: rgba(255,255,255,.45); }
.auth-link-row span.lbl { font: 400 12.5px Inter; color: rgba(255,255,255,.55); }
.auth-hint-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: default;
}
.auth-hint-row .ic { font-size: 14px; color: rgba(255,255,255,.45); flex: none; }
.auth-hint-row span.lbl { font: 400 12px/17px Inter; color: rgba(255,255,255,.5); text-align: center; }
.auth-version { text-align: center; font: 400 11px Inter; color: rgba(255,255,255,.32); margin-top: 4px; }

/* Email-first field on the dark Launch screen */
.auth-field { display: flex; flex-direction: column; gap: 7px; margin-top: 26px; }
.auth-field label { font: 500 12.5px Inter; color: rgba(255,255,255,.75); }
.auth-input-wrap {
  display: flex; align-items: center; gap: 9px;
  height: 52px; padding: 0 14px; border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.24);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-input-wrap:focus-within {
  border-color: var(--stella-green);
  box-shadow: 0 0 0 3px rgba(105,190,40,.22);
}
.auth-input-wrap .ic { font-size: 18px; color: rgba(255,255,255,.6); flex: none; }
.auth-input-wrap input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font: 400 15px Inter; color: #fff; padding: 0;
}
.auth-input-wrap input::placeholder { color: rgba(255,255,255,.4); }

/* ── Buttons ──────────────────────────────────────────────────── */

.btn {
  height: 52px;
  border-radius: 6px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font: 600 15px Inter;
  cursor: pointer;
  width: 100%;
}
.btn:active { filter: brightness(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.btn-green { background: var(--stella-green); color: #fff; box-shadow: 0 4px 14px rgba(105,190,40,.3); }
.btn-navy { background: var(--stella-blue); color: #fff; }
.btn-ghost-dark { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.24); color: #fff; }
.btn-outline {
  height: 48px;
  background: #fff;
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  box-shadow: var(--shadow-xs);
}

/* ── Sign-in / reset form chrome ─────────────────────────────── */

.logomark { width: 26px; height: 33px; flex: none; display: block; }
.welcome-title { font: 600 21px/27px var(--font-heading); color: var(--text-primary); letter-spacing: -.01em; margin-top: 16px; text-wrap: pretty; }
.welcome-sub { font: 400 13.5px/20px Inter; color: var(--text-tertiary); margin-top: 5px; text-wrap: pretty; }
.welcome-sub.tight { margin-top: 7px; color: var(--text-tertiary); }

.signin-fields { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.link-text { font: 500 12.5px Inter; color: var(--stella-blue); background: none; border: none; padding: 0; cursor: pointer; flex: none; }
.link-text.strong { font-weight: 600; }

.password-wrap { position: relative; }
.password-wrap .input { padding-right: 40px; }
.password-toggle {
  position: absolute; top: 0; right: 0; height: 100%; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: var(--text-quarternary); font-size: 17px;
}
.input.invalid { border-color: var(--error-600); box-shadow: 0 0 0 3px rgba(220,38,38,.15); }

.keep-signed-in {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 18px; padding: 12px 13px;
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-md);
}
.keep-signed-in .switch { margin-top: 1px; }
.keep-signed-in .t1 { font: 500 13px Inter; color: var(--text-primary); }
.keep-signed-in .t2 { font: 400 11.5px/16px Inter; color: var(--text-quarternary); margin-top: 2px; text-wrap: pretty; }

.divider-row { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.divider-row .line { flex: 1; height: 1px; background: var(--border-secondary); }
.divider-row .lbl { font: 500 11px Inter; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); flex: none; }

.alert-banner {
  padding: 12px 13px;
  border-radius: var(--radius-md);
}
.alert-banner.destructive { background: var(--error-100); border: 1px solid #FCA5A5; }
.alert-banner .t1 { font: 600 13px Inter; color: var(--error-700); }
.alert-banner p { margin: 4px 0 0; font: 400 12.5px/18px Inter; color: #7F1D1D; text-wrap: pretty; }

.icon-tile {
  width: 46px; height: 46px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.icon-tile.orange { background: #FEF0E6; }
.icon-tile.navy { background: #EAF0F9; }
.icon-tile-round {
  width: 56px; height: 56px; border-radius: 50%;
  background: #F0FDE4; border: 1px solid #DCEBCB;
  display: flex; align-items: center; justify-content: center; flex: none;
}

.avatar-sm {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--stella-blue); color: #fff;
  font: 600 13px Inter; display: flex; align-items: center; justify-content: center;
  flex: none;
}
.contact-card {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 13px 14px;
  background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-xl);
}
.contact-card .name { font: 600 13.5px Inter; color: var(--text-primary); }
.contact-card .role { font: 400 12px Inter; color: var(--text-quarternary); }
.contact-card .ic { font-size: 19px; color: var(--stella-blue); flex: none; background: none; border: none; cursor: pointer; }

.text-link-row {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 16px;
}
.text-link-row .divider { width: 1px; height: 13px; background: var(--slate-200); }
.text-link-row button { font: 500 13px Inter; background: none; border: none; cursor: pointer; padding: 0; }

.badge-outline { background: transparent; border: 1px solid var(--border-primary); color: var(--text-secondary); }

/* ── Provider sheet (federated SSO — Okta mock in a "web sheet") ─ */

.provider-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 55;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.provider-backdrop.open { opacity: 1; pointer-events: auto; }

.provider-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 52px;
  background: #fff;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 -24px 48px -12px rgba(16,24,40,.35);
  z-index: 58;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
}
.provider-sheet.open { transform: translateY(0); }

.provider-toolbar {
  flex: none;
  padding: 11px 14px;
  background: var(--background);
  border-bottom: 1px solid var(--slate-200);
  display: flex; align-items: center; gap: 10px;
}
.provider-toolbar .cancel {
  font: 500 14px Inter; color: var(--stella-blue); flex: none;
  background: none; border: none; cursor: pointer; padding: 0;
}
.provider-toolbar .mid { flex: 1; min-width: 0; text-align: center; }
.provider-toolbar .mid .t1 { font: 600 12.5px/16px Inter; color: var(--text-primary); }
.provider-toolbar .mid .url-row { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 1px; }
.provider-toolbar .mid .url-row i { font-size: 9px; color: #3F7A15; }
.provider-toolbar .mid .url-row span {
  font: 400 10.5px Inter; color: var(--text-quarternary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.provider-toolbar .reload { font-size: 16px; color: var(--text-quarternary); flex: none; background: none; border: none; cursor: pointer; }

.provider-body {
  flex: 1; overflow: auto; padding: 34px 26px;
  display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff;
}
.provider-org-title { font: 600 18px/24px var(--font-heading); color: var(--text-primary); margin-top: 16px; }
.provider-org-sub { font: 400 13px/19px Inter; color: var(--text-quarternary); margin-top: 4px; }

.provider-fields { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 26px; text-align: left; }
.provider-field label { font: 500 12px Inter; color: var(--text-secondary); display: block; margin-bottom: 5px; }
.provider-field-static {
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 12px; border: 1px solid var(--border-primary); border-radius: 4px; background: var(--background);
}
.provider-field-static span {
  flex: 1; min-width: 0; font: 400 14px Inter; color: var(--text-tertiary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.provider-field-static i { font-size: 12px; color: var(--slate-400); flex: none; }
.provider-pass {
  display: flex; align-items: center; height: 42px; padding: 0 12px;
  border: 1px solid #2563EB; border-radius: 4px; box-shadow: 0 0 0 2px rgba(37,99,235,.16);
}
.provider-pass span { font: 400 14px Inter; color: var(--text-primary); }
.provider-signin-btn {
  height: 44px; margin-top: 6px; border-radius: 4px; border: none;
  background: var(--stella-blue); font: 600 14px Inter; color: #fff; cursor: pointer;
}
.provider-links { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.provider-links span { font: 400 12.5px Inter; color: #2563EB; }
.provider-footer { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 26px; }
.provider-footer i { font-size: 13px; color: var(--slate-400); flex: none; }
.provider-footer span { font: 400 11px Inter; color: var(--slate-400); }

/* ── Locked email chip (unfederated password screen) ─────────── */

.email-chip {
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px; padding: 11px 13px;
  background: var(--background); border: 1px solid var(--slate-200); border-radius: 6px;
}
.email-chip .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--stella-blue); color: #fff; font: 600 11px Inter;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.email-chip span.addr {
  flex: 1; min-width: 0; font: 500 13px Inter; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.email-chip button { font: 600 12.5px Inter; color: var(--stella-blue); background: none; border: none; cursor: pointer; padding: 0; flex: none; }

/* ── Face ID unlock screen ────────────────────────────────────── */

.faceid-hero {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 30px;
}
.faceid-avatar {
  width: 74px; height: 74px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; flex: none;
  font: 600 24px Inter; color: #fff;
}
.faceid-name { font: 600 20px/26px var(--font-heading); color: #fff; margin-top: 18px; text-align: center; }
.faceid-org { font: 400 13px/19px Inter; color: rgba(255,255,255,.55); margin-top: 3px; text-align: center; }
.alert-pill {
  display: flex; align-items: center; gap: 9px;
  margin-top: 26px; padding: 11px 15px;
  background: rgba(220,38,38,.16); border: 1px solid rgba(220,38,38,.34);
  border-radius: 999px; background-clip: padding-box;
  border: none; cursor: default;
}
.alert-pill { border: 1px solid rgba(220,38,38,.34); }
.alert-pill .count {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--error-600); color: #fff;
  font: 600 11px Inter; text-align: center; line-height: 22px; flex: none;
}
.alert-pill .lbl { font: 500 13px Inter; color: #fff; }
.scan-tile {
  width: 60px; height: 60px; border-radius: 14px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  margin-top: 40px; cursor: pointer;
}
.scan-tile:active { background: rgba(255,255,255,.16); }
.scan-hint { font: 500 14px/20px Inter; color: rgba(255,255,255,.8); margin-top: 14px; text-align: center; }

/* ── Reset password screens ──────────────────────────────────── */

.timer-pill {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; padding: 7px 12px;
  background: #fff; border: 1px solid var(--slate-200); border-radius: 999px;
}
.timer-pill .ic { font-size: 14px; color: var(--text-quarternary); flex: none; }
.timer-pill .val { font: 500 12.5px Inter; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.reset-sent-title { font: 600 21px/27px var(--font-heading); color: var(--text-primary); letter-spacing: -.01em; margin-top: 18px; }
.reset-sent-sub { font: 400 13.5px/20px Inter; color: var(--text-tertiary); margin-top: 8px; text-wrap: pretty; }
.reset-sent-sub .em { font-weight: 600; color: var(--text-primary); }

/* ── Notes panel below the device ──────────────────────────── */

.notes {
  max-width: 402px;
  width: 100%;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-xl);
  padding: 18px 20px;
}
.notes h3 { font: 600 13px Inter; color: var(--text-primary); margin-bottom: 8px; }
.notes ul { margin: 0; padding-left: 18px; }
.notes li { font: 400 12.5px/1.7 Inter; color: var(--text-tertiary); }
.notes code {
  font: 11.5px ui-monospace, Menlo, monospace;
  background: var(--slate-100);
  padding: 1px 5px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   MVP Phase 1 — Insights / Alerts / Conversations / Customers
   Built from the "MVP Phase 1 Screens" Figma section. New primary
   tab-bar navigation replaces the old single-screen Dashboard.
   ═══════════════════════════════════════════════════════════════ */

/* ── New-style topbar (brand mark + title + trailing actions) ── */

.topbar2 {
  flex: none;
  padding: 56px 16px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border-secondary);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.topbar2 .row1 { display: flex; align-items: center; gap: 12px; }
.topbar2 .brand { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.topbar2 .brand i { font-size: 20px; color: var(--stella-green); flex: none; }
.topbar2 .brand .brand-logomark { color: var(--stella-green); flex: none; }
.topbar2 .brand .t { font: 600 15px var(--font-heading); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar2 .icon-btn {
  flex: none; width: 36px; height: 36px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; color: var(--text-secondary);
}
.topbar2 .icon-btn:active { background: var(--slate-50); }
.topbar2 .search-row {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; background: var(--slate-100);
  border: 1px solid var(--border-secondary); border-radius: var(--radius-md);
}
.topbar2 .search-row i { font-size: 15px; color: var(--text-disabled); flex: none; }
.topbar2 .search-row input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font: 400 14px Inter; color: var(--text-primary);
}
.topbar2 .search-row input::placeholder { color: var(--text-disabled); }

/* ── Bottom tab bar (persistent nav, replaces plain topbar-only chrome) ── */

.tabbar {
  flex: none;
  height: 86px;
  padding-bottom: 20px;
  background: #fff;
  border-top: 1px solid var(--border-secondary);
  display: flex;
  align-items: flex-start;
  position: relative;
}
.tab-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  position: relative;
}
.tab-item i { font-size: 21px; color: var(--text-disabled); }
.tab-item span.lbl { font: 500 10px Inter; color: var(--text-disabled); }
.tab-item.active i, .tab-item.active span.lbl { color: var(--stella-blue); }
.tab-item.active span.lbl { font-weight: 700; }
.tab-item .tab-badge {
  position: absolute; top: 3px; left: 50%; transform: translateX(2px);
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
  background: var(--error-600); color: #fff;
  font: 600 9px Inter; display: flex; align-items: center; justify-content: center;
}
.tab-fab {
  flex: none;
  width: 56px; height: 56px; border-radius: 28px;
  background: var(--stella-green);
  box-shadow: 0 8px 20px rgba(105,190,40,.35);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 22px;
  margin: -8px 6px 0;
}
.tab-fab:active { filter: brightness(.96); }

/* Screens that carry the tab bar need scroll content to not collide with it */
.scroll.has-tabbar { padding-bottom: 20px; }

/* ── Insights / Service Dashboard ─────────────────────────────── */

.date-pill-row { flex: none; }
.date-pill {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 36px; padding: 0 13px;
  background: #fff; border: 1px solid var(--border-primary); border-radius: var(--radius-md);
  font: 600 13px Inter; color: var(--text-secondary);
  cursor: pointer;
}
.date-pill i:first-child { font-size: 14px; }
.date-pill i:last-child { font-size: 10px; }

.insights-hero {
  flex: none;
  border-radius: var(--radius-xl);
  padding: 16px 20px 24px;
  background: linear-gradient(122deg, #13294F 0%, #1b3c6e 50%, #13294F 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.insights-hero .eyebrow { font: 600 12px Inter; letter-spacing: .07em; text-transform: uppercase; color: var(--stella-green); }
.insights-hero .headline { font: 600 22px/28px var(--font-heading); letter-spacing: -.01em; text-wrap: pretty; }
.insights-hero .headline b { color: var(--stella-green); font-weight: 600; }
.insights-hero .subline { font: 500 13px/19px Inter; color: rgba(255,255,255,.85); margin-top: 4px; }
.insights-hero .subline b { color: var(--stella-green); font-weight: 600; }
.insights-hero .delta-row { display: flex; gap: 8px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px;
  font: 600 12px Inter; white-space: nowrap;
}
.hero-badge.solid { background: #4F934B; color: #fff; }
.hero-badge.ghost { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.hero-badge i { font-size: 11px; }

.hero-stats { display: flex; flex-direction: column; gap: 12px; }
.hero-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1);
}
.hero-stat .ic-circle {
  width: 40px; height: 40px; border-radius: 999px; flex: none;
  background: rgba(105,190,40,.18); display: flex; align-items: center; justify-content: center;
}
.hero-stat .ic-circle i { font-size: 19px; color: #fff; }
.hero-stat .body { flex: 1; min-width: 0; }
.hero-stat .v { font: 600 26px/1 var(--font-heading); letter-spacing: -.02em; }
.hero-stat .k { font: 500 13px Inter; color: rgba(255,255,255,.8); margin-top: 4px; }
.hero-stat .delta { flex: none; }

.insights-card {
  flex: none; background: #fff; border-radius: var(--radius-xl);
  border: 1px solid var(--border-secondary);
  padding: 20px;
  display: flex; flex-direction: column;
}
.insights-card .top-row { display: flex; align-items: flex-end; gap: 14px; }
.insights-card .ring {
  flex: none; width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.insights-card .ring i { font-size: 20px; }
.insights-card .top-body { flex: 1; min-width: 0; }
.insights-card .k-row { display: flex; align-items: center; gap: 6px; }
.insights-card .k {
  font: 700 11px Inter; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400);
}
.insights-card .k i { font-size: 12px; color: var(--slate-300); }
.insights-card .big-v { font: 600 28px/1.3 var(--font-heading); color: var(--text-primary); letter-spacing: -.02em; margin-top: 2px; }
.insights-card .delta-line { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.insights-card .delta-line .txt { font: 400 12px Inter; color: var(--text-quarternary); }

.insights-subrow {
  border-top: 1px dashed var(--border-secondary);
  margin-top: 16px; padding-top: 14px;
}
.insights-subrow + .insights-subrow { margin-top: 12px; }
.insights-subrow .head { display: flex; align-items: center; justify-content: space-between; }
.insights-subrow .head .lbl { font: 400 12px Inter; color: var(--text-secondary); }
.insights-subrow .head .val { font: 600 18px var(--font-heading); }
.insights-subrow .head .val.green { color: var(--stella-green); }
.insights-subrow .head .val.navy { color: var(--stella-blue); }
.insights-subrow .bar-track {
  height: 5px; border-radius: 999px; background: var(--slate-100); margin-top: 8px; overflow: hidden;
}
.insights-subrow .bar-fill { height: 100%; border-radius: 999px; background: var(--stella-green); }
.insights-subrow .bar-fill.navy { background: var(--stella-blue); }
.insights-subrow .caption { font: 400 12px/17px Inter; color: var(--text-quarternary); margin-top: 6px; }
.insights-subrow .caption b { font-weight: 600; color: var(--text-primary); }

.compare-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.compare-row .lbl { font: 400 12px Inter; color: var(--text-quarternary); }
.compare-row .lbl.current { font-weight: 500; color: var(--text-primary); }
.compare-row .val { font: 400 12px Inter; color: var(--text-quarternary); }
.compare-row .val.current { color: var(--stella-green); }

/* ── Alerts Dashboard ──────────────────────────────────────────── */

.filter-row { display: flex; gap: 8px; flex: none; }
.filter-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.filter-scroll::-webkit-scrollbar { display: none; }
.filter-pill {
  flex: none; display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 13px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-secondary);
  font: 500 13px Inter; color: var(--text-tertiary);
  cursor: pointer; white-space: nowrap;
}
.filter-pill i { font-size: 13px; }
.filter-pill .n { font: 500 11px Inter; color: var(--text-disabled); }
.filter-pill.active { background: var(--stella-blue); border-color: var(--stella-blue); color: #fff; }
.filter-pill.active .n { color: rgba(255,255,255,.7); }

.alert-day-label {
  font: 600 11px Inter; letter-spacing: .06em; color: var(--text-quarternary);
  text-transform: uppercase; flex: none;
}
.alert-card {
  flex: none; background: #fff; border-radius: 6px;
  padding: 13px 14px; display: flex; flex-direction: column; gap: 12px;
}
.alert-card.unread { border-left: 3px solid var(--info-700); }
.alert-card .hd { display: flex; gap: 10px; align-items: center; }
.alert-card .init {
  flex: none; width: 32px; height: 32px; border-radius: 999px;
  background: var(--stella-blue); color: #fff; font: 500 12px Inter;
  display: flex; align-items: center; justify-content: center;
}
.alert-card .who { flex: 1; min-width: 0; }
.alert-card .who .name { font: 600 14px Inter; color: var(--text-primary); }
.alert-card .who .phone { font: 400 12px Inter; color: var(--text-quarternary); margin-top: 1px; }
.alert-card .meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.alert-card .meta .when { font: 400 12px Inter; color: var(--text-disabled); }
.alert-card .type-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 99px;
  background: var(--slate-100); border: 1px solid var(--border-secondary);
  font: 500 11px Inter; color: var(--text-tertiary);
}
.alert-card .type-pill i { font-size: 11px; }
.alert-card .body-txt { font: 400 13px/1.45 Inter; color: var(--text-tertiary); }
.alert-card .view-more { font: 500 12px Inter; color: var(--info-700); background: none; border: none; padding: 0; cursor: pointer; align-self: flex-start; }
.alert-card .badge.hot { background: var(--error-100); color: var(--error-700); }

.alerts-end-note {
  flex: none; display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 4px 8px; font: 400 12px/17px Inter; color: var(--text-quarternary); text-align: left;
}
.alerts-end-note i { font-size: 15px; color: var(--slate-300); flex: none; margin-top: 1px; }

.voicemail-player {
  display: flex; align-items: center; gap: 8px;
  background: var(--slate-50); border: 1px solid var(--border-secondary);
  border-radius: 10px; padding: 8px 10px;
}
.voicemail-player .play-btn {
  flex: none; width: 26px; height: 26px; border-radius: 13px;
  background: var(--stella-blue); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px;
}
.voicemail-player .t { font: 400 12px Inter; color: var(--text-quarternary); flex: none; font-variant-numeric: tabular-nums; }
.voicemail-player .waves { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2px; height: 20px; overflow: hidden; }
.voicemail-player .waves span { flex: none; width: 3px; border-radius: 2px; background: var(--slate-300); }
.voicemail-player .speed { flex: none; padding: 3px 6px; border-radius: 4px; background: var(--stella-blue); color: #fff; font: 600 10px Inter; }

.alert-actions { display: flex; gap: 8px; }
.alert-btn {
  flex: 1; height: 40px; border-radius: 8px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 13px Inter;
}
.alert-btn.primary { background: var(--stella-blue); color: #fff; }
.alert-btn.outline { background: #fff; border: 1px solid var(--border-primary); color: var(--text-secondary); }
.alert-btn i { font-size: 14px; }

/* ── Conversation thread ──────────────────────────────────────── */

.convo-topbar { flex: none; padding: 56px 16px 12px; background: #fff; border-bottom: 1px solid var(--border-secondary); display: flex; align-items: center; gap: 10px; }
.convo-topbar .back { font-size: 20px; color: var(--stella-blue); background: none; border: none; cursor: pointer; padding: 4px; margin: -4px; flex: none; }
.convo-topbar .init { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--stella-blue); color: #fff; font: 500 12px Inter; display: flex; align-items: center; justify-content: center; }
.convo-topbar .who { flex: 1; min-width: 0; }
.convo-topbar .who .name { font: 600 14px Inter; color: var(--text-primary); }
.convo-topbar .who .phone { font: 400 12px Inter; color: var(--text-quarternary); margin-top: 1px; }
.location-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  padding: 2px 7px; border-radius: 999px;
  background: var(--secondary); color: var(--secondary-foreground);
  font: 600 10.5px Inter; width: fit-content;
}
.location-badge i { font-size: 11px; }
.convo-list-row .location-tag {
  display: flex; align-items: center; gap: 4px; margin-top: 3px;
  font: 500 11px Inter; color: var(--stella-blue);
}
.convo-list-row .location-tag i { font-size: 11px; }
.convo-topbar .call-btn { flex: none; width: 36px; height: 36px; border-radius: 8px; background: #fff; border: 1px solid var(--border-primary); display: flex; align-items: center; justify-content: center; color: var(--stella-blue); font-size: 16px; cursor: pointer; }

.convo-thread { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--background); }
.convo-day { text-align: center; font: 600 11px Inter; color: var(--text-disabled); }
.msg-row { display: flex; flex-direction: column; gap: 6px; max-width: 82%; }
.msg-row.sent { align-self: flex-end; align-items: flex-end; }
.msg-row.received { align-self: flex-start; align-items: flex-start; }
.msg-meta { display: flex; align-items: center; gap: 6px; }
.msg-meta .who { font: 600 12px Inter; color: var(--text-primary); }
.msg-meta .when { font: 400 11px Inter; color: var(--text-disabled); }
.msg-bubble { padding: 11px 13px; border-radius: 12px; font: 400 13.5px/1.5 Inter; }
.msg-row.sent .msg-bubble { background: var(--secondary); border: 1px solid #DCEBCB; color: var(--stella-blue); border-top-right-radius: 4px; }
.msg-row.received .msg-bubble { background: #fff; border: 1px solid var(--border-secondary); color: var(--text-secondary); border-top-left-radius: 4px; }

.composer-row { flex: none; padding: 10px 16px; background: var(--background); border-top: 1px solid var(--border-secondary); }

/* ── Mocked iOS on-screen keyboard ─────────────────────────────── */

.ios-keyboard {
  flex: none; overflow: hidden; max-height: 0;
  background: #d1d4da;
  transition: max-height .3s cubic-bezier(.32,.72,0,1);
}
.screen.keyboard-open .tabbar { display: none; }
.screen.keyboard-open .ios-keyboard { max-height: 260px; }
.ios-keyboard .kb-row { display: flex; gap: 6px; padding: 6px 4px 0; justify-content: center; }
.ios-keyboard .kb-row-mid { padding-left: 20px; padding-right: 20px; }
.ios-keyboard .kb-bottom-row { padding-bottom: 8px; }
.ios-keyboard .key {
  flex: 1; min-width: 0; height: 42px;
  background: #fff; border: none; border-radius: 5px;
  box-shadow: 0 1px 0 rgba(0,0,0,.3);
  font: 400 19px -apple-system, system-ui, sans-serif; color: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-transform: lowercase;
}
.ios-keyboard .key:active { background: #b9bdc6; }
.ios-keyboard .key-wide { flex: 1.5; background: #b6bac3; font-size: 16px; }
.ios-keyboard .key-wide:active { background: #9aa0ac; }
.ios-keyboard .key-mode, .ios-keyboard .key-emoji { flex: 1.3; background: #b6bac3; font-size: 15px; }
.ios-keyboard .key-space { flex: 6; }
.ios-keyboard .key-return { flex: 2.2; background: #b6bac3; font-size: 15px; }
.composer {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--border-primary); border-radius: 24px;
  padding: 10px 13px;
}
.composer input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font: 400 14px Inter; color: var(--text-primary);
}
.composer input::placeholder { color: var(--text-disabled); }
.composer button { flex: none; background: none; border: none; cursor: pointer; color: var(--text-quarternary); font-size: 18px; padding: 0; display: flex; }
.composer button.send { color: var(--stella-green); }

/* ── Customers (stub) ─────────────────────────────────────────── */

.stub-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 36px; gap: 12px; }
.stub-body i { font-size: 40px; color: var(--slate-300); }
.stub-body .t1 { font: 600 17px var(--font-heading); color: var(--text-primary); }
.stub-body .t2 { font: 400 13px/19px Inter; color: var(--text-quarternary); }

/* ── Customer Records listing ─────────────────────────────────── */

.customer-toolbar { display: flex; align-items: center; gap: 8px; flex: none; }
.customer-toolbar .filter-scroll2 { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; }
.customer-toolbar .filter-scroll2::-webkit-scrollbar { display: none; }
.sort-pill {
  flex: none; display: flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-secondary);
  font: 600 13px Inter; color: var(--text-secondary); cursor: pointer;
}
.sort-pill i { font-size: 11px; }

.customer-list-wrap { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.customer-scroll { flex: 1; overflow: auto; padding-right: 26px; padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
.customer-group + .customer-group { margin-top: 2px; }
.customer-section-label {
  position: sticky; top: 0; z-index: 2;
  background: var(--slate-50); padding: 6px 16px;
  font: 700 12px Inter; color: var(--text-tertiary);
}
.customer-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; background: #fff; border-bottom: 1px solid var(--border-secondary);
  width: 100%; text-align: left; cursor: pointer; border-left: none; border-right: none; border-top: none;
  font-family: var(--font-sans);
}
.customer-row:active { background: var(--slate-50); }
.customer-row .init {
  flex: none; width: 40px; height: 40px; border-radius: 999px;
  background: rgba(19,41,79,.08); color: var(--stella-blue);
  font: 600 14px Inter; display: flex; align-items: center; justify-content: center;
}
.customer-row .init.unknown { background: var(--slate-200); color: var(--text-tertiary); }
.customer-row .body { flex: 1; min-width: 0; }
.customer-row .name { font: 600 14px Inter; color: var(--text-primary); }
.customer-row .phone { display: flex; align-items: center; gap: 5px; font: 400 12.5px Inter; color: var(--text-tertiary); margin-top: 2px; }
.customer-row .phone i { font-size: 11px; color: var(--text-disabled); }
.customer-row .vehicle { font: 400 13px Inter; color: var(--text-secondary); margin-top: 3px; }
.customer-row .last-contact { font: 400 11.5px Inter; color: var(--text-disabled); margin-top: 3px; }
.customer-row .chev { flex: none; font-size: 15px; color: var(--slate-400); }
.customer-row .save-star {
  flex: none; width: 30px; height: 30px; margin: -4px 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; font-size: 17px; color: var(--slate-300);
}
.customer-row .save-star.saved { color: #F0B429; }
.customer-row .save-star:active { transform: scale(.9); }

.az-jumpbar {
  position: absolute; right: 2px; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px 2px; z-index: 3;
}
.az-jumpbar button {
  flex: 1; min-height: 0; width: 16px; background: none; border: none; cursor: pointer;
  font: 600 9.5px Inter; color: var(--slate-400); padding: 0;
}
.az-jumpbar button:disabled { color: var(--slate-200); cursor: default; }
.az-jumpbar button.has-group { color: var(--text-tertiary); }

/* ── Segmented toggle (Preferred Language) ────────────────────── */

.segmented { display: flex; height: 40px; border: 1px solid var(--border-primary); border-radius: 8px; overflow: hidden; }
.segmented button {
  flex: 1; border: none; background: #fff; cursor: pointer;
  font: 500 14px Inter; color: var(--text-secondary);
}
.segmented button + button { border-left: 1px solid var(--border-primary); }
.segmented button.active { background: var(--stella-green); color: #fff; font-weight: 600; border-left-color: #5AAA1F; }

/* ── Generic bottom sheet (Quick Actions / Date Range / Tenant) ── */

.sheet2 {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 22px 22px 0 0;
  padding: 20px 16px 34px;
  box-shadow: 0 -12px 40px rgba(16,24,40,.18);
  z-index: 56;
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  max-height: 82%;
  overflow: auto;
}
.sheet2.open { transform: translateY(0); }
.sheet2-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.4);
  z-index: 54; opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.sheet2-backdrop.open { opacity: 1; pointer-events: auto; }
.sheet2-grabber { width: 38px; height: 4px; border-radius: 2px; background: var(--border-secondary); margin: 0 auto 16px; }
.sheet2-title { font: 600 15px var(--font-heading); color: var(--text-primary); }
.sheet2-title-row { display: flex; align-items: center; justify-content: space-between; }
.sheet2-title-row .n { font: 500 12px Inter; color: var(--text-quarternary); }

.quick-sms-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px; margin-top: 16px;
  background: var(--stella-blue); border: none; border-radius: 10px;
  color: #fff; font: 600 15px Inter; cursor: pointer;
}
.quick-sms-btn i { font-size: 19px; }
.quick-sms-btn:active { filter: brightness(.95); }
.quick-sms-hint { margin: 10px 0 0; text-align: center; font: 400 12px Inter; color: var(--text-quarternary); }

.range-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.range-row {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 12px; border-radius: 10px; cursor: pointer; background: none; border: none; text-align: left; width: 100%;
}
.range-row .lbl { flex: 1; font: 500 14px Inter; color: var(--text-primary); }
.range-row .sub { font: 400 12px Inter; color: var(--text-disabled); flex: none; }
.range-row .chev { flex: none; font-size: 14px; color: var(--slate-400); }
.range-row.selected { background: #F6FBF1; border: 1px solid var(--stella-green); }
.range-row.selected .lbl { font-weight: 600; color: var(--stella-blue); }
.range-row.selected i.chk { font-size: 17px; color: var(--stella-green); flex: none; }

.sheet2-btn-row { display: flex; gap: 9px; margin-top: 16px; }
.sheet2-btn-row .btn2 { flex: 1; height: 46px; border-radius: 10px; border: none; font: 600 14px Inter; cursor: pointer; }
.sheet2-btn-row .btn2.ghost { background: #fff; border: 1px solid var(--border-primary); color: var(--text-secondary); }
.sheet2-btn-row .btn2.solid { background: var(--stella-blue); color: #fff; }

.tenant-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-primary); border-radius: 8px;
  padding: 9px 12px; margin-top: 12px;
}
.tenant-search i { font-size: 14px; color: var(--text-disabled); }
.tenant-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: 400 13px Inter; color: var(--text-primary); }
.tenant-search input::placeholder { color: var(--text-disabled); }
.tenant-group-label { font: 600 10.5px Inter; letter-spacing: .07em; text-transform: uppercase; color: var(--slate-400); margin-top: 16px; margin-bottom: 8px; }
.tenant-group-row {
  display: flex; align-items: center; gap: 11px; padding: 12px;
  border-radius: 12px; background: #F6FBF1; border: 1px solid var(--stella-green); cursor: pointer;
  width: 100%; text-align: left; font-family: var(--font-sans);
}
.tenant-group-row .ic-tile { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--stella-blue); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
.tenant-group-row .body { flex: 1; min-width: 0; }
.tenant-group-row .t1 { font: 600 14px Inter; color: var(--text-primary); }
.tenant-group-row .t2 { font: 400 12px Inter; color: var(--text-quarternary); }
.tenant-group-row i.chk { font-size: 19px; color: var(--stella-green); flex: none; }
.tenant-row {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border-radius: 10px; cursor: pointer; background: none; border: none; width: 100%; text-align: left;
}
.tenant-row .ic-tile { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--slate-100); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 15px; }
.tenant-row .body { flex: 1; min-width: 0; }
.tenant-row .t1 { font: 500 14px Inter; color: var(--text-primary); }
.tenant-row .t2 { font: 400 12px Inter; color: var(--text-quarternary); }
.tenant-row .chev { flex: none; font-size: 14px; color: var(--slate-400); }

/* ── Custom Range sheet (date inputs) ─────────────────────────── */

.custom-range-field { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.custom-range-field label { font: 500 13px Inter; color: var(--text-secondary); }
.custom-range-field input[type="date"] {
  height: 44px; padding: 0 12px; border: 1px solid var(--border-primary); border-radius: 8px;
  font: 400 14px Inter; color: var(--text-primary); background: #fff;
}
.custom-range-field input[type="date"]:focus { border-color: var(--stella-green); outline: none; box-shadow: 0 0 0 3px rgba(105,190,40,.2); }
.custom-range-hint { display: flex; gap: 8px; margin-top: 14px; padding: 11px 12px; background: var(--slate-50); border-radius: 8px; }
.custom-range-hint i { font-size: 14px; color: var(--slate-400); flex: none; margin-top: 1px; }
.custom-range-hint p { margin: 0; font: 400 12px/17px Inter; color: var(--text-quarternary); }

/* ── Conversations list (inbox) ────────────────────────────────── */

.convo-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; background: #fff; border-radius: 12px; border: 1px solid var(--border-secondary);
  width: 100%; text-align: left; cursor: pointer; font-family: var(--font-sans); flex: none;
}
.convo-list-row:active { background: var(--slate-50); }
.convo-list-row .init { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--stella-blue); color: #fff; font: 600 13px Inter; display: flex; align-items: center; justify-content: center; }
.convo-list-row .init.unknown { background: var(--slate-200); color: var(--text-tertiary); }
.convo-list-row .body { flex: 1; min-width: 0; }
.convo-list-row .top-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.convo-list-row .name { font: 600 14px Inter; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo-list-row .when { font: 400 12px Inter; color: var(--text-disabled); flex: none; }
.convo-list-row .preview { display: flex; align-items: center; gap: 4px; font: 400 12.5px Inter; color: var(--text-quarternary); margin-top: 2px; }
.convo-list-row .preview .preview-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.convo-list-row .dir-icon { flex: none; font-size: 11px; }
.convo-list-row .dir-icon.out { color: var(--stella-green); }
.convo-list-row .dir-icon.in { color: var(--info-700); }

.compose-fab-btn {
  flex: none; width: 36px; height: 36px; border-radius: 8px;
  background: #fff; border: 1px solid var(--border-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; color: var(--stella-blue);
}

/* ── Compose new message ──────────────────────────────────────── */

.compose-to-row {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; background: #fff; border-bottom: 1px solid var(--border-secondary);
}
.compose-to-row label { font: 500 13px Inter; color: var(--text-quarternary); flex: none; }
.compose-to-row input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font: 400 15px Inter; color: var(--text-primary);
}
.compose-to-row input::placeholder { color: var(--text-disabled); }
.compose-match-banner {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; background: #F6FBF1; border-bottom: 1px solid var(--border-secondary);
}
.compose-match-banner .init { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--stella-blue); color: #fff; font: 600 12px Inter; display: flex; align-items: center; justify-content: center; }
.compose-match-banner .body { flex: 1; min-width: 0; }
.compose-match-banner .t1 { font: 600 13px Inter; color: var(--text-primary); }
.compose-match-banner .t2 { font: 400 12px Inter; color: var(--text-quarternary); }
.compose-match-banner.none { background: var(--slate-50); }
.compose-match-banner.none .t1 { color: var(--text-tertiary); }
.compose-suggest-label { flex: none; padding: 12px 16px 4px; font: 600 11px Inter; letter-spacing: .06em; text-transform: uppercase; color: var(--text-disabled); }
.compose-suggest-list { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.compose-suggest-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-family: var(--font-sans);
}
.compose-suggest-row:active { background: var(--slate-50); }
.compose-suggest-row .init { flex: none; width: 36px; height: 36px; border-radius: 999px; background: rgba(19,41,79,.08); color: var(--stella-blue); font: 600 13px Inter; display: flex; align-items: center; justify-content: center; }
.compose-suggest-row .body { flex: 1; min-width: 0; }
.compose-suggest-row .t1 { font: 600 13.5px Inter; color: var(--text-primary); }
.compose-suggest-row .t2 { font: 400 12px Inter; color: var(--text-quarternary); }
.compose-start-btn-row { flex: none; padding: 14px 16px; border-top: 1px solid var(--border-secondary); background: #fff; }

/* ── Passcode gate ─────────────────────────────────────────────
   A soft, client-side lock over the whole demo — not real security, just
   enough to keep a shared link from being wide open to search engines and
   drive-by visitors. */

.lock-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, #0a1830 0%, #13294F 55%, #1c3c73 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.proto-unlocked .lock-screen, .lock-screen.unlocked { display: none; }

.lock-card {
  width: 100%; max-width: 360px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 36px 28px 30px;
  text-align: center;
}
.lock-card.shake { animation: lockShake .4s ease; }
@keyframes lockShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

.lock-icon-tile {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 18px;
  background: rgba(105,190,40,.15); border: 1px solid rgba(105,190,40,.32);
  display: flex; align-items: center; justify-content: center;
}
.lock-icon-tile i { font-size: 24px; color: var(--stella-green); }

.lock-card h1 { font: 600 20px/26px var(--font-heading); color: #fff; margin: 0 0 6px; letter-spacing: -.01em; }
.lock-card p.sub { font: 400 13px/19px Inter; color: rgba(255,255,255,.6); margin: 0 0 26px; text-wrap: pretty; }

.lock-field { text-align: left; }
.lock-field label { display: block; font: 500 12.5px Inter; color: rgba(255,255,255,.75); margin-bottom: 6px; }
.lock-input-wrap {
  display: flex; align-items: center; gap: 9px;
  height: 48px; padding: 0 14px; border-radius: 8px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lock-input-wrap:focus-within { border-color: var(--stella-green); box-shadow: 0 0 0 3px rgba(105,190,40,.22); }
.lock-input-wrap input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font: 400 15px Inter; color: #fff;
}
.lock-input-wrap input::placeholder { color: rgba(255,255,255,.4); }
.lock-input-wrap button { flex: none; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.6); font-size: 17px; padding: 0; display: flex; }

.lock-error { min-height: 16px; margin: 8px 0 14px; font: 500 12.5px Inter; color: #FCA5A5; text-align: left; }

.lock-submit {
  width: 100%; height: 48px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--stella-green); color: #fff; font: 600 15px Inter;
  box-shadow: 0 4px 14px rgba(105,190,40,.3);
}
.lock-submit:active { filter: brightness(.96); }