/* ============================================================
   TrueScreen Portal — Clean mockup
   Design tokens + semantic selectors + generous spacing
   ============================================================ */

:root {
  --ts-blue: #007afe;
  --ts-blue-dark: #006fe5;
  --ts-navy: #07204e;
  --ts-ink: #081122;
  --ts-body: #52525b;
  --ts-surface: #ffffff;
  --ts-subtle: #f7f9fd;
  --ts-surface-dark: #22283a;
  --ts-border: #e2e8ee;
  --ts-success: #0d957a;
  --ts-warning: #ff9c00;
  --ts-error: #ff3b30;
  --ts-accent-info: #4ea3ff;
  --ts-accent-indigo: #5856d6;

  --font-heading: "Raleway", system-ui, -apple-system, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-btn: 8px;
  --radius-card: 16px;
  --radius-section: 32px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(8,17,34,0.06), 0 4px 12px rgba(8,17,34,0.04);
  --shadow-hover: 0 4px 16px rgba(0,122,254,0.18);
  --shadow-cta: 0 4px 16px rgba(0,122,254,0.25);

  /* Spacing scale (8px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 56px;

  /* ==============================================================
     MOBILE TOKEN MANIFEST (single source of truth for app + docs)
     Dev-specs section reads these live via getComputedStyle.
     ============================================================== */

  /* Mobile typography — iOS HIG / Android M3 aligned */
  --ms-font-title-1: 28px;
  --ms-font-title-2: 22px;
  --ms-font-title-3: 17px;
  --ms-font-headline: 16px;
  --ms-font-body: 15px;
  --ms-font-callout: 14px;
  --ms-font-subhead: 13px;
  --ms-font-footnote: 12px;
  --ms-font-caption-1: 11px;
  --ms-font-caption-2: 10px;

  /* Mobile weights */
  --ms-weight-bold: 700;
  --ms-weight-semibold: 600;
  --ms-weight-medium: 500;
  --ms-weight-regular: 400;

  /* Mobile spacing (4pt grid, iOS/Android aligned) */
  --ms-space-2xs: 4px;
  --ms-space-xs: 8px;
  --ms-space-sm: 12px;
  --ms-space-md: 16px;
  --ms-space-lg: 20px;
  --ms-space-xl: 24px;
  --ms-space-2xl: 32px;

  /* Mobile radii */
  --ms-radius-xs: 8px;
  --ms-radius-sm: 10px;
  --ms-radius-md: 12px;
  --ms-radius-lg: 14px;
  --ms-radius-xl: 22px;
  --ms-radius-pill: 999px;

  /* Mobile content padding */
  --ms-content-pad-h: 22px;
  --ms-gap-section: 20px;
  --ms-gap-title-content: 10px;
  --ms-gap-tight: 12px;

  --sidebar-w: 260px;
  --topbar-h: 56px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ts-body);
  background: var(--ts-subtle);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }

/* ============================================================
   APP LAYOUT
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--topbar-h));
}

/* ============================================================
   TOPBAR (full width)
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  background: var(--ts-ink);
  color: #ffffff;
  padding: 0 var(--space-xl);
  height: var(--topbar-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo {
  height: 44px;
  width: auto;
  display: block;
}
/* Logo su sfondo scuro: inverti il PNG dark in versione chiara */
.topbar .brand-logo,
.plan-enterprise .brand-logo,
[data-theme="dark"] .brand-logo {
  filter: brightness(0) invert(1);
}
.brand-tag {
  margin-left: 6px;
  color: var(--ts-success);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand-tag-business { color: var(--ts-success); }
.brand-tag-personal { color: #ff9500; display: none; }
body.mockup-business .brand-tag-personal { display: none; }
body.mockup-business .brand-tag-business { display: inline; }
body.mockup-personal .brand-tag-business { display: none; }
body.mockup-personal .brand-tag-personal { display: inline; }
.topbar-end {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.topbar-credits {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.topbar-credits:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.2);
}
.topbar-credits-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.topbar-credits-coin svg { display: block; }
.topbar-credits-value { font-weight: 700; }
.topbar-credits-label {
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}
.topbar-credits-label:empty { display: none; }
.topbar-credits.is-free {
  background: rgba(246,198,74,0.12);
  border-color: rgba(246,198,74,0.35);
}
.topbar-credits.is-free:hover {
  background: rgba(246,198,74,0.2);
  border-color: rgba(246,198,74,0.55);
}
.topbar-credits.is-free .topbar-credits-label {
  color: #f6c64a;
}
.topbar-credits.is-zero {
  background: rgba(255,71,87,0.16);
  border-color: rgba(255,125,135,0.5);
  color: #ffb3b8;
  padding: 6px 14px;
  gap: 6px;
}
.topbar-credits.is-zero .topbar-credits-coin { display: none; }
.topbar-credits.is-zero .topbar-credits-value {
  color: #ffb3b8;
  font-weight: 700;
}
.topbar-credits.is-zero:hover {
  background: rgba(255,71,87,0.24);
  border-color: rgba(255,125,135,0.7);
}
.topbar-credits.is-zero::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) center / 7px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 7px no-repeat;
  display: inline-block;
  flex-shrink: 0;
}
.profile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  transition: background .15s ease;
}
.profile:hover { background: rgba(255,255,255,0.08); }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: var(--ts-blue);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
.workspace-name {
  font-size: 14px;
  font-weight: 600;
  color: #4ea3ff;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  height: calc(100vh - var(--topbar-h));
  background: var(--ts-ink);
  color: rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) 0 var(--space-md);
  overflow-y: auto;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 var(--space-sm);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-btn);
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease;
}
.menu-item svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #ffffff;
  fill: currentColor;
}
.menu-item:hover {
  background: rgba(255,255,255,0.08);
}
.menu-item.active {
  background: rgba(0,122,254,0.22);
  color: #ffffff;
}
.menu-item.active svg {
  color: var(--ts-blue);
}

/* Product cards (anchored bottom) */
.product-cards {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-sm);
}
.product-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease, border-color .15s ease;
}
.product-card:hover {
  background: rgba(0,122,254,0.1);
  border-color: rgba(0,122,254,0.35);
}
.product-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0,122,254,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ts-blue);
}
.product-icon svg { width: 20px; height: 20px; }

/* Footer sidebar */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: auto;
}
.sidebar-footer .menu-item.support svg {
  stroke: currentColor;
  fill: none;
  color: rgba(255,255,255,0.85);
}
.sidebar-footer .menu-item.support:hover svg { color: #ffffff; }
.sidebar-footer .menu-item.support.active svg { color: var(--ts-blue); }

/* ============================================================
   MAIN
   ============================================================ */
.main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topbar-h));
  padding: var(--space-2xl) var(--space-3xl) var(--space-3xl);
  gap: var(--space-2xl);
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.page-header h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ts-ink);
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background .15s ease, box-shadow .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary {
  background: var(--ts-blue);
  color: #ffffff;
}
.btn-primary:hover {
  background: var(--ts-blue-dark);
  box-shadow: var(--shadow-cta);
}
.btn-secondary {
  background: transparent;
  color: var(--ts-blue);
  border: 1px solid var(--ts-blue);
}
.btn-secondary:hover {
  background: rgba(0,122,254,0.06);
}

/* Sections */
.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.section[hidden] { display: none; }
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--ts-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 4px;
}
.eyebrow.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.see-all {
  color: var(--ts-blue);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.see-all:hover { color: var(--ts-blue-dark); }

/* ============================================================
   AI CONVERSATIONAL HERO — Google-style search bar
   ============================================================ */
.ai-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.ai-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-pill);
  padding: 8px 8px 8px 20px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ai-prompt:hover {
  box-shadow: 0 2px 8px rgba(8,17,34,0.08), 0 4px 16px rgba(8,17,34,0.06);
}
.ai-prompt:focus-within {
  border-color: var(--ts-blue);
  box-shadow: 0 0 0 3px rgba(0,122,254,0.15);
}
.ai-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ts-blue);
}
.ai-icon svg { width: 22px; height: 22px; }
.ai-input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ts-ink);
  border: 0;
  outline: none;
  padding: 10px 0;
  background: transparent;
  min-width: 0;
}
.ai-input::placeholder { color: #a0a6b3; }
.ai-mic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ts-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.ai-mic:hover {
  background: var(--ts-subtle);
  color: var(--ts-blue);
}
.ai-submit {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--ts-blue);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, box-shadow .15s ease;
}
.ai-submit:hover {
  background: var(--ts-blue-dark);
  box-shadow: var(--shadow-cta);
}
.ai-submit.is-clear {
  background: transparent;
  color: var(--ts-body);
}
.ai-submit.is-clear:hover {
  background: var(--ts-subtle);
  color: var(--ts-ink);
  box-shadow: none;
}
.ai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.ai-suggestions[hidden] { display: none; }
/* Conversational search results (appear below AI prompt on typing) */
.ai-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: 14px;
  box-shadow: 0 4px 12px rgba(8,17,34,0.04), 0 1px 3px rgba(8,17,34,0.06);
}
.ai-results[hidden] { display: none; }
/* Merged state: prompt + results feel like one continuous surface */
.ai-hero.has-results { gap: 0; }
.ai-hero.has-results .ai-prompt {
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  border-bottom-color: transparent;
}
.ai-hero.has-results .ai-prompt:focus-within {
  box-shadow: none;
  border-color: var(--ts-border);
  border-bottom-color: transparent;
}
.ai-hero.has-results .ai-results {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  border-top: 1px solid var(--ts-border);
  box-shadow: 0 6px 16px rgba(8,17,34,0.06);
}
.ai-results-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-body);
}
.ai-results-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.ai-result-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  background: #fff;
  font-family: inherit;
  color: var(--ts-ink);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.ai-result-card:hover {
  border-color: var(--ts-blue);
  box-shadow: 0 2px 8px rgba(0,122,254,0.12);
  transform: translateY(-1px);
}
.ai-result-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-btn);
  background: rgba(0,122,254,0.08);
  color: var(--ts-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ai-result-icon svg, .ai-result-svg { width: 20px; height: 20px; }
.ai-result-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ai-result-text strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ts-ink);
  line-height: 1.2;
}
.ai-result-text em {
  font-size: 11px;
  font-style: normal;
  color: var(--ts-body);
  font-weight: 500;
}
.ai-result-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--radius-btn);
  background: var(--ts-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.ai-result-cta svg { color: #fff; }
.ai-results-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ts-body);
  padding: 0 2px 2px;
}
.ai-results-hint svg { color: var(--ts-blue); flex-shrink: 0; }
.ai-results-hint #ai-results-query { color: var(--ts-ink); font-weight: 600; }
.ai-see-all {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--ts-border);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--ts-blue);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ai-see-all:hover { background: rgba(0,122,254,0.06); border-color: var(--ts-blue); }
.ai-see-all svg { color: var(--ts-blue); }

/* Search results modal */
.search-results-query {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--ts-subtle);
  border-radius: var(--radius-card);
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ts-ink);
}
.search-results-query svg { color: var(--ts-blue); flex-shrink: 0; }
.search-results-query span { overflow: hidden; text-overflow: ellipsis; }
.search-results-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-body);
  margin: 0 0 10px;
}
.search-results-section-title + .ai-results-list { margin-bottom: 22px; }
.search-results-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.guided-card-thumb {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--ts-ink);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  transition: border-color .15s ease, transform .1s ease;
}
.guided-card-thumb:hover { border-color: var(--ts-blue); transform: translateY(-1px); }
.guided-card-thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
.guided-card-thumb span { padding: 0 12px 12px; font-size: 14px; font-weight: 600; }
.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  color: var(--ts-body);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ai-chip svg { color: var(--ts-blue); width: 14px; height: 14px; flex-shrink: 0; }
.ai-chip:hover {
  border-color: var(--ts-blue);
  color: var(--ts-blue);
}

/* ============================================================
   FAVORITES grid
   ============================================================ */
.favorites-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
.favorite-wrapper {
  position: relative;
  height: 96px;
}
.favorite-wrapper > a.tile {
  height: 100%;
}
.favorite-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  color: var(--ts-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.favorite-remove svg { width: 11px; height: 11px; }
.favorite-wrapper:hover .favorite-remove,
.favorite-wrapper:focus-within .favorite-remove { opacity: 1; }
.favorite-remove:hover {
  color: var(--ts-error);
  border-color: var(--ts-error);
}

/* ============================================================
   QUICK CERTIFICATIONS grid
   ============================================================ */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: 96px 96px;
  gap: var(--space-md);
}
.conversations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 96px;
  gap: var(--space-md);
}
.tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  background: var(--ts-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .15s ease;
  min-width: 0;
}
.tile:hover { box-shadow: var(--shadow-hover); }
.tile-cover {
  flex: 0 0 33.333%;
  position: relative;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(0,122,254,0.04) 9px 10px),
    rgba(0,122,254,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ts-blue);
  overflow: hidden;
}
.tile-cover > svg {
  position: relative;
  z-index: 2;
  width: 30px;
  height: 30px;
  color: var(--ts-blue);
}
.tile-icon {
  width: 30px;
  height: 30px;
  color: var(--ts-blue);
  fill: currentColor;
}
.tile-arrow {
  width: 20px;
  height: 20px;
  color: var(--ts-blue);
  fill: currentColor;
  flex-shrink: 0;
  align-self: center;
  margin-right: 16px;
}
.tile-title {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 12px 0 16px;
  min-width: 0;
}
.tile-title > span {
  color: var(--ts-ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dropzone */
.tile.dropzone {
  grid-column: 4 / 5;
  grid-row: 1 / span 2;
  min-height: 0;
  height: 208px;
  border: 2px dashed rgba(0,122,254,0.45);
  background: rgba(0,122,254,0.04);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease;
}
.tile.dropzone:hover {
  border-color: var(--ts-blue);
  background: rgba(0,122,254,0.08);
  box-shadow: none;
}
.tile.dropzone .tile-arrow { display: none; }
.dropzone-icon {
  width: 28px;
  height: 28px;
  color: var(--ts-blue);
  fill: currentColor;
  margin-bottom: 4px;
}
.dropzone-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ts-ink);
  margin-bottom: 2px;
}
.dropzone-desc {
  font-size: 13px;
  color: var(--ts-body);
  line-height: 1.4;
  margin: 0 0 6px;
}
.dropzone-btn {
  white-space: nowrap;
  padding: 10px 20px;
  margin-bottom: 4px;
}
.dropzone-btn svg { color: currentColor; }
.dropzone-max {
  font-size: 12px;
  color: var(--ts-body);
}

/* ============================================================
   GUIDED CERTIFICATIONS
   ============================================================ */
.guided-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
.guided-card {
  display: flex;
  flex-direction: column;
  background: var(--ts-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.guided-card:hover { box-shadow: var(--shadow-hover); }
.guided-media {
  position: relative;
  display: block;
  height: 140px;
  overflow: hidden;
}
.guided-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,122,254,0.16) 0%, rgba(7,32,78,0.32) 100%);
  pointer-events: none;
}
.guided-media img {
  width: 130%;
  height: 100%;
  object-fit: cover;
  object-position: 25% 25%;
  margin-right: -30%;
}
.guided-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 20px;
}
.guided-title {
  color: var(--ts-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* ============================================================
   DISCOVER TRUESCREEN
   ============================================================ */
.discover-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.discover-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: stretch;
  background: var(--ts-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .15s ease;
}
.discover-card:hover { box-shadow: var(--shadow-hover); }
.discover-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.discover-media img {
  max-width: 100%;
  height: auto;
}
.discover-media-dark { background: var(--ts-ink); }
.discover-media-light { background: #eefaf1; }
.discover-body {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.discover-body h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--ts-ink);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.discover-body p {
  font-size: 14px;
  color: var(--ts-body);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd3dd; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--ts-body); }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1360px) {
  .main { padding: var(--space-xl) var(--space-2xl) var(--space-2xl); }
  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(220px, 1fr);
    grid-template-rows: repeat(3, 96px);
  }
  .quick-grid .tile.dropzone {
    grid-column: 3 / 4;
    grid-row: 1 / span 3;
    height: auto;
  }
  .conversations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 96px 96px;
  }
  .favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .guided-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hamburger base: hidden on desktop, shown on mobile via media query */
.topbar-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 4px;
}
.topbar-menu-btn:hover { background: rgba(255,255,255,0.1); }
.topbar-menu-btn svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    max-width: 85vw;
    padding-top: var(--topbar-h);
    background: var(--ts-ink);
    z-index: 30;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
    overflow-y: auto;
  }
  .sidebar.is-mobile-open { transform: translateX(0); }
  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 25;
    backdrop-filter: blur(2px);
  }
  body.mobile-nav-open { overflow: hidden; }
  .topbar-menu-btn { display: inline-flex; }
  /* Keep hamburger + logo tight on the left, push end to the right */
  .brand { margin-right: auto; }
  .main { padding: var(--space-lg) var(--space-md) var(--space-2xl); gap: var(--space-xl); }
  .quick-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .quick-grid .tile.dropzone {
    grid-column: 1 / -1;
    grid-row: auto;
    height: 200px;
  }
  .conversations-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .guided-grid { grid-template-columns: 1fr 1fr; }
  .page-header h1 { font-size: 28px; }
  .ai-mic { display: none; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar-end { gap: 6px; }
  /* Keep hamburger + logo tight on the left */
  .brand { margin-right: auto; }
  .brand-logo { height: 32px; }
  .brand-tag { display: none !important; }
  .workspace-name, .profile-caret { display: none !important; }
  .profile {
    padding: 2px;
    gap: 0;
    background: transparent;
    border: 0;
  }
  .profile .avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
  }
  /* Credits stay full (coin + number + label). Just reduce overall padding. */
  .topbar-credits { padding: 5px 12px 5px 8px; font-size: 12px; }
  .topbar-credits-coin { width: 16px; height: 16px; }
  /* Profile dropdown positioning on mobile */
  .profile-menu { right: 0; left: auto; min-width: 240px; }

  /* Media content tiles: single column, desktop horizontal layout, gap between cards */
  .quick-grid,
  .conversations-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }
  .quick-grid .tile,
  .conversations-grid .tile {
    aspect-ratio: auto;
    min-height: 72px;
  }

  /* Dropzone full row */
  .quick-grid .tile.dropzone {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    height: 160px;
  }

  /* Page header scaled */
  .page-header h1 { font-size: 24px; }
}

/* ============================================================
   LIBRARY page (Use case library)
   ============================================================ */
.library-search {
  position: relative;
  max-width: 480px;
}
.library-search input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  background: var(--ts-surface);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ts-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.library-search input::placeholder { color: var(--ts-body); }
.library-search input:focus {
  outline: none;
  border-color: var(--ts-blue);
  box-shadow: 0 0 0 3px rgba(0,122,254,0.15);
}
.library-search > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ts-body);
  pointer-events: none;
}

.industry-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.industry-filters .chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ts-border);
  background: var(--ts-surface);
  color: var(--ts-body);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.industry-filters .chip:hover {
  border-color: var(--ts-blue);
  color: var(--ts-blue);
}
.industry-filters .chip.active {
  background: var(--ts-blue);
  border-color: var(--ts-blue);
  color: #ffffff;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
}
.usecase-card {
  display: flex;
  flex-direction: column;
  background: var(--ts-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease;
}
.usecase-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: rgba(0,122,254,0.28);
}
.usecase-cover {
  position: relative;
  height: 140px;
  background: var(--ts-subtle);
  overflow: hidden;
}
.usecase-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.usecase-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,122,254,0.22) 0%, rgba(7,32,78,0.48) 100%);
  pointer-events: none;
}
.usecase-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 18px;
}
.usecase-industry {
  font-size: 11px;
  font-weight: 500;
  color: var(--ts-blue);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.usecase-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--ts-ink);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.005em;
}
.usecase-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ts-body);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.library-empty {
  text-align: center;
  color: var(--ts-body);
  font-size: 14px;
  padding: var(--space-2xl) 0;
}

/* Use case modal hero */
.uc-hero {
  position: relative;
  height: 220px;
  background: var(--ts-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.uc-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.uc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,122,254,0.18) 0%, rgba(7,32,78,0.42) 100%);
  pointer-events: none;
}
.uc-industry-chip {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(0,122,254,0.1);
  color: var(--ts-blue);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 1360px) {
  .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .library-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ARCHIVE page
   ============================================================ */
.page-tabs {
  display: flex;
  gap: var(--space-xl);
  border-bottom: 1px solid var(--ts-border);
  margin-top: calc(var(--space-sm) * -1);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ts-body);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.tab svg { width: 20px; height: 20px; flex: 0 0 20px; }
.tab.active {
  color: var(--ts-blue);
  border-bottom-color: var(--ts-blue);
}
.tab:hover:not(.active) { color: var(--ts-ink); }

.archive-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.search-input {
  position: relative;
  flex: 0 1 240px;
}
.search-input input {
  width: 100%;
  padding: 10px 40px 10px 16px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  background: var(--ts-surface);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ts-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-input input::placeholder { color: var(--ts-body); }
.search-input input:focus {
  outline: none;
  border-color: var(--ts-blue);
  box-shadow: 0 0 0 3px rgba(0,122,254,0.15);
}
.search-input > svg {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ts-body);
  pointer-events: none;
}
.select-wrap.light { flex: 0 1 200px; }
.select-wrap.light select {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  color: var(--ts-ink);
  padding: 10px 40px 10px 16px;
  border-radius: var(--radius-btn);
}
.select-wrap.light .select-caret { color: var(--ts-body); }
.toolbar-spacer { flex: 1 1 auto; }
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--ts-border);
  background: var(--ts-surface);
  color: var(--ts-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { border-color: var(--ts-blue); color: var(--ts-blue); }
.icon-btn-tinted {
  background: rgba(0,122,254,0.08);
  border-color: transparent;
  color: var(--ts-blue);
}
.icon-btn-tinted:hover {
  background: rgba(0,122,254,0.14);
  border-color: transparent;
  color: var(--ts-blue);
}
.btn-tinted {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(0,122,254,0.08);
  border: 0;
  border-radius: var(--radius-btn);
  color: var(--ts-blue);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease;
}
.btn-tinted:hover { background: rgba(0,122,254,0.14); }
.btn-tinted svg { width: 16px; height: 16px; }

.archive-table {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.archive-head,
.archive-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(180px, 1.4fr) minmax(180px, 1.4fr) minmax(80px, 1fr);
  gap: var(--space-md);
  padding: 16px 24px;
  align-items: center;
}
.archive-head {
  background: var(--ts-subtle);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ts-ink);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--ts-border);
}
.archive-head .sortable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.archive-head .sortable svg { color: var(--ts-body); }
.archive-row {
  color: var(--ts-ink);
  font-size: 14px;
  border-bottom: 1px solid var(--ts-border);
  transition: background .15s ease;
}
.archive-row:last-child { border-bottom: 0; }
.archive-row:hover { background: var(--ts-subtle); }
.cell-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ts-ink);
}
.cell-date {
  font-variant-numeric: tabular-nums;
  color: var(--ts-body);
  font-size: 13px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ts-ink);
  font-size: 14px;
  min-width: 0;
}
.user-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--ts-blue);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.user-avatar-brown { background: #6b4a3a; }

.flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(0,122,254,0.1);
  color: var(--ts-blue);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.flow-chip svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

/* Archive map view */
.archive-map {
  width: 100%;
  height: 560px;
  border-radius: var(--radius-card);
  border: 1px solid var(--ts-border);
  overflow: hidden;
  background: var(--ts-subtle);
}
.archive-map[hidden] { display: none; }
.ts-map-marker-dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--ts-blue);
  border: 3px solid #ffffff;
}
.leaflet-container { font-family: var(--font-body); }
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-card);
  box-shadow: 0 4px 16px rgba(8,17,34,0.12);
  padding: 2px;
}
.leaflet-popup-content { margin: 14px 16px; min-width: 220px; }
.leaflet-popup-tip { box-shadow: none; }
.map-popup-flow {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(0,122,254,0.1);
  color: var(--ts-blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.map-popup-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--ts-ink);
  margin: 0 0 6px;
  line-height: 1.35;
}
.map-popup-meta {
  font-size: 12px;
  color: var(--ts-body);
  margin-bottom: 4px;
}
.map-popup-user {
  font-size: 13px;
  color: var(--ts-ink);
  font-weight: 500;
}

/* Preview modal */
.modal.modal-preview {
  max-width: 1280px;
  width: 100%;
  height: 88vh;
  max-height: 88vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ts-surface);
}
.preview-body {
  flex: 1;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  margin: 0;
  min-height: 0;
}

.pdf-card {
  display: flex;
  flex-direction: column;
  background: #eef1f6;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  min-height: 0;
}
.pdf-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #eef1f6;
  border-bottom: 1px solid rgba(8,17,34,0.06);
  flex: 0 0 auto;
}
.pdf-toolbar-group { display: flex; gap: 2px; }
.pdf-tool {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  color: var(--ts-ink);
  background: transparent;
  transition: background 0.15s;
}
.pdf-tool:hover { background: rgba(8,17,34,0.06); }
.pdf-tool svg { width: 18px; height: 18px; }

.pdf-viewer {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  min-height: 0;
}
.pdf-page {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(8,17,34,0.08);
  padding: 48px 56px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ts-ink);
  line-height: 1.6;
  border-radius: 0;
  width: 100%;
  max-width: 680px;
  min-height: 640px;
}
.pdf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 56px;
}
.pdf-head-icon {
  width: 22px;
  height: 22px;
  color: var(--ts-blue);
}
.pdf-head-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
}
.pdf-date {
  font-family: var(--font-body);
  font-size: 13px;
  color: #8a8f9a;
  margin: 0 0 12px;
}
.pdf-big-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: var(--ts-blue);
  margin: 0 0 48px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.pdf-divider {
  height: 1px;
  background: var(--ts-border);
  margin: 32px 0 24px;
}
.pdf-p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.6;
}
.pdf-p strong { color: var(--ts-ink); font-weight: 700; }
.pdf-section { margin-top: 20px; }
.pdf-section h4 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ts-ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.pdf-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ts-ink);
  background: #f4f6fa;
  padding: 10px 12px;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 6px 0 0;
}
.pdf-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 12px;
}
.pdf-table td {
  padding: 8px 0;
  border-bottom: 1px solid var(--ts-border);
  vertical-align: top;
}
.pdf-table td:first-child {
  color: #6b7280;
  width: 38%;
  font-weight: 500;
}
.pdf-footer {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--ts-border);
  font-size: 10px;
  color: #8a8f9a;
  text-align: center;
  letter-spacing: 0.04em;
}

/* Tech data (right panel) */
.tech-data {
  background: var(--ts-surface);
  border: 0;
  border-left: 1px solid var(--ts-border);
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.tech-data-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 40px 32px 32px;
  border-bottom: 1px solid var(--ts-border);
  flex: 0 0 auto;
  background: linear-gradient(180deg, #fafbfd 0%, #ffffff 100%);
}
.tech-data-heading {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tech-data-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ts-blue);
}
.tech-data-title {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--ts-ink);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
  word-break: break-word;
}
.tech-data-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
}
.tech-data-cta svg { width: 16px; height: 16px; }
.tech-data-close {
  flex: 0 0 auto;
  margin: -4px -4px 0 0;
  background: transparent;
  color: var(--ts-body);
}
.tech-data-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 32px 28px;
  min-height: 0;
}
.tech-rows { margin: 0; padding: 0; }
.tech-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #eceef2;
  align-items: start;
}
.tech-row:last-child { border-bottom: 0; }
.tech-row dt {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--ts-ink);
  letter-spacing: -0.005em;
}
.tech-row dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ts-ink);
  text-align: right;
  word-break: break-word;
  max-width: 260px;
  line-height: 1.45;
}
.tech-row dd.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-all;
  line-height: 1.5;
}
.tech-row dd.tech-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ts-success);
  font-weight: 500;
}
.tech-row dd.tech-ok::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ts-success);
}

.archive-row { cursor: pointer; }

@media (max-width: 900px) {
  .preview-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .pdf-card { min-height: 60vh; }
  .modal.modal-preview { height: 92vh; max-height: 92vh; }
}

@media (max-width: 1100px) {
  .archive-head,
  .archive-row {
    grid-template-columns: minmax(0, 2fr) minmax(140px, 1.1fr) minmax(140px, 1.1fr);
    padding: 14px 18px;
  }
  .archive-head > div:nth-child(4),
  .archive-row > div:nth-child(4) { display: none; }
}
@media (max-width: 720px) {
  .archive-head,
  .archive-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(120px, 1fr);
  }
  .archive-head > div:nth-child(3),
  .archive-row > div:nth-child(3) { display: none; }
}

/* ============================================================
   MODAL — dark (Meeting certification)
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8,17,34,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 100%;
  max-width: 560px;
  background: var(--ts-surface);
  color: var(--ts-ink);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(8,17,34,0.16);
  padding: var(--space-2xl);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.modal-header h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--ts-ink);
  margin: 0;
  letter-spacing: -0.005em;
}
.modal-header-lead {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}
.modal-nav-back {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ts-subtle);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-pill);
  color: var(--ts-body);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.modal-nav-back:hover {
  background: var(--ts-surface);
  border-color: var(--ts-blue);
  color: var(--ts-blue);
}
.modal-nav-back:hover svg { transform: translateX(-2px); }
.modal-nav-back svg {
  transition: transform .15s ease;
}
.modal-nav-back:focus-visible {
  outline: 2px solid rgba(0,122,254,0.35);
  outline-offset: 2px;
}
.modal-nav-back[hidden] { display: none; }
.modal-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.modal-close,
.modal-star {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  color: var(--ts-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.modal-close:hover,
.modal-star:hover {
  background: var(--ts-subtle);
  color: var(--ts-ink);
}
.modal-star svg { width: 20px; height: 20px; }
.modal-star svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.modal-star.active { color: var(--ts-blue); }
.modal-star.active:hover { background: rgba(0,122,254,0.08); color: var(--ts-blue); }
.modal-star.active svg path {
  fill: currentColor;
  stroke: currentColor;
}
.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.modal-desc {
  font-size: 14px;
  color: var(--ts-body);
  line-height: 1.55;
  margin: 0;
}
.modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ts-ink);
  line-height: 1.3;
}
.field .req { color: var(--ts-blue); margin-left: 2px; }
.field input[type="text"],
.field input[type="url"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="search"],
.field input[type="password"] {
  width: 100%;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ts-ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input::placeholder { color: #a0a6b3; }
.field input:focus {
  outline: none;
  border-color: var(--ts-blue);
  box-shadow: 0 0 0 3px rgba(0,122,254,0.15);
}
.field-help {
  font-size: 12px;
  color: var(--ts-body);
  line-height: 1.45;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.field-inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 40px;
}
.select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  padding: 12px 40px 12px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ts-ink);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select-wrap select:focus {
  outline: none;
  border-color: var(--ts-blue);
  box-shadow: 0 0 0 3px rgba(0,122,254,0.15);
}
.select-wrap select option { color: var(--ts-ink); background: #ffffff; }
.select-caret {
  position: absolute;
  right: 12px;
  color: var(--ts-body);
  pointer-events: none;
}
.toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
  cursor: pointer;
}
.toggle input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd3dd;
  border-radius: var(--radius-pill);
  transition: background .2s ease;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  transition: transform .2s ease;
}
.toggle input:checked + .toggle-slider { background: var(--ts-blue); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle input:focus-visible + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(0,122,254,0.35);
}
.btn.btn-block {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-sm);
}
.btn.btn-grow { flex: 1; justify-content: center; }

/* Address box (email certification) */
.address-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ts-subtle);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: 14px 14px 14px 18px;
}
.address-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--ts-blue);
}
.address-email {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--ts-ink);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.address-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ts-body);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.address-copy:hover {
  border-color: var(--ts-blue);
  color: var(--ts-blue);
}

.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: var(--space-sm);
}

.flow-self,
.flow-invite {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.flow-invite-switch {
  justify-content: center;
  gap: 8px;
  color: var(--ts-body);
}
.flow-invite-switch svg {
  color: var(--ts-blue);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.flow-invite-switch:hover { color: var(--ts-ink); }
.flow-self[hidden],
.flow-invite[hidden] { display: none; }

/* Ensure these elements fully disappear when JS sets .hidden in custom flows */
.uc-hero[hidden] { display: none; }
.uc-industry-chip[hidden] { display: none; }
#tile-modal-desc[hidden] { display: none; }

.btn-link {
  align-self: center;
  background: transparent;
  border: 0;
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ts-body);
  cursor: pointer;
  transition: color .15s ease;
}
.btn-link:hover { color: var(--ts-blue); }
.modal-actions-end { justify-content: flex-end; }
.modal.modal-wide { max-width: 820px; }

/* Settings modal: wide, two-pane layout with internal scroll */
.modal.modal-settings {
  max-width: 1040px;
  max-height: calc(100vh - 48px);
  height: 90vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal.modal-settings > .modal-header {
  padding: var(--space-lg) var(--space-xl);
  margin: 0;
  border-bottom: 1px solid var(--ts-border);
  flex: 0 0 auto;
}
.modal.modal-settings > .modal-header h2 {
  font-size: 20px;
  font-weight: 700;
}
.modal-body.settings-modal-body {
  flex: 1 1 auto;
  padding: 0;
  margin: 0;
  gap: 0;
  display: block;
  min-height: 0;
  overflow: hidden;
}
.modal-body.settings-modal-body > .settings-layout {
  display: grid;
  grid-template-columns: 232px 1fr;
  height: 100%;
  min-height: 0;
  gap: 0;
}
.modal-body.settings-modal-body .settings-nav {
  padding: var(--space-lg) var(--space-md);
  border-right: 1px solid var(--ts-border);
  background: var(--ts-subtle);
  overflow-y: auto;
  position: static;
  top: auto;
  align-self: stretch;
  min-height: 0;
  height: 100%;
}
.modal-body.settings-modal-body .settings-nav-label { display: none; }
.modal-body.settings-modal-body .settings-content {
  padding: var(--space-xl) var(--space-2xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  min-width: 0;
  height: 100%;
}
.modal-body.settings-modal-body .settings-section > .settings-head {
  margin-top: 0;
}
.modal-body.settings-modal-body .settings-section > .settings-head h1 {
  font-size: 26px;
  margin: 0 0 6px;
}
.modal-body.settings-modal-body .members-head,
.modal-body.settings-modal-body .members-row {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 40px;
  padding: 12px 20px;
}
.modal-body.settings-modal-body .members-head > div:nth-child(4),
.modal-body.settings-modal-body .members-row > div:nth-child(4) {
  display: none;
}
.modal-body.settings-modal-body .members-head > div:nth-child(5),
.modal-body.settings-modal-body .members-row > div:nth-child(5) {
  display: flex;
  justify-content: flex-end;
}
.modal-body.settings-modal-body .invoice-head,
.modal-body.settings-modal-body .invoice-row,
.modal-body.settings-modal-body .keys-row {
  padding: 12px 20px;
}

/* Mockup-only flags (not part of real product) */
body.mockup-no-conversational .ai-hero,
body.mockup-no-conversational .ms-ai-prompt,
body.mockup-no-conversational .ms-chips { display: none; }
/* Account mode: personal (default) vs business */
.mockup-business-only { display: none !important; }
body.mockup-business .mockup-business-only { display: block !important; }
body.mockup-business section.mockup-business-only { display: flex !important; }
body.mockup-business .mockup-personal-only { display: none !important; }

/* Settings modal: Plans = personal-only, Billing = business-only */
body.mockup-personal .settings-nav-item[data-section="billing"],
body.mockup-personal .settings-section[data-section="billing"] { display: none !important; }
body.mockup-business .settings-nav-item[data-section="plans"],
body.mockup-business .settings-section[data-section="plans"] { display: none !important; }
/* Wrapping <li> in nav list */
body.mockup-personal .settings-nav-list li:has(.settings-nav-item[data-section="billing"]) { display: none !important; }
body.mockup-business .settings-nav-list li:has(.settings-nav-item[data-section="plans"]) { display: none !important; }

/* Business mode on mobile: hide Home tab + Home screen entirely */
body.mockup-business .ms-tab[data-target="home"],
body.mockup-business .ms-screen[data-screen="home"] { display: none !important; }
body.mockup-business .ms-tabbar { grid-template-columns: repeat(3, 1fr); }

/* Swap Library ↔ Home label & icon on the explore tab/screen based on mode */
.ms-tab-icon-business,
.ms-tab-label-business { display: none; }
body.mockup-business .ms-tab-icon-personal,
body.mockup-business .ms-tab-label-personal { display: none; }
body.mockup-business .ms-tab-icon-business,
body.mockup-business .ms-tab-label-business { display: inline-block; }
/* SVG inside the tab must stay sized by .ms-tab svg rules */
body.mockup-business .ms-tab-icon-business { display: inline; }

/* Business mode: hide credits UI entirely (topbar badge, mobile badge, Plans section, billing) */
body.mockup-business .topbar-credits,
body.mockup-business .ms-topbar-credits,
body.mockup-business .ms-profile-credits,
body.mockup-business .ms-profile-cta,
body.mockup-business .settings-nav-item[data-section="plans"],
body.mockup-business .settings-section[data-section="plans"] { display: none !important; }

/* ============================================================
   DEV SPECS SECTION (below mockup in app.html)
   ============================================================ */
.dev-specs {
  max-width: 960px;
  margin: 48px auto 0;
  padding: 32px 28px 56px;
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid var(--ts-border);
  box-shadow: 0 4px 16px rgba(8,17,34,0.04);
  font-family: var(--font-body);
  color: var(--ts-ink);
}
.dev-specs-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ts-border);
}
.dev-specs-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ts-blue);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.dev-specs-head h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ts-ink);
}
.dev-specs-lead {
  margin: 0;
  color: var(--ts-body);
  font-size: 14px;
  max-width: 560px;
}
.dev-specs-pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  background: var(--ts-blue);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.dev-specs-pdf:hover { background: var(--ts-blue-dark, #006ee6); }

.dev-specs-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--ts-subtle);
  border-radius: var(--radius-btn);
  margin-bottom: 24px;
  width: fit-content;
}
.dev-specs-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ts-body);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.dev-specs-tab:hover { color: var(--ts-ink); }
.dev-specs-tab.is-active {
  background: #fff;
  color: var(--ts-ink);
  box-shadow: 0 1px 3px rgba(8,17,34,0.08);
}

.dev-specs-panel { display: none; }
.dev-specs-panel.is-active { display: block; }

.dev-specs-h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
  margin: 28px 0 10px;
}
.dev-specs-h3:first-child { margin-top: 0; }
.dev-specs-h4 {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.005em;
  margin: 18px 0 6px;
  padding: 6px 10px;
  background: var(--ts-subtle);
  border-radius: var(--radius-btn);
  border-left: 3px solid var(--ts-blue);
}

/* Auto-sync banner */
.dev-live-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(0,122,254,0.08) 0%, rgba(0,122,254,0.04) 100%);
  border: 1px solid rgba(0,122,254,0.18);
  border-radius: var(--radius-btn);
  color: var(--ts-ink);
  font-size: 12.5px;
  line-height: 1.45;
  margin-bottom: 20px;
}
.dev-live-banner svg { flex-shrink: 0; color: var(--ts-blue); }
.dev-live-banner strong { color: var(--ts-blue); }
.dev-live-banner code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 5px;
  background: rgba(0,122,254,0.08);
  border-radius: 3px;
  color: var(--ts-blue);
}
.dev-live-section { margin-bottom: 16px; }
.dev-swatch {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.08);
  vertical-align: middle;
}

/* ============================================================
   DOCUMENTATION PAGE (/documentation.html)
   ============================================================ */
.page-head {
  margin-bottom: 20px;
}
.page-head h1 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ts-ink);
}
.page-head p {
  margin: 0;
  color: var(--ts-body);
  font-size: 14px;
  line-height: 1.55;
  max-width: 720px;
}
.doc-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(0,122,254,0.08) 0%, rgba(0,122,254,0.04) 100%);
  border: 1px solid rgba(0,122,254,0.18);
  border-radius: var(--radius-btn);
  color: var(--ts-ink);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.doc-banner svg { flex-shrink: 0; color: var(--ts-blue); }
.doc-banner strong { color: var(--ts-blue); }
.doc-banner code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 5px;
  background: rgba(0,122,254,0.08);
  border-radius: 3px;
  color: var(--ts-blue);
}
.doc-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
  padding: 14px;
  background: var(--ts-subtle);
  border-radius: var(--radius-btn);
}
.doc-toc a {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-ink);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.doc-toc a:hover { border-color: var(--ts-blue); color: var(--ts-blue); }
.doc-section {
  margin-bottom: 48px;
  padding-top: 12px;
}
.doc-section h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ts-ink);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ts-border);
}
.doc-section h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ts-ink);
  margin: 24px 0 10px;
  letter-spacing: -0.005em;
}
.doc-section p { margin: 4px 0 10px; color: var(--ts-body); font-size: 13.5px; line-height: 1.55; }
.doc-section p code { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; background: var(--ts-subtle); border-radius: 3px; color: var(--ts-blue); }
.doc-list { font-size: 13.5px; color: var(--ts-ink); line-height: 1.6; padding-left: 18px; }
.doc-list code { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; background: var(--ts-subtle); border-radius: 3px; color: var(--ts-blue); }
.doc-rule {
  padding: 12px 16px;
  background: rgba(255,149,0,0.08);
  border-left: 3px solid #ff9500;
  border-radius: var(--radius-btn);
  font-size: 13px;
  color: var(--ts-ink);
  margin-top: 16px;
}
.doc-rule code { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; background: rgba(255,149,0,0.12); border-radius: 3px; color: #b45309; }

.doc-live-section { margin-bottom: 24px; }
.doc-live-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ts-body);
  margin: 18px 0 8px;
  font-weight: 700;
}

/* Tabs (tokens / scss / json / tailwind) */
.doc-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--ts-subtle);
  border-radius: var(--radius-btn);
  margin-bottom: 16px;
  width: fit-content;
}
.doc-tab {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ts-body);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.doc-tab:hover { color: var(--ts-ink); }
.doc-tab.is-active { background: #fff; color: var(--ts-ink); box-shadow: 0 1px 3px rgba(8,17,34,0.08); }
.doc-panel { display: none; }
.doc-panel.is-active { display: block; }

/* Component demo */
.doc-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 18px;
  background: var(--ts-subtle);
  border-radius: var(--radius-card);
  margin-bottom: 18px;
  align-items: start;
}
.doc-demo-preview {
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  padding: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 100px;
}
.doc-demo-code {
  background: #0b1220;
  color: #cbd5e0;
  padding: 14px 16px;
  border-radius: var(--radius-btn);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
}
.doc-demo-code code { font-family: inherit; color: inherit; background: transparent; padding: 0; }
@media (max-width: 960px) {
  .doc-demo { grid-template-columns: 1fr; }
}

/* Pages grid */
.doc-pages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.doc-page-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.doc-page-card:hover {
  border-color: var(--ts-blue);
  box-shadow: 0 6px 16px rgba(8,17,34,0.08);
  transform: translateY(-1px);
}
.doc-page-shot {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ts-subtle);
}
.doc-page-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.doc-page-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doc-page-body strong {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ts-ink);
}
.doc-page-body p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ts-body);
  line-height: 1.4;
}
.doc-page-body code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ts-blue);
  background: var(--ts-subtle);
  padding: 2px 6px;
  border-radius: 3px;
  align-self: flex-start;
  margin-top: 4px;
}

/* Field label helper */
.field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-body);
}

/* Compact CTA on mockup page linking to full app docs */
.mockup-docs-cta {
  max-width: 960px;
  margin: 40px auto 0;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(0,122,254,0.06) 0%, rgba(0,122,254,0.02) 100%);
  border: 1px solid rgba(0,122,254,0.18);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.mockup-docs-cta-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ts-blue);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 4px;
}
.mockup-docs-cta h2 {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ts-ink);
}
.mockup-docs-cta p { margin: 0; font-size: 13px; color: var(--ts-body); }
.mockup-docs-cta .btn {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .mockup-docs-cta { flex-direction: column; align-items: flex-start; }
}

/* App docs — screens grid */
.doc-screens-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.doc-screen-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
}
.doc-screen-shot {
  width: 100%;
  height: auto;
  border-radius: var(--radius-btn);
  border: 1px solid var(--ts-border);
  box-shadow: 0 4px 12px rgba(8,17,34,0.08);
  display: block;
  align-self: start;
}
.doc-screen-body { min-width: 0; }
.doc-screen-body h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--ts-ink);
  margin: 0 0 4px;
}
.doc-screen-key {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ts-body);
  background: var(--ts-subtle);
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
  margin-left: 4px;
}
.doc-screen-sub {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--ts-body);
  font-style: italic;
}
@media (max-width: 900px) {
  .doc-screen-card { grid-template-columns: 1fr; }
  .doc-screen-shot { max-width: 200px; }
}

.dev-snippet {
  background: #0b1220;
  border-radius: var(--radius-btn);
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid #1a2540;
}
.dev-snippet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #0a1020;
  border-bottom: 1px solid #1a2540;
  color: #94a3b8;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dev-copy {
  background: transparent;
  border: 1px solid #1e3055;
  color: #94a3b8;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dev-copy:hover {
  background: #1e3055;
  color: #fff;
  border-color: #2d4a8f;
}
.dev-snippet pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--font-mono, "JetBrains Mono", Menlo, Consolas, monospace);
  font-size: 12px;
  line-height: 1.55;
  color: #cbd5e0;
}
.dev-snippet code { font-family: inherit; color: inherit; background: transparent; padding: 0; }

.dev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 10px 0 14px;
  background: #fff;
}
.dev-table th,
.dev-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--ts-border);
  vertical-align: top;
}
.dev-table th {
  background: var(--ts-subtle);
  font-weight: 700;
  color: var(--ts-ink);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dev-table code {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  background: var(--ts-subtle);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ts-blue);
}
.dev-table-compact th,
.dev-table-compact td { padding: 8px 10px; font-size: 12.5px; }

.dev-list {
  margin: 8px 0 14px;
  padding-left: 18px;
  color: var(--ts-ink);
  font-size: 13px;
  line-height: 1.6;
}
.dev-list li { margin-bottom: 4px; }
.dev-list code {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  background: var(--ts-subtle);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ts-blue);
}

@media (max-width: 700px) {
  .dev-specs { padding: 24px 18px; }
  .dev-specs-head { flex-direction: column; }
  .dev-specs-pdf { align-self: flex-start; }
}

/* ============================================================
   SHOT MODE (automated screenshot capture via ?shot=SCREEN)
   ============================================================ */
body.shot-mode {
  background: #fff !important;
  overflow: hidden;
}
body.shot-mode .topbar,
body.shot-mode .sidebar,
body.shot-mode .dev-specs,
body.shot-mode .mockup-title { display: none !important; }
body.shot-mode .app { display: block !important; }
body.shot-mode .main,
body.shot-mode .main-mockup-app,
body.shot-mode .mockup-app { padding: 0 !important; background: #fff !important; }
body.shot-mode .iphone-wrapper {
  margin: 20px auto !important;
  padding: 0 !important;
}

/* Mobile business-only: preserve original display type per component */
body.mockup-business .ms-guided-scroll.mockup-business-only { display: flex !important; }
body.mockup-business .ms-section-title.mockup-business-only { display: block !important; }
body.mockup-business .ms-grid.mockup-business-only { display: grid !important; }

/* Mobile guided creator line (company flow owner) */
.ms-guided-creator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ms-text-sec, rgba(255,255,255,0.65));
  letter-spacing: 0.02em;
  padding: 6px 10px 0;
}
.ms-guided-creator svg { flex-shrink: 0; }
.iphone-screen.is-light .ms-guided-creator { color: rgba(0,0,0,0.6); }

/* Mockup account-mode radio tiles */
.mockup-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mockup-mode-options-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .mockup-mode-options-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mockup-mode-options .radio-tile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid var(--ts-border);
  border-radius: var(--radius-card);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.mockup-mode-options .radio-tile input { margin-top: 2px; }
.mockup-mode-options .radio-tile:has(input:checked) {
  border-color: var(--ts-blue);
  background: rgba(0,122,254,0.04);
}
.mockup-mode-options .radio-tile-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.mockup-mode-options .radio-tile-label strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ts-ink);
}
.mockup-mode-options .radio-tile-label em {
  font-style: normal;
  font-size: 12px;
  color: var(--ts-body);
}

/* Company flow creator chip (overlay on .guided-media) */
.guided-creator-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ts-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 4px rgba(8,17,34,0.12);
}
.guided-creator-chip svg { flex-shrink: 0; }

.settings-nav-item-mockup {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--ts-border);
}
.settings-nav-item-mockup > span { font-style: italic; }

/* Discover TrueScreen modal */
.discover-section { display: block; }
.discover-section[hidden] { display: none; }

/* Welcome */
.discover-welcome {
  text-align: center;
  padding: var(--space-xl) 0 var(--space-lg);
  max-width: 620px;
  margin: 0 auto;
}
.discover-welcome-logo {
  height: 28px;
  width: auto;
  margin: 0 auto var(--space-lg);
  display: block;
  filter: invert(1) brightness(0.15);
}
.discover-welcome-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(0,122,254,0.12);
  color: var(--ts-blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.discover-welcome-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ts-ink);
  margin: 0 0 var(--space-md);
  line-height: 1.15;
}
.discover-welcome-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ts-ink);
  margin: 0 0 var(--space-md);
  font-weight: 500;
}
.discover-welcome-mission {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ts-body);
  margin: 0 0 var(--space-xl);
}

/* How it works steps */
.discover-steps {
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.discover-step {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.discover-step-n {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ts-blue);
  text-transform: uppercase;
}
.discover-step-body h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ts-ink);
  margin: 0 0 8px;
  line-height: 1.2;
}
.discover-step-body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ts-body);
  margin: 0;
}
.discover-pull {
  margin: 0;
  padding: var(--space-lg) var(--space-xl);
  background: var(--ts-subtle);
  border-left: 3px solid var(--ts-blue);
  border-radius: var(--radius-card);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  color: var(--ts-ink);
  line-height: 1.45;
}

/* Products */
.discover-cluster { margin-bottom: var(--space-xl); }
.discover-cluster-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-body);
  margin-bottom: 12px;
}
.discover-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.discover-product {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: 16px;
}
.discover-product-wide { grid-column: 1 / -1; }
.discover-product-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-btn);
  background: rgba(0,122,254,0.08);
  color: var(--ts-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.discover-product-icon svg { width: 20px; height: 20px; }
.discover-product h3 {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ts-ink);
  margin: 0 0 4px;
  line-height: 1.25;
}
.discover-product p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ts-body);
  margin: 0;
}

/* Assets grid */
.discover-assets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: var(--space-lg);
}
.discover-asset {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
}
.discover-asset svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--ts-blue);
  margin-top: 2px;
}
.discover-asset > div { display: flex; flex-direction: column; gap: 2px; }
.discover-asset strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ts-ink);
}
.discover-asset span {
  font-size: 13px;
  color: var(--ts-body);
  line-height: 1.45;
}
.discover-assets-foot {
  font-size: 13px;
  color: var(--ts-body);
  text-align: center;
  margin: 0;
}

/* Standards */
.discover-standards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.discover-standard {
  padding: 16px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.discover-standard-badge {
  align-self: flex-start;
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--ts-ink);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.discover-standard p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ts-body);
  margin: 0;
}

/* Changelog */
.discover-changelog {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.changelog-entry {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 18px 20px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  position: relative;
}
.changelog-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid var(--ts-border);
  padding-right: 16px;
}
.changelog-version {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ts-ink);
  letter-spacing: 0.02em;
}
.changelog-date {
  font-size: 12px;
  color: var(--ts-muted);
  font-weight: 400;
}
.changelog-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.changelog-body h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ts-ink);
  margin: 0;
  line-height: 1.35;
}
.changelog-body p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ts-body);
  margin: 0;
}
.changelog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.changelog-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--ts-surface-2, #f4f6f9);
  border: 1px solid var(--ts-border);
  color: var(--ts-body);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.changelog-tag-new {
  background: var(--ts-ink);
  border-color: var(--ts-ink);
  color: #ffffff;
}
.changelog-tag-improvement {
  background: #eef3ff;
  border-color: #c8d6f5;
  color: #2c4a8f;
}

@media (max-width: 900px) {
  .discover-steps { grid-template-columns: 1fr; }
  .discover-products { grid-template-columns: 1fr; }
  .discover-assets { grid-template-columns: 1fr; }
  .discover-standards { grid-template-columns: 1fr; }
  .discover-welcome-title { font-size: 28px; }
  .changelog-entry { grid-template-columns: 1fr; gap: 12px; }
  .changelog-meta {
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    border-right: none;
    border-bottom: 1px solid var(--ts-border);
    padding-right: 0;
    padding-bottom: 10px;
  }
}

/* Settings modal sub-view (Change plan drill-down) */
.settings-subview { display: block; }
.settings-subview[hidden] { display: none; }
.modal-body.settings-modal-body > .settings-layout.in-subview {
  grid-template-columns: 1fr;
}
.modal-body.settings-modal-body > .settings-layout.in-subview .settings-nav { display: none; }
.modal-body.settings-modal-body .plans-hero-compact {
  text-align: center;
  padding: 0 0 var(--space-lg);
  max-width: 760px;
  margin: 0 auto var(--space-lg);
}
.modal-body.settings-modal-body .plans-hero-compact h1 {
  font-size: 28px;
  margin: 10px 0 8px;
  line-height: 1.2;
}
.modal-body.settings-modal-body .plans-hero-compact p {
  font-size: 14px;
  color: var(--ts-body);
  margin: 0 auto var(--space-md);
  max-width: 560px;
}
.modal-body.settings-modal-body .plans-grid {
  gap: 16px;
  margin-bottom: var(--space-2xl);
}
.modal-body.settings-modal-body .plans-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-body.settings-modal-body .plan-tile { padding: 22px; }
.modal-body.settings-modal-body .plans-compare,
.modal-body.settings-modal-body .plans-faq { margin-top: var(--space-2xl); }
.modal-body.settings-modal-body .plans-compare .section-head,
.modal-body.settings-modal-body .plans-faq .section-head {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.modal-body.settings-modal-body .plans-compare .section-head h2,
.modal-body.settings-modal-body .plans-faq .section-head h2 {
  font-size: 22px;
  margin: 0 0 6px;
}

@media (max-width: 900px) {
  .modal-body.settings-modal-body .plans-grid-2 { grid-template-columns: 1fr; }
  .modal-body.settings-modal-body .plans-hero-compact h1 { font-size: 24px; }
}

@media (max-width: 900px) {
  .modal.modal-settings { max-width: 100%; height: calc(100vh - 24px); max-height: calc(100vh - 24px); }
  .modal-body.settings-modal-body > .settings-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .modal-body.settings-modal-body .settings-nav {
    border-right: 0;
    border-bottom: 1px solid var(--ts-border);
    padding: 12px;
    overflow-x: auto;
  }
  .modal-body.settings-modal-body .settings-nav-list { flex-direction: row; gap: 4px; }
  .modal-body.settings-modal-body .settings-nav-item { flex: 0 0 auto; white-space: nowrap; }
  .modal-body.settings-modal-body .settings-content { padding: var(--space-lg); }
}

/* Choice grid (web page certification) */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.choice-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-lg);
  background: var(--ts-subtle);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  color: var(--ts-ink);
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.choice-card:hover {
  border-color: var(--ts-blue);
  background: var(--ts-surface);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.choice-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-btn);
  background: rgba(0,122,254,0.1);
  color: var(--ts-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.choice-icon svg { width: 22px; height: 22px; }
.choice-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--ts-ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.choice-desc {
  font-size: 13px;
  color: var(--ts-body);
  line-height: 1.55;
  margin: 0;
}
.choice-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.choice-bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  color: var(--ts-ink);
  line-height: 1.45;
}
.choice-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--ts-blue);
  border-bottom: 2px solid var(--ts-blue);
  transform: rotate(-45deg);
}
.choice-when {
  display: block;
  font-size: 12px;
  color: var(--ts-body);
  line-height: 1.5;
  padding-top: 10px;
  border-top: 1px solid var(--ts-border);
}
.choice-when strong { color: var(--ts-ink); font-weight: 600; }
.choice-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-blue);
  margin-top: 4px;
}
.choice-card:hover .choice-cta { color: var(--ts-blue-dark); }

/* Flow source (step 2: app vs web) */
.flow-source {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flow-source[hidden] { display: none; }

/* Collapse hero/chip/desc and compact padding while in source step
   so the dialog fits the viewport without scroll. */
.modal.in-source .uc-hero,
.modal.in-source #tile-modal-category,
.modal.in-source #tile-modal-desc { display: none; }
.modal.in-source .modal-body { gap: var(--space-md); }
.modal.in-source { padding: var(--space-xl); }

/* ============================================================
   EMAIL CERTIFICATION (business mode) — new design-system view
   ============================================================ */
.flow-email-cert {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.flow-email-cert[hidden] { display: none; }

.email-cert-hero {
  background: var(--ts-ink);
  border-radius: var(--radius-card);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.email-cert-icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  max-width: 520px;
}
.email-cert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  transition: color .15s ease, transform .15s ease;
}
.email-cert-icon svg { width: 28px; height: 28px; }
.email-cert-icon.is-active {
  color: #fff;
  transform: scale(1.55);
}

.email-cert-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ts-body);
}

.email-cert-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 14px var(--space-md);
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
}
.email-cert-addr {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ts-ink);
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: rgba(0, 122, 254, 0.25);
  text-underline-offset: 3px;
}
.email-cert-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-btn);
  color: var(--ts-blue);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.email-cert-copy:hover { background: rgba(0, 122, 254, 0.08); }
.email-cert-copy svg { width: 16px; height: 16px; }
.email-cert-copy.is-copied { color: var(--ts-success, #0a9f5a); }

.email-cert-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ts-border);
}
.email-cert-cost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ts-ink);
}
.email-cert-coin {
  width: 18px;
  height: 18px;
}
.email-cert-manage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Hide default hero/chip/desc while email-cert view is active */
.modal.in-email-cert .uc-hero,
.modal.in-email-cert #tile-modal-category,
.modal.in-email-cert #tile-modal-desc { display: none; }
.modal.in-email-cert .modal-body { gap: var(--space-md); }

/* ============================================================
   MEETING CERTIFICATION (business mode) — reuses email-cert tokens
   ============================================================ */
.flow-meeting-cert {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.flow-meeting-cert[hidden] { display: none; }

.meeting-cert-hero {
  background: var(--ts-ink);
  border-radius: var(--radius-card);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.meeting-cert-icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  max-width: 520px;
}
.meeting-cert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  transition: color .15s ease, transform .15s ease;
}
.meeting-cert-icon svg { width: 28px; height: 28px; }
.meeting-cert-icon.is-active {
  color: #fff;
  transform: scale(1.55);
}

.meeting-cert-form { margin-top: 0; }
.meeting-cert-form .field-hint {
  font-size: 12px;
  color: var(--ts-body);
  line-height: 1.4;
}
.meeting-cert-form select {
  width: 100%;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ts-ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%236b7280'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 36px;
  cursor: pointer;
}
.meeting-cert-form .toggle-row {
  border-bottom: 0;
  padding: var(--space-sm) 0 0;
}

.meeting-cert-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--ts-border);
  margin-top: var(--space-xs);
}
.meeting-cert-start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.meeting-cert-start:disabled {
  background: var(--ts-border);
  color: rgba(8, 17, 34, 0.45);
  cursor: not-allowed;
  box-shadow: none;
}

/* Hide default hero/chip/desc while meeting-cert view is active */
.modal.in-meeting-cert .uc-hero,
.modal.in-meeting-cert #tile-modal-category,
.modal.in-meeting-cert #tile-modal-desc { display: none; }
.modal.in-meeting-cert .modal-body { gap: var(--space-md); }

/* ============================================================
   WEB PAGE CHOICE — two-option chooser (Chrome Extension / Forensic Browser)
   ============================================================ */
.flow-web-choice {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.flow-web-choice[hidden] { display: none; }
.flow-web-choice .btn-link { align-self: center; }

.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.choice-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-lg);
  background: var(--ts-subtle);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  color: var(--ts-ink);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.choice-card:hover {
  border-color: var(--ts-blue);
  background: var(--ts-surface);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.choice-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-btn);
  background: rgba(0,122,254,0.1);
  color: var(--ts-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.choice-icon svg { width: 22px; height: 22px; }
.choice-title {
  font-family: var(--font-heading, var(--font-body));
  font-size: 18px;
  font-weight: 600;
  color: var(--ts-ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.choice-desc {
  font-size: 13px;
  color: var(--ts-body);
  line-height: 1.55;
  margin: 0;
}
.choice-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.choice-bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  color: var(--ts-ink);
  line-height: 1.45;
}
.choice-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--ts-blue);
  border-bottom: 2px solid var(--ts-blue);
  transform: rotate(-45deg);
}
.choice-when {
  display: block;
  font-size: 12px;
  color: var(--ts-body);
  line-height: 1.5;
  padding-top: 10px;
  border-top: 1px solid var(--ts-border);
}
.choice-when strong { color: var(--ts-ink); font-weight: 600; }
.choice-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-blue);
  margin-top: 4px;
}

/* Hide default hero/chip/desc while web-choice view is active */
.modal.in-web-choice .uc-hero,
.modal.in-web-choice #tile-modal-category,
.modal.in-web-choice #tile-modal-desc { display: none; }
.modal.in-web-choice .modal-body { gap: var(--space-md); }

@media (max-width: 640px) {
  .choice-grid { grid-template-columns: 1fr; }
}

/* Responsive */
@media (max-width: 640px) {
  .meeting-cert-icons { gap: var(--space-xs); }
  .meeting-cert-icon svg { width: 22px; height: 22px; }
  .meeting-cert-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .meeting-cert-start { justify-content: center; }
}

/* Responsive */
@media (max-width: 640px) {
  .email-cert-icons { gap: var(--space-xs); }
  .email-cert-icon svg { width: 22px; height: 22px; }
  .email-cert-field {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .email-cert-copy { justify-content: center; }
  .email-cert-footer {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .email-cert-manage { justify-content: center; }
}

.source-card {
  position: relative;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg);
}
.source-primary {
  background: linear-gradient(180deg, rgba(0,122,254,0.05) 0%, rgba(0,122,254,0.015) 100%);
  border: 1.5px solid var(--ts-blue);
  padding: 14px var(--space-lg) var(--space-md);
}
.source-badge {
  position: absolute;
  top: -10px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  background: var(--ts-blue);
  color: #ffffff;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.source-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: flex-start;
}
.source-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.source-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--ts-ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.source-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ts-body);
  line-height: 1.5;
}
.source-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.source-qr svg {
  padding: 6px;
  background: #ffffff;
  border-radius: var(--radius-btn);
  border: 1px solid var(--ts-border);
  display: block;
  width: 92px;
  height: 92px;
}
.source-qr-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--ts-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.source-benefits {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 14px;
}
.source-benefits li {
  position: relative;
  padding-left: 20px;
  font-size: 12.5px;
  color: var(--ts-ink);
  line-height: 1.4;
}
.source-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--ts-blue);
  border-bottom: 2px solid var(--ts-blue);
  transform: rotate(-45deg);
}

.store-badges {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--ts-ink);
  color: #ffffff;
  border-radius: var(--radius-btn);
  font-size: 12px;
  font-weight: 500;
  transition: transform .15s ease, opacity .15s ease;
}
.store-badge svg { width: 16px; height: 16px; }
.store-badge:hover { transform: translateY(-1px); opacity: 0.92; }

/* Secondary web card */
.source-secondary {
  background: var(--ts-subtle);
  padding: 10px 14px;
}
.source-secondary[hidden] { display: none; }
.source-compact {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: center;
}
.source-compact-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.source-title-sm {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ts-ink);
}
.source-desc-sm {
  margin: 0;
  font-size: 12px;
  color: var(--ts-body);
  line-height: 1.45;
}
.source-web-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  font-size: 13px;
}

@media (max-width: 540px) {
  .modal { padding: var(--space-xl); }
  .modal-header h2 { font-size: 20px; }
  .field-row { grid-template-columns: 1fr; }
  .address-box { flex-wrap: wrap; }
  .address-email { flex-basis: 100%; font-size: 14px; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }
  .choice-grid { grid-template-columns: 1fr; }
  .source-head { grid-template-columns: 1fr; }
  .source-qr { align-self: center; }
  .source-benefits { grid-template-columns: 1fr; }
  .source-compact { grid-template-columns: 1fr; }
  .source-web-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   SETTINGS PAGE
   ============================================================ */
.settings-main { padding: 0; background: var(--ts-subtle); }
.settings-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - var(--topbar-h));
}

/* Settings nav (left) */
.settings-nav {
  background: var(--ts-surface);
  border-right: 1px solid var(--ts-border);
  padding: 28px 16px 32px;
  position: sticky;
  top: var(--topbar-h);
  align-self: start;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.settings-nav-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.02em;
  padding: 0 12px 20px;
}
.settings-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ts-body);
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.settings-nav-item:hover { background: rgba(0,122,254,0.06); color: var(--ts-ink); }
.settings-nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; }
.settings-nav-item.active {
  background: rgba(0,122,254,0.09);
  color: var(--ts-blue);
  font-weight: 600;
}

/* Settings content (right) */
.settings-content {
  padding: 40px 48px 80px;
  max-width: 1040px;
  width: 100%;
}
.settings-section { display: block; }
.settings-section[hidden] { display: none; }
.settings-head { margin-bottom: 32px; }
.settings-head h1 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.2;
}
.settings-head p {
  margin: 0;
  font-size: 15px;
  color: var(--ts-body);
  line-height: 1.5;
}

/* Cards */
.settings-content .card {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  margin-bottom: 20px;
  overflow: hidden;
}
.settings-content .card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 1px solid var(--ts-border);
}
.settings-content .card-head:last-child { border-bottom: 0; }
.settings-content .card-head > div:first-child { flex: 1; min-width: 0; }
.settings-content .card-head h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  line-height: 1.3;
}
.settings-content .card-head p {
  margin: 0;
  font-size: 14px;
  color: var(--ts-body);
  line-height: 1.5;
}
.card-head-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.settings-content .card-body {
  padding: 8px 28px 20px;
}
.settings-content .card-body.no-pad { padding: 0; }
.settings-content .card:has(.card-body:not(.no-pad)) .card-head { border-bottom: 1px solid var(--ts-border); }

/* Settings field row (scoped, dt/dd split) */
.settings-content .field-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 16px 0;
  align-items: center;
  border-bottom: 1px solid #eceef2;
}
.settings-content .field-row:last-child { border-bottom: 0; }
.settings-content .field-row dt {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ts-ink);
}
.settings-content .field-row dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ts-ink);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-content .field-row dd.row-flex { gap: 16px; }
.settings-content .field-row .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ts-ink);
}
.link-inline {
  color: var(--ts-blue);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  padding: 0;
}
.link-inline:hover { text-decoration: underline; }

/* Buttons (scoped to settings + reusable) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  background: var(--ts-surface);
  color: var(--ts-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-ghost:hover { background: var(--ts-subtle); border-color: #cfd4dc; }
.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--ts-error);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: #e0352b; }
.btn-link {
  background: transparent;
  color: var(--ts-blue);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
.btn-link:hover { text-decoration: underline; }
.btn-link-danger {
  background: transparent;
  color: var(--ts-error);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
.btn-link-danger:hover { text-decoration: underline; }
.link {
  color: var(--ts-blue);
  font-weight: 600;
  font-size: 13px;
}
.link:hover { text-decoration: underline; }

/* Pills (status badges) */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.pill-success { background: rgba(13,149,122,0.1); color: var(--ts-success); }
.pill-warning { background: rgba(255,156,0,0.14); color: #b56b00; }
.pill-muted { background: #eceef2; color: var(--ts-body); }

/* Danger card */
.card-danger { border-color: rgba(255,59,48,0.25); background: #fffafa; }
.card-danger .card-head h2 { color: var(--ts-error); }

/* Radio tiles (language) */
.lang-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.radio-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.radio-tile input { position: absolute; opacity: 0; pointer-events: none; }
.radio-tile-flag { font-size: 24px; line-height: 1; }
.radio-tile-label { font-size: 13px; font-weight: 600; color: var(--ts-ink); }
.radio-tile:hover { border-color: #cfd4dc; }
.radio-tile:has(input:checked) {
  border-color: var(--ts-blue);
  background: rgba(0,122,254,0.05);
  box-shadow: 0 0 0 3px rgba(0,122,254,0.12);
}

/* Avatars */
.avatar-lg {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ts-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}
.avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ts-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 36px;
}
.avatar-brown { background: #8b5a2b; }
.avatar-violet { background: #7c3aed; }
.avatar-orange { background: #ea580c; }
.avatar-teal { background: #0d9488; }

/* Security method row */
.method-row, .session-row, .app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #eceef2;
}
.method-row:last-child, .session-row:last-child, .app-row:last-child { border-bottom: 0; }
.method-info, .session-main, .app-info { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.method-info strong, .session-main strong, .app-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ts-ink);
  margin-bottom: 2px;
}
.method-info p, .session-main p, .app-info p {
  margin: 0;
  font-size: 13px;
  color: var(--ts-body);
  line-height: 1.4;
}
.method-icon, .session-icon {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: var(--radius-btn);
  background: rgba(0,122,254,0.08);
  color: var(--ts-blue);
  flex: 0 0 36px;
}
.method-icon svg, .session-icon svg { width: 100%; height: 100%; }
.app-status { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.app-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}
.app-icon svg { width: 22px; height: 22px; }
.app-icon-chrome { background: rgba(0,122,254,0.08); color: var(--ts-blue); }
.app-icon-mcp { background: rgba(124,58,237,0.1); color: #7c3aed; }
.app-icon-zapier { background: rgba(234,88,12,0.1); color: #ea580c; }

/* Workspace logo row */
.logo-row { display: flex; align-items: center; gap: 24px; }
.logo-preview {
  width: 200px;
  height: 80px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  background: var(--ts-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  flex: 0 0 200px;
}
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; filter: invert(1) brightness(0.15); }
.logo-preview.logo-empty { color: var(--ts-body); font-size: 13px; font-weight: 500; }
.logo-actions { display: flex; gap: 12px; align-items: center; }

/* Members table */
.members-table, .invoice-table, .keys-table { display: flex; flex-direction: column; }
.members-head, .members-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 40px;
  gap: 16px;
  padding: 14px 28px;
  align-items: center;
}
.members-table-compact .members-head,
.members-table-compact .members-row {
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1fr) 80px;
}
.members-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  gap: 12px;
}
.members-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px 28px;
  border-top: 1px solid #eceef2;
  font-size: 13px;
  color: var(--ts-body);
}

/* Inline single-row card (workspace, language, logo) */
.inline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.inline-row-main {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ts-ink);
  min-width: 0;
}
.inline-row-main.muted { color: var(--ts-body); }
.inline-row-main strong { font-weight: 600; }
.lang-flag {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 50%;
  background: var(--ts-subtle);
  border: 1px solid var(--ts-border);
}

/* Card actions row under card-body fields */
.card-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
}

/* Certified email add form */
.block-add-form {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid #eceef2;
  margin-bottom: 16px;
}
.block-add-fields {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(160px, 1fr);
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.block-add-fields .field-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ts-body);
}
.block-add-fields .field-label span { font-size: 13px; font-weight: 500; }
.block-add-fields input[type="email"] {
  padding: 10px 14px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  font-size: 14px;
  background: #fff;
  color: var(--ts-ink);
  width: 100%;
}
.block-add-actions { display: flex; align-items: center; gap: 8px; }
.empty-inline {
  padding: 14px 0 4px;
  color: var(--ts-body);
  font-size: 13px;
  text-align: center;
}
.members-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-body);
  background: var(--ts-subtle);
  border-top: 1px solid var(--ts-border);
  border-bottom: 1px solid var(--ts-border);
}
.members-row {
  border-bottom: 1px solid #eceef2;
  font-size: 14px;
}
.members-row:last-child { border-bottom: 0; }
.members-row:hover { background: var(--ts-subtle); }
.member-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.member-cell strong { display: block; font-size: 14px; font-weight: 600; color: var(--ts-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-cell span { display: block; font-size: 12px; color: var(--ts-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.members-row .muted { color: var(--ts-body); font-size: 13px; }
.members-actions { display: flex; justify-content: flex-end; }

.role-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.role-owner { background: rgba(124,58,237,0.12); color: #6d28d9; }
.role-admin { background: rgba(0,122,254,0.12); color: var(--ts-blue); }
.role-operator { background: rgba(13,149,122,0.12); color: var(--ts-success); }
.role-viewer { background: #eceef2; color: var(--ts-body); }

.roles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.role-card {
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.role-card p { margin: 0; font-size: 13px; color: var(--ts-body); line-height: 1.4; }

/* Plan card */
.plan-card { padding: 0; }
.plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 28px 20px;
}
.plan-head .eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-blue);
  margin-bottom: 8px;
}
.plan-head h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.plan-head p { margin: 0; font-size: 14px; color: var(--ts-body); }
.plan-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.credits-block {
  padding: 20px 28px;
  border-top: 1px solid var(--ts-border);
  border-bottom: 1px solid var(--ts-border);
  background: var(--ts-subtle);
}
.credits-head, .credits-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--ts-body);
}
.credits-head strong { color: var(--ts-ink); font-weight: 700; font-size: 14px; }
.credits-bar {
  margin: 10px 0;
  height: 8px;
  background: #dde1ea;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.credits-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ts-blue) 0%, #4ea3ff 100%);
  border-radius: var(--radius-pill);
}
.plan-usage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.usage-cell {
  padding: 20px 28px;
  border-right: 1px solid var(--ts-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.usage-cell:last-child { border-right: 0; }
.usage-cell span { font-size: 12px; color: var(--ts-body); }
.usage-cell strong { font-size: 18px; font-weight: 700; color: var(--ts-ink); font-family: var(--font-body); }

/* Payment method */
.payment-row { display: flex; align-items: center; gap: 16px; padding: 8px 0; }
.payment-card { display: flex; align-items: center; gap: 16px; }
.card-brand {
  background: var(--ts-ink);
  color: #fff;
  padding: 6px 10px;
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.payment-card .muted { color: var(--ts-body); font-size: 13px; }

/* Invoice table */
.invoice-head, .invoice-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  padding: 14px 28px;
  align-items: center;
}
.invoice-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-body);
  background: var(--ts-subtle);
  border-top: 1px solid var(--ts-border);
  border-bottom: 1px solid var(--ts-border);
}
.invoice-row {
  border-bottom: 1px solid #eceef2;
  font-size: 14px;
  color: var(--ts-ink);
}
.invoice-row:last-child { border-bottom: 0; }
.invoice-row .mono { font-family: var(--font-mono); font-size: 13px; }

/* Toggle */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid #eceef2;
  cursor: pointer;
}
.toggle-row:last-child { border-bottom: 0; }
.toggle-row > div { flex: 1; }
.toggle-row strong { display: block; font-size: 14px; font-weight: 700; color: var(--ts-ink); margin-bottom: 4px; }
.toggle-row p { margin: 0; font-size: 13px; color: var(--ts-body); line-height: 1.4; }
.toggle { position: relative; display: inline-block; flex: 0 0 auto; }
.toggle input { position: absolute; opacity: 0; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.toggle-track {
  display: block;
  width: 44px;
  height: 24px;
  background: #cfd4dc;
  border-radius: var(--radius-pill);
  position: relative;
  transition: background 0.2s;
}
.toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
  box-shadow: 0 2px 4px rgba(8,17,34,0.15);
}
.toggle input:checked + .toggle-track { background: var(--ts-blue); }
.toggle input:checked + .toggle-track::after { left: 22px; }
.toggle input:disabled + .toggle-track { opacity: 0.5; cursor: not-allowed; }

/* Keys table */
.keys-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 28px;
  align-items: center;
  border-bottom: 1px solid #eceef2;
}
.keys-row:last-child { border-bottom: 0; }
.keys-row strong { display: block; font-size: 14px; font-weight: 700; color: var(--ts-ink); margin-bottom: 2px; }
.keys-row p.mono { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--ts-body); }
.keys-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ts-body); }
.keys-actions { display: flex; gap: 14px; justify-content: flex-end; }

/* Webhook row */
.webhook-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  padding: 16px 28px;
  align-items: center;
}
.webhook-main .mono { font-size: 13px; color: var(--ts-ink); }
.webhook-main p { margin: 4px 0 0; font-size: 12px; color: var(--ts-body); }

/* Block toolbar */
.block-toolbar { display: flex; gap: 12px; margin-bottom: 16px; }
.block-toolbar .search-input { flex: 1; max-width: 320px; }
.block-toolbar .select-wrap { min-width: 160px; }

.empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--ts-body);
}
.empty-state svg { width: 40px; height: 40px; margin: 0 auto 12px; color: var(--ts-body); opacity: 0.5; }
.empty-state strong { display: block; font-size: 15px; font-weight: 700; color: var(--ts-ink); margin-bottom: 4px; }
.empty-state p { margin: 0; font-size: 13px; max-width: 360px; margin-inline: auto; line-height: 1.5; }

/* Legal grid */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.legal-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: 24px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.legal-card:hover {
  border-color: rgba(0,122,254,0.4);
  box-shadow: 0 4px 14px rgba(8,17,34,0.06);
  transform: translateY(-1px);
}
.legal-icon {
  width: 28px;
  height: 28px;
  color: var(--ts-blue);
  margin-bottom: 4px;
}
.legal-card h3 {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--ts-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.legal-card p { margin: 0; font-size: 14px; color: var(--ts-body); line-height: 1.5; flex: 1; }
.legal-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-blue);
  margin-top: 8px;
}
.legal-arrow svg { width: 14px; height: 14px; }

/* ============================================================
   API & MCP PAGE
   ============================================================ */
.api-main { padding: 32px 40px 80px; background: var(--ts-subtle); }
.api-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.api-hero-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: block;
}
@media (max-width: 900px) {
  .api-hero { grid-template-columns: 1fr; }
  .api-hero-img { height: 120px; }
}

.api-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}
.api-header > div:first-child { flex: 1; min-width: 0; }
.api-header h1 {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ts-ink);
  margin: 0 0 6px;
}
.api-header p {
  margin: 0;
  font-size: 15px;
  color: var(--ts-body);
  line-height: 1.5;
  max-width: 640px;
}
.api-header-actions { display: flex; gap: 10px; flex: 0 0 auto; }

.api-tabs {
  position: sticky;
  top: var(--topbar-h);
  background: var(--ts-subtle);
  z-index: 5;
  padding: 8px 0;
  margin-bottom: 8px;
}

.api-section { margin-bottom: 28px; scroll-margin-top: calc(var(--topbar-h) + 60px); }
.api-section .card { background: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: var(--radius-card); margin-bottom: 16px; overflow: hidden; }
.api-section .card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--ts-border);
}
.api-section .card-head:last-child { border-bottom: 0; }
.api-section .card-head > div:first-child { flex: 1; min-width: 0; }
.api-section .card-head h2 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ts-ink);
  margin: 0 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.api-section .card-head p { margin: 0; font-size: 14px; color: var(--ts-body); line-height: 1.5; }
.api-section .card-body { padding: 18px 26px 22px; }
.api-section .card-body.no-pad { padding: 0; }

/* Usage metric grid */
.usage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.metric-card {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.metric-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ts-body);
  letter-spacing: 0.02em;
}
.metric-value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--ts-ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.metric-value small {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ts-body);
  margin-left: 4px;
}
.metric-value.metric-ok { color: var(--ts-success); }
.metric-sub { font-size: 12px; color: var(--ts-body); display: flex; align-items: center; gap: 6px; }
.metric-sub .pill { padding: 2px 8px; font-size: 10px; }

/* Copy field */
.copy-field {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--ts-subtle);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  padding: 2px 2px 2px 12px;
  max-width: 100%;
  overflow: hidden;
}
.copy-field code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ts-ink);
  padding: 6px 6px 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.copy-field code.token-masked { letter-spacing: 0.04em; }
.copy-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ts-body);
  background: transparent;
  border-radius: var(--radius-btn);
  flex: 0 0 auto;
  transition: background 0.15s, color 0.15s;
}
.copy-btn:hover { background: rgba(0,122,254,0.08); color: var(--ts-blue); }
.copy-btn.copied { color: var(--ts-success); background: rgba(13,149,122,0.12); }
.copy-btn svg { width: 16px; height: 16px; }

/* API field rows */
.api-dl {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.api-dl-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 14px 0;
  align-items: center;
  border-bottom: 1px solid #eceef2;
}
.api-dl-row:last-child { border-bottom: 0; }
.api-dl-row dt {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.005em;
}
.api-dl-row dd {
  margin: 0;
  font-size: 13px;
  color: var(--ts-ink);
  min-width: 0;
}
.api-dl-row dd.mono { font-family: var(--font-mono); }
.api-dl-row dd em {
  font-style: normal;
  color: var(--ts-body);
  padding: 1px 6px;
  background: #f0f3f9;
  border-radius: var(--radius-btn);
}

/* Code block */
.code-block {
  margin: 16px 0 0;
  padding: 14px 16px;
  background: #0b1c3f;
  color: #d8e4f7;
  border-radius: var(--radius-btn);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
}
.code-block code {
  font-family: inherit;
  color: inherit;
  white-space: pre;
}

/* MCP card specifics */
.mcp-subhead {
  margin: 22px 0 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ts-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mcp-tools {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;
}
.mcp-tools li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--ts-subtle);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
}
.mcp-tools li code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ts-ink);
  font-weight: 600;
}
.mcp-tools li span { font-size: 12px; color: var(--ts-body); line-height: 1.4; }

.mcp-setup { margin-top: 8px; }
.mcp-setup-tabs {
  display: inline-flex;
  padding: 4px;
  background: var(--ts-subtle);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-pill);
  gap: 2px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.mcp-setup-tab {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-body);
  background: transparent;
  transition: background 0.15s, color 0.15s;
}
.mcp-setup-tab:hover { color: var(--ts-ink); }
.mcp-setup-tab.active { background: var(--ts-ink); color: #fff; }
.mcp-setup-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ts-body);
}
.mcp-setup-hint code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--ts-subtle);
  padding: 1px 6px;
  border-radius: var(--radius-btn);
}

/* Logs table */
.logs-head, .logs-row {
  display: grid;
  grid-template-columns: 80px 80px minmax(0, 2fr) minmax(0, 1.4fr) 80px 100px;
  gap: 16px;
  padding: 12px 26px;
  align-items: center;
  font-size: 13px;
}
.logs-head {
  background: var(--ts-subtle);
  border-top: 1px solid var(--ts-border);
  border-bottom: 1px solid var(--ts-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-body);
}
.logs-row {
  border-bottom: 1px solid #eceef2;
  color: var(--ts-ink);
}
.logs-row:last-child { border-bottom: 0; }
.logs-row:hover { background: var(--ts-subtle); }
.logs-row .muted { color: var(--ts-body); }
.logs-row > div:first-child { display: inline-flex; align-items: center; gap: 8px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-ok { background: var(--ts-success); }
.status-warn { background: var(--ts-warning); }
.status-err { background: var(--ts-error); }
.method-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.method-get { background: rgba(0,122,254,0.12); color: var(--ts-blue); }
.method-post { background: rgba(13,149,122,0.12); color: var(--ts-success); }
.method-del { background: rgba(255,59,48,0.12); color: var(--ts-error); }

@media (max-width: 1100px) {
  .usage-grid { grid-template-columns: repeat(2, 1fr); }
  .mcp-tools { grid-template-columns: 1fr; }
  .api-dl-row { grid-template-columns: 140px 1fr; }
  .logs-head, .logs-row { grid-template-columns: 70px 70px minmax(0, 2fr) minmax(0, 1fr) 70px; padding: 10px 18px; }
  .logs-head > div:nth-child(6), .logs-row > div:nth-child(6) { display: none; }
}
@media (max-width: 720px) {
  .api-main { padding: 20px 20px 60px; }
  .api-header { flex-direction: column; align-items: stretch; }
  .api-header-actions { flex-wrap: wrap; }
  .usage-grid { grid-template-columns: 1fr; }
  .api-dl-row { grid-template-columns: 1fr; gap: 4px; }
  .logs-head, .logs-row { grid-template-columns: 60px minmax(0, 1fr); }
  .logs-head > div:nth-child(n+3), .logs-row > div:nth-child(n+3) { display: none; }
}

/* ============================================================
   DATA ROOM PAGE
   ============================================================ */
.dataroom-main { padding: 32px 32px 60px; background: var(--ts-subtle); }

.promo-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  align-items: center;
  gap: 40px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-section);
  padding: 56px 56px 56px 64px;
  margin-bottom: 36px;
  overflow: hidden;
  position: relative;
}
.promo-content { max-width: 520px; }
.promo-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(0,122,254,0.12);
  color: var(--ts-blue);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
.promo-banner h1 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ts-ink);
  margin: 0 0 18px;
}
.promo-banner p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ts-body);
  margin: 0 0 28px;
  max-width: 480px;
}
.promo-cta {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
}
.promo-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.promo-graph { width: 100%; height: auto; max-width: 520px; }
.promo-hero-img {
  width: 100%;
  height: auto;
  max-width: 560px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: block;
}
.promo-connectors path { opacity: 0.7; }

/* Feature grid */
.dataroom-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.dr-feature {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dr-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-btn);
  background: rgba(0,122,254,0.08);
  color: var(--ts-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.dr-feature-icon svg { width: 20px; height: 20px; }
.dr-feature h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.dr-feature p {
  margin: 0;
  font-size: 13px;
  color: var(--ts-body);
  line-height: 1.5;
}

/* Rooms section */
.dataroom-rooms {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: 28px;
}
.section-head-left {
  text-align: left;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.section-head-left h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ts-ink);
  margin: 0 0 4px;
}
.section-head-left p { margin: 0; font-size: 14px; color: var(--ts-body); }
.dataroom-empty {
  padding: 48px 20px;
  border: 1px dashed var(--ts-border);
  border-radius: var(--radius-card);
  background: var(--ts-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.dataroom-empty svg { width: 44px; height: 44px; color: var(--ts-body); opacity: 0.45; margin-bottom: 8px; }

/* Forensic Browser downloads */
.fb-downloads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.fb-download-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  background: var(--ts-surface);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fb-download-card:hover {
  border-color: rgba(0,122,254,0.45);
  box-shadow: 0 4px 14px rgba(8,17,34,0.06);
  transform: translateY(-1px);
}
.fb-platform-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-card);
  background: rgba(8,17,34,0.06);
  color: var(--ts-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
}
.fb-platform-icon svg { width: 22px; height: 22px; }
.fb-platform-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fb-platform-meta strong {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ts-ink);
}
.fb-platform-meta span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ts-body);
}
.fb-platform-arrow {
  color: var(--ts-blue);
  flex: 0 0 auto;
}
.fb-platform-arrow svg { width: 18px; height: 18px; }
.fb-integrity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--ts-subtle);
  border-radius: var(--radius-btn);
  font-size: 13px;
  color: var(--ts-body);
}
.fb-integrity svg { width: 18px; height: 18px; color: var(--ts-success); flex: 0 0 18px; }
.fb-integrity .link { font-weight: 600; }

@media (max-width: 1100px) {
  .fb-downloads { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .promo-banner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 36px 32px 28px;
  }
  .promo-banner h1 { font-size: 32px; }
  .promo-visual { order: -1; padding: 0; }
  .promo-graph { max-width: 380px; }
  .dataroom-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .dataroom-main { padding: 16px 16px 48px; }
  .promo-banner { padding: 24px 20px; border-radius: var(--radius-card); }
  .promo-banner h1 { font-size: 26px; }
  .dataroom-features { grid-template-columns: 1fr; }
  .section-head-left { flex-direction: column; }
}

/* ============================================================
   AUTH / LOGIN PAGE
   ============================================================ */
.auth-body { background: #fff; min-height: 100vh; }
.auth-layout {
  display: grid;
  grid-template-columns: minmax(460px, 1fr) 1fr;
  min-height: 100vh;
}

/* LEFT: form */
.auth-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
}
.auth-form {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
}
.auth-logo {
  display: inline-flex;
  margin-bottom: 40px;
  width: fit-content;
}
.auth-logo img {
  height: 32px;
  width: auto;
  filter: invert(1) brightness(0.15);
}
.auth-form-head { margin-bottom: 28px; }
.auth-form-head h1 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ts-ink);
  margin: 0 0 10px;
  line-height: 1.15;
}
.auth-form-head p {
  margin: 0;
  font-size: 15px;
  color: var(--ts-ink);
  font-weight: 500;
}

.auth-sr {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.auth-form-fields { display: flex; flex-direction: column; gap: 12px; }
.auth-field { position: relative; }
.auth-input {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  padding: 0 14px 0 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-input:focus-within {
  border-color: var(--ts-blue);
  box-shadow: 0 0 0 3px rgba(0,122,254,0.14);
}
.auth-input input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 14px 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ts-ink);
  outline: none;
  min-width: 0;
}
.auth-input input::placeholder { color: #9aa3b2; }
.auth-input-toggle {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ts-body);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.auth-input-toggle:hover { color: var(--ts-blue); background: rgba(0,122,254,0.06); }
.auth-input-toggle.is-revealed { color: var(--ts-blue); }
.auth-input-toggle svg { width: 18px; height: 18px; }

.auth-forgot {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin: 2px 0 10px;
  align-self: flex-start;
}
.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.auth-submit[disabled] { opacity: 0.75; cursor: wait; }
.auth-submit svg { width: 14px; height: 14px; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 18px;
  color: var(--ts-body);
  font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ts-border);
}

.auth-sso { display: flex; flex-direction: column; gap: 10px; }
.sso-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--ts-blue);
  background: rgba(0,122,254,0.1);
  border: 0;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background 0.15s;
}
.sso-btn:hover { background: rgba(0,122,254,0.16); }
.sso-btn.is-loading { opacity: 0.7; cursor: wait; }
.sso-btn svg { flex: 0 0 18px; }

.auth-sso-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  align-self: center;
}

/* RIGHT: visual */
.auth-visual {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visual-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 30%, rgba(78,163,255,0.35) 0%, transparent 60%),
    linear-gradient(135deg, #0b2f7a 0%, #003c9c 55%, #0b54c9 100%);
}
.visual-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/lines-pattern.png') center/cover no-repeat;
  opacity: 0.22;
  mix-blend-mode: screen;
  pointer-events: none;
}
.visual-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding: 48px;
}
.visual-graph {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.35));
}

@media (max-width: 1024px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-form-wrap { padding: 40px 24px; min-height: 100vh; }
}

@media (max-width: 520px) {
  .auth-form-head h1 { font-size: 28px; }
  .auth-input input { font-size: 14px; padding: 13px 0; }
  .auth-logo img { height: 28px; }
}

/* ============================================================
   PROFILE DROPDOWN (topbar)
   ============================================================ */
.profile-menu-wrap { position: relative; display: inline-flex; }
.topbar .profile .profile-caret {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  color: rgba(255,255,255,0.6);
  transition: transform 0.15s;
}
.topbar .profile .profile-caret svg { width: 16px; height: 16px; }
.topbar .profile.is-open .profile-caret { transform: rotate(180deg); color: #fff; }

.profile-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  background: var(--ts-surface);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(8,17,34,0.18), 0 2px 6px rgba(8,17,34,0.08);
  padding: 4px 0;
  z-index: 60;
  color: var(--ts-ink);
  overflow: hidden;
}
.profile-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px;
  border-bottom: 1px solid var(--ts-border);
  background: var(--ts-subtle);
}
.profile-menu-head .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: var(--ts-blue);
  flex: 0 0 36px;
}
.profile-menu-head .avatar.avatar-brown { background: #8b5a2b; }
.profile-menu-head div { display: flex; flex-direction: column; min-width: 0; }
.profile-menu-head strong { font-size: 14px; font-weight: 700; color: var(--ts-ink); line-height: 1.3; }
.profile-menu-head span { font-size: 12px; color: var(--ts-body); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-menu-section { padding: 4px 0; border-bottom: 1px solid var(--ts-border); }
.profile-menu-section:last-child { border-bottom: 0; }
.profile-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: transparent;
  color: var(--ts-ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.profile-menu-item:hover { background: rgba(0,122,254,0.06); color: var(--ts-blue); }
.profile-menu-item svg { width: 16px; height: 16px; color: var(--ts-body); flex: 0 0 16px; }
.profile-menu-item:hover svg { color: var(--ts-blue); }
.profile-menu-danger { color: var(--ts-error); }
.profile-menu-danger svg { color: var(--ts-error); }
.profile-menu-danger:hover { background: rgba(255,59,48,0.08); color: var(--ts-error); }
.profile-menu-danger:hover svg { color: var(--ts-error); }

/* ============================================================
   ONBOARDING TOUR
   ============================================================ */
body.onb-active { overflow: hidden; }
.onb-host {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}
.onb-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.onb-overlay-path { transition: d 0.25s, fill 0.2s; }

.onb-tip {
  position: fixed;
  max-width: 360px;
  width: calc(100vw - 32px);
  background: var(--ts-surface);
  border-radius: var(--radius-card);
  padding: 24px 24px 20px;
  box-shadow: 0 16px 40px rgba(8,17,34,0.22), 0 4px 10px rgba(8,17,34,0.1);
  pointer-events: auto;
  animation: onb-in 0.22s ease;
}
@keyframes onb-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.onb-tip-center {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  max-width: 440px;
  padding: 32px 32px 24px;
  text-align: center;
}
.onb-tip-center h3 { font-size: 24px; }

.onb-tip h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ts-ink);
  margin: 2px 0 8px;
  line-height: 1.3;
}
.onb-tip p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ts-body);
  line-height: 1.55;
}
.onb-tip-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.onb-counter {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-blue);
}
.onb-dots { display: inline-flex; gap: 5px; }
.onb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dfe3ea;
  transition: background 0.2s, transform 0.2s;
}
.onb-dot.is-done { background: #cfe0ff; }
.onb-dot.is-active {
  background: var(--ts-blue);
  transform: scale(1.4);
}
.onb-tip-center .onb-dots { justify-content: center; }
.onb-tip-center .onb-tip-step { justify-content: center; flex-direction: column; }

.onb-tip-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.onb-tip-center .onb-tip-actions { justify-content: center; }
.onb-tip-nav { display: inline-flex; gap: 8px; }
.onb-tip .btn-ghost {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
}
.onb-tip .btn-primary {
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
}
.onb-tip .btn-ghost[hidden],
.onb-tip .btn-primary[hidden],
.onb-tip button[hidden] { display: none !important; }
.onb-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ts-body);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.onb-close:hover { background: var(--ts-subtle); color: var(--ts-ink); }

/* Arrow indicators */
.onb-tip::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--ts-surface);
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(8,17,34,0.04);
}
.onb-tip-bottom::before, .onb-tip-bottom-left::before {
  top: -7px; left: 50%; margin-left: -7px;
}
.onb-tip-bottom-left::before { left: auto; right: 24px; margin-left: 0; }
.onb-tip-top::before {
  bottom: -7px; left: 50%; margin-left: -7px;
  box-shadow: 2px 2px 4px rgba(8,17,34,0.04);
}
.onb-tip-left::before {
  right: -7px; top: 50%; margin-top: -7px;
  box-shadow: 2px -2px 4px rgba(8,17,34,0.04);
}
.onb-tip-right::before {
  left: -7px; top: 50%; margin-top: -7px;
  box-shadow: -2px 2px 4px rgba(8,17,34,0.04);
}
.onb-tip-center::before { display: none; }

@media (max-width: 560px) {
  .onb-tip { max-width: calc(100vw - 24px); padding: 20px 20px 18px; }
  .onb-tip-center { padding: 28px 22px 22px; }
}

/* ============================================================
   SUPPORT WIDGET (topbar button + slide-in panel)
   ============================================================ */
.topbar-help {
  display: none;
}
.topbar-help:hover { background: rgba(255,255,255,0.12); color: #fff; }
.topbar-help.is-active {
  background: var(--ts-blue);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,122,254,0.35);
}
.topbar-help svg { width: 18px; height: 18px; }

.support-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8,17,34,0.12);
  backdrop-filter: blur(2px);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s;
}
.support-backdrop.is-open { opacity: 1; }

.support-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 400px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  background: var(--ts-surface);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 48px rgba(8,17,34,0.18), 0 4px 12px rgba(8,17,34,0.08);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 0.2s, transform 0.2s;
}
.support-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.support-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--ts-border);
  background: linear-gradient(180deg, #fafbfd 0%, #ffffff 100%);
  flex: 0 0 auto;
}
.support-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.support-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ts-blue);
}
.support-head h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ts-ink);
  margin: 0;
  line-height: 1.2;
}
.support-close {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ts-body);
  background: transparent;
  transition: background 0.15s, color 0.15s;
  flex: 0 0 auto;
}
.support-close:hover { background: var(--ts-subtle); color: var(--ts-ink); }

.support-context {
  padding: 14px 22px 16px;
  background: var(--ts-subtle);
  border-bottom: 1px solid var(--ts-border);
  flex: 0 0 auto;
}
.context-title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ts-body);
  margin-bottom: 10px;
}
.support-context ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.support-context li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ts-ink);
}
.support-context li svg {
  width: 18px;
  height: 18px;
  color: var(--ts-blue);
  flex: 0 0 18px;
}
.support-context li div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.support-context li strong { font-size: 12px; font-weight: 600; color: var(--ts-body); }
.support-context li span { font-size: 13px; color: var(--ts-ink); font-weight: 500; }
.ctx-flag { display: inline-block; margin-right: 2px; }

.support-form, .support-success {
  padding: 18px 22px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.support-form[hidden], .support-success[hidden] { display: none; }
.support-backdrop[hidden], .support-panel[hidden] { display: none; }
.support-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.support-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ts-ink);
}
.support-form textarea {
  width: 100%;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ts-ink);
  resize: vertical;
  min-height: 110px;
  background: var(--ts-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.support-form textarea:focus {
  outline: none;
  border-color: var(--ts-blue);
  box-shadow: 0 0 0 3px rgba(0,122,254,0.14);
}
.support-form .select-wrap {
  width: 100%;
  flex: 0 0 auto;
}
.support-form .select-wrap select {
  padding: 11px 40px 11px 14px;
  font-size: 14px;
}
.support-disclaimer {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--ts-body);
  line-height: 1.5;
}
.support-submit {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.support-submit[disabled] { opacity: 0.7; cursor: wait; }

.support-success {
  text-align: center;
  padding: 32px 22px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.support-success svg {
  width: 48px;
  height: 48px;
  color: var(--ts-success);
  margin-bottom: 6px;
}
.support-success strong {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
}
.support-success p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ts-body);
  line-height: 1.55;
}
.support-success em { font-style: normal; color: var(--ts-ink); font-weight: 600; }
.support-success .support-new { margin-top: 4px; }

@media (max-width: 560px) {
  .support-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: 100vw;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    max-height: 88vh;
  }
}

/* ============================================================
   PLANS PAGE
   ============================================================ */
.plans-main { background: var(--ts-subtle); padding: 0; }

/* Breadcrumb bar (reusable page-level) */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: var(--ts-surface);
  border-bottom: 1px solid var(--ts-border);
  font-size: 13px;
  color: var(--ts-body);
}
.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-btn);
  color: var(--ts-body);
  transition: background 0.15s, color 0.15s;
  margin-right: 2px;
}
.breadcrumb-back:hover { background: rgba(0,122,254,0.08); color: var(--ts-blue); }
.breadcrumb-back svg { width: 18px; height: 18px; }
.breadcrumb-trail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.breadcrumb-trail li { display: inline-flex; align-items: center; }
.breadcrumb-trail a {
  color: var(--ts-body);
  font-weight: 500;
  transition: color 0.15s;
}
.breadcrumb-trail a:hover { color: var(--ts-blue); }
.breadcrumb-trail .crumb-sep svg {
  width: 14px;
  height: 14px;
  color: #b0b4bd;
}
.breadcrumb-trail .crumb-current {
  color: var(--ts-ink);
  font-weight: 600;
}

.plans-hero {
  text-align: center;
  padding: 48px 24px 32px;
  max-width: 800px;
  margin: 0 auto;
}
.eyebrow-center {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ts-blue);
  margin-bottom: 14px;
}
.plans-hero h1 {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ts-ink);
  line-height: 1.15;
  margin: 0 0 14px;
}
.plans-hero p {
  font-size: 16px;
  color: var(--ts-body);
  line-height: 1.55;
  margin: 0 0 28px;
}
.cycle-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-pill);
  gap: 2px;
}
.cycle-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ts-body);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cycle-option:hover { color: var(--ts-ink); }
.cycle-option.active { background: var(--ts-ink); color: #fff; }
.cycle-save {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--ts-success);
  color: #fff;
  letter-spacing: 0.02em;
}
.cycle-option.active .cycle-save { background: rgba(255,255,255,0.25); }

/* Plan grid */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 32px 48px;
  align-items: start;
}
.plans-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 960px; }

.plan-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: 28px 28px 24px;
}
.plan-featured {
  border-color: var(--ts-blue);
  box-shadow: 0 8px 30px rgba(0,122,254,0.12);
}
.plan-enterprise {
  background: linear-gradient(180deg, #0b1c3f 0%, #081122 100%);
  color: #fff;
  border-color: transparent;
}
.plan-enterprise .plan-blurb,
.plan-enterprise .plan-footnote,
.plan-enterprise .plan-everything { color: rgba(255,255,255,0.7); }
.plan-enterprise .plan-features li span { color: rgba(255,255,255,0.9); }
.plan-enterprise .plan-features li svg { color: #4ea3ff; }
.plan-enterprise .plan-features li strong { color: #fff; }
.plan-tile-shield {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  color: rgba(78,163,255,0.55);
  pointer-events: none;
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  background: var(--ts-blue);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0,122,254,0.3);
}
.plan-tile-head { margin-bottom: 20px; }
.plan-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ts-ink);
  display: block;
  margin-bottom: 6px;
}
.plan-name-business { color: var(--ts-success); }
.plan-name-enterprise { color: #a78bfa; }
.plan-enterprise .plan-name { color: #a78bfa; }
.plan-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  margin-bottom: 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: rgba(13,149,122,0.1);
  color: var(--ts-success);
  letter-spacing: 0.02em;
}
.plan-state svg { width: 12px; height: 12px; }
.plan-blurb {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--ts-body);
  line-height: 1.5;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
  min-height: 56px;
}
.price-value {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--ts-ink);
  letter-spacing: -0.03em;
}
.price-currency { font-size: 22px; margin-right: 4px; font-weight: 700; }
.price-number { font-size: 48px; line-height: 1; }
.price-value-custom {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.price-cycle { font-size: 14px; color: var(--ts-body); font-weight: 500; }
.plan-enterprise .price-value { color: #fff; }
.plan-enterprise .price-cycle { color: rgba(255,255,255,0.65); }
.plan-footnote {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ts-body);
}

/* Plan configurator (seats + workspaces) */
.plan-config {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: var(--ts-subtle);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
}
.plan-config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan-config-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-config-label strong {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
}
.plan-config-label span {
  font-size: 12px;
  color: var(--ts-body);
  line-height: 1.3;
}

.stepper {
  display: inline-flex;
  align-items: center;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  overflow: hidden;
  flex: 0 0 auto;
}
.stepper-btn {
  width: 34px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ts-ink);
  background: transparent;
  transition: background 0.15s;
}
.stepper-btn:hover { background: rgba(0,122,254,0.08); color: var(--ts-blue); }
.stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper-btn svg { width: 16px; height: 16px; }
.stepper-input {
  width: 48px;
  height: 36px;
  border: 0;
  border-left: 1px solid var(--ts-border);
  border-right: 1px solid var(--ts-border);
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--ts-ink);
  background: transparent;
  -moz-appearance: textfield;
  -webkit-appearance: none;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-input:focus { outline: none; background: rgba(0,122,254,0.06); }

.plan-cta {
  width: 100%;
  justify-content: center;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
}
.plan-cta:disabled {
  opacity: 1;
  cursor: default;
  background: rgba(13,149,122,0.12);
  color: var(--ts-success);
  border: 0;
  box-shadow: none;
}
.plan-enterprise .plan-cta { background: #fff; color: #081122; }
.plan-enterprise .plan-cta:hover { background: #f0f3f9; }

.plan-everything {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ts-ink);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ts-ink);
}
.plan-features li svg {
  width: 16px;
  height: 16px;
  color: var(--ts-success);
  flex: 0 0 16px;
  margin-top: 3px;
}
.plan-features li strong { font-weight: 700; }

/* Compare */
.plans-compare {
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 0 32px;
}
.section-head { text-align: center; margin-bottom: 24px; }
.section-head h2 {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ts-ink);
  margin: 0 0 6px;
}
.section-head p { font-size: 15px; color: var(--ts-body); margin: 0; }

.compare-table {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.compare-row {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  align-items: center;
  padding: 14px 24px;
  font-size: 14px;
  color: var(--ts-ink);
  border-bottom: 1px solid #eceef2;
}
.compare-2 .compare-row { grid-template-columns: 2fr 1fr 1fr; }
.compare-row:last-child { border-bottom: 0; }
.compare-row > div { min-height: 24px; }
.compare-row > div:first-child { font-weight: 500; color: var(--ts-ink); }
.compare-row > div:not(:first-child) { text-align: center; color: var(--ts-body); font-size: 13px; }
.compare-head-row {
  background: var(--ts-subtle);
  border-bottom: 1px solid var(--ts-border);
  padding: 18px 24px;
}
.compare-head-row > div {
  font-family: var(--font-body);
  font-size: 14px !important;
  font-weight: 700;
  color: var(--ts-ink) !important;
  letter-spacing: -0.01em;
}
.compare-head-row > div:first-child { color: var(--ts-body) !important; font-weight: 600; font-size: 11px !important; letter-spacing: 0.08em; text-transform: uppercase; }
.col-featured { background: rgba(0,122,254,0.04); }
.compare-head-row .col-featured { color: var(--ts-blue) !important; }
.compare-group {
  padding: 18px 24px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ts-body);
  background: var(--ts-subtle);
  border-bottom: 1px solid var(--ts-border);
}
.c-yes { color: var(--ts-success) !important; font-weight: 700 !important; font-size: 14px !important; }
.c-no { color: #b0b4bd !important; font-size: 18px !important; }

/* FAQ */
.plans-faq {
  max-width: 820px;
  margin: 48px auto 0;
  padding: 0 32px;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  padding: 0 22px;
  transition: border-color 0.15s;
}
.faq-item[open] { border-color: rgba(0,122,254,0.35); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg {
  width: 20px;
  height: 20px;
  color: var(--ts-body);
  transition: transform 0.2s;
  flex: 0 0 20px;
}
.faq-item[open] summary svg { transform: rotate(180deg); color: var(--ts-blue); }
.faq-item p {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ts-body);
  line-height: 1.6;
}

/* Bottom CTA band */
.plans-cta-band {
  max-width: 1100px;
  margin: 56px auto 56px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #0b1c3f 0%, #081122 100%);
  border-radius: var(--radius-card);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-inline: 32px;
  overflow: hidden;
  position: relative;
}
.plans-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 50%, rgba(0,122,254,0.25) 0%, transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 12px, rgba(255,255,255,0.04) 12px 13px);
  pointer-events: none;
}
.plans-cta-band > * { position: relative; z-index: 1; }
.plans-cta-band h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.plans-cta-band p { margin: 0; color: rgba(255,255,255,0.75); font-size: 14px; line-height: 1.5; max-width: 560px; }
.plans-cta-band .btn-lg {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  background: #fff;
  color: #081122;
  border: 0;
  border-radius: var(--radius-btn);
  flex: 0 0 auto;
}
.plans-cta-band .btn-lg:hover { background: #eef1f6; }

@media (max-width: 1100px) {
  .plans-grid { grid-template-columns: 1fr; max-width: 560px; }
  .plans-grid-2 { grid-template-columns: 1fr; max-width: 560px; }
  .compare-row { grid-template-columns: 1.6fr repeat(3, 1fr); padding: 12px 16px; font-size: 13px; }
  .compare-2 .compare-row { grid-template-columns: 1.6fr 1fr 1fr; }
  .plans-hero h1 { font-size: 30px; }
  .plans-cta-band { flex-direction: column; text-align: center; margin: 40px 20px; }
  .plans-cta-band p { max-width: 100%; }
}
@media (max-width: 560px) {
  .plans-hero { padding: 32px 16px 24px; }
  .page-breadcrumb { padding: 12px 16px; font-size: 12px; gap: 6px; }
  .breadcrumb-trail { gap: 6px; }
  .plans-grid { padding: 12px 16px 32px; }
  .plans-compare, .plans-faq { padding: 0 16px; }
  .plan-tile { padding: 24px 20px 20px; border-radius: 16px; }
  .price-number { font-size: 38px; }
  .compare-row { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); padding: 10px 12px; gap: 8px; }
  .compare-head-row, .compare-group { padding: 14px 12px; }
}

/* Responsive */
@media (max-width: 1100px) {
  .settings-layout { grid-template-columns: 220px 1fr; }
  .settings-content { padding: 32px 28px 60px; }
  .plan-usage, .roles-grid { grid-template-columns: repeat(2, 1fr); }
  .usage-cell { border-right: 0; border-bottom: 1px solid var(--ts-border); }
  .usage-cell:nth-last-child(-n+2) { border-bottom: 0; }
  .usage-cell:nth-child(odd) { border-right: 1px solid var(--ts-border); }
  .lang-options { grid-template-columns: repeat(2, 1fr); }
  .legal-grid { grid-template-columns: 1fr; }
  .members-head, .members-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 40px; }
  .members-head > div:nth-child(4), .members-row > div:nth-child(4) { display: none; }
  .members-table-compact .members-head, .members-table-compact .members-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) 80px; }
  .members-table-compact .members-head > div:nth-child(4), .members-table-compact .members-row > div:nth-child(4) { display: flex; }
}
@media (max-width: 720px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ts-border);
    padding: 16px;
  }
  .settings-nav-label { padding: 0 8px 12px; font-size: 18px; }
  .settings-nav-list { flex-direction: row; overflow-x: auto; gap: 4px; }
  .settings-nav-item { flex: 0 0 auto; white-space: nowrap; }
  .settings-content { padding: 24px 20px 60px; }
  .settings-content .card-head { flex-direction: column; align-items: stretch; }
  .settings-content .field-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .logo-row { flex-direction: column; align-items: stretch; }
  .logo-preview { flex: 0 0 auto; width: 100%; }
  .members-head, .members-row, .invoice-head, .invoice-row, .keys-row, .webhook-row {
    grid-template-columns: 1fr !important;
    padding: 16px 20px;
  }
  .members-head { display: none; }
}

/* ============================================================
   MOCKUP APP (app.html) — iPhone frame + mobile UI
   ============================================================ */
.app-mockup-main {
  padding: 32px 40px 80px;
  background: var(--ts-subtle);
  min-height: calc(100vh - var(--topbar-h));
}
.iphone-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 0 64px;
}

/* iPhone frame — TrueScreen mobile dark theme tokens scoped to the screen */
.iphone {
  position: relative;
  width: 390px;
  height: 844px;
  background: #0a0a0a;
  border-radius: 54px;
  padding: 12px;
  box-shadow:
    0 0 0 1px #1a1a1a,
    0 0 0 4px #2a2a2a,
    0 30px 80px rgba(8, 17, 34, 0.25),
    0 10px 30px rgba(8, 17, 34, 0.15);
}
.iphone-screen {
  /* Mobile dark-theme tokens (derived from TrueScreen light tokens) */
  --ms-bg: #0b0c10;
  --ms-surface: #1a1f2e;
  --ms-surface-inner: #0f1524;
  --ms-surface-badge: #141a2a;
  --ms-blue: #4ea3ff;            /* lightened var(--ts-blue) for dark bg */
  --ms-blue-tint: rgba(0, 122, 254, 0.15);
  --ms-success: #3ddc97;
  --ms-danger: #ff7979;
  --ms-coin: #f6c64a;
  --ms-text: #fff;
  --ms-text-sec: rgba(255, 255, 255, 0.65);
  --ms-text-ter: rgba(255, 255, 255, 0.5);
  --ms-text-quart: rgba(255, 255, 255, 0.4);
  --ms-border: rgba(255, 255, 255, 0.06);
  --ms-pattern: rgba(255, 255, 255, 0.025);
}
.iphone-island {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 35px;
  background: #000;
  border-radius: 20px;
  z-index: 3;
  pointer-events: none;
}
.iphone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0b0c10;
  border-radius: 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.iphone-home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 3px;
  z-index: 4;
  pointer-events: none;
}

/* Status bar */
.ms-statusbar {
  flex: 0 0 auto;
  padding: 18px 28px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ms-sys { display: inline-flex; align-items: center; gap: 8px; }
.ms-signal { width: 18px; height: 12px; color: #fff; }
.ms-battery {
  display: inline-block;
  width: 26px;
  height: 13px;
  border: 1.2px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  position: relative;
  padding: 1px;
}
.ms-battery::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -4px;
  width: 2px;
  height: 7px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 0 2px 2px 0;
}
.ms-battery-fill {
  display: block;
  width: 60%;
  height: 100%;
  background: #fff;
  border-radius: 1.5px;
}

/* Screens (one visible at a time) */
.ms-screen {
  display: none;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 22px 0;
  color: #fff;
  font-family: var(--font-body);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ms-screen.is-active { display: block; }
.ms-screen::-webkit-scrollbar { display: none; }

/* Screen header — iOS Title 1 28pt (Raleway Bold has heavier optical weight than SF Pro) */
.ms-home-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0 16px;
  min-height: 44px;
}
.ms-home-head h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #fff;
}
.ms-credits {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #141a2a;
  border-radius: 12px;
  min-height: 40px;
}
.ms-credits strong {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: #4ea3ff;
  letter-spacing: -0.01em;
}
.ms-coin { width: 20px; height: 20px; }

.ms-synced {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #141a2a;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  min-height: 40px;
}
.ms-synced svg { width: 18px; height: 18px; }

/* Section titles — iOS Title 2 22pt semibold */
.ms-section-title {
  margin: 20px 0 14px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.018em;
  line-height: 1.15;
}
.ms-section-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Quick Flow tiles grid 3x2 — touch target ≥ 64pt, icon 28pt, label 13pt (caption) */
.ms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 6px;
}
.ms-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 6px;
  background: #1a1f2e;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.006em;
  text-align: center;
  cursor: pointer;
  min-height: 96px;
}
.ms-tile span {
  display: block;
  word-break: break-word;
  hyphens: auto;
}
.ms-tile svg {
  width: 28px;
  height: 28px;
  color: #4ea3ff;
}

/* Features list — card title 17pt (Headline) */
.ms-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ms-feature {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px;
  background: linear-gradient(90deg, #1a1f2e 0%, #23324f 100%);
  border-radius: 14px;
  min-height: 104px;
  overflow: hidden;
}
.ms-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 255, 255, 0.025) 12px 13px);
  pointer-events: none;
}
.ms-feature-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 58%;
  position: relative;
  z-index: 1;
}
.ms-feature-icon { width: 24px; height: 24px; color: #4ea3ff; }
.ms-feature-copy strong {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.ms-feature-art {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Explore screen — search field iOS standard 17pt body */
.ms-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #1a1f2e;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 17px;
  font-weight: 400;
  margin-bottom: 20px;
  min-height: 44px;
}
.ms-search svg { width: 18px; height: 18px; color: rgba(255, 255, 255, 0.5); }

.ms-explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.ms-explore-card {
  display: flex;
  flex-direction: column;
  background: #1a1f2e;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}
.ms-explore-art {
  height: 90px;
}
.ms-art-construction { background: linear-gradient(135deg, #d9e4f4 0%, #8aa5cf 100%); }
.ms-art-chat { background: linear-gradient(135deg, #3f2a1a 0%, #7c5a3c 100%); }
.ms-art-ip { background: linear-gradient(135deg, #dce8f5 0%, #94aecf 100%); }
.ms-art-car { background: linear-gradient(135deg, #e5eaf2 0%, #8e9fb6 100%); }
.ms-explore-card strong {
  padding: 14px 14px 4px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.ms-explore-card span {
  padding: 0 14px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
}

.ms-feature-wide {
  display: block;
  padding: 20px 18px;
  background: linear-gradient(135deg, #13294d 0%, #0b1a33 100%);
  border: 1px solid rgba(78, 163, 255, 0.25);
  border-radius: 16px;
}
.ms-feature-wide strong {
  display: block;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.ms-feature-wide p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 12px;
}
.ms-link {
  color: #4ea3ff;
  font-size: 15px;
  font-weight: 600;
}

/* Archive screen — row title 17pt headline, date 13pt footnote */
.ms-archive-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.ms-archive-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px;
  background: #1a1f2e;
  border-radius: 16px;
}
.ms-archive-card strong {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.ms-archive-type {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ms-archive-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.ms-archive-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
}
.ms-archive-date svg { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.55); }
.ms-archive-cloud {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.55);
}

/* Profile screen — name Title 3 20pt, rows Body 17pt */
.ms-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 24px 20px;
  background: #1a1f2e;
  border-radius: 18px;
  margin-bottom: 20px;
  text-align: center;
}
.ms-profile-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--ts-blue);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.ms-profile-card strong {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.ms-profile-email {
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  margin-top: 2px;
}
.ms-profile-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 16px 0 10px;
  padding: 14px 18px;
  background: #0f1524;
  border-radius: 12px;
  width: 100%;
}
.ms-profile-credits-label {
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ms-profile-credits-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: #4ea3ff;
  letter-spacing: -0.018em;
}
/* Header trailing action (share, etc.) shared by home/library/profile */
.ms-header-action {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--ms-radius-pill);
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--ms-surface);
  color: var(--ms-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ms-header-action:active { background: rgba(255,255,255,0.08); }
.ms-header-action svg { width: 18px; height: 18px; }
.iphone-screen.is-light .ms-header-action {
  background: #f2f2f7;
  border-color: #e5e5ea;
  color: #000;
}
.iphone-screen.is-light .ms-header-action:active { background: #e9e9ef; }

.ms-profile-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ms-space-sm);
  margin-top: var(--ms-space-sm);
  width: 100%;
}
.ms-profile-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--ms-radius-md);
  color: var(--ms-text);
  font-family: inherit;
  font-size: var(--ms-font-footnote);
  font-weight: var(--ms-weight-semibold);
  letter-spacing: -0.005em;
  cursor: pointer;
  min-height: 64px;
}
.ms-profile-quick-action:active { background: rgba(255,255,255,0.09); }
.ms-profile-quick-action-icon {
  width: 22px;
  height: 22px;
  color: var(--ms-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-profile-quick-action-icon svg { width: 100%; height: 100%; }
/* Light mode */
.iphone-screen.is-light .ms-profile-quick-action {
  background: #fff;
  border-color: #e5e5ea;
  color: #000;
}
.iphone-screen.is-light .ms-profile-quick-action:active { background: #f2f2f7; }
.iphone-screen.is-light .ms-profile-quick-action-icon { color: var(--ts-blue); }

.ms-profile-cta {
  width: 100%;
  padding: 14px;
  background: var(--ts-blue);
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  min-height: 50px;
  letter-spacing: -0.01em;
}
.ms-profile-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #1a1f2e;
  border-radius: 14px;
  overflow: hidden;
}
.ms-profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 400;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  width: 100%;
  min-height: 52px;
  letter-spacing: -0.015em;
  text-align: left;
  cursor: pointer;
}
.ms-profile-row:last-child { border-bottom: 0; }
.ms-profile-row > svg:first-child { width: 22px; height: 22px; color: #4ea3ff; flex-shrink: 0; }
.ms-profile-row span { flex: 1; }
.ms-row-chev { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.3); }
.ms-profile-logout {
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 1px solid rgba(255, 100, 100, 0.3);
  border-radius: 12px;
  color: #ff7979;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  min-height: 50px;
}

/* Tab bar — iOS spec: 49pt bar + safe area, icons 25-28pt, labels 10pt */
.ms-tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(11, 12, 16, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 0 28px;
}
.ms-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 0 4px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
  min-height: 49px;
  letter-spacing: 0.01em;
}
.ms-tab svg { width: 26px; height: 26px; }
.ms-tab.is-active { color: #4ea3ff; }

.ms-scroll-pad { height: 20px; }

@media (max-width: 480px) {
  .iphone { transform: scale(0.82); transform-origin: top center; }
}

/* ============================================================
   MOBILE HOME — additions for coherence with portal
   ============================================================ */
.ms-home-head-simple { padding: 8px 0 16px; }

/* AI prompt (mirror of portal .ai-prompt) */
.ms-ai-prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #1a1f2e;
  border-radius: 999px;
  margin-bottom: 12px;
  min-height: 48px;
}
.ms-ai-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #4ea3ff;
}
.ms-ai-icon svg { width: 20px; height: 20px; }
.ms-ai-input-stub {
  flex: 1;
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ms-ai-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  padding: 0;
  line-height: 1.3;
}
.ms-ai-input::placeholder { color: rgba(255, 255, 255, 0.5); }
/* Conversational search results on mobile */
.ms-ai-results {
  background: var(--ms-surface, #1a1f2e);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-ai-results[hidden] { display: none; }
/* Merged state: ms-ai-prompt + ms-ai-results flow as one surface */
.ms-ai-prompt.is-searching {
  border-radius: 14px 14px 0 0;
  margin-bottom: 0;
}
.ms-ai-results.is-searching {
  border-radius: 0 0 14px 14px;
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ms-ai-results-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-text-sec, rgba(255,255,255,0.55));
  padding: 0 2px 2px;
}
.ms-ai-results-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ms-text-sec, rgba(255,255,255,0.6));
  padding: 0 2px 4px;
}
.ms-ai-results-hint svg {
  width: 14px;
  height: 14px;
  color: var(--ms-blue, #4ea3ff);
  flex-shrink: 0;
}
.ms-ai-results-hint #ms-ai-results-query { color: var(--ms-text, #fff); font-weight: 600; }
.ms-ai-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-ai-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: var(--ms-text, #fff);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ms-ai-result:active { background: rgba(255,255,255,0.09); }
.ms-ai-result-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(78,163,255,0.14);
  color: var(--ms-blue, #4ea3ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-ai-result-icon svg { width: 20px; height: 20px; }
.ms-ai-result-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ms-ai-result-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-ai-result-cat {
  font-size: 11px;
  font-weight: 500;
  color: var(--ms-text-sec, rgba(255,255,255,0.55));
  letter-spacing: 0.03em;
}
.ms-ai-result-cta {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ts-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-ai-see-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--ms-blue, #4ea3ff);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.ms-ai-see-all:active { background: rgba(78,163,255,0.08); }
.ms-ai-see-all svg { width: 14px; height: 14px; }
/* Search results screen — query label */
.ms-search-query {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ms-surface, #1a1f2e);
  border-radius: 14px;
  margin-bottom: 14px;
  color: var(--ms-text, #fff);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ms-search-query svg {
  width: 18px;
  height: 18px;
  color: var(--ms-blue, #4ea3ff);
  flex-shrink: 0;
}
.ms-search-query span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ms-ai-submit {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ts-blue);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ms-ai-submit svg { width: 16px; height: 16px; }
.ms-ai-submit.is-clear {
  background: transparent;
  color: var(--ms-text-sec, rgba(255,255,255,0.55));
}
.ms-ai-submit.is-clear:active { background: rgba(255,255,255,0.08); }
.iphone-screen.is-light .ms-ai-submit.is-clear { color: rgba(0,0,0,0.5); }
.iphone-screen.is-light .ms-ai-submit.is-clear:active { background: rgba(0,0,0,0.06); }

/* AI suggestion chips — horizontal scroll, mirror of portal .ai-chip */
.ms-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -22px 8px;
  padding: 0 22px 4px;
}
.ms-chips::-webkit-scrollbar { display: none; }
.ms-chips[hidden] { display: none; }
.ms-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #1a1f2e;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.ms-chip svg { width: 14px; height: 14px; color: #4ea3ff; flex-shrink: 0; }

/* Grid variants */
.ms-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ms-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ms-grid-2 .ms-tile { min-height: 110px; padding: 20px 12px; }
.ms-grid-2 .ms-tile svg { width: 30px; height: 30px; }
.ms-grid-2 .ms-tile span { font-size: 14px; }

/* Guided use case cards — horizontal scroll, mirror of portal .guided-grid */
.ms-guided-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -22px 8px;
  padding: 0 22px 4px;
}
.ms-guided-scroll::-webkit-scrollbar { display: none; }
.ms-guided-card {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  background: #1a1f2e;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}
.ms-guided-media {
  height: 120px;
  overflow: hidden;
  background: #0f1524;
}
.ms-guided-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ms-guided-title {
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.015em;
}

/* ============================================================
   MOBILE EXPLORE — industry list + featured
   ============================================================ */
.ms-industry-list {
  display: flex;
  flex-direction: column;
  background: #1a1f2e;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 4px;
}
.ms-industry-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  min-height: 56px;
}
.ms-industry-row:last-child { border-bottom: 0; }
.ms-industry-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 122, 254, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ms-industry-icon svg {
  width: 20px;
  height: 20px;
  color: #4ea3ff;
}
.ms-industry-name {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.ms-industry-count {
  padding: 2px 10px;
  background: rgba(78, 163, 255, 0.15);
  color: #4ea3ff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

/* ============================================================
   MOBILE ARCHIVE — new chip style for flow type
   ============================================================ */
.ms-archive-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  background: rgba(78, 163, 255, 0.12);
  color: #4ea3ff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.ms-archive-chip svg { width: 13px; height: 13px; }

/* ============================================================
   MOBILE DETAIL SCREEN — after selecting a certification mode
   ============================================================ */
/* iOS nav bar: 44pt height, title 17pt semibold center */
.ms-navbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
  margin: 0 -6px 12px;
  background: var(--ms-bg);
}
.ms-back {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ms-blue);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-back svg { width: 28px; height: 28px; }
.ms-navbar-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--ms-text);
}
.ms-navbar-spacer { width: 44px; height: 44px; }

/* Section title inset (detail uses subtler eyebrow style) */
.ms-section-title-inset {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ms-text-quart);
  margin: 20px 4px 8px;
}

/* Capture preview stage */
.ms-capture-stage {
  position: relative;
  margin: 0 -22px 14px;
  padding: 0 22px;
}
.ms-capture-preview {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(180deg, #0f1524 0%, #050710 100%);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--ms-blue);
}
.ms-capture-grid {
  position: absolute;
  inset: 20px;
  background-image:
    linear-gradient(90deg, transparent calc(33.333% - 0.5px), rgba(255,255,255,0.08) calc(33.333% - 0.5px), rgba(255,255,255,0.08) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(90deg, transparent calc(66.666% - 0.5px), rgba(255,255,255,0.08) calc(66.666% - 0.5px), rgba(255,255,255,0.08) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(0deg, transparent calc(33.333% - 0.5px), rgba(255,255,255,0.08) calc(33.333% - 0.5px), rgba(255,255,255,0.08) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(0deg, transparent calc(66.666% - 0.5px), rgba(255,255,255,0.08) calc(66.666% - 0.5px), rgba(255,255,255,0.08) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
  pointer-events: none;
}
.ms-capture-icon svg {
  width: 56px;
  height: 56px;
  color: var(--ms-blue);
  opacity: 0.55;
}
.ms-capture-hint {
  margin: 0;
  font-size: 13px;
  color: var(--ms-text-ter);
}
.ms-capture-shutter {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-capture-shutter-inner {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
}

/* iOS-style grouped list */
.ms-toggle-list {
  background: var(--ms-surface);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ms-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ms-border);
  min-height: 60px;
}
.ms-toggle-row:last-child { border-bottom: 0; }
.ms-toggle-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ms-blue-tint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ms-toggle-icon svg {
  width: 20px;
  height: 20px;
  color: var(--ms-blue);
}
.ms-toggle-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ms-toggle-label {
  color: var(--ms-text);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.ms-toggle-sub {
  color: var(--ms-text-ter);
  font-size: 13px;
  line-height: 1.3;
}
/* iOS switch */
.ms-switch {
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  background: #2c2f36;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.ms-switch.is-on { background: #3ddc97; }
.ms-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  transition: transform 0.2s ease;
}
.ms-switch.is-on .ms-switch-thumb { transform: translateX(20px); }

/* Field rows (metadata) */
.ms-field-list {
  background: var(--ms-surface);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}
.ms-field-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ms-border);
  min-height: 52px;
  cursor: pointer;
}
.ms-field-row:last-child { border-bottom: 0; }
.ms-field-label {
  flex: 0 0 130px;
  color: var(--ms-text);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.ms-field-value {
  flex: 1;
  font-size: 17px;
  color: var(--ms-text);
  text-align: right;
  letter-spacing: -0.015em;
}
.ms-field-placeholder { color: var(--ms-text-ter); }

/* Credits / primary CTA */
.ms-cta-credits {
  text-align: center;
  color: var(--ms-text-sec);
  font-size: 13px;
  margin: 20px 0 8px;
}
.ms-cta-credits strong {
  color: var(--ms-blue);
  font-weight: 700;
}
.ms-primary-cta {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--ts-blue);
  border: 0;
  border-radius: 14px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  min-height: 52px;
}
.ms-help-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  color: var(--ms-blue);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.ms-secondary-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  background: transparent;
  border: 1px solid var(--ms-border, rgba(60,60,67,0.12));
  border-radius: 14px;
  color: var(--ms-blue);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  min-height: 48px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ms-secondary-cta:hover,
.ms-secondary-cta:active { background: rgba(0, 122, 254, 0.06); border-color: var(--ms-blue); }
.ms-secondary-cta svg { flex-shrink: 0; }

/* Propagate dark-theme variables to existing components for consistency */
.ms-home-head h1,
.ms-section-title,
.ms-toggle-label,
.ms-profile-row,
.ms-archive-card strong,
.ms-profile-card strong,
.ms-industry-name { color: var(--ms-text, #fff); }

/* ============================================================
   MOBILE BOTTOM SHEET — mirror of portal .tile-modal
   ============================================================ */
.ms-sheet {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  transition: opacity 0.22s ease;
  opacity: 0;
}
.ms-sheet:not([hidden]) { pointer-events: auto; }
.ms-sheet.is-open { opacity: 1; }
.ms-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ms-sheet-panel {
  position: relative;
  width: 100%;
  max-height: 92%;
  background: var(--ms-bg, #0b0c10);
  border-radius: 20px 20px 44px 44px;
  padding: 6px 22px 40px;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  scrollbar-width: none;
}
.ms-sheet-panel::-webkit-scrollbar { display: none; }
.ms-sheet.is-open .ms-sheet-panel { transform: translateY(0); }

/* Drag handle */
.ms-sheet-grip {
  display: block;
  width: 40px;
  height: 5px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  margin: 6px auto 10px;
}

/* Sheet header (iOS modal header pattern) */
.ms-sheet-head {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  padding: 0 0 8px;
}
.ms-sheet-close,
.ms-sheet-fav {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--ms-surface, #1a1f2e);
  color: var(--ms-text, #fff);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-sheet-close svg,
.ms-sheet-fav svg { width: 18px; height: 18px; }
.ms-sheet-fav svg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.8;
}
.ms-sheet-fav[aria-pressed="true"] svg {
  fill: var(--ms-coin, #f6c64a);
  stroke: var(--ms-coin, #f6c64a);
}
.ms-sheet-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: center;
  color: var(--ms-text, #fff);
}

/* Body */
.ms-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
}
/* Hero — icon on brand gradient, echoes portal .uc-hero with brand tile pattern */
.ms-sheet-hero {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 16px;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(0,122,254,0.04) 9px 10px),
    linear-gradient(140deg, rgba(0,122,254,0.18) 0%, rgba(0,122,254,0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ms-sheet-hero-icon svg {
  width: 72px;
  height: 72px;
  color: var(--ms-blue, #4ea3ff);
}
.ms-sheet-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(78, 163, 255, 0.14);
  color: var(--ms-blue, #4ea3ff);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: flex-start;
}
.ms-sheet-desc {
  margin: 0;
  color: var(--ms-text-sec, rgba(255, 255, 255, 0.75));
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.ms-sheet-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.ms-sheet .ms-help-link {
  margin-top: 0;
  font-size: 15px;
}

/* ============================================================
   MOBILE DETAIL VIEW (full-page, portal tile-modal parity)
   ============================================================ */
/* ============================================================
   MOBILE EMAIL CERTIFICATION (business mode) — design-system view
   ============================================================ */
.ms-email-cert {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-md);
  margin-bottom: var(--ms-space-md);
}
.ms-email-cert[hidden] { display: none; }

.ms-email-cert-hero {
  background: var(--ts-ink, #081122);
  border-radius: var(--ms-radius-lg);
  padding: 18px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-email-cert-icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.ms-email-cert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.32);
}
.ms-email-cert-icon svg { width: 20px; height: 20px; }
.ms-email-cert-icon.is-active {
  color: #fff;
  transform: scale(1.55);
}

.ms-email-cert-desc {
  margin: 0;
  color: var(--ms-text-sec, rgba(255, 255, 255, 0.75));
  font-size: var(--ms-font-body);
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.ms-email-cert-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ms-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ms-radius-md);
}
.ms-email-cert-addr {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ms-text);
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: rgba(78, 163, 255, 0.35);
  text-underline-offset: 3px;
}
.ms-email-cert-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--ms-radius-sm);
  color: var(--ms-blue);
  font-family: inherit;
  font-size: var(--ms-font-footnote);
  font-weight: var(--ms-weight-semibold);
  cursor: pointer;
}
.ms-email-cert-copy:active { background: rgba(78, 163, 255, 0.1); }
.ms-email-cert-copy svg { width: 14px; height: 14px; }
.ms-email-cert-copy.is-copied { color: var(--ms-success); }

.ms-email-cert-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--ms-space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ms-email-cert-cost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--ms-font-subhead);
  font-weight: var(--ms-weight-semibold);
  color: var(--ms-text);
}
.ms-email-cert-coin { width: 18px; height: 18px; }
.ms-email-cert-manage {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(78, 163, 255, 0.14);
  border: 0;
  border-radius: var(--ms-radius-md);
  color: var(--ms-blue);
  font-family: inherit;
  font-size: var(--ms-font-subhead);
  font-weight: var(--ms-weight-semibold);
  cursor: pointer;
}
.ms-email-cert-manage:active { background: rgba(78, 163, 255, 0.22); }
.ms-email-cert-manage svg { width: 16px; height: 16px; }

/* Light mode */
.iphone-screen.is-light .ms-email-cert-field {
  background: #fff;
  border-color: #e5e5ea;
}
.iphone-screen.is-light .ms-email-cert-addr {
  color: #000;
  text-decoration-color: rgba(0, 122, 254, 0.28);
}
.iphone-screen.is-light .ms-email-cert-copy { color: var(--ts-blue); }
.iphone-screen.is-light .ms-email-cert-desc { color: rgba(0, 0, 0, 0.65); }
.iphone-screen.is-light .ms-email-cert-cost { color: #000; }
.iphone-screen.is-light .ms-email-cert-footer { border-top-color: #e5e5ea; }
.iphone-screen.is-light .ms-email-cert-manage {
  background: rgba(0, 122, 254, 0.10);
  color: var(--ts-blue);
}

/* ============================================================
   MOBILE MEETING CERTIFICATION (business mode) — reuses ms-email-cert
   ============================================================ */
.ms-meeting-cert {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-md);
  margin-bottom: var(--ms-space-md);
}
.ms-meeting-cert[hidden] { display: none; }

.ms-meeting-cert-form {
  display: flex;
  flex-direction: column;
  gap: var(--ms-space-md);
}
.ms-meeting-cert-form .ms-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ms-meeting-cert-form .ms-field label {
  font-size: var(--ms-font-subhead);
  font-weight: var(--ms-weight-semibold);
  color: var(--ms-text);
  letter-spacing: -0.005em;
}
.ms-meeting-cert-form .ms-req { color: var(--ms-blue); margin-left: 2px; }
.ms-meeting-cert-form input[type="url"],
.ms-meeting-cert-form input[type="text"],
.ms-meeting-cert-form select {
  width: 100%;
  background: var(--ms-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--ms-radius-md);
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--ms-font-body);
  color: var(--ms-text);
  outline: none;
}
.ms-meeting-cert-form input::placeholder { color: rgba(255, 255, 255, 0.35); }
.ms-meeting-cert-form input:focus,
.ms-meeting-cert-form select:focus { border-color: var(--ms-blue); }
.ms-meeting-cert-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23a0a7b5'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 40px;
  cursor: pointer;
}
.ms-meeting-cert-form .ms-field-hint {
  font-size: var(--ms-font-caption-1);
  color: var(--ms-text-sec);
  line-height: 1.4;
}

.ms-meeting-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: var(--ms-space-sm) 0;
  cursor: pointer;
}
.ms-meeting-toggle > div { flex: 1; }
.ms-meeting-toggle strong {
  display: block;
  font-size: var(--ms-font-subhead);
  font-weight: var(--ms-weight-semibold);
  color: var(--ms-text);
  margin-bottom: 3px;
}
.ms-meeting-toggle p {
  margin: 0;
  font-size: var(--ms-font-caption-1);
  color: var(--ms-text-sec);
  line-height: 1.4;
}
.ms-toggle {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}
.ms-toggle input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}
.ms-toggle-track {
  display: block;
  width: 44px;
  height: 26px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--ms-radius-pill);
  position: relative;
  transition: background 0.2s;
}
.ms-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.ms-toggle input:checked + .ms-toggle-track { background: var(--ms-success); }
.ms-toggle input:checked + .ms-toggle-track::after { left: 20px; }

.ms-meeting-cert-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: var(--ms-space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ms-meeting-cert-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: var(--ms-blue);
  border: 0;
  border-radius: var(--ms-radius-md);
  color: #fff;
  font-family: inherit;
  font-size: var(--ms-font-body);
  font-weight: var(--ms-weight-semibold);
  cursor: pointer;
  transition: opacity .15s ease;
}
.ms-meeting-cert-start svg { width: 16px; height: 16px; }
.ms-meeting-cert-start:disabled {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
  cursor: not-allowed;
}

/* Light mode */
.iphone-screen.is-light .ms-meeting-cert-form input,
.iphone-screen.is-light .ms-meeting-cert-form select {
  background: #fff;
  border-color: #e5e5ea;
  color: #000;
}
.iphone-screen.is-light .ms-meeting-cert-form input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.iphone-screen.is-light .ms-meeting-cert-form .ms-field-hint,
.iphone-screen.is-light .ms-meeting-toggle p { color: rgba(0, 0, 0, 0.6); }
.iphone-screen.is-light .ms-meeting-cert-form .ms-field label,
.iphone-screen.is-light .ms-meeting-toggle strong { color: #000; }
.iphone-screen.is-light .ms-meeting-cert-footer { border-top-color: #e5e5ea; }
.iphone-screen.is-light .ms-toggle-track { background: #e5e5ea; }
.iphone-screen.is-light .ms-toggle input:checked + .ms-toggle-track { background: var(--ts-blue); }
.iphone-screen.is-light .ms-meeting-cert-start { background: var(--ts-blue); }
.iphone-screen.is-light .ms-meeting-cert-start:disabled {
  background: #e5e5ea;
  color: rgba(0, 0, 0, 0.4);
}

.ms-detail-hero {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 18px;
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(0,122,254,0.05) 9px 10px),
    linear-gradient(140deg, rgba(0,122,254,0.22) 0%, rgba(0,122,254,0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 4px 0 14px;
}
.ms-detail-hero-icon svg {
  width: 82px;
  height: 82px;
  color: var(--ms-blue, #4ea3ff);
}
.ms-detail-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(78, 163, 255, 0.14);
  color: var(--ms-blue, #4ea3ff);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 10px;
}
.ms-detail-desc {
  margin: 0 0 22px;
  color: var(--ms-text-sec, rgba(255, 255, 255, 0.75));
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.ms-detail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ms-detail-cta[hidden] { display: none; }
.ms-help-link[hidden] { display: none; }
.ms-detail-hero[hidden] { display: none; }
.ms-detail-chip[hidden] { display: none; }
.ms-detail-desc[hidden] { display: none; }
.ms-nav-fav {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-nav-fav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
.ms-nav-fav[aria-pressed="true"] svg {
  fill: var(--ms-coin, #f6c64a);
  stroke: var(--ms-coin, #f6c64a);
}

/* ============================================================
   THEME SWITCHER (Dark/Light segmented control)
   ============================================================ */
.theme-switch {
  display: inline-flex;
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  border: 1px solid var(--ts-border);
  flex-shrink: 0;
  margin-left: auto;
  align-self: flex-start;
}
.theme-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--ts-body);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-switch-btn.is-active {
  background: var(--ts-surface);
  color: var(--ts-ink);
  box-shadow: 0 1px 3px rgba(8, 17, 34, 0.08);
}

/* ============================================================
   iPhone screen — LIGHT mode overrides (toggle via JS .is-light)
   ============================================================ */
.iphone-screen.is-light {
  --ms-bg: #ffffff;
  --ms-surface: #f2f2f7;          /* iOS secondary system bg */
  --ms-surface-inner: #e5e5ea;
  --ms-surface-badge: #f2f2f7;
  --ms-blue: var(--ts-blue);      /* canonical brand blue on light */
  --ms-blue-tint: rgba(0, 122, 254, 0.10);
  --ms-success: #30d158;
  --ms-danger: #ff3b30;
  --ms-coin: #d4a514;
  --ms-text: #000000;
  --ms-text-sec: rgba(0, 0, 0, 0.65);
  --ms-text-ter: rgba(0, 0, 0, 0.45);
  --ms-text-quart: rgba(0, 0, 0, 0.35);
  --ms-border: rgba(0, 0, 0, 0.08);
  --ms-pattern: rgba(0, 0, 0, 0.03);
  background: #ffffff;
}

/* Propagate token updates — elements with hardcoded colors need explicit overrides */
.iphone-screen.is-light .ms-screen { color: #000; }
.iphone-screen.is-light .ms-statusbar { color: #000; }
.iphone-screen.is-light .ms-signal { color: #000; }
.iphone-screen.is-light .ms-battery { border-color: rgba(0,0,0,0.4); }
.iphone-screen.is-light .ms-battery::after { background: rgba(0,0,0,0.4); }
.iphone-screen.is-light .ms-battery-fill { background: #000; }
.iphone-screen.is-light .ms-home-head h1,
.iphone-screen.is-light .ms-section-title,
.iphone-screen.is-light .ms-tile,
.iphone-screen.is-light .ms-feature-copy strong,
.iphone-screen.is-light .ms-archive-card strong,
.iphone-screen.is-light .ms-industry-name,
.iphone-screen.is-light .ms-profile-card strong,
.iphone-screen.is-light .ms-profile-row,
.iphone-screen.is-light .ms-guided-title,
.iphone-screen.is-light .ms-toggle-label,
.iphone-screen.is-light .ms-field-label,
.iphone-screen.is-light .ms-field-value,
.iphone-screen.is-light .ms-navbar-title,
.iphone-screen.is-light .ms-chip { color: #000; }
.iphone-screen.is-light .ms-tile { background: #f2f2f7; }
.iphone-screen.is-light .ms-chip { background: #f2f2f7; }
.iphone-screen.is-light .ms-ai-prompt,
.iphone-screen.is-light .ms-ai-results,
.iphone-screen.is-light .ms-search,
.iphone-screen.is-light .ms-archive-card,
.iphone-screen.is-light .ms-industry-list,
.iphone-screen.is-light .ms-profile-card,
.iphone-screen.is-light .ms-profile-list,
.iphone-screen.is-light .ms-profile-credits,
.iphone-screen.is-light .ms-toggle-list,
.iphone-screen.is-light .ms-field-list,
.iphone-screen.is-light .ms-guided-card,
.iphone-screen.is-light .ms-explore-card,
.iphone-screen.is-light .ms-credits,
.iphone-screen.is-light .ms-synced { background: #f2f2f7; }
.iphone-screen.is-light .ms-feature { background: linear-gradient(90deg, #f2f2f7 0%, #e6eefc 100%); }
.iphone-screen.is-light .ms-feature-wide { background: linear-gradient(135deg, #e6eefc 0%, #d7e3f5 100%); border-color: rgba(0,122,254,0.2); }
.iphone-screen.is-light .ms-feature-wide strong,
.iphone-screen.is-light .ms-feature-wide p { color: #000; }
.iphone-screen.is-light .ms-feature-wide p { color: rgba(0,0,0,0.65); }
.iphone-screen.is-light .ms-ai-input-stub,
.iphone-screen.is-light .ms-ai-input,
.iphone-screen.is-light .ms-search span,
.iphone-screen.is-light .ms-archive-type,
.iphone-screen.is-light .ms-profile-email,
.iphone-screen.is-light .ms-explore-card span,
.iphone-screen.is-light .ms-detail-desc,
.iphone-screen.is-light .ms-field-placeholder,
.iphone-screen.is-light .ms-toggle-sub,
.iphone-screen.is-light .ms-capture-hint,
.iphone-screen.is-light .ms-archive-date { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-archive-cloud,
.iphone-screen.is-light .ms-archive-date svg { color: rgba(0,0,0,0.45); }
.iphone-screen.is-light .ms-row-chev { color: rgba(0,0,0,0.3); }
.iphone-screen.is-light .ms-profile-credits { background: #e5e5ea; }
.iphone-screen.is-light .ms-profile-credits-label { color: rgba(0,0,0,0.5); }
.iphone-screen.is-light .ms-tabbar {
  background: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(0,0,0,0.08);
}
.iphone-screen.is-light .ms-tab { color: rgba(0,0,0,0.5); }
.iphone-screen.is-light .ms-tab.is-active { color: var(--ts-blue); }
.iphone-screen.is-light .ms-navbar { background: #ffffff; }
.iphone-screen.is-light .ms-back { color: var(--ts-blue); }
.iphone-screen.is-light .ms-nav-fav { color: rgba(0,0,0,0.45); }
.iphone-screen.is-light .iphone-home-indicator { background: rgba(0,0,0,0.6); }
.iphone-screen.is-light .ms-switch { background: #e5e5ea; }
.iphone-screen.is-light .ms-detail-hero { background: linear-gradient(140deg, rgba(0,122,254,0.14) 0%, rgba(0,122,254,0.04) 100%); }
.iphone-screen.is-light .ms-detail-hero-icon svg { color: var(--ts-blue); }
.iphone-screen.is-light .ms-toggle-icon svg,
.iphone-screen.is-light .ms-feature-icon,
.iphone-screen.is-light .ms-industry-icon svg,
.iphone-screen.is-light .ms-ai-icon,
.iphone-screen.is-light .ms-chip svg,
.iphone-screen.is-light .ms-profile-row > svg:first-child,
.iphone-screen.is-light .ms-tile svg,
.iphone-screen.is-light .ms-credits strong,
.iphone-screen.is-light .ms-detail-chip,
.iphone-screen.is-light .ms-industry-count { color: var(--ts-blue); }
.iphone-screen.is-light .ms-detail-chip { background: rgba(0,122,254,0.10); }
.iphone-screen.is-light .ms-industry-icon { background: rgba(0,122,254,0.10); }
.iphone-screen.is-light .ms-industry-count { background: rgba(0,122,254,0.10); }
.iphone-screen.is-light .ms-archive-chip { background: rgba(0,122,254,0.10); color: var(--ts-blue); }
/* Camera preview stays dark even in light mode (real cameras are dark) */

/* ============================================================
   TRUEFLOW CREATOR CARD — portal tile-modal + mobile detail view
   ============================================================ */
.creator-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 8px 0 16px;
  background: var(--ts-subtle);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
}
.creator-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.creator-logo svg { display: block; }
.creator-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.creator-label {
  color: var(--ts-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.creator-name {
  color: var(--ts-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.008em;
}
.creator-verified {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Mobile variant */
.ms-creator-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 0 0 16px;
  background: var(--ms-surface, #1a1f2e);
  border-radius: 12px;
}
.ms-creator-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-creator-logo svg { display: block; }
.ms-creator-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ms-creator-label {
  color: var(--ms-text-ter, rgba(255,255,255,0.5));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ms-creator-name {
  color: var(--ms-text, #fff);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.008em;
}
.ms-creator-verified {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Light-mode overrides for mobile creator card */
.iphone-screen.is-light .ms-creator-card { background: #f2f2f7; }
.iphone-screen.is-light .ms-creator-name { color: #000; }
.iphone-screen.is-light .ms-creator-label { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-creator-verified { fill: var(--ts-blue); }

/* ============================================================
   CREATOR MARK (logo only, no text)
   ============================================================ */
.creator-mark,
.ms-creator-mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin: 4px 0 14px;
  line-height: 0;
}
.creator-mark svg,
.ms-creator-mark svg {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
}
/* Mobile light-mode: keep wordmark dark on light bg */
.iphone-screen.is-light .ms-creator-mark svg text { fill: #0b1633 !important; }
.iphone-screen.is-light .ms-creator-mark svg rect:first-of-type { fill: #0b1633 !important; }

/* File tile spans full row (mirror of portal dropzone behavior) */
.ms-tile-wide {
  grid-column: 1 / -1;
  min-height: 64px !important;
  flex-direction: row !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  justify-content: flex-start !important;
}
.ms-tile-wide svg {
  width: 26px !important;
  height: 26px !important;
}
.ms-tile-wide span {
  font-size: 15px;
  font-weight: 500;
  text-align: left !important;
}

/* ============================================================
   MOBILE AUTH / LOGIN SCREEN (reached via logout)
   ============================================================ */
.ms-screen-auth {
  padding: 0 22px 24px;
}
.ms-screen-auth.is-active {
  display: flex;
  flex-direction: column;
}
.ms-auth-hero {
  flex: 0 0 auto;
  margin: -8px -22px 4px;
  padding: 8px 22px 0;
}
.ms-auth-hero svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.ms-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 18px;
  color: var(--ms-blue, #4ea3ff);
}
.ms-auth-brand-mark {
  width: 28px;
  height: 28px;
  color: var(--ms-blue, #4ea3ff);
}
.ms-auth-wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ms-blue, #4ea3ff);
}
.ms-auth-title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ms-text, #fff);
}
.ms-auth-subtitle {
  margin: 0 0 auto;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ms-text-sec, rgba(255,255,255,0.7));
  max-width: 320px;
}
.ms-auth-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.ms-auth-btn {
  width: 100%;
  padding: 16px;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background 0.15s ease;
}
.ms-auth-btn-primary {
  background: var(--ts-blue);
  color: #fff;
  font-weight: 700;
}
.ms-auth-btn-secondary {
  background: rgba(0, 122, 254, 0.14);
  color: var(--ms-blue, #4ea3ff);
}

/* Light mode overrides */
.iphone-screen.is-light .ms-auth-title { color: #000; }
.iphone-screen.is-light .ms-auth-subtitle { color: rgba(0, 0, 0, 0.65); }
.iphone-screen.is-light .ms-auth-wordmark { color: var(--ts-blue); }
.iphone-screen.is-light .ms-auth-brand-mark { color: var(--ts-blue); }
.iphone-screen.is-light .ms-auth-btn-secondary { background: rgba(0, 122, 254, 0.10); color: var(--ts-blue); }
/* Hero bubbles: lighten for light bg */
.iphone-screen.is-light .ms-auth-hero svg circle[fill*="255"] { fill: rgba(0, 0, 0, 0.04) !important; }

/* ============================================================
   MOBILE BUSINESS PAYWALL (email/phone/meeting gated)
   ============================================================ */
.ms-business-hero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0 8px;
}
.ms-business-hero svg {
  width: 110px;
  height: 110px;
  display: block;
}
.ms-business-title {
  margin: 12px 0 8px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ms-text, #fff);
}
.ms-business-desc {
  margin: 0 auto 18px;
  max-width: 320px;
  text-align: center;
  color: var(--ms-text-sec, rgba(255,255,255,0.7));
  font-size: 15px;
  line-height: 1.5;
}
.ms-feature-list {
  list-style: none;
  padding: 14px 16px;
  margin: 0 0 20px;
  background: var(--ms-surface, #1a1f2e);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ms-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--ms-text, #fff);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.ms-feature-list li strong {
  font-weight: 600;
  color: var(--ms-text, #fff);
}
.ms-feature-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(78, 163, 255, 0.18);
  color: var(--ms-blue, #4ea3ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ms-feature-check svg { width: 12px; height: 12px; }
.ms-business-cta { margin-top: 0; }

/* Light mode overrides */
.iphone-screen.is-light .ms-business-title { color: #000; }
.iphone-screen.is-light .ms-business-desc { color: rgba(0,0,0,0.65); }
.iphone-screen.is-light .ms-feature-list { background: #f2f2f7; }
.iphone-screen.is-light .ms-feature-list li,
.iphone-screen.is-light .ms-feature-list li strong { color: #000; }
.iphone-screen.is-light .ms-feature-check { background: rgba(0,122,254,0.14); color: var(--ts-blue); }

/* ============================================================
   MOBILE CREDITS PAYWALL (Purchase credits — pay per use)
   ============================================================ */
.ms-navbar-credits {
  padding: 8px 0 4px;
  min-height: 36px;
}
.ms-credits-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: var(--ms-text, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ms-credits-close svg { width: 18px; height: 18px; }

.ms-credits-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 22px;
}
.ms-credits-header-coin { width: 32px; height: 32px; display: inline-block; flex-shrink: 0; }
.ms-credits-header-coin svg { width: 100%; height: 100%; display: block; }
.ms-credits-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ms-text, #fff);
}

.ms-credits-section-title {
  margin: 10px 0 6px;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ms-text, #fff);
}
.ms-credits-section-desc {
  margin: 0 0 16px;
  color: var(--ms-text-sec, rgba(255,255,255,0.6));
  font-size: 14px;
  line-height: 1.4;
}

.ms-credits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.ms-credits-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 14px;
  border: none;
  border-radius: 14px;
  background: var(--ts-blue, #007afe);
  color: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.ms-credits-row-coin { width: 28px; height: 28px; flex-shrink: 0; display: inline-block; }
.ms-credits-row-coin svg { width: 100%; height: 100%; display: block; }
.ms-credits-row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.ms-credits-row-eyebrow {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0;
}
.ms-credits-row-label {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ms-credits-row-price {
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.ms-credits-row-chev { width: 16px; height: 16px; opacity: 0.85; flex-shrink: 0; }

.ms-credits-biz-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1e3458 0%, #243b64 100%);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 12px;
  align-items: center;
}
.ms-credits-biz-text { position: relative; z-index: 2; }
.ms-credits-biz-title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #fff;
}
.ms-credits-biz-desc {
  margin: 0 0 12px;
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  line-height: 1.4;
}
.ms-credits-biz-cta {
  border: none;
  background: var(--ts-blue, #007afe);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ms-credits-biz-illo {
  position: relative;
  width: 110px;
  height: 110px;
  align-self: stretch;
}
.ms-credits-biz-illo svg {
  position: absolute;
  inset: -10px -20px -10px 0;
  width: 140px;
  height: 140px;
}

.ms-credits-promo {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: var(--ms-text, #fff);
  cursor: pointer;
  font-family: inherit;
}
.ms-credits-promo-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(78,163,255,0.15);
  color: var(--ms-blue, #4ea3ff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ms-credits-promo-icon svg { width: 20px; height: 20px; }
.ms-credits-promo-label {
  flex: 1;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Light mode overrides */
.iphone-screen.is-light .ms-credits-close { background: rgba(0,0,0,0.08); color: #000; }
.iphone-screen.is-light .ms-credits-title,
.iphone-screen.is-light .ms-credits-section-title { color: #000; }
.iphone-screen.is-light .ms-credits-section-desc { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-credits-biz-card { background: linear-gradient(135deg, #e6edf7 0%, #d7e2f2 100%); }
.iphone-screen.is-light .ms-credits-biz-title { color: #0a1628; }
.iphone-screen.is-light .ms-credits-biz-desc { color: rgba(10,22,40,0.7); }
.iphone-screen.is-light .ms-credits-biz-illo svg circle { fill: rgba(0,122,254,0.10); }
.iphone-screen.is-light .ms-credits-biz-illo svg rect[fill="#fff"] { fill: #fff; }
.iphone-screen.is-light .ms-credits-biz-illo svg rect[stroke="#fff"] { stroke: #0a1628; }
.iphone-screen.is-light .ms-credits-promo { background: #f2f2f7; color: #000; }
.iphone-screen.is-light .ms-credits-promo-icon { background: rgba(0,122,254,0.14); color: var(--ts-blue); }

/* Conversational search — light mode */
.iphone-screen.is-light .ms-ai-input { color: #000; }
.iphone-screen.is-light .ms-ai-input::placeholder { color: rgba(0,0,0,0.45); }
.iphone-screen.is-light .ms-ai-results { background: #f2f2f7; }
.iphone-screen.is-light .ms-ai-results-label { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-ai-result { background: #fff; color: #000; }
.iphone-screen.is-light .ms-ai-result:active { background: #e9e9ef; }
.iphone-screen.is-light .ms-ai-result-icon { background: rgba(0,122,254,0.10); color: var(--ts-blue); }
.iphone-screen.is-light .ms-ai-result-cat { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-ai-see-all { color: var(--ts-blue); }
.iphone-screen.is-light .ms-ai-see-all:active { background: rgba(0,122,254,0.08); }
.iphone-screen.is-light .ms-search-query { background: #f2f2f7; color: #000; }
.iphone-screen.is-light .ms-search-query svg { color: var(--ts-blue); }
.iphone-screen.is-light .ms-ai-results-hint { color: rgba(0,0,0,0.6); }
.iphone-screen.is-light .ms-ai-results-hint #ms-ai-results-query { color: #000; }
.iphone-screen.is-light .ms-ai-results-hint svg { color: var(--ts-blue); }
.iphone-screen.is-light .ms-ai-results.is-searching { border-top-color: rgba(0,0,0,0.06); }

/* ============================================================
   MOBILE PLANS PAYWALL (mirror of portal Settings → Plans)
   ============================================================ */
.ms-navbar-credits .ms-navbar-title {
  margin: 0;
  flex: 1;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ms-text, #fff);
}
/* Balance summary */
.ms-plans-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ms-surface, #1a1f2e);
  border-radius: 14px;
  margin-bottom: 20px;
}
.ms-plans-balance-coin { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; }
.ms-plans-balance-coin svg { width: 100%; height: 100%; display: block; }
.ms-plans-balance-text { flex: 1; display: flex; flex-direction: column; gap: 0; min-width: 0; }
.ms-plans-balance-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ms-text-sec, rgba(255,255,255,0.55));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ms-plans-balance-value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--ms-text, #fff);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.ms-plans-balance-plan {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--ms-text, #fff);
  font-size: 11px;
  font-weight: 600;
}
/* Subheading */
.ms-plans-subheading {
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ms-text, #fff);
  letter-spacing: -0.01em;
}
.ms-plans-subheading-spaced { margin-top: 22px; }
.ms-plans-subheading-desc {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--ms-text-sec, rgba(255,255,255,0.6));
}

/* Annual subscription (prominent recurring card) */
.ms-plans-subscription {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 16px 14px;
  border: 1.5px solid var(--ms-blue, #4ea3ff);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(78,163,255,0.14) 0%, rgba(78,163,255,0.06) 100%);
  color: var(--ms-text, #fff);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  margin-bottom: 6px;
  box-shadow: 0 4px 14px rgba(78,163,255,0.14);
}
.ms-plans-subscription:active {
  background: linear-gradient(135deg, rgba(78,163,255,0.2) 0%, rgba(78,163,255,0.1) 100%);
}
.ms-plans-subscription-tag {
  position: absolute;
  top: -8px;
  left: 14px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ms-blue, #4ea3ff);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(78,163,255,0.3);
}
.ms-plans-subscription-coin {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-plans-subscription-coin svg { width: 100%; height: 100%; display: block; }
.ms-plans-subscription-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ms-plans-subscription-amount {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--ms-text, #fff);
  letter-spacing: -0.01em;
}
.ms-plans-subscription-meta {
  font-size: 11px;
  color: var(--ms-text-sec, rgba(255,255,255,0.6));
}
.ms-plans-subscription-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  white-space: nowrap;
}
.ms-plans-subscription-price strong {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--ms-text, #fff);
  letter-spacing: -0.02em;
  line-height: 1;
}
.ms-plans-subscription-price strong small {
  font-size: 11px;
  font-weight: 600;
  color: var(--ms-text-sec, rgba(255,255,255,0.7));
}
.ms-plans-subscription-price span {
  font-size: 10px;
  color: var(--ms-text-sec, rgba(255,255,255,0.6));
}

/* Subscription light mode */
.iphone-screen.is-light .ms-plans-subscription {
  background: linear-gradient(135deg, #eaf3ff 0%, #ffffff 100%);
  border-color: var(--ts-blue);
}
.iphone-screen.is-light .ms-plans-subscription-tag { background: var(--ts-blue); }
.iphone-screen.is-light .ms-plans-subscription-amount,
.iphone-screen.is-light .ms-plans-subscription-price strong { color: #000; }
.iphone-screen.is-light .ms-plans-subscription-meta,
.iphone-screen.is-light .ms-plans-subscription-price span,
.iphone-screen.is-light .ms-plans-subscription-price strong small { color: rgba(0,0,0,0.6); }
/* Credit pack (row-style direct buttons) */
.ms-credit-pack {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: var(--ms-surface, #1a1f2e);
  color: var(--ms-text, #fff);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.ms-credit-pack:active { background: rgba(255,255,255,0.05); }
.ms-credit-pack-featured {
  border-color: rgba(78,163,255,0.4);
  background: linear-gradient(180deg, var(--ms-surface, #1a1f2e) 0%, rgba(78,163,255,0.08) 100%);
}
.ms-credit-pack-coin {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
}
.ms-credit-pack-coin svg { width: 100%; height: 100%; display: block; }
.ms-credit-pack-amount {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ms-text, #fff);
}
.ms-credit-pack-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--ms-text-sec, rgba(255,255,255,0.7));
  white-space: nowrap;
}
.ms-credit-pack-chev {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.5;
  color: var(--ms-text-sec, rgba(255,255,255,0.7));
}
.ms-credit-pack-tag {
  position: absolute;
  top: -8px;
  right: 14px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ts-success, #14a05a);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(20,160,90,0.24);
}
/* Divider */
.ms-plans-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 18px;
  color: var(--ms-text-sec, rgba(255,255,255,0.5));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ms-plans-divider::before,
.ms-plans-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
/* Business upsell */
.ms-plans-upsell {
  padding: 18px;
  border: 1px solid rgba(78,163,255,0.2);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(78,163,255,0.08) 0%, rgba(78,163,255,0.14) 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ms-plans-upsell-lead {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ms-plans-upsell-shield {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ms-plans-upsell-shield img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.ms-plans-upsell-text { flex: 1; min-width: 0; }
.ms-plans-upsell-title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ms-text, #fff);
  line-height: 1.2;
}
.ms-plans-upsell-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ms-text-sec, rgba(255,255,255,0.7));
}
.ms-plans-upsell-features {
  list-style: none;
  padding: 12px 0 0;
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-plans-upsell-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ms-text, #fff);
}
.ms-plans-upsell-features svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--ts-success, #14a05a);
}
.ms-plans-upsell-cta { margin: 0; }
/* Affiliate (detached) */
.ms-plans-affiliate {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ms-plans-affiliate-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: var(--ms-surface, #1a1f2e);
  font-family: inherit;
  font-size: 14px;
  color: var(--ms-text, #fff);
  outline: none;
}
.ms-plans-affiliate-input::placeholder { color: var(--ms-text-sec, rgba(255,255,255,0.5)); }
.ms-plans-affiliate-input:focus { border-color: var(--ms-blue, #4ea3ff); }
.ms-plans-affiliate-apply {
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  color: var(--ms-text, #fff);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Light mode overrides */
.iphone-screen.is-light .ms-plans-balance { background: #f2f2f7; }
.iphone-screen.is-light .ms-plans-balance-value { color: #000; }
.iphone-screen.is-light .ms-plans-balance-label { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-plans-balance-plan { background: #fff; color: rgba(0,0,0,0.7); border: 1px solid #e5e5ea; }
.iphone-screen.is-light .ms-plans-subheading { color: #000; }
.iphone-screen.is-light .ms-plans-subheading-desc { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-credit-pack {
  background: #fff;
  border-color: #e5e5ea;
  color: #000;
}
.iphone-screen.is-light .ms-credit-pack:active { background: #f7f7fa; }
.iphone-screen.is-light .ms-credit-pack-amount { color: #000; }
.iphone-screen.is-light .ms-credit-pack-price,
.iphone-screen.is-light .ms-credit-pack-chev { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-credit-pack-featured {
  border-color: rgba(0,122,254,0.4);
  background: linear-gradient(180deg, #fff 0%, #f3f8ff 100%);
}
.iphone-screen.is-light .ms-plans-divider { color: rgba(0,0,0,0.5); }
.iphone-screen.is-light .ms-plans-divider::before,
.iphone-screen.is-light .ms-plans-divider::after { background: #e5e5ea; }
.iphone-screen.is-light .ms-plans-upsell {
  background: linear-gradient(135deg, #f3f8ff 0%, #e8f1ff 100%);
  border-color: rgba(0,122,254,0.2);
}
.iphone-screen.is-light .ms-plans-upsell-title { color: #000; }
.iphone-screen.is-light .ms-plans-upsell-sub { color: rgba(0,0,0,0.7); }
.iphone-screen.is-light .ms-plans-upsell-shield {
  background: #fff;
  border-color: #e5e5ea;
}
.iphone-screen.is-light .ms-plans-upsell-shield img { filter: none; }
.iphone-screen.is-light .ms-plans-upsell-features { border-top-color: rgba(0,0,0,0.08); }
.iphone-screen.is-light .ms-plans-upsell-features li { color: #000; }
.iphone-screen.is-light .ms-plans-affiliate { border-top-color: #e5e5ea; }
.iphone-screen.is-light .ms-plans-affiliate-input {
  background: #fff;
  border-color: #e5e5ea;
  color: #000;
}
.iphone-screen.is-light .ms-plans-affiliate-input::placeholder { color: rgba(0,0,0,0.4); }
.iphone-screen.is-light .ms-plans-affiliate-apply {
  background: #f2f2f7;
  color: #000;
}

/* ============================================================
   MOBILE SUPPORT (mirror of portal support panel)
   ============================================================ */
.ms-support-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ms-blue, #4ea3ff);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ms-support-title {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ms-text, #fff);
}
.ms-support-context {
  background: var(--ms-surface, #1a1f2e);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.ms-support-context-title {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ms-text-sec, rgba(255,255,255,0.55));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ms-support-context ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ms-support-context li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ms-support-context li svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--ms-blue, #4ea3ff);
}
.ms-support-context li div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ms-support-context li strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ms-text, #fff);
  letter-spacing: -0.01em;
}
.ms-support-context li span {
  font-size: 12px;
  color: var(--ms-text-sec, rgba(255,255,255,0.65));
}

/* Form */
.ms-support-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ms-support-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ms-support-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ms-text-sec, rgba(255,255,255,0.7));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ms-select-wrap {
  position: relative;
}
.ms-select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 12px 38px 12px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: var(--ms-surface, #1a1f2e);
  color: var(--ms-text, #fff);
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  outline: none;
}
.ms-select-wrap select:focus { border-color: var(--ms-blue, #4ea3ff); }
.ms-select-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ms-text-sec, rgba(255,255,255,0.6));
  pointer-events: none;
}
.ms-support-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: var(--ms-surface, #1a1f2e);
  color: var(--ms-text, #fff);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  resize: vertical;
  outline: none;
}
.ms-support-form textarea::placeholder { color: var(--ms-text-sec, rgba(255,255,255,0.5)); }
.ms-support-form textarea:focus { border-color: var(--ms-blue, #4ea3ff); }
.ms-support-disclaimer {
  margin: 0;
  font-size: 12px;
  color: var(--ms-text-sec, rgba(255,255,255,0.6));
  line-height: 1.4;
}
.ms-support-submit { margin-top: 4px; }

/* Success state */
.ms-support-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 30px 20px;
  background: var(--ms-surface, #1a1f2e);
  border-radius: 14px;
  margin-top: 10px;
}
.ms-support-success svg {
  width: 48px;
  height: 48px;
  color: var(--ts-success, #14a05a);
}
.ms-support-success strong {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--ms-text, #fff);
  letter-spacing: -0.01em;
}
.ms-support-success p {
  margin: 0;
  font-size: 14px;
  color: var(--ms-text-sec, rgba(255,255,255,0.7));
  line-height: 1.4;
}
.ms-support-success em {
  font-style: normal;
  font-weight: 600;
  color: var(--ms-text, #fff);
}
.ms-support-new {
  margin-top: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background: transparent;
  color: var(--ms-text, #fff);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Light mode overrides */
.iphone-screen.is-light .ms-support-eyebrow { color: var(--ts-blue); }
.iphone-screen.is-light .ms-support-title { color: #000; }
.iphone-screen.is-light .ms-support-context {
  background: #f2f2f7;
}
.iphone-screen.is-light .ms-support-context-title { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-support-context li strong { color: #000; }
.iphone-screen.is-light .ms-support-context li span { color: rgba(0,0,0,0.6); }
.iphone-screen.is-light .ms-support-context li svg { color: var(--ts-blue); }
.iphone-screen.is-light .ms-support-label { color: rgba(0,0,0,0.6); }
.iphone-screen.is-light .ms-select-wrap select,
.iphone-screen.is-light .ms-support-form textarea {
  background: #fff;
  border-color: #e5e5ea;
  color: #000;
}
.iphone-screen.is-light .ms-support-form textarea::placeholder { color: rgba(0,0,0,0.4); }
.iphone-screen.is-light .ms-select-caret { color: rgba(0,0,0,0.5); }
.iphone-screen.is-light .ms-support-disclaimer { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-support-success { background: #f2f2f7; }
.iphone-screen.is-light .ms-support-success strong { color: #000; }
.iphone-screen.is-light .ms-support-success p { color: rgba(0,0,0,0.6); }
.iphone-screen.is-light .ms-support-success em { color: #000; }
.iphone-screen.is-light .ms-support-new {
  background: #fff;
  border-color: #e5e5ea;
  color: #000;
}

/* ============================================================
   MOBILE TOPBAR CREDITS BADGE (home + library headers)
   ============================================================ */
.ms-topbar-credits {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: var(--ms-surface, #1a1f2e);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--ms-text, #fff);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.ms-topbar-credits:active { background: rgba(255,255,255,0.08); }
.ms-topbar-credits-coin {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ms-topbar-credits-coin svg { width: 100%; height: 100%; display: block; }
.ms-topbar-credits-value { font-weight: 700; letter-spacing: -0.01em; }
.ms-topbar-credits-label {
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  letter-spacing: 0.01em;
  margin-left: 2px;
}
.ms-topbar-credits-label:empty { display: none; }

/* Free credits state (1 or 2) */
.ms-topbar-credits.is-free {
  background: rgba(246,198,74,0.14);
  border-color: rgba(246,198,74,0.4);
}
.ms-topbar-credits.is-free .ms-topbar-credits-label { color: #f6c64a; }

/* Zero credits state: top-up CTA */
.ms-topbar-credits.is-zero {
  background: rgba(255,71,87,0.16);
  border-color: rgba(255,125,135,0.5);
  color: #ffb3b8;
  padding: 6px 12px;
  gap: 5px;
}
.ms-topbar-credits.is-zero .ms-topbar-credits-coin { display: none; }
.ms-topbar-credits.is-zero .ms-topbar-credits-value { color: #ffb3b8; }
.ms-topbar-credits.is-zero::before {
  content: '';
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) center / 6px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 6px no-repeat;
  display: inline-block;
  flex-shrink: 0;
}

/* Light mode */
.iphone-screen.is-light .ms-topbar-credits {
  background: #f2f2f7;
  border-color: #e5e5ea;
  color: #000;
}
.iphone-screen.is-light .ms-topbar-credits:active { background: #e9e9ef; }
.iphone-screen.is-light .ms-topbar-credits-label { color: rgba(0,0,0,0.55); }
.iphone-screen.is-light .ms-topbar-credits.is-free {
  background: rgba(246,198,74,0.18);
  border-color: rgba(224,164,30,0.5);
}
.iphone-screen.is-light .ms-topbar-credits.is-free .ms-topbar-credits-label { color: #a06a06; }
.iphone-screen.is-light .ms-topbar-credits.is-zero {
  background: #ffe5e8;
  border-color: #ffb3b8;
  color: #c8323a;
}
.iphone-screen.is-light .ms-topbar-credits.is-zero .ms-topbar-credits-value { color: #c8323a; }

/* ============================================================
   EDITORIAL INSIGHTS (home: 3 blog cards, horizontal compact)
   ============================================================ */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
.insight-card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0;
  background: var(--ts-surface);
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  min-height: 120px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.insight-card:hover {
  border-color: var(--ts-blue);
  box-shadow: 0 6px 16px rgba(8,17,34,0.08);
  transform: translateY(-2px);
}
.insight-media {
  display: block;
  overflow: hidden;
  background: var(--ts-subtle);
}
.insight-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.insight-card:hover .insight-media img { transform: scale(1.03); }
.insight-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  min-width: 0;
}
.insight-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(0,122,254,0.08);
  color: var(--ts-blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.insight-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ts-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ts-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.insight-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 4px;
  color: var(--ts-blue);
  font-size: 11px;
  font-weight: 600;
}
.insight-meta svg { color: var(--ts-blue); width: 10px; height: 10px; }

@media (max-width: 1100px) {
  .insights-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   PLANS SECTION (Settings → Plans: personal paywall + upsell)
   ============================================================ */
/* Balance summary row */
.plans-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  margin-bottom: 28px;
  color: var(--ts-ink);
}
.plans-balance-coin {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ts-subtle);
  color: var(--ts-body);
}
.plans-balance-coin svg { width: 18px; height: 18px; }
.plans-balance-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.plans-balance-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ts-body);
  letter-spacing: 0;
  text-transform: none;
}
.plans-balance-value {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plans-balance-plan {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--ts-subtle);
  color: var(--ts-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Section subheading (inside Plans section) */
.plans-subheading {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
}
.plans-subheading-spaced { margin-top: 28px; }
.plans-subheading-desc {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ts-body);
}

/* Annual subscription plan card (prominent, recurring) */
.plans-subscription {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 18px 20px;
  border: 1.5px solid var(--ts-blue);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #ffffff 0%, #eaf3ff 100%);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  margin-bottom: 6px;
  box-shadow: 0 4px 16px rgba(0,122,254,0.12);
  transition: box-shadow .15s ease, transform .1s ease;
}
.plans-subscription:hover {
  box-shadow: 0 6px 22px rgba(0,122,254,0.2);
  transform: translateY(-1px);
}
.plans-subscription:active { transform: translateY(0); }
.plans-subscription-tag {
  position: absolute;
  top: -10px;
  left: 18px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--ts-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,122,254,0.3);
}
.plans-subscription-coin {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plans-subscription-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.plans-subscription-amount {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
}
.plans-subscription-meta {
  font-size: 12px;
  color: var(--ts-body);
}
.plans-subscription-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  white-space: nowrap;
}
.plans-subscription-price strong {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--ts-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.plans-subscription-price strong small {
  font-size: 12px;
  font-weight: 600;
  color: var(--ts-body);
}
.plans-subscription-price span {
  font-size: 11px;
  color: var(--ts-body);
  font-weight: 500;
}
.plans-subscription-chev {
  color: var(--ts-blue);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .plans-subscription {
    grid-template-columns: auto 1fr auto;
  }
  .plans-subscription-chev { display: none; }
}

/* Credit packs: 2×2 grid of direct-purchase tile-buttons */
.credit-packs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.credit-pack {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.credit-pack:hover {
  border-color: var(--ts-blue);
  box-shadow: 0 4px 12px rgba(0,122,254,0.12);
  transform: translateY(-1px);
}
.credit-pack:active { transform: translateY(0); }
.credit-pack-featured {
  border-color: rgba(0,122,254,0.45);
  background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
}
.credit-pack-coin {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.credit-pack-amount {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--ts-ink);
  letter-spacing: -0.01em;
}
.credit-pack-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--ts-body);
  white-space: nowrap;
}
.credit-pack:hover .credit-pack-price { color: var(--ts-blue); }
.credit-pack-chev {
  flex-shrink: 0;
  color: var(--ts-body);
  opacity: 0.5;
  transition: transform .15s ease, color .15s ease, opacity .15s ease;
}
.credit-pack:hover .credit-pack-chev {
  color: var(--ts-blue);
  opacity: 1;
  transform: translateX(2px);
}
.credit-pack-tag {
  position: absolute;
  top: -8px;
  right: 14px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--ts-success);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(20,160,90,0.24);
}

/* Affiliate (compact, optional) — sits at the end, visually detached */
.plans-affiliate {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ts-border);
}
.plans-affiliate-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-btn);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--ts-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.plans-affiliate-input:focus {
  border-color: var(--ts-blue);
  box-shadow: 0 0 0 3px rgba(0,122,254,0.12);
}

/* Divider with label */
.plans-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 20px;
  color: var(--ts-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.plans-divider::before,
.plans-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ts-border);
}

/* Business upsell (full-width row, not side card) */
.plans-upsell {
  padding: 22px 24px;
  border: 1px solid var(--ts-border);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, #f3f8ff 0%, #e8f1ff 100%);
}
.plans-upsell-lead {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.plans-upsell-shield {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-card);
  background: #fff;
  border: 1px solid var(--ts-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plans-upsell-shield img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.plans-upsell-title {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ts-ink);
  line-height: 1.2;
}
.plans-upsell-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ts-body);
}
.plans-upsell-cta { white-space: nowrap; justify-content: center; gap: 6px; }
.plans-upsell-features {
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  border-top: 1px solid rgba(0,122,254,0.12);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 16px;
}
.plans-upsell-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ts-ink);
}
.plans-upsell-features svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--ts-success);
}

/* Responsive: stack on narrow settings modal */
@media (max-width: 720px) {
  .credit-packs { grid-template-columns: minmax(0, 1fr); }
  .plans-upsell-lead { grid-template-columns: 1fr; text-align: left; }
  .plans-upsell-cta { width: 100%; }
  .plans-balance { flex-wrap: wrap; }
}