/* partials/base.css */


:root {
  --font-display: "Space Grotesk", "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --bg-page: #F7FAF9;
  --bg-app: #F7FAF9;
  --bg-shell: #EEF3F8;
  --bg-surface: #FFFFFF;
  --bg-surface-1: #FFFFFF;
  --bg-surface-2: #F0F4F9;
  --bg-surface-muted: #F0F4F9;
  --bg-surface-soft: #E8EEF6;
  --bg-hero: #F4FBF7;
  --code-box-bg-dark: #111820;

  --text-primary: #0B0F1A;
  --text-secondary: #354154;
  --text-tertiary: #5E6A7B;
  --text-inverse: #FFFFFF;
  --text-muted: #354154;

  --accent-primary: #0B8F5E;
  --accent-primary-dark: #0A754E;
  --accent-secondary: #1F73D3;
  --accent-soft: #E5F6EE;
  --accent-secondary-soft: #E6F1FF;
  --accent-warning: #E07A28;
  --accent: #0B8F5E;

  --border-strong: rgba(15, 23, 42, 0.16);
  --border-light: rgba(15, 23, 42, 0.08);
  --border-subtle: rgba(15, 23, 42, 0.06);
  --line: rgba(15, 23, 42, 0.06);
  --surface-2: #F0F4F9;

  --shadow-hairline: 0 1px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.16);

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --radius-control: var(--radius-sm);
  --radius-compact: 12px;
  --radius-surface: var(--radius-lg);
  --radius-shell: var(--radius-lg);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container-max: 1200px;
  --header-height: 72px;
  --header-height-mobile: 60px;
  --header-control-size: 40px;
  --header-control-size-mobile: 36px;
  --header-nav-gap: 24px;
  --header-nav-gap-mobile: 10px;

  /* ── Technical Minimalist Design System (tm-* classes) ──────────────
     Paper + Forest design language. Used exclusively by tm- prefixed
     components. Tokens live here so dark-mode override can flip them.
  ─────────────────────────────────────────────────────────────────── */
  --tm-paper: #F7F7F5;
  --tm-paper-80: rgba(247, 247, 245, 0.80);
  --tm-forest: #1A3C2B;
  --tm-forest-20: rgba(26, 60, 43, 0.20);
  --tm-forest-10: rgba(26, 60, 43, 0.10);
  --tm-grid: #3A3A38;
  --tm-grid-30: rgba(58, 58, 56, 0.30);
  --tm-grid-20: rgba(58, 58, 56, 0.20);
  --tm-grid-10: rgba(58, 58, 56, 0.10);
  --tm-coral: #FF8C69;
  --tm-coral-15: rgba(255, 140, 105, 0.15);
  --tm-mint: #9EFFBF;
  --tm-mint-15: rgba(158, 255, 191, 0.15);
  --tm-gold: #F4D35E;
  --tm-gold-15: rgba(244, 211, 94, 0.15);
  --tm-white: #FFFFFF;
  --tm-font-display: "Space Grotesk", "Sora", system-ui, sans-serif;
  --tm-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --tm-font-body: var(--font-body);
  /* Canonical marketing type scale */
  --tm-type-display-xl: clamp(48px, 6.2vw, 88px);
  --tm-type-display-xl-lh: 0.92;
  --tm-type-display-xl-ls: -0.04em;
  --tm-type-display-lg: clamp(40px, 5vw, 68px);
  --tm-type-display-lg-lh: 0.96;
  --tm-type-display-lg-ls: -0.03em;
  --tm-type-page-h1: clamp(34px, 4.2vw, 56px);
  --tm-type-page-h1-lh: 1.04;
  --tm-type-page-h1-ls: -0.025em;
  --tm-type-section-h2: clamp(28px, 3.4vw, 44px);
  --tm-type-section-h2-lh: 1.10;
  --tm-type-section-h2-ls: -0.02em;
  --tm-type-card-h3: clamp(20px, 2.2vw, 30px);
  --tm-type-card-h3-lh: 1.18;
  --tm-type-card-h3-ls: -0.01em;
  --tm-type-lead: clamp(18px, 1.7vw, 22px);
  --tm-type-lead-lh: 1.58;
  --tm-type-body: 16px;
  --tm-type-body-lh: 1.68;
  --tm-type-body-sm: 14px;
  --tm-type-body-sm-lh: 1.60;
  --tm-type-meta: 12px;
  --tm-type-meta-lh: 1.50;
  --tm-type-label-mono: 10px;
  --tm-type-label-mono-lh: 1.20;
  --tm-type-label-mono-ls: 0.12em;
  --tm-type-code-mono: 15px;
  --tm-type-code-mono-lh: 1.65;
  --tm-type-code-mono-ls: 0;
  --tm-section-rhythm-y: clamp(56px, 8vw, 84px);
  --tm-card-pad-x: var(--space-6);
  --tm-card-pad-y: var(--space-5);
  --tm-sidebar-inset: var(--space-6);
  --tm-list-row-min-h: 42px;
  --tm-list-row-pad-x: var(--space-6);
  --tm-list-row-pad-y: var(--space-3);
  --tm-code-pad-x: var(--space-5);
  --tm-code-pad-y: var(--space-4);
  --tm-copy-btn-height: 34px;
  --tm-copy-btn-pad-x: var(--space-3);
  --tm-copy-btn-hit-offset: var(--space-4);
  --tm-formula-border: var(--tm-grid-10);
  --tm-formula-bg: var(--tm-paper);
  --tm-formula-bg-subtle: color-mix(in srgb, var(--tm-forest) 0.8%, var(--tm-white));
  --tm-formula-pad-x: var(--space-4);
  --tm-formula-pad-y: var(--space-4);
  --tm-result-formula-pad-x: 12px;
  --tm-result-formula-pad-y: 6px;
  --tm-result-formula-min-h: 22px;
  --tm-result-formula-row-gap: 8px;
  --tm-result-formula-action-size: 24px;
  --tm-result-formula-line-h: 1.28;
  --tm-formula-code-size: 15px;
  --tm-formula-code-line: 1.65;
  --tm-formula-head-height: 44px;
  --tm-chip-height: 28px;
  --tm-chip-pad-x: var(--space-3);
  --tm-chip-font-size: 9px;
  --tm-chip-letter-spacing: 0.12em;
  --tm-tag-height: 24px;
  --tm-tag-pad-x: 10px;
  --tm-tag-gap: 6px;
  --tm-tag-font-size: 10px;
  --tm-tag-letter: 0.12em;
  --tm-tag-dot-size: 8px;
  --tm-label-bg: transparent;
  --tm-chip-bg: var(--tm-surface-subcard, var(--tm-paper));
  --tm-sem-platform: var(--tm-mint);
  --tm-sem-sheets: var(--tm-sem-sql);
  --tm-sem-sql: #60a5fa;
  --tm-sem-script: #f6c16f;
  --tm-sem-regex: #a78bfa;
  --tm-sem-status-positive: var(--tm-forest);
  --tm-sem-status-attention: var(--tm-gold);
  --tm-sem-status-alert: var(--tm-coral);
}

/* Dark Mode Support - Class-based for manual toggle */
html.dark-mode {
  --bg-page: #111111;
  --bg-app: #171717;
  --bg-shell: #1a1a1a;
  --bg-surface: #212121;
  --bg-surface-1: #212121;
  --bg-surface-2: #2a2a2a;
  --bg-surface-muted: #2a2a2a;
  --bg-surface-soft: #333333;
  --bg-hero: #181818;
  --code-box-bg-dark: #101010;

  --text-primary: #f3f4f6;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  --text-inverse: #111111;
  --text-muted: #d1d5db;

  --accent-primary: #10B981;
  --accent-primary-dark: #0D9668;
  --accent-secondary: #3B82F6;
  --accent-soft: #1A2E26;
  --accent-secondary-soft: #1A2540;
  --accent-warning: #F59E0B;
  --accent: #10B981;

  --border-strong: rgba(255, 255, 255, 0.26);
  --border-light: rgba(255, 255, 255, 0.16);
  --border-subtle: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.14);
  --surface-2: #2a2a2a;

  --shadow-hairline: 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);

  /* Technical Minimalist dark overrides */
  --tm-paper: #181816;
  --tm-paper-80: rgba(24, 24, 22, 0.80);
  --tm-forest: #9EFFBF;
  --tm-forest-20: rgba(158, 255, 191, 0.18);
  --tm-forest-10: rgba(158, 255, 191, 0.08);
  --tm-grid: #C8C8C6;
  --tm-grid-30: rgba(200, 200, 198, 0.30);
  --tm-grid-20: rgba(200, 200, 198, 0.20);
  --tm-grid-10: rgba(200, 200, 198, 0.10);
  --tm-white: #242422;
  --tm-label-bg: transparent;
  --tm-chip-bg: rgba(255, 255, 255, 0.04);
  --tm-formula-border: color-mix(in srgb, var(--tm-mint) 34%, var(--tm-grid-20));
  --tm-formula-bg: color-mix(in srgb, var(--tm-mint) 6%, rgba(17, 26, 23, 0.86));
  --tm-formula-bg-subtle: color-mix(in srgb, var(--tm-mint) 5%, rgba(14, 22, 19, 0.92));
  --tm-sem-platform: var(--tm-mint);
  --tm-sem-sheets: var(--tm-sem-sql);
  --tm-sem-sql: #60a5fa;
  --tm-sem-script: #f6c16f;
  --tm-sem-regex: #a78bfa;
  --tm-sem-status-positive: var(--tm-forest);
  --tm-sem-status-attention: var(--tm-gold);
  --tm-sem-status-alert: var(--tm-coral);
}

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

[hidden] {
  display: none !important;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:not(.btn):hover {
  color: var(--accent-secondary);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-primary);
}

h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 20px;
  line-height: 1.35;
}

p {
  color: var(--text-secondary);
}

/* Typography role utilities (marketing/public) */
.tm-type-display-xl {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-display-xl);
  line-height: var(--tm-type-display-xl-lh);
  letter-spacing: var(--tm-type-display-xl-ls);
}

.tm-type-display-lg {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-display-lg);
  line-height: var(--tm-type-display-lg-lh);
  letter-spacing: var(--tm-type-display-lg-ls);
}

.tm-type-page-h1 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-page-h1);
  line-height: var(--tm-type-page-h1-lh);
  letter-spacing: var(--tm-type-page-h1-ls);
}

.tm-type-section-h2 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-section-h2);
  line-height: var(--tm-type-section-h2-lh);
  letter-spacing: var(--tm-type-section-h2-ls);
}

.tm-type-card-h3 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-card-h3);
  line-height: var(--tm-type-card-h3-lh);
  letter-spacing: var(--tm-type-card-h3-ls);
}

.tm-type-lead {
  font-family: var(--tm-font-body);
  font-size: var(--tm-type-lead);
  line-height: var(--tm-type-lead-lh);
}

.tm-type-body {
  font-family: var(--tm-font-body);
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-body-lh);
}

.tm-type-body-sm {
  font-family: var(--tm-font-body);
  font-size: var(--tm-type-body-sm);
  line-height: var(--tm-type-body-sm-lh);
}

.tm-type-meta {
  font-family: var(--tm-font-body);
  font-size: var(--tm-type-meta);
  line-height: var(--tm-type-meta-lh);
}

.tm-type-label-mono {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-type-label-mono);
  line-height: var(--tm-type-label-mono-lh);
  letter-spacing: var(--tm-type-label-mono-ls);
  text-transform: uppercase;
}

.tm-type-code-mono {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-type-code-mono);
  line-height: var(--tm-type-code-mono-lh);
  letter-spacing: var(--tm-type-code-mono-ls);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--space-20) 0;
}

.section-sm {
  padding: var(--space-12) 0;
}

.section-muted {
  background: var(--bg-surface-muted);
}

.section-hero {
  background: radial-gradient(1200px circle at 15% 20%, rgba(11, 143, 94, 0.16), transparent 45%),
    radial-gradient(900px circle at 90% 10%, rgba(31, 115, 211, 0.12), transparent 42%),
    var(--bg-hero);
  padding-top: calc(var(--space-20) + 24px);
}

html.dark-mode .section-hero {
  background: radial-gradient(1200px circle at 15% 20%, rgba(16, 185, 129, 0.12), transparent 46%),
    radial-gradient(900px circle at 90% 10%, rgba(59, 130, 246, 0.06), transparent 44%),
    var(--bg-hero);
}

.section-title {
  margin-bottom: var(--space-8);
  display: grid;
  gap: var(--space-3);
}

.muted {
  color: var(--text-tertiary);
}

.section-title p {
  font-size: 17px;
  line-height: 1.6;
}

.section-title.center p {
  max-width: 620px;
  margin: 0 auto;
}

/* GEO Definition Blocks — concise authoritative text for AI extraction */
.formula-definition,
.comparison-definition,
.blog-definition,
.usecase-definition {
  font-size: 17px;
  line-height: 1.58;
  color: var(--text-secondary);
  max-width: 680px;
  margin-bottom: var(--space-3);
}

.blog-definition {
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--text-primary);
  max-width: 700px;
  margin-bottom: var(--space-4);
}

.formula-definition strong,
.comparison-definition strong,
.blog-definition strong,
.usecase-definition strong {
  color: var(--text-primary);
  font-weight: 600;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-12);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-8);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
}

.grid-2>*,
.grid-3>*,
.grid-4>* {
  min-width: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.center {
  text-align: center;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

html.dark-mode .site-header {
  background: rgba(26, 26, 26, 0.95);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: var(--header-nav-gap);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  min-width: 0;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: url('/img/logo-concept.svg') center/100% no-repeat;
  display: block;
  color: transparent;
  text-indent: -9999px;
  flex-shrink: 0;
}

/* Footer-specific brand mark style */
.footer .brand-mark {
  background: url('/img/logo-concept.svg') center/100% no-repeat;
  filter: none;
}

.nav-links {
  display: flex;
  gap: var(--space-5);
  align-items: center;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 15px;
}

.nav-links>a,
.nav-dropdown>summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--text-secondary);
}

.nav-links>a:hover,
.nav-dropdown>summary:hover {
  color: var(--text-primary);
}

.nav-dropdown {
  position: relative;
  list-style: none;
}

.nav-dropdown>summary {
  cursor: pointer;
  gap: 8px;
  user-select: none;
  list-style: none;
}

.nav-dropdown>summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.16s ease;
}

.nav-dropdown[open]>summary::after {
  transform: rotate(-135deg) translateY(-1px);
}

.nav-dropdown>summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown>summary::marker {
  content: "";
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 188px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: grid;
  gap: 2px;
  z-index: 30;
}

html.dark-mode .nav-dropdown-menu {
  background: #1a1a1a;
  border-color: var(--border-subtle);
}

.nav-dropdown-menu a {
  display: block;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .nav-dropdown-menu a:hover {
    background: var(--bg-surface-muted);
    color: var(--text-primary);
  }
}

.mobile-nav {
  display: none;
}

.mobile-nav-trigger {
  width: var(--header-control-size);
  height: var(--header-control-size);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.mobile-nav-trigger:hover {
  color: var(--text-primary);
  background: var(--bg-surface-muted);
}

.mobile-nav-trigger::after {
  display: none !important;
}

.mobile-nav-icon {
  position: relative;
  width: 16px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.mobile-nav-icon::before,
.mobile-nav-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
}

.mobile-nav-icon::before {
  top: -5px;
}

.mobile-nav-icon::after {
  top: 5px;
}

.mobile-nav-menu {
  right: 0;
  left: auto;
  min-width: min(300px, calc(100vw - 24px));
  max-width: min(320px, calc(100vw - 24px));
}

.mobile-nav-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 6px 0;
}

.mobile-nav[open] .mobile-nav-trigger {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

.mobile-nav-item--danger {
  color: #dc2626 !important;
}

/* Share page minimal mobile menu — scoped to theme-share-page only */
.theme-share-page .mobile-nav-menu .mobile-nav-item,
.theme-share-page .mobile-nav-menu .mobile-nav-theme-toggle.theme-toggle {
  all: unset;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.theme-share-page .mobile-nav-menu .mobile-nav-item:hover,
.theme-share-page .mobile-nav-menu .mobile-nav-theme-toggle.theme-toggle:hover {
  color: var(--text-primary);
  background: var(--bg-surface-muted);
}

.theme-share-page .mobile-nav-menu .mobile-nav-item svg,
.theme-share-page .mobile-nav-menu .mobile-nav-theme-toggle.theme-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.nav-actions .btn {
  min-height: var(--header-control-size);
  width: auto;
  white-space: nowrap;
}

/* Theme Toggle Button */
.theme-toggle {
  width: var(--header-control-size);
  height: var(--header-control-size);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.theme-toggle:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  color: currentColor;
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Sun icon (visible in dark mode) */
.theme-toggle .sun-icon {
  display: none;
}

html.dark-mode .theme-toggle .sun-icon {
  display: block;
}

/* Moon icon (visible in light mode) */
.theme-toggle .moon-icon {
  display: block;
}

html.dark-mode .theme-toggle .moon-icon {
  display: none;
}

.btn {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14px;
  font-family: inherit;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background: var(--accent-primary-dark);
  color: var(--text-inverse);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.btn-secondary:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  box-shadow: none;
}

.btn-ghost:hover {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.04);
}

.btn-lg {
  height: 44px;
  padding: 0 24px;
  font-size: 16px;
}

.btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

.btn.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-hairline);
}

.btn.loading {
  pointer-events: none;
  opacity: 0.7;
  cursor: wait;
}

.btn-danger {
  background: #DC2626;
  color: #FFFFFF;
  border: 1px solid transparent;
}

.btn-danger:hover {
  background: #B91C1C;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.soft-tooltip {
  position: relative;
  display: inline-flex;
}

.soft-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-2px);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 5;
}

.soft-tooltip:hover::after,
.soft-tooltip:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-primary);
  width: fit-content;
  align-self: flex-start;
  line-height: 1.2;
}

.hero-badge {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  border: 1px solid transparent;
}

.hero-badge+.hero-title,
.hero-badge+.section-title {
  margin-top: var(--space-4);
}

.hero-copy-seo {
  gap: var(--space-4);
}

.hero-copy-seo>.hero-badge+.hero-title,
.hero-stack-seo>.hero-badge+.section-title {
  margin-top: 0;
}

.hero-stack-seo {
  gap: var(--space-4);
}

.badge-topic-formulas {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.22);
  color: #0A9F6B;
}

.badge-topic-examples {
  background: rgba(59, 130, 246, 0.16);
  border-color: rgba(59, 130, 246, 0.2);
  color: #1D63D8;
}

.badge-topic-blog {
  background: rgba(139, 92, 246, 0.17);
  border-color: rgba(139, 92, 246, 0.22);
  color: #6B4BD1;
}

.badge-topic-comparison {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.24);
  color: #B46600;
}

.badge-topic-usecase {
  background: rgba(20, 184, 166, 0.18);
  border-color: rgba(20, 184, 166, 0.22);
  color: #0F8E84;
}

.badge-topic-pricing {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.25);
  color: #B46600;
}

.badge-topic-faq {
  background: rgba(100, 116, 139, 0.18);
  border-color: rgba(100, 116, 139, 0.24);
  color: #475569;
}

html.dark-mode .badge-topic-formulas {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(52, 211, 153, 0.35);
  color: #6EE7B7;
}

html.dark-mode .badge-topic-examples {
  background: rgba(59, 130, 246, 0.24);
  border-color: rgba(96, 165, 250, 0.36);
  color: #93C5FD;
}

html.dark-mode .badge-topic-blog {
  background: rgba(139, 92, 246, 0.26);
  border-color: rgba(167, 139, 250, 0.38);
  color: #C4B5FD;
}

html.dark-mode .badge-topic-comparison {
  background: rgba(245, 158, 11, 0.24);
  border-color: rgba(251, 191, 36, 0.38);
  color: #FCD34D;
}

html.dark-mode .badge-topic-usecase {
  background: rgba(20, 184, 166, 0.24);
  border-color: rgba(45, 212, 191, 0.34);
  color: #99F6E4;
}

html.dark-mode .badge-topic-pricing {
  background: rgba(245, 158, 11, 0.24);
  border-color: rgba(251, 191, 36, 0.38);
  color: #FCD34D;
}

html.dark-mode .badge-topic-faq {
  background: rgba(100, 116, 139, 0.28);
  border-color: rgba(148, 163, 184, 0.34);
  color: #CBD5E1;
}

.badge.secondary {
  background: var(--accent-secondary-soft);
  color: var(--accent-secondary);
}

.badge.neutral {
  background: var(--bg-surface-muted);
  color: var(--text-secondary);
}

.center .badge {
  align-self: center;
  margin: 0 auto;
}

.hero-grid {
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero-title {
  margin: 0;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: 17px;
  max-width: 560px;
  line-height: 1.65;
  margin: 0;
}

.hero-title.sm {
  font-size: clamp(32px, 4vw, 48px);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  color: var(--text-tertiary);
  font-size: 14px;
  margin-top: var(--space-3);
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-meta span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
}

.center .hero-meta {
  justify-items: center;
  text-align: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-2);
}

.dashboard-title {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.dashboard-title h1 {
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.dashboard-title p {
  max-width: 62ch;
  line-height: 1.6;
}

.dashboard-stats {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.dashboard-hero-actions {
  margin-top: 2px;
  margin-bottom: 0;
}

.dashboard-hero-actions .btn {
  align-self: flex-start;
}

.dashboard-user-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  padding: 4px 8px;
  border-radius: var(--radius-control);
  border: 1px solid var(--tm-grid-20);
  background: transparent;
  color: color-mix(in srgb, var(--tm-forest) 60%, transparent);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--tm-font-mono);
  font-weight: 500;
  line-height: 1;
  gap: 8px;
}

.stat-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: calc(var(--space-4) + 2px) var(--space-5);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 148px;
  gap: var(--space-2);
}

.stat-card strong {
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--text-primary);
}

.dashboard-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
  margin-top: 0;
}

.dashboard-recent {
  grid-column: span 2;
}

.dashboard-side {
  display: grid;
  grid-column: span 1;
  gap: var(--space-4);
}

.dashboard-side .card {
  position: sticky;
  top: var(--space-5);
}

.dashboard-action-grid {
  display: grid;
  gap: var(--space-2);
}

.dashboard-action-grid .btn {
  width: 100%;
  min-height: 36px;
  justify-content: center;
}

.dashboard-recent {
  gap: var(--space-3);
}

.dashboard-recent-list {
  display: grid;
  gap: 12px;
}

.dashboard-recent-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--bg-surface-muted);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-recent-item:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.dashboard-recent-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-recent-type {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tm-forest) 70%, transparent);
  border: 1px solid var(--tm-grid-20);
  background: transparent;
  padding: 2px 8px;
  border-radius: var(--radius-compact);
  font-weight: 500;
}

html.dark-mode .dashboard-recent-type {
  color: var(--tm-mint);
  border-color: color-mix(in srgb, var(--tm-mint) 30%, transparent);
}

.dashboard-recent-type::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--tm-mint, #8FE5B5);
}

.dashboard-recent-type.sql::before {
  background-color: #3b82f6;
}

.dashboard-recent-type.explain::before {
  background-color: #f59e0b;
}

.dashboard-recent-type.debug::before {
  background-color: #ef4444;
}

.dashboard-recent-type.script::before {
  background-color: #8b5cf6;
}

.dashboard-recent-type.regex::before {
  background-color: #ec4899;
}

.dashboard-recent-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  color: var(--text-primary);
}

.switch-tool-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--accent-soft);
  color: var(--accent-primary);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  margin-left: 8px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.switch-tool-link:hover {
  background: var(--accent-secondary-soft);
  color: var(--accent-secondary);
}

.dashboard-recent-time {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-tertiary);
}

.dashboard-recent-footer {
  display: flex;
  justify-content: flex-end;
}

.dashboard-recent-empty {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-light);
  background: var(--bg-surface-muted);
}

@media (max-width: 900px) {
  .dashboard-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .dashboard-user-chip {
    margin-left: 0;
    margin-top: 8px;
  }

  .dashboard-title h1 {
    font-size: clamp(34px, 7vw, 44px);
  }

  .dashboard-title p {
    max-width: none;
    font-size: 15px;
  }

  .dashboard-stats {
    margin-bottom: var(--space-4);
  }

  .stat-card {
    min-height: 0;
    padding: var(--space-4);
  }

  .dashboard-recent-item {
    align-items: flex-start;
  }

  .dashboard-recent-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dashboard-recent-title {
    white-space: normal;
  }

  .dashboard-bento {
    grid-template-columns: 1fr;
  }

  .dashboard-recent,
  .dashboard-side {
    grid-column: auto;
  }

  .dashboard-side .card {
    position: static;
    top: auto;
  }
}

@media (max-width: 640px) {
  .dashboard-head {
    gap: var(--space-3);
  }

  .dashboard-title {
    margin-bottom: var(--space-2);
  }

  .dashboard-title h1 {
    font-size: clamp(30px, 10vw, 38px);
  }

  .dashboard-title p {
    font-size: 14px;
    line-height: 1.5;
  }

  .dashboard-stats {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }

  .stat-card {
    border-radius: var(--radius-surface);
    padding: 14px 16px;
  }

  .stat-card strong {
    font-size: 30px;
  }

  .dashboard-recent-item {
    padding: 11px 12px;
    gap: var(--space-2);
  }

  .dashboard-recent-main {
    gap: 6px;
  }

  .dashboard-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
}

@media (max-width: 420px) {
  .dashboard-action-grid {
    grid-template-columns: 1fr;
  }
}

.label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  font-weight: 600;
}

.toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
}

.toggle-row:last-child {
  border-bottom: none;
}

.hero-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  position: relative;
}

.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  z-index: 5000;
}

.tour-popover {
  position: fixed;
  max-width: 280px;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  color: var(--text-primary);
}

.tour-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.tour-body {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.tour-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.tour-highlight {
  position: relative;
  z-index: 5001;
  box-shadow: 0 0 0 3px rgba(11, 143, 94, 0.35), 0 0 0 6px rgba(11, 143, 94, 0.18);
  border-radius: var(--radius-sm);
}

.hero-card .chip-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  background: var(--bg-surface-muted);
  color: var(--text-secondary);
}

/* Code Frame (Compatibility Bridge -> TM Formula Surface) */
.code-frame {
  background: var(--tm-formula-bg);
  color: var(--tm-forest);
  border-radius: var(--radius-compact);
  border: 1px solid var(--tm-formula-border);
  padding: var(--tm-formula-pad-y) var(--tm-formula-pad-x);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-formula-code-size);
  line-height: var(--tm-formula-code-line);
  overflow: hidden;
  position: relative;
  max-width: 100%;
  box-shadow: none;
  margin-bottom: var(--space-4);
}

html.dark-mode .code-frame {
  background: var(--tm-formula-bg);
  border-color: color-mix(in srgb, var(--tm-mint) 24%, var(--tm-grid-20));
  color: var(--tm-mint);
}

.code-frame pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  border: 1px solid var(--tm-formula-border);
  background: var(--tm-formula-bg-subtle);
  padding: var(--tm-formula-pad-y) var(--tm-formula-pad-x);
  overflow-x: auto;
}

.code-frame.has-copy pre {
  padding-right: calc(var(--tm-formula-pad-x) + 86px);
  min-height: 24px;
}

/* .btn-block defined in formula-pages.css */

.code-frame .seo-copy-btn {
  position: absolute;
  top: var(--tm-copy-btn-hit-offset);
  bottom: auto;
  margin: 0;
  transform: none;
  right: var(--tm-copy-btn-hit-offset);
  background: var(--tm-white);
  border: 1px solid var(--tm-formula-border);
  border-radius: var(--radius-control);
  height: var(--tm-copy-btn-height);
  min-height: var(--tm-copy-btn-height);
  min-width: 34px;
  padding: 0 var(--tm-copy-btn-pad-x);
  color: var(--tm-forest);
  cursor: pointer;
  font-size: var(--tm-tag-font-size);
  font-weight: 500;
  font-family: var(--tm-font-mono);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background-color 0.2s, opacity 0.2s;
  box-shadow: none;
  z-index: 2;
  line-height: 1;
}

.code-frame.is-single-line .seo-copy-btn {
  top: var(--tm-copy-btn-hit-offset);
  transform: none;
}

.code-frame.is-multi-line .seo-copy-btn {
  top: var(--tm-copy-btn-hit-offset);
  bottom: auto;
  margin: 0;
  transform: none;
}

.code-frame.is-single-line.has-copy pre {
  min-height: 36px;
  display: flex;
  align-items: center;
}

.code-frame .seo-copy-btn:hover {
  color: var(--tm-forest);
  border-color: var(--tm-grid-30);
  background: var(--tm-forest-10);
}

.code-frame .seo-copy-btn:active {
  opacity: 0.85;
}

html.dark-mode .code-frame .seo-copy-btn {
  background: rgba(255, 255, 255, 0.05);
  color: var(--tm-mint);
  border-color: color-mix(in srgb, var(--tm-mint) 34%, var(--tm-grid-20));
}

html.dark-mode .code-frame .seo-copy-btn:hover {
  border-color: color-mix(in srgb, var(--tm-mint) 52%, var(--tm-grid-20));
  color: var(--tm-mint);
}

.hero-card .prompt {
  background: var(--bg-surface-muted);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.metric-card {
  background: var(--bg-surface-muted);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.metric-card strong {
  display: block;
  font-size: 18px;
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 600;
  margin-top: var(--space-2);
}

.logo-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.logo-pill {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.card {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
}

.link-card {
  color: inherit;
  text-decoration: none;
  display: block;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.link-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.link-card:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 220px;
}

.icon-stack {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-primary);
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.icon-stack.blue {
  background: var(--accent-secondary-soft);
  color: var(--accent-secondary);
}

.icon-stack svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.use-case-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-subtle);
}

.use-case-card .tag {
  font-size: 12px;
  color: var(--accent-primary);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  width: fit-content;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.gallery-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  padding: var(--space-5);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}

.gallery-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(300px circle at 120% -20%, rgba(31, 115, 211, 0.1), transparent 60%);
  pointer-events: none;
}

.gallery-card code {
  background: var(--bg-surface-muted);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-secondary);
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial .quote {
  font-size: 16px;
  color: var(--text-secondary);
}

.testimonial .author {
  font-weight: 600;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}

.pricing-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pricing-fit {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}

.pricing-actions {
  margin-top: auto;
}

.pricing-actions .btn {
  width: 100%;
}

.pricing-note {
  margin-top: var(--space-2);
  font-size: 13px;
  color: var(--text-tertiary);
}

.pricing-card.featured {
  border: 2px solid var(--accent-primary);
  box-shadow: var(--shadow-md);
}

.price {
  font-size: 36px;
  font-weight: 700;
  font-family: var(--font-display);
}

.price small {
  font-size: 16px;
  color: var(--text-tertiary);
}

.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: 14px;
}

.check-icon {
  width: 18px;
  height: 18px;
  color: var(--accent-primary);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
  position: relative;
  z-index: 1;
}

.compare-table th,
.compare-table td {
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  background: transparent;
}

.compare-table .highlight {
  font-weight: 700;
  color: var(--text-primary);
}

.compare-table th {
  font-size: 15px;
  font-weight: 700;
}

.compare-table th.highlight {
  font-size: 16px;
  font-weight: 800;
}

.compare-table td:first-child {
  font-weight: 600;
  color: var(--text-primary);
}

.compare-table .highlight-border {
  border-bottom: 1px solid rgba(11, 143, 94, 0.18);
}

.compare-table th.highlight-border {
  border-bottom: 1px solid rgba(11, 143, 94, 0.28);
}

.compare-table col.col-feature {
  width: 28%;
}

.compare-table col.col-highlight {
  width: 22%;
}

.compare-table col.col-competitor {
  width: 16.6667%;
}

.compare-table-wrap {
  position: relative;
  overflow-x: auto;
  padding: 0;
}

.compare-table-wrap::before {
  display: none;
}

@media (max-width: 960px) {
  .compare-table {
    table-layout: auto;
  }
}

.compare-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.compare-plan-actions .btn {
  min-width: 90px;
}

.faq-item {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  padding: var(--space-5);
  width: 100%;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.faq-stack {
  display: grid;
  gap: var(--space-4);
  max-width: 860px;
  margin: 0 auto;
}

.faq-item p {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  line-height: 1.6;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.cta-actions .btn {
  min-height: 48px;
  padding-inline: 24px;
}

.cta-note {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-top: var(--space-3);
}

.cta-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

.cta-form input {
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  min-width: 260px;
  font-size: 15px;
}

.faq-item summary::after {
  content: "+";
  font-weight: 700;
  margin-left: auto;
  color: var(--text-tertiary);
}

.faq-item[open] summary::after {
  content: "–";
}

.footer {
  background: #111111;
  color: #f3f4f6;
  padding: var(--space-16) 0;
}

@media (max-width: 640px) {
  .footer {
    padding: var(--space-10) 0;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
  }

  .footer h4 {
    font-size: 12px;
    margin-bottom: var(--space-2);
  }

  .footer ul {
    gap: 6px;
  }

  .footer-meta {
    margin-top: var(--space-6);
    padding-top: var(--space-3);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

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

.footer a {
  color: #9ca3af;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
}

.footer-brand {
  color: #f3f4f6;
}

.footer-summary {
  color: #9ca3af;
  max-width: 320px;
}

.footer-meta {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.45;
}

.footer h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin-bottom: var(--space-3);
}

.footer ul {
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.footer-lite {
  background: transparent;
  color: var(--text-tertiary);
  padding: var(--space-8) 0 var(--space-10);
  border-top: 1px solid var(--border-subtle);
}

.footer-lite a {
  color: var(--text-tertiary);
}

.footer-lite-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer-lite-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-lite-copy {
  font-size: 13px;
}

.footer-lite-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 13px;
}

.hero-cta-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
}

.hero-cta-card input {
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  padding: 0 12px;
  font-size: 14px;
}

.hero-cta-card input:focus {
  outline: none;
  border-color: var(--accent-secondary);
  box-shadow: 0 0 0 3px rgba(31, 115, 211, 0.15);
}

.prose {
  color: var(--text-secondary);
  line-height: 1.7;
  display: grid;
  gap: var(--space-3);
}

.prose h3 {
  margin-top: var(--space-6);
}

.prose ul {
  padding-left: 20px;
  list-style: disc;
}

.share-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-14) 24px var(--space-20);
}

.footer-share {
  background: var(--bg-shell);
  color: var(--text-primary);
  border-top: none;
}

.footer-share a {
  color: var(--text-secondary);
}

.footer-share .brand-mark {
  background: url('/img/logo-concept.svg') center/100% no-repeat;
  filter: none;
  opacity: 1;
}

/* Starter Cards */
.starter-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.starter-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  font: inherit;
  color: var(--text-primary);
  min-height: 44px;
  text-align: left;
}

.starter-card:hover {
  border-color: var(--primary);
  background: var(--bg-surface-2);
  box-shadow: none;
}

.starter-card h4 {
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: var(--space-1);
  color: var(--text-main);
}

.starter-card p {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

.helper-link {
  font-size: var(--text-sm);
  color: var(--primary);
  text-decoration: none;
  cursor: pointer;
  margin-top: var(--space-2);
  display: inline-block;
}

.helper-link:hover {
  text-decoration: underline;
}

.share-actions {
  display: grid;
  gap: var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  width: 100%;
  max-width: 100%;
  margin: var(--space-6) auto 0;
}

.share-shell #app {
  padding: 0 !important;
}

.share-shell #app .card {
  width: 100%;
}

.share-actions .action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.share-actions .action-row .btn {
  flex: 1 1 160px;
  min-height: 36px;
}

.share-actions .action-row .share-export-menu {
  flex: 1 1 160px;
}

.share-actions .share-export-menu .result-actions-menu-trigger {
  width: 100%;
  justify-content: center;
}

.share-actions .action-row:last-of-type {
  justify-content: flex-end;
}

.share-actions .action-row:last-of-type .btn {
  flex: 0 0 auto;
  min-width: 180px;
}

.share-actions .note {
  font-size: 13px;
  color: var(--text-tertiary);
}

.share-note {
  font-size: 13px;
  color: var(--text-tertiary);
}

.share-note.hidden {
  display: none;
}

.hero-anim {
  animation: fadeUp 0.7s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .hero-copy {
    gap: var(--space-4);
  }

  .hero-title {
    font-size: clamp(34px, 7.4vw, 46px);
  }

  .hero-subtitle {
    max-width: none;
    font-size: 16px;
  }

  .hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-grid>* {
    min-width: 0;
  }

  .hero-card {
    padding: var(--space-6);
  }

  .pricing-grid,
  .gallery-grid,
  .faq-stack {
    gap: var(--space-4);
  }

  .pricing-card {
    padding: var(--space-5);
  }

  .compare-table th,
  .compare-table td {
    padding: 13px 12px;
  }
}

@media (max-width: 640px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  main,
  section,
  .container,
  .hero-grid,
  .hero-copy,
  .hero-visual,
  .hero-card {
    max-width: 100%;
    min-width: 0;
  }

  .container {
    padding: 0 16px;
  }

  .section {
    padding: var(--space-12) 0;
  }

  .section-hero {
    padding-top: var(--space-10);
  }

  .navbar {
    flex-wrap: nowrap;
    height: var(--header-height-mobile);
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
    gap: var(--header-nav-gap-mobile);
    min-width: 0;
  }

  .brand {
    font-size: 16px;
    max-width: calc(100% - 98px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand-mark {
    width: 24px;
    height: 24px;
    background: url('/img/logo-concept.svg') center/100% no-repeat;
  }

  .nav-actions {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
  }

  .btn {
    width: 100%;
  }

  .site-header .nav-actions .btn {
    width: auto;
    min-height: var(--header-control-size-mobile);
    height: var(--header-control-size-mobile);
    padding: 0 12px;
    font-size: 13px;
  }

  .site-header .nav-actions .nav-signin {
    display: none !important;
  }

  .site-header .nav-actions .btn-ghost {
    display: none !important;
  }

  .site-header .nav-actions .nav-try {
    display: none !important;
  }

  .site-header .theme-toggle {
    width: var(--header-control-size-mobile);
    height: var(--header-control-size-mobile);
  }

  /* Hide standalone theme toggle when hamburger menu is present (toggle lives inside menu) */
  .site-header .nav-actions .theme-toggle:has(~ .mobile-nav) {
    display: none !important;
  }

  .site-header .mobile-nav {
    display: block;
  }

  .site-header .mobile-nav-trigger {
    width: var(--header-control-size-mobile);
    height: var(--header-control-size-mobile);
  }

  .site-header .mobile-nav-menu {
    border-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }

  .site-header .user-menu {
    display: none;
  }

  .hero-actions {
    flex-direction: column;
  }

  .logo-row {
    gap: var(--space-2);
  }

  .logo-label {
    width: 100%;
  }

  .logo-pill {
    padding: 6px 10px;
  }

  .hero-meta {
    grid-template-columns: 1fr;
    margin-top: var(--space-2);
  }

  .hero-card {
    padding: var(--space-4);
    border-radius: var(--radius-surface);
  }

  .hero-visual,
  .hero-card,
  .code-frame {
    max-width: 100%;
    min-width: 0;
  }

  .code-frame {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .code-frame pre {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .pricing-card {
    padding: var(--space-4);
    border-radius: var(--radius-surface);
    gap: var(--space-3);
  }

  .price {
    font-size: 30px;
  }

  .checklist li {
    font-size: 13px;
  }

  .compare-table-wrap {
    -webkit-overflow-scrolling: touch;
  }

  .compare-table {
    font-size: 13px;
  }

  .compare-table th,
  .compare-table td {
    padding: 10px 9px;
  }

  .cta-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cta-form input {
    width: 100%;
    min-width: 0;
  }

  .cta-form .btn {
    width: 100%;
  }

  .share-actions {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  .share-shell {
    padding: var(--space-8) 16px var(--space-12);
  }

  .share-actions .action-row:last-of-type .btn {
    width: 100%;
    min-width: 0;
  }

  .footer {
    padding: var(--space-12) 0;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
  }

  .footer h4 {
    margin-bottom: var(--space-2);
    font-size: 12px;
  }

  .footer ul {
    gap: 6px;
    font-size: 13px;
  }

  .footer-meta {
    margin-top: var(--space-6);
    padding-top: var(--space-3);
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .container {
    padding: 0 12px;
  }

  .section-hero {
    padding-top: var(--space-8);
  }

  .hero-title {
    font-size: clamp(30px, 10.2vw, 38px);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.auth-shell {
  min-height: calc(100vh - var(--header-height));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-10);
  padding: var(--space-10) 24px;
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto;
}

.auth-panel {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  max-width: 520px;
  justify-self: center;
  display: grid;
  gap: var(--space-4);
}

.auth-panel h1 {
  font-size: 28px;
}

.auth-panel input[type="email"] {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.04);
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  line-height: 40px;
  appearance: none;
}

.auth-panel input[type="email"]:focus {
  outline: none;
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.input {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: none;
  box-shadow: inset 0 0 0 1px var(--border-light);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 14px;
}

.input:disabled {
  background: var(--bg-surface-muted);
  color: var(--text-tertiary);
}

.input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
  border-color: var(--accent-primary);
}

.auth-panel .divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.auth-panel .divider::before,
.auth-panel .divider::after {
  content: \"\";
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.auth-panel .google-btn {
  width: 100%;
  height: 40px;
  border-radius: var(--radius-control);
  background: #ffffff;
  border: 1px solid var(--border-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  color: #1f1f1f;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.auth-panel .google-btn:hover {
  background: #f8f9fa;
  border-color: #dadce0;
}

.auth-panel .message {
  font-size: 14px;
}

.hero-list {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-4);
}

.hero-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 14px;
}

.hero-list li::before {
  content: \"•\";
  color: var(--accent-primary);
  font-weight: 700;
}

.bullet-list {
  list-style: none;
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.bullet-list li::before {
  content: "•";
  color: var(--accent-primary);
  font-weight: 700;
}

/* =============================================
   ADMIN DASHBOARD STYLES
   ============================================= */

/* Status Colors */
:root {
  --status-success: #10B981;
  --status-error: #EF4444;
  --status-warning: #F59E0B;
  --status-info: #3B82F6;
}

/* Admin Layout */
.admin-layout {
  min-height: calc(100vh - var(--header-height));
  background: var(--bg-page);
}

.admin-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-light);
}

.admin-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.admin-header p {
  font-size: 14px;
  color: var(--text-tertiary);
}

/* Tab Navigation */
.admin-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: var(--space-3);
  overflow-x: auto;
}

.admin-tab {
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.admin-tab:hover {
  color: var(--text-primary);
  background: var(--bg-surface-muted);
}

.admin-tab.active {
  color: var(--accent-primary);
  background: var(--accent-soft);
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
}

/* Metrics Grid */
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.admin-metric-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.admin-metric-card .value {
  font-size: 32px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1;
}

.admin-metric-card .change {
  font-size: 12px;
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: 4px;
}

.admin-metric-card .change.positive {
  color: var(--status-success);
}

.admin-metric-card .change.negative {
  color: var(--status-error);
}

/* Section Headers */
.admin-section {
  margin-bottom: var(--space-8);
}

.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.admin-section-header h2 {
  font-size: 18px;
  font-weight: 600;
}

/* Data Tables */
.admin-table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.admin-table th {
  background: var(--bg-surface-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  font-weight: 600;
}

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

.admin-table tbody tr:hover {
  background: var(--bg-surface-muted);
}

.admin-table td {
  font-size: 14px;
  color: var(--text-secondary);
}

.admin-table .email {
  color: var(--text-primary);
  font-weight: 500;
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}

.status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-badge.pro {
  background: rgba(16, 185, 129, 0.12);
  color: var(--status-success);
}

.status-badge.pro::before {
  background: var(--status-success);
}

.status-badge.free {
  background: var(--bg-surface-muted);
  color: var(--text-tertiary);
}

.status-badge.free::before {
  background: var(--text-tertiary);
}

.status-badge.banned {
  background: rgba(239, 68, 68, 0.12);
  color: var(--status-error);
}

.status-badge.banned::before {
  background: var(--status-error);
}

.status-badge.active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--status-info);
}

.status-badge.active::before {
  background: var(--status-info);
}

/* Action Buttons */
.admin-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-btn {
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.admin-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.admin-btn.primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: white;
}

.admin-btn.primary:hover {
  background: var(--accent-primary-dark);
}

.admin-btn.danger {
  border-color: var(--status-error);
  color: var(--status-error);
}

.admin-btn.danger:hover {
  background: rgba(239, 68, 68, 0.08);
}

.admin-btn.success {
  border-color: var(--status-success);
  color: var(--status-success);
}

.admin-btn.success:hover {
  background: rgba(16, 185, 129, 0.08);
}

/* Revenue Cards */
.admin-revenue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.admin-revenue-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.admin-revenue-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.admin-revenue-card .amount {
  font-size: 36px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--text-primary);
}

.admin-revenue-card .subtext {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}

/* Settings Grid */
.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

.admin-setting-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.admin-setting-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}

.admin-setting-row:last-child {
  border-bottom: none;
}

.admin-setting-row .label {
  color: var(--text-secondary);
}

.admin-setting-row .value {
  font-weight: 600;
  color: var(--text-primary);
  font-family: monospace;
  font-size: 12px;
}

/* Log Entries */
.admin-logs {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.admin-log-entry {
  display: grid;
  grid-template-columns: 140px 80px 1fr;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13px;
}

.admin-log-entry:last-child {
  border-bottom: none;
}

.admin-log-entry:hover {
  background: var(--bg-surface-muted);
}

.admin-log-entry .time {
  color: var(--text-tertiary);
  font-family: monospace;
  font-size: 12px;
}

.admin-log-entry .level {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
}

.admin-log-entry .level.error {
  color: var(--status-error);
}

.admin-log-entry .level.warn {
  color: var(--status-warning);
}

.admin-log-entry .level.info {
  color: var(--status-info);
}

.admin-log-entry .message {
  color: var(--text-secondary);
  font-family: monospace;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty States */
.admin-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-tertiary);
}

.admin-empty svg {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  opacity: 0.4;
}

.admin-empty h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.admin-empty p {
  font-size: 14px;
}

/* Funnel Chart */
.admin-funnel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.admin-funnel-row {
  display: grid;
  grid-template-columns: 160px 1fr 80px 60px;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-2) 0;
}

.admin-funnel-row .label {
  font-size: 14px;
  color: var(--text-secondary);
}

.admin-funnel-row .bar {
  height: 8px;
  background: var(--bg-surface-muted);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.admin-funnel-row .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  border-radius: var(--radius-control);
  transition: width 0.3s ease;
}

.admin-funnel-row .count {
  font-weight: 600;
  font-size: 14px;
  text-align: right;
}

.admin-funnel-row .rate {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: right;
}

.site-banner {
  position: fixed; inset: 0 0 auto; z-index: 950; border-bottom: 1px solid var(--border-light);
  background: var(--bg-surface-2); color: var(--text-primary); font-size: 13px; line-height: 1.5;
}
body.has-site-banner .site-header { top: var(--site-banner-offset, 0px); }
.site-banner--neutral, .site-banner--info { background: var(--bg-surface-2); color: var(--text-primary); }
.site-banner--promo { background: var(--accent-soft); color: var(--text-primary); }
.site-banner--warning, .site-banner--urgent { background: var(--da-warm, var(--bg-surface-2)); color: var(--text-primary); }
.site-banner .container { padding: 8px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; max-width: 1160px; margin: auto; }
.site-banner span { overflow-wrap: anywhere; }

.site-banner,
.site-header,
.tm-nav {
  transition: transform 220ms ease;
  will-change: transform;
}

body.chrome-hidden-on-scroll .site-banner {
  transform: translateY(calc(-100% - 2px));
}

body.chrome-hidden-on-scroll .site-header,
body.chrome-hidden-on-scroll .tm-nav {
  transform: translateY(calc(-100% - var(--site-banner-offset, 0px) - 2px));
}

/* Responsive */
@media (max-width: 768px) {
  .admin-container {
    padding: var(--space-4);
  }

  .admin-header {
    flex-direction: column;
    gap: var(--space-4);
  }

  .admin-tabs {
    gap: var(--space-1);
  }

  .admin-tab {
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
  }

  .admin-log-entry {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* ──── User Profile Dropdown ──── */
.user-menu {
  position: relative;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--accent-primary);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.15s ease, transform 0.1s ease;
  line-height: 1;
  padding: 0;
}

.user-avatar:hover {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.user-avatar:active {
  transform: scale(0.95);
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 100;
}

.user-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-dropdown-email {
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.user-dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
}

.user-dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.1s ease;
}

.user-dropdown-item:hover {
  background: var(--bg-surface-muted);
}

.user-dropdown-item--danger {
  color: #dc2626;
}

.user-dropdown-item--danger:hover {
  background: rgba(220, 38, 38, 0.06);
}

/* Dark mode overrides for dropdown */
html.dark-mode .user-dropdown {
  background: var(--bg-surface);
  border-color: var(--border-light);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

html.dark-mode .user-dropdown-item:hover {
  background: var(--bg-surface-muted);
}

html.dark-mode .user-dropdown-item--danger:hover {
  background: rgba(220, 38, 38, 0.12);
}

/* ================================================
   GENERATION TOOLS UI
   ================================================ */

#generate-page .section-title {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

#generate-page .section-title h1 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Tool Tabs Navigation */
.tool-tabs {
  display: flex;
  gap: var(--space-1);
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-1);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-hairline);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tool-tab {
  min-height: 38px;
  padding: 0 var(--space-3);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tool-tab:hover {
  color: var(--text-primary);
  background: var(--bg-surface-muted);
}

.tool-tab.active {
  color: var(--accent-primary);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(11, 143, 94, 0.22);
}

/* Tool Panels */
.tool-panel {
  display: none;
  animation: fadeIn 0.2s ease;
}

.tool-panel.active {
  display: block;
}

.tool-panel>.card {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.tool-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.tool-panel-badge-row {
  margin-bottom: 0;
}

.tool-panel-header h2 {
  margin: 0;
}

.explain-back-btn {
  align-self: flex-start;
  white-space: nowrap;
  padding: 0 12px;
}

@media (max-width: 640px) {
  .tool-panel-badge-row.tool-panel-header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Form Elements */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
  padding: var(--space-3);
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.55;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 900px) {
  #generate-page .section-title h1 {
    font-size: clamp(34px, 7.6vw, 44px);
  }

  .tool-tabs {
    margin-top: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .tool-panel>.card {
    padding: var(--space-5);
    gap: var(--space-3);
  }
}

@media (max-width: 640px) {
  #generate-page .section-title {
    margin-bottom: var(--space-4);
  }

  #generate-page .section-title h1 {
    font-size: clamp(30px, 9vw, 38px);
  }

  #generate-page .section-title p {
    font-size: 15px;
    line-height: 1.5;
  }

  .tool-tabs {
    margin: var(--space-4) 0;
    padding: 6px;
    border-radius: var(--radius-compact);
    scroll-snap-type: x proximity;
  }

  .tool-tab {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
    scroll-snap-align: start;
  }

  .tool-panel>.card {
    padding: 14px;
    border-radius: var(--radius-surface);
  }

  .starter-cards {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .starter-card {
    padding: var(--space-3);
  }

  .form-group textarea {
    min-height: 92px;
  }
}


/* partials/result-card-base.css */
/* Result Card - Container for main card and actions */
.result-card {
  margin-top: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  animation: slideIn 0.3s ease;
}

/* Main content card — OpenAI-style: generous padding, soft shadow, large radius */
.result-main-card {
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-surface);
  box-shadow: none;
  font-family: var(--tm-font-body, "Inter", system-ui, sans-serif);
}

.result-card.hidden {
  display: none;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.result-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Card header */
.rc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
}

.rc-head-main {
  min-width: 0;
  flex: 1;
}

.rc-title {
  font-size: clamp(24px, 1.9vw, 32px);
  font-family: var(--tm-font-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.08;
}

.rc-subtitle {
  margin-top: 12px;
}

.rc-clear-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.rc-clear-btn:hover {
  border-color: rgba(220, 38, 38, 0.5);
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
}

.rc-clear-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.14);
}

/* Badge row */
.rc-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 8px;
}

.rc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2));
  background: var(--tm-white, #fff);
  color: var(--tm-forest, #163f2f);
  padding: 0 12px;
  min-height: 30px;
  border-radius: var(--radius-control);
  font-size: 10px;
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 500;
  line-height: 1.2;
}

.rc-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--tm-mint, #8fe5b5);
  flex: 0 0 auto;
}

.rc-badge-excel {
  border-color: color-mix(in srgb, var(--tm-mint, #8fe5b5) 55%, var(--tm-grid-20, rgba(20, 46, 35, 0.2)));
}

.rc-badge-sheets {
  border-color: color-mix(in srgb, var(--tm-mint, #8fe5b5) 55%, var(--tm-grid-20, rgba(20, 46, 35, 0.2)));
}

.rc-badge-debug {
  border-color: color-mix(in srgb, #f59e0b 40%, var(--tm-grid-20, rgba(20, 46, 35, 0.2)));
}

.rc-badge-debug::before {
  background: #f59e0b;
}

.rc-badge-sql::before {
  background: var(--tm-sem-sql, #60a5fa);
}

.rc-badge-script::before {
  background: var(--tm-sem-script, #f6c16f);
}

.rc-badge-regex::before {
  background: var(--tm-sem-regex, #a78bfa);
}

.rc-badge-coverage--verified::before {
  background: var(--tm-mint, #8fe5b5);
}

.rc-badge-coverage--partial::before {
  background: #f59e0b;
}

.rc-badge-coverage--skipped::before,
.rc-badge-score::before,
.rc-badge-neutral::before {
  background: color-mix(in srgb, var(--tm-forest, #163f2f) 40%, transparent);
}

.rc-badge-neutral {
  border-color: var(--tm-grid-20, rgba(20, 46, 35, 0.2));
}

.rc-badge-compat {
  color: var(--tm-forest-80, rgba(20, 46, 35, 0.8));
  max-width: 100%;
  white-space: normal;
  line-height: 1.3;
}



.rc-separator-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(2, 133, 255, 0.28);
}

.rc-sep-char {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  margin-top: -2px;
}

.rc-head-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.rc-head-actions button {
  flex: 0 0 auto;
}

.rc-head-actions .rc-separator-toggle,
.rc-head-actions .rc-clear-btn {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
}

.rc-head-actions .rc-explain-icon-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--radius-control);
}

.rc-separator-toggle {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.rc-separator-toggle:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-surface-muted);
}

.rc-head-menu {
  position: relative;
}

.rc-head-menu-trigger {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0;
  letter-spacing: 0;
  line-height: 1;
  list-style: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.rc-head-menu-trigger:hover {
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3));
  color: var(--tm-forest, #163f2f);
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08));
}

.rc-head-menu-trigger svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.rc-head-menu-list {
  top: calc(100% + 6px);
  bottom: auto;
  right: 0;
  left: auto;
  min-width: 220px;
}

/* Formula/code box — TM operations-style */
.rc-code-box {
  background: var(--tm-paper, #f7f7f5);
  border: 1px solid var(--tm-formula-border, var(--tm-grid-10, rgba(58, 58, 56, 0.1)));
  border-radius: var(--radius-compact);
  padding: 14px 16px;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-word;
  position: relative;
  margin-bottom: 14px;
  box-shadow: none;
  line-height: 1.65;
}

/* Canonical app-variant bridge */
.tm-formula-surface.tm-formula-surface--app {
  border: 1px solid var(--tm-formula-border, var(--tm-grid-10));
  background: var(--tm-paper, #f7f7f5);
  border-radius: var(--radius-compact);
  box-shadow: none;
}

.tm-formula-surface.tm-formula-surface--app .tm-formula-surface__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.tm-formula-surface.tm-formula-surface--app .tm-copy-btn,
.tm-formula-surface.tm-formula-surface--app .rc-copy-btn {
  border: 1px solid var(--tm-formula-border, var(--tm-grid-20));
  border-radius: var(--radius-control);
  box-shadow: none;
}

.rc-code-box-compact {
  padding-top: 14px;
  padding-bottom: 14px;
}

.rc-code-box-compact>code,
.rc-code-box-compact>pre {
  display: block;
  margin: 0;
  padding-right: 132px;
}

.rc-code-box pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: inherit;
  line-height: 20px;
  border: 0;
  background: transparent;
  padding: 0;
}

.rc-code-box .tm-formula-surface__code-body {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.rc-code-box>code.tm-formula-surface__code-body {
  border: 0;
  background: transparent;
  padding: 0;
}

.rc-main-formula-box>code.tm-formula-surface__code-body,
.rc-main-formula-box>pre.tm-formula-surface__code-body {
  border: 0;
  background: transparent;
  padding: 0;
}

.rc-code-actions {
  position: static;
  display: flex;
  justify-content: flex-end;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  z-index: 2;
}

.rc-code-actions .rc-copy-btn {
  position: static;
}

.rc-explain-icon-btn {
  background: var(--tm-white, #fff);
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2));
  border-radius: var(--radius-control);
  color: var(--tm-forest, #163f2f);
  box-shadow: none;
  height: 34px;
  min-width: 34px;
  padding: 0;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rc-explain-icon-btn:hover {
  color: var(--tm-forest, #163f2f);
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3));
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08));
}

.rc-delimiter-btn {
  appearance: none;
  background: var(--bg-surface-muted);
  border-radius: var(--radius-control);
  color: var(--text-secondary);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  height: 32px;
  padding: 0 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s, color 0.2s, background 0.2s;
}

.rc-delimiter-btn:hover {
  color: var(--text-primary);
  box-shadow: 0 0 0 1px rgba(11, 143, 94, 0.5);
}

.rc-delimiter-btn:active {
  opacity: 0.85;
}

.rc-delimiter-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(11, 143, 94, 0.28);
}

/* Original formula (debug mode) */
.rc-original-box {
  background: rgba(220, 38, 38, 0.08);
  border-radius: var(--radius-compact);
  padding: 12px;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px;
  color: #dc2626;
  margin-bottom: 8px;
}

.rc-issue-text {
  color: var(--text-primary);
  font-size: 13px;
  margin-top: 6px;
  margin-bottom: 12px;
}

/* Section titles */
.rc-section {
  margin: 0;
}

.rc-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 24px;
}

.rc-section+.rc-section {
  margin-top: 16px;
}

.rc-section--alternatives+.rc-section {
  margin-top: 24px;
}

.rc-section--alternatives {
  margin-bottom: 10px;
}

/* Explanation text */
.rc-explanation {
  font-size: 16px;
  color: var(--text-primary);
  line-height: 24px;
}

/* Component cards (breakdown) */
.rc-component {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; color: var(--text-primary);
}

.rc-component-code {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  background: var(--bg-surface-muted);
  padding: 2px 8px;
  border-radius: var(--radius-compact);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.rc-component-text {
  color: var(--text-primary);
  font-size: 14px;
  margin-top: 4px;
}

/* Alternative formulas */
.rc-alt-formula {
  background: #FCFCFC;
  border-radius: var(--radius-compact);
  border: 1px solid var(--border-light);
  padding: var(--tm-result-formula-pad-y, 6px) var(--tm-result-formula-pad-x, 12px);
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 12px;
  color: var(--text-primary);
  margin-bottom: 8px;
  box-shadow: none;
}

.rc-alt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: var(--tm-result-formula-min-h, 22px);
}

.rc-main-formula {
  padding: 10px 12px;
}

.rc-main-formula-row {
  min-height: 42px;
}

.rc-main-formula-actions {
  align-self: center !important;
}

.rc-main-formula .rc-alt-actions,
.rc-main-formula-row .rc-alt-actions {
  align-self: center !important;
  justify-self: end;
}

.rc-alt-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  align-self: start;
  justify-self: end;
  min-width: max-content;
  white-space: nowrap;
  margin-left: 0;
}

.rc-alt-code {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 12px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.rc-alt-note {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  margin-bottom: 8px;
  font-family: var(--font-body);
}

.rc-copy-alt-btn {
  background: var(--tm-white, #fff);
  color: var(--tm-forest, #163f2f);
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2));
  height: 32px;
  width: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: var(--radius-control);
  font-size: 0;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.rc-copy-alt-btn:hover {
  color: var(--tm-forest, #163f2f);
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3));
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08));
}

/* Tip cards */
.rc-tip {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; color: var(--text-primary);
}

/* List items (assumptions, notes, warnings, parameters) */
.rc-list {
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.rc-list-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.5;
}

.rc-list-dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-compact);
  margin-top: 7px;
  background: var(--text-tertiary);
  flex: 0 0 auto;
}

.rc-list-dot.warning {
  background: #f59e0b;
}

.rc-list-dot.pass {
  background: #008635;
}

.rc-list-dot.fail {
  background: #dc2626;
}

.rc-list-dot.high {
  background: #dc2626;
}

.rc-list-dot.medium {
  background: #f59e0b;
}

.rc-list-dot.low {
  background: #16a34a;
}

/* Copy button — TM operations-style */
.rc-copy-btn {
  background: var(--tm-white, #fff);
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2));
  border-radius: var(--radius-control);
  height: 34px;
  min-height: 34px;
  width: 34px;
  min-width: 34px;
  padding: 0;
  color: var(--tm-forest, #163f2f);
  cursor: pointer;
  font-size: 10px;
  font-family: var(--tm-font-mono, "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: border-color 0.15s, background 0.15s;
  box-shadow: none;
}

.rc-icon-only {
  font-size: 0;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
}

.rc-copy-btn:hover {
  color: var(--tm-forest, #163f2f);
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3));
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08));
}

.rc-icon-only svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rc-icon-only.is-copied {
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.1));
  border-color: color-mix(in srgb, var(--tm-mint, #8fe5b5) 55%, var(--tm-grid-20, rgba(20, 46, 35, 0.2)));
}

.rc-icon-only.is-copy-failed {
  border-color: rgba(185, 28, 28, 0.5);
  color: #b91c1c;
}

.rc-copy-btn:active {
  opacity: 0.85;
}

/* Verify button - matches copy button style but with white text */
.run-validation-btn {
  background: var(--bg-surface-muted) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-control);
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  transition: border-color 0.2s, background 0.2s, transform 0.1s !important;
}

.run-validation-btn:hover {
  background: var(--bg-surface-soft) !important;
  border-color: var(--accent-primary) !important;
  color: var(--text-primary) !important;
  transform: none !important;
}

html:not(.dark-mode) .run-validation-btn {
  color: #334155 !important;
}

html:not(.dark-mode) .run-validation-btn:hover {
  color: #0f172a !important;
}

html:not(.dark-mode) .run-validation-btn:disabled {
  color: #64748b !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  background: #eef3f8 !important;
  opacity: 1 !important;
}

html.dark-mode .run-validation-btn,
html.dark-mode .run-validation-btn:hover {
  color: #FFFFFF !important;
}

/* Script tab row */
.rc-tab-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.rc-tab-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: var(--radius-control);
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--accent-primary);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--accent-primary) inset;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.rc-tab-btn.active {
  background: var(--accent-primary);
  color: #fff;
  box-shadow: none;
}

/* Regex examples */
.rc-examples {
  margin-bottom: 12px;
}

.rc-examples h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.rc-examples.match {
  border-left: 3px solid #008635;
  padding-left: 12px;
}

.rc-examples.no-match {
  border-left: 3px solid #dc2626;
  padding-left: 12px;
}

.rc-examples code {
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 13px;
  display: block;
  padding: 2px 0;
}

/* Section note (shortcut, compat) */
.rc-note {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.rc-verification-card {
  background: var(--bg-surface-muted);
  border-radius: var(--radius-surface);
  border: 1px solid var(--border-light);
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: none;
}

.rc-coverage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.rc-coverage-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 600;
}

.rc-coverage-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-control);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.rc-coverage-badge--verified {
  background: rgba(0, 133, 53, 0.12);
  color: #008635;
}

.rc-coverage-badge--partial {
  background: rgba(226, 85, 7, 0.12);
  color: #b45309;
}

.rc-coverage-badge--skipped {
  background: var(--bg-surface);
  color: var(--text-tertiary);
  box-shadow: 0 0 0 1px var(--border-light);
}

.rc-verification-copy {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.rc-verification-list {
  margin-top: 12px;
}

.rc-verification-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 24px;
}

.rc-validation-summary {
  display: block;
  margin-top: 8px;
  margin-bottom: 0;
}

.rc-validation-score {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-primary);
}

.rc-validation-score.score--good {
  color: #008635;
}

.rc-validation-score.score--warn {
  color: #b45309;
}

.rc-validation-score.score--bad {
  color: #dc2626;
}

.rc-validation-meta {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.rc-validation-limit {
  font-size: 14px;
  color: #b45309;
}

.rc-validation-cta {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-compact);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: none;
  text-align: center;
}

.rc-validation-cta-text {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 0;
}

.rc-validation-footnote {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
}

.rc-edge-label {
  font-weight: 600;
  color: var(--text-secondary);
}

.rc-collapsible {
  background: var(--bg-surface-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-compact);
  padding: 12px;
  margin-top: 12px;
  overflow: hidden;
  box-shadow: none;
}

.rc-collapsible+.rc-collapsible {
  margin-top: 12px;
}

.rc-collapsible-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  padding: 4px 36px 4px 0;
  min-height: 40px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.rc-collapsible-summary::-webkit-details-marker {
  display: none;
}

.rc-collapsible-summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--text-secondary);
  border-bottom: 3px solid var(--text-secondary);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.rc-collapsible[open] .rc-collapsible-summary::after {
  transform: translateY(-40%) rotate(-135deg);
}

.rc-collapsible-summary:hover::after {
  border-color: var(--text-primary);
}

.rc-collapsible-body {
  margin-top: 12px;
  padding-bottom: 0;
}

.rc-sample-table {
  width: 100%;
  min-width: 400px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-compact);
  background: var(--bg-surface-muted);
  box-shadow: none;
  overflow: hidden;
}

.rc-sample-table th,
.rc-sample-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  vertical-align: top;
}

.rc-sample-table th {
  background: var(--bg-surface-muted);
  color: var(--text-tertiary);
  font-weight: 600;
}

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

/* Action buttons row - separate card like share page */
.result-actions {
  display: grid;
  gap: var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-compact);
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  margin-top: 0;
}

.result-actions-menu {
  position: relative;
  margin: 0;
  flex: 1 1 100%;
  width: 100%;
}

.result-actions-menu-trigger {
  list-style: none;
  user-select: none;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}

.result-actions-menu-trigger::-webkit-details-marker {
  display: none;
}

.result-actions-menu[open] .result-actions-menu-trigger {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.result-actions-menu-list {
  position: absolute;
  left: 0;
  top: auto;
  bottom: calc(100% + 6px);
  z-index: 20;
  min-width: 190px;
  display: grid;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-surface);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  box-shadow: var(--shadow-lg);
}

.result-actions-menu-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  border-radius: var(--radius-compact);
  padding: 8px 10px;
  cursor: pointer;
}

.result-actions-menu-item:hover {
  background: var(--bg-surface-muted);
}

/* Danger variant — Close card */
.result-actions-menu-item--danger {
  color: #ef4444;
}

.result-actions-menu-item--danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

/* Thin divider between menu sections */
.rc-head-menu-divider {
  height: 1px;
  background: var(--border-light);
  margin: 4px 0;
}

.library-collection-input {
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 14px;
  flex: 1 1 220px;
  min-width: 180px;
}

.result-actions .action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.result-actions .action-row:last-of-type {
  justify-content: flex-end;
}

.result-actions .save-btn {
  flex: 0 0 auto;
  min-width: 180px;
  justify-content: center;
}

.library-collection-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: none;
}

/* Error card */
.result-error {
  padding: var(--space-4);
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--radius-compact);
  color: #dc2626;
}

.result-error strong {
  font-weight: 600;
}

/* ── History view mode ──
   When loading a result from history, hide the generation form and
   starter cards so only the result card is visible. */
.history-view-mode .tool-panel.active .starter-cards,
.history-view-mode .tool-panel.active form,
.history-view-mode .tool-panel.active .result-placeholder {
  display: none;
}

.history-back-btn {
  margin-bottom: var(--space-3);
}



/* partials/result-card-dark.css */
/* Dark Mode Overrides */
html.dark-mode .tool-tab:hover {
  background: var(--bg-surface-muted);
}



html.dark-mode .rc-code-box {
  background: var(--tm-formula-bg, color-mix(in srgb, var(--tm-mint, #8fe5b5) 6%, rgba(17, 26, 23, 0.86)));
  border-color: color-mix(in srgb, var(--tm-mint, #8fe5b5) 34%, rgba(255, 255, 255, 0.12));
  box-shadow: none;
}

html.dark-mode .rc-component {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; color: var(--text-primary);
}

html.dark-mode .rc-alt-formula {
  background: var(--code-box-bg-dark);
  box-shadow: none;
}

html.dark-mode .rc-tip {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; color: var(--text-primary);
}

html.dark-mode .rc-collapsible-summary::after {
  border-right-color: #CDCDCD;
  border-bottom-color: #CDCDCD;
}

html.dark-mode .rc-collapsible-summary:hover::after,
html.dark-mode .rc-collapsible[open] .rc-collapsible-summary::after {
  border-right-color: #E7E9EA;
  border-bottom-color: #E7E9EA;
}

html.dark-mode .rc-original-box {
  background: rgba(220, 38, 38, 0.12);
}

html.dark-mode .rc-copy-btn,
html.dark-mode .rc-copy-alt-btn,
html.dark-mode .rc-explain-icon-btn,
html.dark-mode .rc-delimiter-btn {
  box-shadow: none;
}

html.dark-mode .rc-copy-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: color-mix(in srgb, var(--tm-mint, #8fe5b5) 34%, rgba(255, 255, 255, 0.12));
  color: var(--tm-mint, #8fe5b5);
}

html.dark-mode .rc-copy-btn:hover,
html.dark-mode .rc-copy-alt-btn:hover,
html.dark-mode .rc-explain-icon-btn:hover,
html.dark-mode .rc-delimiter-btn:hover {
  box-shadow: 0 0 0 1px var(--accent-primary);
}

html.dark-mode .rc-copy-btn:hover {
  color: var(--tm-mint, #8fe5b5);
  border-color: color-mix(in srgb, var(--tm-mint, #8fe5b5) 48%, rgba(255, 255, 255, 0.12));
}

html.dark-mode .rc-separator-toggle,
html.dark-mode .rc-clear-btn {
  background: var(--bg-surface);
  border-color: var(--border-light);
}

html.dark-mode .rc-separator-toggle:hover {
  background: var(--bg-surface-muted);
  border-color: var(--accent-primary);
}

html.dark-mode .rc-clear-btn:hover {
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(248, 113, 113, 0.58);
  color: #ef4444;
}

html.dark-mode .rc-clear-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.28);
}

html.dark-mode .result-actions-menu-list {
  background: var(--bg-surface);
  border-color: var(--border-light);
}

html.dark-mode .result-error {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
  color: #ef4444;
}



/* partials/result-card-app-layout.css */
/* TM square control sweep for dashboard/generate/library result surfaces */
.app-layout .result-main-card,
.app-layout .rc-tool-badge,
.app-layout .rc-head-actions .rc-separator-toggle,
.app-layout .rc-head-actions .rc-clear-btn,
.app-layout .rc-head-actions .rc-explain-icon-btn,
.app-layout .rc-type-pill,
.app-layout .rc-engine-chip,
.app-layout .rc-explain-chip,
.app-layout .rc-code-box,
.app-layout .rc-code-block,
.app-layout .rc-code-actions .rc-copy-btn,
.app-layout .rc-code-actions .rc-explain-icon-btn,
.app-layout .result-actions-menu-btn,
.app-layout .result-actions-menu-list,
.app-layout .result-actions .action-btn,
.app-layout .result-actions .save-btn,
.app-layout .library-collection-input,
.app-layout .result-error,
.app-layout .result-placeholder {
  border-radius: var(--radius-surface);
}

/* TM dashboard/app generated-card unification */
.app-layout .result-main-card,
.app-layout .result-actions {
  background: var(--tm-paper, #f7f7f5);
  border: 1px solid var(--tm-grid-10, rgba(58, 58, 56, 0.1));
  box-shadow: none;
}

.app-layout .rc-badge,
.app-layout .rc-subtitle-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2));
  background: var(--tm-chip-bg, var(--tm-white, #fff));
  color: var(--tm-forest, #163f2f);
  font-size: var(--tm-tag-font-size);
  font-family: var(--tm-font-mono, "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace);
  font-weight: 500;
  letter-spacing: var(--tm-tag-letter);
  line-height: 1;
  text-transform: uppercase;
}

.app-layout .rc-subtitle-chip {
  margin-top: 6px;
  background: transparent;
  opacity: 0.76;
}

.app-layout .rc-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: var(--tm-mint, #8fe5b5);
}

.app-layout .rc-badge-excel::before {
  background: var(--tm-mint, #8fe5b5);
}

.app-layout .rc-badge-sheets::before,
.app-layout .rc-badge-sql::before {
  background: var(--tm-sem-sql, #60a5fa);
}

.app-layout .rc-badge-script::before {
  background: var(--tm-sem-script, #f6c16f);
}

.app-layout .rc-badge-regex::before {
  background: var(--tm-sem-regex, #a78bfa);
}

.app-layout .rc-badge-debug::before {
  background: #f59e0b;
}

.app-layout .rc-badge-coverage--verified::before {
  background: var(--tm-mint, #8fe5b5);
}

.app-layout .rc-badge-coverage--partial::before {
  background: #f59e0b;
}

.app-layout .rc-badge-coverage--skipped::before,
.app-layout .rc-badge-score::before,
.app-layout .rc-badge-neutral::before {
  background: color-mix(in srgb, var(--tm-forest, #163f2f) 40%, transparent);
}

.app-layout .rc-badge-excel,
.app-layout .rc-badge-sheets,
.app-layout .rc-badge-debug,
.app-layout .rc-badge-neutral,
.app-layout .rc-badge-compat {
  background: var(--tm-white, #fff);
  color: var(--tm-forest, #163f2f);
}

.app-layout .rc-code-box,
.app-layout .rc-alt-formula,
.app-layout .rc-verification-card,
.app-layout .rc-validation-cta,
.app-layout .rc-collapsible  {
  background: var(--tm-formula-bg-subtle, color-mix(in srgb, var(--tm-forest) 0.8%, var(--tm-white)));
  border: 1px solid var(--tm-formula-border, var(--tm-grid-10, rgba(58, 58, 56, 0.1)));
  box-shadow: none;
}

.app-layout .rc-tip {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; color: var(--text-primary);
}

.app-layout .rc-component-code {
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2));
  background: var(--tm-white, #fff);
  color: var(--text-secondary);
  border-radius: var(--radius-compact);
}

.app-layout .rc-explain-icon-btn,
.app-layout .rc-separator-toggle,
.app-layout .rc-copy-btn,
.app-layout .rc-copy-alt-btn,
.app-layout .run-validation-btn {
  height: 34px;
  min-height: 34px;
  min-width: 34px;
  padding: 0 12px;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2));
  background: var(--tm-white, #fff);
  color: var(--tm-forest, #163f2f);
  border-radius: var(--radius-control);
  box-shadow: none;
  font-family: var(--tm-font-mono, "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.app-layout .rc-explain-icon-btn {
  padding: 0;
  font-size: 15px;
  line-height: 1;
}

.app-layout .rc-explain-icon-btn:hover,
.app-layout .rc-separator-toggle:hover,
.app-layout .rc-copy-btn:hover,
.app-layout .rc-copy-alt-btn:hover,
.app-layout .run-validation-btn:hover {
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3));
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08));
  color: var(--tm-forest, #163f2f);
}

.app-layout .rc-actions-header {
  margin-bottom: 12px;
}

.app-layout .rc-actions-kicker {
  margin-bottom: 8px;
}

.app-layout .rc-actions-kicker,
.app-layout .rc-subtitle-chip {
  min-height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2));
  background: transparent;
  color: var(--tm-forest, #163f2f);
  font-family: var(--font-body);
  font-size: var(--tm-tag-font-size);
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  opacity: 0.76;
}

.app-layout .rc-actions-description {
  font-size: 14px;
  color: var(--text-secondary);
}

.app-layout .result-actions-menu--full {
  width: 100%;
}

.app-layout .result-actions-menu--full .result-actions-menu-trigger {
  width: 100%;
  justify-content: center;
}

.app-layout .rc-actions-footnote-row {
  width: 100%;
  margin-top: 4px;
}

.app-layout .rc-actions-footnote {
  font-size: 12px;
  color: var(--text-tertiary);
}

.app-layout .result-actions-menu-list {
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2));
  background: var(--tm-white, #fff);
  box-shadow: none;
}

.app-layout .result-actions-menu-item {
  border-radius: var(--radius-compact);
}

.app-layout .result-actions-menu-item:hover {
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08));
}

.result-placeholder {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-tertiary);
  font-size: 15px;
}


/* partials/result-card-responsive.css */

/* Touch target sizing */
@media (max-width: 768px) {
  .rc-head-actions {
    gap: 6px;
  }

  .rc-head-actions .rc-separator-toggle,
  .rc-head-actions .rc-clear-btn,
  .rc-head-actions .rc-explain-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .rc-sep-char {
    font-size: 16px;
    margin-top: -1px;
  }

  .rc-code-actions .rc-copy-btn,
  .rc-code-actions .rc-explain-icon-btn {
    height: 36px;
    min-height: 36px;
    border-radius: var(--radius-control);
    font-size: 14px;
  }

  .rc-code-actions .rc-explain-icon-btn {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }

  .rc-code-actions .rc-delimiter-btn {
    height: 36px;
    min-height: 36px;
    border-radius: var(--radius-control);
    font-size: 14px;
  }

  .rc-alt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding-right: 0;
  }

  .rc-alt-code {
    display: block;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .rc-alt-actions {
    position: static;
    align-self: center;
    justify-self: end;
    margin-left: 0;
    min-width: max-content;
  }

  .rc-alt-actions .rc-explain-icon-btn,
  .rc-alt-actions .rc-copy-alt-btn {
    height: 36px;
    min-height: 36px;
  }

  .rc-alt-actions .rc-explain-icon-btn {
    width: 36px;
    min-width: 36px;
    padding: 0;
  }

  /* Mobile Responsiveness */
  .tool-tabs {
    gap: var(--space-1);
  }

  .tool-tab {
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .result-card {
    padding: 14px;
    border-radius: var(--radius-surface);
  }

  .result-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .result-actions button,
  .result-actions summary {
    width: 100%;
  }

  .result-actions-menu {
    width: 100%;
    flex: 1 1 auto;
  }

  .result-actions-menu-list {
    position: static;
    min-width: 0;
    margin-top: 6px;
  }

  .result-actions .save-btn {
    margin-left: 0;
    min-width: 0;
  }

  .rc-section-title {
    margin-bottom: 8px;
  }

  .rc-collapsible,
  .rc-collapsible+.rc-collapsible {
    margin-top: 8px;
  }
}

@media (max-width: 420px) {
  .rc-alt-row {
    gap: 6px;
  }
}


/* partials/result-card-tm-inner.css */

/* ================================================
   APP LAYOUT - Sidebar Navigation
   ================================================ */

.app-layout {
  display: flex;
  min-height: 100vh;
  background: var(--bg-app, var(--bg-page));
}

/* Final enforcement: generated result cards must follow TM square system
   across all generate surfaces (not only .app-layout wrappers). */
body.tm-inner .result-card .result-main-card,
body.tm-inner .result-card .result-actions,
body.tm-inner .result-card .rc-code-box,
body.tm-inner .result-card .rc-alt-formula,
body.tm-inner .result-card .rc-verification-card,
body.tm-inner .result-card .rc-validation-cta,
body.tm-inner .result-card .rc-collapsible,
body.tm-inner .result-card .result-error,
body.tm-inner .result-card .result-placeholder,
body.tm-inner .result-card .result-actions-menu-list,
body.tm-inner .result-card .result-actions-menu-item,
body.tm-inner .result-card .result-actions-menu-trigger,
body.tm-inner .result-card .library-collection-input,
body.tm-inner .result-card .rc-copy-btn,
body.tm-inner .result-card .rc-copy-alt-btn,
body.tm-inner .result-card .rc-explain-icon-btn,
body.tm-inner .result-card .rc-separator-toggle,
body.tm-inner .result-card .run-validation-btn  {
  border-radius: var(--radius-surface);
  box-shadow: none !important;
}

body.tm-inner .result-card .rc-tab-btn,
body.app-layout .result-card .rc-tab-btn {
  border-radius: var(--radius-surface);
  box-shadow: none !important;
  font-family: var(--tm-font-mono, "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: 1px solid var(--tm-grid-20) !important;
  background: transparent !important;
  color: var(--tm-forest) !important;
  height: auto !important;
  min-height: 28px !important;
  padding: 4px 12px !important;
}

body.tm-inner .result-card .rc-tab-btn.active,
body.app-layout .result-card .rc-tab-btn.active {
  background: var(--tm-forest) !important;
  color: var(--tm-white, #fff) !important;
  border-color: var(--tm-forest) !important;
}

body.tm-inner .result-card .rc-badge,
body.app-layout .result-card .rc-badge,
body.tm-inner .result-card .rc-subtitle-chip,
body.app-layout .result-card .rc-subtitle-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-chip-bg, var(--tm-white, #fff)) !important;
  color: var(--tm-forest, #163f2f) !important;
  border-radius: var(--radius-surface);
  font-size: var(--tm-tag-font-size) !important;
  font-family: var(--tm-font-mono, "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tm-tag-letter) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.tm-inner .result-card .btn,
body.app-layout .result-card .btn {
  border-radius: var(--radius-control);
  box-shadow: none !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

body.tm-inner .result-card .rc-subtitle-chip,
body.tm-inner .result-card .rc-actions-kicker {
  background: transparent !important;
  opacity: 0.76;
}

body.tm-inner .result-card .rc-subtitle-chip::before,
body.tm-inner .result-card .rc-actions-kicker::before {
  display: none !important;
}

body.tm-inner .result-card .rc-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: var(--tm-mint, #8fe5b5);
}

body.tm-inner .result-card .rc-badge-sheets::before,
body.tm-inner .result-card .rc-badge-sql::before {
  background: var(--tm-sem-sql, #60a5fa);
}

body.tm-inner .result-card .rc-badge-script::before {
  background: var(--tm-sem-script, #f6c16f);
}

body.tm-inner .result-card .rc-badge-regex::before {
  background: var(--tm-sem-regex, #a78bfa);
}

body.tm-inner .result-card .rc-badge-debug::before {
  background: #f59e0b;
}

body.tm-inner .result-card .rc-badge-coverage--verified::before {
  background: var(--tm-mint, #8fe5b5);
}

body.tm-inner .result-card .rc-badge-coverage--partial::before {
  background: #f59e0b;
}

body.tm-inner .result-card .rc-badge-coverage--skipped::before,
body.tm-inner .result-card .rc-badge-score::before,
body.tm-inner .result-card .rc-badge-neutral::before {
  background: color-mix(in srgb, var(--tm-forest, #163f2f) 40%, transparent);
}

.rc-separator-toggle {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  height: 30px;
  min-height: 30px;
  cursor: pointer;
  padding: 0 8px;
}

body.tm-inner .result-card .rc-copy-btn,
body.tm-inner .result-card .rc-copy-alt-btn,
body.tm-inner .result-card .rc-explain-icon-btn,
body.tm-inner .result-card .rc-separator-toggle,
body.tm-inner .result-card .run-validation-btn {
  height: 34px !important;
  min-height: 34px !important;
  min-width: 34px !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-white, #fff) !important;
  color: var(--tm-forest, #163f2f) !important;
}

body.tm-inner .result-card .rc-copy-btn:hover,
body.tm-inner .result-card .rc-copy-alt-btn:hover,
body.tm-inner .result-card .rc-explain-icon-btn:hover,
body.tm-inner .result-card .rc-separator-toggle:hover,
body.tm-inner .result-card .run-validation-btn:hover {
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3)) !important;
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08)) !important;
  color: var(--tm-forest, #163f2f) !important;
}

/* Main + alternative formula row parity */
body.tm-inner .result-card .rc-main-formula,
body.tm-inner .result-card .rc-alt-formula {
  width: 100% !important;
  box-sizing: border-box !important;
}

body.tm-inner .result-card .rc-main-formula-row,
body.tm-inner .result-card .rc-alt-row {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--tm-result-formula-row-gap, 8px) !important;
  padding: 0 !important;
}

body.tm-inner .result-card .rc-main-formula-row .rc-alt-code {
  width: 100%;
  min-width: 0;
}

body.tm-inner .result-card .rc-main-formula-row .rc-alt-actions,
body.tm-inner .result-card .rc-main-formula .rc-alt-actions {
  align-self: center !important;
  justify-self: end !important;
  display: inline-flex;
  align-items: center;
}

body.tm-inner .result-card .rc-actions-header {
  margin-bottom: 12px;
}

body.tm-inner .result-card .rc-actions-kicker {
  margin-bottom: 8px;
}

body.tm-inner .result-card .rc-actions-description {
  font-size: 14px;
  color: var(--text-secondary);
}



/* partials/result-card-unified.css */
/* ==========================================================
   FINAL CONTROL ENFORCEMENT (generated cards)
   Keeps header/menu/clear and explain/copy controls consistent
   across light + dark and prevents legacy cascade conflicts.
   ========================================================== */
body.tm-inner .result-card .rc-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.tm-inner .result-card .rc-head-menu,
body.tm-inner .result-card .rc-head-menu.result-actions-menu {
  margin: 0;
  width: auto;
  flex: 0 0 auto;
}

body.tm-inner .result-card .rc-head-menu-trigger.result-actions-menu-trigger,
body.tm-inner .result-card .rc-clear-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  border-radius: var(--radius-surface);
  background: var(--tm-white, #fff) !important;
  color: var(--tm-forest, #163f2f) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  list-style: none;
}

body.tm-inner .result-card .rc-head-menu-trigger.result-actions-menu-trigger {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  width: 48px !important;
}

body.tm-inner .result-card .rc-head-menu-trigger.result-actions-menu-trigger::-webkit-details-marker {
  display: none;
}

body.tm-inner .result-card .rc-head-menu-trigger.result-actions-menu-trigger svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  stroke: none !important;
}

body.tm-inner .result-card .rc-clear-btn {
  font-size: 36px !important;
  font-weight: 300 !important;
  transform: translateY(-1px);
}

body.tm-inner .result-card .rc-head-menu-trigger.result-actions-menu-trigger:hover,
body.tm-inner .result-card .rc-clear-btn:hover {
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3)) !important;
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08)) !important;
  color: var(--tm-forest, #163f2f) !important;
}

body.tm-inner .result-card .rc-main-formula .rc-alt-actions,
body.tm-inner .result-card .rc-main-formula-row .rc-alt-actions,
body.tm-inner .result-card .rc-alt-row .rc-alt-actions,
body.tm-inner .result-card .rc-code-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  align-self: center !important;
}

body.tm-inner .result-card .rc-explain-icon-btn,
body.tm-inner .result-card .rc-copy-btn,
body.tm-inner .result-card .rc-copy-alt-btn {
  width: var(--tm-result-formula-action-size, 24px) !important;
  height: var(--tm-result-formula-action-size, 24px) !important;
  min-width: var(--tm-result-formula-action-size, 24px) !important;
  min-height: var(--tm-result-formula-action-size, 24px) !important;
  padding: 0 !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  border-radius: var(--radius-surface);
  background: var(--tm-white, #fff) !important;
  color: var(--tm-forest, #163f2f) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

body.tm-inner .result-card .rc-explain-icon-btn:hover,
body.tm-inner .result-card .rc-copy-btn:hover,
body.tm-inner .result-card .rc-copy-alt-btn:hover {
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3)) !important;
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08)) !important;
  color: var(--tm-forest, #163f2f) !important;
}

body.tm-inner .result-card .rc-icon-only {
  font-size: 0 !important;
}

body.tm-inner .result-card .rc-icon-only svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}

body.tm-inner .result-card .rc-copy-alt-btn svg rect,
body.tm-inner .result-card .rc-copy-btn svg rect {
  fill: none;
}

html.dark-mode body.tm-inner .result-card .rc-head-menu-trigger.result-actions-menu-trigger,
html.dark-mode body.tm-inner .result-card .rc-clear-btn,
html.dark-mode body.tm-inner .result-card .rc-explain-icon-btn,
html.dark-mode body.tm-inner .result-card .rc-copy-btn,
html.dark-mode body.tm-inner .result-card .rc-copy-alt-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #d5deeb !important;
}

html.dark-mode body.tm-inner .result-card .rc-head-menu-trigger.result-actions-menu-trigger:hover,
html.dark-mode body.tm-inner .result-card .rc-clear-btn:hover,
html.dark-mode body.tm-inner .result-card .rc-explain-icon-btn:hover,
html.dark-mode body.tm-inner .result-card .rc-copy-btn:hover,
html.dark-mode body.tm-inner .result-card .rc-copy-alt-btn:hover {
  border-color: color-mix(in srgb, var(--tm-mint, #8fe5b5) 48%, rgba(255, 255, 255, 0.12)) !important;
  background: rgba(143, 229, 181, 0.14) !important;
  color: var(--tm-mint, #8fe5b5) !important;
}

/* Final structural alignment with reference card system:
   - compact header hierarchy
   - segmented code sub-card with single border layer
   - centered action icons */
body.tm-inner .result-card .rc-head {
  align-items: flex-start !important;
  gap: 18px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tm-grid-10, rgba(58, 58, 56, 0.1));
  margin-bottom: 14px !important;
}

/* Unified generated-card contract (app shell + tm inner):
   final high-priority bridge to eliminate cascade drift and match reference layout */
:is(body.app-layout, body.tm-inner) .result-card .result-main-card {
  border-radius: var(--radius-surface);
  box-shadow: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-head {
  align-items: flex-start !important;
  gap: 16px !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--tm-grid-10, rgba(58, 58, 56, 0.1)) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-title-row {
  display: inline-flex !important;
  align-items: center !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-subtitle {
  margin-top: 10px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-subtitle-chip {
  min-height: 30px !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-head-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-head-menu.result-actions-menu {
  position: relative !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-head-menu-trigger.result-actions-menu-trigger,
:is(body.app-layout, body.tm-inner) .result-card .rc-clear-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: var(--radius-surface);
  background: transparent !important;
  color: var(--tm-forest, #163f2f) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-head-menu-trigger.result-actions-menu-trigger {
  appearance: none !important;
  list-style: none !important;
  font-size: 0 !important;
  cursor: pointer !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-head-menu-trigger.result-actions-menu-trigger::-webkit-details-marker {
  display: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-head-menu-trigger.result-actions-menu-trigger svg,
:is(body.app-layout, body.tm-inner) .result-card .rc-clear-btn svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  pointer-events: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-head-menu-trigger.result-actions-menu-trigger svg {
  stroke: none !important;
  fill: currentColor !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-head-menu-trigger.result-actions-menu-trigger:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-clear-btn:hover {
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08)) !important;
  color: var(--tm-forest, #163f2f) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box {
  border: 1px solid var(--tm-formula-border, var(--tm-grid-10, rgba(58, 58, 56, 0.1))) !important;
  border-radius: var(--radius-surface);
  background: var(--tm-paper, #f7f7f5) !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--tm-grid-10, rgba(58, 58, 56, 0.1)) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 0 10px !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-explain-icon-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-alt-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  border-radius: var(--radius-surface);
  background: var(--tm-white, #fff) !important;
  color: var(--tm-forest, #163f2f) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-icon-only {
  font-size: 0 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-icon-only svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-copy-alt-btn svg rect,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-btn svg rect {
  fill: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-explain-icon-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-alt-btn:hover {
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3)) !important;
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08)) !important;
  color: var(--tm-forest, #163f2f) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box>.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box pre.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box code.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box>code.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box>pre.tm-formula-surface__code-body {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--tm-forest, #163f2f) !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-section,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula,
:is(body.app-layout, body.tm-inner) .result-card .rc-verification-card,
:is(body.app-layout, body.tm-inner) .result-card .result-actions  {
  border-radius: var(--radius-surface);
  box-shadow: none !important;
}

html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-head-menu-trigger.result-actions-menu-trigger,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-clear-btn,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-explain-icon-btn,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-copy-btn,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-copy-alt-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #d5deeb !important;
}

html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-head-menu-trigger.result-actions-menu-trigger:hover,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-clear-btn:hover,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-explain-icon-btn:hover,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-copy-btn:hover,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-copy-alt-btn:hover {
  border-color: color-mix(in srgb, var(--tm-mint, #8fe5b5) 48%, rgba(255, 255, 255, 0.12)) !important;
  background: rgba(143, 229, 181, 0.14) !important;
  color: var(--tm-mint, #8fe5b5) !important;
}

/* Global safety net for card contexts that don't carry app-layout/tm-inner */
.result-card .rc-code-box>.tm-formula-surface__code-body,
.result-card .rc-code-box pre.tm-formula-surface__code-body,
.result-card .rc-code-box code.tm-formula-surface__code-body,
.result-card .rc-main-formula-box>code.tm-formula-surface__code-body,
.result-card .rc-main-formula-box>pre.tm-formula-surface__code-body {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.result-card .rc-head-menu-trigger.result-actions-menu-trigger,
.result-card .rc-clear-btn,
.result-card .rc-explain-icon-btn,
.result-card .rc-copy-btn,
.result-card .rc-copy-alt-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

/* Export capture guard:
   never render dropdown menu panels into html2canvas exports. */
.fg-export-capture .result-card details.result-actions-menu>.result-actions-menu-list,
.fg-export-capture .result-card details.card-head-menu>.card-head-menu-list,
.fg-export-capture .result-card details.rc-head-menu>.rc-head-menu-list {
  display: none !important;
}

.fg-export-capture .result-card .rc-clear-btn {
  display: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-head-menu-item--placeholder {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box>.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box pre.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box code.tm-formula-surface__code-body {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-code-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box .rc-code-actions {
  align-self: flex-start !important;
}

/* User-requested main-card tuning:
   - no fx mark
   - smaller "Formula Genius" heading
   - main formula row matches alternatives row style */
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box {
  padding: var(--tm-result-formula-pad-y, 8px) var(--tm-result-formula-pad-x, 12px) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-code-box-kicker {
  display: none !important;
}

/* Final cleanup requested:
   - remove subtitle chip row inside cards
   - remove in-box kickers
   - keep formula/code surfaces white like alternatives
   - compact ghost icon controls (hover reveals box) */
:is(body.app-layout, body.tm-inner) .result-card .rc-subtitle {
  display: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box-kicker {
  display: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula {
  background: var(--bg-surface);
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box-head {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  justify-content: flex-end !important;
  min-height: 30px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-row,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-row {
  align-items: flex-start !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions {
  align-self: flex-start !important;
  margin-top: 2px !important;
  gap: 4px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-explain-icon-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-explain-icon-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-copy-alt-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--tm-forest, #163f2f) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-explain-icon-btn svg,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn svg,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-explain-icon-btn svg,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-copy-alt-btn svg {
  width: 15px !important;
  height: 15px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-explain-icon-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-explain-icon-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-copy-alt-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-explain-icon-btn:focus-visible,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn:focus-visible,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-explain-icon-btn:focus-visible,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-copy-alt-btn:focus-visible {
  border-color: var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-white, #fff) !important;
  color: var(--tm-forest, #163f2f) !important;
}

html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-explain-icon-btn,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-explain-icon-btn,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-copy-alt-btn {
  border-color: transparent !important;
  background: transparent !important;
  color: #d4dceb !important;
}

html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-explain-icon-btn:hover,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn:hover,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-explain-icon-btn:hover,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-copy-alt-btn:hover,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-explain-icon-btn:focus-visible,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn:focus-visible,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-explain-icon-btn:focus-visible,
html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-alt-actions .rc-copy-alt-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

/* Universal generated-card polish across all contexts (not body-class dependent):
   - smaller header (...) and close controls
   - centered icons
   - remove empty top row in code boxes by floating actions top-right */
.result-card .rc-head-menu-trigger.result-actions-menu-trigger,
.result-card .rc-clear-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.result-card .rc-head-menu-trigger.result-actions-menu-trigger svg,
.result-card .rc-clear-btn svg {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  transform: none !important;
}

.result-card .rc-code-box {
  position: relative !important;
  padding: 10px 12px !important;
}

.result-card .rc-code-box-head {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  border: 0 !important;
  display: inline-flex !important;
  justify-content: flex-end !important;
}

.result-card .rc-code-box>.tm-formula-surface__code-body,
.result-card .rc-code-box pre.tm-formula-surface__code-body,
.result-card .rc-code-box code.tm-formula-surface__code-body {
  margin: 0 !important;
  padding-right: 74px !important;
}

/* Final lock: keep explain/copy controls pinned to top-right
   for both one-line and multi-line formula rows. */
.result-card .rc-main-formula-row,
.result-card .rc-alt-row {
  align-items: start !important;
}

.result-card .rc-main-formula-actions,
.result-card .rc-main-formula .rc-alt-actions,
.result-card .rc-main-formula-row .rc-alt-actions,
.result-card .rc-alt-row .rc-alt-actions,
.result-card .rc-code-actions {
  align-self: start !important;
  justify-self: end !important;
  margin-top: 0 !important;
}

/* Final parity lock:
   keep one shared formula/code contract for generic cards and body-scoped cards. */
.result-card .rc-code-box,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box {
  padding: 8px 12px !important;
}

.result-card .rc-main-formula-row,
.result-card .rc-alt-row,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-row,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-row {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 0 !important;
  gap: var(--tm-result-formula-row-gap, 8px) !important;
  padding: 0 !important;
}

.result-card .rc-main-formula .rc-alt-actions,
.result-card .rc-main-formula-row .rc-alt-actions,
.result-card .rc-alt-row .rc-alt-actions,
.result-card .rc-code-box .rc-code-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula .rc-alt-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-row .rc-alt-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-row .rc-alt-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box .rc-code-actions {
  position: static !important;
  margin: 0 !important;
  gap: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  justify-self: end !important;
}

.result-card .rc-main-formula-box > .rc-main-formula-actions,
.result-card .rc-main-formula-box > .rc-alt-actions,
.result-card .rc-main-formula-box > .rc-code-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .rc-main-formula-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .rc-alt-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .rc-code-actions {
  position: absolute !important;
  top: 50% !important;
  right: var(--tm-result-formula-pad-x, 12px) !important;
  transform: translateY(-50%) !important;
  align-self: auto !important;
  justify-self: auto !important;
}

.result-card .rc-main-formula-row .rc-main-formula-code,
.result-card .rc-main-formula-row .rc-alt-code,
.result-card .rc-alt-row .rc-alt-code,
.result-card .rc-code-box>code.tm-formula-surface__code-body,
.result-card .rc-code-box>pre.tm-formula-surface__code-body,
.result-card .rc-code-box code.tm-formula-surface__code-body,
.result-card .rc-code-box pre.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-row .rc-main-formula-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-row .rc-alt-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-row .rc-alt-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box>code.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box>pre.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box code.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box pre.tm-formula-surface__code-body {
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace) !important;
  font-size: var(--tm-type-code-mono, 15px) !important;
  line-height: var(--tm-result-formula-line-h, 1.28) !important;
  letter-spacing: var(--tm-type-code-mono-ls, 0) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.result-card .rc-code-box>.tm-formula-surface__code-body,
.result-card .rc-code-box pre.tm-formula-surface__code-body,
.result-card .rc-code-box code.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box>.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box pre.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box code.tm-formula-surface__code-body {
  display: block !important;
  min-height: 0 !important;
  padding-right: 0 !important;
}

.result-card .rc-main-formula-box > .rc-main-formula-code,
.result-card .rc-main-formula-box > .rc-alt-code,
.result-card .rc-main-formula-box > .tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .rc-main-formula-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .rc-alt-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .tm-formula-surface__code-body {
  padding-right: calc(var(--tm-result-formula-action-size, 24px) + 20px) !important;
}

/* Final lock: direct compact formula surfaces (legacy + current widget markup).
   Keep actions pinned at center-right with no absolute drift on mobile/old cards. */
.result-card .formula-box.formula-box--compact {
  display: flex !important;
  align-items: center !important;
  gap: var(--tm-result-formula-row-gap, 8px) !important;
}

.result-card .formula-box.formula-box--compact > #formula-text,
.result-card .formula-box.formula-box--compact > .rc-main-formula-code,
.result-card .formula-box.formula-box--compact > .tm-formula-surface__code-body,
.result-card .formula-box.formula-box--compact > code,
.result-card .formula-box.formula-box--compact > pre {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-right: 0 !important;
}

.result-card .formula-box.formula-box--compact > .rc-main-formula-row {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

.result-card .formula-box.formula-box--compact > .formula-box-actions,
.result-card .formula-box.formula-box--compact > .rc-main-formula-actions,
.result-card .formula-box.formula-box--compact > .rc-code-actions,
.result-card .formula-box.formula-box--compact > .rc-alt-actions {
  order: 2 !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
}

/* Generation Cards Refresh: keep cards separate, improve only inner sections. */
:is(body.app-layout, body.tm-inner) .result-card .result-main-card,
:is(body.app-layout, body.tm-inner) .result-card .result-actions {
  background: var(--tm-paper, #f7f7f5) !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .result-main-card {
  padding: 20px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .result-content {
  gap: 12px;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-section+.rc-section {
  margin-top: 0 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-title-mark {
  display: none !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-title {
  font-family: var(--tm-font-display, "Space Grotesk", system-ui, sans-serif) !important;
  font-size: clamp(22px, 1.7vw, 28px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-verification-title,
:is(body.app-layout, body.tm-inner) .result-card .rc-collapsible-summary,
:is(body.app-layout, body.tm-inner) .result-card .rc-section-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  border-top: 0;
  padding-top: 0;
  margin-bottom: 8px;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-section:first-child .rc-section-title {
  border-top: 0;
  padding-top: 0;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-section-stack,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-stack {
  display: grid;
  gap: 10px;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box-label,
:is(body.app-layout, body.tm-inner) .result-card .rc-component-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-coverage-label,
:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table th {
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box-label {
  color: var(--text-secondary);
  margin-bottom: 8px;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-explanation,
:is(body.app-layout, body.tm-inner) .result-card .rc-component-text,
:is(body.app-layout, body.tm-inner) .result-card .rc-verification-copy,
:is(body.app-layout, body.tm-inner) .result-card .rc-validation-meta,
:is(body.app-layout, body.tm-inner) .result-card .rc-list,
:is(body.app-layout, body.tm-inner) .result-card .rc-list-item,
:is(body.app-layout, body.tm-inner) .result-card .rc-note,
:is(body.app-layout, body.tm-inner) .result-card .rc-issue-text  {
  font-family: var(--tm-font-body, "Inter", system-ui, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--text-primary);
}
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula  {
  background: var(--tm-white, #fff) !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  padding: 14px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-tip {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; color: var(--text-primary);
}

:is(body.app-layout, body.tm-inner) .result-card .rc-verification-summary-card {
  background: transparent !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  padding: 18px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-coverage-row {
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-coverage-label {
  color: var(--text-secondary);
}

:is(body.app-layout, body.tm-inner) .result-card .rc-coverage-badge {
  border-radius: var(--radius-surface);
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2));
  background: var(--tm-white, #fff) !important;
  color: var(--tm-forest, #163f2f) !important;
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-validation-score {
  font-family: var(--tm-font-display, "Space Grotesk", system-ui, sans-serif) !important;
  font-size: clamp(42px, 4vw, 54px) !important;
  line-height: 1 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-collapsible {
  background: transparent !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  padding: 0 !important;
  margin-top: 12px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-collapsible-summary {
  min-height: 56px !important;
  padding: 14px 48px 14px 18px !important;
  margin: 0 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-collapsible-body {
  margin-top: 0 !important;
  border-top: 1px solid var(--tm-grid-10, rgba(58, 58, 56, 0.1));
  padding: 14px 18px 16px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table {
  width: 100%;
  border: 0 !important;
  background: transparent !important;
  border-collapse: collapse !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table th,
:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table td {
  border-bottom: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  padding: 12px 10px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table td {
  font-family: var(--tm-font-body, "Inter", system-ui, sans-serif);
  font-size: 14px;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-cell-mono {
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
  font-size: 12px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-status--pass {
  color: #008635;
  font-weight: 600;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-status--fail {
  color: #c2410c;
  font-weight: 600;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn.is-copied-state {
  width: auto !important;
  padding: 0 10px !important;
  border-color: var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-white, #fff) !important;
  color: var(--tm-forest, #163f2f) !important;
  transition: all 0.2s ease-out !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn.is-copied-state .rc-copied-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tm-forest);
}

html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn.is-copied-state {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
}

html.dark-mode :is(body.app-layout, body.tm-inner) .result-card .rc-code-actions .rc-copy-btn.is-copied-state .rc-copied-badge {
  color: #fff !important;
}

/* Kill switch: never show clear/X control on generated cards in app shell contexts. */
:is(body.app-layout, body.tm-inner) .result-card .rc-clear-btn {
  display: none !important;
}


/* partials/app-shell.css */
/* Hide marketing footer on app layout */
.app-layout .footer {
  display: none;
}

.app-layout {
  --app-bento-gap: var(--space-5);
  --app-bento-tight-gap: var(--space-3);
  --app-bento-section-gap: var(--space-6);
  display: flex;
  min-height: 100vh;
  background: var(--bg-page);
  gap: 0;
  padding: 0;
}

.app-shell-banner {
  z-index: 960;
}

.app-layout .site-banner .container {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

body.app-layout.has-app-shell-banner .app-sidebar {
  top: var(--app-shell-banner-offset, 0px);
  height: calc(100vh - var(--app-shell-banner-offset, 0px));
}

body.app-layout.has-app-shell-banner .app-main {
  padding-top: var(--app-shell-banner-offset, 0px);
}

.app-layout .app-bento-stack {
  display: flex;
  flex-direction: column;
  gap: var(--app-bento-section-gap);
}

.app-layout .app-bento-grid {
  gap: var(--app-bento-gap);
}

/* Sidebar */
.app-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg-shell);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  margin: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  transition: width 0.2s ease, padding 0.2s ease;
  z-index: 200;
}

.app-sidebar::-webkit-scrollbar {
  width: 0;
  display: none;
}

/* The header and account controls stay reachable while the nav owns excess height. */
.app-sidebar > :not(.sidebar-nav) { flex-shrink: 0; }
.sidebar-nav > * { flex-shrink: 0; }

/* Sidebar Header Row - deprecated, no longer used */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  gap: var(--space-2);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  padding-right: var(--space-2);
  margin-bottom: var(--space-2);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.sidebar-brand:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

.sidebar-brand-text {
  white-space: nowrap;
}

.sidebar-mobile-close-btn {
  display: none;
}



.sidebar-new-btn {
  width: 100%;
  height: 44px;
  min-height: 44px;
  flex-shrink: 0 !important;
  font-size: 14px !important;
  margin-bottom: var(--space-4);
  justify-content: center;
  display: flex;
  align-items: center;
}

.sidebar-new-btn.active {
  background: var(--accent-primary-dark);
}

/* Sidebar Navigation */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  gap: var(--space-1);
  margin-bottom: 8px;
}

.sidebar-nav-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  font-weight: 600;
  padding: var(--space-3) var(--space-3) var(--space-1);
  margin-top: var(--space-3);
}

.sidebar-nav-label:first-child {
  margin-top: 0;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-nav-item:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

.sidebar-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-primary);
}

.sidebar-nav-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.sidebar-nav-item.active svg {
  opacity: 1;
}

.sidebar-collections {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-subnav-label {
  margin-top: var(--space-2);
}

.sidebar-collection-item {
  font-size: 13px;
  padding-left: calc(var(--space-3) + 14px);
  position: relative;
}

.sidebar-collection-item::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--border-light);
}

.sidebar-collection-item.active::before {
  background: var(--accent-primary);
}

.sidebar-collection-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-tertiary);
}

.sidebar-collection-empty {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 0 var(--space-3) var(--space-2);
}

/* Sidebar Spacer */
.sidebar-spacer {
  flex: 0 0 8px;
  min-height: 8px;
}

/* Sidebar Theme Toggle */
.sidebar-theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}

.sidebar-theme-toggle:hover {
  background: var(--tm-mint-transparent);
  color: var(--text-primary);
}

.sidebar-theme-toggle .sun-icon {
  display: none;
}

html.dark-mode .sidebar-theme-toggle .sun-icon {
  display: block;
}

.sidebar-theme-toggle .moon-icon {
  display: block;
}

html.dark-mode .sidebar-theme-toggle .moon-icon {
  display: none;
}

/* Plan Info */
.sidebar-plan {
  background: var(--bg-surface-muted);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.sidebar-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.sidebar-plan-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.sidebar-plan-usage {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.sidebar-plan-progress {
  height: 4px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.sidebar-plan-bar {
  height: 100%;
  background: var(--accent-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.sidebar-plan .btn {
  width: 100%;
}

/* Simplified Usage Section (no plan badge/upgrade) */
.sidebar-usage {
  padding: 8px;
  margin-bottom: var(--space-2);
  display: grid;
  gap: 6px;
}

.sidebar-usage--hidden {
  display: none;
}

.sidebar-usage-text {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-bottom: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-usage-bar {
  height: 3px;
  background: var(--border-light);
  border-radius: 2px;
  overflow: hidden;
}

.sidebar-usage-fill {
  height: 100%;
  width: 0;
  background: var(--accent-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.sidebar-usage-reset {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-usage-mini-wrap {
  display: none;
  width: 100%;
  gap: 10px;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  justify-items: center;
}

.sidebar-usage-mini {
  --mini-progress: 0;
  --mini-track: color-mix(in srgb, var(--tm-forest) 18%, transparent);
  --mini-fill: var(--tm-mint);
  width: 32px;
  height: 32px;
  position: relative;
  border: none;
  border-radius: 50%;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.sidebar-usage-mini--hidden {
  display: none !important;
}

.sidebar-usage-mini-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tm-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.88;
  line-height: 1;
  z-index: 2;
  transform: none;
  pointer-events: none;
}

.sidebar-usage-mini[data-usage-kind="advanced"] {
  --mini-fill: var(--tm-gold);
}

html.dark-mode .sidebar-usage-mini {
  --mini-track: color-mix(in srgb, #ffffff 62%, var(--tm-paper) 38%);
}

html.dark-mode .sidebar-usage-mini-label {
  color: color-mix(in srgb, #ffffff 88%, var(--tm-mint) 12%);
  opacity: 1;
}

.sidebar-usage-mini-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sidebar-usage-mini-ring-track,
.sidebar-usage-mini-ring-fill {
  fill: none;
  stroke-width: 2.4;
}

.sidebar-usage-mini-ring-track {
  stroke: var(--mini-track);
}

.sidebar-usage-mini-ring-fill {
  stroke: var(--mini-fill);
  stroke-linecap: round;
  stroke-dasharray: 66;
  stroke-dashoffset: calc(66 * (1 - var(--mini-progress)));
}

.sidebar-usage-mini-track,
.sidebar-usage-mini-fill {
  display: none;
}


/* User Section */
.sidebar-user {
  position: relative;
}

.sidebar-user-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sidebar-user-btn:hover {
  border-color: var(--border-light);
  background: var(--bg-surface-muted);
}

.user-avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
  flex-shrink: 0;
}

.user-avatar-sm--pro {
  box-shadow: 0 0 0 2px rgba(18, 112, 74, 0.14), 0 0 0 4px rgba(116, 248, 181, 0.82);
}

.sidebar-user-name {
  flex: 1;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-chevron {
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-badge--pro {
  border-color: var(--da-line-strong);
  background: var(--da-green-soft);
  color: var(--da-green-dark);
}

.sidebar-user-btn[aria-expanded="true"] .sidebar-chevron {
  transform: rotate(180deg);
}

/* User Dropdown (bottom-up positioning) */
.sidebar-user-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 100;
}

.sidebar-user-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-email {
  padding: var(--space-2) var(--space-4);
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-plan-row,
.mobile-account-sheet-plan-row {
  padding: 0 var(--space-4) var(--space-2);
}

.dropdown-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
}

.dropdown-item {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.1s ease;
}

.dropdown-item:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

.dropdown-item--danger {
  color: #dc2626;
}

.dropdown-item--danger:hover {
  background: rgba(220, 38, 38, 0.06);
  color: #dc2626;
}

.sidebar-mobile-account {
  display: none;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
}

.sidebar-mobile-account-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-surface);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sidebar-mobile-account-btn:hover {
  border-color: var(--border-light);
  background: var(--bg-surface-muted);
}

/* On mobile, the profile button is inside the sidebar scroll — disable hover style
   since it's touch-only and hover causes a persistent "stuck" highlight on tap */
@media (max-width: 900px) {
  .sidebar-mobile-account-btn:hover {
    border-color: var(--border-subtle);
    background: var(--bg-surface);
  }
}

.sidebar-mobile-account-name {
  flex: 1;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-account-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  /* Must be above sidebar (z-index: 61) so the overlay dims correctly */
  z-index: 79;
}

.mobile-account-sheet-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-account-sheet {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Must be above sidebar (z-index: 61) — profile sheet slides over the menu */
  z-index: 80;
  background: var(--bg-shell);
  border-top: 1px solid var(--line);
  border-radius: var(--radius-shell) var(--radius-shell) 0 0;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.45);
  padding: var(--space-3) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  max-height: min(78dvh, 560px);
  overflow-y: auto;
  transform: translateY(calc(100% + 12px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.24s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.mobile-account-sheet.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-account-sheet-handle {
  width: 44px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-light);
  margin: 0 auto var(--space-3);
}

.mobile-account-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.mobile-account-sheet-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.mobile-account-sheet-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mobile-account-sheet-close:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
  border-color: var(--border-light);
}

.mobile-account-sheet-email {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  word-break: break-word;
}

.mobile-account-sheet-links {
  display: grid;
}

.mobile-account-sheet-links .dropdown-item {
  padding: var(--space-3) 0;
  font-size: 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.mobile-account-sheet-links .dropdown-item:last-child {
  border-bottom: none;
}

/* Sidebar Collapse Toggle Button */
.sidebar-collapse-row {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-3);
}

.sidebar-collapse-btn {
  position: relative;
  top: auto;
  right: auto;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  margin-bottom: 0;
  z-index: 2;
  box-shadow: none;
}

.sidebar-collapse-btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface-muted);
}

.sidebar-collapse-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Icon visibility - show collapse icon when expanded, expand icon when collapsed */
.sidebar-collapse-btn .collapse-icon {
  display: block;
}

.sidebar-collapse-btn .expand-icon {
  display: none;
}

.app-sidebar.collapsed .sidebar-collapse-btn .collapse-icon,
html.sidebar-collapsed .app-sidebar .sidebar-collapse-btn .collapse-icon {
  display: none;
}

.app-sidebar.collapsed .sidebar-collapse-btn .expand-icon,
html.sidebar-collapsed .app-sidebar .sidebar-collapse-btn .expand-icon {
  display: block;
}


/* Collapsed Sidebar State */
.app-sidebar.collapsed,
html.sidebar-collapsed .app-sidebar {
  width: 72px;
  padding: var(--space-3);
  align-items: center;
  min-height: 0;
  height: calc(100dvh - var(--app-shell-banner-offset, 0px));
  overflow: visible;
  position: sticky;
  top: 0;
}

.app-sidebar.collapsed .sidebar-text,
.app-sidebar.collapsed .sidebar-brand-text,
.app-sidebar.collapsed .sidebar-btn-text,
.app-sidebar.collapsed .sidebar-theme-label,
.app-sidebar.collapsed .sidebar-plan,
.app-sidebar.collapsed .sidebar-usage,
.app-sidebar.collapsed .sidebar-user-name,
.app-sidebar.collapsed .sidebar-chevron,
html.sidebar-collapsed .app-sidebar .sidebar-text,
html.sidebar-collapsed .app-sidebar .sidebar-brand-text,
html.sidebar-collapsed .app-sidebar .sidebar-btn-text,
html.sidebar-collapsed .app-sidebar .sidebar-theme-label,
html.sidebar-collapsed .app-sidebar .sidebar-plan,
html.sidebar-collapsed .app-sidebar .sidebar-usage,
html.sidebar-collapsed .app-sidebar .sidebar-user-name,
html.sidebar-collapsed .app-sidebar .sidebar-chevron {
  display: none;
}

.app-sidebar.collapsed .sidebar-usage-mini-wrap,
html.sidebar-collapsed .app-sidebar .sidebar-usage-mini-wrap {
  display: grid;
  position: static;
  left: auto;
  transform: none;
  bottom: auto;
  width: 100%;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
  z-index: 1;
}

.app-sidebar.collapsed .sidebar-brand,
html.sidebar-collapsed .app-sidebar .sidebar-brand {
  padding: var(--space-2);
  padding-right: var(--space-2);
  margin-bottom: var(--space-2);
  justify-content: center;
}

.app-sidebar.collapsed .sidebar-collapse-row,
html.sidebar-collapsed .app-sidebar .sidebar-collapse-row {
  justify-content: center;
  margin-bottom: var(--space-3);
}

.app-sidebar.collapsed .sidebar-new-btn,
html.sidebar-collapsed .app-sidebar .sidebar-new-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-control);
}

.app-sidebar.collapsed .sidebar-nav-item,
html.sidebar-collapsed .app-sidebar .sidebar-nav-item {
  padding: var(--space-2);
  justify-content: center;
}

.app-sidebar.collapsed .sidebar-nav-item svg,
html.sidebar-collapsed .app-sidebar .sidebar-nav-item svg {
  margin: 0;
}

.app-sidebar.collapsed .sidebar-collection-item::before,
.app-sidebar.collapsed .sidebar-collection-count,
html.sidebar-collapsed .app-sidebar .sidebar-collection-item::before,
html.sidebar-collapsed .app-sidebar .sidebar-collection-count {
  display: none;
}

.app-sidebar.collapsed .sidebar-theme-toggle,
html.sidebar-collapsed .app-sidebar .sidebar-theme-toggle {
  padding: var(--space-2);
  justify-content: center;
  width: auto;
}

.app-sidebar.collapsed .sidebar-user-btn,
html.sidebar-collapsed .app-sidebar .sidebar-user-btn {
  padding: var(--space-2);
  justify-content: center;
}

/* Fix dropdown positioning when sidebar is collapsed */
.app-sidebar.collapsed .sidebar-user-dropdown,
html.sidebar-collapsed .app-sidebar .sidebar-user-dropdown {
  left: calc(100% + 8px);
  right: auto;
  bottom: 0;
  min-width: 180px;
  width: max-content;
}

/* Tooltip for collapsed items */
.app-sidebar.collapsed .sidebar-nav-item,
html.sidebar-collapsed .app-sidebar .sidebar-nav-item {
  position: relative;
}

.app-sidebar.collapsed .sidebar-nav-item::after,
html.sidebar-collapsed .app-sidebar .sidebar-nav-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  margin-left: 8px;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 3000;
}

html.dark-mode .app-sidebar.collapsed .sidebar-nav-item::after,
html.dark-mode.sidebar-collapsed .app-sidebar .sidebar-nav-item::after {
  background: rgba(22, 22, 22, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

html.dark-mode .sidebar-collapse-btn {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.app-sidebar.collapsed .sidebar-nav-item:hover::after,
html.sidebar-collapsed .app-sidebar .sidebar-nav-item:hover::after {
  opacity: 1;
  visibility: visible;
}

.app-sidebar.collapsed .sidebar-usage-mini,
html.sidebar-collapsed .app-sidebar .sidebar-usage-mini,
html.sidebar-collapsed .app-content-toolbar [data-menu-toggle="canvas"] {
  position: relative;
}

.app-sidebar.collapsed .sidebar-usage-mini::after,
html.sidebar-collapsed .app-sidebar .sidebar-usage-mini::after,
html.sidebar-collapsed .app-content-toolbar [data-menu-toggle="canvas"]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  margin-left: 8px;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: 3000;
}

html.dark-mode .app-sidebar.collapsed .sidebar-usage-mini::after,
html.dark-mode.sidebar-collapsed .app-sidebar .sidebar-usage-mini::after,
html.dark-mode.sidebar-collapsed .app-content-toolbar [data-menu-toggle="canvas"]::after {
  background: rgba(22, 22, 22, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.app-sidebar.collapsed .sidebar-usage-mini:hover::after,
html.sidebar-collapsed .app-sidebar .sidebar-usage-mini:hover::after,
html.sidebar-collapsed .app-content-toolbar [data-menu-toggle="canvas"]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Main Content Area */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: visible;
  background: var(--bg-shell);
  border: 1px solid var(--line);
  border-left: none;
  border-radius: 0;
  min-height: 100vh;
}

.app-canvas-shell {
  flex: 1;
  display: flex;
  min-height: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 10px;
  scrollbar-width: none;
}

.app-content-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: -6px;
  margin-bottom: var(--space-2);
}

.app-topbar {
  display: none;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height-mobile);
  padding: 10px 16px;
  background: var(--bg-shell);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
  overflow: visible;
}

.sidebar-toggle {
  width: var(--header-control-size-mobile);
  height: var(--header-control-size-mobile);
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-toggle:hover {
  background: var(--bg-surface-muted);
}

.sidebar-toggle[aria-expanded="true"] {
  background: var(--bg-surface-muted);
}

.sidebar-toggle svg {
  color: var(--text-secondary);
}

.app-topbar-brand {
  display: flex;
  align-items: center;
}

.app-topbar-brand .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-control);
  background-size: 27px;
}

.app-topbar-spacer {
  flex: 1;
}

.topbar-theme-toggle {
  width: var(--header-control-size-mobile);
  height: var(--header-control-size-mobile);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.topbar-theme-toggle:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

.topbar-theme-toggle .sun-icon {
  display: none;
}

html.dark-mode .topbar-theme-toggle .sun-icon {
  display: block;
}

.topbar-theme-toggle .moon-icon {
  display: block;
}

html.dark-mode .topbar-theme-toggle .moon-icon {
  display: none;
}

.topbar-theme-toggle svg {
  width: 20px;
  height: 20px;
  color: currentColor;
}

.app-content {
  flex: 1;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 32px);
  max-width: 1160px;
  width: 100%;
  overflow: visible;
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-sm);
  scrollbar-width: none;
}

.app-main::-webkit-scrollbar,
.app-canvas-shell::-webkit-scrollbar,
.app-content::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.canvas-mobile-toggle {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.canvas-mobile-toggle:hover {
  background: var(--bg-surface-muted);
  color: var(--text-primary);
}

.canvas-mobile-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Keep side insets visually even when sidebar is collapsed. */
html.sidebar-collapsed .app-content,
.app-sidebar.collapsed~.app-main .app-content {
  margin: 0;
  max-width: 1160px;
}

/* Remove hero section styling in app layout */
.app-layout .section-hero {
  background: transparent;
  padding-top: 0;
}

html.dark-mode .app-layout .section-hero {
  background: transparent;
}

.app-layout .section {
  padding: 0;
}

.app-layout .container {
  padding: 0;
  max-width: none;
}

/* Hide tool tabs in app layout - sidebar handles navigation */
.app-layout .tool-tabs {
  display: none;
}

/* Simplify section title in app layout */
.app-layout .section-title {
  margin-bottom: var(--space-4);
}

.app-layout .section-title h1 {
  font-size: 28px;
}

.app-layout .section-title p {
  display: none;
}

.app-layout .section-title .badge {
  display: none;
}

.app-layout .section-title.app-page-hero {
  margin-bottom: var(--space-5);
}

.app-layout .section-title.app-page-hero .badge {
  display: inline-flex;
  margin-bottom: var(--space-2);
  align-items: center;
  min-height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  gap: var(--tm-tag-gap);
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-control);
  background: transparent;
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  line-height: 1;
}

.app-layout .section-title.app-page-hero h1 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin: var(--space-2) 0 var(--space-1);
}

.app-layout .section-title.app-page-hero p {
  display: block;
  font-size: 0.95rem;
  color: var(--text-tertiary);
  margin: 0;
  max-width: 60ch;
}

.app-layout .grid-2 {
  gap: var(--app-bento-gap);
}

.app-layout .dashboard-head {
  margin-bottom: 0;
  gap: var(--app-bento-gap);
  align-items: flex-start;
}

.app-layout .dashboard-title {
  margin-bottom: 0;
}

.app-layout .dashboard-stats {
  margin: 0;
  gap: var(--app-bento-gap);
}

.app-layout .dashboard-bento {
  gap: var(--app-bento-gap);
}

.app-layout .dashboard-side {
  gap: var(--app-bento-gap);
}

.app-layout .library-stack {
  gap: var(--app-bento-section-gap);
}

.app-layout .library-stats-row,
.app-layout .library-items-grid,
.app-layout .library-collections-grid {
  gap: var(--app-bento-gap);
}

.app-layout .library-history-grid {
  gap: var(--app-bento-gap);
}

.app-layout .library-history-view {
  row-gap: var(--app-bento-section-gap);
}

.app-layout .library-history-callout {
  margin-bottom: 0;
}

.app-layout .billing-meta {
  margin: 0;
}

.app-layout .billing-copy-tight {
  margin-top: var(--space-2);
}

.app-layout .billing-actions {
  margin-top: var(--space-4);
  gap: var(--app-bento-tight-gap);
}

.app-layout .billing-status {
  margin: 0;
  min-height: 20px;
}

.app-layout .billing-checkout-card {
  gap: var(--space-3);
}

.app-layout .billing-cycle-toggle {
  align-self: flex-start;
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

.app-layout .billing-plan-copy {
  margin-bottom: var(--space-1);
}

.app-layout .billing-inline-note {
  font-size: 13px;
  line-height: 1.45;
}

.app-layout .billing-divider {
  border: 0;
  border-top: 1px solid var(--tm-grid-10);
  margin: var(--space-3) 0 var(--space-2);
}

.app-layout #generate-page .section-title {
  margin-bottom: 0;
}

.app-layout #generate-page .tool-panel>.card {
  margin-bottom: 0;
  gap: 16px;
}

.app-layout #generate-page .starter-cards {
  gap: 8px;
  margin-bottom: 0;
}

.app-layout #generate-page .result-card {
  margin-top: 0;
  gap: var(--app-bento-gap);
  padding: 0;
}


/* Sidebar Overlay (mobile) */
.app-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 58;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.app-sidebar-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

/* Dark mode overrides for sidebar */
html.dark-mode .sidebar-user-dropdown {
  background: var(--bg-surface);
  border-color: var(--border-light);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

html.dark-mode .dropdown-item--danger:hover {
  background: rgba(220, 38, 38, 0.12);
}

/* Mobile Responsive */
@media (max-width: 900px) {
  html {
    min-height: 100%;
    overflow-x: hidden;
    /* Single scroll root on mobile: html scrolls, body does not */
    overflow-y: auto;
  }

  body {
    min-height: 100%;
    overflow-x: hidden;
  }

  body.app-layout {
    /* Body must NOT create a second scroll container on mobile */
    overflow: visible;
  }

  .app-layout {
    --app-bento-gap: var(--space-4);
    --app-bento-tight-gap: var(--space-3);
    --app-bento-section-gap: var(--space-5);
    --mobile-drawer-width: min(300px, calc(100vw - 90px));
    --mobile-drawer-overlap: 28px;
    --mobile-drawer-outer-gap: 0px;
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding: 0;
  }

  /* Full-height edge-to-edge drawer: desktop-matching palette and geometry. */
  .app-sidebar {
    position: fixed;
    left: 0;
    top: var(--app-shell-banner-offset, 0px);
    bottom: 0;
    height: calc(100% - var(--app-shell-banner-offset, 0px));
    max-height: calc(100dvh - var(--app-shell-banner-offset, 0px));
    margin: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    border-radius: 0;
    border: none;
    background: var(--tm-paper);
    border-right: 1px solid var(--tm-grid-20);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    width: var(--mobile-drawer-width);
    /* Respect safe area at top/bottom */
    padding-top: max(calc(env(safe-area-inset-top, 0px) + var(--space-4)), var(--space-4));
    padding-bottom: max(calc(var(--space-6) + env(safe-area-inset-bottom, 0px)),
        calc(var(--space-5) + var(--mobile-browser-bottom-inset, 0px)));
    /* Hide scrollbar visually but keep scrollability */
    scrollbar-width: none;
  }

  .app-sidebar::-webkit-scrollbar {
    display: none;
    width: 0;
  }

  /* Safety: never show a drawer-local hamburger if a stale node exists after nav swaps. */
  .app-sidebar [data-menu-toggle="canvas"] {
    display: none !important;
  }

  .sidebar-collapse-btn {
    display: none;
  }

  .sidebar-collapse-row {
    display: none;
  }

  .sidebar-brand {
    padding-right: var(--space-2);
    /* Offset for safe area already handled by sidebar padding-top */
    margin-top: var(--space-2);
  }

  .app-sidebar .sidebar-new-btn {
    margin-top: var(--space-2);
  }

  .sidebar-mobile-close-btn {
    display: none !important;
  }

  .app-sidebar.open {
    transform: translateX(0);
    /* No shadow — the canvas sits on top with its own shadow */
    box-shadow: none;
    z-index: 61;
  }

  .app-sidebar-overlay {
    /* In the floating-card design, no overlay is needed:
       the canvas slides right with pointer-events:none blocking interaction,
       and --bg-shell behind the rounded corners is the sidebar itself.
       Keep display:none so the overlay never darkens the background. */
    display: none !important;
  }

  .app-topbar {
    display: none;
  }

  .app-main {
    padding-top: var(--app-shell-banner-offset, 0px);
    border: none;
    border-radius: 0;
    height: auto;
    min-height: 100dvh;
    max-height: none !important;
    background: var(--tm-paper);
    position: relative;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.28s ease, box-shadow 0.28s ease;
    overflow: visible !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .app-canvas-shell {
    min-height: auto;
    max-height: none !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--tm-paper);
    padding: 0;
    transition: border-radius 0.24s ease;
    overflow: visible !important;
  }

  .app-content {
    height: auto;
    max-height: none !important;
    /* Top padding includes safe area inset for the status bar */
    padding: max(18px, calc(env(safe-area-inset-top, 0px) + 10px)) 16px 24px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--tm-paper);
    overflow: visible !important;
  }

  .app-canvas-shell::-webkit-scrollbar,
  .app-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .app-content-toolbar {
    display: flex;
    /* Hamburger sits at top-left when menu is closed */
    justify-content: flex-start;
    margin-top: 0;
    margin-bottom: var(--space-3);
  }

  .canvas-mobile-toggle {
    display: inline-flex !important;
  }

  /* When sidebar is open: pull the hamburger out of the transform with
     position:fixed so it stays visible on the canvas strip (top-right).
     No color changes — same appearance as when closed, just repositioned. */
  html.mobile-sidebar-open .canvas-mobile-toggle {
    position: fixed;
    top: max(env(safe-area-inset-top, 0px), 12px);
    right: 10px;
    z-index: 70;
    width: 38px;
    height: 38px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .sidebar-spacer,
  .sidebar-user {
    display: none;
  }

  .sidebar-spacer {
    display: none;
  }

  .sidebar-mobile-account {
    display: block;
    /* Normal in-flow position — user scrolls down to reach it.
       No sticky: it shouldn't hover over the nav items. */
    position: static;
    margin-top: var(--space-6);
    padding: var(--space-3) 0 calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-subtle);
  }

  .mobile-account-sheet-overlay,
  .mobile-account-sheet {
    display: block;
  }

  html.mobile-sidebar-open .app-main {
    /* Keep the shift interaction, but align geometry with desktop (no rounded card). */
    transform: translateX(var(--mobile-drawer-width));
    transform-origin: left center;
    border-radius: 0;
    overflow: hidden !important;
    border: none;
    box-shadow: none;
    position: relative;
    z-index: 62;
    touch-action: none;
    pointer-events: none;
  }

  html.mobile-sidebar-open {
    overflow: hidden !important;
    height: 100dvh;
    overscroll-behavior: none;
    background: var(--tm-paper);
  }

  /* Use overflow: clip on body (not hidden) to prevent creating a scroll
     container that interferes with the position:fixed sidebar on iOS Safari. */
  html.mobile-sidebar-open body {
    overflow: clip !important;
    height: 100dvh;
    overscroll-behavior: none;
    background: var(--tm-paper);
  }

  html.mobile-sidebar-open .app-layout {
    height: 100dvh;
    overflow: hidden;
    background: var(--tm-paper);
  }

  /* Mobile drawer-open mode: sidebar is the only vertical scroller. */
  html.mobile-sidebar-open .app-main,
  html.mobile-sidebar-open .app-canvas-shell,
  html.mobile-sidebar-open .app-content {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  html.mobile-sidebar-open .app-main::-webkit-scrollbar,
  html.mobile-sidebar-open .app-canvas-shell::-webkit-scrollbar,
  html.mobile-sidebar-open .app-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  html.mobile-sidebar-open .app-canvas-shell {
    border-radius: 0;
    overflow: hidden !important;
  }

  html.mobile-sidebar-open .app-content {
    border-radius: 0;
    overflow: hidden !important;
  }

  html.mobile-sidebar-open .app-content-toolbar {
    pointer-events: auto;
  }

  html.mobile-sidebar-open .canvas-mobile-toggle {
    pointer-events: auto;
  }

  html.mobile-sidebar-open .app-sidebar {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
  }

  /* Mobile touch targets: ensure at least 44px tap height */
  .sidebar-nav-item {
    min-height: 44px;
  }

  .sidebar-theme-toggle {
    min-height: 44px;
  }

  .sidebar-user-btn {
    min-height: 44px;
  }

  .library-item-summary {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 600px) {
  .app-layout {
    --app-bento-gap: var(--space-3);
    --app-bento-tight-gap: var(--space-2);
    --app-bento-section-gap: var(--space-4);
    /* Full-height edge drawer on smaller phones — ~23% visible strip */
    --mobile-drawer-width: calc(100vw - 90px);
    --mobile-drawer-overlap: 0px;
    --mobile-drawer-outer-gap: 0px;
  }

  .app-sidebar {
    width: var(--mobile-drawer-width);
    max-width: 340px;
    /* Fully flat — matches the 900px rule */
    border-radius: 0;
  }

  .app-content {
    padding: max(14px, calc(env(safe-area-inset-top, 0px) + 10px)) 12px 20px;
  }

  .mobile-account-sheet {
    padding-left: max(var(--space-4), calc(var(--space-3) + env(safe-area-inset-left, 0px)));
    padding-right: max(var(--space-4), calc(var(--space-3) + env(safe-area-inset-right, 0px)));
  }

  .app-layout .section-title.app-page-hero h1 {
    font-size: 1.5rem;
  }

  .app-layout .section-title.app-page-hero p {
    font-size: 0.9rem;
  }
}

/* =============================================================================
   Library Page Styles
   ============================================================================= */

/* Page Header */
.library-stack {
  gap: var(--space-6);
}

.library-header {
  margin-bottom: var(--space-2);
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: var(--space-2) 0 var(--space-1);
  line-height: 1.3;
}

.page-subtitle {
  font-size: 0.95rem;
  color: var(--text-tertiary);
  margin: 0;
}

/* Stats Row - like admin dashboard */
.library-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}

.library-stat {
  background: var(--bg-surface);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.library-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.library-stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.library-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Filter Toolbar */
.library-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  min-width: 0;
  max-width: 100%;
}

.library-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface-muted);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
}

.library-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.875rem;
  outline: none;
}

.library-search-input::placeholder {
  color: var(--text-tertiary);
}

.library-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 12px;
  min-width: 0;
  flex: 1 1 320px;
  width: 100%;
  max-width: 100%;
}

.library-filters > .tm-select-shell,
.library-filters > .library-collection-select {
  width: 100%;
}

.library-filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.library-collection-select {
  height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  min-width: 160px;
  max-width: 100%;
}

.library-collection-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.filter-chip {
  min-height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  font-weight: 500;
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--tm-forest);
  opacity: 0.74;
  cursor: pointer;
  transition: opacity 0.16s, border-color 0.16s, background-color 0.16s;
  max-width: 100%;
  line-height: 1;
}

.filter-chip:hover {
  border-color: var(--tm-grid-30);
  background: var(--tm-forest-10);
  color: var(--tm-forest);
  opacity: 1;
}

.filter-chip.active {
  background: var(--tm-forest-10);
  border-color: var(--tm-grid-30);
  color: var(--tm-forest);
  opacity: 1;
}


/* Library Items Grid */
.library-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.library-items-grid>* {
  min-width: 0;
}

.library-collections-view {
  display: none;
}

.library-history-view {
  display: none;
}

.library-history-callout {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.library-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.library-history-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}

.collection-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  padding-right: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.collection-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-primary);
}

.collection-card-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  font-weight: 600;
}

.collection-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.collection-card-meta {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.collection-card-actions {
  margin-top: auto;
}

.collection-card-actions-menu {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}

.collection-card-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.collection-card-menu-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--accent-soft);
}

.collection-card-menu-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.collection-card-menu {
  position: absolute;
  top: 34px;
  right: 0;
  width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 12;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.collection-card-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.collection-card:has(.collection-card-menu.open) {
  z-index: 20;
}

.collection-card--uncategorized {
  border-style: dashed;
}

.history-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-surface);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  min-height: 0;
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.history-card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
  transform: none;
}

.history-card:focus-visible {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md);
}

.history-card-actions-menu {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  z-index: 3;
}

.history-card-menu-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.history-card-menu-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--accent-soft);
}

.history-card-menu-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.history-card-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 180px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  z-index: 20;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.history-card-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.history-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding-right: 44px;
}

.history-tool-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  padding: 3px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--bg-surface);
  white-space: nowrap;
}

.history-tool-badge.formula {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.history-tool-badge.explain {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.history-tool-badge.debug {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.history-tool-badge.sql {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.history-tool-badge.script {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.history-tool-badge.regex {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.history-collection-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(99, 102, 241, 0.9);
  background: rgba(99, 102, 241, 0.08);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-time {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.history-card-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-card-prompt {
  margin: 2px 44px 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.history-card-meta {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.history-date {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* Fixed-height Library Item Cards */
.library-item-card {
  display: flex;
  flex-direction: column;
  min-height: 184px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  padding: var(--space-4);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  overflow: visible;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.library-item-card:hover {
  transform: none;
  box-shadow: var(--shadow-md);
  border-color: var(--accent-primary);
  z-index: 2;
}

.library-item-link {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.library-item-card > *,
.library-item-link > * {
  min-width: 0;
  max-width: 100%;
  word-break: break-all;
}

.library-item-actions {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
}

.library-card-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.library-card-menu-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--accent-soft);
}

.library-card-menu-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.library-card-menu {
  position: absolute;
  top: 34px;
  right: 0;
  width: 240px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 10;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.library-card-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.menu-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.menu-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  font-weight: 600;
}

.menu-collection-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 160px;
  overflow-y: hidden;
}

.menu-collection-list.is-scrollable {
  overflow-y: auto;
}

.menu-collection-item {
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.menu-collection-item:hover {
  border-color: var(--accent-primary);
  background: var(--accent-soft);
}

.menu-collection-item.active {
  border-color: var(--accent-primary);
  background: var(--accent-soft);
  color: var(--accent-primary);
}

.menu-action {
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.menu-action:hover {
  border-color: var(--accent-primary);
  background: var(--accent-soft);
  color: var(--accent-primary);
}

.menu-action.primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-inverse);
}

.menu-action.primary:hover {
  background: var(--accent-primary-dark);
  border-color: var(--accent-primary-dark);
  color: var(--text-inverse);
}

.menu-action.danger {
  border-color: rgba(220, 38, 38, 0.35);
  color: #B91C1C;
}

.menu-action.danger:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.5);
}

.menu-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.menu-action.is-hidden {
  display: none;
}

.library-card-menu .menu-action,
.library-card-menu .menu-action.primary,
.library-card-menu .menu-action.danger {
  min-height: 42px;
  padding: 10px 14px;
  border: 0 !important;
  border-radius: var(--radius-surface);
  border-bottom: 1px solid var(--tm-grid-20) !important;
  background: transparent !important;
  color: var(--tm-forest) !important;
  display: flex;
  align-items: center;
}

.library-card-menu .menu-action:hover {
  background: transparent !important;
  border-color: var(--tm-grid-30) !important;
}

.library-card-menu .menu-action.is-hidden {
  display: none !important;
}

.library-card-menu .menu-delete-confirm {
  padding: 12px 0 0;
  border-radius: var(--radius-surface);
  background: transparent !important;
  border-top: 1px solid var(--tm-grid-20);
}

.library-card-menu .menu-delete-actions .menu-action {
  border: 1px solid var(--tm-grid-20) !important;
  border-radius: var(--radius-surface);
  padding: 8px 10px;
  background: var(--tm-paper) !important;
}

.menu-new-form {
  display: none;
  gap: var(--space-2);
}

.menu-new-form.is-visible {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.menu-rename-form {
  display: none;
  gap: var(--space-2);
}

.menu-rename-form.is-visible {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.menu-input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 13px;
}

.menu-new-form .menu-action,
.menu-rename-form .menu-action {
  white-space: nowrap;
}

.menu-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.menu-divider {
  height: 1px;
  background: var(--border-light);
}

.menu-empty {
  font-size: 12px;
  color: var(--text-tertiary);
}

.menu-collection-picker {
  display: block;
}

.menu-collection-select {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 0 42px 0 14px;
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-control);
  background-color: var(--tm-paper);
  color: var(--tm-forest);
  font-family: var(--tm-font-body);
  font-size: 0.95rem;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 4.75 7 9.25l4.5-4.5' stroke='%2397F5B4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}

.menu-collection-select:focus {
  outline: none;
  border-color: var(--tm-grid-30);
  box-shadow: none;
}

.menu-collection-select option {
  color: var(--tm-forest);
  background: var(--tm-paper);
}

.menu-delete-confirm {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(220, 38, 38, 0.06);
}

.menu-delete-confirm.is-visible {
  display: flex;
}

.menu-delete-text {
  font-size: 12px;
  color: #B91C1C;
  font-weight: 600;
}

.menu-delete-actions {
  display: flex;
  gap: var(--space-2);
}

@media (hover: hover) {
  .library-item-actions {
    opacity: 0;
    pointer-events: auto;
    transition: opacity 0.15s ease;
  }

  .library-item-card:hover .library-item-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Narrow layouts expose card actions directly; they cannot rely on hover to receive clicks. */
@media (max-width: 900px) {
  .app-layout .library-item-actions {
    opacity: 1;
    pointer-events: auto;
  }
}

.library-item-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: rgba(0, 133, 53, 0.08);
  color: var(--accent-primary);
  width: fit-content;
  white-space: nowrap;
}

.library-item-badge.sql {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.library-item-badge.script {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.library-item-badge.regex {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.library-item-badge.explain {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.library-item-badge.debug {
  color: var(--accent-primary);
  border-color: rgba(0, 133, 53, 0.25);
  background: rgba(0, 133, 53, 0.08);
}

.library-item-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
  padding-right: 44px;
  min-width: 0;
}

.library-item-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  min-width: 0;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.library-item-summary {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.library-item-date {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-bottom: 0;
}

.library-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  margin-top: auto;
  padding-top: var(--space-3);
}

.library-item-collection {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-tag-gap);
  min-height: var(--tm-tag-height);
  height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  border-radius: var(--radius-compact);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-chip-bg);
  color: color-mix(in srgb, var(--tm-forest) 82%, transparent);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  font-weight: 500;
  letter-spacing: var(--tm-tag-letter);
  line-height: 1;
  white-space: nowrap;
  max-width: min(58%, 240px);
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.library-item-collection::before {
  content: "";
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  flex: 0 0 var(--tm-tag-dot-size);
  border-radius: 0;
  background: color-mix(in srgb, var(--tm-forest) 40%, transparent);
}

.library-item-collection.is-uncategorized {
  color: color-mix(in srgb, var(--tm-forest) 62%, transparent);
  border-style: dashed;
}

.library-item-collection.is-uncategorized::before {
  background: color-mix(in srgb, var(--tm-forest) 28%, transparent);
}

/* Empty state */
.library-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-light);
}

.library-empty h3 {
  font-size: 1.125rem;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.library-empty p {
  color: var(--text-tertiary);
  font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .library-stack {
    gap: var(--space-4);
  }

  .library-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .library-toolbar {
    padding: var(--space-3);
    gap: var(--space-3);
  }

  .library-search {
    min-width: 0;
    max-width: none;
    flex: 1 1 100%;
  }

  .library-filters {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    row-gap: 10px;
  }

  .library-filter-chip-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .library-filter-chip-row .filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .library-items-grid,
  .library-collections-grid,
  .library-history-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .library-item-card {
    height: auto;
    min-height: 188px;
  }

  .history-card {
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .library-stack {
    gap: var(--space-3);
  }

  .library-header {
    margin-bottom: var(--space-1);
  }

  .page-title {
    font-size: 1.5rem;
    margin: 0 0 var(--space-1);
  }

  .page-subtitle {
    font-size: 0.9rem;
  }

  .library-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .library-search {
    max-width: none;
    width: 100%;
    padding: 10px var(--space-3);
  }

  .library-filters {
    flex: 0 0 auto;
    row-gap: var(--space-2);
  }

  .library-filter-chip-row {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
    row-gap: var(--space-2);
  }

  .library-collection-select,
  .library-filter-chip-row .filter-chip {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .library-card-menu {
    width: min(220px, calc(100vw - 56px));
  }

  .collection-card-menu {
    width: min(220px, calc(100vw - 56px));
  }

  .library-items-grid,
  .library-collections-grid,
  .library-history-grid {
    gap: var(--space-2);
  }

  .history-card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .history-card-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .library-stats-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .library-stat {
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: var(--space-3);
    box-shadow: var(--shadow-hairline);
  }

  .library-stat-label {
    margin-bottom: 0;
    font-size: 0.6875rem;
  }

  .library-stat-value {
    font-size: 1.125rem;
  }

  .history-card {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .history-card-title {
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .library-item-summary {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .library-item-meta {
    flex-wrap: wrap;
  }

  .library-item-collection {
    max-width: 100%;
  }

  .library-items-grid {
    overflow-x: hidden;
  }

  .library-item-title,
  .library-item-summary {
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  .library-empty {
    padding: var(--space-8) var(--space-4);
  }
}

/* ── Technical Minimalist parity for authenticated app shell ─────────── */
.app-layout {
  --tm-brand-lockup-offset-y: 2px;
  --tm-brand-wordmark-offset-y: -2px;
}

.app-layout .tm-nav-logo-text {
  display: inline-flex;
  flex-direction: column;
  transform: translateY(var(--tm-brand-lockup-offset-y));
}

.app-layout .tm-nav-wordmark {
  transform: translateY(var(--tm-brand-wordmark-offset-y));
}

.app-layout .app-sidebar,
.app-layout .app-main {
  background: var(--tm-paper);
  border-color: var(--tm-grid-20);
}

.app-layout .card,
.app-layout .tool-panel>.card,
.app-layout .result-card,
.app-layout .starter-card,
.app-layout .library-toolbar,
.app-layout .library-stat,
.app-layout .library-item-card,
.app-layout .collection-card,
.app-layout .history-card,
.app-layout .library-history-callout,
.app-layout .library-empty,
.app-layout .sidebar-user-btn,
.app-layout .sidebar-user-dropdown,
.app-layout .mobile-account-sheet,
.app-layout .mobile-account-sheet-email,
.app-layout .mobile-account-sheet-close,
.app-layout .sidebar-mobile-account-btn,
.app-layout .sidebar-theme-toggle {
  border-radius: var(--radius-surface);
  box-shadow: none;
  background: var(--tm-paper);
  border-color: var(--tm-grid-20);
}

.app-layout .sidebar-theme-toggle:hover {
  background: var(--tm-mint-transparent);
}

.app-layout .sidebar-nav-item:hover,
.app-layout .sidebar-user-btn:hover,
.app-layout .sidebar-mobile-account-btn:hover,
.app-layout .canvas-mobile-toggle:hover,
.app-layout .starter-card:hover,
.app-layout .library-item-card:hover,
.app-layout .collection-card:hover,
.app-layout .history-card:hover {
  background: var(--tm-grid-10);
  border-color: var(--tm-grid-30);
}

.app-layout .sidebar-nav-item,
.app-layout .sidebar-new-btn {
  border-radius: var(--radius-control);
}

.app-layout .sidebar-user-btn,
.app-layout .sidebar-mobile-account-btn {
  border-color: transparent;
  background: transparent;
}

.app-layout .sidebar-user-btn:hover,
.app-layout .sidebar-mobile-account-btn:hover {
  border-color: transparent;
  background: var(--tm-grid-10);
}

.app-layout .user-avatar-sm {
  background: color-mix(in srgb, var(--tm-mint) 30%, var(--tm-paper));
  color: var(--tm-forest);
  border: 1px solid var(--tm-grid-20);
  border-radius: 50%;
}

.app-layout .sidebar-nav-item.active,
.app-layout .tool-tab.active {
  background: var(--tm-forest-10);
  color: var(--tm-forest);
}

.app-layout .tool-tab.active {
  box-shadow: none;
  border-color: var(--tm-grid-30);
}

.app-layout .sidebar-nav-label,
.app-layout .sidebar-usage-text,
.app-layout .sidebar-usage-reset,
.app-layout .sidebar-usage-mini-label {
  font-family: var(--tm-font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-layout textarea,
.app-layout select,
.app-layout input[type="text"],
.app-layout input[type="email"],
.app-layout input[type="search"],
.app-layout .input,
.app-layout .library-search,
.app-layout .library-collection-select {
  border-radius: var(--radius-control);
  border-color: var(--tm-grid-20);
  background: var(--tm-paper);
  box-shadow: none;
  color: var(--tm-forest);
}


.app-layout .tm-select-shell {
  position: relative;
  width: 100%;
}

.app-layout .library-filters > .tm-select-shell {
  width: 100%;
}

.app-layout .tm-select-shell > select.tm-select-native {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-layout .tm-select-trigger {
  width: 100%; min-height: 44px; border: 1px solid var(--border-strong);
  background: var(--bg-surface); color: var(--text-primary); box-shadow: none;
  border-radius: var(--radius-control); padding: 10px 12px;
  text-align: left; display: flex; align-items: center; position: relative;
  cursor: pointer; box-sizing: border-box; font: 14px/1.5 var(--font-body);
}
.app-layout .tm-select-trigger:disabled { opacity: .6; cursor: not-allowed; }

.app-layout .tm-select-trigger::after {
  content: "";
  position: static;
  flex: 0 0 14px;
  margin-left: 12px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 4.75 7 9.25l4.5-4.5' stroke='%231A3C2B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.app-layout .library-filters .tm-select-trigger {
  min-height: 46px;
  font-size: 1rem;
  padding-right: 12px;
}

.app-layout .tm-sem-sql {
  --tm-sem-dot-color: var(--tm-sem-sql);
}

.app-layout .tm-sem-script {
  --tm-sem-dot-color: var(--tm-sem-script);
}

.app-layout .tm-sem-regex {
  --tm-sem-dot-color: var(--tm-sem-regex);
}

.app-layout .tm-sem-sql::before,
.app-layout .tm-sem-script::before,
.app-layout .tm-sem-regex::before {
  display: inline-block;
}

.app-layout .tm-select-trigger:focus-visible,
.app-layout .tm-select-shell.is-open .tm-select-trigger {
  outline: none;
  border-color: var(--tm-forest) !important;
}

.app-layout .tm-select-trigger-label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-layout .tm-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 80;
  display: none;
  padding: 6px;
  border: 1px solid var(--tm-grid-20) !important;
  background: var(--bg-surface);
  border-radius: var(--radius-compact);
  box-shadow: var(--shadow-sm);
}

.app-layout .tm-select-shell.is-open .tm-select-menu {
  display: grid;
  gap: 4px;
}

.app-layout .tm-select-option {
  width: 100%;
  min-height: 44px;
  border: 1px solid transparent;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.app-layout .tm-select-option:hover,
.app-layout .tm-select-option:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
  background: var(--tm-grid-10) !important;
  border-color: var(--tm-grid-30) !important;
}

.app-layout .tm-select-option.is-selected {
  border-color: var(--tm-grid-30) !important;
}

.app-layout textarea:focus,
.app-layout select:focus,
.app-layout input[type="text"]:focus,
.app-layout input[type="email"]:focus,
.app-layout input[type="search"]:focus,
.app-layout .input:focus,
.app-layout .library-search:focus-within,
.app-layout .library-collection-select:focus {
  outline: none;
  border-color: var(--tm-forest);
  box-shadow: none;
}


html.dark-mode .app-layout .tm-select-trigger::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 4.75 7 9.25l4.5-4.5' stroke='%239EFFBF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.app-layout .btn {
  border-radius: var(--radius-control);
  box-shadow: none;
}

.app-layout .btn-primary {
  background: var(--tm-forest);
  border-color: var(--tm-forest);
  color: var(--tm-paper);
}

.app-layout .btn-primary:hover {
  background: color-mix(in srgb, var(--tm-forest) 92%, black);
  border-color: color-mix(in srgb, var(--tm-forest) 92%, black);
  color: var(--tm-paper);
}

.app-layout .btn-secondary,
.app-layout .btn-ghost {
  background: transparent;
  border-color: var(--tm-grid-30);
  color: var(--tm-forest);
}

.app-layout .btn-secondary:hover,
.app-layout .btn-ghost:hover {
  background: var(--tm-grid-10);
  border-color: var(--tm-grid-30);
}

.app-layout .btn-danger {
  background: transparent;
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.55);
}

html.dark-mode .app-layout .btn-danger {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.45);
}

/* Canvas hamburger: icon-only control in content area (expanded + collapsed). */
.app-layout .app-content-toolbar {
  margin-left: 0;
  margin-bottom: var(--space-4);
}

.app-layout .app-content-toolbar .canvas-mobile-toggle,
.app-layout .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--radius-control);
  justify-content: flex-start;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.app-layout .app-content-toolbar .canvas-mobile-toggle:hover,
.app-layout .app-content-toolbar .canvas-mobile-toggle:focus-visible,
.app-layout .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle:hover,
.app-layout .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle:focus-visible,
.app-layout .app-content-toolbar .canvas-mobile-toggle[aria-expanded="true"],
.app-layout .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle[aria-expanded="true"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--accent-primary);
}

.app-layout .app-content-toolbar .canvas-mobile-toggle:hover svg,
.app-layout .app-content-toolbar .canvas-mobile-toggle:focus-visible svg,
.app-layout .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle:hover svg,
.app-layout .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle:focus-visible svg,
.app-layout .app-content-toolbar .canvas-mobile-toggle[aria-expanded="true"] svg,
.app-layout .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle[aria-expanded="true"] svg {
  color: var(--accent-primary);
  stroke: currentColor;
}

/* Keep floating-card mobile-open control larger/tappable. */
html.mobile-sidebar-open .app-layout .app-content-toolbar .canvas-mobile-toggle,
html.mobile-sidebar-open .app-layout .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle {
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
}

/* Dashboard cleanup: remove remaining rounded legacy surfaces */
.app-layout .stat-card,
.app-layout .card,
.app-layout .dashboard-recent-item,
.app-layout .dashboard-recent-empty,
.app-layout .switch-tool-link,
.app-layout .tour-popover,
.app-layout .tour-highlight,
.app-layout .dashboard-recent-type {
  border-radius: var(--radius-surface);
}

.app-layout .stat-card,
.app-layout .card,
.app-layout .dashboard-recent-item,
.app-layout .dashboard-recent-empty,
.app-layout .tour-popover {
  box-shadow: none;
}

.app-layout .stat-card,
.app-layout .card,
.app-layout .dashboard-recent-item,
.app-layout .dashboard-recent-empty {
  border-color: var(--tm-grid-20);
  background: var(--tm-paper);
}

.app-layout .dashboard-recent-item:hover {
  background: var(--tm-grid-10);
  border-color: var(--tm-grid-30);
  transform: none;
  box-shadow: none;
}

/* ── Dashboard Technical Minimalist Alignments ── */

.app-layout .dashboard-title h1 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-display-lg);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--tm-forest);
  margin: 0;
  line-height: 1;
}

.app-layout .dashboard-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.app-layout .dashboard-title>.badge.tm-chip {
  border: 1px solid color-mix(in srgb, var(--tm-forest) 20%, transparent);
  background: transparent;
  border-radius: var(--radius-control);
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tm-forest) 70%, transparent);
  padding: 4px 8px;
  height: auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.app-layout .dashboard-title p {
  font-family: var(--tm-font-body);
  font-size: 15px;
  color: color-mix(in srgb, var(--tm-forest) 70%, transparent);
  margin: 0;
  line-height: 1.6;
}

/* Removed overriding block to rely on base.css and exact matching of markup */

.app-layout .stats-grid {
  gap: var(--space-4) !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-4) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.app-layout .stat-card {
  padding: 24px 20px;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 180px;
  border-radius: var(--radius-surface);
  box-shadow: none !important;
  border: 1px solid var(--tm-grid-20) !important;
  background: var(--tm-white, #fff);
}

.app-layout .stat-card>p.muted {
  font-family: var(--tm-font-body);
  font-size: 14px;
  color: color-mix(in srgb, var(--tm-forest) 70%, transparent);
  margin: 0;
  line-height: 1.4;
}

.app-layout .stat-card>strong {
  font-family: var(--tm-font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--tm-forest);
  line-height: 1;
  margin: 0;
}

.app-layout .stat-card>span.muted {
  font-family: var(--tm-font-body);
  font-size: 13px;
  color: color-mix(in srgb, var(--tm-forest) 70%, transparent);
  margin: 0;
  line-height: 1.5;
}

.app-layout .dashboard-title .dashboard-status-dot {
  display: block;
  width: 8px;
  height: 8px;
  background: var(--tm-mint, #8fe5b5);
}

.app-layout .dashboard-email-row {
  margin-top: 8px;
}

.app-layout .dashboard-user-chip svg {
  width: 13px;
  height: 13px;
}

.app-layout .dashboard-hero-actions .btn {
  min-height: 44px;
  padding: 0 16px;
}

.app-layout .dashboard-quick-actions {
  padding: 0;
  box-shadow: none;
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-compact);
}

.app-layout .dashboard-quick-actions-head {
  border-bottom: 1px solid var(--tm-grid-20);
  padding: 24px 24px 16px;
}

.app-layout .dashboard-quick-actions-head h3 {
  font-family: var(--tm-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--tm-forest);
  margin: 0;
  letter-spacing: -0.02em;
}

.app-layout .dashboard-action-grid {
  gap: 8px;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.app-layout .dashboard-recent h3,
.app-layout .dashboard-side h3 {
  font-family: var(--tm-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--tm-forest);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

.dashboard-action-btn {
  border-radius: var(--radius-control);
  font-family: var(--tm-font-mono) !important;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 400 !important;
  padding: 10px 16px !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
}

.dashboard-action-btn-solid {
  background: var(--tm-forest) !important;
  border: 1px solid var(--tm-forest) !important;
  color: var(--tm-white) !important;
  /* Note: tm-white will use white in dark mode or paper in light mode effectively if needed, but #fff is safer if we want it white always. But the light mode mock uses white text. Wait, my base.css tm-white is perfect. */
}

.dashboard-action-btn-outline {
  background: transparent !important;
  border: 1px solid var(--tm-grid-20) !important;
  color: var(--tm-forest) !important;
}

.dashboard-action-btn-outline:hover {
  background: color-mix(in srgb, var(--tm-forest) 5%, transparent) !important;
}

.app-layout .dashboard-recent-footer {
  margin-top: 12px;
  padding-top: 12px;
}

.app-layout .dashboard-recent-empty {
  border-style: solid;
}

.app-layout .tour-overlay {
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(1px);
}

.app-layout .tour-popover {
  background: var(--tm-paper);
  border: 1px solid var(--tm-grid-20);
  color: var(--tm-forest);
}

.app-layout .tour-title {
  font-family: var(--tm-font-display);
  font-weight: 600;
  color: var(--tm-forest);
}

.app-layout .tour-body {
  color: color-mix(in srgb, var(--tm-forest) 78%, transparent);
}

.app-layout .tour-highlight {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tm-mint) 62%, transparent);
}

/* Canonical formula surface app density */
.app-layout .tm-formula-surface.tm-formula-surface--app {
  --tm-formula-pad-x: var(--space-3);
  --tm-formula-pad-y: var(--space-3);
  --tm-formula-code-size: 13px;
  --tm-formula-code-line: 1.6;
}

@media (min-width: 901px) {
  .app-content-toolbar {
    margin-left: 0;
  }

  .app-content-toolbar .canvas-mobile-toggle,
  .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: var(--radius-control);
    justify-content: flex-start;
    align-items: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .app-content-toolbar .canvas-mobile-toggle:hover,
  .app-content-toolbar .canvas-mobile-toggle:focus-visible,
  .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle:hover,
  .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle:focus-visible,
  .app-content-toolbar .canvas-mobile-toggle[aria-expanded="true"],
  .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle[aria-expanded="true"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--accent-primary);
  }

}

/* Collapsed canvas toggle: icon-only hover (no rounded tile) + left-edge alignment. */
html.sidebar-collapsed .app-content-toolbar,
.app-sidebar.collapsed~.app-main .app-content-toolbar {
  margin-left: 0;
}

html.sidebar-collapsed .app-content-toolbar .canvas-mobile-toggle,
html.sidebar-collapsed .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle,
.app-sidebar.collapsed~.app-main .app-content-toolbar .canvas-mobile-toggle,
.app-sidebar.collapsed~.app-main .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: var(--radius-control);
  justify-content: flex-start;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html.sidebar-collapsed .app-content-toolbar .canvas-mobile-toggle:hover,
html.sidebar-collapsed .app-content-toolbar .canvas-mobile-toggle:focus-visible,
html.sidebar-collapsed .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle:hover,
html.sidebar-collapsed .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle:focus-visible,
html.sidebar-collapsed .app-content-toolbar .canvas-mobile-toggle[aria-expanded="true"],
html.sidebar-collapsed .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle[aria-expanded="true"],
.app-sidebar.collapsed~.app-main .app-content-toolbar .canvas-mobile-toggle:hover,
.app-sidebar.collapsed~.app-main .app-content-toolbar .canvas-mobile-toggle:focus-visible,
.app-sidebar.collapsed~.app-main .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle:hover,
.app-sidebar.collapsed~.app-main .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle:focus-visible,
.app-sidebar.collapsed~.app-main .app-content-toolbar .canvas-mobile-toggle[aria-expanded="true"],
.app-sidebar.collapsed~.app-main .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle[aria-expanded="true"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--accent-primary);
}
body.app-layout .result-card .rc-alt-formula,
body.app-layout .result-card .rc-verification-card,
body.app-layout .result-card .rc-validation-cta,
body.app-layout .result-card .rc-collapsible,
body.app-layout .result-card .result-actions,
body.app-layout .result-card .result-actions-menu-list,
body.app-layout .result-card .result-actions-menu-item,
body.app-layout .result-card .result-actions-menu-trigger,
body.app-layout .result-card .library-collection-input,
body.app-layout .result-card .rc-badge,
body.app-layout .result-card .rc-copy-btn,
body.app-layout .result-card .rc-copy-alt-btn,
body.app-layout .result-card .rc-explain-icon-btn,
body.app-layout .result-card .rc-separator-toggle,
body.app-layout .result-card .run-validation-btn  {
  border-radius: var(--radius-surface);
}

body.app-layout .result-card .combo-separator {
  height: 1px;
  background: var(--tm-grid-10, rgba(58, 58, 56, 0.1));
  margin: 4px 0;
  pointer-events: none;
}
body.app-layout .result-card .rc-alt-formula,
body.app-layout .result-card .rc-verification-card,
body.app-layout .result-card .rc-validation-cta,
body.app-layout .result-card .rc-collapsible,
body.app-layout .result-card .result-actions,
body.app-layout .result-card .result-actions-menu-list  {
  box-shadow: none !important;
  border: 1px solid var(--tm-formula-border, var(--tm-grid-10, rgba(58, 58, 56, 0.1))) !important;
  background: var(--tm-formula-bg-subtle, color-mix(in srgb, var(--tm-forest) 0.8%, var(--tm-white))) !important;
}

body.app-layout .result-card .rc-badge {
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-white, var(--tm-paper)) !important;
  color: var(--tm-forest, #163f2f) !important;
  font-family: var(--tm-font-mono, "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.app-layout .result-card .rc-copy-btn,
body.app-layout .result-card .rc-copy-alt-btn,
body.app-layout .result-card .rc-explain-icon-btn,
body.app-layout .result-card .rc-separator-toggle,
body.app-layout .result-card .run-validation-btn {
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-white, var(--tm-paper)) !important;
  color: var(--tm-forest, #163f2f) !important;
  box-shadow: none !important;
}

/* Separator control should match close button base style, with its own hover affordance */
body.app-layout .result-card .rc-separator-toggle {
  border: 1px solid var(--border-light) !important;
  background: var(--bg-surface) !important;
  color: var(--text-tertiary) !important;
}

body.app-layout .result-card .rc-separator-toggle .rc-sep-char {
  color: inherit !important;
  font-weight: 500;
  margin-top: 0;
}

/* Formula-box copy/explain controls: match close/separator base border + icon tone */
body.app-layout .result-card .rc-copy-btn,
body.app-layout .result-card .rc-copy-alt-btn,
body.app-layout .result-card .rc-explain-icon-btn {
  border: 1px solid var(--border-light) !important;
  background: var(--bg-surface) !important;
  color: var(--text-tertiary) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.app-layout .result-card .rc-copy-btn svg,
body.app-layout .result-card .rc-copy-alt-btn svg,
body.app-layout .result-card .rc-explain-icon-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.app-layout .result-card .result-actions-menu-trigger svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
  stroke: none !important;
}

body.app-layout .result-card .rc-separator-toggle:hover,
body.app-layout .result-card .rc-separator-toggle:focus-visible {
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3)) !important;
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08)) !important;
  color: var(--tm-forest, #163f2f) !important;
}

body.app-layout .result-card .run-validation-btn:hover,
body.app-layout .result-card .run-validation-btn:focus-visible {
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3)) !important;
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08)) !important;
  color: var(--tm-forest, #163f2f) !important;
}

body.app-layout .result-card .rc-copy-btn:hover,
body.app-layout .result-card .rc-copy-btn:focus-visible,
body.app-layout .result-card .rc-copy-alt-btn:hover,
body.app-layout .result-card .rc-copy-alt-btn:focus-visible,
body.app-layout .result-card .rc-explain-icon-btn:hover,
body.app-layout .result-card .rc-explain-icon-btn:focus-visible {
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3)) !important;
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08)) !important;
  color: var(--tm-forest, #163f2f) !important;
}

html.dark-mode body.app-layout .result-card .run-validation-btn:hover,
html.dark-mode body.app-layout .result-card .run-validation-btn:focus-visible {
  border-color: color-mix(in srgb, var(--tm-mint) 45%, var(--tm-grid-20)) !important;
  background: color-mix(in srgb, var(--tm-mint) 10%, var(--tm-paper)) !important;
  color: var(--tm-mint) !important;
}

html.dark-mode body.app-layout .result-card .rc-separator-toggle:hover,
html.dark-mode body.app-layout .result-card .rc-separator-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--tm-mint) 45%, var(--tm-grid-20)) !important;
  background: color-mix(in srgb, var(--tm-mint) 10%, var(--tm-paper)) !important;
  color: var(--tm-mint) !important;
}

html.dark-mode body.app-layout .result-card .rc-copy-btn:hover,
html.dark-mode body.app-layout .result-card .rc-copy-btn:focus-visible,
html.dark-mode body.app-layout .result-card .rc-copy-alt-btn:hover,
html.dark-mode body.app-layout .result-card .rc-copy-alt-btn:focus-visible,
html.dark-mode body.app-layout .result-card .rc-explain-icon-btn:hover,
html.dark-mode body.app-layout .result-card .rc-explain-icon-btn:focus-visible {
  border-color: color-mix(in srgb, var(--tm-mint) 45%, var(--tm-grid-20)) !important;
  background: color-mix(in srgb, var(--tm-mint) 10%, var(--tm-paper)) !important;
  color: var(--tm-mint) !important;
}

/* Dashboard/library typography + control unification (final TM lock). */
.app-layout,
.app-layout p,
.app-layout li,
.app-layout label,
.app-layout input,
.app-layout textarea,
.app-layout select,
.app-layout button {
  font-family: var(--font-body);
}

.app-layout h1,
.app-layout h2,
.app-layout h3,
.app-layout h4,
.app-layout .section-title h1,
.app-layout .app-page-title {
  font-family: var(--tm-font-display) !important;
}

.app-layout .sidebar-nav-label,
.app-layout .sidebar-usage-text,
.app-layout .sidebar-usage-reset,
.app-layout .sidebar-usage-mini-label,
.app-layout .history-tool-badge,
.app-layout .library-item-badge,
.app-layout .dashboard-recent-type,
.app-layout .filter-chip,
.app-layout .section-title .badge,
.app-layout .dashboard-user-chip {
  font-family: var(--tm-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.app-layout .history-tool-badge,
.app-layout .library-item-badge,
.app-layout .history-card-menu-btn,
.app-layout .library-card-menu-btn,
.app-layout .collection-card-menu-btn,
.app-layout .history-card-menu,
.app-layout .library-card-menu,
.app-layout .collection-card-menu,
.app-layout .menu-action,
.app-layout .library-collection-select,
.app-layout .filter-chip {
  border-radius: var(--radius-surface);
  box-shadow: none !important;
}

.app-layout .history-tool-badge,
.app-layout .library-item-badge,
.app-layout .dashboard-recent-type {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-tag-gap);
  padding: 0 var(--tm-tag-pad-x) !important;
  min-height: var(--tm-tag-height);
  height: var(--tm-tag-height);
  border: 1px solid var(--tm-grid-20) !important;
  background: var(--tm-chip-bg) !important;
  color: var(--tm-forest) !important;
  font-size: var(--tm-tag-font-size);
  font-weight: 500;
  letter-spacing: var(--tm-tag-letter);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.app-layout .history-tool-badge::before,
.app-layout .library-item-badge::before,
.app-layout .dashboard-recent-type::before {
  content: "";
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  background: var(--tm-sem-dot-color, var(--tm-sem-platform));
  flex: 0 0 var(--tm-tag-dot-size);
  border-radius: 0;
}

.app-layout .history-tool-badge.formula,
.app-layout .library-item-badge.formula,
.app-layout .dashboard-recent-type.formula {
  --tm-sem-dot-color: var(--tm-sem-platform);
  border-color: var(--tm-grid-20) !important;
}

.app-layout .history-tool-badge.sql,
.app-layout .library-item-badge.sql,
.app-layout .dashboard-recent-type.sql {
  --tm-sem-dot-color: var(--tm-sem-sql);
  border-color: var(--tm-grid-20) !important;
}

.app-layout .history-tool-badge.regex,
.app-layout .library-item-badge.regex,
.app-layout .dashboard-recent-type.regex {
  --tm-sem-dot-color: var(--tm-sem-regex);
  border-color: var(--tm-grid-20) !important;
}

.app-layout .history-tool-badge.script,
.app-layout .library-item-badge.script,
.app-layout .dashboard-recent-type.script {
  --tm-sem-dot-color: var(--tm-sem-script);
  border-color: var(--tm-grid-20) !important;
}

.app-layout .history-tool-badge.explain,
.app-layout .library-item-badge.explain,
.app-layout .dashboard-recent-type.explain {
  --tm-sem-dot-color: color-mix(in srgb, var(--tm-forest) 40%, transparent);
  border-color: var(--tm-grid-20) !important;
}

.app-layout .history-tool-badge.debug,
.app-layout .library-item-badge.debug,
.app-layout .dashboard-recent-type.debug {
  --tm-sem-dot-color: var(--tm-gold);
  border-color: var(--tm-grid-20) !important;
}

.app-layout .history-collection-badge {
  font-family: var(--tm-font-mono) !important;
  font-size: var(--tm-tag-font-size, 0.6rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  padding: 0 var(--tm-tag-pad-x, 8px) !important;
  min-height: var(--tm-tag-height, 22px);
  height: var(--tm-tag-height, 22px);
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  background: rgba(99, 102, 241, 0.06) !important;
  color: rgba(99, 102, 241, 0.85) !important;
  border-radius: 2px;
}

.app-layout .history-card-menu,
.app-layout .library-card-menu,
.app-layout .collection-card-menu {
  border: 1px solid var(--tm-grid-20) !important;
  background: var(--tm-paper) !important;
}

.app-layout .history-card-menu-btn,
.app-layout .library-card-menu-btn,
.app-layout .collection-card-menu-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--tm-grid-20) !important;
  background: var(--tm-paper) !important;
  color: var(--tm-forest) !important;
}

.app-layout .history-card-menu-btn:hover,
.app-layout .library-card-menu-btn:hover,
.app-layout .collection-card-menu-btn:hover {
  background: var(--tm-grid-10) !important;
  border-color: var(--tm-grid-30) !important;
}

.app-layout .menu-action {
  min-height: 34px;
  border: 1px solid var(--tm-grid-20) !important;
  background: var(--tm-paper) !important;
  color: var(--tm-forest) !important;
  font-family: var(--font-body);
}

.app-layout .menu-action:hover {
  background: var(--tm-grid-10) !important;
  border-color: var(--tm-grid-30) !important;
}

.app-layout .menu-collection-item,
.app-layout .menu-input,
.app-layout .menu-delete-confirm {
  border-radius: var(--radius-control);
}

.app-layout .menu-collection-item,
.app-layout .menu-input {
  border: 1px solid var(--tm-grid-20) !important;
  background: var(--tm-paper) !important;
  color: var(--tm-forest) !important;
}

.app-layout .menu-collection-item:hover,
.app-layout .menu-collection-item.active {
  border-color: var(--tm-grid-30) !important;
  background: var(--tm-grid-10) !important;
  color: var(--tm-forest) !important;
}

.app-layout .menu-input:focus {
  border-color: var(--tm-grid-30) !important;
  box-shadow: none !important;
}

/* Final lock: center F/A mini usage letters in ring indicators */
.app-layout .sidebar-usage-mini {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.app-layout .sidebar-usage-mini-label {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  transform: translateY(0.6px) !important;
  text-align: center !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------------
   FINAL LOCK: generated-card action controls (dashboard/app views)
   - compact icon-only controls
   - centered glyphs
   - no visible button chrome until hover/focus
   - fixed top-right anchoring for one-line and multi-line boxes
------------------------------------------------------------------- */
body.app-layout .result-card .rc-head-menu-trigger.result-actions-menu-trigger,
body.app-layout .result-card .rc-clear-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-surface);
  background: transparent !important;
  color: var(--text-tertiary) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

body.app-layout .result-card .rc-head-menu-trigger.result-actions-menu-trigger svg,
body.app-layout .result-card .rc-clear-btn svg {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  transform: none !important;
  display: block !important;
}

body.app-layout .result-card .rc-head-menu-trigger.result-actions-menu-trigger:hover,
body.app-layout .result-card .rc-head-menu-trigger.result-actions-menu-trigger:focus-visible,
body.app-layout .result-card .rc-clear-btn:hover,
body.app-layout .result-card .rc-clear-btn:focus-visible {
  border-color: var(--border-light) !important;
  background: var(--bg-surface) !important;
  color: var(--tm-forest, #163f2f) !important;
}

body.app-layout .result-card .rc-code-box {
  position: relative !important;
  padding: 10px 12px !important;
}

body.app-layout .result-card .rc-code-box-head {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
}

body.app-layout .result-card .rc-main-formula-row,
body.app-layout .result-card .rc-alt-row {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  min-height: 0 !important;
  gap: var(--tm-result-formula-row-gap, 8px) !important;
  padding: 0 !important;
}

body.app-layout .result-card .rc-main-formula-row .rc-alt-code,
body.app-layout .result-card .rc-alt-row .rc-alt-code,
body.app-layout .result-card .rc-main-formula-row .rc-main-formula-code {
  margin: 0 !important;
  display: block !important;
  min-height: 0 !important;
  line-height: var(--tm-result-formula-line-h, 1.28) !important;
}

body.app-layout .result-card .rc-main-formula .rc-alt-actions,
body.app-layout .result-card .rc-main-formula-row .rc-alt-actions,
body.app-layout .result-card .rc-alt-row .rc-alt-actions {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  align-self: start !important;
  justify-self: end !important;
}

body.app-layout .result-card .rc-code-actions .rc-copy-btn,
body.app-layout .result-card .rc-code-actions .rc-explain-icon-btn,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn,
body.app-layout .result-card .rc-alt-actions .rc-explain-icon-btn {
  width: var(--tm-result-formula-action-size, 24px) !important;
  height: var(--tm-result-formula-action-size, 24px) !important;
  min-width: var(--tm-result-formula-action-size, 24px) !important;
  min-height: var(--tm-result-formula-action-size, 24px) !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--text-tertiary) !important;
  line-height: 1 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
}

body.app-layout .result-card .rc-code-actions .rc-copy-btn svg,
body.app-layout .result-card .rc-code-actions .rc-explain-icon-btn svg,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn svg,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn svg,
body.app-layout .result-card .rc-alt-actions .rc-explain-icon-btn svg {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  transform: none !important;
  display: block !important;
}

body.app-layout .result-card .rc-code-actions .rc-copy-btn:hover,
body.app-layout .result-card .rc-code-actions .rc-copy-btn:focus-visible,
body.app-layout .result-card .rc-code-actions .rc-explain-icon-btn:hover,
body.app-layout .result-card .rc-code-actions .rc-explain-icon-btn:focus-visible,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn:hover,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn:focus-visible,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn:hover,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn:focus-visible,
body.app-layout .result-card .rc-alt-actions .rc-explain-icon-btn:hover,
body.app-layout .result-card .rc-alt-actions .rc-explain-icon-btn:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--tm-forest, #163f2f) !important;
}

body.app-layout .result-card .rc-code-box>.tm-formula-surface__code-body,
body.app-layout .result-card .rc-code-box pre.tm-formula-surface__code-body,
body.app-layout .result-card .rc-code-box code.tm-formula-surface__code-body {
  margin: 0 !important;
  padding-right: 72px !important;
}

html.dark-mode body.app-layout .result-card .rc-head-menu-trigger.result-actions-menu-trigger,
html.dark-mode body.app-layout .result-card .rc-clear-btn,
html.dark-mode body.app-layout .result-card .rc-code-actions .rc-copy-btn,
html.dark-mode body.app-layout .result-card .rc-code-actions .rc-explain-icon-btn,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-copy-btn,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-explain-icon-btn {
  border-color: transparent !important;
  background: transparent !important;
  color: #a7b5c8 !important;
}

html.dark-mode body.app-layout .result-card .rc-head-menu-trigger.result-actions-menu-trigger:hover,
html.dark-mode body.app-layout .result-card .rc-head-menu-trigger.result-actions-menu-trigger:focus-visible,
html.dark-mode body.app-layout .result-card .rc-clear-btn:hover,
html.dark-mode body.app-layout .result-card .rc-clear-btn:focus-visible,
html.dark-mode body.app-layout .result-card .rc-code-actions .rc-copy-btn:hover,
html.dark-mode body.app-layout .result-card .rc-code-actions .rc-copy-btn:focus-visible,
html.dark-mode body.app-layout .result-card .rc-code-actions .rc-explain-icon-btn:hover,
html.dark-mode body.app-layout .result-card .rc-code-actions .rc-explain-icon-btn:focus-visible,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-copy-btn:hover,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-copy-btn:focus-visible,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn:hover,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn:focus-visible,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-explain-icon-btn:hover,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-explain-icon-btn:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  color: #d5deeb !important;
}

body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-copied-state,
body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-action-ok,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-copied-state,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-action-ok,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-copied-state,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-action-ok {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--tm-forest, #163f2f) !important;
}

body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-copy-failed,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-copy-failed,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-copy-failed {
  border-color: rgba(185, 28, 28, 0.5) !important;
  color: #b91c1c !important;
}

body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-copied-state .rc-copied-badge,
body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-action-ok .rc-copied-badge,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-copied-state .rc-copied-badge,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-action-ok .rc-copied-badge,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-copied-state .rc-copied-badge,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-action-ok .rc-copied-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  font-size: 0 !important;
  color: currentColor !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-copied-state .rc-copied-badge svg,
body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-action-ok .rc-copied-badge svg,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-copied-state .rc-copied-badge svg,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-action-ok .rc-copied-badge svg,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-copied-state .rc-copied-badge svg,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-action-ok .rc-copied-badge svg {
  width: 16px !important;
  height: 16px !important;
  opacity: 1 !important;
}

body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-copied-state > svg,
body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-action-ok > svg,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-copied-state > svg,
body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-action-ok > svg,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-copied-state > svg,
body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-action-ok > svg {
  opacity: 0 !important;
}

html.dark-mode body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-copied-state,
html.dark-mode body.app-layout .result-card .rc-code-actions .rc-copy-btn.is-action-ok,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-copied-state,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-copy-btn.is-action-ok,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-copied-state,
html.dark-mode body.app-layout .result-card .rc-alt-actions .rc-copy-alt-btn.is-action-ok {
  border-color: transparent !important;
  background: transparent !important;
  color: #fff !important;
}

/* Final parity fix: Pro Tips should match the reference card accent treatment. */
body.app-layout .result-card .rc-section--tips .rc-section-title,
body.tm-inner .result-card .rc-section--tips .rc-section-title {
  color: var(--text-secondary);
}

body.app-layout .result-card .rc-section--tips .rc-section-stack,
body.tm-inner .result-card .rc-section--tips .rc-section-stack {
  gap: 8px !important;
}

body.app-layout .result-card .rc-section--tips .rc-tip,
body.tm-inner .result-card .rc-section--tips .rc-tip {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; color: var(--text-primary);
}

/* Final parity fix: Verification should render as clean summary + organized collapsibles. */
body.app-layout .result-card .rc-section--verification .rc-section-title,
body.tm-inner .result-card .rc-section--verification .rc-section-title {
  color: var(--text-secondary);
  margin-bottom: 10px !important;
}

body.app-layout .result-card .rc-verification-summary-card,
body.tm-inner .result-card .rc-verification-summary-card {
  background: transparent !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  padding: 18px 18px 20px !important;
}

body.app-layout .result-card .rc-verification-summary-card .rc-coverage-row,
body.tm-inner .result-card .rc-verification-summary-card .rc-coverage-row {
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

body.app-layout .result-card .rc-verification-summary-card .rc-coverage-label,
body.tm-inner .result-card .rc-verification-summary-card .rc-coverage-label {
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary) !important;
}

body.app-layout .result-card .rc-verification-summary-card .rc-coverage-badge,
body.tm-inner .result-card .rc-verification-summary-card .rc-coverage-badge {
  border-radius: var(--radius-surface);
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-white, var(--tm-paper)) !important;
  color: var(--tm-forest, #1A3C2B) !important;
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.app-layout .result-card .rc-verification-summary-card .rc-coverage-badge::before,
body.tm-inner .result-card .rc-verification-summary-card .rc-coverage-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  background: #f28a6b;
}

body.app-layout .result-card .rc-verification-summary-card .rc-validation-summary,
body.tm-inner .result-card .rc-verification-summary-card .rc-validation-summary {
  margin: 0 !important;
}

body.app-layout .result-card .rc-verification-summary-card .rc-validation-score,
body.tm-inner .result-card .rc-verification-summary-card .rc-validation-score {
  font-size: clamp(52px, 5vw, 70px) !important;
  line-height: 0.95 !important;
  color: #f28a6b !important;
  font-family: var(--tm-font-display, "Space Grotesk", system-ui, sans-serif) !important;
}

body.app-layout .result-card .rc-verification-summary-card .rc-validation-meta,
body.tm-inner .result-card .rc-verification-summary-card .rc-validation-meta,
body.app-layout .result-card .rc-verification-summary-card .rc-verification-copy,
body.tm-inner .result-card .rc-verification-summary-card .rc-verification-copy {
  margin-top: 6px !important;
  font-family: var(--tm-font-body, "Inter", system-ui, sans-serif) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--text-primary);
}

body.app-layout .result-card .rc-section--verification .rc-collapsible,
body.tm-inner .result-card .rc-section--verification .rc-collapsible {
  margin-top: 12px !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  border-top: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  border-right: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  border-bottom: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  border-left: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
}

body.app-layout .result-card .rc-section--verification .rc-collapsible-summary,
body.tm-inner .result-card .rc-section--verification .rc-collapsible-summary {
  min-height: 56px !important;
  margin: 0 !important;
  padding: 14px 72px 14px 18px !important;
  font-family: var(--tm-font-display, "Space Grotesk", system-ui, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text-secondary);
  border: 0 !important;
  box-shadow: none !important;
}

body.app-layout .result-card .rc-section--verification .rc-collapsible-summary::before,
body.tm-inner .result-card .rc-section--verification .rc-collapsible-summary::before {
  content: "" !important;
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  box-sizing: border-box !important;
  transform: translateY(-50%) !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-white, var(--tm-paper)) !important;
  opacity: 0.68 !important;
}

body.app-layout .result-card .rc-section--verification .rc-collapsible-summary::after,
body.tm-inner .result-card .rc-section--verification .rc-collapsible-summary::after {
  content: "" !important;
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  width: 28px !important;
  height: 28px !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  color: var(--text-secondary);
  opacity: 0.68 !important;
  display: block !important;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat !important;
}

body.app-layout .result-card .rc-section--verification .rc-collapsible[open] .rc-collapsible-summary::after,
body.tm-inner .result-card .rc-section--verification .rc-collapsible[open] .rc-collapsible-summary::after {
  transform: translateY(-50%) rotate(45deg) !important;
}

html.dark-mode body.app-layout .result-card .rc-section--verification .rc-collapsible-summary::before,
html.dark-mode body.tm-inner .result-card .rc-section--verification .rc-collapsible-summary::before {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode body.app-layout .result-card .rc-section--verification .rc-collapsible-summary::after,
html.dark-mode body.tm-inner .result-card .rc-section--verification .rc-collapsible-summary::after {
  color: var(--text-secondary);
}

body.app-layout .result-card .rc-section--verification .rc-collapsible-body,
body.tm-inner .result-card .rc-section--verification .rc-collapsible-body {
  margin-top: 0 !important;
  border-top: 1px solid var(--tm-grid-10, rgba(58, 58, 56, 0.1)) !important;
  padding: 14px 18px 16px !important;
}

body.app-layout .result-card .rc-note-subsection+.rc-note-subsection,
body.tm-inner .result-card .rc-note-subsection+.rc-note-subsection {
  margin-top: 14px !important;
}

body.app-layout .result-card .rc-note-subsection-title,
body.tm-inner .result-card .rc-note-subsection-title {
  font-family: var(--font-body);
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--tm-forest, #1A3C2B) !important;
  margin-bottom: 8px !important;
}

/* Final typography parity lock with reference (labels + box text). */
body.app-layout .result-card .rc-code-box,
body.app-layout .result-card .rc-alt-formula,
body.tm-inner .result-card .rc-code-box,
body.tm-inner .result-card .rc-alt-formula  {
  background: var(--tm-white, var(--tm-paper)) !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
}

/* Exact reference token lock (from saved reference HTML classes). */
body.app-layout .result-card .rc-code-box-label,
body.app-layout .result-card .rc-component-code,
body.app-layout .result-card .rc-coverage-label,
body.app-layout .result-card .rc-sample-table th,
body.tm-inner .result-card .rc-code-box-label,
body.tm-inner .result-card .rc-component-code,
body.tm-inner .result-card .rc-coverage-label,
body.tm-inner .result-card .rc-sample-table th {
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary);
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

body.app-layout .result-card .rc-code-box-label,
body.tm-inner .result-card .rc-code-box-label {
  margin: 0 0 8px 0 !important;
}

body.app-layout .result-card .rc-component-code,
body.tm-inner .result-card .rc-component-code {
  margin: 0 0 4px 0 !important;
}

/* Final hard lock to mirror the saved reference HTML card tokens exactly. */
body.app-layout .result-card .rc-section--verification .rc-collapsible-summary,
body.tm-inner .result-card .rc-section--verification .rc-collapsible-summary {
  font-family: "Space Grotesk", "General Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary);
}

body.app-layout .result-card .rc-section-title,
body.tm-inner .result-card .rc-section-title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  border-top: 0;
  padding-top: 0;
  margin-bottom: 8px;
}

body.app-layout .result-card .rc-section:first-child .rc-section-title,
body.tm-inner .result-card .rc-section:first-child .rc-section-title {
  border-top: 0;
  padding-top: 0;
}

body.app-layout .result-card .rc-code-box-label,
body.app-layout .result-card .rc-component-code,
body.app-layout .result-card .rc-coverage-label,
body.app-layout .result-card .rc-sample-table th,
body.tm-inner .result-card .rc-code-box-label,
body.tm-inner .result-card .rc-component-code,
body.tm-inner .result-card .rc-coverage-label,
body.tm-inner .result-card .rc-sample-table th {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
  font-size: 10px !important;
  line-height: 1rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--text-secondary);
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-row .rc-main-formula-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-row .rc-alt-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-row .rc-alt-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box>.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box pre.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box code.tm-formula-surface__code-body {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
  font-size: 12px !important;
  line-height: 1rem !important;
  font-weight: 500 !important;
  color: color-mix(in srgb, var(--tm-forest) 80%, transparent) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-component-text,
:is(body.app-layout, body.tm-inner) .result-card .rc-explanation,
:is(body.app-layout, body.tm-inner) .result-card .rc-verification-copy,
:is(body.app-layout, body.tm-inner) .result-card .rc-validation-meta,
:is(body.app-layout, body.tm-inner) .result-card .rc-list,
:is(body.app-layout, body.tm-inner) .result-card .rc-note,
:is(body.app-layout, body.tm-inner) .result-card .rc-actions-description  {
  font-family: "General Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: var(--text-primary);
}

:is(body.app-layout, body.tm-inner) .result-card .rc-component {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; color: var(--text-primary);
}

:is(body.app-layout, body.tm-inner) .result-card .rc-section--tips .rc-tip {
  background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; box-shadow: none; color: var(--text-primary);
}

/* Verification + tags parity lock (match reference + global tag system). */
body.app-layout .result-card .rc-verification-summary-card .rc-coverage-badge,
body.tm-inner .result-card .rc-verification-summary-card .rc-coverage-badge {
  min-height: var(--tm-tag-height) !important;
  height: var(--tm-tag-height) !important;
  padding: 0 var(--tm-tag-pad-x) !important;
  gap: var(--tm-tag-gap) !important;
  border-radius: var(--radius-surface);
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-chip-bg, var(--tm-paper)) !important;
  font-family: var(--tm-font-mono, "JetBrains Mono", ui-monospace, monospace) !important;
  font-size: var(--tm-tag-font-size) !important;
  letter-spacing: var(--tm-tag-letter) !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: color-mix(in srgb, var(--tm-forest) 70%, transparent) !important;
  display: inline-flex !important;
  align-items: center !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-verification-summary-card .rc-coverage-badge::before {
  width: var(--tm-tag-dot-size) !important;
  height: var(--tm-tag-dot-size) !important;
  flex: 0 0 var(--tm-tag-dot-size) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-verification-summary-card .rc-coverage-badge--verified::before {
  background: var(--tm-mint, #8fe5b5) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-verification-summary-card .rc-coverage-badge--partial::before {
  background: var(--tm-coral, #f28a6b) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-verification-summary-card .rc-coverage-badge--skipped::before {
  background: var(--tm-gold, #f4d35e) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-verification-summary-card .rc-validation-score {
  font-family: "Space Grotesk", "General Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  color: var(--tm-coral, #f28a6b) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-verification-summary-card .rc-validation-meta,
:is(body.app-layout, body.tm-inner) .result-card .rc-verification-summary-card .rc-verification-copy {
  font-family: "General Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: var(--text-primary);
}

:is(body.app-layout, body.tm-inner) .result-card .rc-section--verification .rc-collapsible-summary {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
  font-weight: 600 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-section--verification .rc-collapsible-body {
  font-family: "General Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: color-mix(in srgb, var(--tm-forest) 75%, transparent) !important;
}

/* Generate-page lock: verification dropdown headers should match the smaller
   share-page mono sizing, not the larger display-style overrides above. */
.app-layout #generate-page .result-card .rc-section--verification .rc-collapsible-summary {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
  font-size: 10px !important;
  line-height: 1rem !important;
  font-weight: 600;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-secondary);
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table td {
  font-family: "General Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: color-mix(in srgb, var(--tm-forest) 75%, transparent) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table td.rc-sample-cell-mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
  font-size: 12px !important;
  line-height: 1rem !important;
  color: color-mix(in srgb, var(--tm-forest) 80%, transparent) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-status {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: var(--radius-surface);
  font: inherit !important;
  color: inherit !important;
}

/* Sample data table structure fix: keep headers in one horizontal row. */
:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table {
  width: 100% !important;
  border-collapse: collapse !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table thead {
  display: table-header-group !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table thead tr {
  display: table-row !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table th {
  display: table-cell !important;
  margin: 0 !important;
  padding: 0.5rem 1rem 0.5rem 0 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-sample-table th:last-child {
  padding-right: 0 !important;
}

/* Action controls final lock: keep copy/explain pinned top-right on every code surface. */
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-row,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-row {
  position: relative !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box .rc-code-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula .rc-alt-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-row .rc-alt-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-row .rc-alt-actions {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  z-index: 2 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-code-box>.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box pre.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-code-box code.tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-row,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-row {
  padding-right: 104px;
}

/* Click feedback for copy/explain icon buttons. */
:is(body.app-layout, body.tm-inner) .result-card .rc-icon-only {
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-icon-only.is-copied {
  border-color: color-mix(in srgb, var(--tm-mint, #8fe5b5) 62%, var(--tm-grid-20, rgba(20, 46, 35, 0.2))) !important;
  background: color-mix(in srgb, var(--tm-mint, #8fe5b5) 18%, #ffffff) !important;
  color: var(--tm-forest, #1A3C2B) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-icon-only.is-copy-failed {
  border-color: color-mix(in srgb, var(--tm-coral, #f28a6b) 70%, var(--tm-grid-20, rgba(20, 46, 35, 0.2))) !important;
  background: color-mix(in srgb, var(--tm-coral, #f28a6b) 14%, #ffffff) !important;
  color: #a53a1a !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-icon-only.is-action-ok {
  border-color: color-mix(in srgb, var(--tm-gold, #f4d35e) 70%, var(--tm-grid-20, rgba(20, 46, 35, 0.2))) !important;
  background: color-mix(in srgb, var(--tm-gold, #f4d35e) 20%, #ffffff) !important;
  color: var(--tm-forest, #1A3C2B) !important;
}

/* Formula Generator module parity (reference header + labels + badges). */
:is(body.app-layout, body.tm-inner) .result-card .rc-title {
  font-family: "Space Grotesk", "General Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--tm-forest) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-badges {
  margin-top: 0.25rem !important;
  gap: 0.5rem !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-badge {
  min-height: 24px !important;
  padding: 0 0.5rem !important;
  gap: 0.5rem !important;
  border: 1px solid var(--tm-grid-20) !important;
  background: var(--tm-paper) !important;
  border-radius: var(--radius-surface);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
  font-size: 10px !important;
  line-height: 1rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: color-mix(in srgb, var(--tm-forest) 70%, transparent) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-badge::before {
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
}

:is(body.app-layout, body.tm-inner) .card .rc-badge::before {
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-badge-excel::before {
  background: var(--tm-mint) !important;
}

:is(body.app-layout, body.tm-inner) .card .rc-badge-excel::before {
  background: var(--tm-mint) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-badge-sheets::before,
:is(body.app-layout, body.tm-inner) .result-card .rc-badge-sql::before {
  background: var(--tm-sem-sql) !important;
}

:is(body.app-layout, body.tm-inner) .card .rc-badge-sheets::before,
:is(body.app-layout, body.tm-inner) .card .rc-badge-sql::before {
  background: var(--tm-sem-sql) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-badge-script::before {
  background: var(--tm-sem-script) !important;
}

:is(body.app-layout, body.tm-inner) .card .rc-badge-script::before {
  background: var(--tm-sem-script) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-badge-regex::before {
  background: var(--tm-sem-regex) !important;
}

:is(body.app-layout, body.tm-inner) .card .rc-badge-regex::before {
  background: var(--tm-sem-regex) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-badge-debug::before,
:is(body.app-layout, body.tm-inner) .result-card .rc-badge-coverage--partial::before {
  background: #f59e0b !important;
}

:is(body.app-layout, body.tm-inner) .card .rc-badge-debug::before,
:is(body.app-layout, body.tm-inner) .card .rc-badge-coverage--partial::before {
  background: #f59e0b !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-badge-coverage--verified::before {
  background: var(--tm-mint) !important;
}

:is(body.app-layout, body.tm-inner) .card .rc-badge-coverage--verified::before {
  background: var(--tm-mint) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-badge-coverage--skipped::before,
:is(body.app-layout, body.tm-inner) .result-card .rc-badge-score::before,
:is(body.app-layout, body.tm-inner) .result-card .rc-badge-neutral::before,
:is(body.app-layout, body.tm-inner) .result-card .rc-badge-compat::before {
  background: color-mix(in srgb, var(--tm-forest) 40%, transparent) !important;
}

:is(body.app-layout, body.tm-inner) .card .rc-badge-coverage--skipped::before,
:is(body.app-layout, body.tm-inner) .card .rc-badge-score::before,
:is(body.app-layout, body.tm-inner) .card .rc-badge-neutral::before,
:is(body.app-layout, body.tm-inner) .card .rc-badge-compat::before {
  background: color-mix(in srgb, var(--tm-forest) 40%, transparent) !important;
}

/* Save & Share module parity (reference typography + controls). */
:is(body.app-layout, body.tm-inner) .result-card .result-actions {
  background: var(--tm-paper, #f7f7f5) !important;
  border: 1px solid var(--tm-grid-20) !important;
  padding: 1.25rem !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-actions-header {
  margin-bottom: 0.75rem !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-actions-kicker {
  min-height: 24px !important;
  padding: 0 0.5rem !important;
  border: 1px solid var(--tm-grid-20) !important;
  border-radius: var(--radius-surface);
  background: var(--tm-paper) !important;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1rem !important;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500 !important;
  color: var(--text-secondary);
}

:is(body.app-layout, body.tm-inner) .result-card .rc-actions-description {
  margin-top: 0.5rem !important;
  font-family: "General Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: color-mix(in srgb, var(--tm-forest) 75%, transparent) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .result-actions-menu--full .result-actions-menu-trigger {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 1rem !important;
  border: 1px solid var(--tm-grid-20) !important;
  border-radius: var(--radius-surface);
  background: var(--tm-paper) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
  font-size: 13px;
  line-height: 1rem !important;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500 !important;
  color: color-mix(in srgb, var(--tm-forest) 80%, transparent) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .library-collection-input {
  min-height: 44px !important;
  padding: 0 0.875rem !important;
  border: 1px solid var(--tm-grid-20) !important;
  border-radius: var(--radius-surface);
  background: var(--tm-paper) !important;
  font-family: "General Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: color-mix(in srgb, var(--tm-forest) 75%, transparent) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .library-collection-input::placeholder {
  color: color-mix(in srgb, var(--tm-forest) 55%, transparent) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .result-actions .save-btn {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 1rem !important;
  border: 1px solid var(--tm-forest, #1A3C2B) !important;
  border-radius: var(--radius-surface);
  background: var(--tm-forest, #1A3C2B) !important;
  color: var(--tm-paper) !important;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace !important;
  font-size: 13px;
  line-height: 1rem !important;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-actions-footnote {
  font-family: "General Sans", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: color-mix(in srgb, var(--tm-forest) 75%, transparent) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-copy-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-copy-alt-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-explain-icon-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-copy-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-copy-alt-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-explain-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-copy-btn svg,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-copy-alt-btn svg,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-explain-icon-btn svg,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-copy-btn svg,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-copy-alt-btn svg,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-explain-icon-btn svg {
  width: 15px !important;
  height: 15px !important;
}

/* Shared task form: compact, readable labels and a single primary action. */
.app-layout #generate-page .starter-card h4 { margin: 0 0 4px; color: var(--text-primary); font: 600 13px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
.app-layout #generate-page .starter-card p { color: var(--text-tertiary); font: 12px/1.45 var(--font-body); }
.app-layout #generate-page .form-group > label { color: var(--text-primary); font: 600 13px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
.app-layout #generate-page .form-group :is(textarea, select, input[type="text"]) { font: 14px/1.5 var(--font-body); color: var(--text-primary); }
.app-layout #generate-page .form-group :is(textarea, input)::placeholder { color: var(--text-tertiary); opacity: 1; }
.app-layout #generate-page .tool-panel form .btn.btn-primary { min-height: 44px; align-self: flex-start; padding: 10px 20px; border-radius: var(--radius-control); font: 600 14px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
.app-layout #generate-page .tool-panel .result-placeholder p { color: var(--text-tertiary); font: 12px/1.5 var(--font-body); letter-spacing: 0; text-transform: none; }

/* Click feedback animations for result-card icon controls (..., x, explain, copy). */
@keyframes rcControlPulse {
  0% {
    transform: scale(1);
  }

  35% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes rcControlGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 60, 43, 0);
  }

  45% {
    box-shadow: 0 0 0 6px rgba(26, 60, 43, 0.10);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(26, 60, 43, 0);
  }
}

:is(body.app-layout, body.tm-inner) .result-card .result-actions-menu-trigger,
:is(body.app-layout, body.tm-inner) .result-card .rc-clear-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-alt-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-explain-icon-btn {
  transition: transform 0.16s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
  transform-origin: center !important;
}

:is(body.app-layout, body.tm-inner) .result-card .result-actions-menu-trigger:active,
:is(body.app-layout, body.tm-inner) .result-card .rc-clear-btn:active,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-btn:active,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-alt-btn:active,
:is(body.app-layout, body.tm-inner) .result-card .rc-explain-icon-btn:active {
  transform: scale(0.92) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-clear-btn.rc-click-pulse,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-btn.rc-click-pulse,
:is(body.app-layout, body.tm-inner) .result-card .rc-copy-alt-btn.rc-click-pulse,
:is(body.app-layout, body.tm-inner) .result-card .rc-explain-icon-btn.rc-click-pulse {
  animation: rcControlPulse 0.24s ease, rcControlGlow 0.3s ease !important;
}

:is(body.app-layout, body.tm-inner) .result-card .result-actions-menu--full {
  position: relative !important;
  width: 100% !important;
  flex: 1 1 100% !important;
}

:is(body.app-layout, body.tm-inner) .result-card .result-actions-menu--full .result-actions-menu-list {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: calc(100% + 6px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Keep head (...) dropdown fully on-screen by anchoring it to the right edge. */
:is(body.app-layout, body.tm-inner) .result-card .rc-head-menu-list.result-actions-menu-list {
  left: auto !important;
  right: 0 !important;
  width: max-content !important;
  min-width: 190px !important;
  max-width: min(260px, calc(100vw - 24px)) !important;
}

/* Match generate export dropdown surface with share-page gray treatment. */
:is(body.app-layout, body.tm-inner) .result-card .result-actions-menu-list {
  background: var(--tm-paper, #f7f7f5) !important;
  border-color: var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
}

/* Final + icon centering lock for verification collapsibles. */
:is(body.app-layout, body.tm-inner) .result-card .rc-section--verification .rc-collapsible-summary::before,
:is(body.app-layout, body.tm-inner) .result-card .rc-section--verification .rc-collapsible-summary::after {
  width: 28px !important;
  height: 28px !important;
  box-sizing: border-box !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-section--verification .rc-collapsible-summary::after {
  content: "" !important;
  display: block !important;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-section--verification .rc-collapsible[open] .rc-collapsible-summary::after {
  transform: translateY(-50%) rotate(45deg) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-icon-only.is-copied,
:is(body.app-layout, body.tm-inner) .result-card .rc-icon-only.is-copy-failed,
:is(body.app-layout, body.tm-inner) .result-card .rc-icon-only.is-action-ok {
  animation: rcControlPulse 0.24s ease !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-copy-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-copy-alt-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-explain-icon-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-copy-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-copy-alt-btn,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-explain-icon-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgb(74 93 118) !important;
  padding: 0 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-copy-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-copy-btn:focus-visible,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-copy-alt-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-copy-alt-btn:focus-visible,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-explain-icon-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-explain-icon-btn:focus-visible,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-copy-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-copy-btn:focus-visible,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-copy-alt-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-copy-alt-btn:focus-visible,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-explain-icon-btn:hover,
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-explain-icon-btn:focus-visible {
  background: color-mix(in srgb, var(--tm-forest) 8%, transparent) !important;
  color: color-mix(in srgb, var(--tm-forest) 86%, transparent) !important;
}

/* Hard-stop main formula placement fix (highest priority, append-only). */
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box {
  position: relative !important;
  padding: var(--tm-result-formula-pad-y, 8px) var(--tm-result-formula-pad-x, 12px) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-code-box-label {
  margin: 0 0 6px 0 !important;
}

/* Absolute-final main formula row fix:
   use explicit 2-column layout to avoid vertical drift in live app. */
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-main-formula-row {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--tm-result-formula-row-gap, 8px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-main-formula-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-alt-actions {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-main-formula-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box .rc-alt-code {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: var(--tm-result-formula-line-h, 1.28) !important;
}

/* Unconditional lock for main/alt formula row alignment (applies even outside app-layout body class). */
.result-card .rc-main-formula-box {
  padding: var(--tm-result-formula-pad-y, 8px) var(--tm-result-formula-pad-x, 12px) !important;
}

.result-card .rc-main-formula-box .rc-main-formula-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--tm-result-formula-row-gap, 8px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.result-card .rc-main-formula-box .rc-main-formula-row .rc-main-formula-code,
.result-card .rc-main-formula-box .rc-main-formula-row .rc-alt-code {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: var(--tm-result-formula-line-h, 1.28) !important;
}

.result-card .rc-main-formula-box .rc-main-formula-row .rc-main-formula-actions,
.result-card .rc-main-formula-box .rc-main-formula-row .rc-alt-actions {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.result-card .rc-main-formula-box > .rc-main-formula-actions,
.result-card .rc-main-formula-box > .rc-alt-actions,
.result-card .rc-main-formula-box > .rc-code-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .rc-main-formula-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .rc-alt-actions,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .rc-code-actions {
  position: absolute !important;
  top: 50% !important;
  right: var(--tm-result-formula-pad-x, 12px) !important;
  transform: translateY(-50%) !important;
  align-self: auto !important;
  justify-self: auto !important;
}

/* Direct compact formula surfaces use a stable inline row in the app shell too.
   This prevents the rc-code-actions class from being re-anchored absolutely. */
:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact {
  display: flex !important;
  align-items: center !important;
  gap: var(--tm-result-formula-row-gap, 8px) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact > #formula-text,
:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact > .rc-main-formula-code,
:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact > .tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact > code,
:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact > pre {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-right: 0 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact > .rc-main-formula-row {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
}

:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact > .formula-box-actions,
:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact > .rc-main-formula-actions,
:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact > .rc-code-actions,
:is(body.app-layout, body.tm-inner) .result-card .formula-box.formula-box--compact > .rc-alt-actions {
  order: 2 !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
}

.result-card .rc-main-formula-box .rc-main-formula-row .rc-copy-btn,
.result-card .rc-main-formula-box .rc-main-formula-row .rc-copy-alt-btn,
.result-card .rc-main-formula-box .rc-main-formula-row .rc-explain-icon-btn,
.result-card .rc-alt-formula .rc-copy-btn,
.result-card .rc-alt-formula .rc-copy-alt-btn,
.result-card .rc-alt-formula .rc-explain-icon-btn {
  width: var(--tm-result-formula-action-size, 24px) !important;
  height: var(--tm-result-formula-action-size, 24px) !important;
  min-width: var(--tm-result-formula-action-size, 24px) !important;
  min-height: var(--tm-result-formula-action-size, 24px) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.result-card .rc-alt-formula {
  padding: var(--tm-result-formula-pad-y, 8px) var(--tm-result-formula-pad-x, 12px) !important;
}

.result-card .rc-alt-formula .rc-alt-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 0 !important;
  gap: var(--tm-result-formula-row-gap, 8px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.result-card .rc-alt-formula .rc-alt-row .rc-alt-code {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: var(--tm-result-formula-line-h, 1.28) !important;
}

.result-card .rc-alt-formula .rc-alt-row .rc-alt-actions {
  position: static !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Final mobile generate lock:
   the app-shell absolute rc-alt-actions rule earlier in this file has higher specificity,
   so restate the alt-row contract with the same body-scoped selector here. */
:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-alt-row {
  position: static !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: 0 !important;
  gap: var(--tm-result-formula-row-gap, 8px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-alt-row .rc-alt-code {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: var(--tm-result-formula-line-h, 1.28) !important;
}

:is(body.app-layout, body.tm-inner) .result-card .rc-alt-formula .rc-alt-row .rc-alt-actions {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  align-self: center !important;
  justify-self: end !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.result-card .rc-main-formula-box > .rc-main-formula-code,
.result-card .rc-main-formula-box > .rc-alt-code,
.result-card .rc-main-formula-box > .tm-formula-surface__code-body,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .rc-main-formula-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .rc-alt-code,
:is(body.app-layout, body.tm-inner) .result-card .rc-main-formula-box > .tm-formula-surface__code-body {
  padding-right: calc(var(--tm-result-formula-action-size, 24px) + 20px) !important;
}

/* Final generate-page title color lock:
   keep Pro Tips and verification dropdown headers on the same muted mono tone
   as Breakdown / Alternatives / Assumptions. */
.app-layout #generate-page .result-card .rc-section--tips .rc-section-title,
.app-layout #generate-page .result-card .rc-section--verification .rc-collapsible-summary,
.app-layout #generate-page .result-card .rc-section--verification .rc-verification-title {
  color: var(--text-secondary);
}

.sidebar-drawer-close { display: none; }
@media (max-width: 900px) {
  .sidebar-drawer-close { display: flex; align-items: center; justify-content: center; position: absolute; right: 10px; top: max(10px, env(safe-area-inset-top, 0px)); width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-light); border-radius: var(--radius-control); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; }
  .app-sidebar .fg-app-brand { padding-right: 44px; }
}

/* Task-first workspace shell. Scoped against legacy Direction A shell rules. */
body.app-layout.workspace-shell-v2 .app-sidebar {
  width: 224px; padding: 12px 10px 10px; gap: 0; overflow: visible;
  flex-shrink: 0; height: calc(100dvh - var(--app-shell-banner-offset, 0px));
}
body.app-layout.workspace-shell-v2 .fg-app-brand {
  min-height: 32px; margin: 0 6px 10px; padding: 0; gap: 8px;
  font-size: 13px; line-height: 1.2; white-space: nowrap;
}
body.app-layout.workspace-shell-v2 .fg-app-brand img { flex: 0 0 28px; }
body.app-layout.workspace-shell-v2 .sidebar-new-btn {
  min-height: 44px; height: 44px; margin: 0 0 8px; border-radius: var(--da-radius-control, var(--radius-md));
  padding: 0 12px; justify-content: flex-start; font-size: 13px;
}
body.app-layout.workspace-shell-v2 .sidebar-nav {
  flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden;
  gap: 0; margin: 0 0 8px; scrollbar-gutter: stable;
}
body.app-layout.workspace-shell-v2 .sidebar-nav-item {
  min-height: 36px; height: 36px; padding: 0 10px; gap: 10px;
  font-size: 12px; line-height: 1.25; border-radius: var(--da-radius-control, var(--radius-md));
}
body.app-layout.workspace-shell-v2 .sidebar-nav-label {
  padding: 8px 10px 3px; margin: 0; min-height: 24px;
  font: 600 10px/1.3 var(--font-body); text-transform: none; letter-spacing: .02em;
}
body.app-layout.workspace-shell-v2 .sidebar-user {
  margin: 0; padding: 6px 44px 0 0; border-top: 1px solid var(--da-line, var(--border-light));
}
body.app-layout.workspace-shell-v2 .sidebar-user-btn {
  min-height: 44px; padding: 4px; gap: 4px; border-radius: var(--da-radius-control, var(--radius-md));
}
body.app-layout.workspace-shell-v2 .sidebar-user-name { font-size: 12px; min-width: 0; }
body.app-layout.workspace-shell-v2 .sidebar-user-btn .user-avatar-sm { width: 28px; height: 28px; }
body.app-layout.workspace-shell-v2 .sidebar-user-btn .plan-badge { padding: 2px 4px; min-height: 18px; font-size: 9px; }
body.app-layout.workspace-shell-v2 .sidebar-user-btn .sidebar-chevron { display: none; }
body.app-layout.workspace-shell-v2 .sidebar-desktop-toggle {
  position: absolute; bottom: 10px; right: 10px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  border: 0; border-radius: var(--da-radius-control, var(--radius-md));
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
body.app-layout.workspace-shell-v2 .sidebar-desktop-toggle:hover { background: var(--bg-surface-muted); color: var(--text-primary); }
body.app-layout.workspace-shell-v2 .sidebar-desktop-toggle:focus-visible { outline: 2px solid var(--da-green, var(--accent-primary)); outline-offset: -2px; }
body.app-layout.workspace-shell-v2 .sidebar-user-dropdown {
  width: 300px; max-width: calc(100vw - 24px); right: auto; left: 0;
  bottom: calc(100% + 8px); max-height: calc(100dvh - var(--app-shell-banner-offset, 0px) - 76px);
  overflow-y: auto; overscroll-behavior: contain; padding: 8px;
  border-radius: var(--da-radius-card, var(--radius-lg));
}
body.app-layout.workspace-shell-v2 .sidebar-user-dropdown .dropdown-item {
  min-height: 40px; display: flex; align-items: center; padding: 8px 10px;
  font-size: 13px; border-radius: var(--da-radius-control, var(--radius-md));
}
body.app-layout.workspace-shell-v2 .account-details-panel { padding: 10px; }
body.app-layout.workspace-shell-v2 .account-usage-heading {
  font-size: 12px; line-height: 1.4; font-weight: 700; color: var(--text-primary); margin-bottom: 8px;
}
body.app-layout.workspace-shell-v2 .account-usage-row { margin-bottom: 12px; }
body.app-layout.workspace-shell-v2 .account-usage-text { font-size: 13px; line-height: 1.4; font-weight: 600; color: var(--text-primary); }
body.app-layout.workspace-shell-v2 .account-usage-reset { font-size: 11px; line-height: 1.4; margin-top: 3px; color: var(--text-secondary); }
body.app-layout.workspace-shell-v2 .account-details-panel .sidebar-theme-toggle {
  width: 100%; min-height: 44px; height: 44px; margin: 0; padding: 0 8px;
  justify-content: flex-start; font-size: 13px;
}
body.app-layout.workspace-shell-v2 .account-details-panel .sidebar-theme-label { display: inline; }
body.app-layout.workspace-shell-v2 .app-main,
body.app-layout.workspace-shell-v2 .app-canvas-shell,
body.app-layout.workspace-shell-v2 .app-content {
  border: 0; border-radius: 0; box-shadow: none;
}
body.app-layout.workspace-shell-v2 .app-canvas-shell { padding: 0; background: var(--bg-app); }
body.app-layout.workspace-shell-v2 .app-content { padding: 20px 24px 32px; max-width: none; margin: 0; }
body.app-layout.workspace-shell-v2 .app-content-toolbar { display: none; margin: 0; }
@media (min-width: 901px) {
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .app-sidebar,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed { width: 64px; padding: 12px 10px 10px; align-items: stretch; }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .sidebar-brand-name,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed .sidebar-brand-name,
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .sidebar-user-btn .plan-badge,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed .sidebar-user-btn .plan-badge { display: none; }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .fg-app-brand,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed .fg-app-brand { width: 44px; margin: 0 0 10px; justify-content: center; }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .sidebar-new-btn,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed .sidebar-new-btn { width: 44px; border-radius: var(--da-radius-control, var(--radius-md)); padding: 0; justify-content: center; }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .sidebar-nav,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed .sidebar-nav { width: 44px; scrollbar-gutter: auto; }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .sidebar-nav-item,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed .sidebar-nav-item { width: 44px; padding: 0; justify-content: center; }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .sidebar-user,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed .sidebar-user { padding: 6px 0 40px; }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .sidebar-user-btn,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed .sidebar-user-btn { width: 44px; justify-content: center; }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .sidebar-user-dropdown,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed .sidebar-user-dropdown { left: 54px; bottom: 0; }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2 .sidebar-desktop-toggle,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed .sidebar-desktop-toggle { height: 36px; }
}
@media (max-width: 900px) {
  body.app-layout.workspace-shell-v2 .app-sidebar,
  body.app-layout.workspace-shell-v2 .app-sidebar.collapsed {
    position: fixed; top: 0; left: 0;
    width: var(--mobile-drawer-width); padding: 12px 12px calc(10px + var(--mobile-browser-bottom-inset, 0px) + env(safe-area-inset-bottom));
    align-items: stretch; overflow: visible;
  }
  body.app-layout.workspace-shell-v2 .fg-app-brand { padding-right: 44px; width: auto; margin: 0 6px 10px; justify-content: flex-start; }
  body.app-layout.workspace-shell-v2 .sidebar-nav-label { display: block; }
  body.app-layout.workspace-shell-v2 .sidebar-text,
  body.app-layout.workspace-shell-v2 .sidebar-btn-text,
  body.app-layout.workspace-shell-v2 .sidebar-brand-name,
  body.app-layout.workspace-shell-v2 .sidebar-mobile-account .sidebar-chevron { display: inline; }
  body.app-layout.workspace-shell-v2 .sidebar-new-btn { width: 100%; padding: 0 12px; justify-content: flex-start; border-radius: var(--da-radius-control, var(--radius-md)); }
  body.app-layout.workspace-shell-v2 .sidebar-nav-item { min-height: 44px; height: 44px; width: 100%; padding: 0 10px; justify-content: flex-start; }
  body.app-layout.workspace-shell-v2 .sidebar-desktop-toggle { display: none; }
  body.app-layout.workspace-shell-v2 .sidebar-mobile-account { margin: 0; padding: 6px 0 0; border-top: 1px solid var(--da-line, var(--border-light)); }
  body.app-layout.workspace-shell-v2 .sidebar-mobile-account-btn { min-height: 44px; padding: 6px; }
  body.app-layout.workspace-shell-v2 .app-content { padding: 12px 16px 24px; }
  body.app-layout.workspace-shell-v2 .app-content-toolbar { display: flex; margin: 0 0 8px; }
  body.app-layout.workspace-shell-v2 .mobile-account-sheet { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  body.app-layout.workspace-shell-v2 .mobile-account-sheet .dropdown-item { min-height: 44px; display: flex; align-items: center; }
}


/* partials/formula-pages.css */
/* ──────────────────────────────────────
   Formula Pages — Programmatic SEO
   ────────────────────────────────────── */

/* Breadcrumb */
body:not(.tm-inner) .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6) 0;
    font-size: 14px;
    color: var(--text-tertiary);
}

body:not(.tm-inner) .breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-left: var(--space-2);
    color: var(--border-strong);
}

body:not(.tm-inner) .breadcrumb a {
    color: var(--text-tertiary);
    text-decoration: none;
}

body:not(.tm-inner) .breadcrumb a:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}

body:not(.tm-inner) .breadcrumb [aria-current="page"] {
    color: var(--text-primary);
    font-weight: 500;
}

/* Hero */
body:not(.tm-inner) .formula-hero {
    padding-bottom: var(--space-12);
}

body:not(.tm-inner) .formula-hero-content {
    max-width: 840px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

body:not(.tm-inner) .formula-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    align-items: center;
}

body:not(.tm-inner) .formula-hero-title {
    font-family: var(--font-display);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

body:not(.tm-inner) .formula-hero-subtitle {
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-tertiary);
    max-width: 680px;
    margin: 0;
}

body:not(.tm-inner) .formula-page .formula-definition {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

body:not(.tm-inner) .formula-page>.section:not(.formula-hero) {
    padding-top: var(--space-6);
}

body:not(.tm-inner) .formula-hero-content .hero-actions {
    margin-top: var(--space-1);
}

/* Category badges (legacy / non-TM only) */
body:not(.tm-inner) .badge-excel {
    background: #217346;
    color: #fff;
}

body:not(.tm-inner) .badge-google-sheets {
    background: #0F9D58;
    color: #fff;
}

body:not(.tm-inner) .badge-sql {
    background: #336791;
    color: #fff;
}

body:not(.tm-inner) .badge-regex {
    background: #8B5CF6;
    color: #fff;
}

body:not(.tm-inner) .badge-difficulty {
    font-size: 11px;
    text-transform: capitalize;
    letter-spacing: 0.03em;
    padding: 3px 8px;
    font-weight: 600;
}

body:not(.tm-inner) .badge-beginner {
    background: var(--accent-soft);
    color: var(--accent-primary);
}

body:not(.tm-inner) .badge-intermediate {
    background: var(--accent-secondary-soft);
    color: var(--accent-secondary);
}

body:not(.tm-inner) .badge-advanced {
    background: #FFF3E0;
    color: #E65100;
}

body:not(.tm-inner) .badge-tag {
    background: var(--bg-surface-2);
    color: var(--text-tertiary);
    font-size: 11px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-weight: 500;
}

/* ─── Layout: Main + Sidebar ─── */
body:not(.tm-inner) .formula-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-8);
    align-items: start;
    min-width: 0;
}

@media (max-width: 960px) {
    body:not(.tm-inner) .formula-layout {
        grid-template-columns: 1fr;
    }

    body:not(.tm-inner) .formula-sidebar {
        order: -1;
    }
}

body:not(.tm-inner) .formula-main,
body:not(.tm-inner) .formula-sidebar {
    min-width: 0;
}

/* ─── Content Cards (reusing .card patterns) ─── */
body:not(.tm-inner) .formula-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-6) var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
    min-width: 0;
    overflow: hidden;
}

body:not(.tm-inner) .formula-card h2 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: var(--space-5);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* ─── Formula Output Card (primary) ─── */
body:not(.tm-inner) .formula-output-card {
    border-color: rgba(16, 185, 129, 0.32);
    box-shadow: 0 0 0 1px rgba(11, 143, 94, 0.08), var(--shadow-sm);
}

body:not(.tm-inner) .formula-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

body:not(.tm-inner) .formula-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--accent-primary);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

body:not(.tm-inner) .formula-card-header h2 {
    margin-bottom: 0;
}

/* Prompt display */
body:not(.tm-inner) .formula-prompt {
    background: var(--bg-surface-2);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    border: 1px solid var(--border-subtle);
}

body:not(.tm-inner) .formula-prompt-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

body:not(.tm-inner) .formula-prompt p {
    font-style: italic;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Code frame override inside formula card */
body:not(.tm-inner) .formula-code {
    position: relative;
    margin-bottom: var(--space-5);
    background: var(--bg-surface-2);
    max-width: 100%;
}

body:not(.tm-inner) .formula-code .seo-copy-btn {
    right: 12px;
}

body:not(.tm-inner) .formula-code.is-single-line .seo-copy-btn {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

body:not(.tm-inner) .formula-code.is-single-line.has-copy pre {
    min-height: 34px;
    display: flex;
    align-items: center;
}

body:not(.tm-inner) .formula-explanation {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    font-size: 15px;
}

/* ─── Breakdown (ordered list) ─── */
body:not(.tm-inner) .formula-breakdown {
    padding-left: var(--space-6);
    margin: 0;
    counter-reset: breakdown;
}

body:not(.tm-inner) .formula-breakdown li {
    padding: var(--space-3) 0;
    color: var(--text-secondary);
    line-height: 1.65;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 15px;
    overflow-wrap: anywhere;
}

body:not(.tm-inner) .formula-breakdown li:last-child {
    border-bottom: none;
}

body:not(.tm-inner) .formula-breakdown li::marker {
    color: var(--accent-primary);
    font-weight: 700;
    font-family: var(--font-display);
}

/* ─── Edge Cases ─── */
body:not(.tm-inner) .formula-edge-cases {
    list-style: none;
    padding: 0;
    margin: 0;
}

body:not(.tm-inner) .formula-edge-cases li {
    position: relative;
    padding: var(--space-3) 0 var(--space-3) var(--space-8);
    color: var(--text-secondary);
    line-height: 1.65;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 15px;
    overflow-wrap: anywhere;
}

body:not(.tm-inner) .formula-edge-cases li:last-child {
    border-bottom: none;
}

body:not(.tm-inner) .formula-edge-cases li::before {
    content: "!";
    position: absolute;
    left: 0;
    top: calc(var(--space-3) + 2px);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-warning);
    background: rgba(224, 122, 40, 0.12);
    border: 1px solid rgba(224, 122, 40, 0.52);
}

/* ─── Examples ─── */
body:not(.tm-inner) .formula-examples {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

body:not(.tm-inner) .formula-example {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: 12px 14px;
    background: #FCFCFC;
    border-radius: var(--radius-surface);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

@media (max-width: 600px) {
    body:not(.tm-inner) .formula-example {
        grid-template-columns: 1fr;
    }
}

body:not(.tm-inner) .formula-example-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

body:not(.tm-inner) .formula-example-value {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-word;
    line-height: 1.5;
}

/* ─── CTA Card ─── */
body:not(.tm-inner) .formula-cta-card {
    background: var(--bg-surface-1);
    border: 1px solid rgba(16, 185, 129, 0.35);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

body:not(.tm-inner) .formula-cta-card h2 {
    font-size: 24px;
    letter-spacing: -0.02em;
}

body:not(.tm-inner) .formula-cta-card>p:not(.formula-cta-meta) {
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto var(--space-6);
    line-height: 1.68;
    font-size: 16px;
}

body:not(.tm-inner) .formula-cta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 720px;
    margin: 0 auto var(--space-4);
}

body:not(.tm-inner) .formula-cta-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 24px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body:not(.tm-inner) .formula-cta-meta {
    font-size: 13px;
    color: var(--text-tertiary);
    width: fit-content;
    margin: 0 auto !important;
    text-align: center;
}

/* ─── Sidebar ─── */
body:not(.tm-inner) .formula-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

body:not(.tm-inner) .sidebar-sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
}

body:not(.tm-inner) .formula-sidebar .sidebar-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
}

body:not(.tm-inner) .formula-sidebar .sidebar-card h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

body:not(.tm-inner) .formula-sidebar .sidebar-card>p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    line-height: 1.55;
}

body:not(.tm-inner) .formula-sidebar .sidebar-card .btn-primary {
    min-height: 42px;
    font-weight: 700;
}

body:not(.tm-inner) .formula-sidebar .sidebar-card .btn {
    box-shadow: none;
}

body:not(.tm-inner) .btn-block {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
}

body:not(.tm-inner) .sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

body:not(.tm-inner) .sidebar-links li {
    border-bottom: 1px solid var(--border-subtle);
}

body:not(.tm-inner) .sidebar-links li:last-child {
    border-bottom: none;
}

body:not(.tm-inner) .sidebar-links a {
    display: block;
    padding: var(--space-2) 0;
    font-size: 14px;
    color: var(--accent-secondary);
    text-decoration: none;
    transition: color 0.15s;
}

body:not(.tm-inner) .sidebar-links a:hover {
    color: var(--accent-primary);
}

/* ─── Formula Index Grid ─── */
body:not(.tm-inner) .formula-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}

body:not(.tm-inner) .formula-grid-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

body:not(.tm-inner) .formula-grid-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

body:not(.tm-inner) .formula-grid-card .formula-grid-meta {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

body:not(.tm-inner) .formula-grid-card .badge-size-sm {
    font-size: 12px;
}

body:not(.tm-inner) .formula-grid-card .badge-size-xs {
    font-size: 11px;
}

body:not(.tm-inner) .formula-grid-card h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body:not(.tm-inner) .formula-grid-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 0;
    flex: 1;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ─── Category Navigation ─── */
body:not(.tm-inner) .category-nav {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

body:not(.tm-inner) .category-nav a {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    transition: all 0.15s;
}

body:not(.tm-inner) .category-nav a:hover,
body:not(.tm-inner) .category-nav a.active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* ─── Dark Mode ─── */
html.dark-mode body:not(.tm-inner) .formula-card {
    background: var(--bg-surface-1);
    box-shadow: none;
    border-color: var(--border-subtle);
}

html.dark-mode body:not(.tm-inner) .formula-output-card {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px rgba(11, 143, 94, 0.12);
}

html.dark-mode body:not(.tm-inner) .formula-prompt {
    background: var(--bg-surface-2);
    border-color: var(--border-subtle);
}

html.dark-mode body:not(.tm-inner) .formula-cta-card {
    background: var(--bg-surface-2);
    border-color: var(--accent-primary);
}

html.dark-mode body:not(.tm-inner) .formula-sidebar .sidebar-card {
    background: var(--bg-surface-1);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

html.dark-mode body:not(.tm-inner) .formula-grid-card {
    background: var(--bg-surface-1);
    box-shadow: none;
}

/* Hero */


html.dark-mode body:not(.tm-inner) .formula-grid-card:hover {
    box-shadow: var(--shadow-md);
}

html.dark-mode body:not(.tm-inner) .formula-example {
    background: var(--bg-page);
    border-color: rgba(255, 255, 255, 0.05);
}

html.dark-mode body:not(.tm-inner) .badge-beginner {
    background: rgba(11, 143, 94, 0.15);
}

html.dark-mode body:not(.tm-inner) .badge-intermediate {
    background: rgba(31, 115, 211, 0.15);
}

html.dark-mode body:not(.tm-inner) .badge-advanced {
    background: rgba(230, 81, 0, 0.15);
    color: #FFA726;
}

html.dark-mode body:not(.tm-inner) .badge-tag {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-tertiary);
}

@media (max-width: 640px) {
    body:not(.tm-inner) .formula-card {
        padding: var(--space-5);
    }

    body:not(.tm-inner) .formula-hero-title {
        font-size: clamp(28px, 9vw, 36px);
    }

    body:not(.tm-inner) .formula-hero {
        padding-bottom: var(--space-10);
    }

    body:not(.tm-inner) .formula-page>.section:not(.formula-hero) {
        padding-top: var(--space-7);
    }

    body:not(.tm-inner) .formula-grid {
        grid-template-columns: 1fr;
    }

    body:not(.tm-inner) .formula-edge-cases li {
        padding-left: 30px;
    }

    body:not(.tm-inner) .formula-edge-cases li::before {
        top: calc(var(--space-3) + 1px);
    }

    body:not(.tm-inner) .formula-cta-actions {
        width: 100%;
        grid-template-columns: 1fr;
    }

    body:not(.tm-inner) .formula-cta-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ── Marketing Typography Token Bridge (formula legacy + TM) ── */
body:not(.tm-inner) .formula-hero-title {
    font-size: var(--tm-type-page-h1);
    line-height: var(--tm-type-page-h1-lh);
    letter-spacing: var(--tm-type-page-h1-ls);
}

body:not(.tm-inner) .formula-hero-subtitle,
body:not(.tm-inner) .formula-page .formula-definition {
    font-size: var(--tm-type-lead);
    line-height: var(--tm-type-lead-lh);
}

body:not(.tm-inner) .formula-card h2,
body:not(.tm-inner) .formula-grid-card h3,
body:not(.tm-inner) .formula-sidebar .sidebar-card h3,
body:not(.tm-inner) .formula-cta-card h3 {
    font-size: var(--tm-type-card-h3);
    line-height: var(--tm-type-card-h3-lh);
    letter-spacing: var(--tm-type-card-h3-ls);
}

body:not(.tm-inner) .formula-card p,
body:not(.tm-inner) .formula-sidebar .sidebar-card p,
body:not(.tm-inner) .formula-cta-card p,
body:not(.tm-inner) .formula-breakdown li,
body:not(.tm-inner) .formula-edge-cases li {
    font-size: var(--tm-type-body);
    line-height: var(--tm-type-body-lh);
}

body:not(.tm-inner) .breadcrumb ol,
body:not(.tm-inner) .formula-prompt-label,
body:not(.tm-inner) .formula-grid-card .badge {
    font-size: var(--tm-type-label-mono);
    line-height: var(--tm-type-label-mono-lh);
    letter-spacing: var(--tm-type-label-mono-ls);
}


/* partials/comparison-pages.css */
/* ──────────────────────────────────────
   Comparison Pages — vs Competitor
   ────────────────────────────────────── */

.comparison-intro {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 800px;
    margin-bottom: var(--space-7);
}

.comparison-page .cta-actions .btn {
    min-height: 48px;
    min-width: 190px;
    padding-inline: 24px;
    font-size: 16px;
    font-weight: 600;
}

/* Comparison table */
.comparison-table-wrap {
    overflow-x: auto;
    margin: 0 0 var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-sm);
    background: var(--bg-surface-1);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.comparison-table thead th {
    background: var(--bg-surface-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    position: sticky;
    top: 0;
}

.comparison-table .col-us {
    background: rgba(11, 143, 94, 0.04);
}

.comparison-table .col-us,
.comparison-table .col-them {
    min-width: 200px;
}

.comparison-table thead .col-us {
    color: var(--accent-primary);
    background: rgba(11, 143, 94, 0.08);
}

.comparison-table .cell-winner {
    position: relative;
    font-weight: 600;
    color: var(--accent-primary);
    padding-left: calc(var(--space-5) + 12px);
}

.comparison-table .cell-winner::before {
    content: "";
    position: absolute;
    left: var(--space-5);
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
}

.comparison-table .col-them.cell-winner::before {
    background: var(--accent-secondary);
}

.comparison-table .col-them.cell-winner {
    color: var(--accent-secondary);
}

.comparison-table tbody tr:hover {
    background: var(--bg-surface-2);
}

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

/* Feature name column */
.comparison-table td:first-child {
    font-weight: 500;
    color: var(--text-primary);
}

/* Pros/cons grid */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
}

@media (max-width: 700px) {
    .comparison-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
}

.comparison-pros h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: var(--space-5);
    letter-spacing: -0.01em;
}

.comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-list li {
    position: relative;
    padding: var(--space-3) 0 var(--space-3) var(--space-6);
    color: var(--text-secondary);
    line-height: 1.65;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 15px;
}

.comparison-list li:last-child {
    border-bottom: none;
}

.comparison-list-us li::before,
.comparison-list-them li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--space-3) + 7px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.comparison-list-us li::before {
    background: var(--accent-primary);
}

.comparison-list-them li::before {
    background: var(--accent-secondary);
}

/* Verdict */
.comparison-verdict {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: var(--space-8);
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.comparison-verdict h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: var(--space-5);
    letter-spacing: -0.02em;
}

.comparison-verdict p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto;
}

/* Dark mode */
html.dark-mode .comparison-table .col-us {
    background: rgba(11, 143, 94, 0.08);
}

html.dark-mode .comparison-table thead .col-us {
    background: rgba(11, 143, 94, 0.15);
}

html.dark-mode .comparison-table thead th {
    background: var(--bg-surface-2);
}

html.dark-mode .comparison-table-wrap {
    box-shadow: none;
}

html.dark-mode .comparison-verdict {
    background: var(--bg-surface-1);
    box-shadow: none;
}

@media (max-width: 640px) {

    .comparison-page .cta-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .comparison-table th,
    .comparison-table td {
        padding: var(--space-3) var(--space-4);
    }
}

/* ══════════════════════════════════════════════
   TM (Technical Minimalist) Comparison Page Styles
   ══════════════════════════════════════════════ */

/* ─── Comparison Table ─── */
.tm-comparison-table-wrap {
    overflow-x: auto;
    margin: 0 0 var(--space-8);
    border: 1px solid var(--tm-grid-20);
    background: var(--tm-white);
}

.tm-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tm-comparison-table th,
.tm-comparison-table td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    border-bottom: 1px solid var(--tm-grid-20);
}

.tm-comparison-table thead th {
    background: color-mix(in srgb, var(--tm-forest) 5%, transparent);
    font-family: var(--tm-font-mono);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: color-mix(in srgb, var(--tm-forest) 60%, transparent);
    position: sticky;
    top: 0;
}

.tm-comparison-table .col-us {
    background: color-mix(in srgb, var(--tm-mint) 8%, transparent);
}

.tm-comparison-table .col-us,
.tm-comparison-table .col-them {
    min-width: 200px;
}

.tm-comparison-table thead .col-us {
    color: var(--tm-forest);
    background: color-mix(in srgb, var(--tm-mint) 15%, transparent);
    font-weight: 700;
}

.tm-comparison-table .cell-winner {
    font-weight: 600;
    color: var(--tm-forest);
}

.tm-comparison-table .cell-winner::before {
    content: "✓ ";
    color: var(--tm-mint);
}

.tm-comparison-table tbody tr:hover td {
    background: color-mix(in srgb, var(--tm-forest) 3%, transparent);
}

.tm-comparison-table tbody tr:hover .col-us {
    background: color-mix(in srgb, var(--tm-mint) 12%, transparent);
}

.tm-comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.tm-comparison-table td:first-child {
    font-weight: 500;
    color: var(--tm-forest);
    font-family: var(--tm-font-mono);
    font-size: 13px;
}

/* ─── Pros / Cons Grid ─── */
.tm-comparison-pros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--tm-grid-20);
    margin-bottom: var(--space-8);
}

.tm-comparison-pros-col {
    padding: var(--space-6);
}

.tm-comparison-pros-col:first-child {
    border-right: 1px solid var(--tm-grid-20);
}

.tm-comparison-pros-col h2 {
    font-family: var(--tm-font-display);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--space-5);
    color: var(--tm-forest);
    letter-spacing: -0.01em;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--tm-grid-20);
}

@media (max-width: 700px) {
    .tm-comparison-pros-grid {
        grid-template-columns: 1fr;
    }

    .tm-comparison-pros-col:first-child {
        border-right: none;
        border-bottom: 1px solid var(--tm-grid-20);
    }
}

/* ─── Pros/Cons Lists ─── */
.tm-comparison-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tm-comparison-list li {
    position: relative;
    padding: var(--space-3) 0 var(--space-3) var(--space-6);
    color: color-mix(in srgb, var(--tm-forest) 75%, transparent);
    line-height: 1.65;
    border-bottom: 1px solid var(--tm-grid-20);
    font-size: 14px;
}

.tm-comparison-list li:last-child {
    border-bottom: none;
}

.tm-comparison-list-us li::before,
.tm-comparison-list-them li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--space-3) + 7px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tm-comparison-list-us li::before {
    background: var(--tm-mint);
}

.tm-comparison-list-them li::before {
    background: color-mix(in srgb, var(--tm-forest) 35%, transparent);
}

/* ─── Dark Mode ─── */
html.dark-mode .tm-comparison-table-wrap {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .tm-comparison-table .col-us {
    background: rgba(127, 202, 176, 0.08);
}

html.dark-mode .tm-comparison-table thead .col-us {
    background: rgba(127, 202, 176, 0.14);
}

html.dark-mode .tm-comparison-table thead th {
    background: rgba(255, 255, 255, 0.04);
}

html.dark-mode .tm-comparison-pros-grid,
html.dark-mode .tm-comparison-pros-col {
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .tm-comparison-list li {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

@media (max-width: 640px) {
    .tm-comparison-table th,
    .tm-comparison-table td {
        padding: var(--space-3) var(--space-4);
    }
}

/* ── Marketing Typography Token Bridge (comparison legacy + TM) ── */
.comparison-intro,
.comparison-verdict p {
    font-size: var(--tm-type-lead);
    line-height: var(--tm-type-lead-lh);
}

.comparison-pros h2,
.comparison-verdict h2,
.tm-comparison-pros-col h2 {
    font-size: var(--tm-type-card-h3);
    line-height: var(--tm-type-card-h3-lh);
    letter-spacing: var(--tm-type-card-h3-ls);
}

.comparison-table,
.tm-comparison-table,
.comparison-list li,
.tm-comparison-list li {
    font-size: var(--tm-type-body);
    line-height: var(--tm-type-body-lh);
}

.comparison-table thead th,
.tm-comparison-table thead th,
.comparison-table .badge,
.tm-comparison-table .badge {
    font-size: var(--tm-type-label-mono);
    line-height: var(--tm-type-label-mono-lh);
    letter-spacing: var(--tm-type-label-mono-ls);
    text-transform: uppercase;
}


/* partials/blog.css */
/* ──────────────────────────────────────
   Blog Pages
   ────────────────────────────────────── */

/* Hero */
.blog-hero {
    padding-bottom: var(--space-12);
}

.blog-hero-content {
    max-width: 840px;
}

.blog-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.badge-blog-cat {
    background: var(--accent-secondary-soft);
    color: var(--accent-secondary);
    font-size: 12px;
}

.blog-meta-item {
    font-size: 14px;
    color: var(--text-tertiary);
}

.blog-meta-sep {
    color: var(--text-tertiary);
    font-size: 14px;
}

.blog-hero-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.8vw, 56px);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

.blog-hero-subtitle {
    font-size: 18px;
    line-height: 1.62;
    color: var(--text-tertiary);
    max-width: 720px;
    margin-top: 0;
}

.blog-definition {
    font-size: 19px;
    line-height: 1.65;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: var(--space-5);
}

/* Layout: Main + Sidebar */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--space-10);
    align-items: start;
}

.blog-post>.section:not(.blog-hero) {
    padding-top: var(--space-6);
}

@media (max-width: 960px) {
    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        order: -1;
    }
}

/* Blog Content */
.blog-content {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-secondary);
}

.blog-content h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    margin: var(--space-8) 0 var(--space-4);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.blog-content h2:first-child {
    margin-top: 0;
}

.blog-content p {
    margin: 0 0 var(--space-6);
    overflow-wrap: anywhere;
}

.blog-content ul,
.blog-content ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-6);
}

.blog-content li {
    margin-bottom: var(--space-2);
    line-height: 1.65;
}

.blog-content strong {
    color: var(--text-primary);
    font-weight: 600;
}

.blog-content code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.875em;
    padding: 2px 6px;
    background: var(--bg-surface-2);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    vertical-align: baseline;
    line-height: inherit;
    word-break: break-word;
}

.blog-content .code-frame {
    margin: var(--space-5) 0;
    position: relative;
    background: transparent;
}

.blog-content .code-frame pre {
    margin: 0;
}

.blog-content .code-frame code {
    background: none !important;
    padding: 0 !important;
    display: block !important;
    border-radius: var(--radius-compact);
    font-size: 13px;
    line-height: 1.6;
}

.blog-content .code-frame pre code {
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: var(--radius-compact);
}

.blog-content .code-frame .seo-copy-btn {
    right: 10px;
}

.blog-content .code-frame.is-single-line .seo-copy-btn {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.blog-content .code-frame.is-single-line {
    padding-top: 10px;
    padding-bottom: 10px;
}

.blog-content .code-frame.is-single-line.has-copy pre {
    min-height: 34px;
    display: flex;
    align-items: center;
}

.blog-content .formula-cta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 680px;
    margin: var(--space-5) 0 var(--space-2);
}

.blog-content .formula-cta-actions .btn,
.blog-cta-card .formula-cta-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding-inline: 24px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog-content .bullet-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
}

.blog-content .bullet-list li {
    display: block;
    /* Override base.css flex which blockifies inline <code> */
    position: relative;
    padding-left: var(--space-5);
    margin-bottom: var(--space-3);
    line-height: 1.65;
}

.blog-content .bullet-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
}

/* Blog section divider */
.blog-section {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
}

.blog-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Tags */
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-8) 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
}

/* CTA card */
.blog-cta-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-10) var(--space-8) var(--space-8);
    text-align: center;
    margin-top: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.blog-cta-card h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    font-style: normal;
    margin: 0 0 var(--space-4) !important;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.blog-cta-card>p {
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto var(--space-6);
    line-height: 1.65;
    font-size: 15px;
}

/* Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.blog-sidebar .sidebar-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
}

.blog-sidebar .sidebar-card h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
}

.blog-sidebar .sidebar-card>p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
}

.blog-sidebar .sidebar-card .btn-primary {
    min-height: 44px;
    font-weight: 700;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    padding-inline: 20px;
}

.blog-sidebar .sidebar-card .btn {
    width: 100%;
    box-shadow: none;
}

.blog-cta-card .formula-cta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 680px;
    margin: 0 auto var(--space-4);
}

/* Blog Index Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.blog-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.blog-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.blog-card h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-3);
    flex: 1;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}

.blog-card-footer span+span::before {
    content: "\00b7";
    margin-right: var(--space-2);
}

/* Blog category nav (reuse formula pattern) */
.blog-category-nav {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.blog-category-nav a {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    transition: all 0.15s;
}

.blog-category-nav a:hover,
.blog-category-nav a.active {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}

/* Dark mode */
html.dark-mode .blog-cta-card {
    background: var(--bg-surface-2);
}

html.dark-mode .blog-sidebar .sidebar-card {
    background: var(--bg-surface-1);
    border-color: var(--border-subtle);
    box-shadow: none;
}

html.dark-mode .blog-content .code-frame {
    background: transparent;
}

html.dark-mode .blog-card {
    background: var(--bg-surface-1);
    box-shadow: none;
}

html.dark-mode .blog-card:hover {
    box-shadow: var(--shadow-md);
}

html.dark-mode .blog-content code {
    background: var(--bg-surface-2);
}

html.dark-mode .badge-blog-cat {
    background: rgba(31, 115, 211, 0.15);
}

@media (max-width: 640px) {
    .blog-hero {
        padding-bottom: var(--space-10);
    }

    .blog-hero-title {
        font-size: clamp(30px, 10vw, 40px);
        line-height: 1.15;
    }

    .blog-cta-card {
        padding: var(--space-6);
    }

    .blog-cta-card .formula-cta-actions,
    .blog-content .formula-cta-actions {
        grid-template-columns: 1fr;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

}

/* ══════════════════════════════════════════════
   TM (Technical Minimalist) Blog Styles
   ══════════════════════════════════════════════ */

/* ─── Blog Index Grid ─── */
.tm-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-6);
}

.tm-blog-card {
    background: var(--tm-white);
    border: 1px solid var(--tm-grid-20);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s;
}

.tm-blog-card:hover {
    border-color: var(--tm-forest);
}

.tm-blog-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-family: var(--tm-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--tm-forest) 50%, transparent);
}

.tm-blog-card h3 {
    font-family: var(--tm-font-display);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--tm-forest);
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.tm-blog-card p {
    font-size: 14px;
    color: color-mix(in srgb, var(--tm-forest) 65%, transparent);
    line-height: 1.6;
    margin-bottom: var(--space-4);
    flex: 1;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tm-blog-card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    color: color-mix(in srgb, var(--tm-forest) 45%, transparent);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--tm-grid-20);
}

/* ─── Blog Post Hero Meta ─── */
.tm-blog-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.tm-blog-meta-date,
.tm-blog-meta-read {
    font-family: var(--tm-font-mono);
    font-size: 12px;
    color: color-mix(in srgb, var(--tm-forest) 55%, transparent);
}

.tm-blog-meta-sep {
    color: color-mix(in srgb, var(--tm-forest) 30%, transparent);
    font-size: 12px;
}

/* ─── Blog Content Prose (TM-styled) ─── */
.tm-blog-content {
    font-size: 16px;
    line-height: 1.78;
    color: color-mix(in srgb, var(--tm-forest) 78%, transparent);
}

.tm-blog-content h2 {
    font-family: var(--tm-font-display);
    font-size: var(--tm-type-card-h3);
    font-weight: 600;
    margin: var(--space-8) 0 var(--space-4);
    color: var(--tm-forest);
    line-height: var(--tm-type-card-h3-lh);
    letter-spacing: var(--tm-type-card-h3-ls);
    padding-top: var(--space-2);
    border-top: 1px solid var(--tm-grid-20);
}

.tm-blog-content h2:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0;
}

.tm-blog-content h3 {
    font-family: var(--tm-font-display);
    font-size: 17px;
    font-weight: 600;
    margin: var(--space-6) 0 var(--space-3);
    color: var(--tm-forest);
    letter-spacing: -0.005em;
}

.tm-blog-content p {
    margin: 0 0 var(--space-5);
    overflow-wrap: anywhere;
}

.tm-blog-content ul,
.tm-blog-content ol {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-6);
}

.tm-blog-content li {
    margin-bottom: var(--space-2);
    line-height: 1.65;
}

.tm-blog-content strong {
    color: var(--tm-forest);
    font-weight: 600;
}

.tm-blog-content code {
    font-family: var(--tm-font-mono);
    font-size: 0.875em;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--tm-forest) 6%, transparent);
    border: 1px solid var(--tm-grid-20);
    color: var(--tm-forest);
    vertical-align: baseline;
    line-height: inherit;
    word-break: break-word;
}

.tm-blog-content pre {
    background: var(--tm-forest);
    padding: var(--space-5);
    overflow-x: auto;
    margin: var(--space-5) 0;
}

.tm-blog-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: #e8f5e9;
    font-size: var(--tm-type-code-mono);
    line-height: var(--tm-type-code-mono-lh);
    display: block;
}

.tm-blog-content blockquote {
    border-left: 3px solid var(--tm-forest);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-6) 0;
    background: color-mix(in srgb, var(--tm-forest) 4%, transparent);
}

.tm-blog-content blockquote p {
    margin: 0;
    font-style: italic;
}

/* ─── Blog Tags ─── */
.tm-blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--tm-grid-20);
}

/* ─── Dark Mode ─── */
html.dark-mode .tm-blog-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .tm-blog-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

html.dark-mode .tm-blog-content code {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--tm-paper);
}

html.dark-mode .tm-blog-content pre {
    background: #0a1f14;
}

html.dark-mode .tm-blog-content h2 {
    border-top-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .tm-blog-content blockquote {
    background: rgba(255, 255, 255, 0.04);
}

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

/* ── Marketing Typography Token Bridge (blog legacy + TM) ── */
.blog-hero-title {
    font-size: var(--tm-type-page-h1);
    line-height: var(--tm-type-page-h1-lh);
    letter-spacing: var(--tm-type-page-h1-ls);
}

.blog-hero-subtitle,
.blog-definition {
    font-size: var(--tm-type-lead);
    line-height: var(--tm-type-lead-lh);
}

.blog-content,
.tm-blog-content p,
.tm-blog-content li {
    font-size: var(--tm-type-body);
    line-height: var(--tm-type-body-lh);
}

.tm-blog-content h2,
.blog-content h2 {
    font-size: var(--tm-type-section-h2);
    line-height: var(--tm-type-section-h2-lh);
    letter-spacing: var(--tm-type-section-h2-ls);
}

.tm-blog-content h3,
.blog-content h3 {
    font-size: var(--tm-type-card-h3);
    line-height: var(--tm-type-card-h3-lh);
    letter-spacing: var(--tm-type-card-h3-ls);
}

.blog-meta-item,
.blog-meta-sep,
.tm-blog-card-date,
.tm-blog-card-author,
.tm-blog-card-excerpt {
    font-size: var(--tm-type-body-sm);
    line-height: var(--tm-type-body-sm-lh);
}

.badge-blog-cat,
.tm-blog-card-cat,
.tm-blog-card-readtime {
    font-size: var(--tm-type-label-mono);
    line-height: var(--tm-type-label-mono-lh);
    letter-spacing: var(--tm-type-label-mono-ls);
    text-transform: uppercase;
}

.tm-blog-content pre code,
.blog-content .code-frame code,
.blog-content .code-frame pre code {
    font-size: var(--tm-type-code-mono);
    line-height: var(--tm-type-code-mono-lh);
}


/* partials/usecase-pages.css */
/* ──────────────────────────────────────
   Use-Case Landing Pages (/for/:slug)
   ────────────────────────────────────── */

.usecase-index-hero {
    padding-bottom: var(--space-12);
}

.usecase-index-hero .usecase-definition {
    max-width: 760px;
    margin-bottom: var(--space-1);
}

.usecase-index-hero .hero-subtitle {
    font-size: 17px;
    line-height: 1.66;
    color: var(--text-tertiary);
    max-width: 760px;
}

.usecase-index-grid-section {
    padding-top: var(--space-6);
    background: linear-gradient(180deg, rgba(11, 143, 94, 0.04) 0%, rgba(11, 143, 94, 0.015) 42%, transparent 72%);
}

/* Example formula cards grid */
.usecase-examples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    max-width: 1080px;
    margin: 0 auto;
}

.usecase-example-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-6) var(--space-5);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.usecase-example-card:hover {
    border-color: rgba(16, 185, 129, 0.42);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Formula/prompt internals are canonicalized in landing-tm-inner.css */
.usecase-example-prompt {
    margin: 0;
}

.usecase-example-card .tm-formula-surface__code,
.usecase-example-card .code-frame {
    margin: 0;
    position: relative;
    min-height: 0;
}

.usecase-example-card .chip {
    align-self: flex-start;
}

.usecase-example-card pre,
.usecase-example-card code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Pain-point cards — icon + title + description */
.pain-card,
.usecase-feature-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.pain-card {
    padding: var(--space-6);
}

.pain-card:hover,
.usecase-feature-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.pain-card .pain-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: #FFF3E0;
    font-size: 18px;
    margin-bottom: var(--space-4);
}

html.dark-mode .pain-card .pain-icon {
    background: rgba(230, 122, 40, 0.15);
}

.pain-card h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.pain-card p,
.usecase-feature-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* Feature cards — matches homepage feature-card pattern */
.usecase-feature-card {
    padding: var(--space-7);
}

.usecase-feature-card .icon-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-primary);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.usecase-feature-card .icon-stack.blue {
    background: var(--accent-secondary-soft);
    color: var(--accent-secondary);
}

.usecase-feature-card h3 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: var(--space-3);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* Use-case index grid */
.usecase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-6);
}

.usecase-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    min-height: 170px;
}

.usecase-card:hover,
.related-usecase-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.usecase-card:hover .usecase-card-arrow {
    transform: translateX(4px);
}

.usecase-card .badge {
    align-self: flex-start;
    margin-bottom: var(--space-4);
}

.usecase-card h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.usecase-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.usecase-card-arrow {
    margin-top: var(--space-5);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-primary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s;
}

.usecase-arrow-icon {
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    display: inline-block;
}

/* CTA section actions */
.cta-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.cta-actions .btn {
    min-height: 48px;
    min-width: 180px;
    padding-inline: 24px;
    font-size: 16px;
    font-weight: 600;
}

/* Related use-case cards (bottom of individual pages) */
.related-usecase-card {
    background: var(--bg-surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
}

.related-usecase-card .badge {
    align-self: flex-start;
    margin-bottom: var(--space-3);
    font-size: 11px;
}

.related-usecase-card h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-usecase-card p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-usecase-card .usecase-card-arrow {
    margin-top: var(--space-3);
    font-size: 12px;
}

.related-usecases-grid {
    max-width: 900px;
    margin: 0 auto;
}

/* Dark mode overrides */
html.dark-mode .usecase-example-card,
html.dark-mode .pain-card,
html.dark-mode .usecase-feature-card,
html.dark-mode .usecase-card,
html.dark-mode .related-usecase-card {
    background: var(--bg-surface-1);
    box-shadow: none;
}

html.dark-mode .usecase-example-card:hover,
html.dark-mode .pain-card:hover,
html.dark-mode .usecase-feature-card:hover,
html.dark-mode .usecase-card:hover,
html.dark-mode .related-usecase-card:hover {
    box-shadow: var(--shadow-md);
}

html.dark-mode .usecase-example-prompt {
    background: var(--bg-surface-2);
    border-color: var(--border-subtle);
}

html.dark-mode .usecase-index-grid-section {
    background: linear-gradient(180deg, rgba(11, 143, 94, 0.1) 0%, rgba(11, 143, 94, 0.04) 46%, transparent 74%);
}

@media (max-width: 640px) {
    .cta-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .usecase-index-hero {
        padding-bottom: var(--space-9);
    }

    .usecase-index-grid-section {
        padding-top: var(--space-6);
    }

    .usecase-examples {
        grid-template-columns: 1fr;
    }

    .usecase-grid {
        grid-template-columns: 1fr;
    }

    .usecase-example-card {
        padding: var(--space-5);
    }
}

@media (max-width: 1100px) and (min-width: 641px) {
    .usecase-examples {
        grid-template-columns: 1fr;
        max-width: 760px;
    }
}

/* ══════════════════════════════════════════════
   TM (Technical Minimalist) Use Case Page Styles
   ══════════════════════════════════════════════ */

/* ─── Use Case Index Grid ─── */
.usecase-grid.tm-inner-card-grid {
    /* TM inner-card-grid handles layout; this modifier handles card behavior */
}

/* ─── Hero Formula Card (tm-nc) variant for use case hero ─── */
.tm-usecase-hero-card {
    background: var(--tm-white);
    border: 1px solid var(--tm-grid-20);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ─── Pain Point Cards (TM variant) ─── */
.tm-pain-card,
.tm-usecase-feature-card {
    background: var(--tm-white);
    border: 1px solid var(--tm-grid-20);
    padding: var(--space-6);
    transition: border-color 0.15s;
}

.tm-pain-card:hover,
.tm-usecase-example-card:hover,
.tm-usecase-feature-card:hover,
.tm-related-usecase-card:hover {
    border-color: var(--tm-forest);
}

.tm-pain-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: color-mix(in srgb, #b45309 10%, transparent);
    border: 1px solid rgba(180, 83, 9, 0.25);
    font-size: 16px;
    margin-bottom: var(--space-4);
}

.tm-pain-card h3,
.tm-usecase-feature-card h3 {
    font-family: var(--tm-font-display);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--tm-forest);
    letter-spacing: -0.01em;
}

.tm-pain-card p,
.tm-usecase-feature-card p {
    font-size: 14px;
    color: color-mix(in srgb, var(--tm-forest) 65%, transparent);
    line-height: 1.65;
    margin: 0;
}

/* ─── Use Case Example Cards (TM variant) ─── */
.usecase-examples.tm-inner-card-grid {
    /* TM card grid handles layout */
}

.tm-usecase-example-card {
    background: var(--tm-white);
    border: 1px solid var(--tm-grid-20);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: border-color 0.15s;
}

.tm-usecase-example-prompt {
    background: color-mix(in srgb, var(--tm-forest) 4%, transparent);
    border: 1px solid var(--tm-grid-20);
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
    font-style: italic;
    color: color-mix(in srgb, var(--tm-forest) 70%, transparent);
    line-height: 1.55;
}

.tm-usecase-example-prompt::before {
    content: "\201C";
    color: var(--tm-forest);
    font-weight: 700;
    font-style: normal;
}

.tm-usecase-example-prompt::after {
    content: "\201D";
    color: var(--tm-forest);
    font-weight: 700;
    font-style: normal;
}

/* ─── Feature Cards (TM variant) ─── */
.tm-usecase-feature-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: color-mix(in srgb, var(--tm-mint) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--tm-mint) 35%, transparent);
    font-size: 16px;
    margin-bottom: var(--space-4);
}

/* ─── Related Use Cases (TM variant) ─── */
.related-usecases-grid.tm-inner-card-grid {
    /* TM grid handles layout; max-width from legacy rule kept */
}

.tm-related-usecase-card {
    background: var(--tm-white);
    border: 1px solid var(--tm-grid-20);
    padding: var(--space-5);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s;
}

.tm-related-usecase-card .tm-badge {
    align-self: flex-start;
    margin-bottom: var(--space-3);
}

.tm-related-usecase-card h3 {
    font-family: var(--tm-font-display);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--tm-forest);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tm-related-usecase-card p {
    font-size: 13px;
    color: color-mix(in srgb, var(--tm-forest) 60%, transparent);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.tm-related-usecase-card-arrow {
    margin-top: var(--space-4);
    font-family: var(--tm-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--tm-forest);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─── Dark Mode ─── */
html.dark-mode .tm-pain-card,
html.dark-mode .tm-usecase-example-card,
html.dark-mode .tm-usecase-feature-card,
html.dark-mode .tm-related-usecase-card,
html.dark-mode .tm-usecase-hero-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark-mode .tm-pain-card:hover,
html.dark-mode .tm-usecase-example-card:hover,
html.dark-mode .tm-usecase-feature-card:hover,
html.dark-mode .tm-related-usecase-card:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

html.dark-mode .tm-usecase-example-prompt {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 640px) {
    .tm-usecase-example-card,
    .tm-pain-card,
    .tm-usecase-feature-card {
        padding: var(--space-5);
    }
}

/* ── Marketing Typography Token Bridge (use-case legacy + TM) ── */
.usecase-index-hero .hero-subtitle,
.tm-usecase-hero-sub,
.tm-usecase-example-prompt {
    font-size: var(--tm-type-lead);
    line-height: var(--tm-type-lead-lh);
}

.pain-card h3,
.usecase-feature-card h3,
.usecase-card h3,
.tm-pain-card h3,
.tm-usecase-feature-card h3,
.tm-related-usecase-card h3 {
    font-size: var(--tm-type-card-h3);
    line-height: var(--tm-type-card-h3-lh);
    letter-spacing: var(--tm-type-card-h3-ls);
}

.pain-card p,
.usecase-feature-card p,
.usecase-card p,
.tm-pain-card p,
.tm-usecase-feature-card p,
.tm-related-usecase-card p {
    font-size: var(--tm-type-body);
    line-height: var(--tm-type-body-lh);
}

.usecase-card-arrow,
.tm-related-usecase-card-arrow,
.tm-usecase-example-chip,
.tm-usecase-example-tag {
    font-size: var(--tm-type-label-mono);
    line-height: var(--tm-type-label-mono-lh);
    letter-spacing: var(--tm-type-label-mono-ls);
    text-transform: uppercase;
}


/* partials/premium-saas.css */
/*
 * Premium SaaS landing surface v3
 * - centered hero hierarchy
 * - reduced top gap
 * - subtle professional motion
 * - SVG-first visual system
 */

:root {
    --space-saas-section: 128px;
    --space-saas-section-sm: 84px;
    --tracking-tight: -0.04em;
    --tracking-normal: -0.01em;
    --lh-tight: 1.08;
    --lh-base: 1.6;
    --bg-surface-premium: rgba(255, 255, 255, 0.75);
    --bg-surface-premium-soft: rgba(255, 255, 255, 0.62);
    --border-glass: rgba(14, 20, 28, 0.12);
    --hero-noise-opacity: 0.14;
}

html.dark-mode {
    --bg-surface-premium: rgba(255, 255, 255, 0.03);
    --bg-surface-premium-soft: rgba(255, 255, 255, 0.02);
    --border-glass: rgba(255, 255, 255, 0.1);
    --hero-noise-opacity: 0.06;
}

.premium-section {
    padding: var(--space-saas-section) 0;
    position: relative;
}

.premium-h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 7vw, 68px);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-5);
    text-wrap: balance;
}

.premium-h2 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.5vw, 46px);
    line-height: 1.12;
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}

.premium-subtitle {
    font-size: clamp(17px, 2.1vw, 20px);
    line-height: var(--lh-base);
    color: var(--text-muted);
    max-width: 660px;
    margin-bottom: var(--space-7);
}

.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--tracking-normal);
    background: var(--bg-surface-premium-soft);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.premium-btn-primary {
    position: relative;
    overflow: hidden;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-btn-primary:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 12px 26px rgba(16, 185, 129, 0.3);
}

.glass-panel {
    background: var(--bg-surface-premium);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.24);
}

html.dark-mode .glass-panel {
    box-shadow: 0 24px 62px rgba(0, 0, 0, 0.42);
}

.hero-stage {
    padding-top: clamp(24px, 4vw, 56px);
    padding-bottom: clamp(56px, 9vw, 96px);
    overflow: hidden;
    isolation: isolate;
}

.hero-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(1200px circle at 50% 12%, transparent 0%, rgba(4, 8, 16, 0.22) 100%);
    z-index: -1;
}

html:not(.dark-mode) .hero-stage {
    background:
        radial-gradient(900px circle at 16% 14%, rgba(16, 185, 129, 0.19), transparent 42%),
        radial-gradient(980px circle at 88% 12%, rgba(59, 130, 246, 0.18), transparent 46%),
        linear-gradient(180deg, #ecf4f6 0%, #e8f0fa 52%, #f3f7fd 100%);
}

html:not(.dark-mode) .hero-stage::after {
    background: radial-gradient(1200px circle at 50% 12%, rgba(255, 255, 255, 0) 0%, rgba(148, 163, 184, 0.1) 100%);
}

.hero-mesh-layer,
.hero-noise-layer,
.hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-mesh-layer {
    z-index: -4;
}

.hero-mesh-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.96;
}

html:not(.dark-mode) .hero-mesh-layer img {
    opacity: 0.32;
    filter: saturate(0.8) brightness(1.25);
}

.hero-glow {
    z-index: -3;
    filter: blur(72px);
    opacity: 0.28;
}

.hero-glow-a {
    inset: auto auto 6% 8%;
    width: 36vw;
    max-width: 540px;
    min-width: 240px;
    height: 32vh;
    max-height: 320px;
    background: radial-gradient(circle at 40% 45%, rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0));
    animation: driftGlowA 32s ease-in-out infinite;
}

.hero-glow-b {
    inset: 2% 4% auto auto;
    width: 38vw;
    max-width: 600px;
    min-width: 250px;
    height: 34vh;
    max-height: 360px;
    background: radial-gradient(circle at 58% 44%, rgba(59, 130, 246, 0.55), rgba(59, 130, 246, 0));
    animation: driftGlowB 38s ease-in-out infinite;
}

.hero-noise-layer {
    z-index: -2;
    background-image: url("/img/landing/v3/noise-tile.svg");
    background-repeat: repeat;
    opacity: var(--hero-noise-opacity);
    mix-blend-mode: soft-light;
}

html:not(.dark-mode) .hero-noise-layer {
    opacity: 0.04;
}

.hero-shell {
    max-width: 1020px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 2.4vw, 28px);
    text-align: center;
}

.hero-copy {
    align-items: center;
}

.hero-badge {
    margin-bottom: var(--space-5);
}

.hero-badge-new {
    color: var(--accent-primary);
}

.hero-badge-divider {
    opacity: 0.54;
}

.hero-title {
    max-width: 14ch;
}

.hero-accent {
    color: var(--accent-primary);
    background: linear-gradient(92deg, #34d399, #10b981, #5eead4);
    background-size: 180% 180%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: accentShift 7s ease-in-out infinite;
}

.hero-subtitle {
    margin-left: auto;
    margin-right: auto;
    max-width: 740px;
}

.hero-cta-row {
    justify-content: center;
    gap: var(--space-4);
}

.hero-cta-primary,
.hero-cta-secondary {
    border-radius: var(--radius-pill);
    padding: 0 32px;
    height: 52px;
    font-weight: 700;
}

.hero-cta-secondary {
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
}

.hero-microcopy-row {
    margin-top: var(--space-3);
}

.hero-microcopy {
    font-size: 14px;
    letter-spacing: -0.005em;
}

.hero-proof-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    max-width: 760px;
}

.hero-proof-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-compact);
    padding: 11px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

html:not(.dark-mode) .hero-proof-card {
    background: rgba(255, 255, 255, 0.62);
}

html:not(.dark-mode) .hero-subtitle {
    color: #425168;
}

html:not(.dark-mode) .hero-microcopy {
    color: #5f6f86;
}

.hero-proof-card strong {
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.1;
}

.hero-proof-card span {
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: -0.005em;
}

.hero-demo-shell {
    width: 100%;
    margin-top: clamp(22px, 3vw, 30px);
    max-width: 980px;
}

.demo-window {
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.14);
}

.demo-window-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-glass);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
}

html.dark-mode .demo-window-chrome {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.demo-window-chrome .dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    display: inline-flex;
}

.demo-window-chrome .dot.red {
    background: #ef4444;
}

.demo-window-chrome .dot.amber {
    background: #f59e0b;
}

.demo-window-chrome .dot.green {
    background: #10b981;
}

.demo-window-url {
    margin-left: auto;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
    color: var(--text-muted);
}

.demo-window-body {
    padding: clamp(22px, 3vw, 32px);
}

.demo-title {
    margin-bottom: 6px;
    font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: -0.02em;
}

.demo-subtitle {
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 15px;
}

.demo-input-wrapper {
    position: relative;
}

.demo-input-wrapper input {
    width: 100%;
    min-height: 56px;
    border-radius: var(--radius-compact);
    border: 1px solid var(--border-glass);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-primary);
    padding: 0 160px 0 18px;
    font-size: 16px;
    transition: border-color 220ms ease, box-shadow 220ms ease;
}

html.dark-mode .demo-input-wrapper input {
    background: rgba(255, 255, 255, 0.05);
}

.demo-input-wrapper input:focus-visible {
    border-color: rgba(16, 185, 129, 0.8);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
    outline: none;
}

.demo-submit-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    bottom: 8px;
    height: auto;
    border-radius: var(--radius-control);
    font-weight: 700;
    padding: 0 24px;
}

.demo-result {
    margin-top: 16px;
    position: relative;
    border-radius: var(--radius-compact);
    border: 1px solid var(--border-glass);
    min-height: 224px;
    overflow: hidden;
    background:
        linear-gradient(140deg, rgba(59, 130, 246, 0.09), transparent 30%),
        linear-gradient(25deg, rgba(16, 185, 129, 0.08), transparent 34%),
        rgba(0, 0, 0, 0.24);
}

.demo-spinner {
    min-height: 224px;
    display: grid;
    place-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-muted);
}

.spinner-ring {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--accent-primary);
    animation: spin 0.9s linear infinite;
}

.demo-output-card {
    position: relative;
    padding: 16px;
    min-height: 224px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.32s ease, transform 0.32s ease;
}

.demo-output-card.reveal-in {
    opacity: 1;
    transform: translateY(0);
}

.demo-metrics {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.demo-metrics span {
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-pill);
    padding: 5px 10px;
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.07);
}

.demo-output-card h3 {
    margin-bottom: 10px;
    font-size: 20px;
    letter-spacing: -0.02em;
}

.demo-preview-code {
    margin: 0;
    border-radius: var(--radius-control);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 7, 16, 0.62);
    color: #e3ecff;
    padding: 14px;
    font-size: 13px;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    word-break: break-word;
}

.demo-preview-notes {
    margin: 12px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

.demo-gate-overlay {
    position: absolute;
    inset: 42% 0 0;
    padding: 44px 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    gap: 10px;
    background: linear-gradient(to top, rgba(12, 12, 13, 0.96) 52%, rgba(12, 12, 13, 0.42) 86%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.demo-gate-overlay p {
    color: var(--text-primary);
    font-size: 13px;
    max-width: 420px;
    line-height: 1.45;
}

.premium-marquee-wrapper {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 4rem;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.trust-strip .premium-marquee-content {
    animation-duration: 34s;
}

.premium-marquee-content {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-around;
    gap: 3.5rem;
    min-width: 100%;
    animation: marqueeScroll 30s linear infinite;
}

.premium-marquee-item {
    color: var(--text-muted);
    opacity: 0.56;
    transition: opacity 220ms ease, color 220ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.premium-marquee-item:hover {
    opacity: 0.92;
    color: var(--text-primary);
}

.trust-strip {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--border-glass);
    border-bottom: 1px solid var(--border-glass);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.08));
}

html:not(.dark-mode) .trust-strip {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.24));
}

.trust-logo {
    font-size: 13px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-weight: 700;
}

.mode-switch-section {
    padding-top: clamp(64px, 8vw, 94px);
}

.mode-switch-title {
    margin-bottom: var(--space-8);
}

.mode-switch-shell {
    padding: 18px;
}

.mode-switch-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.mode-switch-tab {
    border: 1px solid var(--border-glass);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.mode-switch-tab:hover {
    color: var(--text-primary);
    border-color: rgba(16, 185, 129, 0.42);
}

.mode-switch-tab.is-active {
    color: var(--text-primary);
    border-color: rgba(16, 185, 129, 0.56);
    background: rgba(16, 185, 129, 0.16);
}

.mode-switch-stage {
    position: relative;
    min-height: clamp(220px, 36vw, 380px);
    border-radius: var(--radius-surface);
    overflow: hidden;
    border: 1px solid var(--border-glass);
    background: rgba(0, 0, 0, 0.28);
}

.mode-switch-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px) scale(0.995);
    transition: opacity 380ms ease, transform 380ms ease;
    margin: 0;
}

.mode-switch-panel.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 2;
}

.mode-switch-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mode-switch-panel figcaption {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    border-radius: var(--radius-control);
    padding: 10px 12px;
    font-size: 13px;
    color: #e7eef8;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(5, 12, 22, 0.56);
    backdrop-filter: blur(6px);
}

.feature-visual {
    width: 72px;
    height: 72px;
    margin-bottom: 22px;
    display: block;
}

.feature-visual-panel {
    width: min(100%, 360px);
    height: auto;
    border-radius: var(--radius-compact);
    border: 1px solid var(--border-glass);
    margin-bottom: 18px;
}

.feature-wide-visual {
    flex: 1;
    width: 100%;
    min-width: 280px;
    max-width: 460px;
    border-radius: var(--radius-compact);
    border: 1px solid var(--border-glass);
    object-fit: cover;
}

.usecases-visual {
    margin: 0 0 var(--space-7);
    padding: 10px;
    border-radius: var(--radius-surface);
}

.usecases-visual img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-surface);
    display: block;
}

.testimonials-section {
    overflow: hidden;
}

.testimonials-accent {
    margin: -4px 0 24px;
}

.testimonials-accent img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-surface);
    opacity: 0.7;
}

/* v6: live HTML/CSS visuals replacing static section images */
.mode-switch-stage {
    min-height: clamp(320px, 40vw, 460px);
    background: linear-gradient(160deg, rgba(10, 25, 42, 0.64), rgba(8, 18, 34, 0.42));
}

html:not(.dark-mode) .mode-switch-stage {
    background: linear-gradient(170deg, rgba(240, 247, 255, 0.95), rgba(233, 243, 255, 0.88));
}

.mode-switch-panel {
    padding: 14px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 10px;
}

.mode-switch-panel figcaption {
    position: static;
    border-radius: var(--radius-control);
    padding: 10px 12px;
    font-size: 13px;
    color: #e7eef8;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(5, 12, 22, 0.56);
    backdrop-filter: blur(6px);
}

html:not(.dark-mode) .mode-switch-panel figcaption {
    color: #3f516b;
    border-color: rgba(75, 90, 114, 0.18);
    background: rgba(255, 255, 255, 0.82);
}

.mode-ui {
    border-radius: var(--radius-compact);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(170deg, rgba(5, 17, 34, 0.72), rgba(10, 28, 46, 0.56));
    padding: 14px;
    display: grid;
    gap: 12px;
    min-height: 100%;
}

html:not(.dark-mode) .mode-ui {
    border-color: rgba(75, 90, 114, 0.22);
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.92), rgba(244, 250, 255, 0.88));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.mode-ui-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mode-ui-pill {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #d4dfef;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.015em;
}

html:not(.dark-mode) .mode-ui-pill {
    border-color: rgba(75, 90, 114, 0.24);
    background: rgba(255, 255, 255, 0.8);
    color: #44566f;
}

.mode-ui-prompt-row {
    border-radius: var(--radius-compact);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
}

html:not(.dark-mode) .mode-ui-prompt-row {
    border-color: rgba(75, 90, 114, 0.18);
    background: rgba(255, 255, 255, 0.78);
}

.mode-ui-input-label {
    color: #9fb3cb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.mode-ui-input-value {
    color: #e6eefb;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mode-ui-button {
    border-radius: var(--radius-control);
    padding: 7px 12px;
    background: linear-gradient(120deg, rgba(16, 185, 129, 1), rgba(13, 166, 116, 0.95));
    color: #04130e;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

html:not(.dark-mode) .mode-ui-input-label {
    color: #5f7490;
}

html:not(.dark-mode) .mode-ui-input-value {
    color: #2d3e55;
}

.mode-ui-output-grid,
.mode-ui-sql-grid,
.mode-ui-script-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mode-ui-output-card,
.mode-ui-table,
.mode-ui-metrics {
    border-radius: var(--radius-compact);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(5, 15, 30, 0.5);
    padding: 10px;
}

html:not(.dark-mode) .mode-ui-output-card,
html:not(.dark-mode) .mode-ui-table,
html:not(.dark-mode) .mode-ui-metrics {
    border-color: rgba(75, 90, 114, 0.2);
    background: rgba(255, 255, 255, 0.86);
}

.mode-ui-output-title {
    font-size: 12px;
    font-weight: 700;
    color: #9fb3cb;
    margin-bottom: 8px;
}

html:not(.dark-mode) .mode-ui-output-title {
    color: #60758e;
}

.mode-ui-output-card code,
.mode-ui-query {
    display: block;
    border-radius: var(--radius-control);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(2, 8, 18, 0.6);
    color: #b3cff9;
    font-size: 12px;
    line-height: 1.45;
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html:not(.dark-mode) .mode-ui-output-card code,
html:not(.dark-mode) .mode-ui-query {
    border-color: rgba(75, 90, 114, 0.16);
    background: rgba(241, 247, 255, 0.9);
    color: #2858a9;
}

.mode-ui-actions {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

.mode-ui-actions span,
.metric-chips span {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 4px 8px;
    font-size: 10px;
    color: #d5dfef;
}

html:not(.dark-mode) .mode-ui-actions span,
html:not(.dark-mode) .metric-chips span {
    border-color: rgba(75, 90, 114, 0.18);
    color: #4c6079;
    background: rgba(255, 255, 255, 0.8);
}

.mode-ui-checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 7px;
}

.mode-ui-checks li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dce7f8;
    font-size: 12px;
}

html:not(.dark-mode) .mode-ui-checks li {
    color: #384a63;
}

.mode-ui-checks .dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.mode-ui-checks .dot.is-pass {
    background: #10b981;
}

.mode-ui-checks .dot.is-warn {
    background: #f59e0b;
}

.mode-ui-table {
    display: grid;
    gap: 6px;
}

.mode-ui-table .table-head,
.mode-ui-table .table-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.7fr;
    gap: 8px;
}

.mode-ui-table .table-head span {
    color: #8da5c4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mode-ui-table .table-row {
    border-radius: var(--radius-control);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 8px;
}

.mode-ui-table .table-row span {
    color: #dce7f8;
    font-size: 11px;
}

html:not(.dark-mode) .mode-ui-table .table-head span {
    color: #637b98;
}

html:not(.dark-mode) .mode-ui-table .table-row {
    border-color: rgba(75, 90, 114, 0.12);
    background: rgba(241, 247, 255, 0.72);
}

html:not(.dark-mode) .mode-ui-table .table-row span {
    color: #334760;
}

.mode-ui-metrics {
    display: grid;
    gap: 8px;
}

.metric-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #dce7f8;
}

.metric-line b {
    color: #10b981;
    font-weight: 800;
}

.metric-bar {
    height: 7px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.metric-bar span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #10b981, #4f9ff6);
}

.metric-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

html:not(.dark-mode) .metric-line {
    color: #445870;
}

.mode-ui-flow {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    gap: 7px;
    align-items: center;
}

.flow-node {
    border-radius: var(--radius-control);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 7px 8px;
    font-size: 11px;
    color: #dce7f8;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    white-space: nowrap;
}

.flow-node.is-active {
    border-color: rgba(16, 185, 129, 0.48);
    color: #9bf0d2;
}

.flow-link {
    height: 2px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.35), rgba(79, 159, 246, 0.32));
}

.script-lines {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.script-lines span {
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
}

html:not(.dark-mode) .flow-node {
    border-color: rgba(75, 90, 114, 0.2);
    color: #435972;
    background: rgba(255, 255, 255, 0.8);
}

.feature-visual {
    width: min(100%, 340px);
    height: 170px;
}

.feature-visual-formula {
    border-radius: var(--radius-compact);
    border: 1px solid var(--border-glass);
    background: linear-gradient(160deg, rgba(9, 22, 40, 0.68), rgba(7, 18, 34, 0.58));
    padding: 14px;
    display: grid;
    gap: 8px;
}

.feature-visual-formula .fv-head {
    height: 10px;
    border-radius: var(--radius-pill);
    width: 62%;
    background: rgba(79, 159, 246, 0.72);
}

.feature-visual-formula .fv-row {
    border-radius: var(--radius-control);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 8px 1fr;
    gap: 8px;
    align-items: center;
}

.feature-visual-formula .fv-row span:last-child {
    height: 6px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.2);
}

.feature-visual-formula .fv-row.is-pass span:first-child,
.feature-visual-formula .fv-row.is-warn span:first-child {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
}

.feature-visual-formula .fv-row.is-pass span:first-child {
    background: #10b981;
}

.feature-visual-formula .fv-row.is-warn span:first-child {
    background: #f59e0b;
}

html:not(.dark-mode) .feature-visual-formula {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(244, 250, 255, 0.9));
}

html:not(.dark-mode) .feature-visual-formula .fv-row {
    border-color: rgba(75, 90, 114, 0.14);
    background: rgba(241, 247, 255, 0.72);
}

.feature-wide-visual {
    min-width: 320px;
    min-height: 200px;
    background: linear-gradient(160deg, rgba(9, 22, 40, 0.68), rgba(7, 18, 34, 0.58));
    padding: 14px;
    display: grid;
    gap: 10px;
    object-fit: unset;
}

html:not(.dark-mode) .feature-wide-visual {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(244, 250, 255, 0.9));
}

.feature-wide-sql .fws-code {
    height: 34px;
    border-radius: var(--radius-control);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(90deg, rgba(79, 159, 246, 0.35), rgba(16, 185, 129, 0.18));
}

.feature-wide-sql .fws-chart {
    height: 84px;
    border-radius: var(--radius-control);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: end;
    gap: 8px;
    padding: 10px;
}

.feature-wide-sql .fws-chart span {
    flex: 1;
    border-radius: var(--radius-control) var(--radius-control) 0 0;
    background: linear-gradient(180deg, rgba(79, 159, 246, 0.95), rgba(16, 185, 129, 0.58));
    animation: chartPulse 5s ease-in-out infinite;
}

.feature-wide-sql .fws-chart span:nth-child(2) { animation-delay: 0.2s; }
.feature-wide-sql .fws-chart span:nth-child(3) { animation-delay: 0.35s; }
.feature-wide-sql .fws-chart span:nth-child(4) { animation-delay: 0.5s; }
.feature-wide-sql .fws-chart span:nth-child(5) { animation-delay: 0.65s; }

.feature-wide-sql .fws-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-wide-sql .fws-chips span {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #d5dfef;
    font-size: 11px;
    padding: 5px 9px;
}

.feature-wide-script .fws-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.feature-wide-script .fws-flow span {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #dce7f8;
    text-align: center;
    font-size: 11px;
    padding: 6px 8px;
}

.feature-wide-script .fws-script-lines {
    border-radius: var(--radius-control);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    padding: 12px;
    display: grid;
    gap: 7px;
}

.feature-wide-script .fws-script-lines span {
    height: 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.18);
}

.feature-wide-script .fws-script-lines span:first-child { width: 78%; }
.feature-wide-script .fws-script-lines span:nth-child(2) { width: 66%; }
.feature-wide-script .fws-script-lines span:nth-child(3) { width: 85%; }
.feature-wide-script .fws-script-lines span:nth-child(4) { width: 58%; }

.feature-wide-script .fws-script-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature-wide-script .fws-script-meta span {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #dce7f8;
    font-size: 11px;
    padding: 5px 10px;
}

.feature-wide-script .fws-script-meta .is-pass {
    border-color: rgba(16, 185, 129, 0.44);
    color: #9af0d1;
}

html:not(.dark-mode) .feature-wide-sql .fws-code,
html:not(.dark-mode) .feature-wide-sql .fws-chart,
html:not(.dark-mode) .feature-wide-script .fws-script-lines {
    border-color: rgba(75, 90, 114, 0.14);
    background: rgba(241, 247, 255, 0.72);
}

html:not(.dark-mode) .feature-wide-sql .fws-chips span,
html:not(.dark-mode) .feature-wide-script .fws-flow span,
html:not(.dark-mode) .feature-wide-script .fws-script-meta span {
    border-color: rgba(75, 90, 114, 0.16);
    color: #4c6079;
    background: rgba(255, 255, 255, 0.8);
}

.usecases-visual {
    padding: 16px;
}

.usecases-board {
    border-radius: var(--radius-surface);
    border: 1px solid var(--border-glass);
    padding: 14px;
    display: grid;
    gap: 10px;
    background: linear-gradient(160deg, rgba(11, 24, 42, 0.62), rgba(12, 30, 48, 0.46));
}

html:not(.dark-mode) .usecases-board {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(242, 248, 255, 0.84));
}

.usecases-lane {
    border-radius: var(--radius-compact);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 12px;
}

html:not(.dark-mode) .usecases-lane {
    border-color: rgba(75, 90, 114, 0.16);
    background: rgba(241, 247, 255, 0.72);
}

.lane-tag {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #dce7f8;
    width: fit-content;
}

.lane-finance .lane-tag { color: #9bf0d1; }
.lane-ops .lane-tag { color: #8cb9ff; }
.lane-marketing .lane-tag { color: #f6c16f; }

.lane-chart {
    display: flex;
    align-items: end;
    gap: 7px;
    min-height: 38px;
}

.lane-chart.bars span {
    width: 16px;
    border-radius: var(--radius-control) var(--radius-control) 0 0;
    background: linear-gradient(180deg, #10b981, #3ea785);
}

.lane-chart.bars span:nth-child(1) { height: 36%; }
.lane-chart.bars span:nth-child(2) { height: 58%; }
.lane-chart.bars span:nth-child(3) { height: 68%; }
.lane-chart.bars span:nth-child(4) { height: 84%; }

.lane-chart.timeline span {
    flex: 1;
    height: 10px;
    border-radius: var(--radius-pill);
    background: rgba(79, 159, 246, 0.34);
}

.lane-chart.timeline span:nth-child(2) { background: rgba(79, 159, 246, 0.58); }
.lane-chart.timeline span:nth-child(3) { background: rgba(79, 159, 246, 0.78); }

.lane-chart.line span {
    width: 100%;
    height: 2px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.3), rgba(245, 158, 11, 0.92));
    position: relative;
}

.lane-chart.line span::before,
.lane-chart.line span::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: #f59e0b;
}

.lane-chart.line span::before { left: 34%; }
.lane-chart.line span::after { right: 8%; }

html:not(.dark-mode) .lane-tag {
    border-color: rgba(75, 90, 114, 0.16);
    color: #4c6079;
    background: rgba(255, 255, 255, 0.8);
}

.testimonials-accent-wave {
    width: 100%;
    display: block;
    border-radius: var(--radius-surface);
    border: 1px solid var(--border-glass);
    background: linear-gradient(170deg, rgba(7, 22, 44, 0.72), rgba(8, 28, 52, 0.52));
}

html:not(.dark-mode) .testimonials-accent-wave {
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.94), rgba(243, 249, 255, 0.9));
}

.accent-wave-dotted {
    stroke-dasharray: 7 8;
    animation: waveShift 14s linear infinite;
}

.wave-point {
    fill: #93f4d5;
    animation: wavePulse 3.4s ease-in-out infinite;
}

.wave-point:nth-of-type(2) { animation-delay: 0.4s; }
.wave-point:nth-of-type(3) { animation-delay: 0.8s; }

.interactive-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --spot-x: 50%;
    --spot-y: 50%;
    transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 250ms ease, box-shadow 250ms ease;
}

.interactive-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--spot-x) var(--spot-y), rgba(16, 185, 129, 0.13), transparent 44%);
    opacity: 0;
    transition: opacity 220ms ease;
    z-index: 0;
}

.interactive-card > * {
    position: relative;
    z-index: 1;
}

.interactive-card:hover {
    transform: translateY(-4px);
    border-color: rgba(16, 185, 129, 0.38);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.26);
}

html.dark-mode .interactive-card:hover {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.46);
}

.interactive-card:hover::before {
    opacity: 1;
}

[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 560ms cubic-bezier(0.16, 1, 0.3, 1), transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--reveal-delay, 0) * 70ms);
}

.reveal-delay-1 { --reveal-delay: 1; }
.reveal-delay-2 { --reveal-delay: 2; }
.reveal-delay-3 { --reveal-delay: 3; }
.reveal-delay-4 { --reveal-delay: 4; }

[data-reveal].reveal-in {
    opacity: 1;
    transform: translateY(0);
}

.animate-fade-up {
    opacity: 0;
    animation: floatUpFade 780ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 24px;
}

.bento-col-span-2,
.bento-col-span-3 {
    grid-column: span 1;
}

.premium-faq-item {
    border-bottom: 1px solid var(--border-glass);
}

.premium-faq-item:first-child {
    border-top: 1px solid var(--border-glass);
}

.premium-faq-summary {
    padding: 24px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 220ms ease;
}

.premium-faq-summary::-webkit-details-marker {
    display: none;
}

.premium-faq-summary:hover {
    color: var(--accent-primary);
}

.premium-faq-summary::after {
    content: "+";
    font-size: 24px;
    font-weight: 300;
    transition: transform 250ms ease, color 250ms ease;
    color: var(--text-muted);
}

.premium-faq-item[open] .premium-faq-summary::after {
    transform: rotate(45deg);
    color: var(--accent-primary);
}

.premium-faq-content {
    padding-bottom: 24px;
    color: var(--text-muted);
    line-height: var(--lh-base);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.final-cta-section {
    text-align: center;
    overflow: hidden;
}

.cta-aurora-plate {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(1200px, 120vw);
    aspect-ratio: 16 / 7;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0.52;
    pointer-events: none;
}

.cta-aurora-core,
.cta-aurora-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.cta-aurora-core {
    width: 78%;
    height: 54%;
    border-radius: var(--radius-pill);
    background:
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.28), rgba(16, 185, 129, 0) 70%),
        radial-gradient(circle at 72% 42%, rgba(79, 159, 246, 0.24), rgba(79, 159, 246, 0) 66%);
    filter: blur(3px);
}

.cta-aurora-ring {
    border-radius: var(--radius-pill);
    border: 1px solid rgba(79, 159, 246, 0.22);
}

.cta-aurora-ring-a {
    width: 88%;
    height: 66%;
}

.cta-aurora-ring-b {
    width: 70%;
    height: 44%;
    border-color: rgba(16, 185, 129, 0.24);
}

html:not(.dark-mode) .cta-aurora-ring-a {
    border-color: rgba(79, 159, 246, 0.18);
}

html:not(.dark-mode) .cta-aurora-ring-b {
    border-color: rgba(16, 185, 129, 0.22);
}

.final-cta-section .container {
    position: relative;
    z-index: 2;
}

@keyframes floatUpFade {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes marqueeScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes driftGlowA {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(24px, -14px, 0);
    }
}

@keyframes driftGlowB {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-26px, 18px, 0);
    }
}

@keyframes accentShift {
    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes chartPulse {
    0%,
    100% {
        opacity: 0.9;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.08);
    }
}

@keyframes waveShift {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -200;
    }
}

@keyframes wavePulse {
    0%,
    100% {
        opacity: 0.72;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

@media (min-width: 769px) {
    .bento-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .bento-col-span-2 {
        grid-column: span 2;
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .bento-col-span-3 {
        grid-column: span 3;
        display: flex;
        align-items: center;
        gap: 42px;
    }
}

@media (max-width: 1000px) {
    .hero-proof-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .premium-section {
        padding: var(--space-saas-section-sm) 0;
    }

    .hero-stage {
        padding-top: clamp(12px, 3vw, 20px);
        padding-bottom: clamp(44px, 9vw, 68px);
    }

    .premium-h1 {
        font-size: clamp(34px, 10.5vw, 50px);
        margin-bottom: var(--space-4);
    }

    .hero-cta-row {
        flex-direction: column;
        align-items: stretch;
        width: min(100%, 460px);
    }

    .hero-cta-primary,
    .hero-cta-secondary {
        width: 100%;
        justify-content: center;
    }

    .hero-proof-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: 14px;
    }

    .hero-demo-shell {
        margin-top: 18px;
    }

    .hero-proof-card {
        padding: 10px 8px;
    }

    .hero-proof-card strong {
        font-size: 16px;
    }

    .hero-proof-card span {
        font-size: 11px;
    }

    .mode-switch-shell {
        padding: 14px;
    }

    .mode-switch-tabs {
        gap: 8px;
    }

    .mode-switch-tab {
        font-size: 12px;
        padding: 7px 11px;
    }

    .mode-switch-stage {
        min-height: 520px;
    }

    .mode-switch-panel figcaption {
        margin: 0;
    }

    .feature-visual {
        width: 100%;
        height: 150px;
    }

    .feature-wide-visual {
        min-width: 0;
        max-width: 100%;
        min-height: 180px;
    }

    .demo-input-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .demo-input-wrapper input {
        min-height: 50px;
        padding: 0 14px;
    }

    .demo-submit-btn {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        min-height: 46px;
    }

    .usecases-visual {
        padding: 8px;
        margin-bottom: var(--space-6);
    }

    .mode-ui-output-grid,
    .mode-ui-sql-grid,
    .mode-ui-script-panels {
        grid-template-columns: 1fr;
    }

    .mode-ui-flow {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .mode-ui-flow .flow-link {
        display: none;
    }

    .usecases-lane {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .feature-wide-script .fws-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .premium-marquee-content {
        animation-duration: 30s;
        gap: 2.2rem;
    }

    .trust-logo {
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .cta-aurora-plate {
        width: 160vw;
        opacity: 0.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .premium-marquee-content,
    .hero-glow,
    .hero-accent,
    .interactive-card,
    .interactive-card::before,
    .mode-switch-panel,
    [data-reveal] {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    [data-reveal] {
        opacity: 1 !important;
    }
}


/* partials/landing-tm.css */
/* ═══════════════════════════════════════════════════════════════════════
   Landing – Technical Minimalist (TM) Design System
   ───────────────────────────────────────────────────────────────────────
   All classes prefixed with tm- to prevent any collision with lv4- or
   core styles. Uses --tm-* tokens from base.css exclusively.
   Shared semantic control and surface radii.
   No box-shadow. Typography hierarchy enforced via JetBrains Mono labels.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────────────── */

.tm-page {
  background-color: var(--tm-paper);
  background-image: none;
  min-height: 100vh;
  color: var(--tm-forest);
  font-family: var(--tm-font-body);
  --tm-shell-max: 1280px;
  --tm-divider-max: 1500px;
  --tm-shell-gutter: 20px;
  --tm-divider-inset: 0px;
  /* Tag/Badge system tokens */
  --tm-tag-height: 24px;
  --tm-tag-pad-x: 10px;
  --tm-tag-gap: 6px;
  --tm-tag-font-size: 10px;
  --tm-tag-letter: 0.12em;
  --tm-tag-dot-size: 8px;
  --tm-surface-card: var(--tm-paper);
  --tm-surface-subcard: var(--tm-white);
  --tm-section-rhythm-y: var(--space-24);
  --tm-brand-lockup-offset-y: 2px;
  --tm-brand-wordmark-offset-y: -2px;
}

.tm-page>main {
  padding-top: 64px;
}

body.tm-page.has-site-banner>main {
  padding-top: calc(64px + var(--site-banner-offset, 0px));
}

html.dark-mode .tm-page {
  background-image: none;
}

/* ── Navigation ──────────────────────────────────────────────────────── */

.tm-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: 64px;
  background-color: rgba(247, 247, 245, 0.90);
  border-bottom: 1px solid var(--tm-grid-20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.has-site-banner .tm-nav {
  top: var(--site-banner-offset, 0px);
}

html.dark-mode .tm-nav {
  background-color: rgba(17, 19, 17, 0.84);
}

.tm-nav-inner {
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

@media (min-width: 640px) {
  .tm-nav-inner {
    padding: 0 24px;
  }
}

@media (min-width: 1024px) {
  .tm-nav-inner {
    padding: 0 32px;
  }
}

.tm-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tm-forest);
}

.tm-nav-logo-box {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Sharp corners per TM spec */
  border-radius: var(--radius-compact);
}

.tm-nav-logo-box img {
  width: 32px;
  height: 32px;
  display: block;
}

.tm-nav-wordmark {
  font-family: var(--tm-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--tm-forest);
  line-height: 1;
  position: relative;
  top: var(--tm-brand-wordmark-offset-y);
}

.tm-nav-logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  transform: translateY(var(--tm-brand-lockup-offset-y));
}

.tm-nav-subline {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.65;
  line-height: 1;
  margin-top: 1px;
}

/* Public nav must use one lockup size across homepage + inner pages. */
body.tm-page .tm-nav-logo {
  gap: 10px;
}

body.tm-page .tm-nav-logo-box,
body.tm-page .tm-nav-logo-box img {
  width: 32px;
  height: 32px;
}

body.tm-page .tm-nav-logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  transform: translateY(var(--tm-brand-lockup-offset-y));
}

body.tm-page .tm-nav-wordmark {
  position: relative;
  top: var(--tm-brand-wordmark-offset-y);
  font-family: var(--tm-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1;
}

body.tm-page .tm-nav-subline {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  margin-top: 1px;
  text-transform: uppercase;
}

.tm-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
}

.tm-nav-links a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tm-forest);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.tm-nav-links a:hover {
  opacity: 1;
}

.tm-nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tm-nav .tm-theme-toggle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--tm-forest);
}

.tm-nav .tm-theme-toggle:hover {
  border-color: var(--tm-grid-20);
  background: var(--tm-grid-10);
  color: var(--tm-forest);
}

.tm-nav .tm-theme-toggle:focus-visible {
  outline: 2px solid var(--tm-forest);
  outline-offset: 2px;
  border-color: var(--tm-grid-20);
  background: var(--tm-grid-10);
  box-shadow: none;
}

.tm-nav .tm-theme-toggle svg {
  width: 16px;
  height: 16px;
}

/* Auth avatar in top nav: keep circular and aligned with app-shell profile color language. */
.tm-nav .user-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-mint) 30%, var(--tm-paper));
  color: var(--tm-forest);
  font-family: var(--tm-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  box-shadow: none;
}

.tm-nav .user-avatar:hover {
  border-color: var(--tm-grid-30);
  background: color-mix(in srgb, var(--tm-mint) 40%, var(--tm-paper));
  box-shadow: none;
}

.tm-nav .user-dropdown {
  border-radius: var(--radius-surface);
}

html.dark-mode .tm-nav .user-avatar {
  border-color: var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-mint) 28%, var(--tm-paper));
  color: var(--tm-forest);
}

/* ── Shared Button Base ──────────────────────────────────────────────── */

.tm-btn {
  --tm-btn-height: 44px;
  --tm-btn-pad-x: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--tm-btn-height);
  padding: 0 var(--tm-btn-pad-x);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  transition: opacity 0.2s, background-color 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.tm-btn:focus-visible {
  outline: 2px solid var(--tm-forest);
  outline-offset: 2px;
}

.tm-btn-primary,
.tm-btn-solid {
  background: var(--tm-forest);
  color: var(--tm-white);
  border-color: var(--tm-forest);
}

.tm-btn-primary:hover,
.tm-btn-solid:hover {
  opacity: 0.92;
}

.tm-btn-secondary,
.tm-btn-ghost {
  background: transparent;
  color: var(--tm-forest);
  border-color: var(--tm-grid-20);
}

.tm-btn-secondary:hover,
.tm-btn-ghost:hover {
  border-color: var(--tm-grid-30);
}

.tm-btn-tertiary {
  background: transparent;
  color: var(--tm-forest);
  border-color: transparent;
  opacity: 0.72;
}

.tm-btn-tertiary:hover {
  opacity: 1;
}

.tm-btn-sm {
  --tm-btn-height: 44px;
  --tm-btn-pad-x: 14px;
}

.tm-btn-md {
  --tm-btn-height: 44px;
  --tm-btn-pad-x: 16px;
}

.tm-btn-lg {
  --tm-btn-height: 44px;
  --tm-btn-pad-x: 24px;
}

.tm-btn-block {
  width: 100%;
  justify-content: center;
}

/* ── Status / Confidence Badge ───────────────────────────────────────── */
/*
   An inline technical indicator: [ ■ LIVE · VALIDATED ]
   Square dot + mono text + 1px border.
*/

/* Shared tag shell for legacy + canonical labels/chips */
.tm-chip,
.tm-label,
.tm-badge,
.tm-hero-eyebrow-pill,
.tm-nc-badge,
.tm-usecase-chip,
.chip,
.badge,
.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tm-tag-height);
  gap: var(--tm-tag-gap);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-control);
  background: var(--tm-chip-bg);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  font-weight: 500;
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  line-height: var(--tm-type-label-mono-lh);
  color: color-mix(in srgb, var(--tm-forest) 70%, transparent);
}

.tm-chip,
.tm-badge,
.badge,
.chip {
  border-color: var(--tm-grid-20);
}

.tm-label,
.tm-hero-eyebrow-pill {
  background: var(--tm-label-bg);
}

.tm-label-dot,
.tm-chip-dot,
.tm-badge-dot,
.tm-sq-dot {
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  flex-shrink: 0;
  border-radius: 0;
  display: inline-block;
  background: var(--tm-sem-dot-color, var(--tm-sem-platform));
}

.tm-badge-dot.mint {
  background-color: var(--tm-mint);
}

.tm-badge-dot.coral {
  background-color: var(--tm-coral);
}

.tm-badge-dot.gold {
  background-color: var(--tm-gold);
}

.tm-badge-dot.forest {
  background-color: var(--tm-forest);
}

.tm-sq-dot.mint {
  background: var(--tm-mint);
}

.tm-sq-dot.forest {
  background: var(--tm-forest);
}

.tm-sq-dot.coral {
  background: var(--tm-coral);
}

.tm-sq-dot.gold {
  background: var(--tm-gold);
}

.tm-label-text,
.tm-chip-text,
.tm-badge-text {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  font-weight: 500;
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  line-height: var(--tm-type-label-mono-lh);
}

.tm-sem-platform {
  --tm-sem-dot-color: var(--tm-sem-platform);
}

.tm-sem-sheets {
  --tm-sem-dot-color: var(--tm-sem-sheets);
}

.tm-sem-sql {
  --tm-sem-dot-color: var(--tm-sem-sql);
}

.tm-sem-script {
  --tm-sem-dot-color: var(--tm-sem-script);
}

.tm-sem-regex {
  --tm-sem-dot-color: var(--tm-sem-regex);
}

.tm-sem-status-positive {
  --tm-sem-dot-color: var(--tm-sem-status-positive);
}

.tm-sem-status-attention {
  --tm-sem-dot-color: var(--tm-sem-status-attention);
}

.tm-sem-status-alert {
  --tm-sem-dot-color: var(--tm-sem-status-alert);
}

.tm-dot-none::before,
.tm-dot-none .tm-label-dot,
.tm-dot-none .tm-chip-dot,
.tm-dot-none .tm-badge-dot,
.tm-dot-none .tm-sq-dot {
  display: none !important;
}

.tm-chip::before,
.tm-label::before {
  content: "";
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  flex-shrink: 0;
  border-radius: 0;
  display: none;
  background: var(--tm-sem-dot-color);
}

.tm-sem-platform::before,
.tm-sem-status-positive::before,
.tm-sem-status-attention::before,
.tm-sem-status-alert::before {
  display: inline-block;
}

.tm-chip.tm-dot-explicit::before,
.tm-label.tm-dot-explicit::before {
  display: none;
}

.tm-chip:has(.tm-sq-dot, .tm-badge-dot, .tm-label-dot, .tm-chip-dot)::before,
.tm-label:has(.tm-sq-dot, .tm-badge-dot, .tm-label-dot, .tm-chip-dot)::before {
  display: none;
}

.tm-chip .tm-sq-dot,
.tm-chip .tm-badge-dot,
.tm-chip .tm-label-dot,
.tm-chip .tm-chip-dot,
.tm-label .tm-sq-dot,
.tm-label .tm-badge-dot,
.tm-label .tm-label-dot,
.tm-label .tm-chip-dot {
  background: var(--tm-sem-dot-color, var(--tm-sem-platform)) !important;
}

.tm-chip--neutral {
  opacity: 0.76;
}

.tm-chip--interactive {
  cursor: pointer;
  transition: opacity 0.16s, border-color 0.16s, background-color 0.16s;
}

.tm-chip--interactive:hover,
.tm-chip--active {
  opacity: 1;
  border-color: var(--tm-forest-30, var(--tm-grid-30));
  background: var(--tm-forest-10);
}

/* ── Vertical Rule (left of subtitle) ───────────────────────────────── */

.tm-vr {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.tm-vr::before {
  content: "";
  display: block;
  width: 1px;
  flex-shrink: 0;
  min-height: 100%;
  background: var(--tm-grid-30);
  align-self: stretch;
}

/* ── Section Container ───────────────────────────────────────────────── */

.tm-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 640px) {
  .tm-page {
    --tm-shell-gutter: 24px;
    --tm-divider-inset: 0px;
  }

  .tm-container {
    padding: 0 24px;
  }
}

@media (min-width: 1024px) {
  .tm-page {
    --tm-shell-gutter: 32px;
    --tm-divider-inset: 0px;
  }

  .tm-container {
    padding: 0 32px;
  }
}

.tm-section {
  padding: var(--space-24) 0;
  border-top: none;
  position: relative;
}

.tm-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(var(--tm-divider-max) - (var(--tm-divider-inset) * 2)),
      calc(100% - ((var(--tm-shell-gutter) * 2) + (var(--tm-divider-inset) * 2))));
  border-top: 1px solid var(--tm-grid-20);
}

.tm-section-faq {
  padding-bottom: var(--tm-section-rhythm-y);
}

.tm-section-faq::after {
  display: none;
}

.tm-section-cta {
  padding: var(--tm-section-rhythm-y) 0 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.tm-section-cta::before {
  display: block;
}

.tm-section-cta::after {
  display: none;
}

/* ── Section Header (centered label + h2 + p) ───────────────────────── */

.tm-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-16);
}

.tm-section-kicker,
.tm-section-label,
.tm-inner-section-label {
  display: inline-flex;
  align-items: center;
  min-height: var(--tm-tag-height);
  gap: var(--tm-tag-gap);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-control);
  background: transparent;
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  font-weight: 500;
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.76;
  margin-bottom: var(--space-4);
}

.tm-h2 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-section-h2);
  font-weight: 700;
  line-height: var(--tm-type-section-h2-lh);
  letter-spacing: var(--tm-type-section-h2-ls);
  color: var(--tm-forest);
  margin-bottom: var(--space-4);
}

.tm-section-p {
  font-family: var(--tm-font-body);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--tm-forest);
  opacity: 0.65;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.tm-hero-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 48px);
  align-items: stretch;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 40px;
  padding-bottom: 48px;
}

@media (min-width: 1024px) {
  .tm-hero-shell {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

.tm-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 100%;
}

.tm-hero-copy-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.tm-hero-copy-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.tm-hero-right {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  align-self: stretch;
}

.tm-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-tag-gap);
  border: 1px solid var(--tm-grid-20);
  width: fit-content;
}

.tm-hero-eyebrow-index {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.5;
}

.tm-h1 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-display-lg);
  font-weight: 700;
  line-height: var(--tm-type-display-lg-lh);
  letter-spacing: var(--tm-type-display-lg-ls);
  color: var(--tm-forest);
}

.tm-h1 .tm-h1-accent {
  color: var(--tm-forest);
  display: inline;
}

.tm-hero-subtitle {
  font-family: var(--tm-font-body);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.65;
  color: var(--tm-forest);
  opacity: 0.68;
  max-width: 620px;
}

.tm-hero-cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.tm-hero-microcopy {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.tm-hero-micro-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.55;
}

/* ── Technical Mockup Card (hero right) ─────────────────────────────── */

.tm-mockup-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-card);
  border-radius: var(--radius-surface);
  overflow: hidden;
  position: relative;
}

html.dark-mode .tm-mockup-card {
  background: rgba(255, 255, 255, 0.04);
}

.tm-mockup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
}

html.dark-mode .tm-mockup-header {
  background: rgba(255, 255, 255, 0.03);
}

.tm-mockup-header-label {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
}

.tm-mockup-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tm-mockup-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
}

html.dark-mode .tm-mockup-input-row {
  background: rgba(255, 255, 255, 0.04);
}

.tm-mockup-input-label {
  font-family: var(--tm-font-mono);
  font-size: 11px;
  color: var(--tm-forest);
  opacity: 0.5;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-mockup-input-btn {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: none;
  padding: 4px 10px;
  background: var(--tm-forest);
  color: var(--tm-white);
  border: none;
  border-radius: var(--radius-control);
  cursor: default;
  white-space: nowrap;
}

html.dark-mode .tm-mockup-input-btn {
  color: #181816;
}

.tm-mockup-divider {
  border: none;
  border-top: 1px solid var(--tm-grid-20);
  margin: 0;
}

.tm-mockup-output {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tm-mockup-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.tm-mockup-output-label {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.55;
}

.tm-mockup-code-box {
  padding: var(--space-4);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  font-family: var(--tm-font-mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--tm-forest);
  overflow-x: auto;
  word-break: break-all;
}

html.dark-mode .tm-mockup-code-box {
  background: rgba(255, 255, 255, 0.04);
}

.tm-mockup-meta-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.tm-mockup-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 8px;
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.7;
}

/* ── Hero Proof Grid (2×2 stat tiles) ───────────────────────────────── */

.tm-proof-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-surface);
  overflow: hidden;
  margin-top: auto;
  margin-bottom: 18px;
}

.tm-proof-tile {
  padding: var(--space-5) var(--space-5);
  border-right: 1px solid var(--tm-grid-20);
  border-bottom: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tm-proof-tile:nth-child(even) {
  border-right: none;
}

.tm-proof-tile:nth-last-child(-n+2) {
  border-bottom: none;
}

html.dark-mode .tm-proof-tile {
  background: rgba(255, 255, 255, 0.03);
}

.tm-proof-stat {
  font-family: var(--tm-font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tm-forest);
}

.tm-proof-stat.accent {
  color: var(--tm-coral);
}

.tm-proof-label {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.55;
}

/* ── Trust Metrics Bar ───────────────────────────────────────────────── */

.tm-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: var(--space-5) var(--space-8);
}

.tm-section-metrics {
  padding: 0;
}

.tm-trust-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) clamp(var(--space-6), 4vw, var(--space-14));
  text-align: center;
  position: relative;
}

.tm-trust-metric+.tm-trust-metric::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 28px;
  background: var(--tm-grid-20);
}

.tm-trust-stat {
  font-family: var(--tm-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tm-forest);
}

.tm-trust-label {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.5;
}

/* ── Mode Switcher (tabs for formula/sql/script) ─────────────────────── */

.tm-mode-shell {
  border: 1px solid var(--tm-grid-10);
  background: var(--tm-surface-card);
  overflow: hidden;
}

html.dark-mode .tm-mode-shell {
  background: rgba(255, 255, 255, 0.03);
}

.tm-mode-tabs {
  display: flex;
  border-bottom: 1px solid var(--tm-grid-10);
  overflow-x: auto;
  scrollbar-width: none;
}

.tm-mode-tabs::-webkit-scrollbar {
  display: none;
}

.tm-mode-tab {
  padding: var(--space-4) var(--space-6);
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.55;
  cursor: pointer;
  border: none;
  background: transparent;
  border-right: 1px solid var(--tm-grid-10);
  position: relative;
  white-space: nowrap;
  transition: opacity 0.15s, background-color 0.15s;
  border-radius: var(--radius-compact);
}

.tm-mode-tab:last-child {
  border-right: none;
}

.tm-mode-tab:hover {
  opacity: 0.85;
  background: var(--tm-grid-10);
}

.tm-mode-tab.is-active {
  opacity: 1;
  background: var(--tm-paper);
  color: var(--tm-forest);
}

/* Bottom indicator bar on active tab */
.tm-mode-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--tm-forest);
}

html.dark-mode .tm-mode-tab.is-active::after {
  background: var(--tm-forest);
  /* mint in dark mode from token */
}

.tm-mode-stage {
  position: relative;
  min-height: 320px;
}

.tm-mode-panel {
  display: none;
  margin: 0;
  padding: var(--space-6);
}

.tm-mode-panel.is-active {
  display: block;
}

.tm-mode-panel figcaption {
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-0);
  max-width: 72ch;
  color: var(--tm-text-primary);
  opacity: 0.84;
  font-family: var(--font-sans);
  font-size: clamp(14px, 0.82vw, 16px);
  line-height: 1.4;
  letter-spacing: 0;
}

html.dark-mode .tm-mode-panel figcaption {
  color: var(--tm-text-primary);
  opacity: 0.86;
}

/* Harmonize "See it in action" internals to TM formula-surface language */
.tm-mode-shell .mode-ui {
  border-radius: var(--radius-surface);
  border: 1px solid var(--tm-grid-10);
  background: var(--tm-paper);
  padding: var(--space-4);
  gap: var(--space-3);
  box-shadow: none;
}

.tm-mode-shell .mode-ui-toolbar {
  gap: var(--space-2);
}

.tm-mode-shell .mode-ui-pill {
  border-radius: var(--radius-compact);
  border: 1px solid var(--tm-grid-10);
  background: var(--tm-surface-subcard);
  color: var(--tm-forest);
  opacity: 0.72;
  padding: 0 var(--tm-tag-pad-x);
  min-height: var(--tm-tag-height);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  font-weight: 500;
}

.tm-mode-shell .mode-ui-prompt-row {
  border-radius: var(--radius-compact);
  border: 1px solid var(--tm-grid-10);
  background: var(--tm-paper);
  padding: var(--space-3) var(--space-4);
}

.tm-mode-shell .mode-ui-input-label,
.tm-mode-shell .mode-ui-output-title {
  color: var(--tm-forest);
  opacity: 0.52;
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tm-mode-shell .mode-ui-input-value {
  color: var(--tm-forest);
  opacity: 0.72;
  font-family: var(--tm-font-mono);
  font-size: 11px;
}

.tm-mode-shell .mode-ui-actions span,
.tm-mode-shell .metric-chips span,
.tm-mode-shell .flow-node {
  border-radius: var(--radius-control);
  border: 1px solid var(--tm-grid-10);
  background: var(--tm-paper);
  color: var(--tm-forest);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: none;
}

.tm-mode-shell .mode-ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-control);
  border: 1px solid var(--tm-forest);
  background: var(--tm-forest);
  color: var(--tm-paper);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: none;
  font-weight: 500;
  box-shadow: none;
  min-height: var(--tm-copy-btn-height);
  padding: 0 var(--tm-copy-btn-pad-x);
  padding-top: 1px;
}

.tm-mode-shell .mode-ui-output-grid,
.tm-mode-shell .mode-ui-sql-grid,
.tm-mode-shell .mode-ui-script-panels {
  gap: 1px;
  background: var(--tm-grid-10);
  padding: 1px;
}

.tm-mode-shell .mode-ui-output-card,
.tm-mode-shell .mode-ui-table,
.tm-mode-shell .mode-ui-metrics {
  border-radius: var(--radius-surface);
  border: 0;
  background: var(--tm-paper);
  padding: var(--space-3);
}

.tm-mode-shell .mode-ui-output-card code,
.tm-mode-shell .mode-ui-query {
  border-radius: var(--radius-surface);
  border: 1px solid var(--tm-grid-10);
  background: var(--tm-formula-bg-subtle);
  color: var(--tm-forest);
  padding: var(--space-3);
  font-family: var(--tm-font-mono);
  font-size: 11.5px;
  line-height: 1.55;
}

.tm-mode-shell .mode-ui-checks li,
.tm-mode-shell .metric-line,
.tm-mode-shell .mode-ui-table .table-row span {
  color: var(--tm-forest);
  opacity: 0.72;
}

.tm-mode-shell .mode-ui-table .table-head span {
  color: var(--tm-forest);
  opacity: 0.56;
}

.tm-mode-shell .mode-ui-table .table-row {
  border-radius: 0;
  border: 1px solid var(--tm-grid-10);
  background: var(--tm-paper);
}

.tm-mode-shell .metric-line b {
  color: var(--tm-forest);
}

.tm-mode-shell .metric-bar {
  height: 6px;
  border-radius: 0;
  border: 1px solid var(--tm-grid-10);
  background: var(--tm-paper);
}

.tm-mode-shell .metric-bar span {
  border-radius: 0;
  background: var(--tm-forest);
}

.tm-mode-shell .flow-link {
  height: 1px;
  border-radius: 0;
  background: var(--tm-grid-10);
}

.tm-mode-shell .flow-node.is-active {
  border-color: var(--tm-grid-30);
  background: var(--tm-forest-10);
  color: var(--tm-forest);
  opacity: 1;
}

.tm-mode-shell .script-lines span {
  height: 6px;
  border-radius: 0;
  background: var(--tm-grid-10);
}

html.dark-mode .tm-mode-shell .mode-ui,
html.dark-mode .tm-mode-shell .mode-ui-prompt-row,
html.dark-mode .tm-mode-shell .mode-ui-output-card,
html.dark-mode .tm-mode-shell .mode-ui-table,
html.dark-mode .tm-mode-shell .mode-ui-metrics,
html.dark-mode .tm-mode-shell .mode-ui-table .table-row,
html.dark-mode .tm-mode-shell .mode-ui-actions span,
html.dark-mode .tm-mode-shell .metric-chips span,
html.dark-mode .tm-mode-shell .flow-node {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--tm-grid-20);
}

html.dark-mode .tm-mode-shell .mode-ui-button {
  background: var(--tm-forest);
  border-color: var(--tm-forest);
  color: var(--tm-paper);
}

/* Light-mode specificity bridge to override legacy premium-saas gradients */
html:not(.dark-mode) .tm-mode-shell .mode-ui,
html:not(.dark-mode) .tm-mode-shell .mode-ui-prompt-row,
html:not(.dark-mode) .tm-mode-shell .mode-ui-output-card,
html:not(.dark-mode) .tm-mode-shell .mode-ui-table,
html:not(.dark-mode) .tm-mode-shell .mode-ui-metrics,
html:not(.dark-mode) .tm-mode-shell .mode-ui-actions span,
html:not(.dark-mode) .tm-mode-shell .metric-chips span,
html:not(.dark-mode) .tm-mode-shell .flow-node {
  background: var(--tm-paper);
  border-color: var(--tm-grid-10);
  box-shadow: none;
}

html:not(.dark-mode) .tm-mode-shell .mode-ui-pill {
  background: var(--tm-surface-subcard);
  border-color: var(--tm-grid-10);
  color: var(--tm-forest);
}

html:not(.dark-mode) .tm-mode-shell .mode-ui-output-card code,
html:not(.dark-mode) .tm-mode-shell .mode-ui-query {
  background: var(--tm-formula-bg-subtle);
  border-color: var(--tm-grid-10);
  color: var(--tm-forest);
}

/* ── Features Bento ──────────────────────────────────────────────────── */

.tm-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  /* 1px gap = hairline divider via container bg */
  background: var(--tm-grid-20);
  /* the gap color */
  border: 1px solid var(--tm-grid-20);
}

.tm-bento-cell {
  background: var(--tm-paper);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
  overflow: hidden;
}

html.dark-mode .tm-bento-cell {
  background: rgba(255, 255, 255, 0.02);
}

/* Colored left border accent per cell */
.tm-bento-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.tm-bento-cell.coral::before {
  background: var(--tm-coral);
}

.tm-bento-cell.mint::before {
  background: var(--tm-mint);
}

.tm-bento-cell.gold::before {
  background: var(--tm-gold);
}

.tm-bento-cell.forest::before {
  background: var(--tm-forest);
}

.tm-bento-index {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.45;
}

.tm-bento-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.tm-bento-cell-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-forest);
  opacity: 0.95;
  flex-shrink: 0;
}

.tm-bento-cell-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tm-bento-title {
  font-family: var(--tm-font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--tm-forest);
}

.tm-bento-desc {
  font-family: var(--tm-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--tm-forest);
  opacity: 0.62;
  flex: 1;
}

.tm-bento-sample {
  margin-top: auto;
  border: 1px solid var(--tm-grid-20);
  padding: var(--space-4);
  background: var(--tm-surface-subcard);
  font-family: var(--tm-font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--tm-forest);
  opacity: 0.85;
  overflow: hidden;
}

html.dark-mode .tm-bento-sample {
  background: rgba(255, 255, 255, 0.04);
}

.tm-bento-sample-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.tm-bento-sample-label {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.7;
}

.tm-bento-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-tag-gap);
  min-height: var(--tm-tag-height);
  border: 1px solid var(--tm-grid-20);
  padding: 0 var(--tm-tag-pad-x);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  background: var(--tm-surface-subcard);
}

.tm-bento-status-badge .dot {
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  background: var(--tm-forest);
  border-radius: var(--radius-surface);
}

html.dark-mode .tm-bento-status-badge {
  background: rgba(255, 255, 255, 0.04);
}

.tm-bento-format-grid {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--tm-grid-20);
  border: 1px solid var(--tm-grid-20);
}

.tm-bento-format-item {
  min-height: 48px;
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  font-family: var(--tm-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  background: var(--tm-surface-subcard);
}

html.dark-mode .tm-bento-format-item {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Use Cases ───────────────────────────────────────────────────────── */

.tm-usecase-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--tm-grid-20);
  border: 1px solid var(--tm-grid-20);
}

.tm-usecase-card {
  background: var(--tm-paper);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: background-color 0.2s;
}

html.dark-mode .tm-usecase-card {
  background: rgba(255, 255, 255, 0.02);
}

.tm-usecase-card:hover {
  background: var(--tm-grid-10);
}

html.dark-mode .tm-usecase-card:hover {
  background: rgba(255, 255, 255, 0.05);
}

.tm-usecase-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  border-radius: var(--radius-compact);
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}

html.dark-mode .tm-usecase-icon {
  background: rgba(255, 255, 255, 0.04);
}

.tm-usecase-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--tm-forest);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.tm-usecase-label {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tm-usecase-label.finance,
.tm-usecase-label.ops,
.tm-usecase-label.mkt {
  color: var(--tm-forest);
  opacity: 0.6;
}

.tm-usecase-title {
  font-family: var(--tm-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tm-forest);
}

.tm-usecase-desc {
  font-family: var(--tm-font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tm-forest);
  opacity: 0.6;
  flex: 1;
}

.tm-usecase-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.tm-usecase-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.68;
  line-height: 1;
}

html.dark-mode .tm-usecase-chip {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Testimonials ────────────────────────────────────────────────────── */

.tm-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  background: transparent;
  border: none;
}

.tm-testimonial {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: relative;
}

html.dark-mode .tm-testimonial {
  background: rgba(255, 255, 255, 0.02);
}

.tm-testimonial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.tm-testimonial-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tm-quote-mark {
  width: 16px;
  height: 16px;
  stroke: var(--tm-forest);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0.74;
}

.tm-stars {
  display: flex;
  gap: 2px;
  color: var(--tm-gold);
  opacity: 0.9;
}

.tm-star {
  width: 8px;
  height: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  opacity: 1;
}

.tm-testimonial .tm-badge {
  min-height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  gap: var(--tm-tag-gap);
  background: var(--tm-surface-subcard);
  border-color: var(--tm-grid-20);
}

html.dark-mode .tm-testimonial .tm-badge {
  background: rgba(255, 255, 255, 0.04);
}

.tm-testimonial .tm-badge-dot {
  width: 8px;
  height: 8px;
}

.tm-testimonial .tm-badge-text {
  opacity: 0.7;
}

.tm-testimonial-text {
  font-family: var(--tm-font-mono);
  font-size: 12px;
  line-height: 1.62;
  letter-spacing: 0.01em;
  color: var(--tm-forest);
  opacity: 0.8;
  flex: 1;
  font-style: italic;
}

.tm-testimonial-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  border-top: 1px solid var(--tm-grid-20);
  margin: 0 calc(var(--space-6) * -1) calc(var(--space-6) * -1);
  padding: var(--space-4) var(--space-6);
  background: var(--tm-surface-subcard);
}

html.dark-mode .tm-testimonial-footer {
  background: rgba(255, 255, 255, 0.04);
}

.tm-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--tm-grid-20);
  border-radius: 0;
  /* Square per spec */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tm-surface-subcard);
  color: var(--tm-forest);
}

.tm-avatar svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
}

html.dark-mode .tm-avatar.c {
  color: var(--tm-forest);
}

.tm-testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tm-author-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tm-forest);
  line-height: 1.3;
}

.tm-author-role {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.45;
  line-height: 1.3;
}

.tm-testimonial-signal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--tm-forest);
  opacity: 0.68;
  flex-shrink: 0;
}

.tm-testimonial-signal svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Pricing ─────────────────────────────────────────────────────────── */

.tm-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--tm-grid-20);
}

.tm-billing-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--tm-grid-20); border-radius: var(--radius-control); margin: 0 0 20px; background: var(--tm-white); }
.tm-billing-option { border: 0; background: transparent; color: var(--text-secondary); min-height: 44px; padding: 0 14px; border-radius: var(--radius-control); font: 600 13px/1.4 var(--font-body); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.tm-billing-option.is-active { background: var(--da-green-soft); color: var(--da-ink); }
.tm-billing-discount { color: inherit; font-size: 11px; letter-spacing: 0; }

.tm-plan-card {
  padding: var(--space-8);
  border-right: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
}

.tm-plan-card:last-child {
  border-right: none;
}

html.dark-mode .tm-plan-card {
  background: rgba(255, 255, 255, 0.03);
}

/* Featured plan (Pro): solid forest bg */
.tm-plan-card.is-featured {
  --plan-ink: #ffffff;
  background: var(--tm-forest);
  color: var(--plan-ink);
}

html.dark-mode .tm-plan-card.is-featured {
  --plan-ink: #17231d;
  background: var(--tm-forest);
  color: var(--plan-ink);
}

.tm-plan-name {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
  min-height: 1.2em;
}

.tm-plan-card.is-featured .tm-plan-name {
  color: var(--plan-ink);
  opacity: 1;
}

.tm-plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-height: 56px;
}

.tm-plan-price-strike {
  font-family: var(--tm-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--tm-forest);
  opacity: 0.58;
}

.tm-plan-launch {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tm-forest) 74%, var(--tm-mint));
  margin-top: calc(var(--space-2) * -1);
  min-height: 1.2em;
}

.tm-plan-card.is-featured .tm-plan-launch {
  color: var(--plan-ink);
  opacity: 1;
}

.tm-plan-launch-placeholder {
  visibility: hidden;
}

.tm-plan-amount {
  font-family: var(--tm-font-display);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--tm-forest);
}

.tm-plan-card.is-featured .tm-plan-amount {
  color: var(--plan-ink);
}

html.dark-mode .tm-plan-card.is-featured .tm-plan-amount {
  color: var(--plan-ink);
}

.tm-plan-card.is-featured .tm-plan-price-strike {
  color: var(--plan-ink);
  opacity: 1;
}

.tm-plan-period {
  font-family: var(--tm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--tm-forest);
  opacity: 0.5;
}

.tm-plan-card.is-featured .tm-plan-period {
  color: var(--plan-ink);
  opacity: 1;
}

.tm-plan-fit {
  font-family: var(--tm-font-display);
  font-size: 15px;
  line-height: 1.35;
  color: var(--tm-forest);
  opacity: 0.88;
  margin: 0;
  min-height: 40px;
}

.tm-plan-card.is-featured .tm-plan-fit {
  color: var(--plan-ink);
  opacity: 1;
}

.tm-plan-desc {
  font-family: var(--tm-font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tm-forest);
  opacity: 0.62;
  min-height: 72px;
}

.tm-plan-card.is-featured .tm-plan-desc {
  color: var(--plan-ink);
  opacity: 1;
}

.tm-plan-divider {
  border: none;
  border-top: 1px solid var(--tm-grid-20);
}

.tm-plan-card.is-featured .tm-plan-divider {
  border-color: rgba(255, 255, 255, 0.15);
}

.tm-plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.tm-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--tm-font-body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tm-forest);
}

.tm-plan-card.is-featured .tm-plan-features li {
  color: var(--plan-ink);
}

html.dark-mode .tm-plan-card.is-featured .tm-plan-features li {
  color: var(--plan-ink);
}

.tm-plan-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.tm-plan-features li.muted {
  opacity: 0.35;
}

.tm-plan-cta {
  margin-top: auto;
  padding-top: var(--space-2);
}

.tm-plan-card.is-featured .tm-btn-ghost,
.tm-plan-card.is-featured .tm-btn-secondary {
  border-color: rgba(255, 255, 255, 0.56);
  color: var(--plan-ink);
  background: rgba(255, 255, 255, 0.14);
}

.tm-plan-card.is-featured .tm-btn-ghost:hover,
.tm-plan-card.is-featured .tm-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
}

.tm-btn.is-disabled,
.tm-btn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  pointer-events: none;
}

html.dark-mode .tm-plan-card.is-featured .tm-btn-ghost,
html.dark-mode .tm-plan-card.is-featured .tm-btn-secondary {
  color: var(--plan-ink);
  border-color: rgba(24, 24, 22, 0.38);
  background: rgba(24, 24, 22, 0.16);
}

html.dark-mode .tm-plan-card.is-featured .tm-plan-price-strike {
  color: var(--plan-ink);
  opacity: 1;
}

/* ── CTA Section with L-shaped corner markers ────────────────────────── */

.tm-cta-section {
  text-align: center;
  padding: 0 var(--space-8) var(--space-16);
  position: relative;
  z-index: 2;
}

.tm-cta-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.tm-sq-dot--gold {
  background: var(--tm-gold);
}

.tm-bento--3col {
  grid-template-columns: repeat(3, 1fr);
}

.tm-faq-narrow {
  max-width: 720px;
  margin: 0 auto;
}

.tm-cta-box {
  max-width: min(660px, calc(100% - (var(--tm-shell-gutter) * 2)));
  margin: 0 auto;
  padding: var(--space-14) clamp(20px, 4vw, 56px);
  position: relative;
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-card);
}

/* L-shaped corners: 4 pseudo-elements via child spans */
.tm-cta-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--tm-forest);
  border-style: solid;
  opacity: 0.78;
}

.tm-cta-corner.tl {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.tm-cta-corner.tr {
  top: -1px;
  right: -1px;
  border-width: 2px 2px 0 0;
}

.tm-cta-corner.bl {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 2px 2px;
}

.tm-cta-corner.br {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.tm-cta-label {
  display: block;
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.5;
  margin-bottom: var(--space-5);
}

.tm-cta-h2 {
  font-family: var(--tm-font-display);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--tm-forest);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-5);
}

.tm-cta-break {
  display: block;
}

.tm-cta-p {
  font-family: var(--tm-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tm-forest);
  opacity: 0.6;
  max-width: 460px;
  margin: 0 auto var(--space-8);
}

.tm-cta-input-row {
  display: flex;
  gap: var(--space-3);
  max-width: 480px;
  margin: 0 auto;
}

.tm-cta-input {
  flex: 1;
  height: 48px;
  padding: 0 var(--space-4);
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-control);
  background: var(--tm-white);
  font-family: var(--tm-font-mono);
  font-size: 12px;
  color: var(--tm-forest);
  outline: none;
}

html.dark-mode .tm-cta-input {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tm-forest);
}

.tm-cta-input::placeholder {
  color: var(--tm-forest);
  opacity: 0.35;
}

.tm-cta-input:focus {
  border-color: var(--tm-forest-20);
  box-shadow: 0 0 0 3px var(--tm-forest-10);
}

.tm-cta-trust-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-4);
  color: var(--tm-forest-50);
}

.tm-cta-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tm-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tm-cta-trust-item svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.tm-faq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tm-grid-20);
}

.tm-faq-item {
  border-bottom: 1px solid var(--tm-grid-20);
}

.tm-faq-item:last-child {
  border-bottom: none;
}

.tm-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-7);
  cursor: pointer;
  list-style: none;
  font-family: var(--tm-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--tm-forest);
  transition: background-color 0.15s;
  gap: var(--space-4);
  background: var(--tm-white);
}

html.dark-mode .tm-faq-item summary {
  background: rgba(255, 255, 255, 0.03);
}

.tm-faq-item summary::-webkit-details-marker {
  display: none;
}

.tm-faq-item summary:hover {
  background: var(--tm-paper);
}

.tm-faq-indicator {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--tm-grid-20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tm-font-mono);
  font-size: 20px;
  color: var(--tm-forest);
  opacity: 0.5;
  transition: transform 0.2s;
}

.tm-faq-item[open] .tm-faq-indicator {
  transform: rotate(45deg);
}

.tm-faq-body {
  padding: 0 var(--space-7) var(--space-6);
  font-family: var(--tm-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--tm-forest);
  opacity: 0.65;
  background: var(--tm-white);
}

html.dark-mode .tm-faq-body {
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 720px) {
  .tm-faq-item summary {
    padding: var(--space-5) var(--space-5);
    font-size: 16px;
  }

  .tm-faq-body {
    padding: 0 var(--space-5) var(--space-5);
    font-size: 15px;
  }

  .tm-faq-indicator {
    width: 24px;
    height: 24px;
    font-size: 17px;
  }
}

/* ── Sticky CTA ──────────────────────────────────────────────────────── */

.tm-sticky-cta {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.tm-sticky-cta.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.tm-sticky-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--tm-paper-80);
  border: 1px solid var(--tm-grid-20);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  white-space: nowrap;
}

html.dark-mode .tm-sticky-inner {
  background: rgba(24, 24, 22, 0.88);
}

.tm-sticky-text {
  font-family: var(--tm-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.8;
}

.tm-sticky-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--tm-grid-20);
  cursor: pointer;
  font-size: 14px;
  color: var(--tm-forest);
  opacity: 0.5;
  border-radius: var(--radius-compact);
  flex-shrink: 0;
}

.tm-sticky-close:hover {
  opacity: 1;
  background: var(--tm-grid-10);
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.tm-footer {
  border-top: 1px solid var(--tm-grid-20);
  padding: var(--space-10) var(--space-8);
}

.tm-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.tm-footer-copy {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.4;
}

.tm-footer-links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
}

.tm-footer-links a {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.45;
  text-decoration: none;
  transition: opacity 0.15s;
}

.tm-footer-links a:hover {
  opacity: 0.85;
}

/* Homepage custom footer (concept-aligned) */
.tm-site-footer {
  border-top: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
}

.tm-site-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-12) 20px var(--space-8);
}

.tm-site-footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.25fr) repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
}

.tm-site-footer-grid>* {
  min-width: 0;
}

.tm-site-footer-col-stack {
  display: grid;
  gap: var(--space-6);
}

.tm-site-footer-col-stack>div {
  min-width: 0;
}

.tm-site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tm-forest);
}

.tm-site-brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(var(--tm-brand-lockup-offset-y));
}

.tm-site-brand-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.tm-site-brand-mark img {
  width: 32px;
  height: 32px;
  display: block;
}

.tm-site-brand-word {
  display: block;
  font-family: var(--tm-font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  position: relative;
  top: var(--tm-brand-wordmark-offset-y);
}

.tm-site-brand-sub {
  display: block;
  margin-top: 1px;
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.66;
}

.tm-site-footer-blurb {
  margin-top: var(--space-4);
  max-width: 340px;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.64;
}

.tm-site-footer-head {
  margin: 0 0 var(--space-3);
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.66;
}

.tm-site-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tm-site-footer-links a {
  text-decoration: none;
  font-size: 12px;
  color: var(--tm-forest);
  opacity: 0.65;
}

.tm-site-footer-links a:hover {
  opacity: 0.9;
}

.tm-site-footer-updates {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.65;
}

.tm-site-footer-subscribe {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: var(--space-2);
  max-width: 100%;
}

.tm-site-footer-input {
  flex: 1 1 210px;
  min-width: 0;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  font-family: var(--tm-font-body);
  font-size: 13px;
  color: var(--tm-forest);
  opacity: 0.78;
  outline: none;
}

.tm-site-footer-input::placeholder {
  color: var(--tm-forest);
  opacity: 0.45;
}

.tm-site-footer-input:focus {
  border-color: var(--tm-grid-30);
}

.tm-site-footer-subscribe .tm-btn {
  height: 44px;
  min-width: 0;
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  justify-content: center;
}

@media (max-width: 1320px) {
  .tm-site-footer-subscribe {
    grid-template-columns: 1fr;
  }

  .tm-site-footer-subscribe .tm-btn {
    width: 100%;
  }
}

.tm-site-footer-social {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tm-site-footer-social a {
  width: 34px;
  height: 34px;
  border: 1px solid var(--tm-grid-20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-forest);
  opacity: 0.72;
}

.tm-site-footer-social a:hover {
  opacity: 1;
  border-color: var(--tm-grid-30);
}

.tm-site-footer-social svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tm-site-footer-meta {
  border-top: 1px solid var(--tm-grid-20);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.tm-site-footer-copy {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.58;
}

.tm-site-footer-legal {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.tm-site-footer-legal a {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-forest);
  text-decoration: none;
  opacity: 0.6;
}

.tm-site-footer-legal a:hover {
  opacity: 0.9;
}

html.dark-mode .tm-site-footer {
  background: #111311;
}

html.dark-mode .tm-site-footer-input {
  background: rgba(255, 255, 255, 0.04);
}

html.dark-mode .tm-site-footer-social a {
  background: rgba(255, 255, 255, 0.02);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1200px) {
  .tm-site-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .tm-hero-shell {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tm-hero-copy,
  .tm-hero-right {
    min-height: 0;
  }

  .tm-nav-links {
    display: none;
  }

  .tm-bento {
    grid-template-columns: 1fr;
  }

  .tm-usecase-bento {
    grid-template-columns: 1fr;
  }

  .tm-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .tm-pricing-grid {
    grid-template-columns: 1fr;
  }

  .tm-plan-card {
    border-right: none;
    border-bottom: 1px solid var(--tm-grid-20);
  }

  .tm-plan-card:last-child {
    border-bottom: none;
  }

  .tm-proof-grid {
    margin-bottom: 0;
  }

  .tm-site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .tm-site-footer-subscribe {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tm-nav-inner {
    padding: 0 20px;
  }

  .tm-container {
    padding: 0 20px;
  }

  .tm-nav-subline {
    display: none;
  }

  .tm-nav-actions .tm-btn-secondary {
    display: none;
  }

  .tm-trust-metric+.tm-trust-metric::before {
    display: none;
  }

  .tm-cta-input-row {
    flex-direction: column;
  }

  .tm-site-footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tm-cta-break {
    display: none;
  }

  .tm-site-footer-subscribe {
    grid-template-columns: 1fr;
  }

  body.tm-page .tm-site-footer-inner,
  body.tm-page .tm-nav-inner,
  body.tm-page .tm-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Restore hero vertical padding (tm-container shorthand zeroes it out) */
  .tm-hero-shell {
    padding-top: 28px;
    padding-bottom: 32px;
  }

  /* Reduce section vertical rhythm on mobile */
  .tm-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }

  .tm-section-faq {
    padding-bottom: 52px;
  }

  .tm-section-cta {
    padding-top: 52px;
  }

  .tm-flow-section {
    padding: 52px 0;
  }

  /* Reduce card internal padding on mobile */
  .tm-bento-cell,
  .tm-plan-card {
    padding: 20px;
  }

  /* Reduce CTA section horizontal padding */
  .tm-cta-section {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 48px;
  }

  /* Footer bottom safe area */
  .tm-site-footer-inner {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px);
  }

  /* Fix mode tabs overflow — distribute evenly and shrink text */
  .tm-mode-tab {
    flex: 1;
    padding: 12px 8px;
    font-size: 9px;
    justify-content: center;
    text-align: center;
  }

  .tm-sticky-text {
    display: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Generation Flow Section ─────────────────────────────────────────── */
/*
   "How it works" — animated 3-step pipeline:
   [ Plain English ] →→→ [ AI Generation ] →→→ [ Validated Formula ]
   Lines "draw" on scroll-in via stroke-dashoffset animation.
*/

.tm-flow-section {
  padding: var(--space-24) 0;
  border-top: none;
  position: relative;
}

.tm-flow-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(var(--tm-divider-max) - (var(--tm-divider-inset) * 2)),
      calc(100% - ((var(--tm-shell-gutter) * 2) + (var(--tm-divider-inset) * 2))));
  border-top: 1px solid var(--tm-grid-20);
}

.tm-flow-header {
  text-align: center;
  max-width: 560px;
  margin: 0 auto var(--space-16);
}

.tm-flow-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}

/* Each step node */
.tm-flow-step {
  flex: 1;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tm-flow-step.flow-in {
  opacity: 1;
  transform: none;
}

.tm-flow-step:nth-child(1) {
  transition-delay: 0ms;
}

/* connector SVG */
.tm-flow-step:nth-child(3) {
  transition-delay: 600ms;
}

.tm-flow-step:nth-child(5) {
  transition-delay: 1200ms;
}

/* Step icon box */
.tm-flow-icon {
  width: 56px;
  height: 56px;
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.tm-flow-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--tm-forest);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Step 2 (center AI node) pulses to suggest "thinking" */
.tm-flow-step--ai .tm-flow-icon {
  background: var(--tm-forest);
}

.tm-flow-step--ai .tm-flow-icon svg {
  stroke: var(--tm-mint);
}

/* In dark mode tm-forest and tm-mint can converge; force contrast for step 02 icon. */
html.dark-mode .tm-flow-step--ai .tm-flow-icon {
  background: color-mix(in srgb, var(--tm-mint) 22%, #06110c);
  border-color: color-mix(in srgb, var(--tm-mint) 48%, var(--tm-grid-20));
}

html.dark-mode .tm-flow-step--ai .tm-flow-icon svg {
  stroke: var(--tm-mint);
}

.tm-flow-step--ai.flow-in .tm-flow-icon {
  animation: tm-node-pulse 2.4s ease-in-out infinite 1.4s;
}

/* Step number badge */
.tm-flow-step-num {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.45;
}

.tm-flow-step-title {
  font-family: var(--tm-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--tm-forest);
  line-height: 1.2;
}

.tm-flow-step-desc {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--tm-forest);
  opacity: 0.55;
  line-height: 1.5;
  text-transform: uppercase;
  max-width: 180px;
}

/* Connector SVG wrapper */
.tm-flow-connector {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  margin: 0 var(--space-2);
  /* Offset upward to align with icon centers */
  margin-bottom: 86px;
}

.tm-flow-connector svg {
  overflow: visible;
}

.tm-flow-connector line {
  stroke: var(--tm-forest);
  stroke-width: 1;
  stroke-opacity: 0.3;
  /* 120 = line length in SVG viewBox coords */
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Trigger: existing reveal system adds .reveal-in class via IntersectionObserver */
.tm-flow-connector.reveal-in line {
  stroke-dashoffset: 0;
}

.tm-flow-connector:nth-of-type(2).reveal-in line {
  transition-delay: 300ms;
}

.tm-flow-connector:nth-of-type(4).reveal-in line {
  transition-delay: 900ms;
}

/* Arrowhead — separate svg positioned flush after line */
.tm-flow-arrow {
  flex-shrink: 0;
  margin-left: 2px;
  opacity: 0;
  transition: opacity 0.3s ease 0.65s;
}

.tm-flow-connector.reveal-in .tm-flow-arrow {
  opacity: 1;
}

/* Also handle path inside connector SVGs (arrowhead path) */
.tm-flow-connector path {
  opacity: 0;
  transition: opacity 0.3s ease 0.65s;
}

.tm-flow-connector.reveal-in path {
  opacity: 1;
}

/* Mobile: stack vertically */
@media (max-width: 720px) {
  .tm-flow-pipeline {
    flex-direction: column;
    gap: var(--space-4);
  }

  .tm-flow-connector {
    width: 1px;
    height: 40px;
    margin: 0;
    margin-right: 0;
    margin-left: 0;
    align-self: center;
  }

  .tm-flow-connector svg {
    width: 1px;
    height: 40px;
  }
}

/* ── Hero Supports Row ───────────────────────────────────────────────── */

.tm-hero-supports {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--tm-grid-20);
  width: 100%;
}

.tm-supports-label {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.45;
  white-space: nowrap;
}

.tm-supports-logos {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.tm-tool-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  opacity: 0.56;
  transition: opacity 0.15s ease;
  color: var(--tm-forest);
}

.tm-tool-logo:hover {
  opacity: 0.85;
}

/* Fill-based SVGs (Excel, Sheets, Python) */
.tm-tool-logo img,
.tm-tool-logo svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.tm-tool-logo img {
  object-fit: contain;
  filter: grayscale(1) brightness(0) saturate(0) opacity(0.72);
}

/* Stroke-based SVGs (SQL, VBA) — override fill, use stroke */
.tm-tool-logo svg.tm-logo-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tm-tool-logo svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.dark-mode .tm-tool-logo img {
  filter: grayscale(1) invert(1) brightness(1.12) opacity(0.76);
}

.tm-tool-logo-label {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
}

/* ── Hero micro-copy with SVG icons ─────────────────────────────────── */

.tm-hero-micro-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tm-hero-micro-item svg {
  width: 12px;
  height: 12px;
  stroke: var(--tm-forest);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Keyframes ───────────────────────────────────────────────────────── */

@keyframes tm-node-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(158, 255, 191, 0);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(158, 255, 191, 0.25);
  }
}

@keyframes tm-aurora-breathe {

  0%,
  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.25;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

/* ── Scroll Reveal Animations ────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--reveal-delay, 0) * 80ms);
}

[data-reveal].reveal-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .tm-sticky-cta {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Eyebrow Single Pill ──────────────────────────────────────────────── */

.tm-hero-eyebrow-pill {
  gap: var(--tm-tag-gap);
}

.tm-sq-dot {
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  flex-shrink: 0;
  border-radius: 0;
  display: inline-block;
}

.tm-hero-eyebrow-text {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.76;
  line-height: 1;
}

/* ── H1 XL + Rotating Verb ───────────────────────────────────────────── */

.tm-hero-verb-cycle {
  display: inline-block;
  min-width: 8.5ch;
  position: relative;
  white-space: nowrap;
}

.tm-hero-verb-cycle.tm-hero-verb-typewriter::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.88em;
  margin-left: 0.12em;
  vertical-align: baseline;
  background: currentColor;
  opacity: 0;
  animation: none;
}

.tm-hero-verb-cycle.tm-hero-verb-typewriter.is-typing::after {
  opacity: 0.8;
  animation: tm-caret-blink 0.9s steps(1, end) infinite;
}

@keyframes tm-caret-blink {

  0%,
  48% {
    opacity: 0.9;
  }

  49%,
  100% {
    opacity: 0;
  }
}

/* ── Subtitle Mono Override ──────────────────────────────────────────── */

.tm-hero-subtitle.tm-hero-subtitle-mono {
  font-family: var(--tm-font-mono);
  font-size: clamp(10px, 1.0vw, 12px);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.7;
  opacity: 0.7;
}

/* ── Neural Engine Hero Card ─────────────────────────────────────────── */

.tm-neural-engine {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: auto;
  transition: height 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.tm-neural-engine.is-expanded {
  height: auto;
}

.tm-neural-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
}

.tm-neural-header-label {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
}

.tm-neural-live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tm-neural-live-text {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.7;
}

.tm-neural-body {
  padding: var(--space-4);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tm-neural-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  min-height: 0;
}

.tm-nc-demo {
  grid-column: 1 / -1;
}

.tm-nc-demo .tm-nc-body {
  gap: var(--space-3);
  min-height: 0;
}

/* Individual neural card */

.tm-nc {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  overflow: hidden;
}

html.dark-mode .tm-nc {
  background: rgba(255, 255, 255, 0.04);
}

.tm-nc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
}

html.dark-mode .tm-nc-header {
  background: rgba(255, 255, 255, 0.04);
}

.tm-nc-label {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.65;
}

.tm-nc-badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--tm-tag-height);
  gap: var(--tm-tag-gap);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  opacity: 0.92;
}

html.dark-mode .tm-nc-badge {
  background: rgba(255, 255, 255, 0.04);
}

.tm-nc-badge-text {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.76;
  line-height: 1;
}

.tm-nc-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
}

.tm-nc-mono-text {
  font-family: var(--tm-font-mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--tm-forest);
  opacity: 0.8;
}

body.tm-landing .tm-nc-formula {
  font-family: var(--tm-font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tm-forest);
  opacity: 0.85;
  word-break: break-all;
  display: block;
}

/* Canonical formula surface primitives (homepage/marketing bridge) */
body.tm-landing .tm-formula-surface {
  border: 1px solid var(--tm-formula-border);
  background: var(--tm-formula-bg);
  border-radius: var(--radius-compact);
  box-shadow: none;
}

body.tm-landing .tm-formula-surface--hero {
  padding: var(--space-2) var(--space-3);
}

body.tm-landing .tm-formula-surface__code {
  position: relative;
  border: none;
  background: transparent;
  padding: var(--tm-formula-pad-y) var(--tm-formula-pad-x);
}

body.tm-landing .tm-formula-surface__code pre {
  margin: 0;
  border: none;
  background: transparent;
  padding: 0;
}

body.tm-landing .tm-formula-surface__code.has-copy pre,
body.tm-landing .tm-formula-surface__code.has-copy code {
  padding-right: calc(var(--tm-formula-pad-x, 12px) + 70px);
}

body.tm-landing .tm-formula-surface__code.has-copy .seo-copy-btn,
body.tm-landing .tm-formula-surface__code.has-copy .tm-copy-btn,
body.tm-landing .tm-formula-surface__code.has-copy .rc-copy-btn {
  position: absolute;
  top: var(--tm-copy-btn-hit-offset, 6px);
  right: var(--tm-copy-btn-hit-offset, 6px);
  background: var(--tm-white, #fff);
  border: 1px solid var(--tm-formula-border);
  border-radius: var(--radius-control);
  height: var(--tm-copy-btn-height, 34px);
  min-width: 44px;
  padding: 0 var(--tm-copy-btn-pad-x, 10px);
  color: var(--tm-forest);
  cursor: pointer;
  font-size: var(--tm-tag-font-size, 10px);
  font-weight: 500;
  font-family: var(--font-body);
  letter-spacing: var(--tm-tag-letter, 0.12em);
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
  box-shadow: none;
  z-index: 2;
}

body.tm-landing .tm-formula-surface__code.has-copy .seo-copy-btn:hover,
body.tm-landing .tm-formula-surface__code.has-copy .tm-copy-btn:hover,
body.tm-landing .tm-formula-surface__code.has-copy .rc-copy-btn:hover {
  border-color: var(--tm-grid-30);
  background: var(--tm-forest-10);
}

body.tm-landing .tm-formula-surface__code code,
body.tm-landing .tm-formula-surface__code pre code {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-formula-code-size);
  line-height: var(--tm-formula-code-line);
  color: var(--tm-forest);
  white-space: pre-wrap;
  word-break: break-word;
}

body.tm-landing .tm-formula-surface__code-body {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.tm-landing .tm-nc-formula {
  border: 1px solid var(--tm-formula-border);
  background: var(--tm-formula-bg-subtle);
  padding: var(--space-3);
}

.tm-nc-orbit {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tm-paper);
  padding: 0;
}

.tm-orbit-svg {
  width: 100%;
  height: 100%;
}

.tm-nc-check-row {
  border: 1px solid var(--tm-grid-20);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--tm-surface-subcard);
}

.tm-nc-check-label {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
}

.tm-nc-check-val {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  line-height: 1.4;
  color: var(--tm-forest);
  opacity: 0.75;
}

.tm-nc-test-btn {
  width: 100%;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0;
  height: 40px;
  margin-top: var(--space-1);
}

/* Hero live-demo module */
.tm-demo-input-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  padding: var(--space-2);
}

.tm-demo-input-wrapper input {
  min-width: 0;
  height: 42px;
  border: 1px solid transparent;
  background: transparent;
  padding: 0 10px;
  font-family: var(--tm-font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--tm-forest);
  outline: none;
}

.tm-demo-input-wrapper input:focus-visible {
  border-color: var(--tm-grid-20);
}

.tm-demo-submit-btn {
  height: 42px;
  min-width: 132px;
  padding: 0 16px;
}

.tm-demo-result {
  margin-top: var(--space-2);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  min-height: 188px;
  max-height: var(--tm-demo-result-max-height, 260px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.tm-demo-result [hidden] {
  display: none !important;
}

.tm-demo-spinner {
  min-height: 188px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 var(--space-3);
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
}

.tm-demo-spinner-ring {
  width: 13px;
  height: 13px;
  border: 1px solid var(--tm-grid-30);
  border-top-color: var(--tm-forest);
  border-radius: 50%;
  animation: tm-demo-spin 0.9s linear infinite;
}

.tm-demo-output-card {
  padding: var(--space-3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.tm-demo-output-card.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

.tm-demo-metrics {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.tm-demo-metrics span {
  min-height: var(--tm-tag-height);
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--tm-grid-20);
  padding: 0 var(--tm-tag-pad-x);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.72;
  background: var(--tm-surface-card);
}

#tm-demo-result-title {
  font-family: var(--tm-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--tm-forest);
  margin-bottom: var(--space-2);
}

.tm-demo-preview-code {
  margin: 0;
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-card);
  padding: 10px;
  font-family: var(--tm-font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--tm-forest);
  opacity: 0.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tm-demo-preview-notes {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.tm-demo-preview-notes li {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.48;
}

.tm-demo-gate-overlay {
  margin-top: var(--space-2);
  border-top: 1px solid var(--tm-grid-20);
  padding-top: var(--space-2);
}

.tm-demo-gate-overlay p {
  font-family: var(--tm-font-body);
  font-size: 11px;
  line-height: 1.45;
  color: var(--tm-forest);
  opacity: 0.52;
}

.tm-demo-gate-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

@keyframes tm-demo-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Mobile: stack neural grid to single column */
@media (max-width: 720px) {
  .tm-neural-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Marketing Typography System (canonical role mapping) ───────────── */
.tm-h1.tm-h1-xl {
  font-size: var(--tm-type-display-xl);
  line-height: var(--tm-type-display-xl-lh);
  letter-spacing: var(--tm-type-display-xl-ls);
}

.tm-h1:not(.tm-h1-xl) {
  font-size: var(--tm-type-display-lg);
  line-height: var(--tm-type-display-lg-lh);
  letter-spacing: var(--tm-type-display-lg-ls);
}

.tm-h2,
.tm-cta-h2 {
  font-size: var(--tm-type-section-h2);
  line-height: var(--tm-type-section-h2-lh);
  letter-spacing: var(--tm-type-section-h2-ls);
}

.tm-section-p,
.tm-hero-subtitle {
  font-size: var(--tm-type-lead);
  line-height: var(--tm-type-lead-lh);
}

.tm-section-p {
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-body-lh);
}

.tm-bento-title,
.tm-usecase-title,
.tm-pricing-plan-title,
.tm-pricing-card h3 {
  font-size: var(--tm-type-card-h3);
  line-height: var(--tm-type-card-h3-lh);
  letter-spacing: var(--tm-type-card-h3-ls);
}

.tm-bento p,
.tm-usecase-card p,
.tm-pricing-card p,
.tm-testimonial-quote,
.tm-cta-p {
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-body-lh);
}

.tm-label,
.tm-chip,
.tm-section-kicker,
.tm-section-label,
.tm-inner-section-label,
.tm-hero-micro-item,
.tm-mockup-header-label,
.tm-mockup-output-label,
.tm-demo-preview-notes li,
.tm-demo-metrics span {
  font-size: var(--tm-type-label-mono);
  line-height: var(--tm-type-label-mono-lh);
  letter-spacing: var(--tm-type-label-mono-ls);
}

.tm-demo-preview-code,
.tm-code-preview,
.tm-formula-surface__code-body {
  font-size: var(--tm-type-code-mono);
  line-height: var(--tm-type-code-mono-lh);
  letter-spacing: var(--tm-type-code-mono-ls);
}


/* partials/landing-tm-inner.css */
/* ═══════════════════════════════════════════════════════════════════════
   Landing – Technical Minimalist Inner Pages
   ───────────────────────────────────────────────────────────────────────
   Shared styles for all marketing subpages (Tier 1–3) in the TM system.
   Applied via `body.tm-inner` scoping on layout.html.

   Depends on --tm-* tokens defined in base.css.
   Reuses component classes from landing-tm.css (buttons, badges, etc.).
   Shared semantic radii and theme tokens; component geometry is defined locally.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Page shell ──────────────────────────────────────────────────────── */

body.tm-inner {
  background-color: var(--tm-paper);
  background-image: none;
  color: var(--tm-forest);
  font-family: var(--tm-font-body);
  min-height: 100vh;
  /* Shell layout tokens — mirrors .tm-page in landing-tm.css */
  --tm-shell-max: 1280px;
  --tm-shell-gutter: 20px;
  --tm-divider-inset: 0px;
  /* Hero tag tokens aligned to homepage badge system */
  --tm-tag-height: 24px;
  --tm-tag-pad-x: 10px;
  --tm-tag-gap: 6px;
  --tm-tag-font-size: 10px;
  --tm-tag-letter: 0.12em;
  --tm-tag-dot-size: 8px;
  --tm-surface-card: var(--tm-paper);
  --tm-surface-subcard: var(--tm-white);
  --tm-section-rhythm-y: clamp(56px, 8vw, 84px);
  --tm-brand-lockup-offset-y: 2px;
  --tm-brand-wordmark-offset-y: -2px;
  /* Inner pages run one step tighter than the homepage scale. */
  --tm-type-page-h1: clamp(28px, 3.2vw, 40px);
  --tm-type-page-h1-lh: 1.08;
  --tm-type-page-h1-ls: -0.022em;
  --tm-type-section-h2: clamp(20px, 2.2vw, 28px);
  --tm-type-section-h2-lh: 1.16;
  --tm-type-section-h2-ls: -0.016em;
  --tm-type-card-h3: clamp(16px, 1.45vw, 20px);
  --tm-type-card-h3-lh: 1.26;
  --tm-type-card-h3-ls: -0.01em;
  --tm-type-lead: clamp(15px, 1.15vw, 17px);
  --tm-type-lead-lh: 1.64;
  --tm-type-body: 15px;
  --tm-type-body-lh: 1.66;
  --tm-type-body-sm: 13px;
  --tm-type-body-sm-lh: 1.56;
}

@media (min-width: 640px) {
  body.tm-inner { --tm-shell-gutter: 24px; }
}

@media (min-width: 1024px) {
  body.tm-inner { --tm-shell-gutter: 32px; }
}

@media (max-width: 720px) {
  body.tm-inner {
    --tm-card-pad-x: var(--space-5);
    --tm-card-pad-y: var(--space-4);
    --tm-sidebar-inset: var(--space-5);
    --tm-code-pad-x: var(--space-4);
  }
}

/* Keep authed top-nav profile control circular (explicit exception). */
body.tm-inner .tm-nav .user-avatar {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border: 1px solid var(--tm-grid-20) !important;
  background: color-mix(in srgb, var(--tm-mint) 30%, var(--tm-paper)) !important;
  color: var(--tm-forest) !important;
  box-shadow: none !important;
}

/* ── Legacy Class Overrides: TM styling for server-generated HTML ────────
   Server-side routes (usecase-routes.ts, blog-routes.ts, formula-pages.ts)
   generate HTML using old class names (.usecase-card, .badge, .pain-card,
   .chip, .code-frame, etc.) that inherit non-zero radius + wrong colors
   from base.css / usecase-pages.css. These overrides restyle them to
   match the TM design system without requiring TypeScript changes.
────────────────────────────────────────────────────────────────────────── */

/* Use case index cards (/for page) and related cards on detail pages */
body.tm-inner .usecase-card,
body.tm-inner .related-usecase-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  padding: var(--space-6);
  transition: background-color 0.2s;
  color: var(--tm-forest);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: none;
}
body.tm-inner .usecase-card:hover,
body.tm-inner .related-usecase-card:hover {
  border-color: var(--tm-grid-30);
  background: var(--tm-grid-10);
  box-shadow: none;
  transform: none;
}

/* Pain-point cards on usecase detail pages */
body.tm-inner .pain-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  box-shadow: none;
  transition: background-color 0.2s;
}
body.tm-inner .pain-card:hover {
  border-color: var(--tm-grid-30);
  box-shadow: none;
  background: var(--tm-grid-10);
}

/* Example formula cards on usecase detail pages */
body.tm-inner .usecase-example-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  box-shadow: none;
  transition: background-color 0.2s;
}
body.tm-inner .usecase-example-card:hover {
  border-color: var(--tm-grid-30);
  box-shadow: none;
  transform: none;
  background: var(--tm-grid-10);
}
body.tm-inner .usecase-example-prompt {
  background: var(--tm-paper);
  border: 1px solid var(--tm-grid-10);
}

/* Feature cards on usecase detail pages */
body.tm-inner .feature-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  box-shadow: none;
  transition: background-color 0.2s;
}
body.tm-inner .feature-card:hover {
  border-color: var(--tm-grid-30);
  box-shadow: none;
  transform: none;
  background: var(--tm-grid-10);
}

/* .chip badge (tool label: Excel / Sheets / SQL) */
body.tm-inner .chip {
  background: var(--tm-paper);
  border: 1px solid var(--tm-grid-20);
  color: var(--tm-forest);
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
}

/* Blog inline code — no rounded pill background */
body.tm-inner .blog-content code {
  background: var(--tm-paper);
  border: 1px solid var(--tm-grid-10);
  color: var(--tm-forest);
  padding: 1px 5px;
}
body.tm-inner .code-frame,
body.tm-inner .blog-content .code-frame,
body.tm-inner .tm-blog-content .code-frame {
  border: 1px solid color-mix(in srgb, var(--tm-forest) 34%, var(--tm-grid-20));
  background: var(--tm-paper);
  padding: var(--space-4);
  margin: var(--space-5) 0;
  box-shadow: none;
}
body.tm-inner .code-frame pre,
body.tm-inner .blog-content .code-frame pre,
body.tm-inner .tm-blog-content .code-frame pre {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--tm-forest) 44%, var(--tm-grid-20));
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-surface-subcard));
  padding: var(--space-5);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-forest) 10%, transparent);
}
body.tm-inner .code-frame.has-copy pre {
  padding-right: calc(var(--space-5) + 72px);
}
body.tm-inner .code-frame .seo-copy-btn {
  top: var(--space-3);
  right: var(--space-3);
  transform: none;
  border-radius: var(--radius-control);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  color: color-mix(in srgb, var(--tm-forest) 80%, transparent);
  height: 30px;
  min-height: 30px;
  padding: 0 var(--space-3);
  box-shadow: none;
}
body.tm-inner .code-frame.is-single-line .seo-copy-btn {
  top: 50%;
  transform: translateY(-50%);
}
body.tm-inner .code-frame.is-single-line.has-copy pre {
  min-height: 38px;
  display: flex;
  align-items: center;
}
html.dark-mode body.tm-inner .blog-content .code-frame pre,
html.dark-mode body.tm-inner .tm-blog-content .code-frame pre {
  background: linear-gradient(180deg, rgba(20, 24, 22, 0.88), rgba(16, 20, 18, 0.9));
  border-color: color-mix(in srgb, var(--tm-mint) 34%, var(--tm-grid-30));
}
html.dark-mode body.tm-inner .code-frame,
html.dark-mode body.tm-inner .blog-content .code-frame,
html.dark-mode body.tm-inner .tm-blog-content .code-frame {
  background: rgba(255, 255, 255, 0.04);
  border-color: color-mix(in srgb, var(--tm-mint) 22%, var(--tm-grid-20));
}
html.dark-mode body.tm-inner .code-frame .seo-copy-btn {
  color: var(--tm-mint);
  border-color: color-mix(in srgb, var(--tm-mint) 26%, var(--tm-grid-30));
  background: rgba(255, 255, 255, 0.03);
}
html.dark-mode body.tm-inner .code-frame .seo-copy-btn:hover {
  border-color: var(--tm-mint);
  background: rgba(159, 255, 191, 0.08);
}
body.tm-inner .code-frame code,
body.tm-inner .code-frame pre code,
body.tm-inner .blog-content .code-frame code,
body.tm-inner .blog-content .code-frame pre code,
body.tm-inner .tm-blog-content .code-frame code,
body.tm-inner .tm-blog-content .code-frame pre code {
  color: var(--tm-forest);
  font-size: 13.5px;
  line-height: 1.62;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

html.dark-mode body.tm-inner .code-frame code,
html.dark-mode body.tm-inner .code-frame pre code,
html.dark-mode body.tm-inner .blog-content .code-frame code,
html.dark-mode body.tm-inner .blog-content .code-frame pre code,
html.dark-mode body.tm-inner .tm-blog-content .code-frame code,
html.dark-mode body.tm-inner .tm-blog-content .code-frame pre code {
  color: #d8ffe6;
}

/* Formula grid cards (formula index / category pages) */
body.tm-inner .formula-grid-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  box-shadow: none;
  transition: background-color 0.2s;
}
body.tm-inner .formula-grid-card:hover {
  border-color: var(--tm-grid-30);
  box-shadow: none;
  transform: none;
  background: var(--tm-grid-10);
}

/* ── Eyebrow pill: prevent full-width stretch inside flex column ──────── */
/* When .tm-hero-eyebrow-pill is a flex child (e.g. inside .tm-inner-hero-copy
   which is display:flex flex-direction:column), inline-flex gets "blockified"
   and align-items:normal causes it to stretch to full column width.
   align-self:flex-start keeps it content-width only. */
body.tm-inner .tm-hero-eyebrow-pill {
  align-self: flex-start;
  min-height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  gap: var(--tm-tag-gap);
  border: 1px solid var(--tm-grid-20);
  background: transparent;
  margin-bottom: calc(var(--space-7) + var(--space-1));
}

body.tm-inner .tm-hero-eyebrow-pill .tm-hero-eyebrow-text {
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  opacity: 0.76;
}

body.tm-inner .tm-hero-eyebrow-pill .tm-sq-dot {
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
}

/* ── Blog grid: bento hairline layout ────────────────────────────────── */
/* blog-routes.ts generates .tm-blog-grid + .blog-card markup.
   blog.css sets gap:20px and individual card borders — override both. */
body.tm-inner .tm-blog-grid {
  gap: var(--space-5);
  background: transparent;
  border: none;
  margin-top: var(--space-6);
}

body.tm-inner .blog-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  box-shadow: none;
  transition: background-color 0.2s;
  color: var(--tm-forest);
}

body.tm-inner .blog-card:hover {
  border-color: var(--tm-grid-30);
  box-shadow: none;
  transform: none;
  background: var(--tm-grid-10);
}

body.tm-inner .blog-card-footer {
  border-top: 1px solid var(--tm-grid-10);
}

body.tm-inner .blog-card h3 {
  font-family: var(--tm-font-display);
  color: var(--tm-forest);
}

body.tm-inner .blog-card p {
  color: var(--tm-forest);
  opacity: 0.65;
}

/* ── Blog category nav: TM chip style ────────────────────────────────── */
/* blog-routes.ts generates .blog-category-nav > a with class="active".
   blog.css fills active chip with --accent-primary (old green). */
body.tm-inner .blog-category-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--tm-grid-20);
}

body.tm-inner .blog-category-nav a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid var(--tm-grid-20);
  color: var(--tm-forest);
  opacity: 0.65;
  text-decoration: none;
  background: transparent;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}

body.tm-inner .blog-category-nav a:hover,
body.tm-inner .blog-category-nav a.active {
  opacity: 1;
  border-color: var(--tm-forest);
  background: var(--tm-forest-10);
  color: var(--tm-forest);
}

/* ── Formula page category nav: TM chip style ────────────────────────── */
/* formula-pages.ts generates .category-nav > a with class="active".
   formula-pages.css fills active chip with --accent-primary (old green). */
body.tm-inner .category-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

body.tm-inner .category-nav a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid var(--tm-grid-20);
  color: var(--tm-forest);
  opacity: 0.65;
  text-decoration: none;
  background: transparent;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}

body.tm-inner .category-nav a:hover,
body.tm-inner .category-nav a.active {
  opacity: 1;
  border-color: var(--tm-forest);
  background: var(--tm-forest-10);
  color: var(--tm-forest);
}

/* Generic .badge anywhere on tm-inner (blog cards, formula index) */
body.tm-inner .badge,
body.tm-inner .badge-tag {
  background: var(--tm-paper);
  color: var(--tm-forest);
  border: 1px solid var(--tm-grid-20);
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  font-weight: 400;
  gap: 0;
}

/* FAQ details/summary elements */
body.tm-inner .faq-item,
body.tm-inner .tm-faq-item {
  border: none;
}

/* ── Navigation Bridge ───────────────────────────────────────────────── */
/* Inner pages consume the canonical .tm-nav system from landing-tm.css. */

body.tm-inner .tm-nav-wordmark {
  top: var(--tm-brand-wordmark-offset-y);
}

body.tm-inner .tm-nav-logo-text,
body.tm-inner .tm-site-brand-text {
  transform: translateY(var(--tm-brand-lockup-offset-y));
}

body.tm-inner .tm-site-brand-word {
  position: relative;
  top: var(--tm-brand-wordmark-offset-y);
}

/* Offset main content below fixed nav */
body.tm-inner main {
  padding-top: 64px;
}

/* ── Container ───────────────────────────────────────────────────────── */

.tm-inner-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}

@media (max-width: 720px) {
  .tm-inner-container { padding: 0 var(--space-5); }
}

/* ── Breadcrumb ──────────────────────────────────────────────────────── */

.tm-breadcrumb {
  margin-bottom: var(--space-5);
}

.tm-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  flex-wrap: wrap;
}

.tm-breadcrumb li {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.55;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tm-breadcrumb li::after {
  content: "/";
  opacity: 0.35;
  font-size: 9px;
}

.tm-breadcrumb li:last-child::after {
  display: none;
}

.tm-breadcrumb li a {
  color: var(--tm-forest);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.15s;
}

.tm-breadcrumb li a:hover {
  opacity: 1;
}

.tm-breadcrumb li[aria-current="page"] {
  opacity: 0.75;
}

/* ── Inner Page Hero ─────────────────────────────────────────────────── */
/* Shared by all Tier 1–3 pages. Narrower and denser than home hero.    */

.tm-inner-hero {
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--tm-grid-20);
}

.tm-inner-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  border: 1px solid var(--tm-grid-20);
  margin-bottom: var(--space-5);
  background: transparent;
}

.tm-inner-hero-eyebrow-text {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.8;
}

.tm-inner-h1 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-page-h1);
  font-weight: 700;
  line-height: var(--tm-type-page-h1-lh);
  letter-spacing: var(--tm-type-page-h1-ls);
  color: var(--tm-forest);
  margin-bottom: var(--space-6);
  max-width: 820px;
}

/* For 2-column hero layouts (tools pages, use case detail) */
.tm-inner-hero-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 900px) {
  .tm-inner-hero-2col {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.tm-inner-definition {
  font-family: var(--tm-font-body);
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-body-lh);
  color: var(--tm-forest);
  opacity: 0.78;
  max-width: 680px;
  margin-bottom: var(--space-5);
}

.tm-inner-subtitle {
  font-family: var(--tm-font-mono);
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--tm-forest);
  opacity: 0.74;
  max-width: 600px;
  margin-bottom: var(--space-6);
}

.tm-inner-cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-6);
  margin-bottom: var(--space-5);
}

.tm-inner-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.tm-inner-meta > span {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.66;
}

.tm-inner-meta > span + span::before {
  content: "·";
  margin-right: var(--space-4);
  opacity: 0.35;
}

/* Heroic meta row: no separators */
.tm-inner-meta.tm-inner-meta-plain > span + span::before {
  display: none;
}

/* Hero sub-layout: left copy column of 2-col hero */
.tm-inner-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Badges/chips row below breadcrumb, above h1 */
.tm-inner-hero-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

body.tm-inner .tm-inner-hero-badges .tm-tag-chip {
  min-height: var(--tm-tag-height);
  height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  gap: var(--tm-tag-gap);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  background: transparent;
  opacity: 0.76;
}

body.tm-inner .tm-inner-hero-badges .tm-tag-chip::before {
  content: "";
  display: inline-block;
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  flex-shrink: 0;
  background: var(--tm-mint);
}

body.tm-inner .tm-inner-hero-badges .tm-tag-chip.tm-tag-chip-muted::before {
  background: color-mix(in srgb, var(--tm-forest) 42%, var(--tm-grid-20));
}

/* Body text paragraph below h1 (prose, not mono subtitle) */
.tm-inner-body {
  font-family: var(--tm-font-body);
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-body-lh);
  color: var(--tm-forest);
  opacity: 0.78;
  max-width: 600px;
}

/* Inline meta separator (·) between meta items */
.tm-inner-meta-sep {
  color: var(--tm-forest);
  opacity: 0.3;
  margin: 0 var(--space-1);
  user-select: none;
}

/* ── Trust meta: checkmark icon before each non-separator span ──────── */

.tm-inner-meta > span:not(.tm-inner-meta-sep)::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0.7;
}

/* Hide the dot separators — checkmarks provide enough visual separation */
.tm-inner-meta .tm-inner-meta-sep {
  display: none;
}

.tm-inner-meta {
  gap: var(--space-3);
}

/* ── Flow step cards for tool/inner pages ───────────────────────────── */

body.tm-inner .tm-flow-pipeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  max-width: none;
}

body.tm-inner .tm-flow-pipeline .tm-flow-connector {
  display: none;
}

body.tm-inner .tm-flow-step {
  /* Match .tm-inner-card exactly */
  background: var(--tm-paper);
  border: 1px solid var(--tm-grid-20);
  padding: var(--space-7);
  max-width: none;
  flex: none;
  width: 100%;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  transition: background-color 0.2s;
  /* Reset the home-page flow-step animation so data-reveal system works */
  opacity: unset;
  transform: unset;
}

body.tm-inner .tm-flow-step:hover {
  border-color: var(--tm-grid-30);
  background: var(--tm-grid-10);
}

html.dark-mode body.tm-inner .tm-flow-step {
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 640px) {
  body.tm-inner .tm-flow-pipeline {
    grid-template-columns: 1fr;
  }
}

/* ── Section Pattern ─────────────────────────────────────────────────── */

.tm-inner-section {
  padding: var(--tm-section-rhythm-y) 0;
  position: relative;
}

.tm-inner-section-tight {
  padding-top: var(--space-12);
}

@media (max-width: 720px) {
  .tm-inner-section-tight {
    padding-top: var(--space-10);
  }
}

/* Listing pages should sit closer to hero, matching homepage rhythm */
.tm-inner-section-tight .tm-category-nav {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
}

/* Constrained-width top hairline divider — matches home page .tm-section::before */
.tm-inner-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(
    calc(var(--tm-shell-max) - (var(--tm-divider-inset) * 2)),
    calc(100% - ((var(--tm-shell-gutter) * 2) + (var(--tm-divider-inset) * 2)))
  );
  border-top: 1px solid var(--tm-grid-20);
}

/* Hero already has border-bottom — skip double-line on first section */
.tm-inner-hero + .tm-inner-section::before {
  display: none;
}

/* Alt variant: subtle tint for alternating sections (matches home page secondary surface) */
.tm-inner-section-alt {
  background: transparent;
}

/* Narrow container for prose-heavy sections (verdict, article) */
.tm-inner-container-narrow {
  max-width: 720px;
}

/* Small body text — for card descriptions, secondary copy */
.tm-inner-body-sm {
  font-family: var(--tm-font-body);
  font-size: var(--tm-type-body-sm);
  line-height: var(--tm-type-body-sm-lh);
  color: var(--tm-forest);
  opacity: 0.74;
}

.tm-inner-section-header {
  margin-bottom: var(--space-8);
}

.tm-inner-section-header.center {
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.tm-inner-section-label {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-type-label-mono);
  line-height: var(--tm-type-label-mono-lh);
  letter-spacing: var(--tm-type-label-mono-ls);
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.62;
  display: block;
  margin-bottom: var(--space-2);
}

.tm-inner-h2 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-section-h2);
  font-weight: 700;
  line-height: var(--tm-type-section-h2-lh);
  letter-spacing: var(--tm-type-section-h2-ls);
  color: var(--tm-forest);
  margin-bottom: var(--space-4);
}

.tm-inner-section-p {
  font-family: var(--tm-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tm-forest);
  opacity: 0.78;
  max-width: 600px;
}

.tm-inner-section-header.center .tm-inner-section-p {
  margin: 0 auto;
}

/* ── Card Grid (Tier 2 index pages) ──────────────────────────────────── */

.tm-inner-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  background: transparent;
  border: none;
  align-items: stretch;
}

.tm-inner-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-2);
  transition: background-color 0.2s;
  text-decoration: none;
  color: var(--tm-forest);
  height: 100%;
}

.tm-inner-card:hover {
  border-color: var(--tm-grid-30);
  background: var(--tm-grid-10);
}

html.dark-mode .tm-inner-card {
  background: rgba(255, 255, 255, 0.04);
}

.tm-inner-card-label {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.55;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tm-inner-card-title {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-card-h3);
  font-weight: 600;
  line-height: var(--tm-type-card-h3-lh);
  color: var(--tm-forest);
  letter-spacing: var(--tm-type-card-h3-ls);
}

.tm-inner-card-desc {
  font-family: var(--tm-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tm-forest);
  opacity: 0.78;
  flex: 1;
}

.tm-inner-card-code {
  font-family: var(--tm-font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--tm-forest);
  opacity: 0.85;
  background: var(--tm-paper);
  border: 1px solid var(--tm-grid-10);
  padding: var(--space-3);
  word-break: break-all;
  display: block;
}

html.dark-mode .tm-inner-card-code {
  background: rgba(0, 0, 0, 0.25);
}

.tm-inner-card-link {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
  margin-top: auto;
  text-decoration: none;
  transition: opacity 0.15s;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.tm-inner-card-link:hover { opacity: 1; }

/* Badges row inside inner card (chip row above title) */
.tm-inner-card-badges {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Body/description text inside inner card */
.tm-inner-card-body {
  font-family: var(--tm-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tm-forest);
  opacity: 0.78;
  flex: 1;
}

/* Icon box in inner card header (36×36px bordered square) */
.tm-inner-card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tm-grid-20);
  flex-shrink: 0;
  border-radius: var(--radius-surface);
}

html.dark-mode .tm-inner-card-icon {
  border-color: var(--tm-grid-10);
}

/* Small bullet list inside inner card */
.tm-inner-card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tm-inner-card-list li {
  font-family: var(--tm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--tm-forest);
  opacity: 0.74;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tm-inner-card-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--tm-forest);
  opacity: 0.4;
  flex-shrink: 0;
}

/* ── Left-accent card variants (inspired by bento-cell left border) ───── */

.tm-inner-card.accent-mint   { border-left: 4px solid var(--tm-mint); }
.tm-inner-card.accent-coral  { border-left: 4px solid var(--tm-coral); }
.tm-inner-card.accent-gold   { border-left: 4px solid var(--tm-gold); }
.tm-inner-card.accent-forest { border-left: 4px solid var(--tm-forest); }

/* ── Hairline divider grid variant ──────────────────────────────────── */
/* Creates automatic 1px separators between cards via grid background    */

.tm-inner-card-grid.hairline {
  gap: var(--space-4);
  background: transparent;
}

.tm-inner-card-grid.hairline .tm-inner-card {
  border: 1px solid var(--tm-grid-20);
}

/* Full-width button utility */
.tm-btn-full {
  width: 100%;
  justify-content: center;
}

/* ── Category Nav / Filter Chips ─────────────────────────────────────── */

.tm-category-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--tm-grid-20);
}

.tm-category-chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--space-3);
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-control);
  color: var(--tm-forest);
  opacity: 0.65;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}

.tm-category-chip:hover,
.tm-category-chip.is-active {
  opacity: 1;
  border-color: var(--tm-forest);
  background: var(--tm-forest-10);
}

.tm-tag-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  font-weight: 500;
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  line-height: 1;
  color: var(--tm-forest);
  opacity: 0.76;
  text-decoration: none;
}

.tm-tag-chip-muted {
  opacity: 0.62;
}

html.dark-mode .tm-tag-chip {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Bottom CTA Strip ────────────────────────────────────────────────── */
/* Forest-background section at the bottom of every inner page           */

.tm-inner-cta-strip {
  background: transparent;
  padding: calc(var(--tm-section-rhythm-y) - var(--space-2)) 0 var(--space-14);
  border-top: none;
}

.tm-inner-cta-strip .tm-inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}

.tm-inner-cta-label {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.52;
  display: block;
}

.tm-inner-cta-h2 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-section-h2);
  font-weight: 700;
  line-height: var(--tm-type-section-h2-lh);
  letter-spacing: var(--tm-type-section-h2-ls);
  color: var(--tm-forest);
  max-width: 560px;
}

.tm-inner-cta-p {
  font-family: var(--tm-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tm-forest);
  opacity: 0.78;
  max-width: 520px;
}

.tm-inner-cta-btns {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* Buttons inside CTA strip use inverted colors */
.tm-inner-cta-strip .tm-btn-solid,
.tm-inner-cta-strip .tm-btn-primary {
  background: var(--tm-forest);
  color: var(--tm-white);
  border-color: var(--tm-forest);
}

.tm-inner-cta-strip .tm-btn-solid:hover,
.tm-inner-cta-strip .tm-btn-primary:hover {
  opacity: 0.9;
}

.tm-inner-cta-strip .tm-btn-ghost,
.tm-inner-cta-strip .tm-btn-secondary {
  background: transparent;
  color: var(--tm-forest);
  border-color: var(--tm-grid-20);
}

.tm-inner-cta-strip .tm-btn-ghost:hover,
.tm-inner-cta-strip .tm-btn-secondary:hover {
  border-color: var(--tm-grid-30);
}

.tm-inner-cta-note {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.42;
}

/* ── CTA Strip 2-column layout (copy left + actions right) ────────────── */

.tm-inner-cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  max-width: min(660px, calc(100% - (var(--tm-shell-gutter) * 2)));
  margin: 0 auto;
  padding: var(--space-14) clamp(20px, 4vw, 56px);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-card);
}

.tm-inner-cta-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 540px;
  align-items: center;
}

.tm-inner-cta-sub {
  font-family: var(--tm-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tm-forest);
  opacity: 0.78;
}

.tm-inner-cta-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: center;
}

/* Inverted button styles for forest-background CTA strips */
.tm-btn-solid-inv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: none;
  text-decoration: none;
  border-radius: var(--radius-control);
  border: 1px solid var(--tm-forest);
  background: var(--tm-forest);
  color: var(--tm-white);
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.tm-btn-solid-inv:hover { opacity: 0.88; }

.tm-btn-ghost-inv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: none;
  text-decoration: none;
  border-radius: var(--radius-control);
  border: 1px solid var(--tm-grid-20);
  background: transparent;
  color: var(--tm-forest);
  cursor: pointer;
  transition: border-color 0.2s;
  white-space: nowrap;
}

.tm-btn-ghost-inv:hover { border-color: var(--tm-grid-30); }

@media (max-width: 720px) {
  .tm-inner-cta-inner { align-items: center; }
  .tm-inner-cta-copy { max-width: 100%; }
}

/* ── Detail Page Layout (Tier 3) ─────────────────────────────────────── */
/* 2-column: main content (2fr) + sticky sidebar (1fr)                   */

.tm-detail-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 960px) {
  .tm-detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .tm-detail-sidebar {
    order: -1;
  }
}

.tm-detail-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.tm-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Sticky sidebar on desktop */
@media (min-width: 961px) {
  .tm-detail-sidebar {
    position: sticky;
    top: calc(64px + var(--space-8));
  }
}

/* ── Detail Cards ────────────────────────────────────────────────────── */
/* Each "section" within a detail page (formula, blog post, etc.)        */

.tm-detail-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  overflow: hidden;
}

html.dark-mode .tm-detail-card {
  background: rgba(255, 255, 255, 0.04);
}

.tm-detail-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--tm-card-pad-y) - 2px) var(--tm-card-pad-x);
  border-bottom: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper));
}

html.dark-mode .tm-detail-card-header {
  background: rgba(255, 255, 255, 0.02);
}

.tm-detail-card-label {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
}

/* Card title inside .tm-detail-card-header */
.tm-detail-card-title {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-card-h3);
  font-weight: 600;
  line-height: var(--tm-type-card-h3-lh);
  letter-spacing: var(--tm-type-card-h3-ls);
  color: var(--tm-forest);
  margin: 0;
}

/* Small icon/monogram label beside card title (e.g. "fx") */
.tm-detail-card-icon {
  font-family: var(--tm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.5;
  font-style: normal;
}

/* Card body: padding wrapper around content */
.tm-detail-card-body {
  font-family: var(--tm-font-body);
  font-size: 15px;
  line-height: 1.72;
  color: var(--tm-forest);
  opacity: 0.8;
  padding: calc(var(--tm-card-pad-y) - 2px) var(--tm-card-pad-x) var(--tm-card-pad-x);
}

/* ── Formula Output Card ─────────────────────────────────────────────── */

.tm-formula-output {
  background: color-mix(in srgb, var(--tm-forest) 3%, var(--tm-surface-subcard));
  border: 1px solid color-mix(in srgb, var(--tm-forest) 46%, var(--tm-grid-20));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-forest) 10%, transparent);
  padding: var(--tm-code-pad-y) var(--tm-code-pad-x) var(--tm-card-pad-y);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

html.dark-mode .tm-formula-output {
  background: linear-gradient(180deg, rgba(21, 26, 24, 0.9), rgba(16, 21, 19, 0.92));
  border-color: color-mix(in srgb, var(--tm-mint) 32%, rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-mint) 10%, transparent);
}

.tm-formula-output-label {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.68;
}

html.dark-mode .tm-formula-output-label {
  color: var(--tm-mint);
  opacity: 0.84;
}

.tm-formula-output-code {
  font-family: var(--tm-font-mono);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tm-forest);
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

html.dark-mode .tm-formula-output-code {
  color: #d8ffe6;
}

/* Template renders <pre><code> without .tm-formula-output-code class */
.tm-formula-output pre {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--tm-forest) 52%, var(--tm-grid-20));
  background: color-mix(in srgb, var(--tm-forest) 2.5%, var(--tm-white));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-forest) 10%, transparent);
  padding: var(--tm-code-pad-y) var(--tm-code-pad-x);
  overflow-x: auto;
}

html.dark-mode .tm-formula-output pre {
  border-color: color-mix(in srgb, var(--tm-mint) 42%, rgba(255, 255, 255, 0.12));
  background: linear-gradient(180deg, rgba(10, 38, 30, 0.62), rgba(9, 34, 27, 0.68));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-mint) 10%, transparent);
}

.tm-formula-output code {
  display: block;
  font-family: var(--tm-font-mono);
  font-size: 15px;
  line-height: 1.72;
  color: var(--tm-forest);
  white-space: pre-wrap;
  word-break: break-word;
  background: none;
  padding: 0;
}

html.dark-mode .tm-formula-output code {
  color: #d8ffe6;
}

.tm-formula-copy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.tm-formula-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: none;
  color: var(--tm-paper);
  border: 1px solid rgba(247, 247, 245, 0.25);
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-control);
  transition: border-color 0.15s;
}

.tm-formula-copy-btn:hover {
  border-color: rgba(247, 247, 245, 0.55);
}

/* Formula output with absolute-positioned copy button */
.tm-formula-output.has-copy { position: relative; }
.tm-formula-output.has-copy pre {
  padding-right: calc(var(--tm-code-pad-x) + 88px);
}

/* ── Formula Prompt (shows user's plain-English prompt above the output) */

.tm-formula-prompt {
  margin: 0 var(--tm-card-pad-x) var(--space-4);
  padding: var(--tm-card-pad-y) var(--tm-card-pad-x);
  border: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper));
}

html.dark-mode .tm-formula-prompt {
  background: rgba(255, 255, 255, 0.03);
}

.tm-formula-prompt-label {
  display: block;
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.45;
  margin-bottom: var(--space-2);
}

.tm-formula-prompt p {
  font-family: var(--tm-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tm-forest);
  opacity: 0.8;
  font-style: italic;
}

/* Alias: HTML templates use tm-copy-btn; maps to tm-formula-copy-btn style */
.tm-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--tm-copy-btn-height);
  padding: 0 var(--tm-copy-btn-pad-x);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: none;
  color: var(--tm-forest);
  border: 1px solid color-mix(in srgb, var(--tm-forest) 28%, var(--tm-grid-30));
  background: var(--tm-surface-subcard);
  cursor: pointer;
  border-radius: var(--radius-control);
  transition: border-color 0.15s;
  position: static;
  z-index: 1;
}

.tm-copy-btn:hover {
  border-color: var(--tm-forest);
  background: var(--tm-forest-10);
}

html.dark-mode .tm-copy-btn {
  color: var(--tm-mint);
  border-color: color-mix(in srgb, var(--tm-mint) 30%, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.04);
}

html.dark-mode .tm-copy-btn:hover {
  border-color: var(--tm-mint);
}

.tm-copy-btn:focus-visible,
.seo-copy-btn:focus-visible {
  outline: 1px solid var(--tm-forest);
  outline-offset: 2px;
}

html.dark-mode .tm-copy-btn:focus-visible,
html.dark-mode .seo-copy-btn:focus-visible {
  outline-color: var(--tm-mint);
}

/* ── Step-by-step Breakdown List ─────────────────────────────────────── */

.tm-breakdown-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  counter-reset: breakdown;
}

.tm-breakdown-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  font-family: var(--tm-font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--tm-forest);
  opacity: 0.85;
  counter-increment: breakdown;
}

.tm-breakdown-list li::before {
  content: counter(breakdown, decimal-leading-zero);
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--tm-forest);
  opacity: 0.4;
  flex-shrink: 0;
  padding-top: 3px;
  min-width: 26px;
}

/* ── Edge Cases / Warnings List ─────────────────────────────────────── */

.tm-edge-cases-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
}

.tm-edge-cases-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--tm-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--tm-forest);
  opacity: 0.8;
}

.tm-edge-cases-list li::before {
  content: "!";
  font-family: var(--tm-font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--tm-coral);
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 12px;
}

/* ── Formula Examples Grid ───────────────────────────────────────────── */

.tm-formula-examples {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
  padding: var(--tm-card-pad-y) var(--tm-card-pad-x);
}

.tm-formula-example {
  border: 0;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

html.dark-mode .tm-formula-example {
  background: transparent;
}

.tm-formula-example-prompt {
  font-family: var(--tm-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--tm-forest);
  opacity: 0.65;
  font-style: italic;
}

.tm-formula-example-code {
  font-family: var(--tm-font-mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--tm-forest);
  background: var(--tm-paper);
  border: 1px solid var(--tm-grid-10);
  padding: var(--space-2) var(--space-3);
  word-break: break-all;
}

html.dark-mode .tm-formula-example-code {
  background: rgba(0, 0, 0, 0.25);
}

/* ── nc-prompt: italicised user query inside a .tm-nc notebook card ──── */

.tm-nc-prompt {
  font-family: var(--tm-font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--tm-paper);
  opacity: 0.6;
  font-style: italic;
  margin-bottom: var(--space-3);
}

/* ── Sidebar Cards ───────────────────────────────────────────────────── */

.tm-sidebar-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  overflow: hidden;
  padding-bottom: var(--tm-card-pad-y);
}

html.dark-mode .tm-sidebar-card {
  background: rgba(255, 255, 255, 0.04);
}

.tm-sidebar-card-header {
  padding: var(--space-3) var(--tm-sidebar-inset);
  border-bottom: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper));
}

html.dark-mode .tm-sidebar-card-header {
  background: rgba(255, 255, 255, 0.02);
}

.tm-sidebar-card-label {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.55;
}

.tm-sidebar-card-body {
  padding: var(--tm-card-pad-y) var(--tm-sidebar-inset);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Sidebar CTA card (featured) */
.tm-sidebar-cta-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  padding: var(--tm-card-pad-y) var(--tm-sidebar-inset) var(--tm-card-pad-y);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.tm-sidebar-cta-h {
  font-family: var(--tm-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--tm-paper);
  line-height: 1.3;
}

.tm-sidebar-cta-p {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-paper);
  opacity: 0.6;
  line-height: 1.55;
}

/* ── Sidebar card title / body aliases ───────────────────────────────── */
/* HTML uses tm-sidebar-card-title and tm-sidebar-card-body;             */
/* On .tm-sidebar-cta-card these render paper-colored (on forest bg)     */

.tm-sidebar-cta-card .tm-sidebar-card-title {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-card-h3);
  font-weight: 600;
  color: var(--tm-forest);
  line-height: var(--tm-type-card-h3-lh);
  letter-spacing: var(--tm-type-card-h3-ls);
  margin: 0;
}

.tm-sidebar-cta-card .tm-sidebar-card-body {
  font-family: var(--tm-font-body);
  font-size: 14px;
  line-height: 1.72;
  color: var(--tm-forest);
  opacity: 0.78;
  margin: 0;
  padding: 0;
}

.tm-sidebar-cta-card .tm-btn-full {
  margin-top: var(--space-1);
}

html.dark-mode .tm-sidebar-cta-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--tm-grid-20);
}

html.dark-mode .tm-sidebar-cta-card .tm-sidebar-card-title,
html.dark-mode .tm-sidebar-cta-card .tm-sidebar-card-body {
  color: var(--tm-mint) !important;
}

html.dark-mode .tm-sidebar-cta-card .tm-sidebar-card-body {
  opacity: 0.72;
}

/* On a regular .tm-sidebar-card they're forest-colored */
.tm-sidebar-card .tm-sidebar-card-title {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-card-h3);
  font-weight: 600;
  color: var(--tm-forest);
  line-height: var(--tm-type-card-h3-lh);
  letter-spacing: var(--tm-type-card-h3-ls);
  padding: var(--tm-card-pad-y) var(--tm-sidebar-inset) var(--space-3);
  border-bottom: 1px solid var(--tm-grid-10);
  margin: 0;
}

/* Related items list */
.tm-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tm-grid-20);
}

.tm-sidebar-card .tm-related-list {
  margin: 0 var(--tm-sidebar-inset) 0;
}

.tm-related-list > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tm-related-item,
.tm-sidebar-card .tm-related-list a {
  display: flex;
  align-items: center;
  min-height: var(--tm-list-row-min-h);
  padding: var(--tm-list-row-pad-y) var(--tm-list-row-pad-x);
  text-decoration: none;
  color: var(--tm-forest);
  font-family: var(--tm-font-body);
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.9;
  transition: opacity 0.15s, background 0.15s;
}

.tm-related-list > li + li .tm-related-item,
.tm-related-list > .tm-related-item + .tm-related-item,
.tm-sidebar-card .tm-related-list > li + li > a,
.tm-sidebar-card .tm-related-list > a + a {
  border-top: 1px solid var(--tm-grid-10);
}

.tm-related-item:last-child {
  border-bottom: none;
}

.tm-related-item:hover {
  opacity: 1;
  background: var(--tm-grid-10);
}

.tm-sidebar-card .tm-related-list a:hover {
  opacity: 1;
  background: var(--tm-grid-10);
}

@media (max-width: 720px) {
  .tm-sidebar-card {
    padding-bottom: var(--tm-card-pad-y);
  }

  .tm-sidebar-card .tm-sidebar-card-title {
    padding: var(--tm-card-pad-y) var(--tm-sidebar-inset) var(--space-3);
  }

  .tm-related-item,
  .tm-sidebar-card .tm-related-list a {
    min-height: var(--tm-list-row-min-h);
    padding: var(--tm-list-row-pad-y) var(--tm-list-row-pad-x);
  }
}

/* ── Blog Card ───────────────────────────────────────────────────────── */

.tm-blog-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: var(--tm-forest);
  transition: border-color 0.15s;
}

.tm-blog-card:hover {
  border-color: var(--tm-grid-30);
}

html.dark-mode .tm-blog-card {
  background: rgba(255, 255, 255, 0.04);
}

.tm-blog-card-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.tm-blog-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tm-blog-card-cat {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.72;
  border: 1px solid var(--tm-grid-20);
  padding: 2px var(--space-2);
}

.tm-blog-card-readtime {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.42;
}

.tm-blog-card-title {
  font-family: var(--tm-font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--tm-forest);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tm-blog-card-excerpt {
  font-family: var(--tm-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tm-forest);
  opacity: 0.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.tm-blog-card-footer {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--tm-grid-10);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tm-blog-card-author {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.55;
}

.tm-blog-card-date {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.4;
  margin-left: auto;
}

/* Blog grid layout */
.tm-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}

/* ── Blog Post Content Prose ─────────────────────────────────────────── */

.tm-blog-content {
  font-family: var(--tm-font-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--tm-forest);
  max-width: 720px;
}

.tm-blog-content p {
  margin-bottom: var(--space-5);
  color: var(--tm-forest);
  opacity: 0.86;
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-body-lh);
}

/* Section rhythm inside long-form posts */
.tm-blog-content .blog-section {
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--tm-grid-10);
}

.tm-blog-content .blog-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.tm-blog-content .blog-section > h2:first-child {
  margin-top: 0;
}

.tm-blog-content .blog-section > p:first-of-type {
  font-size: 17px;
  line-height: 1.72;
  opacity: 0.86;
}

.tm-blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--tm-grid-20);
}

.tm-inline-cta-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.tm-inline-cta-title {
  font-family: var(--tm-font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--tm-forest);
}

.tm-inline-cta-body {
  font-family: var(--tm-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--tm-forest);
  opacity: 0.78;
}

.tm-inline-cta-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.tm-inline-cta-actions .tm-btn {
  width: 100%;
  justify-content: center;
  text-decoration: none !important;
}

.tm-inline-cta-actions a {
  text-decoration: none !important;
}

/* Fallback for legacy CTA links that may arrive without TM button classes */
.tm-inline-cta-actions > a:not(.tm-btn) {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 1px solid var(--tm-grid-20);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: none;
  color: var(--tm-forest);
  background: transparent;
}

.tm-inline-cta-actions > a:not(.tm-btn):first-child {
  border-color: var(--tm-forest);
  background: var(--tm-forest);
  color: var(--tm-white);
}

.tm-inline-cta-meta {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.56;
}

html.dark-mode .tm-inline-cta-card {
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 720px) {
  .tm-inline-cta-actions {
    grid-template-columns: 1fr;
  }

  .tm-blog-content .blog-section > p:first-of-type {
    font-size: 16px;
  }
}

html.dark-mode .tm-blog-content pre code {
  color: #d8ffe6;
}

.tm-blog-content h2 {
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-card-h3);
  font-weight: 700;
  line-height: var(--tm-type-card-h3-lh);
  letter-spacing: var(--tm-type-card-h3-ls);
  color: var(--tm-forest);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.tm-blog-content h3 {
  font-family: var(--tm-font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tm-forest);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.tm-blog-content h4 {
  font-family: var(--tm-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.65;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.tm-blog-content ul,
.tm-blog-content ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-5);
}

.tm-blog-content li {
  margin-bottom: var(--space-2);
  color: var(--tm-forest);
  opacity: 0.86;
}

.tm-blog-content .bullet-list {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
}

.tm-blog-content .bullet-list li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-3);
  line-height: 1.72;
}

.tm-blog-content .bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 6px;
  height: 6px;
  background: var(--tm-mint);
}

.tm-blog-content code {
  font-family: var(--tm-font-mono);
  font-size: 13px;
  background: var(--tm-grid-10);
  border: 1px solid var(--tm-grid-20);
  padding: 2px 6px;
  color: var(--tm-forest);
  border-radius: var(--radius-compact);
}

.tm-blog-content pre {
  background: var(--tm-surface-subcard);
  border: 1px solid var(--tm-grid-20);
  padding: var(--space-5);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

html.dark-mode .tm-blog-content pre {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--tm-grid-30);
}

.tm-blog-content pre code {
  font-size: var(--tm-type-code-mono);
  font-weight: 500;
  background: none;
  border: none;
  padding: 0;
  color: var(--tm-forest);
  line-height: var(--tm-type-code-mono-lh);
}

.tm-blog-content blockquote {
  border-left: 1px solid var(--tm-grid-30);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  margin: var(--space-6) 0;
  opacity: 0.9;
  background: transparent;
}

.tm-blog-content blockquote p {
  font-style: normal;
  font-size: 15px;
  line-height: 1.7;
  opacity: 0.82;
  margin-bottom: 0;
}

/* Comparison intro/verdict prose: improve block readability and spacing */
.tm-comparison-page .tm-vr {
  display: block;
  max-width: 920px;
  padding-left: var(--space-5);
  margin: 0 0 var(--space-8);
  border-left: 1px solid var(--tm-grid-30);
  font-family: var(--tm-font-body);
  font-size: 16px;
  line-height: 1.78;
  color: var(--tm-forest);
  opacity: 0.86;
}

.tm-comparison-page .tm-vr::before {
  display: none;
}

html.dark-mode .tm-comparison-page .tm-vr {
  border-left-color: var(--tm-grid-20);
  opacity: 0.9;
}

/* On inner pages, reveal animations can leave large "blank" gaps in captures
   and first paint. Keep these sections always visible. */
body.tm-inner [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

.tm-blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: 14px;
}

.tm-blog-content th {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--tm-grid-20);
}

.tm-blog-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--tm-grid-10);
  color: var(--tm-forest);
  opacity: 0.8;
  vertical-align: top;
}

.tm-blog-content a {
  color: var(--tm-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 1;
  transition: opacity 0.15s;
}

.tm-blog-content a.tm-btn {
  text-decoration: none;
}

.tm-blog-content a:hover { opacity: 0.7; }

/* Blog post hero meta row */
.tm-blog-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

.tm-blog-hero-meta .tm-tag-chip {
  min-height: var(--tm-tag-height);
  height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  gap: var(--tm-tag-gap);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  background: transparent;
  opacity: 0.76;
}

.tm-blog-hero-meta .tm-tag-chip::before {
  content: "";
  display: inline-block;
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  flex-shrink: 0;
  background: var(--tm-mint);
}

.tm-blog-meta-date,
.tm-blog-meta-read {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.56;
}

.tm-blog-meta-sep {
  color: var(--tm-forest);
  opacity: 0.34;
}

.tm-blog-hero-cat {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-3);
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  border: 1px solid var(--tm-grid-20);
  opacity: 0.8;
}

.tm-blog-hero-sep {
  color: var(--tm-forest);
  opacity: 0.3;
}

.tm-blog-hero-info {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.5;
}

/* Table of contents */
.tm-toc {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tm-toc-item {
  display: block;
  font-family: var(--tm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--tm-grid-10);
  text-decoration: none;
  transition: opacity 0.15s;
}

.tm-toc-item:hover { opacity: 1; }

.tm-toc-item.tm-toc-h3 {
  padding-left: var(--space-4);
  font-size: 10px;
  opacity: 0.5;
}

/* ── Comparison Table ────────────────────────────────────────────────── */

.tm-comparison-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--tm-grid-20);
}

.tm-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tm-font-mono);
}

.tm-comparison-table thead th {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 2px solid var(--tm-grid-20);
  background: var(--tm-paper);
}

.tm-comparison-table thead th.col-us {
  background: var(--tm-mint-15);
  color: var(--tm-forest);
  opacity: 1;
}

.tm-comparison-table tbody td {
  font-size: 13px;
  line-height: 1.5;
  color: var(--tm-forest);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--tm-grid-10);
  vertical-align: top;
}

.tm-comparison-table tbody td.col-us {
  background: rgba(158, 255, 191, 0.06);
}

html.dark-mode .tm-comparison-table tbody td.col-us {
  background: rgba(158, 255, 191, 0.04);
}

.tm-comparison-table tbody tr:last-child td {
  border-bottom: none;
}

/* Winner/loser indicators */
.tm-comparison-table .cell-win {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tm-comparison-table .cell-win::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--tm-mint);
  flex-shrink: 0;
  display: inline-block;
}

.tm-comparison-table .cell-lose {
  opacity: 0.45;
}

/* Comparison pros/cons grid */
.tm-comparison-pros-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--tm-grid-20);
}

@media (max-width: 720px) {
  .tm-comparison-pros-grid { grid-template-columns: 1fr; }
}

.tm-comparison-pros-col {
  padding: var(--space-6);
}

.tm-comparison-pros-col + .tm-comparison-pros-col {
  border-left: 1px solid var(--tm-grid-20);
}

.tm-comparison-pros-col-label {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.5;
  display: block;
  margin-bottom: var(--space-4);
}

.tm-comparison-pros-col h3 {
  font-family: var(--tm-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tm-forest);
  margin-bottom: var(--space-4);
}

.tm-comparison-pros-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tm-comparison-pros-list li {
  font-family: var(--tm-font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tm-forest);
  opacity: 0.8;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.tm-comparison-pros-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--tm-mint);
  flex-shrink: 0;
  margin-top: 6px;
}

.tm-comparison-pros-list.tm-them li::before {
  background: var(--tm-coral);
  opacity: 0.6;
}

/* ── Use Case Detail ─────────────────────────────────────────────────── */

.tm-usecase-tag-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.tm-usecase-tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-3);
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid var(--tm-grid-20);
  color: var(--tm-forest);
  opacity: 0.65;
}

/* ── Pricing Page Specifics ──────────────────────────────────────────── */

/* Reuses tm-pricing-grid, tm-plan-card, tm-compare-table from landing-tm.css */
/* Only additions needed for pricing detail page below */

.tm-pricing-note {
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.56;
  text-align: center;
  margin-top: var(--space-5);
  min-height: 48px;
}

/* ── Content Pages (Legal / FAQ) ─────────────────────────────────────── */

.tm-content-page {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-8);
}

.tm-content-page h1 {
  font-family: var(--tm-font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tm-forest);
  margin-bottom: var(--space-5);
}

.tm-content-page h2 {
  font-family: var(--tm-font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tm-forest);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--tm-grid-20);
}

.tm-content-page h3 {
  font-family: var(--tm-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.tm-content-page p {
  font-family: var(--tm-font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--tm-forest);
  opacity: 0.8;
  margin-bottom: var(--space-4);
}

.tm-content-page ul,
.tm-content-page ol {
  margin-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.tm-content-page li {
  font-family: var(--tm-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--tm-forest);
  opacity: 0.8;
  margin-bottom: var(--space-2);
}

.tm-content-page a {
  color: var(--tm-forest);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.15s;
}

.tm-content-page a:hover { opacity: 0.65; }

.tm-content-updated {
  display: block;
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.4;
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--tm-grid-20);
}

/* ── Auth + Share + Admin surface parity (Wave 5/6) ─────────────────── */

body.tm-inner .auth-shell {
  max-width: var(--tm-shell-max);
  padding: calc(var(--space-10) + var(--space-2)) var(--tm-shell-gutter) var(--space-12);
  gap: var(--space-8);
}

/* Login page redesign: balanced hero + auth panel */
body.tm-inner.tm-login-page .auth-shell.tm-login-shell {
  min-height: calc(100vh - 64px);
  max-width: var(--tm-shell-max);
  margin: 0 auto;
  padding: calc(clamp(30px, 5vw, 56px) + 16px) var(--tm-shell-gutter) clamp(56px, 7vw, 88px);
  --tm-login-title-size: clamp(32px, 4.5vw, 56px);
  --tm-login-sub-size: 16px;
  --tm-login-panel-title-size: clamp(24px, 3vw, 40px);
  --tm-login-cap-title-size: clamp(20px, 2.5vw, 28px);
}

body.tm-inner.tm-login-page .tm-login-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 460px);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

body.tm-inner.tm-login-page .tm-login-hero {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  padding: clamp(24px, 3.6vw, 44px);
}

body.tm-inner.tm-login-page .tm-login-hero .tm-label {
  margin-bottom: var(--space-6);
}

body.tm-inner.tm-login-page .tm-login-title {
  margin: 0;
  max-width: 17ch;
  font-family: var(--tm-font-display);
  font-size: var(--tm-login-title-size);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--tm-forest);
}

body.tm-inner.tm-login-page .tm-login-subtitle {
  margin: var(--space-6) 0 0;
  max-width: 62ch;
  font-size: var(--tm-login-sub-size);
  line-height: 1.65;
  color: color-mix(in srgb, var(--tm-forest) 78%, transparent);
}

body.tm-inner.tm-login-page .tm-login-benefits {
  margin: var(--space-8) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--tm-grid-20);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
  list-style: none;
}

body.tm-inner.tm-login-page .tm-login-benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--tm-forest) 86%, transparent);
}

body.tm-inner.tm-login-page .tm-login-benefits li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 0.53em;
  flex-shrink: 0;
  background: var(--tm-mint);
}

body.tm-inner.tm-login-page .tm-login-capabilities {
  margin-top: var(--space-8);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  padding: clamp(18px, 2.4vw, 28px);
}

body.tm-inner.tm-login-page .tm-login-capabilities-title {
  margin: 0 0 var(--space-4);
  font-family: var(--tm-font-display);
  font-size: var(--tm-login-cap-title-size);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--tm-forest);
}

body.tm-inner.tm-login-page .tm-login-capabilities-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

body.tm-inner.tm-login-page .tm-login-capabilities-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 15px;
  line-height: 1.58;
  color: color-mix(in srgb, var(--tm-forest) 78%, transparent);
}

body.tm-inner.tm-login-page .tm-login-capabilities-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.58em;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--tm-forest) 60%, var(--tm-mint));
}

body.tm-inner.tm-login-page .tm-login-auth-stack {
  position: sticky;
  top: 96px;
}

body.tm-inner.tm-login-page .auth-panel.tm-login-panel {
  max-width: none;
  width: 100%;
  justify-self: stretch;
  padding: clamp(22px, 2.2vw, 30px);
  display: grid;
  gap: var(--space-4);
}

body.tm-inner.tm-login-page .tm-login-panel-title {
  margin: 0;
  font-family: var(--tm-font-display);
  font-size: var(--tm-login-panel-title-size);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

body.tm-inner.tm-login-page .tm-login-panel-subtitle {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

body.tm-inner.tm-login-page .tm-login-form {
  display: grid;
  gap: 12px;
}

body.tm-inner.tm-login-page .auth-panel .google-btn,
body.tm-inner.tm-login-page .auth-panel .input {
  min-height: 46px;
  height: 46px;
  width: 100%;
  font-size: 16px;
}

body.tm-inner.tm-login-page .auth-panel .input {
  padding: 0 14px;
  box-shadow: none;
}

body.tm-inner.tm-login-page .auth-panel .google-btn {
  font-size: 16px;
  font-weight: 500;
}

body.tm-inner.tm-login-page .auth-panel .checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 15px;
  color: color-mix(in srgb, var(--tm-forest) 78%, transparent);
}

body.tm-inner.tm-login-page .auth-panel .checkbox-row input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--tm-forest);
}

body.tm-inner.tm-login-page .auth-panel .divider {
  margin: var(--space-1) 0;
}

body.tm-inner.tm-login-page .auth-panel .message {
  margin-top: 0;
  min-height: 20px;
}

body.tm-inner.tm-login-page .auth-panel .otp-resend {
  margin-top: 0;
}

body.tm-inner.tm-oauth-page {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

body.tm-inner.tm-oauth-page .tm-oauth-header {
  display: flex;
  justify-content: center;
  padding: 28px 20px 0;
}

body.tm-inner.tm-oauth-page .tm-oauth-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--tm-forest);
}

body.tm-inner.tm-oauth-page .tm-oauth-brand-mark {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.tm-inner.tm-oauth-page .tm-oauth-brand-mark img {
  width: 32px;
  height: 32px;
  display: block;
}

body.tm-inner.tm-oauth-page .tm-oauth-brand-text {
  display: grid;
  gap: 1px;
}

body.tm-inner.tm-oauth-page .tm-oauth-brand-wordmark {
  font-family: var(--tm-font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
}

body.tm-inner.tm-oauth-page .tm-oauth-brand-subline {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tm-forest) 52%, transparent);
}

body.tm-inner.tm-oauth-page .auth-shell.tm-login-shell.tm-oauth-shell {
  min-height: auto;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 40px;
}

body.tm-inner.tm-oauth-page .tm-oauth-layout {
  width: 100%;
  max-width: 460px;
}

body.tm-inner.tm-oauth-page .tm-oauth-panel,
body.tm-inner.tm-oauth-page .tm-oauth-success-note {
  background: var(--tm-paper);
}

body.tm-inner.tm-oauth-page .tm-oauth-panel {
  gap: var(--space-5);
  padding: clamp(22px, 3vw, 30px);
}

body.tm-inner.tm-oauth-page .tm-oauth-panel-head {
  display: grid;
  gap: var(--space-3);
}

body.tm-inner.tm-oauth-page .tm-oauth-panel-head .tm-label {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

body.tm-inner.tm-oauth-page .tm-oauth-success-note {
  display: grid;
  gap: var(--space-4);
}

body.tm-inner.tm-oauth-page .tm-oauth-helper {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--tm-forest) 68%, transparent);
}

body.tm-inner.tm-login-page.tm-oauth-page .auth-panel .tm-oauth-marketing-consent {
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--tm-forest) 16%, transparent);
  background: color-mix(in srgb, var(--tm-mint) 9%, var(--tm-paper));
}

body.tm-inner.tm-login-page.tm-oauth-page .auth-panel .tm-oauth-marketing-consent input {
  width: 14px;
  height: 14px;
  margin: 2px 0 0;
  accent-color: var(--tm-forest);
}

body.tm-inner.tm-oauth-page .tm-oauth-marketing-consent span {
  display: grid;
  gap: 3px;
}

body.tm-inner.tm-oauth-page .tm-oauth-marketing-consent strong {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--tm-forest);
}

body.tm-inner.tm-oauth-page .tm-oauth-marketing-consent small {
  font-size: 12px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--tm-forest) 58%, transparent);
}

body.tm-inner.tm-oauth-page #loginSuccess[hidden],
body.tm-inner.tm-oauth-page #loginRequest[hidden] {
  display: none !important;
}

body.tm-inner.tm-oauth-page .tm-oauth-footer {
  margin-top: auto;
  border-top: 0;
  padding-top: 0;
}

body.tm-inner.tm-oauth-page .footer-lite-inner {
  justify-content: center;
  gap: 16px;
}

@media (max-width: 1120px) {
  body.tm-inner.tm-login-page .tm-login-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  body.tm-inner.tm-login-page .tm-login-auth-stack {
    position: static;
    top: auto;
    order: -1;
  }

  body.tm-inner.tm-login-page .tm-login-title {
    max-width: 22ch;
    font-size: clamp(30px, 8vw, 48px);
  }
}

@media (max-width: 720px) {
  body.tm-inner.tm-login-page .auth-shell.tm-login-shell {
    padding-top: calc(var(--header-height-mobile) + 20px);
  }

  body.tm-inner.tm-login-page .tm-login-hero {
    padding: var(--space-5);
  }

  body.tm-inner.tm-login-page .tm-login-benefits {
    grid-template-columns: 1fr;
  }

  body.tm-inner.tm-login-page .tm-login-panel-title {
    font-size: clamp(24px, 8vw, 34px);
  }

  body.tm-inner.tm-oauth-page .tm-oauth-header {
    padding-top: 20px;
  }

  body.tm-inner.tm-oauth-page .auth-shell.tm-login-shell.tm-oauth-shell {
    align-items: flex-start;
    padding-top: 24px;
  }

  body.tm-inner.tm-oauth-page .tm-oauth-brand-subline {
    letter-spacing: 0.18em;
  }

  body.tm-inner.tm-oauth-page .footer-lite-inner {
    flex-direction: column;
    align-items: center;
  }
}

body.tm-inner .auth-panel,
body.tm-inner .auth-shell .card,
body.tm-inner .share-actions,
body.tm-inner .footer-lite,
body.tm-inner .admin-metric-card,
body.tm-inner .admin-table-wrap,
body.tm-inner .admin-revenue-card,
body.tm-inner .admin-setting-card,
body.tm-inner .admin-logs,
body.tm-inner .admin-funnel,
body.tm-inner .metric-item,
body.tm-inner .coupon-item,
body.tm-inner .admin-recommendation-banner {
  background: var(--tm-paper);
  border: 1px solid var(--tm-grid-20);
  box-shadow: none;
}

body.tm-inner .auth-panel h1,
body.tm-inner .auth-panel h3,
body.tm-inner .admin-header h1,
body.tm-inner .admin-section-header h2 {
  color: var(--tm-forest);
}

body.tm-inner .auth-panel p,
body.tm-inner .auth-panel .muted,
body.tm-inner .admin-header p,
body.tm-inner .admin-metric-card .label,
body.tm-inner .admin-setting-row .label,
body.tm-inner .admin-log-entry .time,
body.tm-inner .admin-log-entry .message {
  color: var(--tm-forest);
  opacity: 0.62;
}

body.tm-inner .auth-panel input[type="email"],
body.tm-inner .auth-panel input[type="text"],
body.tm-inner .auth-panel .input,
body.tm-inner .auth-panel textarea,
body.tm-inner .auth-panel select,
body.tm-inner .admin-input,
body.tm-inner .coupon-controls .admin-input {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  color: var(--tm-forest);
  box-shadow: none;
}

body.tm-inner .auth-panel input[type="email"]:focus,
body.tm-inner .auth-panel input[type="text"]:focus,
body.tm-inner .auth-panel .input:focus,
body.tm-inner .auth-panel textarea:focus,
body.tm-inner .auth-panel select:focus,
body.tm-inner .admin-input:focus {
  outline: none;
  border-color: var(--tm-forest);
  box-shadow: none;
  background: var(--tm-paper);
}

body.tm-inner .auth-panel .google-btn {
  background: var(--tm-paper);
  border: 1px solid var(--tm-grid-20);
  color: var(--tm-forest);
}

body.tm-inner .auth-panel .google-btn:hover {
  background: var(--tm-grid-10);
  border-color: var(--tm-grid-30);
}

body.tm-inner .auth-panel .divider::before,
body.tm-inner .auth-panel .divider::after {
  background: var(--tm-grid-20);
}

body.tm-inner .footer-lite {
  border-top: 1px solid var(--tm-grid-20);
  padding: var(--space-8) 0 var(--space-10);
}

body.tm-inner .footer-lite-copy,
body.tm-inner .footer-lite a {
  color: var(--tm-forest);
  opacity: 0.68;
}

body.tm-inner .footer-lite a:hover {
  opacity: 1;
}

body.tm-inner .admin-layout {
  background: var(--tm-paper);
  min-height: calc(100vh - 64px);
}

body.tm-inner .admin-container {
  max-width: var(--tm-shell-max);
  margin: 0 auto;
  padding: calc(var(--space-8) + var(--space-2)) var(--tm-shell-gutter) var(--space-12);
}

body.tm-inner .admin-header,
body.tm-inner .admin-tabs,
body.tm-inner .admin-table th,
body.tm-inner .admin-table td,
body.tm-inner .admin-log-entry,
body.tm-inner .admin-setting-row {
  border-color: var(--tm-grid-20);
}

body.tm-inner .admin-tab {
  border: 1px solid var(--tm-grid-20);
  background: transparent;
  color: var(--tm-forest);
  opacity: 0.7;
  font-family: var(--tm-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.tm-inner .admin-tab:hover {
  background: var(--tm-grid-10);
  color: var(--tm-forest);
  opacity: 1;
}

body.tm-inner .admin-tab.active {
  background: var(--tm-forest);
  border-color: var(--tm-forest);
  color: var(--tm-paper);
  opacity: 1;
}

body.tm-inner .admin-table th {
  background: var(--tm-paper);
  color: var(--tm-forest);
  opacity: 0.62;
}

body.tm-inner .admin-table td,
body.tm-inner .admin-table .email,
body.tm-inner .admin-metric-card .value,
body.tm-inner .admin-revenue-card .amount,
body.tm-inner .admin-setting-row .value,
body.tm-inner .admin-log-entry .level {
  color: var(--tm-forest);
}

body.tm-inner .admin-table tbody tr:hover,
body.tm-inner .admin-log-entry:hover {
  background: var(--tm-grid-10);
}

body.tm-inner .status-badge {
  background: transparent;
  border: 1px solid var(--tm-grid-20);
  color: var(--tm-forest);
}

body.tm-inner .admin-btn,
body.tm-inner .admin-section-actions .btn,
body.tm-inner .input-row .btn {
  border: 1px solid var(--tm-grid-20);
  background: transparent;
  color: var(--tm-forest);
}

body.tm-inner .admin-btn.primary {
  background: var(--tm-forest);
  border-color: var(--tm-forest);
  color: var(--tm-paper);
}

body.tm-inner .admin-btn.primary:hover {
  background: transparent;
  color: var(--tm-forest);
}

/* ── Footer Override ─────────────────────────────────────────────────── */
/* Transforms old .footer into TM-spec footer on inner pages             */

body.tm-inner .footer {
  border-top: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  padding: var(--space-16) 0 var(--space-8);
}

body.tm-inner .footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--space-10);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}

@media (max-width: 1024px) {
  body.tm-inner .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 640px) {
  body.tm-inner .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

body.tm-inner .footer-brand {
  font-family: var(--tm-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tm-forest);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  margin-bottom: var(--space-4);
}

body.tm-inner .footer .brand-mark {
  width: 28px;
  height: 28px;
  background: var(--tm-forest);
  color: var(--tm-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tm-font-mono);
  font-size: 10px;
  font-weight: 600;
  border-radius: 0;
  flex-shrink: 0;
}

body.tm-inner .footer-summary {
  font-family: var(--tm-font-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--tm-forest);
  opacity: 0.55;
  max-width: 220px;
}

body.tm-inner .footer h4 {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.45;
  margin-bottom: var(--space-4);
}

body.tm-inner .footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

body.tm-inner .footer a {
  font-family: var(--tm-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--tm-forest);
  opacity: 0.7;
  text-decoration: none;
  transition: opacity 0.15s;
}

body.tm-inner .footer a:hover { opacity: 1; }

body.tm-inner .footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1280px;
  margin: var(--space-10) auto 0;
  padding: var(--space-5) var(--space-8) 0;
  border-top: 1px solid var(--tm-grid-10);
  flex-wrap: wrap;
  gap: var(--space-4);
}

body.tm-inner .footer-meta span {
  font-family: var(--tm-font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.35;
}

/* Dark mode footer */
html.dark-mode body.tm-inner .footer {
  background: var(--tm-paper);
  border-top-color: var(--tm-grid-20);
}

/* ── Mobile Nav Override ─────────────────────────────────────────────── */

@media (max-width: 960px) {
  body.tm-inner .site-header .nav-links {
    display: none;
  }
}

/* ── Scroll Reveal (reuse existing pattern) ──────────────────────────── */

/* [data-reveal] and .reveal-in are already defined in landing-tm.css    */
/* Inner pages use the same system — no duplication needed               */

/* ── Reduced Motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.tm-inner .site-header,
  .tm-inner-card,
  .tm-blog-card,
  .tm-category-chip,
  .tm-related-item {
    transition: none;
  }
}

/* ── TM Design Language Freeze (Homepage-first canonical contract) ───── */
/* Final override layer to ensure all route families consume one spacing  */
/* + typography + surface system for cards/chips/lists/code/copy actions. */

body.tm-inner .tm-tag-chip,
body.tm-inner .tm-category-chip,
body.tm-inner .blog-category-nav a,
body.tm-inner .category-nav a,
body.tm-inner .chip,
body.tm-inner .badge,
body.tm-inner .badge-tag {
  min-height: var(--tm-chip-height);
  height: var(--tm-chip-height);
  padding: 0 var(--tm-chip-pad-x);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-chip-font-size);
  letter-spacing: var(--tm-chip-letter-spacing);
  text-transform: uppercase;
  border: 1px solid var(--tm-grid-20);
  background: transparent;
  color: var(--tm-forest);
  opacity: 0.72;
  border-radius: var(--radius-control);
  line-height: 1;
}

body.tm-inner .tm-tag-chip:hover,
body.tm-inner .tm-category-chip:hover,
body.tm-inner .blog-category-nav a:hover,
body.tm-inner .category-nav a:hover,
body.tm-inner .blog-category-nav a.active,
body.tm-inner .category-nav a.active,
body.tm-inner .tm-category-chip.is-active {
  background: var(--tm-forest-10);
  border-color: var(--tm-grid-30);
  opacity: 1;
}

/* Blog post hero tag must follow homepage tag geometry + square marker */
body.tm-inner .tm-blog-hero-meta {
  margin-bottom: var(--space-7);
}

body.tm-inner .tm-blog-hero-meta .tm-tag-chip {
  min-height: var(--tm-tag-height);
  height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  gap: var(--tm-tag-gap);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  background: transparent;
  opacity: 0.76;
}

body.tm-inner .tm-blog-hero-meta .tm-tag-chip::before {
  content: "";
  display: inline-block;
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  flex-shrink: 0;
  background: var(--tm-mint);
}

/* ── Universal label/chip bridge (compat + canonical) ───────────────── */
body.tm-inner .tm-label,
body.tm-inner .tm-chip,
body.tm-inner .tm-tag-chip,
body.tm-inner .tm-badge,
body.tm-inner .chip,
body.tm-inner .badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--tm-tag-height);
  gap: var(--tm-tag-gap);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-control);
  background: var(--tm-chip-bg);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  font-weight: 500;
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  line-height: var(--tm-type-label-mono-lh);
  color: var(--tm-forest);
  opacity: 0.78;
}

body.tm-inner .tm-label,
body.tm-inner .tm-hero-eyebrow-pill {
  background: var(--tm-label-bg);
  align-self: flex-start;
}

body.tm-inner .tm-inner-hero .tm-label:not(.tm-hero-eyebrow-pill) {
  margin-bottom: calc(var(--space-7) + var(--space-1));
}

body.tm-inner .tm-label::before,
body.tm-inner .tm-chip::before,
body.tm-inner .tm-tag-chip::before {
  content: "";
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  display: none;
  flex-shrink: 0;
  border-radius: 0;
  background: var(--tm-sem-dot-color);
}

body.tm-inner .tm-sem-platform::before,
body.tm-inner .tm-sem-sheets::before,
body.tm-inner .tm-sem-sql::before,
body.tm-inner .tm-sem-script::before,
body.tm-inner .tm-sem-regex::before,
body.tm-inner .tm-sem-status-positive::before,
body.tm-inner .tm-sem-status-attention::before,
body.tm-inner .tm-sem-status-alert::before {
  display: inline-block;
}

body.tm-inner .tm-chip.tm-dot-explicit::before,
body.tm-inner .tm-label.tm-dot-explicit::before,
body.tm-inner .tm-tag-chip.tm-dot-explicit::before {
  display: none;
}

body.tm-inner .tm-chip:has(.tm-sq-dot, .tm-badge-dot, .tm-label-dot, .tm-chip-dot)::before,
body.tm-inner .tm-label:has(.tm-sq-dot, .tm-badge-dot, .tm-label-dot, .tm-chip-dot)::before,
body.tm-inner .tm-tag-chip:has(.tm-sq-dot, .tm-badge-dot, .tm-label-dot, .tm-chip-dot)::before {
  display: none;
}

body.tm-inner .tm-chip .tm-sq-dot,
body.tm-inner .tm-chip .tm-badge-dot,
body.tm-inner .tm-chip .tm-label-dot,
body.tm-inner .tm-chip .tm-chip-dot,
body.tm-inner .tm-label .tm-sq-dot,
body.tm-inner .tm-label .tm-badge-dot,
body.tm-inner .tm-label .tm-label-dot,
body.tm-inner .tm-label .tm-chip-dot,
body.tm-inner .tm-tag-chip .tm-sq-dot,
body.tm-inner .tm-tag-chip .tm-badge-dot,
body.tm-inner .tm-tag-chip .tm-label-dot,
body.tm-inner .tm-tag-chip .tm-chip-dot {
  background: var(--tm-sem-dot-color, var(--tm-sem-platform)) !important;
}

body.tm-inner .tm-dot-none::before,
body.tm-inner .tm-dot-none .tm-sq-dot,
body.tm-inner .tm-dot-none .tm-badge-dot {
  display: none !important;
}

body.tm-inner .tm-sem-platform { --tm-sem-dot-color: var(--tm-sem-platform); }
body.tm-inner .tm-sem-sheets { --tm-sem-dot-color: var(--tm-sem-sheets); }
body.tm-inner .tm-sem-sql { --tm-sem-dot-color: var(--tm-sem-sql); }
body.tm-inner .tm-sem-script { --tm-sem-dot-color: var(--tm-sem-script); }
body.tm-inner .tm-sem-regex { --tm-sem-dot-color: var(--tm-sem-regex); }
body.tm-inner .tm-sem-status-positive { --tm-sem-dot-color: var(--tm-sem-status-positive); }
body.tm-inner .tm-sem-status-attention { --tm-sem-dot-color: var(--tm-sem-status-attention); }
body.tm-inner .tm-sem-status-alert { --tm-sem-dot-color: var(--tm-sem-status-alert); }
body.tm-inner .tm-chip--neutral { opacity: 0.72; }

body.tm-inner .tm-chip--interactive,
body.tm-inner .tm-category-chip,
body.tm-inner .blog-category-nav a {
  cursor: pointer;
  transition: opacity 0.16s, border-color 0.16s, background-color 0.16s;
}

body.tm-inner .tm-chip--interactive:hover,
body.tm-inner .tm-chip--active,
body.tm-inner .tm-category-chip:hover,
body.tm-inner .tm-category-chip.is-active,
body.tm-inner .blog-category-nav a:hover,
body.tm-inner .blog-category-nav a.active {
  opacity: 1;
  border-color: var(--tm-grid-30);
  background: var(--tm-forest-10);
}

body.tm-inner .tm-section-kicker,
body.tm-inner .tm-section-label,
body.tm-inner .tm-inner-section-label {
  display: inline-flex;
  align-items: center;
  min-height: var(--tm-tag-height);
  gap: var(--tm-tag-gap);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-control);
  background: transparent;
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.76;
}

/* Use case pages: unify chips, code frame/copy button, and link color language */
body.tm-inner .tm-usecase-page .tm-inner-meta {
  margin-top: var(--space-5);
  gap: var(--space-2);
}

body.tm-inner .tm-usecase-page .tm-inner-meta > span {
  display: inline-flex;
  align-items: center;
  min-height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.72;
  background: transparent;
}

body.tm-inner .tm-usecase-page .tm-inner-meta > span + span::before,
body.tm-inner .tm-usecase-page .tm-inner-meta .tm-inner-meta-sep {
  display: none;
}

body.tm-inner .tm-usecase-page .tm-inner-meta > span::before {
  content: "";
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  background: var(--tm-mint);
  margin-right: var(--tm-tag-gap);
  flex-shrink: 0;
}

body.tm-inner .tm-usecase-page .usecase-example-card .chip,
body.tm-inner .tm-usecase-page .usecase-example-card .tm-chip,
body.tm-inner .tm-usecase-page .related-usecase-card .badge,
body.tm-inner .tm-usecase-page .related-usecase-card .tm-chip,
body.tm-inner .tm-usecase-index .usecase-card .badge,
body.tm-inner .tm-usecase-index .usecase-card .tm-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tm-tag-height);
  height: var(--tm-tag-height);
  padding: 0 var(--tm-tag-pad-x);
  border: 1px solid var(--tm-grid-20);
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  background: transparent;
  opacity: 0.76;
  gap: var(--tm-tag-gap);
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
}

/* Keep example-card tool tags compact even if a legacy flex rule sets stretch. */
body.tm-inner .tm-usecase-page .usecase-example-card > .chip,
body.tm-inner .tm-usecase-page .usecase-example-card > .tm-chip {
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
}

body.tm-inner .tm-usecase-page .usecase-example-card .chip::before,
body.tm-inner .tm-usecase-page .usecase-example-card .tm-chip::before,
body.tm-inner .tm-usecase-page .related-usecase-card .badge::before,
body.tm-inner .tm-usecase-page .related-usecase-card .tm-chip::before,
body.tm-inner .tm-usecase-index .usecase-card .badge::before,
body.tm-inner .tm-usecase-index .usecase-card .tm-chip::before {
  content: "";
  width: var(--tm-tag-dot-size);
  height: var(--tm-tag-dot-size);
  background: var(--tm-mint);
  flex-shrink: 0;
  display: inline-block;
}

body.tm-inner .tm-usecase-page .usecase-example-card .code-frame {
  border: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper));
  padding: var(--space-4);
  margin: 0;
}

body.tm-inner .tm-usecase-page .usecase-example-card .code-frame pre {
  border: none;
  box-shadow: none;
  background: transparent;
  margin: 0;
  padding: var(--space-4);
  padding-right: calc(var(--space-4) + 86px);
}

body.tm-inner .tm-usecase-page .usecase-example-card .code-frame .seo-copy-btn {
  top: var(--space-4);
  right: var(--space-4);
  height: var(--tm-copy-btn-height);
  min-height: var(--tm-copy-btn-height);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  color: var(--tm-forest);
}

body.tm-inner .tm-usecase-page .usecase-card-arrow,
body.tm-inner .tm-usecase-index .usecase-card-arrow,
body.tm-inner .tm-usecase-page .related-usecase-card .usecase-card-arrow {
  color: var(--tm-forest);
  opacity: 0.8;
}

body.tm-inner .tm-usecase-page .usecase-card-arrow:hover,
body.tm-inner .tm-usecase-index .usecase-card-arrow:hover,
body.tm-inner .tm-usecase-page .related-usecase-card .usecase-card-arrow:hover {
  opacity: 1;
}

body.tm-inner .tm-usecase-page .usecase-arrow-icon,
body.tm-inner .tm-usecase-index .usecase-arrow-icon {
  border-top-color: currentColor;
  border-right-color: currentColor;
}

/* Feature icons: remove legacy blue/green blocks, keep TM mono icon language */
body.tm-inner .feature-card .icon-stack,
body.tm-inner .feature-card .icon-stack.blue,
body.tm-inner .usecase-feature-card .icon-stack,
body.tm-inner .usecase-feature-card .icon-stack.blue {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-surface);
  border: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper));
  color: color-mix(in srgb, var(--tm-forest) 86%, transparent);
}

body.tm-inner .feature-card .icon-stack svg,
body.tm-inner .usecase-feature-card .icon-stack svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Other icon containers: keep one neutral TM style across subpages */
body.tm-inner .tm-inner-card-icon,
body.tm-inner .tm-inner-card-icon.tm-inner-card-icon--blue,
body.tm-inner .pain-card .pain-icon,
body.tm-inner .tm-pain-card-icon,
body.tm-inner .tm-usecase-feature-card-icon,
body.tm-inner .feature-icon-wrapper {
  border-radius: var(--radius-surface);
  border: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper));
  color: color-mix(in srgb, var(--tm-forest) 86%, transparent);
}

body.tm-inner .tm-inner-card-icon svg,
body.tm-inner .pain-card .pain-icon svg,
body.tm-inner .tm-pain-card-icon svg,
body.tm-inner .tm-usecase-feature-card-icon svg,
body.tm-inner .feature-icon-wrapper svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pricing page second pass: improve hierarchy/readability and align with homepage surfaces */
body.tm-inner .tm-pricing-page .tm-inner-meta {
  margin-top: var(--space-5);
  gap: var(--space-4);
  flex-wrap: wrap;
}

body.tm-inner .tm-pricing-page .tm-inner-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: auto;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--tm-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.6;
}

body.tm-inner .tm-pricing-page .tm-inner-meta > span svg {
  width: 14px;
  height: 14px;
  color: color-mix(in srgb, var(--tm-forest) 58%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.tm-inner .tm-pricing-page .tm-inner-meta > span[data-meta-icon="free"] svg {
  stroke-width: 1.6;
}

body.tm-inner .tm-pricing-page .tm-inner-meta .tm-inner-meta-sep {
  display: none;
}

body.tm-inner .tm-pricing-page .tm-inner-section {
  padding: clamp(32px, 4vw, 56px) 0;
}

body.tm-inner .tm-pricing-page .tm-pricing-grid {
  border: 0;
  gap: 16px;
}

body.tm-inner .tm-pricing-page .tm-plan-card {
  border: 1px solid var(--tm-grid-20);
  border-radius: var(--radius-surface);
  background: var(--tm-surface-card);
  padding: 24px;
  gap: 16px;
  box-shadow: none;
}

body.tm-inner .tm-pricing-page .tm-plan-card:last-child {
  border-right: 1px solid var(--tm-grid-20);
}

body.tm-inner .tm-pricing-page .tm-plan-card.is-featured {
  background: var(--tm-forest);
  color: var(--plan-ink);
}

body.tm-inner .tm-pricing-page .tm-plan-card .tm-badge {
  width: fit-content;
}

body.tm-inner .tm-pricing-page .tm-plan-card.is-featured .tm-badge {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--plan-ink);
}

body.tm-inner .tm-pricing-page .tm-plan-price {
  margin-top: 0;
}

body.tm-inner .tm-pricing-page .tm-plan-price .tm-plan-price-strike {
  margin-right: var(--space-1);
}

body.tm-inner .tm-pricing-page .tm-plan-period,
body.tm-inner .tm-pricing-page .tm-plan-card.is-featured .tm-plan-period {
  color: var(--plan-ink);
}

body.tm-inner .tm-pricing-page .tm-plan-fit {
  margin: 0;
}

body.tm-inner .tm-pricing-page .tm-inner-body-sm {
  margin: 0;
}

body.tm-inner .tm-pricing-page .tm-plan-features {
  gap: var(--space-3);
}

body.tm-inner .tm-pricing-page .tm-plan-features li,
body.tm-inner .tm-pricing-page .tm-plan-card.is-featured .tm-plan-features li {
  color: var(--plan-ink);
}

body.tm-inner .tm-pricing-page .tm-plan-cta .tm-btn,
body.tm-inner .tm-pricing-page .tm-plan-actions .tm-btn {
  width: 100%;
  justify-content: center;
}

body.tm-inner .tm-pricing-page .tm-pricing-note {
  margin-top: var(--space-4);
  min-height: 48px;
  text-align: left;
  text-transform: none;
  font-family: var(--tm-font-body);
  font-size: 13px;
  letter-spacing: 0.01em;
  opacity: 0.62;
}

body.tm-inner .tm-pricing-page .tm-compare-table-wrap {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.tm-inner .tm-pricing-page .tm-compare-table {
  min-width: 520px;
}

body.tm-inner .tm-pricing-page .tm-compare-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

body.tm-inner .tm-pricing-page .tm-compare-table thead th {
  padding: var(--space-4) var(--space-5);
  font-family: var(--tm-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2.5%, var(--tm-paper));
}

body.tm-inner .tm-pricing-page .tm-compare-table thead th.col-us {
  background: color-mix(in srgb, var(--tm-mint) 16%, var(--tm-paper));
}

body.tm-inner .tm-pricing-page .tm-compare-table thead th.col-team {
  background: color-mix(in srgb, var(--tm-gold) 20%, var(--tm-paper));
}

body.tm-inner .tm-pricing-page .tm-compare-table tbody td {
  padding: var(--space-4) var(--space-5);
  font-size: 15.5px;
  line-height: 1.58;
  border-bottom: 1px solid var(--tm-grid-10);
}

body.tm-inner .tm-pricing-page .tm-compare-table tbody td:first-child {
  font-family: var(--tm-font-body);
  font-size: 15px;
  letter-spacing: 0;
  font-weight: 600;
  color: color-mix(in srgb, var(--tm-forest) 88%, transparent);
  opacity: 0.88;
}

body.tm-inner .tm-pricing-page .tm-compare-table tbody td.col-us {
  background: color-mix(in srgb, var(--tm-mint) 7%, transparent);
}

body.tm-inner .tm-pricing-page .tm-compare-table tbody td.col-team {
  background: color-mix(in srgb, var(--tm-gold) 7%, transparent);
}

body.tm-inner .tm-pricing-page .tm-inner-cta-strip {
  padding: clamp(54px, 7vw, 84px) 0;
}

body.tm-inner .tm-pricing-page .tm-inner-cta-inner {
  max-width: min(760px, calc(100% - (var(--tm-shell-gutter) * 2)));
}

body.tm-inner .tm-pricing-page #faq .tm-inner-section-header {
  margin-bottom: var(--space-5);
}

body.tm-inner .tm-pricing-page #faq .tm-faq-list {
  max-width: none;
  width: 100%;
  margin: 0;
}

@media (max-width: 1180px) {
  body.tm-inner .tm-pricing-page .tm-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  body.tm-inner .tm-pricing-page .tm-pricing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.tm-inner .tm-pricing-page .tm-plan-card {
    padding: 20px;
  }
}

/* Comparison pages: raise hierarchy and readability across all /vs/* */
body.tm-inner .tm-comparison-page .tm-inner-section {
  padding: clamp(52px, 7.2vw, 80px) 0;
}

body.tm-inner .tm-comparison-page .tm-inner-section-header {
  margin-bottom: var(--space-7);
}

body.tm-inner .tm-comparison-page .tm-comparison-table-wrap {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  margin-top: var(--space-3);
}

body.tm-inner .tm-comparison-page .tm-comparison-table thead th {
  font-size: 11px;
  letter-spacing: 0.11em;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2.5%, var(--tm-paper));
  color: color-mix(in srgb, var(--tm-forest) 74%, transparent);
  opacity: 0.9;
}

body.tm-inner .tm-comparison-page .tm-comparison-table thead th.col-us {
  background: color-mix(in srgb, var(--tm-mint) 16%, var(--tm-paper));
}

body.tm-inner .tm-comparison-page .tm-comparison-table tbody td {
  font-family: var(--tm-font-body);
  font-size: 15px;
  line-height: 1.62;
  padding: var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--tm-grid-10);
  color: var(--tm-forest);
  opacity: 0.88;
}

body.tm-inner .tm-comparison-page .tm-comparison-table tbody td:first-child {
  font-family: var(--tm-font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  font-weight: 500;
  opacity: 0.72;
}

body.tm-inner .tm-comparison-page .tm-comparison-table .cell-win {
  font-weight: 600;
  color: var(--tm-forest);
}

body.tm-inner .tm-comparison-page .tm-comparison-table .cell-lose {
  opacity: 0.72;
}

body.tm-inner .tm-comparison-page .tm-comparison-pros-grid {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
}

body.tm-inner .tm-comparison-page .tm-comparison-pros-col {
  padding: var(--space-6) var(--space-6);
}

body.tm-inner .tm-comparison-page .tm-comparison-pros-col h2 {
  font-family: var(--tm-font-display);
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tm-forest);
  margin: 0 0 var(--space-5);
}

body.tm-inner .tm-comparison-page .tm-comparison-list li {
  font-size: 15px;
  line-height: 1.68;
  opacity: 0.82;
  padding: var(--space-4) 0 var(--space-4) var(--space-5);
}

body.tm-inner .tm-comparison-page .tm-inner-container-narrow .tm-vr {
  max-width: 900px;
  margin: 0;
  padding: var(--space-6) var(--space-6);
  border: 1px solid var(--tm-grid-20);
  border-left: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  opacity: 0.9;
}

html.dark-mode body.tm-inner .tm-comparison-page .tm-comparison-table-wrap,
html.dark-mode body.tm-inner .tm-comparison-page .tm-comparison-pros-grid,
html.dark-mode body.tm-inner .tm-comparison-page .tm-inner-container-narrow .tm-vr {
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 720px) {
  body.tm-inner .tm-comparison-page .tm-comparison-table thead th,
  body.tm-inner .tm-comparison-page .tm-comparison-table tbody td {
    padding: var(--space-3) var(--space-4);
  }

  body.tm-inner .tm-comparison-page .tm-comparison-pros-col {
    padding: var(--space-5);
  }
}

body.tm-inner .tm-detail-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
}

body.tm-inner .tm-detail-card-header {
  padding: var(--tm-card-pad-y) var(--tm-card-pad-x);
  border-bottom: 1px solid var(--tm-grid-10);
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper));
  justify-content: flex-start;
  gap: var(--space-3);
}

body.tm-inner .tm-formula-prompt {
  margin: var(--space-4) var(--tm-card-pad-x) var(--space-4);
  padding: var(--tm-card-pad-y) var(--tm-card-pad-x);
  border: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper));
}

body.tm-inner .tm-formula-output {
  position: relative;
  margin: 0 var(--tm-card-pad-x);
  padding: var(--tm-code-pad-y) var(--tm-code-pad-x);
  border: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 3%, var(--tm-paper));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tm-forest) 8%, transparent);
}

body.tm-inner .tm-formula-output pre,
body.tm-inner .tm-formula-output code {
  border-radius: var(--radius-compact);
}

body.tm-inner .tm-formula-output pre {
  margin: var(--space-2) 0 0;
  padding: var(--tm-code-pad-y) var(--tm-code-pad-x);
  border: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 1.5%, var(--tm-white));
}

html.dark-mode body.tm-inner .tm-formula-output {
  border-color: color-mix(in srgb, var(--tm-mint) 36%, var(--tm-grid-20));
  background: linear-gradient(180deg, rgba(17, 35, 29, 0.74), rgba(13, 30, 25, 0.78));
}

html.dark-mode body.tm-inner .tm-formula-output pre {
  border-color: color-mix(in srgb, var(--tm-mint) 40%, var(--tm-grid-20));
  background: linear-gradient(180deg, rgba(8, 58, 42, 0.56), rgba(7, 44, 33, 0.62));
}

body.tm-inner .tm-copy-btn,
body.tm-inner .seo-copy-btn,
body.tm-inner .tm-formula-copy-btn {
  height: var(--tm-copy-btn-height);
  min-height: var(--tm-copy-btn-height);
  padding: 0 var(--tm-copy-btn-pad-x);
  border: 1px solid color-mix(in srgb, var(--tm-forest) 28%, var(--tm-grid-20));
  background: color-mix(in srgb, var(--tm-forest) 1%, var(--tm-surface-subcard));
  color: var(--tm-forest);
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--radius-control);
}

body.tm-inner .tm-copy-btn:hover,
body.tm-inner .seo-copy-btn:hover,
body.tm-inner .tm-formula-copy-btn:hover {
  background: var(--tm-forest-10);
  border-color: var(--tm-grid-30);
}

body.tm-inner .tm-sidebar-card,
body.tm-inner .tm-sidebar-cta-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  padding: var(--tm-card-pad-y) var(--tm-sidebar-inset);
}

body.tm-inner .tm-sidebar-card .tm-sidebar-card-title,
body.tm-inner .tm-sidebar-cta-card .tm-sidebar-card-title {
  margin: 0;
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--tm-grid-10);
  font-family: var(--tm-font-display);
  font-size: var(--tm-type-card-h3);
  line-height: var(--tm-type-card-h3-lh);
  letter-spacing: var(--tm-type-card-h3-ls);
  color: var(--tm-forest);
}

body.tm-inner .tm-sidebar-card .tm-sidebar-card-body,
body.tm-inner .tm-sidebar-cta-card .tm-sidebar-card-body {
  margin: 0;
  padding: var(--space-4) 0 0;
  font-family: var(--tm-font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--tm-forest);
  opacity: 0.78;
}

body.tm-inner .tm-sidebar-card .tm-related-list {
  margin: var(--space-4) 0 0;
  border: 1px solid var(--tm-grid-20);
}

body.tm-inner .tm-related-list > li > a,
body.tm-inner .tm-related-item {
  min-height: var(--tm-list-row-min-h);
  padding: var(--tm-list-row-pad-y) var(--tm-list-row-pad-x);
  font-family: var(--tm-font-body);
  font-size: 13px;
  line-height: 1.45;
}

body.tm-inner .tm-related-list > li + li > a,
body.tm-inner .tm-related-item + .tm-related-item {
  border-top: 1px solid var(--tm-grid-10);
}

/* Blog/article sidebar copy legibility on medium screens */
@media (max-width: 1240px) and (min-width: 861px) {
  body.tm-inner .tm-detail-sidebar .tm-sidebar-cta-card .tm-sidebar-card-title {
    font-size: 18px;
    line-height: 1.28;
  }

  body.tm-inner .tm-detail-sidebar .tm-sidebar-cta-card .tm-sidebar-card-body {
    font-size: 16px;
    line-height: 1.72;
    opacity: 0.84;
  }
}

body.tm-inner .tm-related-list > li > a:hover,
body.tm-inner .tm-related-item:hover {
  background: var(--tm-grid-10);
  opacity: 1;
}

/* FAQ rows on subpages should match homepage separators and spacing */
body.tm-inner .tm-faq-list {
  border: 1px solid var(--tm-grid-20);
  display: flex;
  flex-direction: column;
}

/* Section-level FAQs should align to full content width (match surrounding blocks) */
body.tm-inner .tm-inner-section > .tm-inner-container > .tm-faq-list {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Keep /vs and /for FAQ blocks locked to full-width card rhythm */
body.tm-inner .tm-comparison-page #faq .tm-faq-list,
body.tm-inner .tm-usecase-page #faq .tm-faq-list {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* FAQ blocks inside detail cards should fill the card content width */
body.tm-inner .tm-detail-card .tm-faq-list,
body.tm-inner .tm-formula-page .tm-detail-card#faq .tm-faq-list {
  width: 100%;
  margin: 0;
}

body.tm-inner .tm-faq-item {
  border-bottom: 1px solid var(--tm-grid-20);
}

body.tm-inner .tm-faq-item:last-child {
  border-bottom: none;
}

body.tm-inner .tm-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  list-style: none;
  cursor: pointer;
  font-family: var(--tm-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--tm-forest);
  transition: background-color 0.15s;
  background: var(--tm-white);
}

body.tm-inner .tm-faq-item summary::-webkit-details-marker {
  display: none;
}

body.tm-inner .tm-faq-item summary:hover {
  background: var(--tm-paper);
}

body.tm-inner .tm-faq-item > p,
body.tm-inner .tm-faq-body {
  margin: 0;
  padding: 0 var(--space-7) var(--space-6);
  font-family: var(--tm-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--tm-forest);
  opacity: 0.65;
  background: var(--tm-white);
}

body.tm-inner .tm-faq-item .tm-faq-indicator {
  width: 28px;
  height: 28px;
  border: 1px solid var(--tm-grid-20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tm-font-mono);
  font-size: 20px;
  color: var(--tm-forest);
  opacity: 0.5;
  flex-shrink: 0;
  transition: transform 0.2s;
}

body.tm-inner .tm-faq-item[open] .tm-faq-indicator {
  transform: rotate(45deg);
}

@media (max-width: 720px) {
  body.tm-inner .tm-faq-item summary {
    padding: var(--space-5) var(--space-5);
    font-size: 16px;
  }

  body.tm-inner .tm-faq-item > p,
  body.tm-inner .tm-faq-body {
    padding: 0 var(--space-5) var(--space-5);
    font-size: 15px;
  }

  body.tm-inner .tm-faq-item .tm-faq-indicator {
    width: 24px;
    height: 24px;
    font-size: 17px;
  }
}

body.tm-inner .tm-faq-body {
  background: var(--tm-white);
}

body.tm-inner .tm-faq-body p {
  margin: 0;
}

html.dark-mode body.tm-inner .tm-faq-item summary,
html.dark-mode body.tm-inner .tm-faq-body {
  background: rgba(255, 255, 255, 0.03);
}

/* Use one text rhythm in list-heavy article sections */
body.tm-inner .tm-breakdown-list,
body.tm-inner .tm-edge-cases-list {
  padding: var(--tm-card-pad-y) var(--tm-card-pad-x);
  gap: 0;
}

body.tm-inner .tm-breakdown-list li,
body.tm-inner .tm-edge-cases-list li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--tm-grid-10);
}

body.tm-inner .tm-breakdown-list li:last-child,
body.tm-inner .tm-edge-cases-list li:last-child {
  border-bottom: none;
}

/* Freeze: no shadows, no rounding (homepage TM rule) */
body.tm-inner .tm-detail-card,
body.tm-inner .tm-formula-prompt,
body.tm-inner .tm-formula-output,
body.tm-inner .tm-formula-output pre,
body.tm-inner .tm-sidebar-card,
body.tm-inner .tm-sidebar-cta-card,
body.tm-inner .tm-related-list,
body.tm-inner .tm-breakdown-list,
body.tm-inner .tm-edge-cases-list,
body.tm-inner .tm-comparison-table,
body.tm-inner .tm-faq-list,
body.tm-inner .tm-faq-item {
  border-radius: var(--radius-surface);
  box-shadow: none !important;
}

/* Unified formula surfaces: use /for/operations treatment across TM pages */
body.tm-inner .tm-formula-page .tm-formula-prompt,
body.tm-inner .tm-formula-page .tm-formula-output,
body.tm-inner .tm-usecase-page .usecase-example-card .code-frame {
  border: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper));
  box-shadow: none;
}

body.tm-inner .tm-formula-page .tm-formula-prompt {
  margin: var(--space-4) var(--tm-card-pad-x);
  padding: var(--tm-card-pad-y) var(--tm-card-pad-x);
}

body.tm-inner .tm-formula-page .tm-formula-output {
  position: relative;
  margin: 0 var(--tm-card-pad-x);
  padding: var(--space-4);
}

body.tm-inner .tm-formula-page .tm-formula-output pre {
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: var(--space-4);
  padding-right: calc(var(--space-4) + 86px);
}

body.tm-inner .tm-formula-page .tm-formula-output code {
  line-height: 1.65;
}

body.tm-inner .tm-formula-page .tm-copy-btn,
body.tm-inner .tm-formula-page .tm-formula-copy-btn,
body.tm-inner .tm-usecase-page .usecase-example-card .seo-copy-btn {
  top: var(--space-4);
  right: var(--space-4);
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  color: var(--tm-forest);
  border-radius: var(--radius-surface);
  box-shadow: none;
}

html.dark-mode body.tm-inner .tm-formula-page .tm-formula-prompt,
html.dark-mode body.tm-inner .tm-formula-page .tm-formula-output,
html.dark-mode body.tm-inner .tm-usecase-page .usecase-example-card .code-frame {
  border-color: color-mix(in srgb, var(--tm-mint) 34%, var(--tm-grid-20));
  background: color-mix(in srgb, var(--tm-mint) 6%, rgba(17, 26, 23, 0.86));
}

html.dark-mode body.tm-inner .tm-formula-page .tm-copy-btn,
html.dark-mode body.tm-inner .tm-formula-page .tm-formula-copy-btn,
html.dark-mode body.tm-inner .tm-usecase-page .usecase-example-card .seo-copy-btn {
  border-color: color-mix(in srgb, var(--tm-mint) 34%, var(--tm-grid-20));
  background: rgba(255, 255, 255, 0.05);
  color: var(--tm-mint);
}

/* ── Canonical Formula Surface System (compatibility-first) ──────────── */
body.tm-inner .tm-formula-surface {
  border: 1px solid var(--tm-formula-border);
  background: var(--tm-paper);
  border-radius: var(--radius-compact);
  box-shadow: none;
  overflow: hidden;
}

body.tm-inner .tm-formula-surface--content {
  padding: var(--space-4);
}

body.tm-inner .tm-formula-surface__head {
  min-height: var(--tm-formula-head-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

body.tm-inner .tm-formula-surface__label {
  font-family: var(--tm-font-mono);
  font-size: var(--tm-tag-font-size);
  letter-spacing: var(--tm-tag-letter);
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.7;
}

body.tm-inner .tm-formula-surface__prompt {
  border: 1px solid var(--tm-formula-border);
  background: var(--tm-white);
  padding: var(--tm-card-pad-y) var(--tm-card-pad-x);
  margin-bottom: var(--space-4);
}

body.tm-inner .tm-formula-surface__code {
  position: relative;
  border: none;
  background: transparent;
  padding: var(--tm-formula-pad-y) var(--tm-formula-pad-x);
}

body.tm-inner .tm-formula-surface__code pre {
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow-x: auto;
}

body.tm-inner .tm-formula-surface__code code,
body.tm-inner .tm-formula-surface__code pre code {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--tm-font-mono);
  font-size: var(--tm-formula-code-size);
  line-height: var(--tm-formula-code-line);
  color: var(--tm-forest);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

body.tm-inner .tm-formula-surface__code .tm-formula-surface__code-body {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

body.tm-inner .tm-formula-surface__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Compatibility aliases for existing templates/routes */
body.tm-inner .tm-formula-output,
body.tm-inner .code-frame,
body.tm-inner .tm-nc-formula {
  border: 1px solid var(--tm-formula-border);
  background: var(--tm-paper);
  border-radius: var(--radius-compact);
  box-shadow: none;
}

body.tm-inner .code-frame pre,
body.tm-inner .tm-formula-output pre {
  border-color: var(--tm-formula-border);
  background: var(--tm-formula-bg-subtle);
  box-shadow: none;
}

body.tm-inner .tm-copy-btn,
body.tm-inner .seo-copy-btn,
body.tm-inner .tm-formula-copy-btn {
  border: 1px solid var(--tm-formula-border);
  background: var(--tm-white);
  color: var(--tm-forest);
  border-radius: var(--radius-control);
  box-shadow: none;
}

body.tm-inner .tm-formula-surface__code .tm-copy-btn,
body.tm-inner .tm-formula-surface__code .seo-copy-btn,
body.tm-inner .tm-formula-surface__code .tm-formula-copy-btn {
  position: absolute;
  top: var(--tm-copy-btn-hit-offset);
  right: var(--tm-copy-btn-hit-offset);
}

body.tm-inner .tm-formula-surface__code.has-copy pre {
  padding-right: calc(var(--tm-formula-pad-x) + 86px);
}

/* Formula detail page: cleaner header row for label + copy (no overlap) */
body.tm-inner .tm-formula-page .tm-formula-surface__code {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--space-2);
  row-gap: var(--space-2);
}

body.tm-inner .tm-formula-page .tm-formula-surface__code .tm-formula-surface__label,
body.tm-inner .tm-formula-page .tm-formula-surface__code .tm-formula-output-label {
  grid-column: 1;
  align-self: center;
}

body.tm-inner .tm-formula-page .tm-formula-surface__code .tm-copy-btn,
body.tm-inner .tm-formula-page .tm-formula-surface__code .seo-copy-btn,
body.tm-inner .tm-formula-page .tm-formula-surface__code .rc-copy-btn {
  position: static;
  grid-column: 2;
  justify-self: end;
}

body.tm-inner .tm-formula-page .tm-formula-surface__code pre {
  grid-column: 1 / -1;
}

body.tm-inner .tm-formula-page .tm-formula-surface__code.has-copy pre {
  padding-right: var(--tm-formula-pad-x);
}

/* Formula detail prompt/formula balance */
body.tm-inner .tm-formula-page .tm-formula-surface--content {
  padding: var(--space-3);
}

body.tm-inner .tm-formula-page .tm-formula-surface__prompt {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

body.tm-inner .tm-formula-page .tm-formula-surface__code {
  width: 100%;
}

body.tm-inner .tm-formula-page .tm-formula-prompt p {
  font-size: 15px;
  line-height: 1.4;
}

body.tm-inner .tm-formula-surface__code .tm-copy-btn,
body.tm-inner .tm-formula-surface__code .seo-copy-btn,
body.tm-inner .tm-formula-surface__code .tm-formula-copy-btn,
body.tm-inner .tm-formula-surface__code .rc-copy-btn,
body.tm-inner .code-frame .tm-copy-btn,
body.tm-inner .code-frame .seo-copy-btn,
body.tm-inner .code-frame .rc-copy-btn {
  height: var(--tm-copy-btn-height);
  min-height: var(--tm-copy-btn-height);
  padding: 0 var(--tm-copy-btn-pad-x);
  font-family: var(--font-body);
  font-size: var(--tm-tag-font-size);
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--radius-control);
  box-shadow: none;
}

html.dark-mode body.tm-inner .tm-formula-surface__code code,
html.dark-mode body.tm-inner .tm-formula-surface__code pre code {
  color: var(--tm-mint);
}

/* =======================================================================
   FINAL GENERATED CARD ENFORCEMENT (loaded last to beat earlier legacy CSS)
   ======================================================================= */
body.tm-inner .result-card .result-main-card,
body.tm-inner .result-card .result-actions,
body.tm-inner .result-card .rc-code-box,
body.tm-inner .result-card .rc-alt-formula,
body.tm-inner .result-card .rc-verification-card,
body.tm-inner .result-card .rc-validation-cta,
body.tm-inner .result-card .rc-collapsible,
body.tm-inner .result-card .result-actions-menu-list,
body.tm-inner .result-card .result-actions-menu-item,
body.tm-inner .result-card .result-actions-menu-trigger,
body.tm-inner .result-card .library-collection-input,
body.tm-inner .result-card .result-error,
body.tm-inner .result-card .result-placeholder,
body.tm-inner .result-card .rc-copy-btn,
body.tm-inner .result-card .rc-copy-alt-btn,
body.tm-inner .result-card .rc-explain-icon-btn,
body.tm-inner .result-card .rc-separator-toggle,
body.tm-inner .result-card .run-validation-btn,
body.tm-inner .result-card .rc-tab-btn  {
  border-radius: var(--radius-surface);
  box-shadow: none !important;
}

body.tm-inner .result-card .rc-badge,
body.tm-inner .result-card .rc-subtitle-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-white) !important;
  color: var(--tm-forest) !important;
  border-radius: var(--radius-surface);
  font-family: var(--tm-font-mono) !important;
  font-size: var(--tm-tag-font-size) !important;
  letter-spacing: var(--tm-tag-letter) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.tm-inner .result-card .rc-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  background: var(--tm-sem-platform, var(--tm-mint));
}

body.tm-inner .result-card .rc-badge-debug::before {
  background: var(--tm-sem-platform, var(--tm-mint));
}

body.tm-inner .result-card .rc-copy-btn,
body.tm-inner .result-card .rc-copy-alt-btn,
body.tm-inner .result-card .rc-explain-icon-btn,
body.tm-inner .result-card .rc-separator-toggle,
body.tm-inner .result-card .run-validation-btn {
  border: 1px solid var(--tm-grid-20, rgba(20, 46, 35, 0.2)) !important;
  background: var(--tm-white) !important;
  color: var(--tm-forest) !important;
}

body.tm-inner .result-card .rc-copy-btn:hover,
body.tm-inner .result-card .rc-copy-alt-btn:hover,
body.tm-inner .result-card .rc-explain-icon-btn:hover,
body.tm-inner .result-card .rc-separator-toggle:hover,
body.tm-inner .result-card .run-validation-btn:hover {
  border-color: var(--tm-grid-30, rgba(20, 46, 35, 0.3)) !important;
  background: var(--tm-forest-10, rgba(20, 46, 35, 0.08)) !important;
  color: var(--tm-forest) !important;
}

/* =======================================================================
   FINAL MARKETING FORMULA-SURFACE ENFORCEMENT
   Keep public formula/code boxes visually aligned with app result cards.
   ======================================================================= */
body.tm-inner:not(.app-layout) .tm-formula-output,
body.tm-inner:not(.app-layout) .code-frame {
  border: 1px solid var(--tm-formula-border) !important;
  background: var(--tm-formula-bg-subtle) !important;
  border-radius: var(--radius-compact);
  box-shadow: none !important;
  padding: 8px var(--space-3) !important;
}

body.tm-inner:not(.app-layout) .tm-formula-surface__code {
  border: none !important;
  background: transparent !important;
  border-radius: var(--radius-compact);
  box-shadow: none !important;
  padding: 0 !important;
}

body.tm-inner:not(.app-layout) .tm-formula-output pre,
body.tm-inner:not(.app-layout) .code-frame pre {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 12px var(--tm-formula-pad-x) !important;
}

body.tm-inner:not(.app-layout) .tm-formula-surface__code pre {
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.tm-inner:not(.app-layout) .tm-formula-output.has-copy,
body.tm-inner:not(.app-layout) .code-frame.has-copy {
  position: relative !important;
  padding: var(--space-3) !important;
}

body.tm-inner:not(.app-layout) .tm-formula-surface__code.has-copy {
  position: relative !important;
  padding: 0 !important;
}

body.tm-inner:not(.app-layout) .tm-formula-output.has-copy pre,
body.tm-inner:not(.app-layout) .code-frame.has-copy pre {
  padding-right: calc(var(--tm-formula-pad-x) + var(--tm-copy-btn-hit-offset) + 78px) !important;
}

body.tm-inner:not(.app-layout) .tm-formula-surface__code.has-copy pre {
  padding-right: calc(var(--tm-formula-pad-x) + var(--tm-copy-btn-hit-offset) + 78px) !important;
}

body.tm-inner:not(.app-layout) .tm-formula-output .tm-copy-btn,
body.tm-inner:not(.app-layout) .tm-formula-output .seo-copy-btn,
body.tm-inner:not(.app-layout) .tm-formula-output .tm-formula-copy-btn,
body.tm-inner:not(.app-layout) .code-frame .tm-copy-btn,
body.tm-inner:not(.app-layout) .code-frame .seo-copy-btn,
body.tm-inner:not(.app-layout) .code-frame .tm-formula-copy-btn,
body.tm-inner:not(.app-layout) .tm-formula-surface__code .tm-copy-btn,
body.tm-inner:not(.app-layout) .tm-formula-surface__code .seo-copy-btn,
body.tm-inner:not(.app-layout) .tm-formula-surface__code .tm-formula-copy-btn {
  position: absolute !important;
  top: 50% !important;
  right: calc(var(--space-3) + 1px) !important;
  transform: translateY(-50%) !important;
  z-index: 2;
  height: var(--tm-copy-btn-height) !important;
  min-height: var(--tm-copy-btn-height) !important;
  border: 1px solid var(--tm-grid-20) !important;
  background: var(--tm-white) !important;
  color: var(--tm-forest) !important;
}

html.dark-mode body.tm-inner:not(.app-layout) .tm-formula-output,
html.dark-mode body.tm-inner:not(.app-layout) .code-frame {
  border-color: var(--tm-formula-border) !important;
  background: var(--tm-formula-bg) !important;
}

html.dark-mode body.tm-inner:not(.app-layout) .tm-formula-surface__code {
  border: none !important;
  background: transparent !important;
}

html.dark-mode body.tm-inner:not(.app-layout) .tm-formula-output pre,
html.dark-mode body.tm-inner:not(.app-layout) .code-frame pre {
  border-color: transparent !important;
  background: transparent !important;
}

html.dark-mode body.tm-inner:not(.app-layout) .tm-formula-surface__code pre {
  border: none !important;
  background: transparent !important;
}

/* =======================================================================
   BLOG DETAIL PARITY WITH FORMULA DETAIL CARDS
   Match section/block language with formula detail cards.
   ======================================================================= */
body.tm-inner .tm-blog-content .blog-section {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-paper);
  padding: 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--tm-grid-20);
}

body.tm-inner .tm-blog-content .blog-section > h2:first-child {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper));
  font-family: var(--tm-font-display);
  font-size: clamp(16px, 1.3vw, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--tm-forest);
}

body.tm-inner .tm-blog-content .blog-section > *:not(h2:first-child) {
  margin-left: var(--space-6);
  margin-right: var(--space-6);
}

body.tm-inner .tm-blog-content .blog-section > *:last-child {
  margin-bottom: var(--space-6);
}

body.tm-inner .tm-blog-content .blog-section > p,
body.tm-inner .tm-blog-content .blog-section li {
  color: color-mix(in srgb, var(--tm-forest) 85%, transparent);
  opacity: 1;
}

body.tm-inner .tm-blog-content .blog-section > p:first-of-type {
  margin-top: var(--space-5);
  font-size: 16px;
  line-height: 1.72;
  color: color-mix(in srgb, var(--tm-forest) 88%, transparent);
}

body.tm-inner .tm-blog-content .bullet-list {
  margin: 0 0 var(--space-5);
  padding: 0;
}

body.tm-inner .tm-blog-content .bullet-list li {
  display: flex !important;
  align-items: flex-start;
  gap: calc(var(--space-2) + 2px);
  position: relative;
  padding-left: 0;
  margin-bottom: var(--space-3);
  line-height: 1.68;
  color: color-mix(in srgb, var(--tm-forest) 86%, transparent);
}

body.tm-inner .tm-blog-content .bullet-list li::before {
  content: "";
  position: relative;
  top: calc(0.5em + 1px);
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  background: color-mix(in srgb, var(--tm-mint) 72%, var(--tm-forest));
}

body.tm-inner .tm-blog-content .bullet-list li strong {
  color: var(--tm-forest);
  font-weight: 600;
}

/* CTA sections should render as a single card surface (no outer duplicate frame). */
body.tm-inner .tm-blog-content .blog-section.blog-section--cta {
  border: 0;
  background: transparent;
  padding: 0;
  margin-bottom: var(--space-6);
}

body.tm-inner .tm-blog-content .blog-section.blog-section--cta > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.tm-inner .tm-blog-content .blog-section.blog-section--cta .tm-inline-cta-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  padding: var(--space-6);
}

/* Safety: if markup still uses plain .blog-section wrapper, remove double frame
   whenever the section directly contains an inline CTA card. */
body.tm-inner .tm-blog-content .blog-section:has(> .tm-inline-cta-card) {
  border: 0;
  background: transparent;
  padding: 0;
}

body.tm-inner .tm-blog-content .blog-section:has(> .tm-inline-cta-card) > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.tm-inner .tm-blog-content .blog-section:has(> .tm-inline-cta-card) .tm-inline-cta-card {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-white);
  padding: var(--space-6);
}

body.tm-inner .tm-blog-content .tm-inline-cta-title {
  margin: 0 0 var(--space-4);
}

body.tm-inner .tm-blog-content .tm-inline-cta-body {
  margin: 0 0 var(--space-5);
}

body.tm-inner .tm-blog-content .formula-cta-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

body.tm-inner .tm-blog-content .tm-inline-cta-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

body.tm-inner .tm-blog-content .formula-cta-actions .btn,
body.tm-inner .tm-blog-content .formula-cta-actions .tm-btn,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .btn,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .tm-btn {
  min-height: 40px;
  padding: 0 var(--space-5);
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none !important;
  opacity: 1 !important;
}

body.tm-inner .tm-blog-content .formula-cta-actions .btn-primary,
body.tm-inner .tm-blog-content .formula-cta-actions .tm-btn-primary,
body.tm-inner .tm-blog-content .formula-cta-actions .tm-btn-solid,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .btn-primary,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .tm-btn-primary,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .tm-btn-solid {
  color: var(--tm-paper) !important;
  -webkit-text-fill-color: var(--tm-paper) !important;
  background: var(--tm-forest) !important;
  border: 1px solid var(--tm-forest) !important;
}

body.tm-inner .tm-blog-content .formula-cta-actions .btn-secondary,
body.tm-inner .tm-blog-content .formula-cta-actions .tm-btn-secondary,
body.tm-inner .tm-blog-content .formula-cta-actions .tm-btn-ghost,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .btn-secondary,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .tm-btn-secondary,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .tm-btn-ghost {
  color: var(--tm-forest) !important;
  -webkit-text-fill-color: var(--tm-forest) !important;
  background: transparent !important;
  border: 1px solid var(--tm-grid-20) !important;
}

body.tm-inner .tm-blog-content .formula-cta-actions .btn-primary:hover,
body.tm-inner .tm-blog-content .formula-cta-actions .tm-btn-primary:hover,
body.tm-inner .tm-blog-content .formula-cta-actions .tm-btn-solid:hover,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .btn-primary:hover,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .tm-btn-primary:hover,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .tm-btn-solid:hover {
  background: color-mix(in srgb, var(--tm-forest) 92%, black) !important;
  border-color: color-mix(in srgb, var(--tm-forest) 92%, black) !important;
}

body.tm-inner .tm-blog-content .formula-cta-actions .btn-secondary:hover,
body.tm-inner .tm-blog-content .formula-cta-actions .tm-btn-secondary:hover,
body.tm-inner .tm-blog-content .formula-cta-actions .tm-btn-ghost:hover,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .btn-secondary:hover,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .tm-btn-secondary:hover,
body.tm-inner .tm-blog-content .tm-inline-cta-actions .tm-btn-ghost:hover {
  background: color-mix(in srgb, var(--tm-forest) 5%, transparent) !important;
  border-color: var(--tm-grid-30) !important;
}

/* Force circular account avatar in TM inner top nav regardless of legacy button styles. */
body.tm-inner .tm-nav-actions .user-menu .user-avatar,
body.tm-inner .tm-nav .user-menu .user-avatar,
body.tm-inner .tm-nav .user-avatar {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in srgb, var(--tm-mint) 30%, var(--tm-paper)) !important;
  border: 1px solid var(--tm-grid-20) !important;
  color: var(--tm-forest) !important;
}

@media (max-width: 900px) {
  body.tm-inner .tm-blog-content .blog-section > h2:first-child {
    padding: var(--space-4) var(--space-5);
    font-size: clamp(15px, 3.8vw, 18px);
  }

  body.tm-inner .tm-blog-content .blog-section > *:not(h2:first-child) {
    margin-left: var(--space-5);
    margin-right: var(--space-5);
  }

  body.tm-inner .tm-blog-content .formula-cta-actions {
    grid-template-columns: 1fr;
  }

  body.tm-inner .tm-blog-content .tm-inline-cta-actions {
    grid-template-columns: 1fr;
  }
}

/* /vs redesign pass: unify comparison pages with current TM language */
body.tm-inner .tm-comparison-index-hero .tm-inner-definition,
body.tm-inner .tm-comparison-page .tm-inner-definition {
  max-width: 980px;
}

body.tm-inner .tm-comparison-index-grid .tm-inner-card,
body.tm-inner .tm-comparison-page .tm-comparison-pros-grid,
body.tm-inner .tm-comparison-page .tm-comparison-table-wrap,
body.tm-inner .tm-comparison-page .tm-inner-container-narrow .tm-vr {
  border: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  box-shadow: none;
}

body.tm-inner .tm-comparison-index-grid .tm-inner-card {
  padding: var(--space-7);
  gap: var(--space-4);
}

body.tm-inner .tm-comparison-index-grid .tm-inner-card-badges {
  margin-bottom: var(--space-1);
}

body.tm-inner .tm-comparison-index-grid .tm-inner-card-title {
  font-size: var(--tm-type-card-h3);
  line-height: var(--tm-type-card-h3-lh);
  letter-spacing: var(--tm-type-card-h3-ls);
}

body.tm-inner .tm-comparison-index-grid .tm-inner-card-body {
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-body-lh);
  opacity: 0.84;
}

body.tm-inner .tm-comparison-page .tm-inner-section {
  padding: clamp(52px, 7vw, 80px) 0;
}

body.tm-inner .tm-comparison-page .tm-vr {
  max-width: 100%;
  margin: 0;
  padding: var(--space-6);
  border-left: 1px solid var(--tm-grid-20);
  background: var(--tm-surface-subcard);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.62;
  letter-spacing: -0.008em;
  opacity: 0.9;
}

body.tm-inner .tm-comparison-page .tm-vr + .tm-inner-section-header {
  margin-top: var(--space-8);
}

body.tm-inner .tm-comparison-page .tm-comparison-table-wrap {
  margin-top: var(--space-4);
}

body.tm-inner .tm-comparison-page .tm-comparison-table {
  font-family: var(--tm-font-body);
}

body.tm-inner .tm-comparison-page .tm-comparison-table thead th {
  padding: var(--space-4) var(--space-5);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--tm-grid-20);
  background: color-mix(in srgb, var(--tm-forest) 2.5%, var(--tm-paper));
}

body.tm-inner .tm-comparison-page .tm-comparison-table thead .col-us {
  background: color-mix(in srgb, var(--tm-mint) 12%, var(--tm-paper));
}

body.tm-inner .tm-comparison-page .tm-comparison-table tbody td {
  font-size: 16px;
  line-height: 1.56;
  padding: var(--space-5) var(--space-5);
  border-bottom: 1px solid var(--tm-grid-10);
  vertical-align: middle;
}

body.tm-inner .tm-comparison-page .tm-comparison-table tbody td:first-child {
  font-family: var(--tm-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

body.tm-inner .tm-comparison-page .tm-comparison-table tbody td.col-us {
  background: color-mix(in srgb, var(--tm-mint) 8%, transparent);
}

body.tm-inner .tm-comparison-page .tm-comparison-table .cell-winner {
  font-weight: 600;
}

body.tm-inner .tm-comparison-page .tm-comparison-table .cell-winner::before {
  content: "✓";
  margin-right: 8px;
  color: var(--tm-sem-status-positive);
}

body.tm-inner .tm-comparison-page .tm-comparison-pros-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

body.tm-inner .tm-comparison-page .tm-comparison-pros-col {
  padding: var(--space-7) var(--space-6);
}

body.tm-inner .tm-comparison-page .tm-comparison-pros-col:first-child {
  border-right: 1px solid var(--tm-grid-20);
}

body.tm-inner .tm-comparison-page .tm-comparison-pros-col h2,
body.tm-inner .tm-comparison-page .tm-comparison-pros-col .tm-h2 {
  font-size: clamp(18px, 1.7vw, 22px) !important;
  line-height: var(--tm-type-section-h2-lh) !important;
  letter-spacing: var(--tm-type-section-h2-ls) !important;
  margin: 0 0 var(--space-4) !important;
}

body.tm-inner .tm-comparison-page .tm-comparison-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.tm-inner .tm-comparison-page .tm-comparison-list li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--tm-grid-10);
  font-size: var(--tm-type-body);
  line-height: var(--tm-type-body-lh);
  color: var(--tm-forest);
  opacity: 0.82;
}

body.tm-inner .tm-comparison-page .tm-comparison-list li:last-child {
  border-bottom: none;
}

body.tm-inner .tm-comparison-page .tm-comparison-list-us li::before,
body.tm-inner .tm-comparison-page .tm-comparison-list-them li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-4) + 0.62em);
  width: 8px;
  height: 8px;
  border-radius: 0;
}

body.tm-inner .tm-comparison-page .tm-comparison-list-us li::before {
  background: var(--tm-sem-status-positive);
}

body.tm-inner .tm-comparison-page .tm-comparison-list-them li::before {
  background: color-mix(in srgb, var(--tm-forest) 35%, transparent);
}

body.tm-inner .tm-comparison-page .tm-inner-container-narrow .tm-vr {
  padding: var(--space-7) var(--space-7);
}

@media (max-width: 960px) {
  body.tm-inner .tm-comparison-index-grid .tm-inner-card-title {
    font-size: clamp(19px, 5vw, 24px);
  }

  body.tm-inner .tm-comparison-index-grid .tm-inner-card-body {
    font-size: var(--tm-type-body);
  }

  body.tm-inner .tm-comparison-page .tm-comparison-table tbody td {
    font-size: 15px;
  }

  body.tm-inner .tm-comparison-page .tm-comparison-list li {
    font-size: var(--tm-type-body);
  }
}

@media (max-width: 720px) {
  body.tm-inner .tm-comparison-page .tm-comparison-pros-grid {
    grid-template-columns: 1fr;
  }

  body.tm-inner .tm-comparison-page .tm-comparison-pros-col:first-child {
    border-right: none;
    border-bottom: 1px solid var(--tm-grid-20);
  }
}

/* ── Marketing Typography System (inner pages canonical role mapping) ── */
body.tm-inner .tm-inner-h1 {
  font-size: var(--tm-type-page-h1) !important;
  line-height: var(--tm-type-page-h1-lh) !important;
  letter-spacing: var(--tm-type-page-h1-ls) !important;
}

body.tm-inner .tm-h2,
body.tm-inner .tm-inner-h2,
body.tm-inner .tm-inner-cta-h2,
body.tm-inner .tm-content-page h2,
body.tm-inner .tm-blog-content h2 {
  font-size: var(--tm-type-section-h2) !important;
  line-height: var(--tm-type-section-h2-lh) !important;
  letter-spacing: var(--tm-type-section-h2-ls) !important;
}

body.tm-inner .tm-inner-card-title,
body.tm-inner .tm-detail-card-title,
body.tm-inner .tm-sidebar-card-title,
body.tm-inner .tm-content-page h3,
body.tm-inner .tm-blog-content h3,
body.tm-inner .tm-login-capabilities-title,
body.tm-inner .tm-login-panel-title {
  font-size: var(--tm-type-card-h3) !important;
  line-height: var(--tm-type-card-h3-lh) !important;
  letter-spacing: var(--tm-type-card-h3-ls) !important;
}

body.tm-inner .tm-inner-definition,
body.tm-inner .tm-login-subtitle,
body.tm-inner .tm-inner-cta-sub,
body.tm-inner .tm-blog-content > p:first-of-type {
  font-size: var(--tm-type-lead) !important;
  line-height: var(--tm-type-lead-lh) !important;
}

body.tm-inner .tm-inner-body,
body.tm-inner .tm-content-page p,
body.tm-inner .tm-content-page li,
body.tm-inner .tm-blog-content p,
body.tm-inner .tm-blog-content li,
body.tm-inner .tm-inner-card-body,
body.tm-inner .tm-sidebar-card-body,
body.tm-inner .tm-faq-body,
body.tm-inner .tm-login-capabilities-list li,
body.tm-inner .tm-login-benefits li {
  font-size: var(--tm-type-body) !important;
  line-height: var(--tm-type-body-lh) !important;
}

body.tm-inner .tm-inner-body-sm,
body.tm-inner .tm-blog-card-excerpt,
body.tm-inner .tm-blog-meta-date,
body.tm-inner .tm-blog-meta-read,
body.tm-inner .tm-blog-meta-sep,
body.tm-inner .tm-blog-card-date,
body.tm-inner .tm-blog-card-author,
body.tm-inner .tm-login-panel-subtitle {
  font-size: var(--tm-type-body-sm) !important;
  line-height: var(--tm-type-body-sm-lh) !important;
}

body.tm-inner .tm-label,
body.tm-inner .tm-label-text,
body.tm-inner .tm-chip,
body.tm-inner .tm-section-kicker,
body.tm-inner .tm-section-label,
body.tm-inner .tm-inner-section-label,
body.tm-inner .tm-hero-eyebrow-text,
body.tm-inner .tm-breadcrumb,
body.tm-inner .tm-breadcrumb a {
  font-size: var(--tm-type-label-mono) !important;
  line-height: var(--tm-type-label-mono-lh) !important;
  letter-spacing: var(--tm-type-label-mono-ls) !important;
}

body.tm-inner .tm-formula-surface__code-body,
body.tm-inner .tm-code-preview,
body.tm-inner code,
body.tm-inner pre {
  font-size: var(--tm-type-code-mono);
  line-height: var(--tm-type-code-mono-lh);
  letter-spacing: var(--tm-type-code-mono-ls);
}

body.tm-inner .tm-hero-meta-note {
  margin-top: var(--space-3);
}

body.tm-inner .tm-hero-meta-note-wide {
  margin-top: var(--space-4);
  max-width: 520px;
}

/* ── Final marketing polish pass ─────────────────────────────────────── */
body.tm-inner .tm-inner-card,
body.tm-inner .tm-detail-card,
body.tm-inner .tm-sidebar-card,
body.tm-inner .tm-sidebar-cta-card,
body.tm-inner .tm-comparison-table-wrap,
body.tm-inner .tm-comparison-pros-grid,
body.tm-inner .tm-inner-container-narrow .tm-vr {
  border-color: color-mix(in srgb, var(--tm-forest) 14%, transparent) !important;
}

body.tm-inner .tm-comparison-index-grid,
body.tm-inner .formula-grid {
  align-items: stretch;
}

body.tm-inner .tm-comparison-index-grid .tm-inner-card,
body.tm-inner .formula-grid .tm-inner-card {
  height: 100%;
}

body.tm-inner .tm-comparison-index-grid .tm-inner-card-badges,
body.tm-inner .formula-grid .tm-inner-card-badges {
  margin-bottom: var(--space-2);
}

body.tm-inner .tm-comparison-index-grid .tm-inner-card-title,
body.tm-inner .formula-grid .tm-inner-card-title {
  margin-bottom: var(--space-1);
}

/* =======================================================================
   CANONICAL MARKETING FORMULA MODULE (dashboard-parity, marketing scope)
   ======================================================================= */
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-module {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-module--compact {
  gap: var(--space-2);
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-prompt {
  margin: 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  border: 1px solid var(--tm-formula-border) !important;
  background: color-mix(in srgb, var(--tm-forest) 2%, var(--tm-paper)) !important;
  border-radius: var(--radius-compact);
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-module--full .tm-marketing-formula-prompt {
  padding: var(--space-4) !important;
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-prompt p {
  margin: 0 !important;
  font-family: var(--tm-font-body);
  font-size: var(--tm-type-lead);
  line-height: var(--tm-type-lead-lh);
  color: var(--tm-forest);
  opacity: 0.8;
  font-style: italic;
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output.tm-formula-surface__code,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-inner-card-code.tm-marketing-formula-output,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-formula-example-code.tm-marketing-formula-output {
  position: relative !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--tm-formula-border, var(--tm-grid-10, rgba(58, 58, 56, 0.1))) !important;
  background: var(--tm-paper, #f7f7f5) !important;
  border-radius: var(--radius-surface);
  box-shadow: none !important;
  word-break: break-word;
  line-height: 1.65;
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output--full {
  padding: 14px 16px !important;
}


:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output pre,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output.tm-formula-surface__code pre,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-inner-card-code.tm-marketing-formula-output pre {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow-x: auto;
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output.has-copy pre {
  padding-right: calc(var(--tm-copy-btn-hit-offset, 6px) + 28px) !important;
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output code,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output pre code,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output .tm-formula-surface__code-body {
  display: block;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: var(--tm-formula-code-size);
  line-height: var(--tm-formula-code-line);
  letter-spacing: var(--tm-type-code-mono-ls);
  color: var(--tm-forest);
  opacity: 1;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-kicker,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output .tm-formula-surface__label,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output .tm-nc-formula-label,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-prompt .tm-formula-prompt-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--tm-font-mono);
  font-size: var(--tm-type-label-mono);
  line-height: var(--tm-type-label-mono-lh);
  letter-spacing: var(--tm-type-label-mono-ls);
  text-transform: uppercase;
  color: var(--tm-forest);
  opacity: 0.72;
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output .tm-marketing-formula-kicker,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output .tm-nc-formula-label,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output .tm-formula-surface__label {
  margin-bottom: var(--space-2);
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-copy-btn,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-copy-btn.tm-copy-btn {
  position: absolute !important;
  top: var(--tm-copy-btn-hit-offset, 8px) !important;
  right: var(--tm-copy-btn-hit-offset, 8px) !important;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--tm-forest, #163f2f) 82%, transparent) !important;
  border-radius: var(--radius-control);
  box-shadow: none !important;
  font: inherit !important;
  cursor: pointer;
  transition: color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-copy-btn svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-copy-btn:hover,
:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-copy-btn.tm-copy-btn:hover {
  color: var(--tm-forest, #163f2f) !important;
  opacity: 1;
  transform: translateY(-1px);
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-copy-btn.tm-marketing-copy-btn--icon.is-copied-state {
  color: var(--tm-success, #137a3f) !important;
}

:is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-copy-btn.tm-marketing-copy-btn--icon.is-copy-failed {
  color: var(--tm-error, #b91c1c) !important;
}

html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-prompt {
  background: color-mix(in srgb, var(--tm-mint) 7%, rgba(17, 26, 23, 0.86)) !important;
  border-color: color-mix(in srgb, var(--tm-mint) 36%, var(--tm-grid-20)) !important;
}

html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output.tm-formula-surface__code,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-inner-card-code.tm-marketing-formula-output,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-formula-example-code.tm-marketing-formula-output {
  background: var(--tm-formula-bg) !important;
  border-color: color-mix(in srgb, var(--tm-mint) 36%, var(--tm-grid-20)) !important;
}

html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-prompt p,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output code,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output pre code,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output .tm-formula-surface__code-body,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-kicker,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output .tm-formula-surface__label,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-output .tm-nc-formula-label,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-formula-prompt .tm-formula-prompt-label {
  color: var(--tm-mint);
}

html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-copy-btn,
html.dark-mode :is(body.tm-inner:not(.app-layout), body.tm-landing) .tm-marketing-copy-btn.tm-copy-btn {
  color: color-mix(in srgb, var(--tm-mint) 88%, rgba(255, 255, 255, 0.08)) !important;
}

/* Formula detail examples: dock prompt/output as one connected pair */
body.tm-inner .tm-formula-page .tm-formula-example.tm-marketing-formula-module {
  gap: 0;
}

body.tm-inner .tm-formula-page .tm-formula-example .tm-marketing-formula-prompt {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

body.tm-inner .tm-formula-page .tm-formula-example .tm-marketing-formula-output {
  margin-top: 0 !important;
}

/* Formula detail pages: make output box slightly brighter than prompt */
body.tm-inner .tm-formula-page .tm-marketing-formula-output,
body.tm-inner .tm-formula-page .tm-marketing-formula-output.tm-formula-surface__code,
body.tm-inner .tm-formula-page .tm-formula-example-code.tm-marketing-formula-output {
  background: var(--tm-white) !important;
}

html.dark-mode body.tm-inner .tm-formula-page .tm-marketing-formula-output,
html.dark-mode body.tm-inner .tm-formula-page .tm-marketing-formula-output.tm-formula-surface__code,
html.dark-mode body.tm-inner .tm-formula-page .tm-formula-example-code.tm-marketing-formula-output {
  background: var(--tm-formula-bg) !important;
}

.tm-team-waitlist-form { display: grid; gap: 8px; }
.tm-team-waitlist-input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--tm-grid-30); border-radius: var(--radius-control); background: var(--tm-white); color: var(--text-primary); font: 14px/1.5 var(--font-body); }
body.tm-inner .tm-pricing-page .tm-plan-card.is-coming-soon { background: var(--da-paper); }
body.tm-inner .tm-pricing-page .tm-plan-card.is-coming-soon .tm-plan-amount { font-size: 32px; }


/* partials/direction-a.css */
/* Direction A: a clear, calm work surface with honest output states. */
:root {
  --da-paper: #f6f7f4;
  --da-surface: #ffffff;
  --da-surface-soft: #eef2ed;
  --da-ink: #17231d;
  --da-muted: #647169;
  --da-line: #dce3dc;
  --da-line-strong: #c6d1c8;
  --da-green: #245d43;
  --da-green-dark: #163d2c;
  --da-green-soft: #e4efe7;
  --da-warm: #fbf8ef;
  --da-shadow: 0 18px 48px rgba(25, 53, 38, .08), 0 2px 7px rgba(25, 53, 38, .04);
  --da-radius-lg: var(--radius-surface);
  --da-radius-md: var(--radius-compact);
}

/* Retained TM components resolve through the same theme roles as new components. */
:is(body.tm-page, body.app-layout.direction-a-app) {
  --tm-paper: var(--da-paper); --tm-white: var(--da-surface); --tm-forest: var(--da-green);
  --tm-grid-10: var(--da-line); --tm-grid-20: var(--da-line); --tm-grid-30: var(--da-line-strong);
  --tm-forest-10: var(--da-green-soft); --tm-surface-card: var(--da-surface); --tm-surface-subcard: var(--da-surface);
  --bg-page: var(--da-paper); --bg-surface: var(--da-surface); --bg-surface-2: var(--da-surface-soft);
  --text-primary: var(--da-ink); --text-secondary: var(--da-muted); --text-tertiary: var(--da-muted);
  --border-light: var(--da-line); --border-strong: var(--da-line-strong); --line: var(--da-line); --surface-2: var(--da-surface-soft);
  background: var(--da-paper); color: var(--da-ink); font-family: var(--font-body);
}
body.tm-page .tm-nav { border-bottom: 1px solid var(--da-line); background: color-mix(in srgb, var(--da-paper) 91%, transparent); backdrop-filter: blur(16px); }
body.tm-page .tm-site-footer { background: #edf1eb; border-top: 1px solid var(--da-line); }
body.tm-page a:focus-visible, body.app-layout a:focus-visible,
body.tm-page button:focus-visible, body.app-layout button:focus-visible,
body.tm-page input:focus-visible, body.app-layout input:focus-visible,
body.tm-page textarea:focus-visible, body.app-layout textarea:focus-visible,
body.tm-page select:focus-visible, body.app-layout select:focus-visible {
  outline: 3px solid #c87938;
  outline-offset: 3px;
}
html.dark-mode body.tm-page,
html.dark-mode body.app-layout.direction-a-app {
  --da-paper: #121915;
  --da-surface: #1a231d;
  --da-surface-soft: #202b24;
  --da-ink: #e8efe9;
  --da-muted: #a4b2a8;
  --da-line: #34423a;
  --da-line-strong: #4b5c50;
  --da-green: #9fd0ae;
  --da-green-dark: #c1e3c9;
  --da-green-soft: #263a2d;
  --da-warm: #302b21;
  --da-shadow: 0 18px 48px rgba(0, 0, 0, .24), 0 2px 7px rgba(0, 0, 0, .16);
}
html.dark-mode body.tm-page .tm-nav,
html.dark-mode body.tm-page .tm-site-footer { background: #171f1a; border-color: var(--da-line); }
html.dark-mode body.tm-page .tm-nav a,
html.dark-mode body.tm-page .tm-nav button,
html.dark-mode body.tm-page .tm-site-footer a { color: var(--da-ink); }

.da-container { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.da-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(38px, 5vw, 66px) 0 36px; background: var(--da-paper); }
.da-hero::before { position: absolute; z-index: -2; inset: 0; content: ""; background: radial-gradient(760px circle at 83% 8%, rgba(156, 194, 163, .25), transparent 66%), linear-gradient(180deg, color-mix(in srgb, var(--da-paper) 88%, white), var(--da-paper) 82%); }
.da-hero-mesh { position: absolute; z-index: -1; width: min(760px, 72vw); height: 520px; object-fit: cover; inset: -90px -120px auto auto; opacity: .075; pointer-events: none; }
.da-hero-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(390px, 1.12fr); align-items: center; gap: clamp(34px, 6vw, 82px); }
.da-hero-copy { max-width: 575px; }
.da-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; color: var(--da-green); font: 650 11px/1.3 var(--tm-font-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; }
.da-eyebrow-mark { width: 8px; height: 8px; border-radius: 50%; background: #4c9468; box-shadow: 0 0 0 4px color-mix(in srgb, #4c9468 14%, transparent); }
.da-hero h1 { max-width: 590px; margin: 0 0 16px; color: var(--da-ink); font: 600 clamp(42px, 4.45vw, 60px)/1.02 var(--tm-font-display, system-ui, sans-serif); letter-spacing: -.052em; text-wrap: balance; }
.da-lede { max-width: 54ch; margin: 0; color: var(--da-muted); font-size: 15px; line-height: 1.58; }
.da-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 28px; }
.da-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 17px; border: 1px solid transparent; border-radius: var(--radius-control); font: 650 14px/1.1 var(--font-body, system-ui, sans-serif); text-decoration: none; cursor: pointer; transition: transform .16s ease, background .16s ease, box-shadow .16s ease; }
.da-button:hover { transform: translateY(-1px); }
.da-button-primary { color: #fff; background: #245d43; box-shadow: 0 6px 16px rgba(36, 93, 67, .15); }
.da-button-primary:hover { color: #fff; background: #163d2c; box-shadow: 0 8px 20px rgba(36, 93, 67, .2); }
.da-button-secondary { color: var(--da-ink); border-color: var(--da-line-strong); background: var(--da-surface); }
.da-button-secondary:hover { color: var(--da-ink); background: var(--da-surface-soft); }
.da-hero-note { margin: 14px 0 0; color: var(--da-muted); font-size: 12px; }
.da-capability-line { display: flex; flex-wrap: wrap; gap: 0; margin-top: 25px; color: var(--da-muted); font-size: 12px; }
.da-capability-line span { padding: 0 12px; border-left: 1px solid var(--da-line-strong); }
.da-capability-line span:first-child { padding-left: 0; border-left: 0; }
.da-demo-card { position: relative; padding: 24px; border: 1px solid var(--da-line); border-radius: var(--da-radius-lg); background: var(--da-surface); box-shadow: var(--da-shadow); }
.da-demo-head, .da-demo-output-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.da-label, .da-demo-form label { display: block; color: var(--da-muted); font: 650 10px/1.3 var(--tm-font-mono, ui-monospace, monospace); letter-spacing: .09em; text-transform: uppercase; }
.da-demo-head .da-label { margin-bottom: 7px; }
.da-demo-head h2 { margin: 0; color: var(--da-ink); font-size: 21px; letter-spacing: -.03em; }
.da-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--da-line); border-radius: var(--radius-pill); color: var(--da-muted); font-size: 11px; }
.da-status i { width: 7px; height: 7px; border-radius: 50%; background: #5e9c6f; }
.da-demo-description { max-width: 56ch; margin: 13px 0 20px; color: var(--da-muted); font-size: 13px; line-height: 1.55; }
.da-demo-form label { margin-bottom: 8px; color: var(--da-ink); letter-spacing: .02em; text-transform: none; font: 620 13px/1.4 var(--font-body, system-ui, sans-serif); }
.da-demo-input-row { display: flex; align-items: stretch; gap: 9px; }
.da-demo-input-row input { flex: 1; min-width: 0; min-height: 46px; padding: 0 13px; border: 1px solid var(--da-line-strong); border-radius: var(--radius-control); background: var(--da-surface); color: var(--da-ink); font: 14px/1.4 var(--font-body, system-ui, sans-serif); }
.da-demo-input-row input:focus { border-color: var(--da-green); }
.da-demo-input-row button { flex: 0 0 auto; }
.da-demo-result:not([hidden]) { display: block; margin-top: 16px; }
.da-demo-loading { display: flex; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--da-line); border-radius: var(--radius-control); color: var(--da-muted); font-size: 13px; }
.da-spinner { width: 15px; height: 15px; border: 2px solid var(--da-line-strong); border-top-color: var(--da-green); border-radius: 50%; animation: da-spin .75s linear infinite; }
@keyframes da-spin { to { transform: rotate(360deg); } }
.da-demo-output { padding: 16px; border: 1px solid var(--da-line); border-radius: var(--radius-control); background: color-mix(in srgb, var(--da-surface-soft) 48%, var(--da-surface)); }
.da-demo-output-head { color: var(--da-green); font: 650 10px/1.3 var(--tm-font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; }
.da-demo-output h3 { margin: 13px 0 10px; color: var(--da-ink); font-size: 16px; }
.da-formula-output { margin: 0 !important; border-color: var(--da-line) !important; border-radius: var(--radius-control); background: var(--da-surface) !important; }
.da-formula-output pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.da-demo-notes { margin: 12px 0; padding-left: 18px; color: var(--da-muted); font-size: 12px; line-height: 1.55; }
.da-preview-caveat { margin: 12px 0 8px; color: var(--da-muted); font-size: 11px; }
.da-inline-link, .da-text-link { color: var(--da-green); font-size: 13px; font-weight: 650; text-decoration: none; }
.da-inline-link:hover, .da-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.da-demo-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--da-line); color: var(--da-muted); font-size: 10px; }
.da-example-wrap { margin-top: 35px; }
.da-example-label { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 8px; color: var(--da-muted); font: 600 10px/1.4 var(--tm-font-mono, ui-monospace, monospace); letter-spacing: .07em; text-transform: uppercase; }
.da-example-sheet { display: grid; grid-template-columns: 1.05fr 1fr 1fr; overflow: hidden; border: 1px solid var(--da-line); border-radius: var(--radius-control); background: var(--da-surface); box-shadow: 0 8px 24px rgba(25, 53, 38, .035); }
.da-sheet-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-bottom: 1px solid var(--da-line); color: var(--da-ink); font-size: 12px; font-weight: 650; }
.da-sheet-dot { width: 8px; height: 8px; border-radius: 2px; background: #74aa80; }
.da-sheet-muted { color: var(--da-muted); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.da-sheet-grid { grid-column: 1 / 3; }
.da-sheet-row { display: grid; grid-template-columns: 1fr .5fr 1fr; min-height: 38px; border-bottom: 1px solid color-mix(in srgb, var(--da-line) 75%, transparent); color: var(--da-ink); font-size: 12px; }
.da-sheet-row span { padding: 11px 14px; border-right: 1px solid color-mix(in srgb, var(--da-line) 75%, transparent); }
.da-sheet-head { color: var(--da-muted); background: var(--da-surface-soft); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.da-example-formula { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 13px 16px; border-left: 1px solid var(--da-line); color: var(--da-muted); font-size: 10px; }
.da-example-formula code { color: var(--da-green-dark); font-size: 11px; overflow-wrap: anywhere; }
.da-section { padding: clamp(64px, 8vw, 96px) 0; }
.da-section-tight { padding-top: 45px; }
.da-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 24px; }
.da-section-heading .da-eyebrow { margin-bottom: 9px; }
.da-section-heading h2, .da-faq-layout h2 { max-width: 700px; margin: 0; color: var(--da-ink); font: 600 clamp(29px, 3.5vw, 43px)/1.08 var(--tm-font-display, system-ui, sans-serif); letter-spacing: -.04em; text-wrap: balance; }
.da-heading-aside { max-width: 36ch; margin: 0; color: var(--da-muted); font-size: 13px; line-height: 1.55; }
.da-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.da-tool-card { position: relative; min-height: 226px; padding: 20px; border: 1px solid var(--da-line); border-radius: var(--da-radius-md); background: var(--da-surface); color: var(--da-ink); text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.da-tool-card:hover { transform: translateY(-3px); border-color: var(--da-line-strong); box-shadow: var(--da-shadow); }
.da-tool-index { position: absolute; top: 18px; right: 18px; color: var(--da-muted); font: 11px var(--tm-font-mono, ui-monospace, monospace); }
.da-tool-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 25px; border: 1px solid var(--da-line); border-radius: var(--radius-control); color: var(--da-green); background: var(--da-surface-soft); font: 650 13px var(--tm-font-mono, ui-monospace, monospace); }
.da-tool-card h3 { margin: 0 0 8px; color: var(--da-ink); font-size: 16px; letter-spacing: -.02em; }
.da-tool-card p { min-height: 57px; margin: 0 0 14px; color: var(--da-muted); font-size: 12px; line-height: 1.55; }
.da-tool-link { color: var(--da-green); font-size: 12px; font-weight: 650; }
.da-tool-featured { border-color: #bad0bf; background: linear-gradient(160deg, var(--da-surface), color-mix(in srgb, var(--da-green-soft) 48%, var(--da-surface))); }
.da-tool-repair { background: color-mix(in srgb, var(--da-warm) 58%, var(--da-surface)); }
.da-tool-library { grid-column: span 2; }
.da-review-section { background: var(--da-surface-soft); }
.da-review-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(30px, 7vw, 90px); }
.da-review-copy h3 { margin: 0 0 12px; color: var(--da-ink); font-size: 23px; letter-spacing: -.035em; }
.da-review-copy p { max-width: 46ch; margin: 0 0 18px; color: var(--da-muted); font-size: 14px; line-height: 1.65; }
.da-mode-card { overflow: hidden; border: 1px solid var(--da-line); border-radius: var(--radius-surface); background: var(--da-surface); box-shadow: var(--da-shadow); }
.da-mode-tabs { display: flex; gap: 4px; padding: 9px 12px 0; border-bottom: 1px solid var(--da-line); }
.da-mode-tab { min-height: 39px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; color: var(--da-muted); background: transparent; font: 620 12px var(--font-body, system-ui, sans-serif); cursor: pointer; }
.da-mode-tab.is-active, .da-mode-tab[aria-selected="true"] { border-color: var(--da-green); color: var(--da-green-dark); }
.da-mode-card [data-mode-panel] { min-height: 172px; padding: 24px; }
.da-output-label { display: block; margin-bottom: 14px; color: var(--da-muted); font: 600 10px var(--tm-font-mono, ui-monospace, monospace); letter-spacing: .07em; text-transform: uppercase; }
.da-mode-card [data-mode-panel] code { display: block; padding: 14px; border: 1px solid var(--da-line); border-radius: var(--radius-control); color: var(--da-ink); background: var(--da-surface-soft); font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.da-mode-card [data-mode-panel] p { margin: 12px 0 0; color: var(--da-muted); font-size: 12px; }
.da-mode-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--da-line); color: var(--da-muted); font-size: 10px; }
.da-workflow-section { background: var(--da-paper); }
.da-workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--da-line); }
.da-workflow-grid article { min-height: 170px; padding: 23px 26px; border-right: 1px solid var(--da-line); }
.da-workflow-grid article:first-child { padding-left: 0; }
.da-workflow-grid article:last-child { border-right: 0; }
.da-step-number { color: var(--da-green); font: 650 11px var(--tm-font-mono, ui-monospace, monospace); }
.da-workflow-grid h3 { margin: 15px 0 8px; color: var(--da-ink); font-size: 17px; }
.da-workflow-grid p { max-width: 34ch; margin: 0; color: var(--da-muted); font-size: 13px; line-height: 1.58; }
.da-pricing-section { background: var(--da-surface); }
.da-pricing-toggle { display: inline-flex; gap: 4px; margin: 0 0 17px; padding: 4px; border: 1px solid var(--da-line); border-radius: var(--radius-control); background: var(--da-paper); }
.da-toggle-option { min-height: 33px; padding: 0 12px; border: 0; border-radius: var(--radius-control); color: var(--da-muted); background: transparent; font: 600 11px var(--font-body, system-ui, sans-serif); cursor: pointer; }
.da-toggle-option.is-active, .da-toggle-option[aria-selected="true"] { color: var(--da-green-dark); background: var(--da-green-soft); }
.da-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 900px; }
.da-plan-card { padding: 24px; border: 1px solid var(--da-line); border-radius: var(--radius-surface); background: var(--da-paper); }
.da-plan-pro { border-color: #aac6b1; background: linear-gradient(160deg, color-mix(in srgb, var(--da-green-soft) 52%, var(--da-surface)), var(--da-surface)); }
.da-plan-kicker { margin: 0 0 14px; color: var(--da-green); font: 650 10px var(--tm-font-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; }
.da-plan-card h3 { display: inline-block; margin: 0 7px 0 0; color: var(--da-ink); font-size: 34px; letter-spacing: -.05em; }
.da-plan-card > p:not(.da-plan-kicker):not(.da-plan-note) { min-height: 38px; margin: 9px 0 15px; color: var(--da-muted); font-size: 13px; line-height: 1.5; }
.da-plan-card ul { min-height: 145px; margin: 0 0 18px; padding: 16px 0 0; border-top: 1px solid var(--da-line); list-style: none; }
.da-plan-card li { position: relative; margin: 0 0 10px; padding-left: 18px; color: var(--da-ink); font-size: 12px; line-height: 1.45; }
.da-plan-card li::before { position: absolute; left: 1px; content: "✓"; color: var(--da-green); font-weight: 700; }
.da-plan-price { display: flex; align-items: baseline; gap: 6px; }
.da-plan-price h3 { margin: 0; }
.da-plan-price > span:last-child { color: var(--da-muted); font-size: 12px; }
.da-plan-strike { color: var(--da-muted); font-size: 12px; text-decoration: line-through; }
.da-plan-note { margin: 10px 0 0; color: var(--da-muted); font-size: 10px; }
.da-pricing-foot { margin: 15px 0 0; color: var(--da-muted); font-size: 11px; }
.da-pricing-foot a { color: var(--da-green); }
.da-faq-section { background: var(--da-paper); }
.da-faq-layout { display: grid; grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); gap: clamp(34px, 7vw, 90px); }
.da-faq-layout .da-eyebrow { margin-bottom: 12px; }
.da-faq-intro { max-width: 35ch; margin: 17px 0 0; color: var(--da-muted); font-size: 14px; line-height: 1.6; }
.da-faq-list details { padding: 17px 0; border-bottom: 1px solid var(--da-line); }
.da-faq-list details:first-child { border-top: 1px solid var(--da-line); }
.da-faq-list summary { position: relative; padding-right: 30px; color: var(--da-ink); font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; }
.da-faq-list summary::-webkit-details-marker { display: none; }
.da-faq-list summary::after { position: absolute; right: 3px; content: "+"; color: var(--da-green); font-size: 20px; line-height: .8; }
.da-faq-list details[open] summary::after { content: "−"; }
.da-faq-list details p { max-width: 72ch; margin: 11px 26px 0 0; color: var(--da-muted); font-size: 13px; line-height: 1.6; }
.da-final-cta { position: relative; overflow: hidden; background: #e8f0e9; text-align: center; }
html.dark-mode .da-final-cta { background: #1c2a21; }
.da-final-cta-content { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; }
.da-final-cta .da-eyebrow { justify-content: center; }
.da-final-cta h2 { max-width: 700px; margin: 0 0 24px; color: var(--da-ink); font: 600 clamp(30px, 4.3vw, 50px)/1.05 var(--tm-font-display, system-ui, sans-serif); letter-spacing: -.045em; text-wrap: balance; }
.da-final-cta .cta-aurora-core { position: absolute; width: 390px; height: 390px; left: calc(50% - 195px); top: calc(50% - 195px); border-radius: 50%; background: radial-gradient(circle, rgba(114, 173, 127, .17), transparent 68%); pointer-events: none; }
.da-final-cta .testimonials-accent-wave { width: min(460px, 80%); height: 24px; margin-top: 27px; color: var(--da-green); opacity: .4; }
.da-team-waitlist { padding: 28px 0; border-block: 1px solid var(--da-line); background: var(--da-surface); }
.da-team-content { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.da-team-content .da-eyebrow { margin-bottom: 7px; }
.da-team-content h2 { margin: 0 0 5px; color: var(--da-ink); font-size: 19px; letter-spacing: -.025em; }
.da-team-content p:not(.da-eyebrow) { margin: 0; color: var(--da-muted); font-size: 12px; }
.da-team-content form { display: flex; align-items: center; gap: 8px; width: min(470px, 54%); }
.da-team-content input { flex: 1; min-width: 0; min-height: 42px; padding: 0 11px; border: 1px solid var(--da-line-strong); border-radius: var(--radius-control); background: var(--da-surface); color: var(--da-ink); }
.da-team-content .da-button { min-height: 42px; white-space: nowrap; }
.da-footer { padding: 48px 0 18px; border-top: 1px solid var(--da-line); background: #edf1eb; color: var(--da-ink); }
html.dark-mode .da-footer { background: #171f1a; }
.da-footer-grid { display: grid; grid-template-columns: 1.35fr repeat(3, .8fr) 1.15fr; gap: 28px; }
.da-footer-brand .tm-site-brand { color: var(--da-ink); }
.da-footer-brand > p, .da-footer-updates > p { max-width: 32ch; margin: 15px 0 0; color: var(--da-muted); font-size: 12px; line-height: 1.55; }
.da-footer-grid h2 { margin: 0 0 13px; color: var(--da-ink); font: 650 10px var(--tm-font-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; }
.da-footer-grid > div:not(.da-footer-brand) > a { display: block; width: fit-content; margin: 0 0 9px; color: var(--da-muted); font-size: 12px; text-decoration: none; }
.da-footer-grid > div > a:hover { color: var(--da-green); text-decoration: underline; text-underline-offset: 3px; }
.da-footer-updates form { display: flex; flex-direction: column; gap: 8px; margin-top: 13px; }
.da-footer-updates input { min-height: 40px; padding: 0 11px; border: 1px solid var(--da-line-strong); border-radius: var(--radius-control); background: var(--da-surface); color: var(--da-ink); }
.da-footer-updates button { min-height: 39px; }
.da-footer-updates .tm-site-footer-subscribe-status { margin-top: 8px; }
.da-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 39px; padding-top: 15px; border-top: 1px solid var(--da-line); color: var(--da-muted); font-size: 10px; }
.da-footer-bottom a { color: inherit; text-decoration: none; }
.da-footer-bottom a:hover { color: var(--da-green); }

/* Shared app workspace foundation. Existing tool controls and script hooks remain intact. */
body.app-layout.direction-a-app { --bg-page: var(--da-paper); --bg-app: var(--da-paper); --bg-shell: #eef2ed; --bg-surface: var(--da-surface); --bg-surface-1: var(--da-surface); --bg-surface-2: var(--da-surface-soft); --bg-surface-muted: var(--da-surface-soft); --text-primary: var(--da-ink); --text-secondary: var(--da-muted); --text-tertiary: var(--da-muted); --text-muted: var(--da-muted); --accent-primary: #245d43; --accent-primary-dark: #163d2c; --accent-soft: #e4efe7; --border-strong: var(--da-line-strong); --border-light: var(--da-line); --border-subtle: var(--da-line); --line: var(--da-line); --surface-2: var(--da-surface-soft); background: var(--da-paper); color: var(--da-ink); }
html.dark-mode body.app-layout.direction-a-app { --bg-page: var(--da-paper); --bg-app: var(--da-paper); --bg-shell: #171f1a; --accent-primary: #9fd0ae; --accent-primary-dark: #c1e3c9; --accent-soft: #263a2d; }
.app-layout.direction-a-app .app-sidebar { background: color-mix(in srgb, var(--da-surface) 80%, var(--da-paper)); border-right: 1px solid var(--da-line); padding: 17px 14px; }
.app-layout.direction-a-app .fg-app-brand { display: flex; align-items: center; gap: 9px; margin: 1px 5px 17px; color: var(--da-ink); font: 650 13px var(--font-display, system-ui, sans-serif); letter-spacing: -.02em; text-decoration: none; }
.app-layout.direction-a-app .fg-app-brand img { display: block; border-radius: var(--radius-control); }
.app-layout.direction-a-app .sidebar-new-btn { border-radius: var(--radius-control); }
.app-layout.direction-a-app .sidebar-nav-label { padding: 14px 10px 6px; color: var(--da-muted); font: 650 9px var(--tm-font-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; }
.app-layout.direction-a-app .sidebar-nav-item { min-height: 44px; border-radius: var(--radius-control); color: var(--da-muted); font-size: 12px; }
.app-layout.direction-a-app .sidebar-nav-item:hover { color: var(--da-ink); background: var(--da-surface-soft); }
.app-layout.direction-a-app .sidebar-nav-item.active { color: var(--da-green-dark); background: var(--da-green-soft); }
.app-layout.direction-a-app .app-main { background: var(--da-paper); }
.app-layout.direction-a-app .app-canvas-shell { background: var(--da-paper); }
.app-layout.direction-a-app .app-content { padding: 24px 32px 40px; max-width: 1160px; margin-inline: auto; background: var(--da-paper); }
.app-layout.direction-a-app .app-content-toolbar { min-height: 0; }
.app-layout.direction-a-app .sidebar-usage { border-color: var(--da-line); background: var(--da-surface); }
.app-layout.direction-a-app .sidebar-user { border-color: var(--da-line); }
.app-layout.direction-a-app .sidebar-user-btn, .app-layout.direction-a-app .sidebar-theme-toggle { border-radius: var(--radius-control); }
.app-layout.direction-a-app :is(.card, .stat-card, .form-card, .generator-card, .library-card, .library-item-card, .collection-card, .history-card, .library-toolbar, .library-stat, .library-empty) { border-color: var(--da-line); border-radius: var(--radius-surface); box-shadow: 0 5px 18px rgba(25, 53, 38, .035); }
.app-layout.direction-a-app :is(input, textarea, select) { border-color: var(--da-line-strong); border-radius: var(--radius-control); }
html.dark-mode body.app-layout.direction-a-app .app-sidebar { background: #171f1a; }
html.dark-mode body.app-layout.direction-a-app .app-main,
html.dark-mode body.app-layout.direction-a-app .app-canvas-shell,
html.dark-mode body.app-layout.direction-a-app .app-content { background: var(--da-paper); }

/* Workbench: preserve existing IDs, tour controls, quota values, recents and referral actions. */
/* Task pages share the shell gutter. Results and inputs stay in one readable column. */
.app-layout #generate-page { max-width: 880px; margin-inline: auto; }
.app-layout #generate-page .app-page-hero h1 { font-size: 30px; line-height: 1.2; margin: 0 0 8px; }
.app-layout #generate-page .app-page-hero p { font-size: 14px; line-height: 1.55; }
.app-layout #generate-page .tool-panel > .card { padding: 20px; background: var(--da-surface); }
.app-layout #generate-page .starter-card { border-radius: var(--radius-control); padding: 12px; background: var(--da-surface-soft); }
.app-layout #generate-page .starter-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.app-layout #generate-page .form-group textarea { min-height: 88px; padding: 12px; }
.app-layout #generate-page .form-group textarea[rows="2"] { min-height: 68px; }
.app-layout #generate-page .result-placeholder { padding: 12px 0 0; border: 0; background: transparent; text-align: left; }
.app-layout #generate-page .result-card { margin-top: 20px; }
.app-layout :is(.library-header .page-title, .account-settings-page .section-title h1) { font-size: 30px; line-height: 1.2; }
.app-layout .library-toolbar { padding: 16px; background: var(--da-surface); }
.app-layout .library-stat { padding: 12px 16px; background: var(--da-surface); }
.app-layout .account-settings-page { max-width: 1040px; margin-inline: auto; }
.app-layout .account-settings-page .section-title p { display: block; font-size: 14px; line-height: 1.55; }
.app-layout .account-settings-page .settings-profile-current .input,
.app-layout .account-settings-page .settings-inline-actions .input { padding-left: 12px; }
.app-layout .account-settings-page .settings-policy-note { border-radius: var(--radius-compact); }
.app-layout .account-settings-page .card { padding: 20px; gap: 12px; background: var(--da-surface); }
.app-layout .account-settings-page .card h3 { font-size: 19px; }
.app-layout .account-settings-page :is(input:not([type="checkbox"]), select) { min-height: 44px; height: 44px; padding: 10px 12px; border-radius: var(--radius-control); }
.app-layout .account-settings-page :is(button, .btn) { min-height: 44px; height: auto; padding: 10px 16px; border-radius: var(--radius-control); }

@media (max-width: 640px) {
  .app-layout #generate-page .app-page-hero h1 { font-size: 26px; }
  .app-layout #generate-page .tool-panel > .card { padding: 16px; }
  .app-layout #generate-page .starter-cards { gap: 8px; }
  .app-layout #generate-page .tool-panel form .btn.btn-primary { width: 100%; }
}
@media (max-width: 360px) { .app-layout #generate-page .starter-cards { grid-template-columns: 1fr; } }

.da-workbench-page { min-height: 100%; padding: 2px 0 48px; }
.da-workbench-stack { display: flex; flex-direction: column; gap: 21px; }
.da-workbench-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.da-workbench-head .da-eyebrow { margin-bottom: 11px; }
.da-workbench-head h1 { margin: 0 0 8px; color: var(--da-ink); font: 600 32px/1.15 var(--tm-font-display, system-ui, sans-serif); letter-spacing: -.045em; }
.da-workbench-head > div > p:not(.da-eyebrow) { margin: 0; color: var(--da-muted); font-size: 14px; }
.da-workbench-head .dashboard-email-row { margin-top: 13px; }
.da-workbench-head .dashboard-user-chip { color: var(--da-muted); }
.da-workbench-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(265px, .7fr); align-items: start; gap: 17px; }
.da-workbench-main, .da-workbench-side { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.da-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.da-stat-card, .da-start-panel, .da-tools-panel, .da-recent-panel, .da-side-card { padding: 17px; border: 1px solid var(--da-line); border-radius: var(--radius-compact); background: var(--da-surface); box-shadow: 0 4px 15px rgba(25, 53, 38, .035); }
.da-stat-card { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.da-stat-card > span { color: var(--da-muted); font-size: 11px; }
.da-stat-card > strong { color: var(--da-ink); font-size: clamp(18px, 2vw, 24px); letter-spacing: -.04em; }
.da-stat-card > small { color: var(--da-muted); font-size: 10px; line-height: 1.45; }
.da-start-panel { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px; border-color: #bdd1c1; background: linear-gradient(135deg, color-mix(in srgb, var(--da-green-soft) 65%, var(--da-surface)), var(--da-surface)); }
.da-start-copy { max-width: 520px; }
.da-start-copy .da-label, .da-panel-heading .da-label { margin: 0 0 8px; }
.da-start-copy h2, .da-panel-heading h2 { margin: 0; color: var(--da-ink); font-size: 19px; letter-spacing: -.03em; }
.da-start-copy > p:last-child { margin: 8px 0 0; color: var(--da-muted); font-size: 12px; line-height: 1.55; }
.da-start-actions { display: flex; flex: 0 0 auto; align-items: center; flex-direction: column; gap: 10px; }
.da-start-actions .da-button { min-height: 41px; font-size: 12px; }
.da-start-actions .da-text-link { font-size: 11px; }
.da-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.da-panel-heading .da-label { display: block; }
.da-panel-heading .da-text-link { flex: 0 0 auto; font-size: 11px; }
.da-workbench-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.da-workbench-tool-grid > a { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; min-height: 96px; padding: 12px; border: 1px solid var(--da-line); border-radius: var(--radius-control); background: var(--da-paper); color: var(--da-ink); text-decoration: none; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.da-workbench-tool-grid > a:hover { transform: translateY(-2px); border-color: var(--da-line-strong); background: var(--da-surface-soft); }
.da-workbench-tool-grid > a > span { margin-bottom: 9px; color: var(--da-green); font: 650 11px var(--tm-font-mono, ui-monospace, monospace); }
.da-workbench-tool-grid strong { font-size: 11px; }
.da-workbench-tool-grid small { margin-top: 5px; color: var(--da-muted); font-size: 12px; line-height: 1.45; }
.da-recent-panel #dashboard-recent-content { min-width: 0; }
.da-side-card > p { margin: 0 0 13px; color: var(--da-muted); font-size: 12px; line-height: 1.55; }
.da-side-link { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--da-line); color: var(--da-ink); font-size: 11px; text-decoration: none; }
.da-side-link:hover { color: var(--da-green); }
.da-side-link span { color: var(--da-muted); }
.da-referral-card label { display: block; margin: 15px 0 7px; color: var(--da-muted); font-size: 10px; font-weight: 650; }
.da-referral-input { display: flex; gap: 6px; }
.da-referral-input input { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; color: var(--da-ink); background: var(--da-paper); font: 10px var(--tm-font-mono, ui-monospace, monospace); }
.da-referral-input button { padding: 0 10px; border: 1px solid var(--da-green); border-radius: var(--radius-control); color: white; background: var(--da-green); font: 600 10px var(--font-body, system-ui, sans-serif); cursor: pointer; }
.da-referral-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 12px 0; }
.da-referral-stats > div { display: flex; flex-direction: column; gap: 3px; padding: 9px; border: 1px solid var(--da-line); border-radius: var(--radius-control); background: var(--da-paper); }
.da-referral-stats > div:last-child { grid-column: 1 / -1; }
.da-referral-stats span, .da-referral-stats small { color: var(--da-muted); font-size: 9px; }
.da-referral-stats strong { color: var(--da-ink); font-size: 15px; }
.da-referral-stats small { margin-top: 2px; }

@media (max-width: 1020px) {
  .da-hero-grid { grid-template-columns: minmax(0, .85fr) minmax(350px, 1.15fr); gap: 28px; }
  .da-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .da-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .da-footer-brand, .da-footer-updates { grid-column: span 3; }
  .da-footer-updates { max-width: 450px; }
  .da-workbench-layout { grid-template-columns: minmax(0, 1.4fr) minmax(240px, .75fr); }
}
@media (max-width: 760px) {
  .da-container { width: min(100% - 32px, 600px); }
  .da-hero { padding-top: 42px; }
  .da-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .da-hero h1 { font-size: clamp(39px, 10.8vw, 56px); }
  .da-lede { font-size: 15px; }
  .da-demo-card { padding: 18px; }
  .da-demo-input-row { flex-direction: column; }
  .da-demo-input-row button { width: 100%; }
  .da-example-wrap { margin-top: 27px; }
  .da-example-sheet { grid-template-columns: 1fr; }
  .da-sheet-grid { grid-column: 1; overflow-x: auto; }
  .da-example-formula { border-top: 1px solid var(--da-line); border-left: 0; }
  .da-section { padding: 60px 0; }
  .da-section-tight { padding-top: 35px; }
  .da-section-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .da-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .da-tool-card { min-height: 210px; padding: 16px; }
  .da-tool-library { grid-column: auto; }
  .da-review-layout, .da-faq-layout { grid-template-columns: 1fr; gap: 25px; }
  .da-review-copy h3 { font-size: 21px; }
  .da-workflow-grid { grid-template-columns: 1fr; }
  .da-workflow-grid article, .da-workflow-grid article:first-child { min-height: 0; padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--da-line); }
  .da-workflow-grid article:last-child { border-bottom: 0; }
  .da-plan-grid { grid-template-columns: 1fr; }
  .da-plan-card ul { min-height: 0; }
  .da-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .da-footer-brand, .da-footer-updates { grid-column: span 2; }
  .da-footer-bottom { flex-direction: column; }
  .da-team-content { align-items: flex-start; flex-direction: column; }
  .da-team-content form { width: 100%; }
  .app-layout.direction-a-app .app-content { padding: 16px 16px 32px; }
  .da-workbench-page { padding-top: 0; }
  .da-workbench-head { align-items: flex-start; flex-direction: column; }
  .da-workbench-head > .da-button { min-height: 38px; }
  .da-workbench-layout { grid-template-columns: 1fr; }
  .da-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .da-stat-card { padding: 11px 9px; gap: 6px; }
  .da-stat-card > span { font-size: 9px; }
  .da-stat-card > strong { font-size: 17px; }
  .da-stat-card > small { font-size: 9px; }
  .da-start-panel { align-items: flex-start; flex-direction: column; }
  .da-start-actions { align-items: flex-start; }
  .da-workbench-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .da-container { width: calc(100% - 26px); }
  .da-actions { align-items: stretch; flex-direction: column; }
  .da-actions .da-button { width: 100%; }
  .da-team-content form { align-items: stretch; flex-direction: column; }
  .da-tool-grid { grid-template-columns: 1fr; }
  .da-tool-card { min-height: 0; }
  .da-tool-card p { min-height: 0; }
  .da-footer-grid { grid-template-columns: 1fr 1fr; }
  .da-footer-brand, .da-footer-updates { grid-column: span 2; }
  .da-workbench-tool-grid { grid-template-columns: 1fr 1fr; }
  .da-stat-grid { grid-template-columns: 1fr; }
  .da-example-label { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .da-spinner { animation: none; }
  .da-button, .da-tool-card, .da-workbench-tool-grid > a { transition: none; }
  .da-button:hover, .da-tool-card:hover, .da-workbench-tool-grid > a:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .repair-starter, .starter-card, .tool-panel { animation: none; transition: none; }
  .repair-starter:hover, .starter-card:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* Spreadsheet preferences are optional settings, visually subordinate to the task input. */
.fg-preferences-details { border: 1px solid var(--da-line); border-radius: var(--radius-compact); background: var(--da-surface-soft); padding: 12px 16px; }
.fg-preferences-details > summary { color: var(--da-ink); font: 600 13px/1.5 var(--font-body); cursor: pointer; min-height: 20px; }
.fg-preferences-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 16px; }
.fg-preference-field { display: grid; gap: 6px; min-width: 0; }
.fg-preference-field label { color: var(--da-ink); font: 600 13px/1.4 var(--font-body); }
.fg-preference-field :is(input, select) { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--da-line-strong); border-radius: var(--radius-control); background: var(--da-surface); color: var(--da-ink); font: 14px/1.5 var(--font-body); }
.fg-preferences-note, .fg-preferences-status { margin: 12px 0 0; color: var(--da-muted); font-size: 12px; line-height: 1.55; }
.fg-preferences-status:empty { display: none; }
.fg-preferences-details > a { display: inline-block; margin-top: 12px; color: var(--da-green); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.fg-preferences-details > .btn { margin-top: 16px; }
.fg-preferences-settings { container-type: inline-size; }
.fg-preferences-settings .fg-preferences-details { border: 0; background: transparent; padding: 0; }
@container (max-width: 360px) { .fg-preferences-settings .fg-preferences-fields { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .fg-preferences-fields { grid-template-columns: 1fr; } }

/* Navigation stays in the common shell gutter; page heading aligns with its task panel. */
.app-layout .app-content:has(#generate-page) .app-content-toolbar { width: 100%; margin: 0; position: relative; height: 0; }
.app-layout .app-content:has(#generate-page) .canvas-mobile-toggle { position: absolute; top: -5px; left: 0; }
.app-layout #generate-page .app-page-hero { padding-left: 0; }
.app-layout #generate-page > .container { gap: 16px; }
.app-layout #generate-page .fg-form-help { margin: -8px 0 0; color: var(--da-muted); font: 12px/1.5 var(--font-body); }
/* Generated output is adjacent to editable input on desktop, stacked on narrow screens. */
@media (min-width: 1200px) {
  .app-layout #generate-page:has(.tool-panel.active > .result-card:not(.hidden)) { max-width: 1120px; }
  .app-layout #generate-page .tool-panel.active:has(> .result-card:not(.hidden)) { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 20px; align-items: start; }
  .app-layout #generate-page .tool-panel.active:has(> .result-card:not(.hidden)) > .result-card { margin-top: 0; min-width: 0; }
  .app-layout #generate-page:has(.result-card:not(.hidden)) .starter-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fg-workflow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; margin: 12px 0; border-block: 1px solid var(--da-line); }
.fg-workflow-actions > span { flex: 1 1 100%; color: var(--da-muted); font: 600 12px/1.45 var(--font-body); }
.fg-workflow-actions .btn { min-height: 44px; padding: 10px 12px; font: 600 13px/1.4 var(--font-body); border-radius: var(--radius-control); letter-spacing: 0; text-transform: none; }
.fg-workflow-notice { padding: 12px 16px; margin: 0; border: 1px solid var(--da-line-strong); border-radius: var(--radius-compact); color: var(--da-ink); background: var(--da-green-soft); font-size: 13px; line-height: 1.5; }
@media (min-width: 901px) {
  .app-layout #generate-page { width: calc(100% - 56px); margin-left: 56px; margin-right: 0; }
}
@media (max-width: 900px) {
  .app-layout .app-content:has(#generate-page) .app-content-toolbar { height: 44px; margin-bottom: 8px; }
  .app-layout .app-content:has(#generate-page) .canvas-mobile-toggle { left: 0; top: 0; }
}

/* Task-first generator: a compact editor and a flat output workspace.
   Capture mode intentionally retains the shared branded export-card styles. */
.app-layout #generate-page.fg-generator-workspace { width: 100%; max-width: none; margin: 0; padding: 0; }
.app-layout #generate-page > .container { width: 100%; max-width: none; padding: 0; margin: 0; gap: 16px; }
.app-layout #generate-page .fg-workspace-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; text-align: left; }
.app-layout #generate-page .fg-workspace-heading h1 { margin: 0; font: 600 22px/1.2 var(--font-body); letter-spacing: -.025em; }
.app-layout #generate-page .fg-workspace-heading p { margin: 0; font: 13px/1.45 var(--font-body); color: var(--da-muted); }
.app-layout #generate-page .tool-panel.active { display: grid; grid-template-columns: minmax(320px, .4fr) minmax(0, .6fr); align-items: start; gap: 24px; margin: 0; }
.app-layout #generate-page .fg-editor-pane { min-width: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.app-layout #generate-page .fg-editor-form { display: flex; flex-direction: column; gap: 12px; }
.app-layout #generate-page .form-group { margin: 0; padding: 0; display: grid; gap: 6px; }
.app-layout #generate-page .form-group label { margin: 0; font: 600 13px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--da-ink); }
.app-layout #generate-page .form-group textarea { width: 100%; resize: vertical; min-height: 152px; padding: 12px; border: 1px solid var(--da-line-strong); border-radius: var(--radius-control); background: var(--da-surface); color: var(--da-ink); font: 14px/1.5 var(--font-body); }
.app-layout #generate-page .form-group textarea::placeholder { color: var(--da-muted); opacity: 1; }
.app-layout #generate-page .fg-example-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 0; padding: 0; }
.app-layout #generate-page .fg-example-chips > span { align-self: center; color: var(--da-muted); font-size: 12px; }
.app-layout #generate-page .fg-example-chips .starter-card { min-width: 0; min-height: 30px; padding: 4px 8px; margin: 0; border: 1px solid var(--da-line); border-radius: var(--radius-control); background: transparent; box-shadow: none; font: 500 12px/1.4 var(--font-body); color: var(--da-green); text-align: left; cursor: pointer; transform: none; }
.app-layout #generate-page .fg-example-chips .starter-card:hover { background: var(--da-green-soft); border-color: var(--da-line-strong); }
.app-layout #generate-page .fg-editor-options { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 16px; min-width: 0; }
.app-layout #generate-page .fg-inline-platform { flex: 1 1 150px; max-width: 240px; }
.app-layout #generate-page .fg-editor-options select { min-height: 40px; height: 40px; padding: 8px 12px; }
.app-layout #generate-page .fg-editor-options .tm-select-trigger { min-height: 40px; height: 40px; }
.app-layout #generate-page .fg-preferences-panel { flex: 1 1 130px; }
.app-layout #generate-page .fg-preferences-details { border: 0; background: transparent; padding: 0; }
.app-layout #generate-page .fg-preferences-details > summary { min-height: 40px; display: flex; align-items: center; padding: 8px 0; font-size: 12px; }
.app-layout #generate-page .fg-preferences-details[open] { padding: 12px; border: 1px solid var(--da-line); background: var(--da-surface); }
.app-layout #generate-page .fg-preferences-details[open] > summary { min-height: 24px; padding: 0; }
.app-layout #generate-page .fg-editor-options:has(.fg-preferences-details[open]) .fg-preferences-panel { flex-basis: 100%; }
.app-layout #generate-page .fg-preferences-fields { gap: 10px; margin-top: 12px; }
.app-layout #generate-page .fg-context { border: 0; background: transparent; padding: 0; }
.app-layout #generate-page .fg-context > summary { min-height: 32px; padding: 6px 0; color: var(--da-muted); font: 500 13px/1.5 var(--font-body); cursor: pointer; }
.app-layout #generate-page .fg-context[open] { display: grid; gap: 10px; }
.app-layout #generate-page .fg-context textarea { min-height: 80px; }
.app-layout #generate-page .fg-editor-submit .btn { min-height: 40px; padding: 8px 16px; font: 600 14px/1.5 var(--font-body); }
.app-layout #generate-page .fg-form-help { margin: -2px 0 0; font: 11px/1.5 var(--font-body); color: var(--da-muted); }
.app-layout #generate-page .fg-output-pane { min-width: 0; padding-left: 24px; border-left: 1px solid var(--da-line); }
.app-layout #generate-page .fg-output-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 12px; }
.app-layout #generate-page .fg-output-heading h2 { margin: 0; font: 600 14px/1.4 var(--font-body); }
.app-layout #generate-page .fg-output-status { color: var(--da-muted); font: 12px/1.4 var(--font-body); }
.app-layout #generate-page .result-placeholder { padding: 28px 0; margin: 0; border: 0; border-radius: 0; background: transparent; text-align: left; color: var(--da-muted); }
.app-layout #generate-page .result-placeholder p { margin: 0 0 6px; color: var(--da-ink); font: 500 14px/1.4 var(--font-body); }
.app-layout #generate-page .result-placeholder > span { display: block; max-width: 42ch; font: 13px/1.6 var(--font-body); }
.app-layout #generate-page .result-placeholder[hidden] { display: none; }
.app-layout #generate-page .result-card { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; animation: none; }
.app-layout #generate-page .fg-result-loading { padding: 20px 0; color: var(--da-muted); font: 13px/1.5 var(--font-body); }
.app-layout #generate-page .fg-result-loading p { color: var(--da-ink); margin: 8px 0 4px; }
.fg-loading-mark { display: inline-block; width: 24px; height: 3px; background: var(--da-green); animation: fg-result-pulse 1s ease-in-out infinite alternate; }
@keyframes fg-result-pulse { from { opacity: .35; } to { opacity: 1; } }
.app-layout:not(.fg-export-capture) #generate-page :is(.result-main-card, .result-content, .result-actions) { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
.app-layout:not(.fg-export-capture) #generate-page .rc-title-row { display: none; }
.app-layout:not(.fg-export-capture) #generate-page .rc-head { padding: 0 !important; margin: 0 0 8px !important; border: 0 !important; min-height: 24px; align-items: center; }
.app-layout:not(.fg-export-capture) #generate-page .rc-badges { margin: 0; gap: 8px; }
.app-layout:not(.fg-export-capture) #generate-page .rc-badge { min-height: 0; padding: 0; border: 0; background: transparent; font: 500 12px/1.4 var(--font-body); text-transform: none; letter-spacing: 0; }
.app-layout:not(.fg-export-capture) #generate-page .rc-badge::before { display: none; }
.app-layout:not(.fg-export-capture) #generate-page .rc-head-menu-trigger { width: 32px !important; min-width: 32px !important; min-height: 32px !important; height: 32px !important; border: 0 !important; border-radius: var(--radius-control) !important; background: transparent !important; }
.app-layout:not(.fg-export-capture) #generate-page .rc-alt-formula { padding: 12px !important; margin: 0 0 12px !important; background: var(--da-surface) !important; border: 1px solid var(--da-line-strong) !important; border-radius: var(--radius-control) !important; }
.app-layout:not(.fg-export-capture) #generate-page .rc-alt-row { gap: 12px; align-items: start; }
.app-layout:not(.fg-export-capture) #generate-page .rc-alt-code { margin: 0; font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: normal; overflow-wrap: anywhere; }
.app-layout:not(.fg-export-capture) #generate-page .rc-copy-alt-btn { min-width: 36px !important; min-height: 36px !important; width: 36px !important; height: 36px !important; }
.app-layout:not(.fg-export-capture) #generate-page :is(.rc-section, .rc-breakdown-item, .rc-tip-card, .rc-dot-list, .rc-list-item, .rc-validation-cta) { padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.app-layout:not(.fg-export-capture) #generate-page .rc-section { margin: 16px 0 !important; }
.app-layout:not(.fg-export-capture) #generate-page .rc-section-title { margin: 0 0 8px; color: var(--da-muted); font: 600 12px/1.5 var(--font-body); text-transform: none; letter-spacing: 0; }
.app-layout:not(.fg-export-capture) #generate-page :is(.rc-explanation, .rc-list, .rc-tip-text, .rc-breakdown-meaning) { color: var(--da-ink); font: 14px/1.6 var(--font-body); }
.app-layout:not(.fg-export-capture) #generate-page .rc-validation-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.app-layout:not(.fg-export-capture) #generate-page .rc-validation-cta-text { color: var(--da-muted); font: 12px/1.5 var(--font-body); }
.app-layout:not(.fg-export-capture) #generate-page .rc-validation-footnote { text-align: left; margin-top: 6px; }
.app-layout:not(.fg-export-capture) #generate-page .fg-workflow-actions { padding: 0; margin: 8px 0 16px; border: 0; gap: 6px; }
.app-layout:not(.fg-export-capture) #generate-page .fg-workflow-actions > span { flex: 0 0 auto; margin-right: 4px; font-weight: 500; }
.app-layout:not(.fg-export-capture) #generate-page .fg-workflow-actions .btn { min-height: 32px; padding: 4px 8px; border: 0; background: transparent; font: 500 12px/1.5 var(--font-body); }
.app-layout #generate-page .fg-result-storage { margin-top: 16px; border-top: 1px solid var(--da-line); padding-top: 12px; }
.app-layout #generate-page .fg-result-storage > summary { color: var(--da-green); font: 600 13px/1.5 var(--font-body); cursor: pointer; min-height: 32px; }
.app-layout:not(.fg-export-capture) #generate-page .fg-result-storage .rc-actions-header { display: none; }
.app-layout:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding-top: 12px !important; }
.app-layout:not(.fg-export-capture) #generate-page .fg-result-storage .collection-combo-box { grid-column: 1; }
.app-layout:not(.fg-export-capture) #generate-page .fg-result-storage .save-btn { grid-column: 2; width: auto; min-height: 40px; padding: 8px 12px; letter-spacing: 0; text-transform: none; font: 600 13px/1.5 var(--font-body); }
.app-layout:not(.fg-export-capture) #generate-page .fg-result-storage .action-row:first-of-type { grid-column: 1 / -1; }
.app-layout:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions-menu-trigger { min-height: 36px; width: auto; padding: 6px 12px; font-size: 13px; letter-spacing: 0; text-transform: none; }
.fg-export-capture #generate-page .fg-workflow-actions { display: none !important; }
@media (max-width: 900px) {
  .app-layout #generate-page .tool-panel.active { grid-template-columns: 1fr; gap: 20px; }
  .app-layout #generate-page .fg-output-pane { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--da-line); }
  .app-layout #generate-page .fg-workspace-heading h1 { font-size: 20px; }
  .app-layout #generate-page .form-group textarea { min-height: 132px; }
  .app-layout #generate-page .fg-editor-submit .btn { min-height: 44px; width: 100%; }
  .app-layout:not(.fg-export-capture) #generate-page .fg-workflow-actions .btn { min-height: 44px; }
  .app-layout:not(.fg-export-capture) #generate-page .rc-copy-alt-btn { min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; }
}
@media (prefers-reduced-motion: reduce) { .fg-loading-mark { animation: none; } }
/* Resolve legacy card gaps and brand display only in the app workspace. */
.app-layout:not(.fg-export-capture) #generate-page .rc-title-row { display: none !important; }
.app-layout:not(.fg-export-capture) #generate-page .result-content { display: block !important; gap: 0 !important; }
.app-layout:not(.fg-export-capture) #generate-page .rc-head-main { display: block; gap: 0; }
.app-layout #generate-page .fg-example-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.app-layout #generate-page .fg-example-chips .starter-card { flex: 0 0 auto; }
.app-layout #generate-page .fg-editor-options .fg-preferences-panel { flex: 0 1 auto; }
.app-layout #generate-page .fg-preferences-details > summary { display: list-item; list-style-position: inside; white-space: nowrap; min-height: 40px; padding: 8px 12px; border: 1px solid var(--da-line-strong); border-radius: var(--radius-control); background: var(--da-surface); color: var(--da-ink); font: 500 13px/1.6 var(--font-body); }
.app-layout #generate-page .fg-preferences-details[open] > summary { padding: 0; border: 0; background: transparent; }
.app-layout #generate-page .fg-editor-options:has(.fg-preferences-details[open]) .fg-preferences-panel { flex-basis: 100%; }

/* Keep everyday result actions ahead of prose, with full content in export capture. */
.app-layout:not(.fg-export-capture) #generate-page .fg-result-storage { margin: 0 0 8px; border: 0; padding: 0; }
.app-layout:not(.fg-export-capture) #generate-page .fg-result-storage > summary { min-height: 32px; padding: 4px 0; }
.app-layout:not(.fg-export-capture) #generate-page .fg-result-how { margin: 12px 0; }
.app-layout:not(.fg-export-capture) #generate-page .fg-result-how > summary { cursor: pointer; min-height: 32px; color: var(--da-muted); font: 600 13px/1.5 var(--font-body); padding: 6px 0; }
.app-layout:not(.fg-export-capture) #generate-page .rc-section--verification { margin: 8px 0 12px !important; }
.app-layout:not(.fg-export-capture) #generate-page .rc-section--verification > .rc-section-title { display: none; }
.app-layout:not(.fg-export-capture) #generate-page .rc-validation-cta-text { max-width: 34ch; }
.app-layout:not(.fg-export-capture) #generate-page .fg-workflow-actions { margin: 0 0 4px; }
.app-layout:not(.fg-export-capture) #generate-page .fg-workflow-actions .btn { width: auto !important; flex: 0 1 auto; }
.fg-export-capture #generate-page .fg-result-storage, .fg-export-capture #generate-page .fg-result-how > summary { display: none !important; }
@media (max-width: 900px) {
  .app-layout:not(.fg-export-capture) #generate-page .fg-result-storage > summary { min-height: 44px; padding: 10px 0; }
  .app-layout:not(.fg-export-capture) #generate-page .fg-workflow-actions { flex-direction: row; gap: 4px; }
  .app-layout:not(.fg-export-capture) #generate-page .fg-workflow-actions > span { flex-basis: 100%; }
  .app-layout:not(.fg-export-capture) #generate-page .fg-workflow-actions .btn { min-height: 44px; padding: 8px 10px; }
}
.app-layout:not(.fg-export-capture) #generate-page .rc-validation-cta { flex-direction: row !important; text-align: left !important; min-height: 36px; }
.app-layout:not(.fg-export-capture) #generate-page .rc-validation-cta-text { width: auto !important; max-width: none !important; text-align: left !important; flex: 1 1 auto; }
.app-layout:not(.fg-export-capture) #generate-page .run-validation-btn { flex: 0 0 auto; width: auto !important; min-height: 36px; }
@media (max-width: 900px) { .app-layout:not(.fg-export-capture) #generate-page .run-validation-btn { min-height: 44px; } }
/* All examples remain visible; no clipped horizontal choices at short viewports. */
.app-layout #generate-page .fg-example-chips { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }


/* partials/data-tools.css */
/* Local data workflows use the same controls, surfaces and review hierarchy. */
.fgdata-page, .fgbank-page { max-width: 1040px; margin: 0 auto; display: grid; gap: 20px; color: var(--text-primary); }
.fgdata-heading, .fgbank-heading { max-width: 72ch; }
.fgdata-eyebrow, .fgbank-eyebrow { color: var(--da-green); font: 600 12px/1.4 var(--font-body); margin: 0 0 8px; }
.fgdata-heading h1, .fgbank-heading h1 { font: 600 30px/1.2 var(--font-display); letter-spacing: -.03em; margin: 0 0 8px; }
.fgdata-heading > p:last-child, .fgbank-heading > p:last-child { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0; }
.fgdata-card, .fgbank-card { min-width: 0; padding: 20px; border: 1px solid var(--border-light); border-radius: var(--radius-surface); background: var(--bg-surface); display: grid; gap: 12px; }
.fgdata-card h2, .fgbank-card h2 { margin: 0; font: 600 19px/1.3 var(--font-display); }
.fgdata-card > p, .fgbank-card > p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.fgdata-input-grid, .fgbank-input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fgdata-input-grid > div, .fgbank-input-grid > div { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
:is(.fgdata-page, .fgbank-page) label { font-size: 13px; font-weight: 600; line-height: 1.5; }
:is(.fgdata-page, .fgbank-page) :is(input:not([type=checkbox]), textarea, select) { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg-surface); color: var(--text-primary); font: 14px/1.5 var(--font-body); }
:is(.fgdata-page, .fgbank-page) textarea { resize: vertical; min-height: 120px; font-family: var(--tm-font-mono); font-size: 13px; }
:is(.fgdata-page, .fgbank-page) input[type=file] { background: var(--bg-surface-2); }
:is(.fgdata-page, .fgbank-page) input::file-selector-button { border: 0; border-radius: var(--radius-control); padding: 6px 10px; margin-right: 12px; background: var(--bg-surface); color: var(--text-primary); font: 600 13px var(--font-body); cursor: pointer; }
:is(.fgdata-page, .fgbank-page) button { min-height: 44px; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg-surface); color: var(--text-primary); font: 600 13px/1.45 var(--font-body); cursor: pointer; }
:is(.fgdata-page, .fgbank-page) button:hover:not(:disabled) { background: var(--bg-surface-2); border-color: var(--da-green); }
:is(.fgdata-page, .fgbank-page) button:disabled, :is(.fgdata-page, .fgbank-page) fieldset:disabled { opacity: .55; cursor: not-allowed; }
#fgdata-apply, #fgdata-export, #fgbank-export, #fgbank-extract { background: var(--accent-primary); color: var(--text-inverse); border-color: var(--accent-primary); }
#fgdata-apply:hover, #fgdata-export:hover, #fgbank-export:hover, #fgbank-extract:hover { background: var(--accent-primary-dark); color: var(--text-inverse); }
.fgdata-controls, .fgbank-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.fgdata-controls > select, .fgdata-controls > .tm-select-shell, .fgbank-controls > select, .fgbank-controls > .tm-select-shell { max-width: 240px; }
.fgdata-check, .fgbank-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
:is(.fgdata-page, .fgbank-page) input[type=checkbox] { accent-color: var(--da-green); width: 18px; height: 18px; }
.fgdata-actions, .fgbank-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fgdata-replace, .fgbank-mapping { display: grid; grid-template-columns: auto minmax(100px, 1fr) auto minmax(100px, 1fr); align-items: center; gap: 8px 12px; }
.fgdata-replace button { grid-column: 1 / -1; justify-self: start; }
:is(.fgdata-page, .fgbank-page) fieldset { padding: 12px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-compact); min-width: 0; }
:is(.fgdata-page, .fgbank-page) legend { padding: 0 4px; font-size: 13px; font-weight: 600; }
.fgdata-columns, .fgbank-columns { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.fgdata-columns label, .fgbank-columns label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.fgdata-hint, .fgbank-hint { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }
.fgdata-status, .fgbank-status { font-size: 13px; line-height: 1.55; }
.fgdata-proposal, .fgbank-proposal { padding: 16px; border: 1px solid var(--da-line-strong); border-radius: var(--radius-compact); background: var(--da-green-soft); display: grid; gap: 12px; }
.fgdata-table-wrap, .fgbank-table-wrap { overflow: auto; border: 1px solid var(--border-light); border-radius: var(--radius-compact); max-height: 420px; }
:is(.fgdata-page, .fgbank-page) table { border-collapse: collapse; width: 100%; font-size: 13px; text-align: left; }
:is(.fgdata-page, .fgbank-page) :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--border-light); white-space: pre-wrap; overflow-wrap: anywhere; min-width: 100px; max-width: 320px; vertical-align: top; }
:is(.fgdata-page, .fgbank-page) th { background: var(--bg-surface-2); font-weight: 600; }
.fgdata-sr-only, .fgbank-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:is(.fgdata-page, .fgbank-page) dialog { margin: auto; width: min(440px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--border-strong); border-radius: var(--radius-surface); background: var(--bg-surface); color: var(--text-primary); }
:is(.fgdata-page, .fgbank-page) dialog::backdrop { background: rgb(10 20 15 / .45); }
:is(.fgdata-page, .fgbank-page) dialog form { display: grid; gap: 12px; }
@media (max-width: 640px) { .fgdata-input-grid, .fgbank-input-grid { grid-template-columns: 1fr; gap: 16px; } .fgdata-card, .fgbank-card { padding: 16px; } .fgdata-heading h1, .fgbank-heading h1 { font-size: 26px; } .fgdata-replace, .fgbank-mapping { grid-template-columns: 1fr; } .fgdata-replace button { width: 100%; } .fgdata-actions button, .fgbank-actions button { flex: 1 1 auto; } }

.fgstatement-warning { padding: 12px 16px; border: 1px solid var(--da-line-strong); border-radius: var(--radius-compact); background: var(--da-warm); color: var(--text-primary); font-size: 13px; line-height: 1.6; }
.fgstatement-beta { display: inline-flex; vertical-align: middle; margin-left: 8px; padding: 3px 8px; border: 1px solid var(--da-line-strong); border-radius: var(--radius-compact); background: var(--bg-surface-2); color: var(--text-secondary); font: 600 11px/1.4 var(--font-body, sans-serif); letter-spacing: .02em; }
.fgstatement-warning label { display: flex; align-items: flex-start; gap: 8px; }
.fgstatement-warning input[type=checkbox] { flex: 0 0 auto; margin-top: 2px; }
.fgstatement-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; }
.fgstatement-section-head > div { flex: 1 1 360px; }
.fgstatement-section-head p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.fgstatement-section-head button { flex: 0 1 auto; }
.fgstatement-balance-candidates { display: flex; flex-wrap: wrap; gap: 8px; }
.fgstatement-balance-candidates:empty { display: none; }
.fgstatement-reconciliation { padding: 12px 16px; background: var(--bg-surface-2); border-radius: var(--radius-compact); font-size: 14px; font-weight: 600; }
#fgstatement-read, #fgstatement-export { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-inverse); }
#fgstatement-read:hover:not(:disabled), #fgstatement-export:hover:not(:disabled) { background: var(--accent-primary-dark); color: var(--text-inverse); }
.fgstatement-page .fgdata-table-wrap { max-height: 560px; }
.fgstatement-page td:nth-child(2) { min-width: 240px; }
.fgstatement-page table input:not([type=checkbox]) { font-size: 13px; min-width: 110px; }
/* Size the ISO field by its text plus padding, rather than the squeezed table column.
   The wrapper keeps this width available through horizontal scrolling on phones. */
.fgstatement-page #fgstatement-table input[data-field="date"] {
  min-width: calc(14ch + 26px);
  width: calc(14ch + 26px);
  font: 13px/1.5 var(--tm-font-mono);
  font-variant-numeric: tabular-nums;
}
.fgstatement-page #fgstatement-table :is(th, td):first-child { min-width: 160px; }
.fgstatement-page table label { display: flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; }
.fgstatement-page table summary { cursor: pointer; font-size: 12px; line-height: 1.5; min-height: 44px; display: flex; align-items: center; }
.fgstatement-page table pre { margin-top: 8px; max-width: 320px; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--tm-font-mono); }
.fgstatement-pagination { justify-content: space-between; }
@media (max-width: 640px) { .fgstatement-section-head button { width: 100%; } }

/* Vision adds explicit consent within the existing compact intake surface. */
.fgstatement-dropzone { display: grid; gap: 8px; padding: 16px; border: 1px dashed var(--da-line-strong); border-radius: var(--radius-compact); background: var(--bg-surface-2); min-width: 0; }
.fgstatement-dropzone > :is(label, p, input) { margin: 0; }
.fgstatement-dropzone.is-dragging, .fgstatement-dropzone:focus-within { border-color: var(--accent-primary); outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.fgstatement-dropzone input[type=file] { width: 100%; min-width: 0; max-width: 100%; }
.fgstatement-privacy-options { margin: 0; }
.fgstatement-privacy-options summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; font-size: 13px; font-weight: 600; }
.fgstatement-privacy-options label { display: flex; align-items: flex-start; gap: 8px; }
.fgstatement-privacy-options input[type=checkbox] { flex: 0 0 auto; margin-top: 2px; }
.fgstatement-privacy-options[open] > :not(summary) { margin-top: 12px; }
.fgstatement-vision-consent, .fgstatement-balance-review { display: grid; gap: 12px; min-width: 0; }
.fgstatement-vision-consent > p, .fgstatement-balance-review > p { margin: 0; }
.fgstatement-vision-consent label, .fgstatement-balance-review label { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-block: 8px; }
.fgstatement-vision-consent input[type=checkbox], .fgstatement-balance-review input[type=checkbox] { flex: 0 0 auto; margin-top: 2px; }
#fgstatement-vision-warnings { white-space: pre-wrap; overflow-wrap: anywhere; }
#fgstatement-selected-file { overflow-wrap: anywhere; }
#fgstatement-balance-evidence { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--tm-font-mono); }
#fgstatement-vision-run { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--text-inverse); }
.fgstatement-page, .fgstatement-workbench, .fgstatement-setup-column, .fgstatement-review-column { min-width: 0; }

.fgstatement-page[data-statement-mode=vision] .fgdata-input-grid > div:has(#fgstatement-date-format),
.fgstatement-page[data-statement-mode=vision] .fgdata-input-grid > div:has(#fgstatement-number-format),
.fgstatement-page[data-statement-mode=vision] .fgdata-input-grid > div:has(#fgstatement-amount-mode) { display: none; }


/* partials/workspace-concept.css */
/* Approved concept material, applied to real app workflows rather than preview-only chrome. */
body.app-layout.workspace-concept {
  --fg-paper: #f6f7f4; --fg-surface: #fff; --fg-surface-soft: #edf1eb;
  --fg-ink: #17231d; --fg-muted: #647169; --fg-line: #dce3dc; --fg-line-strong: #c6d1c8;
  --fg-accent: #245d43; --fg-accent-deep: #163d2c; --fg-selected: #d9e8de;
  --fg-radius-panel: 17px; --fg-radius-control: 12px;
  --fg-shadow: 0 18px 50px rgba(25,53,38,.08), 0 2px 8px rgba(25,53,38,.04);
  --fg-error: #a34236; --fg-error-surface: #fbefeb;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --da-paper: var(--fg-paper); --da-surface: var(--fg-surface); --da-surface-soft: var(--fg-surface-soft);
  --da-ink: var(--fg-ink); --da-muted: var(--fg-muted); --da-line: var(--fg-line); --da-line-strong: var(--fg-line-strong);
  --da-green: var(--fg-accent); --da-green-dark: var(--fg-accent-deep); --da-green-soft: var(--fg-selected);
  --bg-app: var(--fg-paper); --bg-page: var(--fg-paper); --bg-shell: var(--fg-paper);
  --bg-surface: var(--fg-surface); --bg-surface-muted: var(--fg-surface-soft);
  --text-primary: var(--fg-ink); --text-secondary: var(--fg-muted); --text-tertiary: var(--fg-muted);
  --border-light: var(--fg-line); --border-strong: var(--fg-line-strong);
  --radius-control: var(--fg-radius-control); --radius-compact: var(--fg-radius-control); --radius-surface: var(--fg-radius-panel);
  background: var(--fg-paper); color: var(--fg-ink); font-family: var(--font-body);
}
html.dark-mode body.app-layout.workspace-concept {
  --fg-paper: #111914; --fg-surface: #1b2720; --fg-surface-soft: #24342a;
  --fg-ink: #edf4ee; --fg-muted: #b0c1b5; --fg-line: #374b3e; --fg-line-strong: #526b5a;
  --fg-accent: #a1d6b1; --fg-accent-deep: #c8ecd2; --fg-selected: #2b4835;
  --fg-shadow: 0 18px 50px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
  --fg-error: #f0b0a4; --fg-error-surface: #3a2926;
}
body.app-layout.workspace-concept[data-workspace="finance"] {
  --fg-paper: #f1f6fd; --fg-surface: #fff; --fg-surface-soft: #eaf2fc;
  --fg-ink: #16253d; --fg-muted: #586b85; --fg-line: #d6e2f1; --fg-line-strong: #b9cce3;
  --fg-accent: #2463bc; --fg-accent-deep: #174584; --fg-selected: #e1edff;
  --fg-shadow: 0 18px 50px rgba(38,43,88,.09), 0 2px 8px rgba(38,43,88,.04);
}
html.dark-mode body.app-layout.workspace-concept[data-workspace="finance"] {
  --fg-paper: #111c2b; --fg-surface: #19283b; --fg-surface-soft: #223651;
  --fg-ink: #eef5ff; --fg-muted: #b3c6df; --fg-line: #354b65; --fg-line-strong: #506b8c;
  --fg-accent: #a3c7ff; --fg-accent-deep: #c7dcff; --fg-selected: #294972;
}
body.app-layout.workspace-concept [hidden] { display: none !important; }
body.app-layout.workspace-shell-v2.workspace-concept .app-sidebar { width: 252px; padding: 20px 16px 12px; background: var(--fg-paper); border-right: 1px solid var(--fg-line); }
body.app-layout.workspace-shell-v2.workspace-concept .fg-app-brand { margin: 0 6px 22px; min-height: 32px; font-size: 15px; gap: 10px; }
body.app-layout.workspace-shell-v2.workspace-concept .fg-workspace-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 0 0 18px; background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: var(--fg-radius-control); }
body.app-layout.workspace-concept .fg-workspace-switch a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; border-radius: var(--fg-radius-control); color: var(--fg-muted); font: 600 12px/1.3 var(--font-body); text-decoration: none; }
body.app-layout.workspace-concept .fg-workspace-switch a[aria-current] { color: var(--fg-accent-deep); background: var(--fg-selected); }
body.app-layout.workspace-concept .fg-workspace-switch a:hover { color: var(--fg-ink); }
body.app-layout.workspace-concept .fg-workspace-switch svg { flex: 0 0 18px; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-new-btn { margin: 0 0 16px; justify-content: center; min-height: 44px; height: 44px; border-radius: var(--fg-radius-control); background: #245d43; color: #fff; font: 600 14px/1.4 var(--font-body); box-shadow: 0 3px 8px rgba(25,53,38,.08); }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-nav { scrollbar-gutter: auto; }
body.app-layout.workspace-shell-v2.workspace-concept .fg-workspace-nav-group { display: grid; gap: 3px; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-nav-item { height: 40px; min-height: 40px; font: 500 13px/1.4 var(--font-body); gap: 11px; padding: 0 12px; border-radius: var(--fg-radius-control); color: var(--fg-muted); }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-nav-item.active { background: var(--fg-selected); color: var(--fg-accent-deep); font-weight: 650; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-nav-item:hover { background: var(--fg-surface-soft); color: var(--fg-ink); }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-nav-label { font: 650 11px/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 14px 12px 6px; color: var(--fg-muted); }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-user { padding-top: 10px; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-user-btn { font-size: 13px; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-user-dropdown { background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: var(--fg-radius-panel); box-shadow: var(--fg-shadow); }
body.app-layout.workspace-shell-v2.workspace-concept .app-content { padding: 24px 28px 40px; }
body.app-layout.workspace-concept .app-canvas-shell { background: var(--fg-paper); }
body.app-layout.workspace-concept #generate-page > .container { gap: 24px; }
body.app-layout.workspace-concept #generate-page .fg-workspace-heading { display: flex; align-items: center; gap: 16px; padding: 0; margin: 0; }
body.app-layout.workspace-concept #generate-page .fg-workspace-heading h1 { font: 650 24px/1.25 var(--font-body); letter-spacing: -.035em; margin: 0 0 6px; }
body.app-layout.workspace-concept #generate-page .fg-workspace-heading p { display: block; font: 14px/1.5 var(--font-body); color: var(--fg-muted); margin: 0; }
body.app-layout.workspace-concept .fg-heading-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; color: var(--fg-accent); background: var(--fg-selected); border-radius: var(--fg-radius-control); }
body.app-layout.workspace-concept #generate-page .tool-panel.active { grid-template-columns: minmax(0, .47fr) minmax(0, .53fr); gap: 24px; align-items: stretch; }
body.app-layout.workspace-concept #generate-page :is(.fg-editor-pane, .fg-output-pane) { min-width: 0; padding: 0; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-panel); background: var(--fg-surface); box-shadow: var(--fg-shadow); }
body.app-layout.workspace-concept #generate-page :is(.fg-input-heading, .fg-output-heading) { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 24px; margin: 0; border-bottom: 1px solid var(--fg-line); }
body.app-layout.workspace-concept #generate-page :is(.fg-input-heading, .fg-output-heading) h2 { margin: 0; font: 650 15px/1.4 var(--font-body); color: var(--fg-ink); }
body.app-layout.workspace-concept #generate-page .tool-tabs.fg-task-tabs { display: inline-flex; align-items: center; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-control); background: var(--fg-surface-soft); }
body.app-layout.workspace-concept #generate-page .fg-task-tabs .tool-tab { flex: 0 1 auto; min-height: 44px; padding: 10px 10px; border: 0; border-radius: var(--fg-radius-control); font: 600 13px/1.4 var(--font-body); color: var(--fg-muted); background: transparent; white-space: nowrap; text-transform: none; letter-spacing: 0; }
body.app-layout.workspace-concept #generate-page .fg-task-tabs .tool-tab.active { color: var(--fg-accent-deep); background: var(--fg-surface); box-shadow: 0 1px 4px rgba(25,53,38,.10); }
body.app-layout.workspace-concept #generate-page .fg-editor-form { padding: 20px 24px 24px; gap: 10px; }
body.app-layout.workspace-concept #generate-page .form-group { gap: 6px; }
body.app-layout.workspace-concept #generate-page .form-group label { font: 600 13px/1.5 var(--font-body); color: var(--fg-ink); }
body.app-layout.workspace-concept #generate-page .fg-editor-options { align-items: center; gap: 10px; }
body.app-layout.workspace-concept #generate-page .fg-inline-platform { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; flex: 1 1 160px; max-width: none; }
body.app-layout.workspace-concept #generate-page .fg-editor-options :is(select, .tm-select-trigger) { min-height: 44px; height: 44px; border-radius: var(--fg-radius-control); font-size: 13px; }
body.app-layout.workspace-concept #generate-page .fg-editor-options .tm-select-trigger { padding-inline: 12px 32px; }
body.app-layout.workspace-concept #generate-page .fg-preferences-details > summary { min-height: 44px; padding: 11px 12px; font-size: 13px; border-radius: var(--fg-radius-control); }
body.app-layout.workspace-concept #generate-page .fg-preferences-details[open] { background: var(--fg-surface-soft); border-radius: var(--fg-radius-control); }
body.app-layout.workspace-concept #generate-page .fg-preferences-details[open] > summary { padding: 0; min-height: 24px; }
body.app-layout.workspace-concept #generate-page .form-group textarea { min-height: 108px; height: 108px; padding: 12px 14px; color: var(--fg-ink); background: var(--fg-paper); border: 1px solid var(--fg-line-strong); border-radius: var(--fg-radius-control); font: 14px/1.55 var(--font-body); }
body.app-layout.workspace-concept #generate-page .fg-example-chips { margin: 0; gap: 5px; flex-wrap: wrap; overflow: visible; align-items: center; }
body.app-layout.workspace-concept #generate-page .fg-example-chips > span { font-size: 12px; }
body.app-layout.workspace-concept #generate-page .fg-example-chips .starter-card { min-height: 30px; padding: 5px 7px; border-radius: var(--fg-radius-control); color: var(--fg-muted); background: var(--fg-surface-soft); border: 1px solid transparent; font: 500 12px/1.4 var(--font-body); }
body.app-layout.workspace-concept #generate-page .fg-example-chips .starter-card:hover { color: var(--fg-accent-deep); border-color: var(--fg-line-strong); background: var(--fg-selected); }
body.app-layout.workspace-concept #generate-page .fg-context > summary { min-height: 30px; padding: 4px 0; font: 500 13px/1.5 var(--font-body); }
body.app-layout.workspace-concept #generate-page .fg-context textarea { height: 80px; min-height: 80px; }
body.app-layout.workspace-concept #generate-page .fg-editor-submit .btn { min-height: 44px; width: 100%; border-radius: var(--fg-radius-control); padding: 10px 16px; color: #fff; background: #245d43; font: 650 14px/1.4 var(--font-body); }
body.app-layout.workspace-concept #generate-page .fg-editor-submit .btn:hover { background: #163d2c; }
body.app-layout.workspace-concept #generate-page .fg-form-help { margin: 0; font: 11px/1.5 var(--font-body); }
body.app-layout.workspace-concept #generate-page .fg-output-pane { display: flex; flex-direction: column; }
body.app-layout.workspace-concept #generate-page .fg-output-status { font-size: 12px; }
body.app-layout.workspace-concept #generate-page .result-placeholder { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 280px; padding: 32px 24px; text-align: center; }
body.app-layout.workspace-concept #generate-page .result-placeholder p { font: 600 16px/1.5 var(--font-body); margin: 16px 0 8px; }
body.app-layout.workspace-concept #generate-page .result-placeholder > span { max-width: 32ch; font: 14px/1.65 var(--font-body); }
body.app-layout.workspace-concept .fg-empty-result-icon { display: grid; place-items: center; height: 60px; width: 60px; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-panel); color: var(--fg-accent); background: var(--fg-surface-soft); }
body.app-layout.workspace-concept #generate-page .result-card { padding: 20px 24px 24px; }
body.app-layout.workspace-concept #generate-page .fg-result-loading { min-height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; font-size: 14px; }
/* Existing result handlers and data attributes are retained; only the surrounding app chrome changes. */
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-alt-formula { padding: 16px !important; background: var(--fg-paper) !important; border-radius: var(--fg-radius-control) !important; margin-bottom: 12px !important; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-alt-code { font-size: 15px; line-height: 1.6; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-copy-alt-btn { min-width: 44px !important; min-height: 44px !important; width: 44px !important; height: 44px !important; background: var(--fg-surface) !important; border: 1px solid var(--fg-line) !important; border-radius: var(--fg-radius-control) !important; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage { margin: 0 0 14px; padding: 0; border: 0; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage > summary { display: none; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 0 !important; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions > .action-row:not(.rc-actions-footnote-row) { grid-column: 3; order: 3; width: auto; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .collection-combo-box { grid-column: 1; order: 1; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .save-btn { grid-column: 2; order: 2; min-height: 44px; font-size: 13px; padding: 8px 12px; border-radius: var(--fg-radius-control); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .library-collection-input { min-height: 44px; border-radius: var(--fg-radius-control); background: var(--fg-surface); font: 13px/1.4 var(--font-body); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .result-actions-menu--full { width: auto; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .result-actions-menu-trigger { min-height: 44px; width: auto; font-size: 13px; padding: 10px 12px; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-control); background: var(--fg-surface-soft); color: var(--fg-ink); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-actions-footnote-row { grid-column: 1 / -1; order: 4; margin: 0; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-actions-footnote { font: 12px/1.5 var(--font-body); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-actions-footnote:empty { display: none; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-save-feedback { grid-column: 1 / -1; order: 5; width: 100%; padding: 10px 12px; margin: 0; color: var(--fg-accent-deep); background: var(--fg-selected); border-radius: var(--fg-radius-control); font: 13px/1.5 var(--font-body); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-save-feedback[data-state="error"] { color: var(--fg-error); background: var(--fg-error-surface); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-save-feedback a { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-section--verification { padding: 12px 14px !important; border: 1px solid var(--fg-line) !important; border-radius: var(--fg-radius-control) !important; background: var(--fg-surface-soft) !important; margin: 0 0 16px !important; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-validation-cta { gap: 12px; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-validation-cta-text { font-size: 13px; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .run-validation-btn { min-height: 44px; padding: 8px 12px; border-radius: var(--fg-radius-control); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-validation-footnote { font-size: 11px; margin-top: 4px; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-section-title { font: 650 13px/1.5 var(--font-body); color: var(--fg-ink); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-explanation { font: 14px/1.65 var(--font-body); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-workflow-actions { gap: 6px; padding: 12px 0 0; margin: 0; border-top: 1px solid var(--fg-line); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-workflow-actions > span { flex-basis: 100%; font-size: 12px; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-workflow-actions .btn { min-height: 38px; padding: 8px 10px; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-control); font-size: 12px; color: var(--fg-ink); background: var(--fg-surface); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-how { padding: 10px 12px; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-control); background: var(--fg-paper); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-how > summary { font-size: 13px; padding: 0; min-height: 24px; }
@media (min-width: 901px) {
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-concept .app-sidebar,
  body.app-layout.workspace-shell-v2.workspace-concept .app-sidebar.collapsed { width: 76px; padding: 20px 16px 12px; }
  html.sidebar-collapsed body.app-layout.workspace-concept .fg-workspace-switch,
  body.app-layout.workspace-concept .app-sidebar.collapsed .fg-workspace-switch { grid-template-columns: 1fr; border: 0; padding: 0; gap: 4px; background: transparent; }
  html.sidebar-collapsed body.app-layout.workspace-concept .fg-workspace-switch a,
  body.app-layout.workspace-concept .app-sidebar.collapsed .fg-workspace-switch a { width: 44px; padding: 0; }
  html.sidebar-collapsed body.app-layout.workspace-concept .fg-workspace-switch span,
  body.app-layout.workspace-concept .app-sidebar.collapsed .fg-workspace-switch span { display: none; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  body.app-layout.workspace-concept #generate-page .fg-input-heading { padding-inline: 16px; gap: 8px; }
  body.app-layout.workspace-concept #generate-page .fg-editor-form { padding-inline: 16px; }
  body.app-layout.workspace-concept #generate-page .fg-task-tabs .tool-tab { padding-inline: 7px; }
}
@media (max-width: 900px) {
  body.app-layout.workspace-shell-v2.workspace-concept .app-sidebar { width: var(--mobile-drawer-width); padding: 16px 16px calc(12px + env(safe-area-inset-bottom)); }
  body.app-layout.workspace-shell-v2.workspace-concept .sidebar-nav-item { min-height: 44px; height: 44px; }
  body.app-layout.workspace-shell-v2.workspace-concept .app-content { padding: 12px 16px 32px; }
  body.app-layout.workspace-concept #generate-page > .container { gap: 20px; }
  body.app-layout.workspace-concept #generate-page .fg-workspace-heading { gap: 12px; }
  body.app-layout.workspace-concept #generate-page .fg-workspace-heading h1 { font-size: 22px; }
  body.app-layout.workspace-concept #generate-page .fg-workspace-heading p { font-size: 13px; }
  body.app-layout.workspace-concept .fg-heading-icon { width: 44px; height: 44px; flex-basis: 44px; }
  body.app-layout.workspace-concept #generate-page .tool-panel.active { grid-template-columns: 1fr; gap: 20px; }
  body.app-layout.workspace-concept #generate-page :is(.fg-input-heading, .fg-output-heading) { padding: 10px 16px; min-height: 64px; }
  body.app-layout.workspace-concept #generate-page .fg-task-tabs .tool-tab { min-height: 44px; padding-inline: 8px; }
  body.app-layout.workspace-concept #generate-page .fg-editor-form, body.app-layout.workspace-concept #generate-page .result-card { padding: 16px; }
  body.app-layout.workspace-concept #generate-page .fg-inline-platform { flex-basis: 150px; gap: 8px; }
  body.app-layout.workspace-concept #generate-page .fg-inline-platform label { font-size: 12px; }
  body.app-layout.workspace-concept #generate-page .fg-preferences-details > summary { padding-inline: 9px; }
  body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-workflow-actions .btn,
  body.app-layout.workspace-concept #generate-page .fg-example-chips .starter-card { min-height: 44px; }
  body.app-layout.workspace-concept #generate-page .result-placeholder { min-height: 240px; }
  body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions { grid-template-columns: minmax(0, 1fr) auto; }
  body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .collection-combo-box { grid-column: 1 / -1; }
  body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .save-btn { grid-column: 1; width: auto; }
  body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions > .action-row:not(.rc-actions-footnote-row) { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { body.app-layout.workspace-concept * { scroll-behavior: auto; } }
/* Contextual navigation keeps daily tasks and saved work visible in short viewports. */
body.app-layout.workspace-shell-v2.workspace-concept .fg-app-brand { margin-bottom: 16px; }
body.app-layout.workspace-shell-v2.workspace-concept .fg-workspace-switch { margin-bottom: 12px; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-new-btn { margin-bottom: 12px; }
body.app-layout.workspace-concept .fg-nav-disclosure > summary { min-height: 40px; display: flex; align-items: center; gap: 11px; padding: 8px 12px; font: 500 13px/1.4 var(--font-body); color: var(--fg-muted); cursor: pointer; border-radius: var(--fg-radius-control); list-style: none; }
body.app-layout.workspace-concept .fg-nav-disclosure > summary::-webkit-details-marker { display: none; }
body.app-layout.workspace-concept .fg-nav-disclosure > summary::after { content: '›'; margin-left: auto; font-size: 18px; transform: rotate(90deg); }
body.app-layout.workspace-concept .fg-nav-disclosure[open] > summary::after { transform: rotate(-90deg); }
body.app-layout.workspace-concept .fg-nav-disclosure > summary:hover { color: var(--fg-ink); background: var(--fg-surface-soft); }
body.app-layout.workspace-concept .fg-nav-disclosure > summary svg { flex: 0 0 18px; }
body.app-layout.workspace-concept .fg-nav-disclosure[open] { background: var(--fg-surface); border-radius: var(--fg-radius-control); }
body.app-layout.workspace-concept .fg-nav-disclosure > .sidebar-nav-item { padding-left: 24px; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .result-actions :is(button, summary, input),
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-workflow-actions .btn { font-family: var(--font-body) !important; letter-spacing: 0 !important; text-transform: none !important; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-collection { grid-column: 1; order: 1; min-width: 0; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-collection > summary { min-height: 44px; display: list-item; list-style-position: inside; padding: 12px 0; color: var(--fg-muted); cursor: pointer; font-size: 13px; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-collection[open] { grid-column: 1 / -1; order: 4; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-collection .collection-combo-box { width: 100%; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-collection .collection-combo-list { position: static !important; inset: auto !important; width: 100%; max-height: min(240px, 40vh); margin-top: 4px; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions { grid-template-columns: minmax(0, 1fr) auto auto; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .save-btn { grid-column: 2; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions > .action-row:not(.rc-actions-footnote-row) { grid-column: 3; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-section--explanation { margin: 0 0 16px !important; }
@media (min-width: 901px) {
  html.sidebar-collapsed body.app-layout.workspace-concept .fg-nav-disclosure > summary,
  body.app-layout.workspace-concept .app-sidebar.collapsed .fg-nav-disclosure > summary { width: 44px; padding: 0; justify-content: center; }
  html.sidebar-collapsed body.app-layout.workspace-concept .fg-nav-disclosure > summary span,
  body.app-layout.workspace-concept .app-sidebar.collapsed .fg-nav-disclosure > summary span,
  html.sidebar-collapsed body.app-layout.workspace-concept .fg-nav-disclosure > summary::after,
  body.app-layout.workspace-concept .app-sidebar.collapsed .fg-nav-disclosure > summary::after { display: none; }
  html.sidebar-collapsed body.app-layout.workspace-concept .fg-nav-disclosure > .sidebar-nav-item,
  body.app-layout.workspace-concept .app-sidebar.collapsed .fg-nav-disclosure > .sidebar-nav-item { padding: 0; }
}
@media (max-width: 900px) { body.app-layout.workspace-concept .fg-nav-disclosure > summary { min-height: 44px; } }
/* Main workbench leads with real tasks and retained work; usage stays secondary. */
body.app-layout.workspace-concept .fg-concept-dashboard { width: 100%; max-width: none; margin: 0; padding: 0; }
body.app-layout.workspace-concept .fg-concept-dashboard > .da-container { width: 100%; max-width: none; margin: 0; padding: 0; }
body.app-layout.workspace-concept .fg-concept-dashboard .da-workbench-stack { gap: 24px; }
body.app-layout.workspace-concept .fg-dashboard-heading { align-items: center; margin: 0; }
body.app-layout.workspace-concept .fg-dashboard-title { display: flex; align-items: center; gap: 16px; }
body.app-layout.workspace-concept .fg-dashboard-heading h1 { margin: 0 0 6px; font: 650 24px/1.25 var(--font-body); letter-spacing: -.035em; }
body.app-layout.workspace-concept .fg-dashboard-heading p { margin: 0; font: 14px/1.5 var(--font-body); color: var(--fg-muted); }
body.app-layout.workspace-concept .fg-dashboard-heading .da-button { flex: 0 0 auto; min-height: 44px; border-radius: var(--fg-radius-control); }
body.app-layout.workspace-concept .fg-dashboard-workspaces { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
body.app-layout.workspace-concept .fg-workspace-entry { padding: 24px; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-panel); background: var(--fg-surface); box-shadow: var(--fg-shadow); }
body.app-layout.workspace-concept .fg-entry-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
body.app-layout.workspace-concept .fg-entry-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--fg-radius-control); color: var(--fg-accent); background: var(--fg-selected); font: 650 18px/1 var(--font-body); }
body.app-layout.workspace-concept .fg-entry-header h2 { margin: 0; font: 650 18px/1.4 var(--font-body); letter-spacing: -.02em; }
body.app-layout.workspace-concept .fg-workspace-entry p { margin: 0 0 20px; max-width: 42ch; font: 14px/1.6 var(--font-body); color: var(--fg-muted); }
body.app-layout.workspace-concept .fg-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.app-layout.workspace-concept .fg-entry-actions .da-button { min-height: 44px; border-radius: var(--fg-radius-control); font: 600 13px/1.4 var(--font-body); }
body.app-layout.workspace-concept .fg-dashboard-work-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; }
body.app-layout.workspace-concept .fg-concept-dashboard :is(.da-recent-panel, .da-side-card, .fg-dashboard-more) { padding: 24px; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-panel); background: var(--fg-surface); box-shadow: var(--fg-shadow); }
body.app-layout.workspace-concept .fg-concept-dashboard .da-panel-heading { margin-bottom: 14px; align-items: center; }
body.app-layout.workspace-concept .fg-concept-dashboard .da-panel-heading h2 { margin: 0; font: 650 16px/1.4 var(--font-body); letter-spacing: -.02em; }
body.app-layout.workspace-concept .fg-concept-dashboard .da-side-card > p { font: 14px/1.6 var(--font-body); color: var(--fg-muted); }
body.app-layout.workspace-concept .fg-concept-dashboard .da-side-link { min-height: 44px; font: 500 14px/1.5 var(--font-body); }
body.app-layout.workspace-concept .fg-dashboard-more { padding-block: 10px !important; }
body.app-layout.workspace-concept .fg-dashboard-more > summary { display: list-item; list-style-position: inside; min-height: 44px; padding: 12px 0; color: var(--fg-ink); font: 600 14px/1.5 var(--font-body); cursor: pointer; }
body.app-layout.workspace-concept .fg-dashboard-more[open] > summary { margin-bottom: 12px; }
body.app-layout.workspace-concept .fg-dashboard-secondary { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
body.app-layout.workspace-concept .fg-account-activity { display: grid; gap: 16px; padding-bottom: 14px; }
body.app-layout.workspace-concept .fg-account-activity > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font: 13px/1.5 var(--font-body); }
body.app-layout.workspace-concept .fg-account-activity small { grid-column: 1 / -1; color: var(--fg-muted); font-size: 12px; }
body.app-layout.workspace-concept .fg-dashboard-help { margin: 14px 0; color: var(--fg-muted); font: 13px/1.6 var(--font-body); }
body.app-layout.workspace-concept .fg-dashboard-more .da-referral-card h2 { font: 650 16px/1.4 var(--font-body); }
body.app-layout.workspace-concept .fg-dashboard-more .da-referral-card p { font: 13px/1.6 var(--font-body); }
@media (max-width: 900px) {
  body.app-layout.workspace-concept .fg-dashboard-heading { align-items: flex-start; gap: 14px; }
  body.app-layout.workspace-concept .fg-dashboard-heading h1 { font-size: 22px; }
  body.app-layout.workspace-concept .fg-dashboard-title { gap: 12px; }
  body.app-layout.workspace-concept :is(.fg-dashboard-workspaces, .fg-dashboard-work-grid, .fg-dashboard-secondary) { grid-template-columns: 1fr; gap: 20px; }
  body.app-layout.workspace-concept .fg-workspace-entry, body.app-layout.workspace-concept .fg-concept-dashboard :is(.da-recent-panel, .da-side-card, .fg-dashboard-more) { padding: 20px; }
}
/* One primary task action: Generate. Creation/navigation and persistence are secondary. */
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-new-btn { background: var(--fg-surface); color: var(--fg-accent-deep); border: 1px solid var(--fg-line-strong); box-shadow: none; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-new-btn:hover { background: var(--fg-selected); color: var(--fg-accent-deep); }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .save-btn { background: var(--fg-surface) !important; color: var(--fg-accent-deep) !important; border: 1px solid var(--fg-line-strong) !important; box-shadow: none !important; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .save-btn:hover { background: var(--fg-selected) !important; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-alt-code,
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-alt-code :is(code, span) { font-size: 16px !important; line-height: 1.6 !important; }

/* Restored mobile results remain one tap away without collapsing editable inputs. */
body.app-layout.workspace-concept .fg-result-shortcut { display: none; }
body.app-layout.workspace-concept #generate-page .fg-workflow-actions { padding-bottom: 12px; }
body.app-layout.workspace-concept #generate-page [id$="-output-heading"] { scroll-margin-top: 120px; }
@media (max-width: 900px) {
  body.app-layout.workspace-concept #generate-page .fg-input-heading { flex-wrap: wrap; }
  body.app-layout.workspace-concept #generate-page .tool-panel:has(.result-card[data-state="ready"]) .fg-result-shortcut { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; min-height: 32px; color: var(--fg-accent-deep); font: 600 13px/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
}

/* Compact, unbranded navigation with its control at the point of entry. */
body.app-layout.workspace-shell-v2.workspace-concept .fg-sidebar-toolbar { display: flex; align-items: center; justify-content: flex-end; height: 44px; flex: 0 0 44px; margin: -8px 0 12px; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-desktop-toggle { position: static; width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--fg-radius-control); }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-nav-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
body.app-layout.workspace-concept .fg-heading-icon { width: 36px; height: 36px; flex-basis: 36px; }
/* Quiet chevrons replace browser triangles across task and result disclosures. */
body.app-layout.workspace-concept :is(.fg-context, .fg-result-how, .fg-result-collection, .fg-dashboard-more) > summary { display: flex !important; align-items: center; gap: 10px; list-style: none; min-height: 44px !important; cursor: pointer; }
body.app-layout.workspace-concept :is(.fg-context, .fg-result-how, .fg-result-collection, .fg-dashboard-more) > summary::-webkit-details-marker { display: none; }
body.app-layout.workspace-concept :is(.fg-context, .fg-result-how, .fg-result-collection, .fg-dashboard-more) > summary::after { content: ''; width: 7px; height: 7px; flex: 0 0 7px; margin-left: auto; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
body.app-layout.workspace-concept :is(.fg-context, .fg-result-how, .fg-result-collection, .fg-dashboard-more)[open] > summary::after { transform: rotate(225deg); }
body.app-layout.workspace-concept :is(.fg-context, .fg-result-how, .fg-result-collection, .fg-dashboard-more) > summary:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 3px; border-radius: var(--fg-radius-control); }
@media (max-width: 900px) {
  body.app-layout.workspace-shell-v2.workspace-concept .fg-sidebar-toolbar { margin-top: 0; }
  body.app-layout.workspace-shell-v2.workspace-concept .sidebar-drawer-close { position: static; }
  body.app-layout.workspace-shell-v2.workspace-concept .sidebar-desktop-toggle { display: none; }
  body.app-layout.workspace-concept .fg-dashboard-heading { flex-wrap: wrap; }
  body.app-layout.workspace-concept #generate-page .fg-input-heading .fg-task-tabs { flex-wrap: wrap; max-width: 100%; }
}

/* Request settings open in a contained dialog; they no longer push editor fields around. */
body.app-layout.workspace-concept .fg-preferences-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-radius-control); background: var(--fg-surface); color: var(--fg-ink); font: 500 13px/1.4 var(--font-body); cursor: pointer; }
body.app-layout.workspace-concept .fg-preferences-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; margin: auto; overflow: auto; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-panel); color: var(--fg-ink); background: var(--fg-surface); box-shadow: var(--fg-shadow); }
body.app-layout.workspace-concept .fg-preferences-dialog::backdrop { background: rgb(10 20 15 / .42); }
body.app-layout.workspace-concept .fg-preferences-dialog > :is(header, footer) { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
body.app-layout.workspace-concept .fg-preferences-dialog > header { border-bottom: 1px solid var(--fg-line); }
body.app-layout.workspace-concept .fg-preferences-dialog > header h2 { margin: 0; font: 650 18px/1.4 var(--font-body); }
body.app-layout.workspace-concept .fg-preferences-dialog .fg-preferences-close { height: 44px; width: 44px; border: 0; border-radius: var(--fg-radius-control); color: var(--fg-muted); background: transparent; font: 24px/1 var(--font-body); cursor: pointer; }
body.app-layout.workspace-concept .fg-preferences-dialog-content { padding: 20px; }
body.app-layout.workspace-concept .fg-preferences-dialog .fg-preferences-fields { margin: 0; gap: 16px; }
body.app-layout.workspace-concept .fg-preferences-dialog :is(select, input) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-radius-control); background: var(--fg-surface); color: var(--fg-ink); font: 14px/1.4 var(--font-body); }
body.app-layout.workspace-concept .fg-preferences-dialog :is(.fg-preferences-note, .fg-preferences-status) { margin: 16px 0 0; font: 12px/1.6 var(--font-body); color: var(--fg-muted); }
body.app-layout.workspace-concept .fg-preferences-dialog > footer { border-top: 1px solid var(--fg-line); }
body.app-layout.workspace-concept .fg-preferences-dialog > footer a { color: var(--fg-accent); font: 13px/1.5 var(--font-body); }
body.app-layout.workspace-concept .fg-preferences-dialog .fg-preferences-done { min-height: 44px; padding: 10px 20px; font: 600 14px/1.4 var(--font-body); }
@media (max-width: 520px) {
  body.app-layout.workspace-concept .fg-preferences-dialog .fg-preferences-fields { grid-template-columns: 1fr; }
  body.app-layout.workspace-concept #generate-page .fg-editor-options { align-items: flex-start; }
  body.app-layout.workspace-concept #generate-page .fg-inline-platform { flex-basis: 100%; width: 100%; }
}
/* Cards size to their content; result detail never creates an empty editor column. */
body.app-layout.workspace-concept #generate-page .tool-panel.active { align-items: start; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-user { padding: 10px 0 0; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-user-btn { gap: 12px; padding: 4px 8px; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-user-btn .user-avatar-sm { flex: 0 0 28px; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-workflow-actions { padding-bottom: 16px; }
body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .rc-badge { text-transform: none !important; letter-spacing: 0 !important; font: 500 12px/1.4 var(--font-body) !important; border: 0 !important; padding: 0 !important; background: transparent !important; color: var(--fg-muted) !important; }
@media (min-width: 901px) {
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-concept .sidebar-user,
  body.app-layout.workspace-shell-v2.workspace-concept .app-sidebar.collapsed .sidebar-user { padding: 10px 0 0; }
}

/* A direct starting point inspired by the competitors' composers, using real existing tools. */
body.app-layout.workspace-concept .fg-dashboard-task-composer { padding: 24px; }
body.app-layout.workspace-concept .fg-dashboard-task-composer .fg-entry-header { margin-bottom: 6px; }
body.app-layout.workspace-concept .fg-dashboard-task-composer .fg-entry-header h2 { font: 600 22px/1.35 var(--font-body); }
body.app-layout.workspace-concept .fg-dashboard-task-composer > p { max-width: none; margin-bottom: 18px; font-size: 13px; }
body.app-layout.workspace-concept #fg-task-composer-form { gap: 0; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-radius-panel); background: var(--fg-paper); }
body.app-layout.workspace-concept #fg-task-composer-form > .form-group { margin: 0; }
body.app-layout.workspace-concept #fg-task-prompt { display: block; width: 100%; min-height: 112px; padding: 18px; border: 0; box-shadow: none; border-radius: var(--fg-radius-panel); background: transparent; color: var(--fg-ink); font: 15px/1.6 var(--font-body); resize: vertical; }
body.app-layout.workspace-concept #fg-task-prompt:focus { outline: none; }
body.app-layout.workspace-concept #fg-task-composer-form:focus-within { outline: 2px solid var(--fg-accent); outline-offset: 3px; }
body.app-layout.workspace-concept #fg-task-composer-form .form-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px; border-top: 1px solid var(--fg-line); }
body.app-layout.workspace-concept #fg-task-composer-form .form-row .form-group { min-width: 0; width: 220px; margin: 0; gap: 4px; }
body.app-layout.workspace-concept #fg-task-composer-form .form-row label { font: 500 12px/1.4 var(--font-body); color: var(--fg-muted); }
body.app-layout.workspace-concept #fg-task-composer-form :is(.tm-select-trigger, select, .da-button) { min-height: 44px; border-radius: var(--fg-radius-control); font: 500 13px/1.4 var(--font-body); }
body.app-layout.workspace-concept #fg-task-composer-status:empty { display: none; }
body.app-layout.workspace-concept #fg-task-composer-status { padding: 0 16px 12px; margin: 0; font: 13px/1.5 var(--font-body); }
body.app-layout.workspace-concept .fg-dashboard-task-composer .fg-dashboard-task-guides { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 0; font: 13px/1.5 var(--font-body); }
body.app-layout.workspace-concept .fg-dashboard-task-guides a { color: var(--fg-accent); text-decoration: underline; text-underline-offset: 3px; }
body.app-layout.workspace-concept .fg-dashboard-task-guides > span { display: none; }
body.app-layout.workspace-concept .fg-task-intake-notice { padding: 10px 12px; margin: 0 0 12px; border-radius: var(--fg-radius-control); color: var(--fg-accent-deep); background: var(--fg-selected); font: 13px/1.5 var(--font-body); }
@media (max-width: 600px) {
  body.app-layout.workspace-concept .fg-dashboard-task-composer { padding: 16px; }
  body.app-layout.workspace-concept .fg-dashboard-task-composer .fg-entry-header h2 { font-size: 20px; }
  body.app-layout.workspace-concept #fg-task-composer-form .form-row .form-group { width: 100%; }
  body.app-layout.workspace-concept #fg-task-composer-form .fg-entry-actions, body.app-layout.workspace-concept #fg-task-composer-form .da-button { width: 100%; justify-content: center; }
}

/* Retire legacy marketing/monospace overrides inside the actual application shell. */
body.app-layout.workspace-concept :is(h1, h2, h3, label, summary, button, .sidebar-nav-label) { font-family: var(--font-body) !important; }
body.app-layout.workspace-concept .app-content h1 { font: 650 24px/1.25 var(--font-body) !important; letter-spacing: -.025em; }
body.app-layout.workspace-concept .sidebar-nav-label { text-transform: none !important; letter-spacing: 0 !important; }
@media (max-width: 900px) { body.app-layout.workspace-concept .app-content h1 { font-size: 22px !important; } }

body.app-layout.workspace-concept .fg-preferences-dialog :focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

/* Billing's two-column card track needs an explicit zero minimum on mobile. */
@media (max-width:900px) {
  body.app-layout.workspace-concept .billing-page .billing-grid { grid-template-columns:minmax(0,1fr); }
  body.app-layout.workspace-concept .billing-page .billing-grid > * { min-width:0; }
}

body.app-layout.workspace-concept #fg-task-composer-form .fg-task-tool-row { border-top: 0; border-bottom: 1px solid var(--fg-line); }
body.app-layout.workspace-concept #fg-task-composer-form > .form-row:not(.fg-task-tool-row) { justify-content: flex-end; }

/* Dense desktop navigation; mobile keeps 44px targets. */
body.app-layout.workspace-shell-v2.workspace-concept .fg-sidebar-toolbar { gap: 3px; margin-bottom: 8px; }
body.app-layout.workspace-concept .fg-sidebar-identity { display:flex; align-items:center; gap:5px; flex:0 0 auto; margin-right:auto; min-width:max-content; color:var(--fg-ink); text-decoration:none; font:650 13px/1.2 var(--font-body); white-space:nowrap; }
body.app-layout.workspace-concept .fg-sidebar-identity img { flex:0 0 24px; border-radius:var(--radius-compact); }
body.app-layout.workspace-concept .fg-sidebar-identity span { max-width:none; white-space:nowrap; }
body.app-layout.workspace-concept .fg-sidebar-toolbar #sidebar-theme-toggle { display:grid; place-items:center; padding:0; margin:0; width:40px; height:40px; min-height:40px; flex:0 0 40px; background:transparent; border:0; color:var(--fg-muted); border-radius:var(--fg-radius-control); }
body.app-layout.workspace-concept .fg-sidebar-toolbar #sidebar-theme-toggle:hover { background:var(--fg-surface-soft); color:var(--fg-ink); }
body.app-layout.workspace-concept .fg-sidebar-toolbar #sidebar-theme-toggle .sun-icon { display:none; }
html.dark-mode body.app-layout.workspace-concept .fg-sidebar-toolbar #sidebar-theme-toggle .moon-icon { display:none; }
html.dark-mode body.app-layout.workspace-concept .fg-sidebar-toolbar #sidebar-theme-toggle .sun-icon { display:block; }
@media (min-width:901px) {
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-nav-item { height:36px; min-height:36px; }
body.app-layout.workspace-concept .fg-nav-disclosure > summary { min-height:36px; padding-block:6px; }
body.app-layout.workspace-shell-v2.workspace-concept .fg-workspace-nav-group { gap:1px; }
body.app-layout.workspace-shell-v2.workspace-concept .sidebar-nav-label { padding-block:8px 4px; }
body.app-layout.workspace-shell-v2.workspace-concept .fg-workspace-switch, body.app-layout.workspace-shell-v2.workspace-concept .sidebar-new-btn { margin-bottom:8px; }
html.sidebar-collapsed body.app-layout.workspace-concept .fg-sidebar-identity, html.sidebar-collapsed body.app-layout.workspace-concept .fg-sidebar-toolbar #sidebar-theme-toggle,
body.app-layout.workspace-concept .app-sidebar.collapsed .fg-sidebar-identity, body.app-layout.workspace-concept .app-sidebar.collapsed .fg-sidebar-toolbar #sidebar-theme-toggle { display:none; }
}
@media (max-width:900px) { body.app-layout.workspace-concept .fg-sidebar-toolbar #sidebar-theme-toggle { width:44px; height:44px; min-height:44px; flex-basis:44px; } }
body.app-layout.workspace-concept .fg-control-icon { width:16px; height:16px; flex:0 0 16px; vertical-align:middle; margin-right:6px; }
@media (max-width:900px) {
  html.mobile-sidebar-open body.app-layout.workspace-concept .app-main { transform:none !important; z-index:auto !important; }
  html.mobile-sidebar-open body.app-layout.workspace-concept .app-sidebar { z-index:64 !important; }
  html.mobile-sidebar-open body.app-layout.workspace-concept .app-sidebar-overlay.open { display:block !important; position:fixed; inset:0; background:rgba(15,24,19,.48); z-index:63; }
  html.mobile-sidebar-open body.app-layout.workspace-concept .canvas-mobile-toggle { visibility:hidden; }
}

/* Keep the theme and shell controls as one compact, adjacent control group. */
body.app-layout.workspace-shell-v2.workspace-concept .fg-sidebar-controls { display:flex; align-items:center; gap:2px; flex:0 0 auto; }
body.app-layout.workspace-concept .fg-sidebar-toolbar #sidebar-theme-toggle { margin:0; }
body.app-layout.workspace-concept .fg-sidebar-controls .sidebar-desktop-toggle { margin:0; }
@media (max-width:900px) {
  body.app-layout.workspace-concept .fg-sidebar-controls { gap:2px; }
  body.app-layout.workspace-concept .fg-sidebar-controls .sidebar-drawer-close { margin:0; }
  body.app-layout.workspace-concept .app-content-toolbar .canvas-mobile-toggle.sidebar-toggle { width:44px; height:44px; min-width:44px; min-height:44px; }
}

/* Keep the collection disclosure and Save action as separate, full-width mobile rows. */
@media (max-width:900px) {
  body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions { grid-template-columns:minmax(0,1fr) auto; }
  body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .fg-result-collection { grid-column:1 / -1; }
  body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .save-btn { grid-column:1; }
  body.app-layout.workspace-concept:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions > .action-row:not(.rc-actions-footnote-row) { grid-column:2; }
}


/* partials/concept-data-workspaces.css */
/* Concept workbench treatment for the existing repair and local data tools. */
.concept-repair-workspace,
.concept-data-workspace {
  --cw-paper: var(--fg-paper, #f6f7f4);
  --cw-surface: var(--fg-surface, #fff);
  --cw-soft: var(--fg-surface-soft, #edf1eb);
  --cw-ink: var(--fg-ink, #17231d);
  --cw-muted: var(--fg-muted, #647169);
  --cw-line: var(--fg-line, #dce3dc);
  --cw-line-strong: var(--fg-line-strong, #c6d1c8);
  --cw-green: var(--fg-accent, #245d43);
  --cw-green-deep: var(--fg-accent-deep, #163d2c);
  --cw-radius-panel: var(--fg-radius-panel, 17px);
  --cw-radius-control: var(--fg-radius-control, 12px);
  color: var(--cw-ink);
}

/* Finance inherits the shared blue workspace palette in both themes. */
body[data-workspace="finance"] .concept-data-workspace {
  --cw-paper: var(--fg-paper, #f1f6fd);
  --cw-surface: var(--fg-surface, #fff);
  --cw-soft: var(--fg-surface-soft, #eaf2fc);
  --cw-ink: var(--fg-ink, #16253d);
  --cw-muted: var(--fg-muted, #586b85);
  --cw-line: var(--fg-line, #d6e2f1);
  --cw-line-strong: var(--fg-line-strong, #b9cce3);
  --cw-green: var(--fg-accent, #2463bc);
  --cw-green-deep: var(--fg-accent-deep, #174584);
  --cw-selected: var(--fg-selected, #e1edff);
  --cw-shadow: 0 18px 50px rgba(38, 43, 88, .09), 0 2px 8px rgba(38, 43, 88, .04);
  --da-green: var(--cw-green);
  --da-green-dark: var(--cw-green-deep);
  --da-green-soft: var(--cw-selected);
  --da-line: var(--cw-line);
  --da-line-strong: var(--cw-line-strong);
  --accent-primary: var(--cw-green);
  --accent-primary-dark: var(--cw-green-deep);
  --bg-surface: var(--cw-surface);
  --bg-surface-2: var(--cw-soft);
  --border-light: var(--cw-line);
  --border-strong: var(--cw-line-strong);
  --text-primary: var(--cw-ink);
  --text-secondary: var(--cw-muted);
}

html.dark-mode body[data-workspace="finance"] .concept-data-workspace {
  --cw-paper: var(--fg-paper, #f1f6fd);
  --cw-surface: var(--fg-surface, #fff);
  --cw-soft: var(--fg-surface-soft, #eaf2fc);
  --cw-ink: var(--fg-ink, #16253d);
  --cw-muted: var(--fg-muted, #586b85);
  --cw-line: var(--fg-line, #d6e2f1);
  --cw-line-strong: var(--fg-line-strong, #b9cce3);
  --cw-green: var(--fg-accent, #2463bc);
  --cw-green-deep: var(--fg-accent-deep, #174584);
  --cw-selected: var(--fg-selected, #e1edff);
  --cw-shadow: 0 18px 50px rgba(0, 0, 0, .24), 0 2px 8px rgba(0, 0, 0, .14);
  --da-warm: #333047;
}

.concept-repair-workspace {
  max-width: 1180px;
}

.concept-repair-workspace .repair-heading {
  align-items: flex-end;
  margin-bottom: 20px;
  padding-bottom: 19px;
  border-bottom: 1px solid var(--cw-line);
}

.concept-repair-workspace .repair-eyebrow,
.concept-data-workspace .fgdata-eyebrow {
  color: var(--cw-green);
  letter-spacing: .08em;
}

.concept-repair-workspace .repair-heading h1 {
  max-width: 760px;
  font-size: clamp(29px, 3vw, 38px);
  line-height: 1.12;
  text-wrap: balance;
}

.concept-repair-workspace .repair-heading h1 br {
  display: none;
}

.concept-repair-workspace .repair-heading p,
.concept-data-workspace .fgdata-heading > p:last-child {
  max-width: 70ch;
  color: var(--cw-muted);
  font-size: 14px;
  line-height: 1.6;
}

.concept-repair-workspace .repair-layout {
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  gap: 18px;
}

.concept-repair-workspace .repair-panel,
.concept-data-workspace .fgdata-card {
  border-color: var(--cw-line);
  border-radius: var(--cw-radius-panel);
  background: var(--cw-surface);
  box-shadow: var(--cw-shadow, 0 12px 34px rgb(25 53 38 / .055), 0 2px 7px rgb(25 53 38 / .035));
}

.concept-repair-workspace .repair-panel {
  padding: 22px;
}

.concept-repair-workspace .repair-panel-heading {
  align-items: flex-start;
  border-color: var(--cw-line);
}

.concept-repair-workspace .repair-step,
.concept-data-workspace .fgdata-step {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-control);
  color: var(--cw-green);
  background: var(--cw-soft);
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.concept-repair-workspace .repair-panel h2,
.concept-data-workspace .fgdata-card h2 {
  color: var(--cw-ink);
  font-size: 18px;
  letter-spacing: -.025em;
}

.concept-repair-workspace .repair-field label,
.concept-data-workspace label {
  color: var(--cw-ink);
  font-size: 14px;
}

.concept-repair-workspace :is(input:not([type=checkbox]), textarea, select),
.concept-data-workspace :is(input:not([type=checkbox]), textarea, select) {
  border-color: var(--cw-line-strong);
  border-radius: var(--cw-radius-control);
  color: var(--cw-ink);
  background: var(--cw-surface);
  font-size: 14px;
}

.concept-repair-workspace :is(input:not([type=checkbox]), select),
.concept-data-workspace :is(input:not([type=checkbox]), select) {
  min-height: 44px;
}

.concept-repair-workspace textarea,
.concept-data-workspace textarea {
  line-height: 1.55;
}

.concept-repair-workspace .repair-starters {
  border-color: var(--cw-line);
  border-radius: var(--cw-radius-control);
  background: var(--cw-soft);
}

.concept-repair-workspace .repair-starter {
  min-height: 54px;
  border-color: var(--cw-line);
  border-radius: var(--cw-radius-control);
}

.concept-repair-workspace .repair-starter-copy strong,
.concept-repair-workspace .repair-starter-copy span,
.concept-repair-workspace .repair-help,
.concept-repair-workspace .repair-privacy,
.concept-repair-workspace .repair-status,
.concept-repair-workspace .repair-prose,
.concept-repair-workspace .repair-list {
  font-size: 13px;
}

.concept-repair-workspace .repair-empty {
  margin: 8px 0 0;
  border: 1px dashed var(--cw-line-strong);
  border-radius: var(--cw-radius-control);
  background: var(--cw-paper);
}

.concept-repair-workspace .repair-result-panel #repair-result {
  min-width: 0;
}

.concept-repair-workspace .repair-code {
  border-radius: var(--cw-radius-control);
  font-size: 13px;
}

.concept-repair-workspace .repair-code-proposed {
  border-color: #c6d8ca;
  background: #f1f7f2;
}

.concept-repair-workspace .repair-evidence {
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-control);
  background: var(--cw-paper);
}

.concept-repair-workspace .repair-result-actions .btn-primary,
.concept-data-workspace :is(#fgdata-apply, #fgdata-export, #fgstatement-read, #fgstatement-vision-run, #fgstatement-export) {
  border-color: var(--cw-green);
  color: #fff;
  background: var(--cw-green);
}

/* Dark-mode accents are intentionally light surfaces, so give the CSV download
   action a dark label instead of inheriting the light-mode white text. */
html.dark-mode .concept-data-workspace.fgdata-cleaner #fgdata-export {
  color: #163d2c;
}

.concept-repair-workspace .repair-result-actions .btn-primary:hover,
.concept-data-workspace :is(#fgdata-apply, #fgdata-export, #fgstatement-read, #fgstatement-vision-run, #fgstatement-export):hover:not(:disabled) {
  border-color: var(--cw-green-deep);
  color: #fff;
  background: var(--cw-green-deep);
}

.concept-data-workspace {
  width: min(1120px, 100%);
  max-width: 1120px;
  gap: 16px;
}

.concept-data-workspace.fgdata-cleaner {
  width: 100%;
  max-width: 1280px;
}

.concept-data-workspace .fgdata-heading {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cw-line);
}

.concept-data-workspace .fgdata-heading h1 {
  margin-bottom: 8px;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.concept-data-workspace .fgdata-card {
  gap: 14px;
  padding: 20px;
}

.concept-data-workspace .fgdata-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.concept-data-workspace .fgdata-step {
  display: none;
}

.concept-data-workspace .fgdata-section-heading > div {
  min-width: 0;
}

.concept-data-workspace .fgdata-section-heading h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}

.concept-data-workspace .fgdata-section-heading p {
  margin: 5px 0 0;
  color: var(--cw-muted);
  font-size: 13px;
  line-height: 1.5;
}

.concept-data-workspace .fgdata-hint,
.concept-data-workspace .fgdata-card > p,
.concept-data-workspace .fgstatement-section-head p {
  color: var(--cw-muted);
  font-size: 13px;
  line-height: 1.55;
}

.concept-data-workspace .fgdata-input-grid {
  gap: 14px 18px;
}

.concept-data-workspace.fgdata-cleaner .fgdata-clean-workbench,
.concept-data-workspace.fgstatement-page .fgstatement-workbench {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.concept-data-workspace.fgstatement-page .fgdata-heading > p:last-child {
  max-width: 74ch;
}

.concept-data-workspace.fgstatement-page .fgstatement-import {
  gap: 16px;
  padding-block: 16px;
}

.concept-data-workspace.fgstatement-page .fgstatement-import .fgdata-section-heading p {
  margin-top: 8px;
  font-size: 12px;
}

.concept-data-workspace.fgstatement-page .fgstatement-import .fgdata-hint {
  margin-top: 0;
}

.concept-data-workspace.fgdata-cleaner .fgdata-clean-results,
.concept-data-workspace.fgstatement-page .fgstatement-setup-column,
.concept-data-workspace.fgstatement-page .fgstatement-review-column {
  display: grid;
  min-width: 0;
  gap: 16px;
  align-content: start;
}

.concept-data-workspace.fgdata-cleaner .fgdata-clean-results {
  gap: 16px;
}

.concept-data-workspace.fgdata-cleaner .fgdata-input-grid,
.concept-data-workspace.fgstatement-page .fgdata-input-grid {
  grid-template-columns: minmax(0, 1fr);
}

.concept-data-workspace .fgdata-import-panel {
  padding-block: 17px;
}

.concept-data-workspace .fgdata-preview-panel {
  gap: 12px;
  padding-bottom: 14px;
}

.concept-data-workspace .fgdata-empty-state {
  display: none;
  min-height: 250px;
  margin: 0;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--cw-muted);
  text-align: center;
}

.concept-data-workspace .concept-data-table:has(tbody:empty) .fgdata-empty-state {
  display: flex;
}

.concept-data-workspace .concept-data-table {
  max-height: min(64vh, 520px);
  min-height: 380px;
  border-color: var(--cw-line);
  border-radius: var(--cw-radius-control);
  background: var(--cw-surface);
}

.concept-data-workspace.fgdata-cleaner .fgdata-preview-panel {
  min-height: 440px;
}

.concept-data-workspace table {
  font-size: 13px;
}

.concept-data-workspace th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--cw-ink);
  background: var(--cw-soft);
  font-size: 13px;
}

.concept-data-workspace :is(th, td) {
  min-width: 112px;
  padding: 10px 12px;
  border-color: var(--cw-line);
}

.concept-data-workspace :is(button, .fgdata-actions button) {
  min-height: 44px;
  border-radius: var(--cw-radius-control);
  font-size: 14px;
}

.concept-data-workspace .fgdata-actions,
.concept-data-workspace .fgdata-controls {
  gap: 10px;
}

.concept-data-workspace .fgdata-controls {
  padding: 12px 14px;
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-control);
  background: var(--cw-paper);
}

.concept-data-workspace .fgdata-proposal {
  border-color: #cadbce;
  border-radius: var(--cw-radius-control);
  background: #f1f7f2;
}

body[data-workspace="finance"] .concept-data-workspace .fgdata-proposal {
  border-color: #c7cae5;
  color: #343c79;
  background: #f4f4fb;
}

.concept-data-workspace .fgstatement-mapping-panel {
  border-inline-start: 0;
}

.concept-data-workspace .fgstatement-transactions-panel {
  padding: 20px;
  container: statement-review / inline-size;
}

.concept-data-workspace .fgstatement-transactions-panel .fgdata-table-wrap {
  min-height: 230px;
  max-height: min(58vh, 560px);
  border-color: var(--cw-line);
  border-radius: var(--cw-radius-control);
}

.concept-data-workspace .fgstatement-transactions-panel:has(#fgstatement-rows:empty) .fgdata-table-wrap {
  display: none;
}

.concept-data-workspace .fgstatement-transactions-panel:has(#fgstatement-rows:empty) .fgstatement-pagination {
  display: none;
}

.concept-data-workspace .fgstatement-scroll-hint {
  display: none;
  margin: 0;
  color: var(--cw-muted);
  font-size: 12px;
  line-height: 1.45;
}

.concept-data-workspace .fgstatement-scroll-hint-narrow {
  display: none;
}

.concept-data-workspace .fgstatement-transactions-panel:has(#fgstatement-rows:not(:empty)) .fgstatement-scroll-hint {
  display: block;
}

.concept-data-workspace #fgstatement-table {
  /* Each scrolling cell owns its border, including sticky cells. */
  border-collapse: separate;
  border-spacing: 0;
}

.concept-data-workspace #fgstatement-table :is(th, td) {
  padding: 12px;
}

.concept-data-workspace #fgstatement-table :is(th, td):last-child {
  position: sticky;
  right: 0;
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  border-inline-start: 1px solid var(--cw-line);
}

.concept-data-workspace #fgstatement-table th:last-child {
  z-index: 4;
  background: var(--cw-soft);
  box-shadow: -8px 0 12px rgb(25 53 38 / .07);
}

.concept-data-workspace #fgstatement-table td:last-child {
  z-index: 2;
  background: var(--cw-surface);
  box-shadow: -8px 0 12px rgb(25 53 38 / .055);
}

.concept-data-workspace #fgstatement-table :is(th, td):nth-last-child(2) {
  min-width: 154px;
}

.concept-data-workspace #fgstatement-table details > summary {
  list-style: none;
  justify-content: space-between;
  gap: 6px;
  color: var(--cw-green-deep);
  font-weight: 600;
}

.concept-data-workspace #fgstatement-table details > summary::-webkit-details-marker {
  display: none;
}

.concept-data-workspace #fgstatement-table details > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin: -4px 3px 0 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 120ms ease;
}

.concept-data-workspace #fgstatement-table details[open] > summary::after {
  transform: rotate(225deg);
}

@container statement-review (min-width: 970px) {
  .concept-data-workspace .fgstatement-scroll-hint {
    display: none;
  }
}

.concept-data-workspace .fgstatement-transactions-panel .fgstatement-empty-state:not([hidden]) {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--cw-line-strong);
  border-radius: var(--cw-radius-control);
  color: var(--cw-muted);
  background: var(--cw-paper);
  text-align: center;
}

.concept-data-workspace .fgstatement-section-head {
  align-items: flex-start;
  gap: 16px 24px;
}

.concept-data-workspace .fgstatement-section-head p {
  max-width: 70ch;
  margin-top: 8px;
}

.concept-data-workspace :is(.fgstatement-import, .fgstatement-mapping-panel, .fgstatement-transactions-panel, .fgstatement-balance-panel) {
  gap: 16px;
}

.concept-data-workspace .fgstatement-section-head > div {
  flex: 1 1 420px;
}

.concept-data-workspace .fgstatement-section-head button {
  flex: 0 1 auto;
}

.concept-data-workspace .fgstatement-section-head .fgdata-section-heading {
  margin: 0;
}

.concept-data-workspace .fgstatement-reconciliation {
  border: 1px solid #d4d8ee;
  border-radius: var(--cw-radius-control);
  color: #343c79;
  background: #f7f7fc;
  font-size: 14px;
  line-height: 1.55;
}

.concept-data-workspace .fgstatement-warning {
  border-color: #e6d4bd;
  border-radius: var(--cw-radius-control);
  background: #fbf5eb;
}

.concept-data-workspace :is(.fgdata-import-panel, .fgdata-clean-panel, .fgstatement-import, .fgstatement-mapping-panel, .fgstatement-transactions-panel, .fgstatement-balance-panel) :focus-visible,
.concept-repair-workspace :focus-visible {
  outline: 3px solid #b27631;
  outline-offset: 2px;
}

html.dark-mode .concept-repair-workspace .repair-code-proposed,
html.dark-mode .concept-data-workspace .fgdata-proposal,
html.dark-mode .concept-data-workspace .fgstatement-reconciliation {
  border-color: #365b45;
  color: var(--cw-ink);
  background: #1c3023;
}

html.dark-mode .concept-data-workspace .fgstatement-warning {
  border-color: #6a5238;
  color: var(--cw-ink);
  background: #332b20;
}

html.dark-mode body[data-workspace="finance"] .concept-data-workspace .fgdata-proposal,
html.dark-mode body[data-workspace="finance"] .concept-data-workspace .fgstatement-reconciliation {
  border-color: #424b7e;
  color: #e0e3f4;
  background: #2b315d;
}

@media (max-width: 1100px) {
  .concept-data-workspace.fgdata-cleaner .fgdata-clean-workbench,
  .concept-data-workspace.fgstatement-page .fgstatement-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .concept-data-workspace.fgdata-cleaner .fgdata-input-grid,
  .concept-data-workspace.fgstatement-page .fgdata-input-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .concept-data-workspace .concept-data-table {
    min-height: 260px;
  }

  .concept-data-workspace.fgdata-cleaner .fgdata-preview-panel {
    min-height: 0;
  }

  .concept-repair-workspace .repair-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .concept-repair-workspace .repair-heading {
    align-items: flex-start;
  }

  .concept-repair-workspace .repair-heading h1,
  .concept-data-workspace .fgdata-heading h1 {
    font-size: 25px;
  }

  .concept-repair-workspace .repair-panel,
  .concept-data-workspace .fgdata-card {
    padding: 16px;
  }

  .concept-data-workspace.fgdata-cleaner .fgdata-input-grid,
  .concept-data-workspace.fgstatement-page .fgdata-input-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .concept-data-workspace .fgdata-controls {
    align-items: stretch;
  }

  .concept-data-workspace .fgdata-controls > select,
  .concept-data-workspace .fgdata-controls > .tm-select-shell {
    max-width: none;
  }

  .concept-data-workspace .fgstatement-section-head {
    display: grid;
  }

  .concept-data-workspace .fgstatement-section-head button {
    width: 100%;
  }

  .concept-data-workspace .fgstatement-import,
  .concept-data-workspace .fgstatement-mapping-panel,
  .concept-data-workspace .fgstatement-transactions-panel,
  .concept-data-workspace .fgstatement-balance-panel,
  .concept-data-workspace .fgdata-import-panel,
  .concept-data-workspace .fgdata-preview-panel,
  .concept-data-workspace .fgdata-clean-panel {
    gap: 16px;
  }
}

@media (max-width: 640px) {
  .concept-data-workspace #fgstatement-table :is(th, td):last-child {
    position: static;
    right: auto;
    width: auto;
    min-width: 120px;
    box-shadow: none;
  }

  .concept-data-workspace #fgstatement-table th:last-child {
    position: sticky;
    z-index: 1;
  }

  .concept-data-workspace .fgstatement-scroll-hint-wide {
    display: none;
  }

  .concept-data-workspace .fgstatement-scroll-hint-narrow {
    display: inline;
  }
}

/* Conversion is explicit; keep its disabled control visible before file/consent. */
.concept-data-workspace #fgstatement-clear:disabled { display: none; }

/* Empty finance has one clear next action; mapped mobile rows are directly reachable. */
.fgstatement-transactions-panel:not(:has(#fgstatement-rows:not(:empty))) #fgstatement-export { display: none; }
.fgstatement-review-shortcut { display: none; }
#fgstatement-transactions-title { scroll-margin-top: 110px; }
@media (max-width: 900px) {
  .fgstatement-workbench:has(#fgstatement-rows:not(:empty)) .fgstatement-review-shortcut { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--cw-green-deep); font: 600 13px/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
}

/* Keep row approval compact; text inputs must not size checkboxes. */
.concept-data-workspace #fgstatement-table td:last-child label { width: 95px; white-space: normal; overflow-wrap: normal; word-break: normal; font-size: 12px; line-height: 1.3; }
.concept-data-workspace #fgstatement-table td:last-child input[type=checkbox] { flex: 0 0 18px; min-width: 18px; margin: 0; }
.concept-data-workspace #fgstatement-export:disabled { background: var(--cw-soft); color: var(--cw-muted); border-color: var(--cw-line); }
.concept-data-workspace .fgstatement-pagination:has(#fgstatement-page-back:disabled):has(#fgstatement-page-next:disabled) button { display: none; }

/* Keep financial consistency feedback in the current workspace theme. */
body[data-workspace="finance"] .concept-data-workspace .fgstatement-reconciliation { color:var(--cw-ink); border-color:var(--cw-line-strong); background:var(--cw-soft); }



/* partials/workflow-polish.css */
/* Shared finishing rules for existing account/library and empty data surfaces. */
body.app-layout.workspace-concept #library-page .library-header .badge { display:none; }
body.app-layout.workspace-concept #library-page :is(.library-stat-label,.filter-chip,.tm-chip) { font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:13px; }
body.app-layout.workspace-concept #library-page .filter-chip { min-height:36px; padding:6px 12px; border-radius:var(--radius-control); }
body.app-layout.workspace-concept #library-page .library-stat-label { font-weight:500; }
body.app-layout.workspace-concept #library-page :is(.filter-chip,.tm-chip)::before { display:none; }
body.app-layout.workspace-concept .account-settings-page .section-title > .badge { display:none; }
body.app-layout.workspace-concept .account-settings-page .label { font-family:var(--font-body); text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; }
@media(max-width:360px) {
  body.app-layout.workspace-concept .account-settings-page .account-settings-grid { grid-template-columns:minmax(0,1fr); min-width:0; }
}
body.app-layout.workspace-concept .fgdata-cleaner .concept-data-table:has(tbody:empty) { min-height:220px; }
body.app-layout.workspace-concept .fgdata-cleaner .concept-data-table:has(tbody:empty) .fgdata-empty-state { min-height:220px; }
body.app-layout.workspace-concept .fgdata-cleaner .fgdata-preview-panel:has(tbody:empty) { min-height:0; }
@media(max-width:900px) { body.app-layout.workspace-concept #library-page .filter-chip { min-height:44px; } }
body.app-layout.workspace-concept #library-page .filter-chip:not(.active) { color:var(--fg-ink); opacity:1; background:var(--fg-surface); border-color:var(--fg-line-strong); }
/* Saved work uses the same quiet surfaces and plain metadata as the workbench. */
body.app-layout.workspace-concept #library-page :is(.library-toolbar,.library-stat,.library-item-card,.history-card,.collection-card,.library-empty) {
  background:var(--fg-surface); border-color:var(--fg-line); border-radius:var(--fg-radius-panel); box-shadow:0 3px 12px rgba(25,53,38,.035);
}
body.app-layout.workspace-concept #library-page :is(.library-item-card,.history-card):hover { border-color:var(--fg-line-strong); box-shadow:var(--fg-shadow); }
body.app-layout.workspace-concept #library-page :is(.history-tool-badge,.library-item-badge) {
  display:inline-flex; align-items:center; min-height:0 !important; height:auto !important; padding:0 !important;
  border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
  color:var(--fg-muted) !important; font:600 12px/1.4 var(--font-body) !important; letter-spacing:0 !important; text-transform:none !important;
}
body.app-layout.workspace-concept #library-page :is(.history-tool-badge,.library-item-badge)::before { display:none !important; }
body.app-layout.workspace-concept #library-page :is(.history-collection-badge,.library-item-collection) {
  display:inline-flex; align-items:center; min-height:0 !important; height:auto !important; max-width:min(58%,240px);
  padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
  color:var(--fg-muted) !important; font:500 12px/1.4 var(--font-body) !important; letter-spacing:0 !important; text-transform:none !important;
}
body.app-layout.workspace-concept #library-page :is(.history-collection-badge,.library-item-collection)::before { display:none !important; }
body.app-layout.workspace-concept #library-page .filter-chip :is(.tm-sq-dot,.tm-badge-dot,.tm-label-dot,.tm-chip-dot) { display:none !important; }
body.app-layout.workspace-concept #library-page .filter-chip:not(.active) { color:var(--fg-muted); }
body.app-layout.workspace-concept #library-page .filter-chip.active { color:var(--fg-accent-deep); background:var(--fg-selected); border-color:var(--fg-line); }
body.app-layout.workspace-concept .account-settings-page .card {
  background:var(--fg-surface); border-color:var(--fg-line); border-radius:var(--fg-radius-panel); box-shadow:0 3px 12px rgba(25,53,38,.035);
}
body.app-layout.workspace-concept .account-settings-page :is(label,.label) {
  color:var(--fg-ink); font:600 13px/1.4 var(--font-body); letter-spacing:0 !important; text-transform:none !important;
}
body.app-layout.workspace-concept .account-settings-page :is(input:not([type="checkbox"]),select) {
  color:var(--fg-ink); background:var(--fg-paper); border-color:var(--fg-line-strong);
}
body.app-layout.workspace-concept .account-settings-page .settings-policy-note { background:var(--fg-surface-soft); border-color:var(--fg-line); border-radius:var(--fg-radius-control); }
@media(max-width:600px) {
  body.app-layout.workspace-concept #library-page .library-stats-row {
    grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; overflow:hidden;
    border:1px solid var(--fg-line); border-radius:var(--fg-radius-panel); background:var(--fg-surface);
  }
  body.app-layout.workspace-concept #library-page .library-stat {
    display:flex; min-width:0; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px;
    padding:10px 9px; border:0; border-radius:0; box-shadow:none; text-align:left;
  }
  body.app-layout.workspace-concept #library-page .library-stat + .library-stat { border-left:1px solid var(--fg-line); }
  body.app-layout.workspace-concept #library-page .library-stat-label { font-size:11px; line-height:1.3; }
  body.app-layout.workspace-concept #library-page .library-stat-value { font-size:15px; line-height:1.25; }
  body.app-layout.workspace-concept #library-page .library-item-card { min-height:148px; padding:14px; }
  body.app-layout.workspace-concept #library-page .library-item-link { min-height:0; }
  body.app-layout.workspace-concept #library-page .library-item-head { margin-bottom:6px; }
  body.app-layout.workspace-concept #library-page .library-item-title { margin-bottom:4px; line-height:1.3; }
  body.app-layout.workspace-concept #library-page .library-item-summary { line-height:1.35; }
  body.app-layout.workspace-concept #library-page .library-item-meta { margin-top:6px; padding-top:0; }
}
/* One compact heading row. Description remains available to pointer, keyboard and touch. */
body.app-layout.workspace-concept .app-content h1 { font-size:22px !important; line-height:1.3 !important; margin-bottom:0 !important; }
body.app-layout.workspace-concept .fg-heading-help { position:relative; display:inline-flex; align-items:center; vertical-align:middle; margin-left:6px; font-size:13px; letter-spacing:0; }
body.app-layout.workspace-concept .fg-heading-info { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:0; background:transparent; color:var(--fg-muted); border-radius:var(--radius-control); cursor:pointer; }
body.app-layout.workspace-concept .fg-heading-info:hover, body.app-layout.workspace-concept .fg-heading-info:focus-visible { background:var(--fg-surface-soft); color:var(--fg-ink); }
body.app-layout.workspace-concept .fg-heading-info:focus-visible { outline:2px solid var(--fg-accent); outline-offset:2px; }
body.app-layout.workspace-concept .fg-heading-description { position:absolute; z-index:50; top:calc(100% + 6px); left:0; width:min(300px,calc(100vw - 48px)); padding:12px 14px; border:1px solid var(--fg-line-strong); border-radius:var(--radius-control); background:var(--fg-surface); color:var(--fg-ink); box-shadow:var(--fg-shadow); font:400 13px/1.55 var(--font-body); text-align:left; white-space:normal; }
@media(max-width:900px) {
 body.app-layout.workspace-concept .app-content h1 { font-size:20px !important; }
 body.app-layout.workspace-concept .fg-heading-info { width:44px; height:44px; }
 body.app-layout.workspace-concept .fg-heading-description { position:fixed; top:96px; left:auto; right:16px; width:calc(100vw - 32px); max-width:360px; }
 /* Stale root lock classes may not prevent access to a closed drawer's canvas. */
 html.mobile-sidebar-open:not(:has(.app-sidebar.open)) body.app-layout.workspace-concept { height:auto !important; overflow-y:visible !important; }
 html.mobile-sidebar-open:not(:has(.app-sidebar.open)) body.app-layout.workspace-concept :is(.app-main,.app-canvas-shell,.app-content) { height:auto !important; max-height:none !important; overflow:visible !important; touch-action:auto !important; pointer-events:auto; }
}
@media(max-width:900px) { body.app-layout.workspace-concept .app-content :is(input:not([type=checkbox]):not([type=radio]),textarea,select) { font-size:16px; } }

@media(max-width:900px) { html.mobile-sidebar-open:not(:has(.app-sidebar.open)) { height:auto !important; overflow-y:auto !important; } }



/* partials/public-saas.css */
/* Public pages share the calm workspace roles. Keep code in monospace; use
   normal reading typography for navigation, form labels and content. */
body.tm-page {
  --tm-font-display: var(--font-body);
  --tm-font-body: var(--font-body);
  --tm-font-mono: var(--font-body);
  --public-code-font: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --tm-tag-letter: 0;
  --tm-tag-font-size: 12px;
  --tm-surface-card: var(--da-surface);
  --tm-surface-subcard: var(--da-surface-soft);
  --tm-shell-max: 1200px;
  --tm-type-body-sm: 14px;
  --tm-type-page-h1-lh: 1.16;
  --tm-type-section-h2-lh: 1.22;
  --text-muted: var(--da-muted);
  --public-positive-ink: #235d42;
  --public-error-ink: #a13331;
  --public-error-surface: #fcf0ee;
}
body.tm-page:not(.tm-oauth-page) { padding-top: calc(64px + var(--site-banner-offset,0px)); }
body.tm-page > main:not(.auth-shell) { padding-top: 0; }
body.tm-page :is(span,small,label,a,button,summary,h1,h2,h3,h4) { text-transform: none !important; }
body.tm-page :is(span,small,label,a,button,summary) { letter-spacing: normal; }
body.tm-page :is(pre,code,pre *,code *) { font-family: var(--public-code-font) !important; }
html.dark-mode body.tm-page {
  --public-positive-ink: #b0dbbd;
  --public-error-ink: #ffc3bc;
  --public-error-surface: #382622;
}
body.tm-page :is(.tm-nav-links a, .tm-nav-subline, .tm-site-brand-sub,
  .tm-site-footer-title, .tm-site-footer-bottom, .tm-site-footer-legal a,
  .tm-site-footer-col h4, .tm-site-footer-heading, .tm-label, .tm-label-text,
  .tm-hero-eyebrow-text, .tm-inner-section-label, .tm-section-kicker,
  .tm-inner-card-label, .tm-inner-card-link, .tm-inner-card-list li,
  .tm-inner-subtitle, .tm-inner-meta > span, .tm-breadcrumb li,
  .tm-inner-cta-label, .tm-inner-cta-note, .tm-category-chip, .tm-tag-chip,
  .tm-badge, .tm-chip, .chip, .tm-plan-name, .tm-plan-period,
  .tm-blog-meta, .tm-blog-card-meta, .tm-blog-tag, .tm-marketing-formula-kicker,
  .da-eyebrow, .da-label, .da-demo-output-head, .da-task-label, .da-tool-label,
  .tm-oauth-brand-subline, .footer-lite-copy, .footer-lite-links a) {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}
body.tm-page .tm-nav { background: var(--da-surface); backdrop-filter: none; }
body.tm-page .tm-nav-links a { font-size: 14px; font-weight: 600; }
body.tm-page .tm-nav-wordmark { font-family: var(--font-body); letter-spacing: -.035em; }
body.tm-page .tm-nav-subline { font-size: 11px; color: var(--da-muted); }
html.dark-mode body.tm-page .tm-nav .nav-try { color: var(--da-paper); }
body.tm-page :is(.tm-nav-logo-box, .tm-site-brand-mark) { border-radius: var(--radius-control); }
body.tm-page :is(.tm-btn, .btn, .google-btn, .theme-toggle, .mobile-nav-trigger,
  .tm-category-chip, .tm-marketing-copy-btn, .seo-copy-btn) {
  border-radius: var(--radius-control);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  min-height: 44px;
}
body.tm-page :is(.theme-toggle, .mobile-nav-trigger) { min-width: 44px; }
body.tm-page :is(.tm-btn, .btn):disabled { opacity: .55; cursor: not-allowed; }
body.tm-page :is(.tm-inner-card, .usecase-card, .related-usecase-card, .pain-card,
  .feature-card, .usecase-example-card, .tm-blog-card, .blog-card, .tm-nc,
  .tm-formula-surface, .tm-compare-table-wrap, .tm-content-page, .tm-faq-item,
  .code-frame, .tm-inner-card-code, .tm-plan-card) {
  border-radius: var(--radius-surface);
  border-color: var(--da-line);
  background: var(--da-surface);
}
body.tm-page .tm-inner-card:is(.accent-mint,.accent-coral,.accent-gold,.accent-forest) {
  border-left: 1px solid var(--da-line);
}
body.tm-page :is(.tm-inner-hero-eyebrow-text,.tm-inner-section-label,.tm-inner-card-label,
  .tm-inner-card-link,.tm-breadcrumb li,.tm-category-chip,.tm-tag-chip,.tm-label-text,
  .tm-marketing-formula-kicker,.da-label,.da-eyebrow,.da-demo-output-head) {
  font-size: 12px;
  line-height: 1.45;
  opacity: 1;
}
body.tm-page :is(.tm-inner-hero,.tm-inner-section) { padding-block: clamp(32px,5vw,64px); }
body.tm-page .tm-inner-h1 { max-width: 24ch; font-weight: 650; letter-spacing: -.04em; }
body.tm-page :is(.tm-inner-body,.tm-inner-definition,.tm-inner-card-desc,.tm-inner-section-p) {
  color: var(--da-muted);
  max-width: 70ch;
}
body.tm-page .tm-inner-section::before { background: var(--da-line); }
body.tm-page .tm-inner-section-alt { background: var(--da-surface-soft); }
body.tm-page .tm-content-page { max-width: 76ch; margin-inline: auto; padding: clamp(20px,4vw,40px); }
body.tm-page .tm-content-page :is(h2,h3) { margin-top: 28px; }
body.tm-page .tm-content-page :is(p,li) { font-size: 15px; line-height: 1.75; }
body.tm-page .tm-content-page h3:first-child { margin-top: 0; }
body.tm-page :is(pre,.tm-inner-card-code) { max-width: 100%; overflow-x: auto; }
body.tm-page .tm-inner-card-grid.hairline { gap: 16px; background: transparent; }
body.tm-page :is(.tm-inner-card-grid,.formula-grid,.usecase-grid) > * { min-width: 0; }
body.tm-page .tm-inner-card-icon { width: 36px; height: 36px; background: var(--da-surface-soft); }
body.tm-page .tm-plan-card { --plan-ink: var(--da-ink); }
body.tm-page .tm-plan-card.is-featured { --plan-ink: #f2f8f3; background: #245d43; }
body.tm-page .tm-plan-card.is-featured :is(.tm-plan-fit,.tm-inner-body-sm,.tm-plan-period,.tm-plan-features li) {
  color: var(--plan-ink);
  opacity: 1;
}
body.tm-page .tm-plan-card .tm-plan-period { color: var(--plan-ink); }
body.tm-page.tm-inner :is(.tm-pricing-page .tm-inner-meta span,.tm-pricing-page .tm-plan-name,
  .tm-pricing-page .tm-plan-period,.tm-fr-stat-kicker,.tm-fr-status,.tm-fr-field > span,
  .tm-hero-eyebrow-text,.tm-label-text,.tm-section-label,.tm-section-kicker,
  .tm-site-footer-title,.tm-site-footer-bottom span,.tm-blog-card-category,
  .tm-blog-card-meta,.tm-blog-meta,.tm-inner-card-label,.tm-inner-card-link) {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  opacity: 1;
}
body.tm-page.tm-inner :is(.tm-label-text,.tm-hero-eyebrow-text,.tm-fr-stat-kicker) { color: var(--da-muted); font-size: 12px; }
body.tm-page.tm-inner .tm-inner-h1 { color: var(--da-ink); }
body.tm-page.tm-inner :is(h1,h2,h3,.tm-content-page h3) { font-family: var(--font-body); text-transform: none; letter-spacing: -.025em; }
body.tm-page.tm-inner :is(.tm-content-page h3,.tm-inner-card-title,.tm-h2) { color: var(--da-ink); }
body.tm-page.tm-inner :is(.tm-inner-body,.tm-inner-definition,.tm-inner-card-desc,.tm-inner-section-p,
  .tm-content-page p,.tm-content-page li,.tm-inner-body-sm,.tm-inner-meta,.tm-label,
  .tm-hero-eyebrow-pill,.tm-marketing-formula-prompt p,.tm-marketing-formula-kicker) { opacity: 1; }
body.tm-page.tm-inner :is(.tm-label-text,.tm-label .tm-hero-eyebrow-text) { font: 600 12px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; }
body.tm-page.tm-inner :is(.tm-marketing-formula-kicker,.tm-nc-prompt .tm-marketing-formula-kicker) { font: 600 12px/1.4 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--da-muted); }
body.tm-page.tm-inner :is(.tm-marketing-copy-btn,.tm-marketing-copy-btn--icon,.seo-copy-btn) { min-height: 44px; height: 44px; min-width: 44px; }
body.tm-page :is(.tm-marketing-formula-output,.tm-formula-surface__code) .tm-marketing-copy-btn {
  width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
}
body.tm-page.tm-inner .code-frame .seo-copy-btn { min-height: 44px; height: 44px; }
body.tm-page.tm-login-page .tm-login-panel-title { font-size: 28px !important; line-height: 1.2 !important; }
body.tm-page.direction-a-landing :is(.da-mode-tab,.da-toggle-option,.da-footer-updates button) { min-height: 44px; }
body.tm-page.direction-a-landing .da-team-content :is(input,button) { min-height: 44px; height: 44px; }
body.tm-page.tm-inner :is(.blog-copy-btn,.copy-code-btn,.code-copy-btn) { min-height: 44px; height: 44px; min-width: 44px; }
body.tm-page.tm-inner .tm-blog-content .code-frame .copy-btn { min-height: 44px !important; height: 44px !important; min-width: 44px !important; }
body.tm-page.direction-a-landing .da-faq-section summary { min-height: 44px; display: flex; align-items: center; }
body.tm-page.tm-inner .tm-pricing-page .tm-inner-hero { padding: 40px 0 32px; }
body.tm-page.tm-inner .tm-pricing-page .tm-inner-meta { display: flex; flex-wrap: wrap; gap: 12px 20px; }
body.tm-page.tm-inner .tm-pricing-page .tm-inner-meta > span { color: var(--da-muted); opacity: 1; }
body.tm-page.tm-inner :is(.tm-fr-stat-card,.tm-fr-item,.tm-fr-empty) { border-radius: var(--radius-surface); background: var(--da-surface); }
body.tm-page .tm-site-footer { background: var(--da-surface-soft); }
body.tm-page .tm-site-footer :is(p,a,h4) { font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
body.tm-page .tm-site-footer :is(.tm-site-footer-blurb,.tm-site-footer-newsletter p) { color: var(--da-muted); opacity: 1; }
body.tm-page .tm-site-footer-grid { row-gap: 32px; }
body.tm-page .tm-site-footer a { line-height: 1.6; }
body.tm-page .tm-site-footer input { border-radius: var(--radius-control); min-height: 44px; background: var(--da-surface); color: var(--da-ink); }

/* A single focused auth surface; each hidden state keeps its existing hooks. */
body.tm-page.tm-login-page {
  --tm-paper: var(--da-paper); --tm-white: var(--da-surface); --tm-forest: var(--da-ink);
  --tm-surface-card: var(--da-surface); --tm-surface-subcard: var(--da-surface-soft);
  --public-action-ink: #f5faf6; --public-action-bg: #245d43;
}
html.dark-mode body.tm-page.tm-login-page { --public-action-ink: #15251c; --public-action-bg: #b3d4bc; }
body.tm-page.tm-login-page .tm-btn.tm-btn-primary { color: var(--public-action-ink); background: var(--public-action-bg); border-color: var(--public-action-bg); }
body.tm-page.tm-login-page .auth-panel .google-btn { color: var(--da-ink); background: var(--da-surface); border-color: var(--da-line-strong); }
body.tm-page.tm-login-page.tm-oauth-page .auth-panel .tm-oauth-marketing-consent { border: 0; background: transparent; padding: 8px 0; border-radius: var(--radius-control); min-height: 44px; }
body.tm-page.tm-login-page .tm-oauth-marketing-consent :is(span,strong) { color: var(--da-ink); font-size: 13px; letter-spacing: 0; }
body.tm-page.tm-login-page .auth-shell.tm-login-shell {
  min-height: 560px;
  padding: clamp(32px,6vw,72px) 20px;
  display: block;
}
body.tm-page.tm-login-page .tm-login-layout {
  display: block;
  width: min(100%,440px);
  margin-inline: auto;
}
body.tm-page.tm-login-page .tm-login-auth-stack { position: static; }
body.tm-page.tm-login-page .auth-panel.tm-login-panel {
  border: 1px solid var(--da-line);
  border-radius: var(--radius-surface);
  background: var(--da-surface);
  padding: clamp(24px,4vw,32px);
  box-shadow: 0 4px 20px color-mix(in srgb,var(--da-ink) 4%,transparent);
  gap: 16px;
}
body.tm-page.tm-login-page :is(.tm-login-panel-title,.tm-login-panel-subtitle) { color: var(--da-ink); opacity: 1; }
body.tm-page.tm-login-page .tm-login-panel-title { font: 650 28px/1.2 var(--font-body); letter-spacing: -.035em; }
body.tm-page.tm-login-page .tm-login-panel-subtitle { color: var(--da-muted); font-size: 14px; }
body.tm-page.tm-login-page .tm-login-form { gap: 12px; }
body.tm-page.tm-login-page :is(.input,.google-btn) {
  border: 1px solid var(--da-line-strong);
  border-radius: var(--radius-control);
  background: var(--da-surface);
  color: var(--da-ink);
  min-height: 48px;
}
body.tm-page.tm-login-page .google-btn { margin-top: 8px; }
body.tm-page.tm-login-page .public-field-label { font: 600 14px/1.4 var(--font-body); color: var(--da-ink); margin-bottom: -4px; }
body.tm-page.tm-login-page .checkbox-row { min-height: 44px; margin: 0; color: var(--da-muted); }
body.tm-page.tm-login-page .checkbox-row input { accent-color: var(--public-positive-ink); }
body.tm-page.tm-login-page .divider { color: var(--da-muted); font: 12px/1.4 var(--font-body); }
body.tm-page.tm-login-page .divider span { background: var(--da-surface); text-transform: none; }
body.tm-page.tm-login-page .message:empty { display: none; }
body.tm-page.tm-login-page .message { overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
body.tm-page.tm-login-page .message.error { color: var(--public-error-ink); background: var(--public-error-surface); border: 1px solid color-mix(in srgb,var(--public-error-ink) 25%,transparent); border-radius: var(--radius-control); padding: 12px; }
body.tm-page.tm-login-page .message.success { color: var(--public-positive-ink); }
body.tm-page.tm-login-page .public-auth-note { margin: 0; font-size: 12px; line-height: 1.6; color: var(--da-muted); }
body.tm-page.tm-oauth-page .tm-oauth-layout { width: min(100%,480px); }
body.tm-page.tm-oauth-page .auth-shell.tm-login-shell { width: 100%; flex: 1; }
body.tm-page.tm-oauth-page .tm-oauth-panel-head { display: grid; gap: 16px; }
body.tm-page.tm-oauth-page .tm-oauth-helper { color: var(--da-muted); font-size: 13px; }
body.tm-page.tm-oauth-page .tm-login-capabilities { border-radius: var(--radius-control); background: var(--da-surface-soft); }
body.tm-page [hidden] { display: none !important; }

@media (max-width: 767px) {
  body.tm-page { --tm-shell-gutter: 20px; }
  body.tm-page .tm-nav-inner { gap: 8px; }
  body.tm-page .tm-nav-wordmark { font-size: 17px; }
  body.tm-page .tm-nav-subline { display: none; }
  body.tm-page :is(.tm-nav-actions,.nav-actions) { gap: 6px; }
  body.tm-page .tm-inner-card-grid { grid-template-columns: minmax(0,1fr); }
  body.tm-page .tm-inner-h1 { font-size: clamp(28px,7vw,36px); }
  body.tm-page :is(.tm-inner-section-label,.tm-inner-card-label,.tm-inner-card-link,
    .tm-breadcrumb li,.tm-category-chip,.tm-tag-chip,.tm-label-text,
    .tm-marketing-formula-kicker,.da-label,.da-eyebrow,.da-demo-output-head) { font-size: 12px; }
  body.tm-page .tm-inner-meta > span { font-size: 12px; }
  body.tm-page .tm-site-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.tm-page .tm-site-footer-grid > :first-child { grid-column: 1 / -1; }
  body.tm-page .tm-site-footer-grid > * { min-width: 0; }
  body.tm-page .tm-site-footer-grid a { font-size: 13px; }
  body.tm-page .tm-site-footer-bottom { flex-wrap: wrap; gap: 12px; }
  body.tm-page.tm-login-page .auth-shell.tm-login-shell { min-height: 500px; padding: 32px 16px; }
  body.tm-page.tm-login-page .auth-panel.tm-login-panel { padding: 24px; }
  body.tm-page .tm-marketing-formula-module { min-width: 0; }
  body.tm-page .tm-category-nav { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 359px) {
  body.tm-page { --tm-shell-gutter: 16px; }
  body.tm-page .tm-nav-logo-box { width: 30px; height: 30px; }
  body.tm-page .tm-nav-wordmark { font-size: 15px; }
  body.tm-page .tm-nav-actions > .tm-btn { padding-inline: 10px; }
  body.tm-page.tm-login-page .auth-panel.tm-login-panel { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body.tm-page *,body.tm-page *::before,body.tm-page *::after { scroll-behavior: auto; animation: none !important; transition: none !important; }
}

/* Approved B editorial system. Marketing keeps its own layout and uses the
   same neutral document surfaces, logo green, and ordinary-case controls. */
body.tm-page {
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --public-heading-font: Georgia, "Times New Roman", serif;
  --tm-font-display: var(--public-heading-font);
  --radius-control: 8px; --radius-compact: 8px; --radius-surface: 10px;
  --da-paper: #faf8f5; --da-surface: #fffdfa; --da-surface-soft: #f2eee8;
  --da-ink: #242824; --da-muted: #60665f; --da-line: #d9d8d0; --da-line-strong: #c7c9bd;
  --da-green: #1A3C2B; --da-green-dark: #214b36; --da-green-soft: #e5ece7;
  --da-shadow: none; --public-accent: #1A3C2B; --public-accent-hover: #214b36;
  --public-primary-ink: #fffdfa; --public-selected-ink: #1A3C2B;
  --public-action-ink: #fffdfa; --public-action-bg: #1A3C2B;
  --tm-paper: var(--da-paper); --tm-white: var(--da-surface); --tm-forest: var(--da-green);
  background: var(--da-paper); color: var(--da-ink); font-family: var(--font-body);
}
html.dark-mode body.tm-page {
  --da-paper: #191d19; --da-surface: #222822; --da-surface-soft: #2b312b;
  --da-ink: #f1eee7; --da-muted: #b9bcb3; --da-line: #414940; --da-line-strong: #626c60;
  --da-green: #b5cbbd; --da-green-dark: #d4e1d6; --da-green-soft: #2b3b2e;
  --public-selected-ink: #c4d7ca; --public-action-ink: #fffdfa; --public-action-bg: #1A3C2B;
}
body.tm-page :is(.tm-nav,.tm-site-footer,.footer-lite) { background: var(--da-surface) !important; border-color: var(--da-line); }
body.tm-page .tm-nav-subline { display: none; }
body.tm-page :is(.da-hero-mesh,.da-eyebrow,.da-tool-index,.tm-inner-hero-eyebrow,.tm-hero-eyebrow,.tm-inner-section-label,.tm-section-label,.tm-section-kicker,.tm-inner-card-label) { display: none !important; }
body.tm-page :is(.tm-comparison-page,.tm-alternative-page) .tm-inner-hero .tm-label { display: none; }
body.tm-page .da-hero::before { display: none; }
body.tm-page :is(h1,h2,h3,.tm-inner-h1,.tm-inner-h2,.tm-h1,.tm-h2) { font-family: var(--public-heading-font) !important; font-weight: 500 !important; letter-spacing: -.025em !important; text-transform: none !important; color: var(--da-ink); }
body.tm-page :is(.tm-inner-h1,.tm-h1,.tm-content-page > h1) { font-size: clamp(30px,3vw,40px) !important; line-height: 1.16 !important; }
body.tm-page :is(.tm-inner-h2,.tm-h2,.da-section-heading h2) { font-size: clamp(24px,2.2vw,30px) !important; line-height: 1.2 !important; }
body.tm-page.direction-a-landing .da-hero h1 { font-size: clamp(36px,4vw,52px) !important; line-height: 1.08 !important; }
body.tm-page :is(.tm-inner-hero,.tm-inner-section) { padding-block: 32px; }
body.tm-page :is(.tm-inner-body,.tm-inner-subtitle,.tm-inner-definition,.tm-inner-card-desc,.tm-inner-section-p,.tm-faq-body,.da-lede,.da-heading-aside) { font-size: 15px; line-height: 1.65; color: var(--da-muted); }
body.tm-page :is(.tm-inner-card,.tm-blog-card,.blog-card,.tm-nc,.tm-faq-item,.da-tool-card,.da-demo-card,.da-review-panel,.da-example-sheet,.tm-plan-card) { background: var(--da-surface); border-color: var(--da-line); border-radius: var(--radius-surface); box-shadow: none !important; }
body.tm-page :is(.tm-inner-section-alt,.da-review-section,.da-team-section) { background: var(--da-surface-soft); }
body.tm-page :is(.tm-badge,.tm-chip,.chip,.badge,.tm-tag-chip,.tm-blog-tag,.tm-inner-meta > span,.tm-category-chip) { border-radius: var(--radius-control) !important; font-family: var(--font-body) !important; text-transform: none !important; letter-spacing: normal !important; }
body.tm-page :is(.tm-badge,.tm-tag-chip,.tm-blog-tag,.tm-inner-meta > span) { border: 0; padding-inline: 0; background: transparent; }
body.tm-page .tm-badge-dot { display: none; }
body.tm-page :is(.tm-category-chip,.tm-category-nav .tm-chip,.tm-billing-option,.da-mode-tab,.da-toggle-option) { border-radius: var(--radius-control); background: transparent; color: var(--da-muted); font-family: var(--font-body); letter-spacing: normal; box-shadow: none; }
body.tm-page .tm-category-chip.active { color: var(--public-selected-ink); border-color: var(--public-selected-ink); background: var(--da-surface-soft); }
body.tm-page :is(.tm-billing-toggle,.da-pricing-toggle,.da-mode-tabs) { background: transparent; border-radius: var(--radius-control); box-shadow: none; border-color: var(--da-line); }
body.tm-page :is(.tm-billing-option.is-active,.da-toggle-option.is-active,.da-mode-tab.is-active) { color: var(--public-selected-ink); background: var(--da-surface-soft); box-shadow: none; }
body.tm-page :is(.tm-billing-discount,.tm-plan-launch,.tm-plan-popular) { border: 0; border-radius: var(--radius-control); background: transparent; color: var(--da-muted); font-family: var(--font-body); text-transform: none; letter-spacing: normal; }
body.tm-page :is(.tm-btn-primary,.btn-primary,.da-button-primary),
html.dark-mode body.tm-page :is(.tm-btn-primary,.btn-primary,.da-button-primary) {
  color: var(--public-primary-ink) !important; background: var(--public-accent) !important; border-color: var(--public-accent) !important;
  border-radius: var(--radius-control) !important; box-shadow: none !important;
}
body.tm-page :is(.tm-btn-primary,.btn-primary,.da-button-primary):hover { background: var(--public-accent-hover) !important; }
body.tm-page :is(.tm-btn-secondary,.btn-secondary,.da-button-secondary) { color: var(--da-ink); background: var(--da-surface); border-color: var(--da-line-strong); box-shadow: none; }
html.dark-mode body.tm-page :is(.tm-btn-primary,.btn-primary,.da-button-primary) { border-color: #718775 !important; }
body.tm-page.tm-inner .tm-pricing-page .tm-plan-card.is-featured { --plan-ink: var(--da-ink); background: var(--da-surface); color: var(--da-ink); border-color: var(--public-accent); box-shadow: none; }
html.dark-mode body.tm-page .tm-plan-card.is-featured { border-color: #718775; }
body.tm-page .tm-plan-card.is-featured :is(.tm-plan-fit,.tm-inner-body-sm,.tm-plan-period,.tm-plan-features li,.tm-plan-price,.tm-plan-name) { color: var(--da-ink); opacity: 1; }
body.tm-page :is(.tm-plan-name,.tm-plan-fit,.tm-plan-desc,.tm-plan-period) { font-family: var(--font-body); text-transform: none; }
body.tm-page :is(.tm-plan-features li,.tm-inner-card-list li) { color: var(--da-muted); }
body.tm-page :is(.tm-inner-card-icon,.da-tool-icon) { background: transparent; border: 0; color: var(--public-selected-ink); }
body.tm-page .da-tool-card:hover { box-shadow: none; transform: none; border-color: var(--da-line-strong); }
body.tm-page :is(.tm-marketing-formula-output,.code-frame,.tm-inner-card-code,.tm-formula-surface__code,.da-formula-output) { background: var(--da-surface-soft); border-color: var(--da-line); border-radius: var(--radius-control); }
body.tm-page.tm-login-page { --tm-forest: var(--da-ink); --public-action-ink: #fffdfa; --public-action-bg: #1A3C2B; }
html.dark-mode body.tm-page.tm-login-page { --public-action-ink: #fffdfa; --public-action-bg: #1A3C2B; }
body.tm-page.tm-login-page .auth-panel.tm-login-panel { border-radius: var(--radius-surface); box-shadow: none; padding: 24px; }
body.tm-page.tm-login-page .tm-login-panel-title { font: 500 24px/1.2 var(--public-heading-font) !important; letter-spacing: -.025em !important; }
body.tm-page.tm-login-page :is(.input,.google-btn) { min-height: 44px; border-radius: var(--radius-control); }
body.tm-page.tm-login-page .input { font-size: 16px; }
body.tm-page.tm-login-page :is(.tm-login-panel-subtitle,.public-field-label) { font-family: var(--font-body) !important; }
body.tm-page.tm-oauth-page .tm-oauth-brand-wordmark { font: 650 16px/1.4 var(--font-body); letter-spacing: -.02em; }
body.tm-page.tm-oauth-page .tm-oauth-brand-subline { display: none; }
body.tm-page :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--public-selected-ink); outline-offset: 3px; }
body.tm-page .tm-site-footer-grid { gap: 28px; }
body.tm-page .tm-site-footer-title { color: var(--da-ink); font: 600 14px/1.4 var(--font-body); }
@media(max-width:767px) {
  body.tm-page { --tm-shell-gutter: 16px; }
  body.tm-page :is(.tm-inner-h1,.tm-h1,.tm-content-page > h1) { font-size: 30px !important; }
  body.tm-page.direction-a-landing .da-hero h1 { font-size: 36px !important; }
  body.tm-page :is(.tm-inner-h2,.tm-h2,.da-section-heading h2) { font-size: 24px !important; }
  body.tm-page :is(.tm-inner-hero,.tm-inner-section) { padding-block: 24px; }
  body.tm-page.tm-login-page .tm-login-panel-title { font-size: 22px !important; }
  body.tm-page.tm-login-page .auth-shell.tm-login-shell { min-height: auto; padding-block: 24px 32px; }
  body.tm-page :is(.da-tool-grid,.da-container) { min-width: 0; }
}
body.tm-page :is(.tm-hero-eyebrow-pill,.tm-fr-kicker,.tm-inner-cta-label,.tm-blog-card-category) { display: none !important; }
body.tm-page :is(.tm-plan-name,.tm-plan-launch,.tm-plan-popular,.tm-billing-discount) { border: 0; border-radius: var(--radius-control); padding-inline: 0; background: transparent; }
body.tm-page .public-affiliate-results :is(td,th,p) { font: 14px/1.55 var(--font-body); }
body.tm-page .public-affiliate-results .affiliate-metric-label { font: 500 14px/1.4 var(--font-body) !important; letter-spacing: normal !important; margin: 0 0 8px; }
body.tm-page .public-affiliate-results .affiliate-metric-value { font: 650 28px/1.3 var(--font-body); }
body.tm-page .public-affiliate-results .tm-label { font: 500 12px/1.4 var(--font-body); }
body.tm-page .public-affiliate-results #referral-link-input { font: 16px/1.4 var(--font-body); min-height: 44px; }
body.tm-page .tm-plan-name { font: 600 14px/1.4 var(--font-body) !important; }
body.tm-page .tm-plan-period { font: 400 14px/1.4 var(--font-body) !important; }
body.tm-page .da-status { border: 0; background: transparent; padding-inline: 0; font: 500 12px/1.4 var(--font-body); }
body.tm-page .tm-site-footer-head { font: 600 14px/1.4 var(--font-body); text-transform: none; letter-spacing: normal; color: var(--da-ink); }
body.tm-page .tm-site-brand-word { font: 650 16px/1.4 var(--font-body); letter-spacing: -.02em; }
body.tm-page .tm-site-footer-links a { display: inline-flex; align-items: center; min-height: 36px; font: 14px/1.5 var(--font-body); }
@media(max-width:767px), (pointer:coarse) {
  body.tm-page .tm-site-footer-links a { min-height: 44px; }
  body.tm-page .tm-site-footer-social a { min-width: 44px; min-height: 44px; }
}
body.tm-page :is(.tm-btn-solid,.tm-btn-solid-inv) {
  color: var(--public-primary-ink) !important; background: var(--public-accent) !important;
  border-color: var(--public-accent) !important; border-radius: var(--radius-control) !important;
  box-shadow: none !important; font-family: var(--font-body) !important;
}
html.dark-mode body.tm-page :is(.tm-btn-solid,.tm-btn-solid-inv) { border-color: #718775 !important; }
body.tm-page :is(.tm-btn-solid,.tm-btn-solid-inv):hover { background: var(--public-accent-hover) !important; }
body.tm-page :is(.tm-flow-step-num,.tm-flow-step-desc,.tm-site-footer-copy) { font-family: var(--font-body); text-transform: none !important; letter-spacing: normal !important; }
body.tm-page .tm-flow-step-num { display: none; }
body.tm-page .tm-flow-step-desc { font-size: 14px; line-height: 1.55; }
body.tm-page .tm-site-footer-copy { font-size: 12px; line-height: 1.5; }
body.tm-page .formula-tag { background: transparent; border: 0; padding-inline: 0; border-radius: var(--radius-control); font: 12px/1.4 var(--font-body); }
/* A terminal preview error remains visible, without suggesting the request is still running. */
body.tm-page #demo-form:has([aria-busy="false"]) ~ #demo-result .da-spinner { display: none; }

/* Shared public chrome: keep the existing square mark identity while clipping
   it to a small rounded tile in every header and footer lockup. */
body.tm-page :is(.tm-nav-logo-box,.tm-site-brand-mark,.tm-oauth-brand-mark) {
  overflow: hidden;
  border-radius: var(--radius-control);
  isolation: isolate;
  flex: 0 0 auto;
}
body.tm-page :is(.tm-nav-logo-box,.tm-site-brand-mark,.tm-oauth-brand-mark) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Footer groups are independent grid items. This keeps mobile rows balanced
   instead of stacking two long groups inside each oversized column. */
body.tm-page .tm-site-footer {
  background: var(--da-paper) !important;
  border-top: 1px solid var(--da-line);
}
body.tm-page .tm-site-footer-inner {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding: 40px 24px 20px;
}
body.tm-page .tm-site-footer-grid {
  display: grid;
  grid-template-columns: minmax(190px,1.2fr) repeat(4,minmax(0,1fr));
  align-items: start;
  gap: 28px 24px;
}
body.tm-page .tm-site-footer-grid > * { min-width: 0; }
body.tm-page .tm-site-footer-brand-column { max-width: 30ch; }
body.tm-page .tm-site-footer-group { min-width: 0; }
body.tm-page .tm-site-footer-head {
  margin: 0 0 8px;
  color: var(--da-ink);
  font: 600 14px/1.4 var(--font-body);
  text-transform: none;
  letter-spacing: normal;
}
body.tm-page .tm-site-footer-links {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
}
body.tm-page .tm-site-footer-links a {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--da-muted);
  font: 14px/1.4 var(--font-body);
  opacity: 1;
  overflow-wrap: anywhere;
  text-decoration: none;
}
body.tm-page .tm-site-footer-links a:hover { color: var(--da-ink); }
body.tm-page .tm-site-footer-blurb,
body.tm-page .tm-site-footer-updates {
  color: var(--da-muted);
  font-size: 14px;
  line-height: 1.55;
  opacity: 1;
}
body.tm-page .tm-site-footer-blurb { margin-top: 12px; }
body.tm-page .tm-site-footer-updates { margin: 0; }
body.tm-page .tm-site-footer-subscribe { grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: 12px; }
body.tm-page .tm-site-footer-subscribe .tm-btn { width: 100%; min-height: 44px; }
body.tm-page .tm-site-footer-input { min-height: 44px; height: 44px; font-size: 16px; opacity: 1; }
body.tm-page .tm-site-footer-meta {
  border-color: var(--da-line);
  margin-top: 32px;
  padding-top: 16px;
}
body.tm-page .tm-site-footer-copy,
body.tm-page .tm-site-footer-legal a {
  color: var(--da-muted);
  font: 13px/1.5 var(--font-body);
  text-transform: none;
  letter-spacing: normal;
  opacity: 1;
}

/* Catalog and blog filters read as simple tabs, not a row of boxed chips. */
body.tm-page .tm-category-nav {
  display: flex;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
  overflow: visible;
  border-bottom: 1px solid var(--da-line);
  padding: 0;
}
body.tm-page .tm-category-nav .tm-category-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  height: auto;
  padding: 0 0 2px;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: var(--da-muted) !important;
  font: 14px/1.4 var(--font-body) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  opacity: 1;
}
body.tm-page .tm-category-nav .tm-category-chip::before { content: none !important; display: none !important; }
body.tm-page .tm-category-nav .tm-category-chip:is(.active,.is-active) {
  border-bottom-color: var(--public-accent) !important;
  color: var(--da-ink) !important;
  background: transparent !important;
}
body.tm-page .tm-category-nav .tm-category-chip:focus-visible {
  outline-offset: 2px;
}
@media (max-width: 1200px) {
  body.tm-page .tm-site-footer-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  body.tm-page .tm-site-footer-brand-column { grid-column: span 2; }
}
@media (max-width: 767px) {
  body.tm-page .tm-site-footer-inner { padding: 32px 16px 16px; }
  body.tm-page .tm-site-footer-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 24px 16px;
  }
  body.tm-page .tm-site-footer-brand-column,
  body.tm-page .tm-site-footer-updates-column { grid-column: 1 / -1; }
  body.tm-page .tm-site-footer-links { gap: 2px; }
  body.tm-page .tm-site-footer-links a { min-height: 44px; }
  body.tm-page .tm-site-footer-meta { align-items: flex-start; gap: 12px; }
  body.tm-page .tm-site-footer-legal { flex-wrap: wrap; gap: 4px 16px; }
}
@media (max-width: 359px) {
  body.tm-page .tm-site-footer-grid { column-gap: 12px; }
  body.tm-page .tm-site-footer-inner { padding-inline: 16px; }
  body.tm-page .tm-category-nav { column-gap: 16px; }
}

/* Footer social links use the same quiet rounded controls as the rest of the
   public site, with recognizable marks and a comfortable touch target. */
body.tm-page .tm-site-footer .tm-site-footer-social a {
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--da-line);
  border-radius: var(--radius-control);
  background: var(--da-surface);
  color: var(--da-ink);
  opacity: 1;
}
body.tm-page .tm-site-footer .tm-site-footer-social a:hover {
  border-color: var(--da-line-strong);
  background: var(--da-surface-soft);
}
body.tm-page .tm-site-footer .tm-site-footer-social svg {
  display: block;
  width: 18px;
  height: 18px;
}
body.tm-page .tm-site-footer .tm-site-footer-social .tm-social-x,
body.tm-page .tm-site-footer .tm-site-footer-social .tm-social-github {
  fill: currentColor;
  stroke: none;
}
body.tm-page .tm-site-footer .tm-site-footer-social .tm-social-email {
  fill: none;
  stroke: currentColor;
}


/* partials/public-home-visuals.css */
/* Homepage-only visual rhythm. B roles and shared controls remain in public-saas.css. */
body.tm-page.direction-a-landing .da-hero {
  padding-block: 44px 28px;
}
body.tm-page.direction-a-landing .da-hero-grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 48px;
}
body.tm-page.direction-a-landing .home-hero-workbench { min-width: 0; }
body.tm-page.direction-a-landing .home-illustration { margin: 0; }
body.tm-page.direction-a-landing .home-illustration img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
body.tm-page.direction-a-landing .home-illustration figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
body.tm-page.direction-a-landing .home-hero-illustration {
  margin-bottom: 18px;
}
body.tm-page.direction-a-landing .home-hero-illustration img {
  max-height: 260px;
}
body.tm-page.direction-a-landing .home-hero-illustration figcaption { text-align: center; }
body.tm-page.direction-a-landing .da-demo-card { padding: 20px; }
body.tm-page.direction-a-landing .da-demo-head h2 { font-size: 23px; }
body.tm-page.direction-a-landing .da-demo-description { margin-block: 12px 16px; }
body.tm-page.direction-a-landing .da-demo-foot { padding-top: 12px; }
body.tm-page.direction-a-landing .da-example-wrap { margin-top: 32px; }
body.tm-page.direction-a-landing .da-section { padding-block: 52px; }
body.tm-page.direction-a-landing .da-section-tight { padding-top: 32px; }
body.tm-page.direction-a-landing .da-section-heading { margin-bottom: 22px; }
body.tm-page.direction-a-landing :is(#tools, #mode-switch, #pricing) { scroll-margin-top: 80px; }

/* Individual linked tasks, with open canvas between rows: no filled grid slab. */
body.tm-page.direction-a-landing .home-task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.tm-page.direction-a-landing .home-task-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 16px;
  align-items: start;
  column-gap: 12px;
  min-height: 112px;
  min-width: 0;
  padding: 18px 16px;
  border: 1px solid var(--da-line);
  border-radius: var(--radius-surface);
  background: var(--da-surface);
  text-decoration: none;
}
body.tm-page.direction-a-landing .home-task-row:hover {
  border-color: var(--da-line-strong);
  background: var(--da-surface-soft);
}
body.tm-page.direction-a-landing .home-task-icon,
body.tm-page.direction-a-landing .da-workflow-grid article > svg {
  width: 24px;
  height: 24px;
  color: var(--public-selected-ink);
  stroke-width: 1.7;
}
body.tm-page.direction-a-landing .home-task-arrow {
  align-self: center;
  width: 16px;
  height: 16px;
  color: var(--da-muted);
  stroke-width: 1.7;
}
body.tm-page.direction-a-landing .home-task-copy { min-width: 0; }
body.tm-page.direction-a-landing .home-task-copy h3 {
  margin: 0 0 5px;
  color: var(--da-ink);
  font: 650 15px/1.35 var(--font-body) !important;
  letter-spacing: normal;
}
body.tm-page.direction-a-landing .home-task-copy p {
  min-height: 0;
  margin: 0;
  color: var(--da-muted);
  font: 14px/1.5 var(--font-body);
}

/* Example tabs switch content on one quiet surface, without nested themed cards. */
body.tm-page.direction-a-landing .da-review-section { background: var(--da-paper); }
body.tm-page.direction-a-landing .da-review-layout {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 40px;
}
body.tm-page.direction-a-landing .home-review-illustration {
  max-width: 320px;
  margin-bottom: 20px;
}
body.tm-page.direction-a-landing .home-review-illustration img { max-height: 184px; }
body.tm-page.direction-a-landing .da-review-copy h3 { font-size: 23px; }
body.tm-page.direction-a-landing .da-review-copy p { max-width: 46ch; }
body.tm-page.direction-a-landing .da-mode-card {
  background: var(--da-surface);
  border: 1px solid var(--da-line);
  border-radius: var(--radius-surface);
  box-shadow: none;
}
body.tm-page.direction-a-landing .da-mode-tabs {
  gap: 12px;
  padding: 0 20px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--da-line);
  border-radius: 0;
}
body.tm-page.direction-a-landing .da-mode-card .da-mode-tab {
  min-height: 48px;
  padding-inline: 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--da-muted);
  background: transparent;
  box-shadow: none;
  font: 600 14px/1.4 var(--font-body);
}
body.tm-page.direction-a-landing .da-mode-card .da-mode-tab[aria-selected="true"] {
  color: var(--public-selected-ink);
  border-bottom-color: var(--public-selected-ink);
  background: transparent;
}
body.tm-page.direction-a-landing .da-mode-card .mode-ui {
  min-height: 206px;
  height: auto;
  margin: 0;
  padding: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--da-ink);
}
body.tm-page.direction-a-landing .da-mode-card [data-mode-panel][hidden] { display: none !important; }
body.tm-page.direction-a-landing .da-mode-card [data-mode-panel]:not([hidden]) { display: block; }
body.tm-page.direction-a-landing .da-mode-card .da-output-label {
  margin-bottom: 12px;
  color: var(--da-muted);
  font: 12px/1.5 var(--font-body);
  text-transform: none;
  letter-spacing: normal;
}
body.tm-page.direction-a-landing .da-mode-card .mode-ui code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--da-ink);
  font-size: 13px;
  line-height: 1.8;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.tm-page.direction-a-landing .da-mode-card .mode-ui p { font-size: 14px; line-height: 1.6; }
body.tm-page.direction-a-landing .da-mode-foot { padding: 14px 20px; font-size: 12px; line-height: 1.5; }

body.tm-page.direction-a-landing .home-workflow-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 48px;
}
body.tm-page.direction-a-landing .home-workflow-illustration { max-width: 400px; }
body.tm-page.direction-a-landing .home-workflow-illustration img { max-height: 240px; }
body.tm-page.direction-a-landing .da-workflow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block: 0;
}
body.tm-page.direction-a-landing .da-workflow-grid article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--da-line);
}
body.tm-page.direction-a-landing .da-workflow-grid article:last-child { border-bottom: 0; }
body.tm-page.direction-a-landing .da-workflow-grid h3 {
  margin: 0 0 5px;
  font: 650 15px/1.4 var(--font-body) !important;
  letter-spacing: normal;
}
body.tm-page.direction-a-landing .da-workflow-grid p { max-width: 48ch; font-size: 14px; line-height: 1.6; }
body.tm-page.direction-a-landing .da-footer h2 {
  font: 600 14px/1.5 var(--font-body) !important;
  letter-spacing: normal;
  text-transform: none;
}
body.tm-page.direction-a-landing .da-footer :is(a, .da-footer-brand > p, .da-footer-updates > p) {
  font-size: 14px;
  line-height: 1.5;
}
body.tm-page.direction-a-landing .da-footer-updates form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
body.tm-page.direction-a-landing .da-footer-updates .tm-site-footer-input {
  flex: none;
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  font-size: 16px;
}
body.tm-page.direction-a-landing .da-footer-updates button { min-height: 44px; }
@media (max-width: 1023px) {
  body.tm-page.direction-a-landing .da-hero-grid { gap: 28px; }
  body.tm-page.direction-a-landing .home-task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body.tm-page.direction-a-landing .da-hero { padding-block: 30px 18px; }
  body.tm-page.direction-a-landing .da-hero-grid,
  body.tm-page.direction-a-landing .da-review-layout,
  body.tm-page.direction-a-landing .home-workflow-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  body.tm-page.direction-a-landing .home-hero-illustration { margin-block: 0 16px; }
  body.tm-page.direction-a-landing .home-hero-illustration img { max-height: 190px; }
  body.tm-page.direction-a-landing .da-demo-card { padding: 18px; }
  body.tm-page.direction-a-landing .da-section { padding-block: 38px; }
  body.tm-page.direction-a-landing .da-section-tight { padding-top: 24px; }
  body.tm-page.direction-a-landing .home-task-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.tm-page.direction-a-landing .home-task-row { min-height: 96px; padding: 16px; }
  body.tm-page.direction-a-landing .home-task-copy h3 { font-size: 15px !important; }
  body.tm-page.direction-a-landing .home-review-illustration { max-width: 100%; margin-bottom: 18px; }
  body.tm-page.direction-a-landing .home-review-illustration img { max-height: 160px; }
  body.tm-page.direction-a-landing .home-workflow-illustration { max-width: 100%; }
  body.tm-page.direction-a-landing .home-workflow-illustration img { max-height: 190px; }
  body.tm-page.direction-a-landing .da-mode-tabs { padding-inline: 18px; gap: 16px; }
  body.tm-page.direction-a-landing .da-mode-card .mode-ui { padding: 18px; min-height: 226px; }
  body.tm-page.direction-a-landing .da-mode-foot { padding-inline: 18px; }
}


/* partials/public-subpages-visuals.css */
/* Public editorial subpages. Paid workspaces and checkout state remain outside this scope. */
body.tm-page .da-plan-card li:has(.tm-plan-check)::before { content: none; }
body.tm-page .da-plan-card li:has(.tm-plan-check) { display: flex; align-items: flex-start; gap: 8px; padding-left: 0; }
body.tm-page .da-plan-card .tm-plan-check { flex: 0 0 14px; margin-top: 2px; }

body.tm-page.tm-inner .tm-public-hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr); gap: 32px; align-items: center;
}
body.tm-page.tm-inner .tm-public-hero-copy { min-width: 0; }
body.tm-page .tm-public-illustration { min-width: 0; margin: 0; }
body.tm-page .tm-public-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; max-height: 230px; }
body.tm-page.tm-inner :is(.tm-public-workflow, .tm-public-feature-story) {
  display: grid; grid-template-columns: minmax(180px, .32fr) minmax(0, 1fr); align-items: center; gap: 32px;
}
body.tm-page.tm-inner .tm-public-workflow .tm-flow-pipeline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: transparent; }
body.tm-page.tm-inner .tm-public-workflow .tm-flow-step {
  min-height: 0; padding: 14px 0; border: 0; border-bottom: 1px solid var(--da-line); background: transparent; box-shadow: none;
}
body.tm-page.tm-inner .tm-public-workflow .tm-flow-step:last-child { border-bottom: 0; }
body.tm-page.tm-inner .tm-public-workflow .tm-flow-step-title { margin: 0 0 6px; font-size: 20px; }
body.tm-page.tm-inner .tm-public-workflow .tm-flow-step-desc { max-width: 62ch; }
body.tm-page.tm-inner .tm-public-feature-story .tm-inner-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
body.tm-page.tm-inner .tm-public-feature-story .tm-inner-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
body.tm-page.tm-inner .tm-public-feature-story .tm-inner-card-icon { display: none; }
body.tm-page.tm-inner :is(.tm-inner-hero-copy, .tm-public-hero-copy) :is(.tm-inner-body, .tm-inner-definition) { max-width: 66ch; }
body.tm-page.tm-inner .tm-inner-hero-2col { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 32px; }
body.tm-page.tm-inner :is(.tm-category-nav, .tm-breadcrumb) { flex-wrap: wrap; }
body.tm-page.tm-inner .tm-content-page { padding: 0; border: 0; background: transparent; box-shadow: none; }
body.tm-page.tm-inner .tm-content-page > h2 { font-size: 22px; line-height: 1.35; }
body.tm-page.tm-inner .tm-content-page :is(p,li) { line-height: 1.7; }
body.tm-page.tm-inner .tm-content-page a { text-underline-offset: 3px; }
body.tm-page.tm-inner .tm-faq-list { max-width: 860px; margin-inline: auto; }
body.tm-page.tm-inner .tm-faq-item summary { min-height: 52px; gap: 12px; }
body.tm-page.tm-inner .tm-faq-indicator { flex: 0 0 24px; }
@media (max-width: 767px) {
  body.tm-page.tm-inner :is(.tm-public-hero-split, .tm-public-workflow, .tm-public-feature-story, .tm-inner-hero-2col) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.tm-page.tm-inner .tm-public-illustration { width: min(100%, 260px); margin-inline: auto; }
  body.tm-page.tm-inner .tm-public-illustration img { max-height: 136px; }
  body.tm-page.tm-inner .tm-public-hero-split .tm-public-illustration img { max-height: 112px; }
  body.tm-page.tm-inner .tm-public-feature-story .tm-inner-card-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.tm-page.tm-inner .tm-public-feature-story .tm-inner-card { border-top: 1px solid var(--da-line); padding-top: 16px; }
  body.tm-page.tm-inner .tm-content-page > h2 { font-size: 20px; }
  body.tm-page.tm-inner .tm-faq-item summary { padding-block: 16px; }
  body.tm-page.tm-inner .tm-inner-card { min-height: 0; }
}
/* Alternative comparison data already contains its literal status marker. */
body.tm-page .tm-alternative-page .cell-winner::before { content: none; }

body.tm-page.tm-inner .tm-public-index-note { margin-top: 24px; max-width: 74ch; }

/* Plan names are plain readable labels; billing scripts keep the existing hooks. */
body.tm-page :is(.da-plan-kicker, .tm-plan-name) {
  font: 650 16px/1.4 var(--font-body) !important; color: var(--da-ink);
  text-transform: none !important; letter-spacing: normal !important;
}
body.tm-page .tm-public-auth-illustration { display: none; margin: 0; }
@media (min-width: 901px) {
  body.tm-page.tm-login-page .tm-login-layout:has(.tm-public-auth-illustration) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    width: min(100%, 920px); gap: 48px; align-items: center;
  }
  body.tm-page.tm-login-page .tm-public-auth-illustration { display: block; min-width: 0; }
  body.tm-page.tm-login-page .tm-public-auth-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; max-height: 280px; object-fit: contain; }
}
body.tm-page.tm-login-page .public-auth-note { opacity: 1; }

/* Card headings carry the role/comparison identity; avoid repeating it as an eyebrow. */
body.tm-page.tm-inner :is(.usecase-card, .related-usecase-card) > .tm-chip,
body.tm-page.tm-inner .tm-comparison-index-grid .tm-inner-card-badges { display: none; }

/* Useful catalog metadata stays readable, plain and secondary to the title. */
body.tm-page.tm-inner .formula-grid .tm-inner-card-title,
body.tm-page.tm-inner .tm-blog-card-title { order: 0; }
body.tm-page.tm-inner .formula-grid .tm-inner-card-badges,
body.tm-page.tm-inner .tm-blog-card-meta {
  order: 1; display: flex; flex-wrap: wrap; gap: 12px; margin: 0;
}
body.tm-page.tm-inner .formula-grid .tm-inner-card-body,
body.tm-page.tm-inner .tm-blog-card-excerpt { order: 2; }
body.tm-page.tm-inner .formula-grid .tm-inner-card-badges > .tm-chip,
body.tm-page.tm-inner .tm-blog-card-meta > span {
  display: inline; min-height: 0; padding: 0; border: 0; background: transparent;
  font: 400 14px/1.5 var(--font-body) !important; color: var(--da-muted); opacity: 1;
  text-transform: none; letter-spacing: normal !important;
}
body.tm-page.tm-inner .formula-grid .tm-inner-card-badges > .tm-chip::before { content: none; display: none; }
body.tm-page.tm-inner :is(.tm-inner-card-badges, .tm-nc-header) > .tm-chip,
body.tm-page.tm-inner .usecase-example-card > .tm-chip {
  min-height: 0; height: auto; padding: 0; border: 0; background: transparent;
  font: 400 14px/1.5 var(--font-body) !important; color: var(--da-muted); opacity: 1;
  text-transform: none; letter-spacing: normal !important;
}
body.tm-page.tm-inner :is(.tm-inner-card-badges, .tm-nc-header) > .tm-chip::before,
body.tm-page.tm-inner .usecase-example-card > .tm-chip::before { content: none; display: none; }

body.tm-page.tm-inner .formula-grid .tm-inner-card > :not(.tm-inner-card-title, .tm-inner-card-badges, .tm-inner-card-body) { order: 3; }
/* Avoid compounded legacy alpha on small editorial-card descriptions and dates. */
body.tm-page.tm-inner .tm-blog-card :is(.tm-blog-card-excerpt, .tm-blog-card-author, .tm-blog-card-date) { color: var(--da-muted); opacity: 1; }


/* partials/workspace-b.css */
/* Approved Concept B: warm editorial workspace. Existing selectors and controllers stay intact. */
body.app-layout.workspace-b {
  --fg-canvas: #faf8f5;
  --fg-surface: #fffdfa;
  --fg-surface-alt: #f2eee8;
  --fg-sidebar: #eeebe5;
  --fg-ink: #242824;
  --fg-muted: #60665f;
  --fg-line: #d9d8d0;
  --fg-line-strong: #bdbfb6;
  --fg-accent: #1A3C2B;
  --fg-accent-strong: #214b36;
  --fg-accent-soft: #e5ece7;
  --fg-radius-control: 8px;
  --fg-radius-small: 6px;
  --fg-radius-nav: 7px;
  --fg-radius-menu: 9px;
  --fg-radius-panel: 10px;
  --fg-shadow: none;
  color: var(--fg-ink);
  background: var(--fg-canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html.dark-mode body.app-layout.workspace-b {
  --fg-canvas: #191d19;
  --fg-surface: #222822;
  --fg-surface-alt: #292f29;
  --fg-sidebar: #202520;
  --fg-ink: #f1efe8;
  --fg-muted: #bdc2b8;
  --fg-line: #3b433b;
  --fg-line-strong: #60695f;
  --fg-accent: #1A3C2B;
  --fg-accent-strong: #24513a;
  --fg-accent-soft: #293b30;
}
body.app-layout.workspace-b[data-workspace="finance"] {
  --fg-accent: #245d9b;
  --fg-accent-strong: #1e4f86;
  --fg-accent-soft: #e5edf7;
  --fg-canvas: #faf8f5;
  --fg-surface: #fffdfa;
  --fg-surface-alt: #f2eee8;
  --fg-sidebar: #eeebe5;
  --fg-ink: #242824;
  --fg-muted: #60665f;
  --fg-line: #d9d8d0;
  --fg-line-strong: #bdbfb6;
}
html.dark-mode body.app-layout.workspace-b[data-workspace="finance"] {
  --fg-accent: #315f91;
  --fg-accent-strong: #3d71aa;
  --fg-accent-soft: #26374a;
  --fg-canvas: #191d19;
  --fg-surface: #222822;
  --fg-surface-alt: #292f29;
  --fg-sidebar: #202520;
  --fg-ink: #f1efe8;
  --fg-muted: #bdc2b8;
  --fg-line: #3b433b;
  --fg-line-strong: #60695f;
}
body.app-layout.workspace-b :is(button, input, select, textarea, summary, a) { font-family: inherit; }
body.app-layout.workspace-b :is(button, select, input:not([type="checkbox"]):not([type="radio"])) { min-height: 40px; }
body.app-layout.workspace-b :is(button, select, input, textarea, summary, a):focus-visible { outline: 3px solid color-mix(in srgb, var(--fg-accent) 44%, transparent); outline-offset: 2px; }
body.app-layout.workspace-b :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  color: var(--fg-ink); background: var(--fg-surface); border: 1px solid var(--fg-line-strong); border-radius: var(--fg-radius-control); box-shadow: none;
}
body.app-layout.workspace-b :is(input, select, textarea)::placeholder { color: var(--fg-muted); opacity: .82; }
body.app-layout.workspace-b .app-main,
body.app-layout.workspace-b .app-canvas-shell,
body.app-layout.workspace-b .app-content { background: var(--fg-canvas); }
body.app-layout.workspace-b .app-content { max-width: none; padding: 24px 32px 48px; color: var(--fg-ink); }
body.app-layout.workspace-b .app-content-toolbar { min-height: 0; }
body.app-layout.workspace-b .app-sidebar {
  background: var(--fg-sidebar); color: var(--fg-ink); border-right: 1px solid var(--fg-line); box-shadow: none;
}
body.app-layout.workspace-b .fg-sidebar-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; margin: 0 0 12px; padding: 0; }
body.app-layout.workspace-b .fg-sidebar-identity { min-width: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--fg-ink); text-decoration: none; white-space: nowrap; font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
body.app-layout.workspace-b .fg-sidebar-identity img { width: 23px; height: 23px; flex: 0 0 23px; }
body.app-layout.workspace-b .fg-sidebar-controls { display: flex; align-items: center; gap: 3px; margin: 0; }
body.app-layout.workspace-b .fg-sidebar-controls :is(button, .sidebar-theme-toggle, .sidebar-desktop-toggle) { position: static; width: 34px; height: 34px; min-height: 34px; padding: 0; display: inline-grid; place-items: center; color: var(--fg-muted); background: transparent; border: 1px solid transparent; border-radius: var(--fg-radius-nav); box-shadow: none; }
body.app-layout.workspace-b .fg-sidebar-controls :is(button, .sidebar-theme-toggle, .sidebar-desktop-toggle):hover { color: var(--fg-ink); background: color-mix(in srgb, var(--fg-surface) 65%, transparent); }
body.app-layout.workspace-b .fg-sidebar-controls .sidebar-desktop-toggle { transform: none; }
body.app-layout.workspace-b .fg-sidebar-controls .sidebar-drawer-close { display: none; }
body.app-layout.workspace-b .fg-workspace-selector { position: relative; margin: 0 0 12px; z-index: 15; }
body.app-layout.workspace-b .fg-workspace-selector > summary {
  min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 11px; color: var(--fg-ink); background: color-mix(in srgb, var(--fg-surface) 76%, transparent); border: 1px solid var(--fg-line); border-radius: var(--fg-radius-control); cursor: pointer; list-style: none; font-size: 13px; font-weight: 550;
}
body.app-layout.workspace-b .fg-workspace-selector > summary::-webkit-details-marker { display: none; }
body.app-layout.workspace-b .fg-workspace-selector > summary > svg:first-child { flex: 0 0 auto; color: var(--fg-accent); }
body.app-layout.workspace-b .fg-workspace-current { display: none; }
body.app-layout.workspace-b[data-workspace="spreadsheet"] .fg-workspace-current--spreadsheet,
body.app-layout.workspace-b[data-workspace="finance"] .fg-workspace-current--finance { display: inline; }
body.app-layout.workspace-b .fg-workspace-chevron { margin-left: auto; color: var(--fg-muted); transition: transform .15s ease; }
body.app-layout.workspace-b .fg-workspace-selector[open] .fg-workspace-chevron { transform: rotate(180deg); }
body.app-layout.workspace-b .fg-workspace-switch {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; display: grid; gap: 2px; padding: 5px; background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: var(--fg-radius-menu); box-shadow: 0 8px 20px rgb(20 25 20 / .12);
}
body.app-layout.workspace-b .fg-workspace-switch a { display: flex; min-height: 42px; align-items: center; gap: 9px; padding: 0 9px; color: var(--fg-ink); border-radius: var(--fg-radius-small); text-decoration: none; font-size: 13px; }
body.app-layout.workspace-b .fg-workspace-switch a:hover,
body.app-layout.workspace-b .fg-workspace-switch a[aria-current="page"] { background: var(--fg-surface-alt); color: var(--fg-accent); }
body.app-layout.workspace-b .sidebar-new-btn { min-height: 40px; margin: 0 0 10px; justify-content: flex-start; padding-inline: 11px; color: var(--fg-accent) !important; background: transparent !important; border: 1px solid var(--fg-line-strong) !important; border-radius: var(--fg-radius-control); box-shadow: none !important; font-size: 13px; font-weight: 600; }
body.app-layout.workspace-b .sidebar-new-btn:hover { background: var(--fg-surface) !important; }
body.app-layout.workspace-b .sidebar-nav { gap: 2px; padding-bottom: 8px; }
body.app-layout.workspace-b .sidebar-nav-label { margin: 12px 9px 4px; color: var(--fg-muted); font-size: 11px; font-weight: 600; line-height: 1.35; letter-spacing: .01em; text-transform: none; }
body.app-layout.workspace-b .sidebar-nav-item,
body.app-layout.workspace-b .fg-nav-disclosure > summary { min-height: 38px; gap: 10px; padding: 7px 10px; color: var(--fg-ink); border: 0; border-radius: var(--fg-radius-nav); font-size: 13px; font-weight: 450; }
body.app-layout.workspace-b .sidebar-nav-item svg,
body.app-layout.workspace-b .fg-nav-disclosure > summary svg { color: var(--fg-muted); }
body.app-layout.workspace-b .sidebar-nav-item:hover,
body.app-layout.workspace-b .fg-nav-disclosure > summary:hover { color: var(--fg-ink); background: color-mix(in srgb, var(--fg-surface) 72%, transparent); }
body.app-layout.workspace-b .sidebar-nav-item.active,
body.app-layout.workspace-b .sidebar-nav-item[aria-current="page"] { color: var(--fg-accent); background: color-mix(in srgb, var(--fg-surface) 82%, transparent); font-weight: 650; }
body.app-layout.workspace-b .sidebar-nav-item.active svg,
body.app-layout.workspace-b .sidebar-nav-item[aria-current="page"] svg { color: var(--fg-accent); }
body.app-layout.workspace-b .fg-nav-disclosure[open] { padding-bottom: 3px; background: color-mix(in srgb, var(--fg-surface) 44%, transparent); border-radius: var(--fg-radius-control); }
body.app-layout.workspace-b .fg-nav-disclosure > summary { min-height: 38px; }
body.app-layout.workspace-b .fg-nav-disclosure > summary::after {
  content: "+"; width: 18px; margin-left: auto; color: var(--fg-muted); font-size: 17px; line-height: 1; text-align: center; transform: none;
}
body.app-layout.workspace-b .fg-nav-disclosure[open] > summary::after { content: "−"; transform: none; }
body.app-layout.workspace-b .fg-nav-disclosure > .sidebar-nav-item { padding-left: 25px; }
body.app-layout.workspace-b .sidebar-user { padding-top: 8px; border-top: 1px solid var(--fg-line); background: transparent; }
body.app-layout.workspace-b .sidebar-user-btn { min-height: 44px; color: var(--fg-ink); border-radius: var(--fg-radius-nav); font-size: 13px; }
body.app-layout.workspace-b .sidebar-user-btn:hover { background: color-mix(in srgb, var(--fg-surface) 72%, transparent); }
body.app-layout.workspace-b .mobile-drawer-account-trigger { display: none !important; }
body.app-layout.workspace-b .sidebar-user-dropdown { color: var(--fg-ink); background: var(--fg-surface); border-color: var(--fg-line); border-radius: var(--fg-radius-menu); box-shadow: 0 8px 22px rgb(20 25 20 / .12); }
body.app-layout.workspace-b .sidebar-text { color: inherit; }
html.sidebar-collapsed body.app-layout.workspace-b .app-sidebar .fg-sidebar-identity span,
html.sidebar-collapsed body.app-layout.workspace-b .app-sidebar .fg-workspace-selector,
html.sidebar-collapsed body.app-layout.workspace-b .sidebar-theme-toggle,
body.app-layout.workspace-b .app-sidebar.collapsed .fg-sidebar-identity span,
body.app-layout.workspace-b .app-sidebar.collapsed .fg-workspace-selector,
body.app-layout.workspace-b .app-sidebar.collapsed .sidebar-theme-toggle { display: none !important; }
html.sidebar-collapsed body.app-layout.workspace-b .fg-sidebar-toolbar,
body.app-layout.workspace-b .app-sidebar.collapsed .fg-sidebar-toolbar { justify-content: center; }
html.sidebar-collapsed body.app-layout.workspace-b .fg-sidebar-controls,
body.app-layout.workspace-b .app-sidebar.collapsed .fg-sidebar-controls { margin: 0; }
html.sidebar-collapsed body.app-layout.workspace-b .sidebar-desktop-toggle,
body.app-layout.workspace-b .app-sidebar.collapsed .sidebar-desktop-toggle { display: inline-grid; }
body.app-layout.workspace-b .fg-sidebar-controls { gap: 1px; }
/* Adjacent icon controls: compact for desktop pointers, full touch targets in the drawer. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .fg-sidebar-controls { gap: 0; }
@media (min-width: 901px) and (pointer: fine) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .fg-sidebar-controls :is(#sidebar-theme-toggle, #sidebar-collapse-btn) {
    width: 32px; height: 32px; min-width: 32px; min-height: 32px; flex: 0 0 32px; margin: 0; padding: 0;
  }
}
@media (max-width: 900px), (pointer: coarse) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .fg-sidebar-controls :is(#sidebar-theme-toggle, #sidebar-collapse-btn, #sidebar-drawer-close) {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: 0 0 44px; margin: 0; padding: 0;
  }
}
body.app-layout.workspace-b .fg-workspace-heading { display: block; margin: 0 0 12px; padding: 0; text-align: left; }
body.app-layout.workspace-b .fg-workspace-heading .fg-heading-icon { display: none; }
body.app-layout.workspace-b .fg-title-line { display: flex; align-items: center; gap: 8px; }
body.app-layout.workspace-b .fg-workspace-heading h1,
body.app-layout.workspace-b .fg-dashboard-heading h1,
body.app-layout.workspace-b .repair-heading h1,
body.app-layout.workspace-b .fgdata-heading h1,
body.app-layout.workspace-b .section-title h1 { margin: 0; color: var(--fg-ink); font: 500 23px/1.25 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
body.app-layout.workspace-b .fg-info-disclosure { position: relative; }
body.app-layout.workspace-b .fg-info-disclosure > summary { display: grid; width: 28px; height: 28px; min-height: 28px; place-items: center; color: var(--fg-muted); cursor: pointer; list-style: none; }
body.app-layout.workspace-b .fg-info-disclosure > summary::-webkit-details-marker { display: none; }
body.app-layout.workspace-b .fg-info-disclosure > p { position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; width: min(300px, calc(100vw - 48px)); margin: 0; padding: 10px 12px; color: var(--fg-ink); background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: var(--fg-radius-control); box-shadow: 0 6px 18px rgb(20 25 20 / .12); font-size: 12px; line-height: 1.5; }
body.app-layout.workspace-b .fg-workspace-heading > div > p:not(#main-generation-desc) { margin: 0; }
body.app-layout.workspace-b .fg-global-task-tabs { display: flex; width: fit-content; gap: 24px; margin: 6px 0 0; border-bottom: 1px solid var(--fg-line); }
body.app-layout.workspace-b .fg-global-task-tabs .tool-tab { min-height: 38px; padding: 0 2px 8px; color: var(--fg-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; font-size: 13px; font-weight: 500; }
body.app-layout.workspace-b .fg-global-task-tabs .tool-tab.active { color: var(--fg-accent); border-bottom-color: var(--fg-accent); font-weight: 650; }
body.app-layout.workspace-b #generate-page:has(.tool-panel[data-panel="script"].active) .fg-global-task-tabs,
body.app-layout.workspace-b #generate-page:has(.tool-panel[data-panel="sql"].active) .fg-global-task-tabs,
body.app-layout.workspace-b #generate-page:has(.tool-panel[data-panel="regex"].active) .fg-global-task-tabs { display: none; }
body.app-layout.workspace-b #generate-page,
body.app-layout.workspace-b #generate-page > .container { width: 100%; max-width: none; margin: 0; padding: 0; }
body.app-layout.workspace-b #generate-page .tool-panel.active { display: flex !important; flex-direction: column; gap: 0; margin: 0; }
body.app-layout.workspace-b #generate-page .tool-panel:not(.active) { display: none !important; }
body.app-layout.workspace-b #generate-page .fg-editor-pane,
body.app-layout.workspace-b #generate-page .fg-output-pane { width: 100%; min-width: 0; padding: 0; overflow: visible; color: var(--fg-ink); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.app-layout.workspace-b #generate-page .fg-input-heading { min-height: 0; margin: 0; padding: 0; border: 0; }
body.app-layout.workspace-b #generate-page .fg-input-heading > h2 { display: none; }
body.app-layout.workspace-b #generate-page .fg-result-shortcut { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-left: auto; color: var(--fg-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
body.app-layout.workspace-b #generate-page .fg-editor-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
body.app-layout.workspace-b #generate-page .fg-editor-form > .form-group { margin: 0; }
body.app-layout.workspace-b #generate-page .fg-editor-form label { display: block; margin: 0 0 6px; color: var(--fg-ink); font-size: 13px; font-weight: 600; }
body.app-layout.workspace-b #generate-page .fg-editor-form textarea { width: 100%; min-height: 96px; resize: vertical; padding: 11px 12px; color: var(--fg-ink); background: var(--fg-surface); border: 1px solid var(--fg-line-strong); border-radius: var(--fg-radius-control); font-size: 14px; line-height: 1.5; }
body.app-layout.workspace-b #generate-page .fg-editor-options { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 0; }
body.app-layout.workspace-b #generate-page .fg-editor-options > .form-group { margin: 0; }
body.app-layout.workspace-b #generate-page .fg-editor-options select { min-width: 146px; }
body.app-layout.workspace-b #generate-page .fg-preferences-panel { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
body.app-layout.workspace-b #generate-page .fg-example-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: transparent; }
body.app-layout.workspace-b #generate-page .fg-example-chips > span { color: var(--fg-muted); font-size: 12px; }
body.app-layout.workspace-b #generate-page .starter-card { min-height: 32px; padding: 5px 9px; color: var(--fg-muted); background: transparent; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-nav); font-size: 12px; }
body.app-layout.workspace-b #generate-page .starter-card:hover { color: var(--fg-accent); background: var(--fg-surface); border-color: var(--fg-line-strong); }
body.app-layout.workspace-b #generate-page .fg-context { margin: 0; border: 0; }
body.app-layout.workspace-b #generate-page .fg-context > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0; color: var(--fg-muted); cursor: pointer; font-size: 13px; list-style: none; }
body.app-layout.workspace-b #generate-page .fg-context > summary::-webkit-details-marker { display: none; }
body.app-layout.workspace-b #generate-page .fg-context > summary::before { content: "+"; margin-right: 7px; font-size: 17px; line-height: 1; }
body.app-layout.workspace-b #generate-page .fg-context[open] > summary::before { content: "−"; }
body.app-layout.workspace-b #generate-page .fg-context .form-group { margin: 0 0 8px; }
body.app-layout.workspace-b #generate-page .fg-editor-submit { display: flex; justify-content: flex-end; margin: 0; }
body.app-layout.workspace-b #generate-page .fg-editor-submit .btn { min-width: 164px; min-height: 42px; padding: 9px 16px; color: white; background: var(--fg-accent); border: 1px solid var(--fg-accent); border-radius: var(--fg-radius-control); box-shadow: none; font-size: 13px; font-weight: 650; }
body.app-layout.workspace-b #generate-page .fg-editor-submit .btn:hover { background: var(--fg-accent-strong); }
body.app-layout.workspace-b #generate-page .fg-form-help { margin: 0; color: var(--fg-muted); font-size: 11px; line-height: 1.45; }
body.app-layout.workspace-b #generate-page .fg-output-pane { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--fg-line); }
body.app-layout.workspace-b #generate-page .fg-output-heading { min-height: 28px; margin: 0 0 8px; padding: 0; border: 0; }
body.app-layout.workspace-b #generate-page .fg-output-heading h2 { margin: 0; color: var(--fg-ink); font: 500 17px/1.3 Georgia, "Times New Roman", serif; }
body.app-layout.workspace-b #generate-page .fg-output-heading .fg-control-icon { display: none; }
body.app-layout.workspace-b #generate-page .result-placeholder { min-height: 0; margin: 0; padding: 0; color: var(--fg-muted); background: transparent; border: 0; box-shadow: none; text-align: left; }
body.app-layout.workspace-b #generate-page .result-placeholder .fg-empty-result-icon { display: none; }
body.app-layout.workspace-b #generate-page .result-placeholder p { margin: 0 0 3px; color: var(--fg-ink); font-size: 13px; font-weight: 550; }
body.app-layout.workspace-b #generate-page .result-placeholder span { color: var(--fg-muted); font-size: 12px; }
body.app-layout.workspace-b #generate-page .result-card:not(.hidden) { margin: 0; padding: 0; color: var(--fg-ink); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
body.app-layout.workspace-b #generate-page .result-card .rc-section,
body.app-layout.workspace-b #generate-page .result-card .rc-main-formula-box { border-color: var(--fg-line); border-radius: var(--fg-radius-control); box-shadow: none; }
body.app-layout.workspace-b #generate-page .result-card .rc-main-formula-box { background: var(--fg-surface-alt); }
body.app-layout.workspace-b #generate-page .result-card .rc-section-title,
body.app-layout.workspace-b #generate-page .result-card .section-title { color: var(--fg-ink); font-size: 13px; }
body.app-layout.workspace-b #generate-page .result-card .result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
body.app-layout.workspace-b #generate-page .result-card .result-actions > * { min-height: 40px; }
body.app-layout.workspace-b #generate-page .result-card :is(button, a).btn-primary,
body.app-layout.workspace-b #generate-page .result-card .copy-btn { color: #fff !important; background: var(--fg-accent) !important; border: 1px solid var(--fg-accent) !important; border-radius: var(--fg-radius-control); box-shadow: none !important; }
body.app-layout.workspace-b #generate-page .result-card .save-btn { color: var(--fg-accent) !important; background: var(--fg-surface) !important; border: 1px solid var(--fg-line-strong) !important; border-radius: var(--fg-radius-control); box-shadow: none !important; }
body.app-layout.workspace-b #generate-page .fg-result-storage .fg-result-collection,
body.app-layout.workspace-b #generate-page .fg-result-storage details { position: relative; z-index: auto; }
body.app-layout.workspace-b #generate-page .fg-result-storage .collection-combo-list { position: static !important; inset: auto !important; width: min(100%, 440px); max-height: min(220px, 40vh); margin-top: 4px; }
body.app-layout.workspace-b #generate-page .fg-result-collection > summary { min-height: 40px; color: var(--fg-muted); font-size: 12px; }
body.app-layout.workspace-b #generate-page .fg-workflow-actions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fg-line); }
body.app-layout.workspace-b #generate-page .fg-workflow-actions .btn { min-height: 40px; border-radius: var(--fg-radius-control); box-shadow: none; }
/* Other authenticated workspaces inherit the same neutral document surface and measured hierarchy. */
body.app-layout.workspace-b :is(.concept-repair-workspace, .concept-data-workspace, .fg-concept-dashboard, .account-settings-page, .billing-page) { color: var(--fg-ink); }
body.app-layout.workspace-b .repair-workspace,
body.app-layout.workspace-b .fgdata-page,
body.app-layout.workspace-b .fg-concept-dashboard,
body.app-layout.workspace-b .account-settings-page,
body.app-layout.workspace-b .billing-page { max-width: none; margin: 0; }
body.app-layout.workspace-b .repair-heading,
body.app-layout.workspace-b .fgdata-heading,
body.app-layout.workspace-b .fg-dashboard-heading,
body.app-layout.workspace-b .account-settings-page > .section-title,
body.app-layout.workspace-b .billing-page > .section-title { margin: 0 0 16px; padding: 0 0 12px; border-bottom: 1px solid var(--fg-line); }
body.app-layout.workspace-b :is(.repair-heading p, .fgdata-heading > p:last-child, .fg-dashboard-heading p, .account-settings-page .section-title p, .billing-page .section-title p) { max-width: 64ch; margin: 4px 0 0; color: var(--fg-muted); font-size: 12px; line-height: 1.5; }
body.app-layout.workspace-b .repair-layout { display: flex; flex-direction: column; gap: 16px; }
body.app-layout.workspace-b :is(.repair-panel, .fgdata-card, .fg-workspace-entry, .da-recent-panel, .da-side-card, .fg-dashboard-more, .account-settings-section, .billing-card, .settings-section) { color: var(--fg-ink); background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: var(--fg-radius-panel); box-shadow: none; }
body.app-layout.workspace-b :is(.repair-panel, .fgdata-card) { padding: 16px; }
body.app-layout.workspace-b :is(.repair-panel h2, .fgdata-card h2, .da-panel-heading h2, .account-settings-section h2, .billing-card h2) { color: var(--fg-ink); font-size: 16px; letter-spacing: -.015em; }
body.app-layout.workspace-b .repair-layout > * { width: 100%; }
body.app-layout.workspace-b .fg-dashboard-workspaces { gap: 14px; }
body.app-layout.workspace-b .fg-workspace-entry { padding: 16px; }
body.app-layout.workspace-b .fg-dashboard-work-grid { gap: 14px; }
body.app-layout.workspace-b .fg-concept-dashboard :is(.da-recent-panel, .da-side-card, .fg-dashboard-more) { padding: 16px; }
body.app-layout.workspace-b .fg-entry-icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: var(--fg-radius-nav); color: var(--fg-accent); background: var(--fg-accent-soft); }
body.app-layout.workspace-b .fg-entry-actions .da-button,
body.app-layout.workspace-b .da-side-link,
body.app-layout.workspace-b .repair-result-actions .btn,
body.app-layout.workspace-b .fgdata-page .btn { min-height: 42px; border-radius: var(--fg-radius-control); box-shadow: none; }
body.app-layout.workspace-b :is(.repair-workspace, .fgdata-page) :is(input, select, textarea) { border-color: var(--fg-line-strong); border-radius: var(--fg-radius-control); color: var(--fg-ink); background: var(--fg-surface); }
body.app-layout.workspace-b .fgdata-page :is(.fgdata-eyebrow, .fgdata-step, .repair-eyebrow, .repair-step) { display: none; }
body.app-layout.workspace-b .repair-starter,
body.app-layout.workspace-b .fgdata-page :is(.fgdata-sample, .fgdata-example) { border-radius: var(--fg-radius-control); box-shadow: none; }
body.app-layout.workspace-b .account-settings-page,
body.app-layout.workspace-b .billing-page { padding: 0; }
body.app-layout.workspace-b .account-settings-page .section-title,
body.app-layout.workspace-b .billing-page .section-title { text-align: left; }
body.app-layout.workspace-b .account-settings-page :is(button, a.btn),
body.app-layout.workspace-b .billing-page :is(button, a.btn) { min-height: 42px; border-radius: var(--fg-radius-control); box-shadow: none; }
body.app-layout.workspace-b :is(.account-settings-page, .billing-page) .btn-primary:not(:disabled) {
  /* Account actions retain the main brand accent when Finance was the last workspace. */
  color: #fff !important; background: #1A3C2B !important; border-color: #1A3C2B !important;
}
/* Keep the approved brand-green primary treatment on non-finance workspaces. */
body.app-layout.workspace-concept.workspace-b :is(.concept-repair-workspace, .fg-check-workspace, .at-workspace, .fgdata-cleaner) :is(.btn-primary, #fgdata-apply, #fgdata-export):not(:disabled) {
  color: #fff !important; background: #1A3C2B !important; border-color: #1A3C2B !important;
}
html.dark-mode body.app-layout.workspace-concept.workspace-b :is(.concept-repair-workspace, .fg-check-workspace, .at-workspace, .fgdata-cleaner) :is(.btn-primary, #fgdata-apply, #fgdata-export):disabled {
  color: var(--fg-muted) !important; background: var(--fg-surface-alt) !important; border-color: var(--fg-line) !important; opacity: 1 !important;
}
/* Finance retains its contextual blue controls while its document surfaces stay warm. */
html.dark-mode body.app-layout.workspace-concept.workspace-b[data-workspace="finance"] .fgstatement-page :is(.fgdata-card, .fgdata-table-wrap) {
  color: var(--fg-ink) !important; background: var(--fg-surface) !important; border-color: var(--fg-line) !important;
}
html.dark-mode body.app-layout.workspace-concept.workspace-b[data-workspace="finance"] .fgstatement-page :is(input:not([type="checkbox"]), select, textarea) {
  color: var(--fg-ink) !important; background: var(--fg-surface-alt) !important; border-color: var(--fg-line-strong) !important;
}
html.dark-mode body.app-layout.workspace-concept.workspace-b[data-workspace="finance"] .fgstatement-page :is(table th, .fgstatement-reconciliation) {
  color: var(--fg-ink) !important; background: var(--fg-surface-alt) !important; border-color: var(--fg-line) !important;
}
html.dark-mode body.app-layout.workspace-concept.workspace-b[data-workspace="finance"] .fgstatement-page .fgstatement-empty-state:not([hidden]) {
  color: var(--fg-muted) !important; background: var(--fg-surface-alt) !important; border-color: var(--fg-line) !important;
}
html.sidebar-collapsed body.app-layout.workspace-b .app-sidebar .fg-workspace-selector,
body.app-layout.workspace-b .app-sidebar.collapsed .fg-workspace-selector { display: none !important; }
@media (max-width: 900px) {
  body.app-layout.workspace-b .app-content { padding: 16px 16px 32px; }
  body.app-layout.workspace-b .fg-sidebar-toolbar { min-height: 44px; margin-bottom: 12px; }
  body.app-layout.workspace-b .fg-sidebar-controls .sidebar-drawer-close { display: inline-grid; }
  body.app-layout.workspace-b .fg-sidebar-controls .sidebar-desktop-toggle { display: none; }
  body.app-layout.workspace-b .fg-workspace-selector { margin-bottom: 10px; }
  body.app-layout.workspace-b .fg-workspace-selector > summary { min-height: 44px; }
  body.app-layout.workspace-b .sidebar-nav-item,
  body.app-layout.workspace-b .fg-nav-disclosure > summary,
  body.app-layout.workspace-b .sidebar-user-btn { min-height: 44px; }
  body.app-layout.workspace-b .fg-workspace-heading { margin-bottom: 10px; }
  body.app-layout.workspace-b .fg-workspace-heading h1,
  body.app-layout.workspace-b :is(.fg-dashboard-heading h1, .repair-heading h1, .fgdata-heading h1, .section-title h1) { font-size: 21px; }
  body.app-layout.workspace-b .fg-global-task-tabs { width: 100%; gap: 24px; }
  body.app-layout.workspace-b .fg-global-task-tabs .tool-tab { min-height: 44px; padding-bottom: 8px; }
  body.app-layout.workspace-b #generate-page .fg-editor-form { gap: 10px; }
  body.app-layout.workspace-b #generate-page .fg-editor-form textarea { min-height: 96px; }
  body.app-layout.workspace-b #generate-page .fg-editor-options { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  body.app-layout.workspace-b #generate-page .fg-editor-options > *,
  body.app-layout.workspace-b #generate-page .fg-editor-options select { width: 100%; }
  body.app-layout.workspace-b #generate-page .fg-editor-submit { justify-content: stretch; }
  body.app-layout.workspace-b #generate-page .fg-editor-submit .btn { width: 100%; min-height: 46px; }
  body.app-layout.workspace-b #generate-page .fg-output-pane { margin-top: 12px; padding-top: 11px; }
  body.app-layout.workspace-b #generate-page .result-card .result-actions > * { min-height: 44px; }
  body.app-layout.workspace-b #generate-page .result-card :is(.result-actions, .rc-actions) { display: flex; flex-wrap: wrap; }
  body.app-layout.workspace-b .repair-heading { align-items: flex-start; gap: 8px; }
  body.app-layout.workspace-b .repair-heading .repair-text-link { min-height: 44px; }
  body.app-layout.workspace-b .fgdata-page { width: 100%; }
  body.app-layout.workspace-b .fgdata-page :is(.fgdata-table-wrap, .fgstatement-table-wrap, .fgdata-preview-wrap) { max-width: 100%; overflow: auto; }
  body.app-layout.workspace-b .fgdata-page :is(.fgdata-table-wrap table, .fgstatement-table-wrap table, .fgdata-preview-wrap table) { min-width: 620px; }
}
@media (max-width: 360px) {
  body.app-layout.workspace-b .app-content { padding-inline: 12px; }
  body.app-layout.workspace-b #generate-page .fg-example-chips { gap: 5px; }
  body.app-layout.workspace-b #generate-page .starter-card { min-height: 36px; }
  body.app-layout.workspace-b #generate-page .fg-result-shortcut { width: auto; }
}

/* A saved desktop rail preference must not collapse the mobile drawer or its topbar selector. */
@media (max-width: 900px) {
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-b .app-sidebar,
  body.app-layout.workspace-shell-v2.workspace-b .app-sidebar.collapsed {
    width: var(--mobile-drawer-width) !important;
    padding: 12px 12px calc(10px + var(--mobile-browser-bottom-inset, 0px) + env(safe-area-inset-bottom)) !important;
    align-items: stretch !important;
  }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .sidebar-text,
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .sidebar-btn-text,
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .sidebar-brand-name,
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .sidebar-user-name,
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .sidebar-chevron,
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .fg-sidebar-identity span {
    display: inline !important;
  }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .sidebar-nav,
  body.app-layout.workspace-shell-v2.workspace-b .app-sidebar.collapsed .sidebar-nav {
    width: 100% !important;
  }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .sidebar-nav-item,
  body.app-layout.workspace-shell-v2.workspace-b .app-sidebar.collapsed .sidebar-nav-item {
    width: 100% !important;
    padding-inline: 10px !important;
    justify-content: flex-start !important;
  }
  html.sidebar-collapsed body.app-layout.workspace-b .app-sidebar .fg-workspace-selector { display: none !important; }
  html.sidebar-collapsed body.app-layout.workspace-b .app-sidebar .sidebar-theme-toggle { display: inline-grid !important; }
  html.sidebar-collapsed body.app-layout.workspace-b .app-sidebar .sidebar-nav-item::after,
  html.sidebar-collapsed body.app-layout.workspace-b .app-sidebar .sidebar-usage-mini::after,
  html.sidebar-collapsed body.app-layout.workspace-b .app-content-toolbar [data-menu-toggle="canvas"]::after {
    display: none !important;
    content: none !important;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  body.app-layout.workspace-b .app-sidebar { overflow-y: auto; }
  body.app-layout.workspace-b .sidebar-user { position: relative; bottom: auto; }
  body.app-layout.workspace-b .app-content { padding-top: 12px; padding-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body.app-layout.workspace-b *, body.app-layout.workspace-b *::before, body.app-layout.workspace-b *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Bridge the older app-shell components into B's semantic roles and outrank prior concept rules. */
body.app-layout.workspace-concept.workspace-b {
  --fg-paper: var(--fg-canvas);
  --fg-surface-soft: var(--fg-surface-alt);
  --fg-selected: var(--fg-accent-soft);
  --fg-accent-deep: var(--fg-accent-strong);
  --fg-accent-text: var(--fg-accent);
  --da-paper: var(--fg-canvas);
  --da-surface: var(--fg-surface);
  --da-surface-soft: var(--fg-surface-alt);
  --da-ink: var(--fg-ink);
  --da-muted: var(--fg-muted);
  --da-line: var(--fg-line);
  --da-line-strong: var(--fg-line-strong);
  --da-green: var(--fg-accent);
  --da-green-dark: var(--fg-accent-strong);
  --da-green-soft: var(--fg-accent-soft);
  --da-shadow: none;
  --tm-paper: var(--fg-canvas);
  --tm-white: var(--fg-surface);
  --tm-forest: var(--fg-accent);
  --tm-forest-10: var(--fg-accent-soft);
  --tm-grid-10: var(--fg-line);
  --tm-grid-20: var(--fg-line);
  --tm-grid-30: var(--fg-line-strong);
  --tm-surface-card: var(--fg-surface);
  --tm-surface-subcard: var(--fg-surface);
  --bg-page: var(--fg-canvas);
  --bg-surface: var(--fg-surface);
  --bg-surface-2: var(--fg-surface-alt);
  --text-primary: var(--fg-ink);
  --text-secondary: var(--fg-muted);
  --text-tertiary: var(--fg-muted);
  --border-light: var(--fg-line);
  --border-strong: var(--fg-line-strong);
  --line: var(--fg-line);
  --surface-2: var(--fg-surface-alt);
}
html.dark-mode body.app-layout.direction-a-app.workspace-concept.workspace-b {
  --da-paper: var(--fg-canvas);
  --da-surface: var(--fg-surface);
  --da-surface-soft: var(--fg-surface-alt);
  --da-ink: var(--fg-ink);
  --da-muted: var(--fg-muted);
  --da-line: var(--fg-line);
  --da-line-strong: var(--fg-line-strong);
  --da-green: #b9d7c1;
  --da-green-dark: #d0e3d4;
  --da-green-soft: var(--fg-accent-soft);
  --fg-accent-text: #b9d7c1;
  --tm-paper: var(--fg-canvas);
  --tm-white: var(--fg-surface);
  --tm-forest: #b9d7c1;
  --tm-forest-10: var(--fg-accent-soft);
  --bg-page: var(--fg-canvas);
  --bg-surface: var(--fg-surface);
  --bg-surface-2: var(--fg-surface-alt);
  --text-primary: var(--fg-ink);
  --text-secondary: var(--fg-muted);
  --text-tertiary: var(--fg-muted);
}
body.app-layout.workspace-concept.workspace-b[data-workspace="finance"] { --fg-accent-text: #245d9b; }
html.dark-mode body.app-layout.workspace-concept.workspace-b[data-workspace="finance"] { --fg-accent-text: #c1d8ef; --da-green: #c1d8ef; --tm-forest: #c1d8ef; }
html.dark-mode body.app-layout.workspace-concept.workspace-b :is(.app-main, .app-canvas-shell, .app-content, .app-sidebar) { background-color: var(--fg-canvas); }
body.app-layout.workspace-concept.workspace-b .sidebar-nav-item.active,
body.app-layout.workspace-concept.workspace-b .sidebar-nav-item[aria-current="page"],
body.app-layout.workspace-concept.workspace-b .sidebar-nav-item.active svg,
body.app-layout.workspace-concept.workspace-b .sidebar-nav-item[aria-current="page"] svg { color: var(--fg-accent-text); }
body.app-layout.workspace-concept.workspace-b .fg-workspace-switch a:hover,
body.app-layout.workspace-concept.workspace-b .fg-workspace-switch a[aria-current="page"] { color: var(--fg-accent-text); }
body.app-layout.workspace-concept.workspace-b .fg-workspace-selector > summary { white-space: nowrap; }
body.app-layout.workspace-concept.workspace-b .fg-workspace-current { white-space: nowrap; font-size: 12px; }
body.app-layout.workspace-concept.workspace-b .fg-sidebar-toolbar { min-width: 0; }
body.app-layout.workspace-concept.workspace-b .fg-sidebar-identity { overflow: hidden; font-size: 13px; }
body.app-layout.workspace-concept.workspace-b .fg-sidebar-identity span { overflow: hidden; text-overflow: clip; }
body.app-layout.workspace-concept.workspace-b #generate-page .tool-tabs.fg-global-task-tabs {
  display: flex !important; width: fit-content; min-height: 38px; gap: 22px; margin: 6px 0 0; padding: 0; border: 0; border-bottom: 1px solid var(--fg-line); border-radius: 0; background: transparent; box-shadow: none;
}
body.app-layout.workspace-concept.workspace-b #generate-page .tool-tabs.fg-global-task-tabs .tool-tab {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 0; min-height: 38px; padding: 0 2px 7px; color: var(--fg-muted); background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none; font-family: inherit; font-size: 13px; line-height: 1.3; font-weight: 500;
}
body.app-layout.workspace-concept.workspace-b #generate-page .tool-tabs.fg-global-task-tabs .tool-tab.active { color: var(--fg-accent-text); background: transparent; border-bottom-color: var(--fg-accent); box-shadow: none; font-weight: 650; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-global-task-tabs .tool-tab { font-family: inherit; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-workspace-heading > div { width: 100%; min-width: 0; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-example-chips { display: flex; grid-template-columns: none; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; border: 0; background: transparent; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-example-chips .starter-card { min-width: 0; min-height: 32px; margin: 0; padding: 5px 8px; color: var(--fg-muted); background: transparent; border: 1px solid var(--fg-line); border-radius: var(--fg-radius-small); box-shadow: none; font-family: inherit; font-size: 12px; line-height: 1.35; font-weight: 500; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-example-chips .starter-card:hover { color: var(--fg-accent-text); background: var(--fg-accent-soft); border-color: var(--fg-line-strong); }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-submit .btn { display: inline-flex; width: auto; min-width: 164px; max-width: 100%; margin-left: auto; align-self: flex-end; }
body.app-layout.workspace-concept.workspace-b #generate-page .result-placeholder { display: block; min-height: 0; padding: 0; text-align: left; }
body.app-layout.workspace-concept.workspace-b #generate-page .result-placeholder p { margin: 0 0 3px; font-size: 13px; }
body.app-layout.workspace-concept.workspace-b #generate-page .result-placeholder > span { display: block; max-width: 52ch; font-size: 12px; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-output-heading h2 { font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 500; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-how > summary { min-height: 40px; padding: 9px 0; color: var(--fg-ink); font-size: 13px; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-how > summary::before { content: "+"; display: inline-block; width: 20px; color: var(--fg-muted); font-size: 17px; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-how[open] > summary::before { content: "−"; }
body.app-layout.workspace-concept.workspace-b #generate-page .result-card .result-actions :is(button, a),
body.app-layout.workspace-concept.workspace-b #generate-page .fg-workflow-actions :is(button, a) { min-height: 40px; border-radius: var(--fg-radius-control); box-shadow: none; }
body.app-layout.workspace-concept.workspace-b #generate-page .result-card .result-actions :is(button, a):disabled,
body.app-layout.workspace-concept.workspace-b #generate-page .fg-workflow-actions :is(button, a):disabled { color: var(--fg-muted) !important; background: var(--fg-surface-alt) !important; border-color: var(--fg-line) !important; opacity: 1 !important; }
html.dark-mode body.app-layout.workspace-concept.workspace-b #generate-page .result-card .result-actions :is(button, a):disabled,
html.dark-mode body.app-layout.workspace-concept.workspace-b #generate-page .fg-workflow-actions :is(button, a):disabled { color: #d2d9cf !important; background: #303830 !important; border-color: #596258 !important; }
html.dark-mode body.app-layout.workspace-concept.workspace-b #generate-page .result-card .result-actions :is(button, a),
html.dark-mode body.app-layout.workspace-concept.workspace-b #generate-page .fg-workflow-actions :is(button, a) { color: #f1efe8; background: #2b332c; border-color: #586357; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-storage .result-actions-menu-list { background: var(--fg-surface); border-color: var(--fg-line); }
@media (max-width: 900px) {
  body.app-layout.workspace-concept.workspace-b #generate-page .tool-tabs.fg-global-task-tabs { width: 100%; min-height: 44px; gap: 22px; }
  body.app-layout.workspace-concept.workspace-b #generate-page .tool-tabs.fg-global-task-tabs .tool-tab { min-height: 44px; padding: 0 2px 8px; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-example-chips { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; padding-bottom: 3px; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-example-chips .starter-card { flex: 0 0 auto; min-height: 44px; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-options { display: flex; flex-direction: row; flex-wrap: wrap; align-items: end; gap: 8px; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-options > .form-group { width: auto; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-options select { width: auto; min-width: 132px; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-preferences-panel { max-width: 100%; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-submit .btn { width: 100%; align-self: stretch; }
  body.app-layout.workspace-concept.workspace-b #generate-page .result-card .result-actions :is(button, a),
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-workflow-actions :is(button, a) { min-height: 44px; }
}

/* B's explicit page spacing and type must override the earlier direction and concept sheets. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-content { padding: 24px 32px 48px; max-width: none; margin: 0; }
html.dark-mode body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-content { padding: 24px 32px 48px; }
@media (max-width: 900px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-content { padding: 16px 16px 32px; }
}
body.app-layout.workspace-concept.workspace-b #generate-page .fg-workspace-heading h1 { margin: 0; color: var(--fg-ink); font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 500; line-height: 1.25; letter-spacing: -.035em; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-form { padding: 0; }
@media (max-width: 900px) { body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-form { padding: 0; } }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-input-heading { position: relative; display: block; height: 0; min-height: 0; margin: 0; padding: 0; overflow: visible; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-input-heading .fg-result-shortcut { position: absolute; top: 0; right: 0; width: auto; min-height: 32px; margin: 0; padding: 0 2px; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-input-heading .fg-result-shortcut:focus-visible { z-index: 3; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-output-heading h2,
body.app-layout.workspace-concept.workspace-b #generate-page .fg-workflow-actions h2 { color: var(--fg-ink); font-family: Georgia, "Times New Roman", serif; font-size: 17px; font-weight: 500; line-height: 1.3; }
body.app-layout.workspace-concept.workspace-b #generate-page .result-card .fg-result-how { border: 0; border-top: 1px solid var(--fg-line); border-radius: 0; background: transparent; box-shadow: none; }
body.app-layout.workspace-concept.workspace-b #generate-page .result-card .fg-result-how > summary { display: flex; align-items: center; min-height: 40px; padding: 0; list-style: none; }
body.app-layout.workspace-concept.workspace-b #generate-page .result-card .fg-result-how > summary::-webkit-details-marker { display: none; }
body.app-layout.workspace-concept.workspace-b #generate-page .result-card .fg-result-how > summary::after { content: none; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-storage :is(.result-actions, button, a) { border-radius: var(--fg-radius-control); box-shadow: none; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-storage .result-actions :is(button, a):not(:disabled),
body.app-layout.workspace-concept.workspace-b #generate-page .fg-workflow-actions :is(button, a):not(:disabled) { color: var(--fg-ink); background: var(--fg-surface); border: 1px solid var(--fg-line-strong); }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-storage .result-actions .copy-btn:not(:disabled),
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-storage .result-actions .btn-primary:not(:disabled) { color: #fff !important; background: var(--fg-accent) !important; border-color: var(--fg-accent) !important; }
html.dark-mode body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-storage .result-actions :is(button, a):not(:disabled),
html.dark-mode body.app-layout.workspace-concept.workspace-b #generate-page .fg-workflow-actions :is(button, a):not(:disabled) { color: #f1efe8; background: #2b332c; border-color: #586357; }
html.dark-mode body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-storage .result-actions .copy-btn:not(:disabled),
html.dark-mode body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-storage .result-actions .btn-primary:not(:disabled) { color: #fff !important; background: var(--fg-accent) !important; border-color: #467357 !important; }
body.app-layout.workspace-concept.workspace-b .fg-workspace-selector > summary { gap: 7px; padding-inline: 9px; }
body.app-layout.workspace-concept.workspace-b .fg-workspace-current { flex: 1 0 auto; font-size: 11px; }
/* Explicit editorial display faces override the previous app-wide !important display-font lock. */
body.app-layout.workspace-b :is(.fg-workspace-heading h1, .fg-dashboard-heading h1, .repair-heading h1, .fgdata-heading h1, .section-title h1) { font-family: Georgia, "Times New Roman", serif !important; font-weight: 500 !important; letter-spacing: -.035em !important; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-output-heading h2,
body.app-layout.workspace-concept.workspace-b #generate-page .fg-workflow-actions h2 { font-family: Georgia, "Times New Roman", serif !important; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-form { padding: 0 !important; }
@media (max-width: 900px) { body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-form { padding: 0 !important; } }
body.app-layout.workspace-concept.workspace-b .fg-workspace-current { flex: 0 0 auto; font-size: 11px; line-height: 1.2; white-space: nowrap; }
body.app-layout.workspace-concept.workspace-b .fg-workspace-selector > summary { gap: 6px; padding-inline: 8px; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-inline-platform label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-inline-platform select { width: auto; min-width: 146px; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-how { border-top: 1px solid var(--fg-line); background: transparent; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-how > summary { min-height: 40px; padding: 0; color: var(--fg-muted); font-family: inherit; font-size: 13px; font-weight: 550; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-how > summary::before { content: "+"; display: inline-block; width: 20px; color: var(--fg-muted); font-size: 17px; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-how[open] > summary::before { content: "−"; }
body.app-layout.workspace-concept.workspace-b #generate-page .fg-result-how > summary::after { content: none !important; }
@media (max-width: 900px) {
  html.dark-mode body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-content { padding: 16px 16px 32px; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-options > .fg-inline-platform { flex: 0 0 auto; width: auto; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-inline-platform select { width: auto !important; min-width: 146px; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-preferences-panel { flex: 0 0 auto; width: auto; }
}

/* Keep paid result actions compact and in document order: actions, collection, feedback. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage {
  margin: 4px 0 8px !important; padding: 0 !important; border: 0 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions {
  display: grid !important; grid-template-columns: max-content max-content minmax(0, 1fr) !important;
  align-items: center; justify-content: start; gap: 6px 8px !important; margin: 0 !important; padding: 0 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .rc-actions-header { display: none !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .save-btn {
  grid-column: 1; grid-row: 1; width: auto !important; min-height: 40px; margin: 0 !important; padding: 7px 11px !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions > .action-row:not(.rc-actions-footnote-row) {
  grid-column: 2; grid-row: 1; width: auto; margin: 0 !important; padding: 0 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions-menu--full { width: auto; margin: 0; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions-menu-trigger { min-height: 40px; padding: 7px 11px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .fg-result-collection {
  grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; margin: 0 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .fg-result-collection > summary {
  display: flex !important; align-items: center; gap: 7px; min-height: 32px !important; padding: 2px 0 !important;
  color: var(--fg-muted); cursor: pointer; list-style: none; font-size: 12px;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .fg-result-collection > summary::-webkit-details-marker { display: none; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .fg-result-collection > summary::before {
  content: "+"; display: inline-block; width: 16px; color: var(--fg-muted); font-size: 16px; line-height: 1; text-align: center;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .fg-result-collection[open] > summary::before { content: "−"; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .fg-result-collection > summary::after { content: none !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .collection-combo-box { margin: 0 !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .library-collection-input { min-height: 40px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions > .rc-actions-footnote-row,
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .fg-save-feedback {
  grid-column: 1 / -1; width: 100%; margin: 0 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions > .rc-actions-footnote-row { grid-row: 3; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .rc-actions-footnote-row:has(.rc-actions-footnote:empty) { display: none !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .fg-save-feedback { grid-row: 3; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions:has(.rc-actions-footnote:not(:empty)) .fg-save-feedback { grid-row: 4; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .fg-save-feedback { padding: 8px 11px; line-height: 1.45; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card :is(.rc-main-formula-box, .rc-alt-formula) { padding-block: 5px !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-alt-formula { margin-bottom: 6px !important; }

/* The live generator result is one compact document: formula, explanation, actions, then next steps. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .result-content > :is(.rc-section--explanation, .result-actions, .fg-workflow-actions, .fg-result-verification) {
  margin-block: 10px 0 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-section--explanation {
  padding: 11px 13px !important; border: 1px solid var(--fg-line) !important; border-radius: var(--fg-radius-control) !important;
  background: var(--fg-surface-alt) !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-section--explanation .rc-section-title {
  margin: 0 0 4px !important; color: var(--fg-muted) !important; font-size: 11px !important; font-weight: 600 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-section--explanation .rc-explanation {
  color: var(--fg-ink) !important; font-size: 13px !important; line-height: 1.55 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-code-label {
  margin: 0 0 5px !important; color: var(--fg-muted) !important; font-size: 12px !important; font-weight: 600 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .result-actions {
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px !important;
  width: 100%; margin: 10px 0 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions {
  display: flex !important; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 7px !important; width: auto !important; margin: 0 !important; padding: 0 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions > :is(button, details) {
  width: auto !important; min-width: 0; min-height: 40px; margin: 0 !important; border-radius: var(--fg-radius-control);
  box-shadow: none !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions .result-actions-menu--full { flex: 0 0 auto !important; width: auto !important; min-width: 0; margin: 0 !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions .result-actions-menu-trigger { width: auto !important; min-width: 0; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions .fg-result-copy-btn {
  display: inline-flex; align-items: center; gap: 7px; width: auto !important; min-width: 72px; padding: 8px 12px !important;
  color: #f7f4ec !important; font-size: 13px !important;
  background: #1A3C2B !important; border: 1px solid #1A3C2B !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions .save-btn,
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions .result-actions-menu-trigger {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px !important; color: var(--fg-ink) !important;
  background: var(--fg-surface) !important; border: 1px solid var(--fg-line-strong) !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions .result-actions-menu-list {
  z-index: 30; color: var(--fg-ink); background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: var(--fg-radius-control);
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-collection {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: min(100%, 440px); margin: 0 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-collection > label {
  color: var(--fg-muted); font-size: 12px; line-height: 1.4;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-collection .collection-combo-box { width: 100% !important; margin: 0 !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-collection .library-collection-input {
  min-height: 40px; color: var(--fg-ink); background: var(--fg-surface); border: 1px solid var(--fg-line-strong); border-radius: var(--fg-radius-control);
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-collection .collection-combo-list {
  position: static !important; inset: auto !important; width: 100% !important; max-height: min(220px, 40vh); margin-top: 4px; overflow-y: auto;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .result-actions > .rc-actions-footnote-row:has(.rc-actions-footnote:empty) { display: none !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-workflow-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px !important; margin: 10px 0 0 !important;
  padding: 9px 0 0 !important; border-top: 1px solid var(--fg-line) !important; background: transparent !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-workflow-actions > span {
  flex: 0 0 100%; color: var(--fg-muted); font-size: 12px; font-weight: 600;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-workflow-actions :is(button, a) {
  min-height: 38px; padding: 7px 10px !important; color: var(--fg-ink); background: var(--fg-surface);
  border: 1px solid var(--fg-line); border-radius: var(--fg-radius-control); box-shadow: none;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px 10px;
  margin: 9px 0 0 !important; padding: 8px 0 !important; border: 0 !important; border-top: 1px solid var(--fg-line) !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification > .rc-section-title { display: none !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-validation-cta { display: contents; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-validation-cta-text { grid-column: 1; grid-row: 1; color: var(--fg-muted); font-size: 13px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .run-validation-btn { grid-column: 2; grid-row: 1; min-height: 40px; margin: 0; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-validation-footnote { grid-column: 1 / -1; margin: 0; color: var(--fg-muted); font-size: 12px; line-height: 1.35; }
@media (max-width: 600px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-content-toolbar { height: auto !important; grid-auto-rows: 44px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions { width: 100% !important; gap: 5px !important; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions > :is(button, details) { min-height: 44px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions :is(.fg-result-copy-btn, .save-btn, .result-actions-menu-trigger) { min-width: 0; padding-inline: 4px !important; font-size: 12px !important; gap: 5px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions .fg-control-icon { width: 16px; height: 16px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-workflow-actions { align-items: stretch; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-workflow-actions :is(button, a) { flex: 0 0 100%; width: 100%; min-height: 44px; justify-content: flex-start; font-size: 14px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification { gap: 3px 8px; padding-block: 5px !important; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-collection { width: 100%; }
}
@media (max-width: 360px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .save-btn { min-width: 0; padding-inline: 7px !important; font-size: 12px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .result-actions-menu-trigger { padding-inline: 7px; font-size: 12px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .fg-result-storage .fg-result-collection { grid-column: 1 / -1; }
}
html.dark-mode body.app-layout.workspace-concept.workspace-b .sidebar-new-btn,
html.dark-mode body.app-layout.workspace-concept.workspace-b .fg-workspace-selector > summary > svg:first-child,
html.dark-mode body.app-layout.workspace-concept.workspace-b .fg-entry-icon { color: var(--fg-accent-text) !important; }
html.dark-mode body.app-layout.workspace-concept.workspace-b .at-workspace :is(.at-back, .at-finding a),
html.dark-mode body.app-layout.workspace-concept.workspace-b .repair-text-link { color: var(--fg-accent-text) !important; }
html.dark-mode body.app-layout.workspace-concept.workspace-b :is(.btn-secondary, a.btn-secondary):not(:disabled) {
  color: var(--fg-ink) !important; background: var(--fg-surface) !important; border-color: var(--fg-line-strong) !important;
}
body.app-layout.workspace-concept.workspace-b .fgdata-scroll-note { display: none; }

/* Keep result popovers anchored to their triggers on narrow screens. The generic
   mobile result-card rule makes every menu static, which turns the card settings
   disclosure into a full-width row and lets export options cover the formula. */
@media (max-width: 600px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card,
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .result-content,
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .result-actions,
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions,
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-head-actions {
    overflow: visible !important;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions > details.result-actions-menu {
    position: relative !important;
    align-self: center;
    z-index: 1;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions > details.result-actions-menu[open],
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card details.rc-head-menu[open] {
    z-index: 40;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions > details.result-actions-menu > .result-actions-menu-list {
    position: absolute !important;
    inset: calc(100% + 4px) 0 auto auto !important;
    width: max-content !important;
    min-width: 176px;
    max-width: min(240px, calc(100vw - 32px));
    margin: 0 !important;
    padding: 5px !important;
    overflow-x: hidden;
    box-sizing: border-box;
    box-shadow: 0 8px 22px rgb(28 32 27 / .18) !important;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-primary-actions .result-actions-menu-list .result-actions-menu-item {
    min-height: 44px;
    padding-block: 9px;
    white-space: normal;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card details.rc-head-menu {
    position: relative !important;
    z-index: 1;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card details.rc-head-menu > .rc-head-menu-list {
    position: absolute !important;
    inset: calc(100% + 4px) 0 auto auto !important;
    display: grid !important;
    width: max-content !important;
    min-width: 152px;
    max-width: calc(100vw - 32px);
    margin: 0 !important;
    padding: 5px !important;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 8px 22px rgb(28 32 27 / .18) !important;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card details.rc-head-menu > .rc-head-menu-list .result-actions-menu-item {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    white-space: normal;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-collection .collection-combo-box {
    position: relative !important;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow: visible !important;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-collection .library-collection-input {
    display: block;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-collection .collection-combo-list {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    max-height: min(220px, 34dvh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px !important;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-collection .collection-combo-list .combo-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 9px 10px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
}

/* Approved B shell: workspace choice and the small New action live in the content toolbar. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-content-toolbar {
  display: flex !important; align-items: center; min-height: 42px; margin: 0 0 14px; padding: 0;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar { background: var(--fg-sidebar) !important; }
html.dark-mode body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar { background: var(--fg-sidebar) !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b :is(.user-avatar-sm, .sidebar-mobile-account-btn .user-avatar-sm) {
  color: #f1efe8 !important; background: #3d433d !important; border: 1px solid #666d64 !important; box-shadow: none !important;
}
body.app-layout.workspace-concept.workspace-b .app-content-toolbar > .canvas-mobile-toggle { display: none; }
body.app-layout.workspace-concept.workspace-b .fg-mobile-identity,
body.app-layout.workspace-concept.workspace-b .fg-mobile-account { display: none; }
body.app-layout.workspace-concept.workspace-b .fg-sidebar-identity span { font-family: Georgia, "Times New Roman", serif !important; font-size: 14px; font-weight: 500; letter-spacing: -.02em; }
body.app-layout.workspace-concept.workspace-b .fg-app-toolbar-main {
  display: flex; width: 100%; min-width: 0; align-items: center; justify-content: flex-start; gap: 12px;
}
body.app-layout.workspace-concept.workspace-b .app-content-toolbar .fg-workspace-selector { width: min(272px, 100%); flex: 0 0 auto; margin: 0; }
body.app-layout.workspace-concept.workspace-b .app-content-toolbar .fg-workspace-selector > summary {
  min-height: 40px; background: transparent; border-color: var(--fg-line); white-space: nowrap;
}
body.app-layout.workspace-concept.workspace-b .app-content-toolbar .fg-workspace-current { flex: 1 1 auto; font-size: 12px; }
body.app-layout.workspace-concept.workspace-b .app-content-toolbar .fg-toolbar-new-task {
  display: inline-flex; width: auto !important; max-width: max-content; min-height: 40px; flex: 0 0 auto !important; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 0 12px;
  color: #fff !important; background: var(--fg-accent) !important; border: 1px solid var(--fg-accent) !important;
  border-radius: var(--fg-radius-control); font-size: 12px; font-weight: 600; text-decoration: none;
}
body.app-layout.workspace-concept.workspace-b .app-content-toolbar .fg-toolbar-new-task:hover { background: var(--fg-accent-strong) !important; }
body.app-layout.workspace-concept.workspace-b .fg-library-nav { padding-top: 7px; border-top: 1px solid var(--fg-line); }
body.app-layout.workspace-concept.workspace-b .fg-library-nav > .sidebar-nav-label { display: none; }
body.app-layout.workspace-concept.workspace-b .fg-code-tools-nav { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--fg-line); }
body.app-layout.workspace-concept.workspace-b .fg-data-nav { margin-top: 4px; padding-top: 4px; border-top: 0; }

/* B's composer is one compact document flow. Controls stay attached to the prompt and result. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .tool-panel.active { display: block !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-editor-pane { display: block; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-editor-form { gap: 8px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-prompt-label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 10px; margin-bottom: 6px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-prompt-label-row > label { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-prompt-label-row .fg-examples { flex: 0 0 auto; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-prompt-label-row .fg-examples[open] { flex: 1 1 100%; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-prompt-label-row .fg-examples > summary { min-height: 28px; font-size: 13px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-prompt-label-row .fg-examples .fg-example-chips { display: flex; gap: 6px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-editor-form textarea { min-height: 88px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools {
  display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-editor-options { width: auto; flex: 0 1 auto; flex-wrap: nowrap; align-items: center; gap: 8px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-inline-platform { width: auto !important; flex: 0 0 auto !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-preferences-panel { width: auto; flex: 0 0 auto; align-items: center; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-preferences-panel > * { flex: 0 0 auto; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-editor-submit { flex: 0 0 auto; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-editor-submit .btn { min-width: 128px; min-height: 40px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-form-help { margin-top: 0; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-example-chips { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-example-chips .starter-card { flex: 0 0 auto; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-example-chips > span { display: none; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-examples { margin: 0; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-examples > summary {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0; color: var(--fg-muted); cursor: pointer; list-style: none; font-size: 12px;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-examples > summary::-webkit-details-marker { display: none; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-examples > summary::before { content: "+"; width: 17px; font-size: 16px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-examples[open] > summary::before { content: "−"; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-examples .fg-example-chips { padding-block: 4px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-output-pane { margin-top: 12px; padding-top: 10px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-result-shortcut { min-height: 28px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .result-placeholder { padding-block: 2px; }

@media (max-width: 640px) {
  body.app-layout.workspace-concept.workspace-b :is(button, select, input:not([type="checkbox"]):not([type="radio"]), summary, a.btn, [role="button"], [role="combobox"]) {
    min-height: 44px !important;
  }
  body.app-layout.workspace-concept.workspace-b .fg-workspace-switch a { min-height: 44px !important; }
  body.app-layout.workspace-concept.workspace-b .fg-sidebar-identity { min-height: 44px; }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog footer a { min-height: 44px; display: inline-flex; align-items: center; }
  body.app-layout.workspace-concept.workspace-b .fgdata-preview-panel:has(#fgdata-table tbody tr) .fgdata-scroll-note {
    display: block; margin: 6px 0 0; font-size: 12px;
  }
}

@media (max-width: 900px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-content-toolbar {
    display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "menu brand account" "main main main";
    gap: 8px; margin: 0 0 12px; padding: 0;
  }
  body.app-layout.workspace-concept.workspace-b .app-content-toolbar > .canvas-mobile-toggle { display: inline-flex; grid-area: menu; position: static; }
  body.app-layout.workspace-concept.workspace-b .fg-mobile-identity {
    display: inline-flex; grid-area: brand; align-items: center; justify-self: center; gap: 7px; min-width: 0;
    color: var(--fg-ink); font-size: 14px; font-weight: 650; text-decoration: none; white-space: nowrap;
  }
  body.app-layout.workspace-concept.workspace-b .fg-mobile-identity img { width: 22px; height: 22px; }
  body.app-layout.workspace-concept.workspace-b .fg-mobile-identity span { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.02em; }
  body.app-layout.workspace-concept.workspace-b .fg-mobile-account {
    display: inline-flex; grid-area: account; width: 44px; height: 44px; min-height: 44px; justify-content: center; padding: 0; border: 0; background: transparent;
  }
  body.app-layout.workspace-concept.workspace-b .fg-mobile-account .sidebar-mobile-account-name,
  body.app-layout.workspace-concept.workspace-b .fg-mobile-account .plan-badge { display: none; }
  body.app-layout.workspace-concept.workspace-b .fg-app-toolbar-main { grid-area: main; gap: 8px; }
  body.app-layout.workspace-concept.workspace-b .app-content-toolbar .fg-workspace-selector { flex: 1 1 auto; width: auto; min-width: 0; }
  body.app-layout.workspace-concept.workspace-b .app-content-toolbar .fg-workspace-selector > summary { min-height: 44px; }
  body.app-layout.workspace-concept.workspace-b .app-content-toolbar .fg-toolbar-new-task { display: none; }
  body.app-layout.workspace-concept.workspace-b .fg-composer-footer { align-items: stretch; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-composer-tools { width: 100%; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools { flex-wrap: wrap !important; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-editor-options { width: max-content !important; max-width: 100%; flex: 0 0 auto !important; flex-wrap: nowrap; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-inline-platform { width: 132px !important; flex: 0 0 132px !important; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-inline-platform select { width: 132px !important; min-width: 132px !important; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-composer-footer { flex-direction: column; align-items: stretch; gap: 4px; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-submit { width: 100%; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-editor-submit .btn { width: 100%; min-width: 0; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-context { flex: 0 0 auto; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-example-chips .starter-card { min-height: 40px; }
  body.app-layout.workspace-concept.workspace-b #generate-page .fg-examples > summary { min-height: 44px; }
  body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .sidebar-user {
    display: block !important; flex: 0 0 auto; margin: 0; padding: 8px 0 0;
    border-top: 1px solid var(--fg-line); background: transparent;
  }
  body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .mobile-drawer-account-trigger {
    display: flex !important; width: 100%; min-height: 44px !important; height: 44px;
    align-items: center; justify-content: flex-start; gap: 9px; padding: 4px 8px;
    color: var(--fg-ink); background: var(--fg-surface); border: 1px solid var(--fg-line-strong);
    border-radius: var(--fg-radius-control);
  }
  body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .mobile-drawer-account-trigger .sidebar-mobile-account-name { display: inline !important; }
  body.app-layout.workspace-shell-v2.workspace-b .app-sidebar .sidebar-user-btn { display: none !important; }
}

@media (min-width: 901px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar,
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-main {
    transition: none !important;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-content-toolbar {
    height: auto !important; margin: 0 0 16px !important; padding: 0 0 12px !important;
    border-bottom: 1px solid var(--fg-line);
  }
}

/* New starts a separate task; keep it visually secondary to Generate. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .fg-app-toolbar-main .fg-toolbar-new-task {
  color: var(--fg-ink) !important;
  background: var(--fg-surface) !important;
  border: 1px solid var(--fg-line-strong) !important;
  box-shadow: none !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .fg-app-toolbar-main .fg-toolbar-new-task:hover {
  background: var(--fg-surface-alt) !important;
}

/* Match the approved document-scale tab rule and compact toolbar controls. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .tool-tabs.fg-global-task-tabs {
  width: 100% !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-context > summary {
  min-height: 44px !important;
  padding: 0 11px !important;
  color: var(--fg-ink) !important;
  background: var(--fg-surface) !important;
  border: 1px solid var(--fg-line-strong) !important;
  border-radius: var(--fg-radius-control) !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-context > summary::after {
  display: none !important;
  content: none !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .result-card .rc-section--explanation {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .result-card .rc-section--explanation .rc-section-title {
  margin: 0 0 5px !important;
  color: var(--fg-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .result-card .rc-section--explanation .rc-explanation {
  padding: 11px 13px !important;
  color: var(--fg-ink) !important;
  background: var(--fg-surface-alt) !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: var(--fg-radius-control) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .result-content > .rc-section--explanation {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-section--explanation .rc-section-title {
  margin: 0 0 5px !important;
  color: var(--fg-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-section--explanation .rc-explanation {
  padding: 11px 13px !important;
  color: var(--fg-ink) !important;
  background: var(--fg-surface-alt) !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: var(--fg-radius-control) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Keep final navigation scale within the approved reading/control contract. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar .sidebar-nav-item { font-size: 14px !important; line-height: 1.4; }
@media (min-width: 901px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar .sidebar-nav-item { min-height: 40px !important; height: auto !important; }
}


/* partials/library-editorial.css */
/* Approved B: saved work is a compact document list, with existing actions. */
body.app-layout.workspace-b #library-page {
  --library-canvas: var(--fg-canvas, #faf8f5); --library-surface: var(--fg-surface, #fffdfa);
  --library-soft: var(--fg-surface-alt, #f2eee8); --library-ink: var(--fg-ink, #242824);
  --library-muted: var(--fg-muted, #60665f); --library-line: var(--fg-line, #d9d8d0);
  --library-accent: var(--fg-accent, #1A3C2B);
  color: var(--library-ink); background: transparent; padding-block: 0;
}
body.app-layout.workspace-b #library-page .container { max-width: 1200px; width: 100%; margin: 0; padding: 0; }
body.app-layout.workspace-b #library-page .library-stack { gap: 16px; }
body.app-layout.workspace-b #library-page .library-header { margin: 0; padding: 0; border: 0; background: transparent; }
body.app-layout.workspace-b #library-page .library-heading-row { position: relative; display: flex; align-items: center; gap: 8px; }
body.app-layout.workspace-b #library-page .page-title { font: 500 24px/1.25 Georgia, "Times New Roman", serif; letter-spacing: -.025em; margin: 0; color: var(--library-ink); }
body.app-layout.workspace-b #library-page .library-info { position: static; }
body.app-layout.workspace-b #library-page .library-info summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--library-muted); border-radius: var(--radius-control); }
body.app-layout.workspace-b #library-page .library-info summary::-webkit-details-marker { display: none; }
body.app-layout.workspace-b #library-page .library-info[open] summary { background: var(--library-soft); }
body.app-layout.workspace-b #library-page .library-info .page-subtitle { position: absolute; top: calc(100% + 4px); left: 0; z-index: 12; width: 270px; margin: 0; padding: 16px; border: 1px solid var(--library-line); border-radius: var(--radius-surface); background: var(--library-surface); color: var(--library-muted); font: 14px/1.55 var(--font-body); box-shadow: 0 6px 18px #0000000a; }
body.app-layout.workspace-b #library-page .library-stats-row { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: -4px 0 0; }
body.app-layout.workspace-b #library-page .library-stat { display: flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; transform: none; }
body.app-layout.workspace-b #library-page .library-stat-label { margin: 0; font: 13px/1.4 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--library-muted); }
body.app-layout.workspace-b #library-page .library-stat-value { font: 600 13px/1.4 var(--font-body); color: var(--library-ink); }
body.app-layout.workspace-b #library-page .library-view-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--library-line); }
body.app-layout.workspace-b #library-page .library-view-tabs a { min-height: 44px; padding: 8px 0; display: inline-flex; align-items: center; color: var(--library-muted); text-decoration: none; font: 500 14px/1.3 var(--font-body); border-bottom: 2px solid transparent; }
body.app-layout.workspace-b #library-page .library-view-tabs a[aria-current="page"] { color: var(--library-accent); border-bottom-color: var(--library-accent); font-weight: 650; }
body.app-layout.workspace-b #library-page .library-toolbar { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,240px); gap: 8px 12px; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
body.app-layout.workspace-b #library-page .library-filters { display: contents; }
body.app-layout.workspace-b #library-page .library-search { min-width: 0; width: 100%; gap: 8px; padding: 0 12px; border: 1px solid var(--library-line); border-radius: var(--radius-control); background: var(--library-surface); color: var(--library-muted); }
body.app-layout.workspace-b #library-page .library-search-input { min-width: 0; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--library-ink); font: 14px/1.4 var(--font-body); }
body.app-layout.workspace-b #library-page .library-collection-select { width: 100%; min-width: 0; min-height: 44px; border-radius: var(--radius-control); background: var(--library-surface); border: 1px solid var(--library-line); color: var(--library-ink); font: 14px/1.4 var(--font-body); padding: 0 12px; }
body.app-layout.workspace-b #library-page .library-filter-chip-row { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 0 16px; }
body.app-layout.workspace-b #library-page .filter-chip { min-width: 44px; min-height: 44px; padding: 4px 0; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0; box-shadow: none; background: transparent !important; color: var(--library-muted) !important; font: 500 14px/1.3 var(--font-body); font-family: var(--font-body) !important; text-transform: none; letter-spacing: 0; }
body.app-layout.workspace-b #library-page .filter-chip::before { display: none; }
body.app-layout.workspace-b #library-page .filter-chip.active { border-bottom-color: var(--library-accent) !important; color: var(--library-accent) !important; background: transparent !important; }
body.app-layout.workspace-b #library-page :is(.library-items-grid,.library-collections-grid,.library-history-grid) { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--library-line); overflow: visible; }
body.app-layout.workspace-b #library-page :is(.library-item-card,.collection-card,.history-card) { position: relative; min-height: 86px; border: 0; border-bottom: 1px solid var(--library-line); border-radius: var(--radius-control); background: transparent; box-shadow: none; margin: 0; padding: 12px 52px 12px 12px; transform: none; }
body.app-layout.workspace-b #library-page :is(.library-item-card,.collection-card,.history-card):hover { background: transparent; box-shadow: none; transform: none; }
body.app-layout.workspace-b #library-page :is(.library-item-card:has(.library-card-menu.open),.collection-card:has(.collection-card-menu.open),.history-card:has(.history-card-menu.open)) { z-index: 50; }
body.app-layout.workspace-b #library-page .library-item-link { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 24px; color: inherit; padding: 0; text-decoration: none; }
body.app-layout.workspace-b #library-page .library-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; grid-column: 1; margin: 0; }
body.app-layout.workspace-b #library-page :is(.library-item-badge,.library-item-collection,.history-tool-badge,.history-collection-badge,.collection-card-label) { display: inline-flex; align-items: center; gap: 6px; min-height: auto; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; font: 500 12px/1.4 var(--font-body); color: var(--library-muted); text-transform: none; letter-spacing: 0; box-shadow: none; }
body.app-layout.workspace-b #library-page :is(.library-item-badge,.history-tool-badge) { color: var(--library-accent); }
body.app-layout.workspace-b #library-page :is(.library-item-badge,.history-tool-badge) svg { width: 18px; height: 18px; flex: none; }
body.app-layout.workspace-b #library-page .library-item-title { grid-column: 1; font: 600 14px/1.4 var(--font-body); margin: 0; color: var(--library-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-layout.workspace-b #library-page .library-item-summary { grid-column: 1; font: 12px/1.55 ui-monospace, "SFMono-Regular", Consolas, monospace; margin: 0; color: var(--library-muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-height: 1.6em; }
body.app-layout.workspace-b #library-page .library-item-meta { grid-column: 2; grid-row: 1/4; display: flex; align-items: center; margin: 0; padding: 0; font: 12px/1.4 var(--font-body); color: var(--library-muted); white-space: nowrap; }
body.app-layout.workspace-b #library-page :is(.library-item-actions,.collection-card-actions-menu,.history-card-actions-menu) { position: absolute; right: 4px; top: calc(50% - 22px); transform: none; z-index: 2; opacity: 1; pointer-events: auto; }
body.app-layout.workspace-b #library-page :is(.library-item-actions:has(.library-card-menu.open),.collection-card-actions-menu:has(.collection-card-menu.open),.history-card-actions-menu:has(.history-card-menu.open)) { z-index: 40; }
body.app-layout.workspace-b #library-page :is(.library-card-menu-btn,.collection-card-menu-btn,.history-card-menu-btn) { width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid transparent !important; border-radius: var(--radius-control); background: transparent !important; color: var(--library-muted) !important; display: grid; place-items: center; }
body.app-layout.workspace-b #library-page :is(.library-card-menu-btn,.collection-card-menu-btn,.history-card-menu-btn):is(:hover,:focus-visible,[aria-expanded="true"]) { background: var(--library-soft) !important; border-color: var(--library-line) !important; }
body.app-layout.workspace-b #library-page :is(.library-card-menu,.collection-card-menu,.history-card-menu) { background: var(--library-surface); color: var(--library-ink); border-color: var(--library-line); border-radius: var(--radius-surface); width: min(280px,calc(100vw - 48px)); max-height: min(520px,70vh); overflow-y: auto; box-shadow: 0 8px 24px #00000014; z-index: 30; }
body.app-layout.workspace-b #library-page :is(.menu-action,.menu-input,.menu-collection-select) { min-height: 44px; font: 14px/1.4 var(--font-body); border-radius: var(--radius-control); }
body.app-layout.workspace-b #library-page .menu-label { color: var(--library-muted); font: 600 12px/1.4 var(--font-body); letter-spacing: normal; text-transform: none; }
body.app-layout.workspace-b #library-page .history-card-top { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-right: 0; }
body.app-layout.workspace-b #library-page .history-card-title { order: 3; width: 100%; margin: 0; font: 600 14px/1.4 var(--font-body); color: var(--library-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.app-layout.workspace-b #library-page .history-time { margin-left: auto; font: 12px/1.4 var(--font-body); color: var(--library-muted); }
body.app-layout.workspace-b #library-page .history-card-prompt { margin: 4px 0 0; max-height: 1.6em; font: 12px/1.55 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--library-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.app-layout.workspace-b #library-page .history-card-meta { display: none; }
body.app-layout.workspace-b #library-page .library-history-callout { margin: 0 0 16px; padding: 12px 16px; border: 0; border-radius: var(--radius-control); background: var(--library-soft); color: var(--library-muted); font: 13px/1.5 var(--font-body); }
body.app-layout.workspace-b #library-page .collection-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 20px; align-items: center; }
body.app-layout.workspace-b #library-page .collection-card-label { display: none; }
body.app-layout.workspace-b #library-page .collection-card-title { display: flex; align-items: center; gap: 8px; font: 600 14px/1.4 var(--font-body); color: var(--library-ink); margin: 0; min-width: 0; overflow-wrap: anywhere; }
body.app-layout.workspace-b #library-page .collection-card-title svg { flex: none; width: 18px; height: 18px; }
body.app-layout.workspace-b #library-page .collection-card-meta { font: 13px/1.4 var(--font-body); color: var(--library-muted); }
body.app-layout.workspace-b #library-page .collection-card-actions { grid-column: 2; grid-row: 1/3; margin: 0; }
body.app-layout.workspace-b #library-page .collection-card-actions a { min-height: 44px; background: transparent; border: 1px solid var(--library-line); color: var(--library-accent); border-radius: var(--radius-control); font: 500 14px/1.3 var(--font-body); text-transform: none; letter-spacing: normal; }
body.app-layout.workspace-b #library-page .library-empty { padding: 28px 16px; background: transparent; border: 0; color: var(--library-muted); }
body.app-layout.workspace-b #library-page .library-empty h3 { color: var(--library-ink); font: 500 18px/1.3 Georgia, "Times New Roman", serif; }
body.app-layout.workspace-b #library-page #library-filter-reset { min-height: 44px; }
body.app-layout.workspace-b #library-page :is(button,a,input,select,summary):focus-visible { outline: 2px solid var(--library-accent); outline-offset: 3px; }
@media(max-width:767px) {
  body.app-layout.workspace-b #library-page .page-title { font-size: 22px; }
  body.app-layout.workspace-b #library-page .library-info .page-subtitle { left: 0; right: auto; width: min(270px,calc(100vw - 48px)); }
  body.app-layout.workspace-b #library-page .library-toolbar { grid-template-columns: minmax(0,1fr); }
  body.app-layout.workspace-b #library-page .library-filter-chip-row { gap: 0 16px; }
  body.app-layout.workspace-b #library-page .library-item-link { grid-template-columns: minmax(0,1fr); gap: 4px; }
  body.app-layout.workspace-b #library-page .library-item-meta { grid-column: 1; grid-row: auto; font-size: 12px; }
  body.app-layout.workspace-b #library-page :is(.library-item-card,.collection-card,.history-card) { padding-left: 4px; padding-right: 48px; }
  body.app-layout.workspace-b #library-page .history-time { margin-left: 0; }
  body.app-layout.workspace-b #library-page .collection-card { grid-template-columns: minmax(0,1fr); }
  body.app-layout.workspace-b #library-page .collection-card-actions { grid-column: 1; grid-row: auto; }
}

html.dark-mode body.app-layout.workspace-b #library-page { --library-accent: #c3d4c6; }
body.app-layout.workspace-b #library-page .filter-chip.active { color: var(--library-accent) !important; background: transparent !important; border-bottom-color: var(--library-accent) !important; }
body.app-layout.workspace-b #library-page :is(.library-item-card,.history-card,.collection-card) { min-width: 0; max-width: 100%; }
body.app-layout.workspace-b #library-page :is(.history-card-top,.library-item-head) { min-width: 0; }
body.app-layout.workspace-b #library-page :is(.history-collection-badge,.library-item-collection) { max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* JS intentionally switches the History view to grid. Its track must be able
   to shrink around literal long code/titles instead of sizing to min-content. */
body.app-layout.workspace-b #library-page :is(#library-items-view,#library-collections-view,#library-history-view) {
  width: 100%; min-width: 0; max-width: 100%; grid-template-columns: minmax(0,1fr);
}
body.app-layout.workspace-b #library-page :is(.library-items-grid,.library-collections-grid,.library-history-grid) {
  width: 100%; min-width: 0; max-width: 100%; grid-template-columns: minmax(0,1fr);
}
body.app-layout.workspace-b #library-page .library-header .page-title { font: 500 24px/1.25 Georgia, "Times New Roman", serif !important; letter-spacing: -.025em !important; }
body.app-layout.workspace-b #library-page .library-stats-row { border: 0; background: transparent; padding: 0; overflow: visible; }
body.app-layout.workspace-b #library-page .library-stats-row .library-stat { flex-direction: row; align-items: baseline; justify-content: start; border: 0; background: transparent; padding: 0; gap: 6px; }
@media(max-width:767px) { body.app-layout.workspace-b #library-page .library-header .page-title { font-size: 22px !important; } }

/* Hover describes an actionable link; it does not imitate a selected record. */
body.app-layout.workspace-b #library-page .filter-chip:hover { color: var(--library-ink) !important; }
body.app-layout.workspace-b #library-page .filter-chip.active { color: var(--library-accent) !important; }
body.app-layout.workspace-b #library-page .library-item-link:is(:hover,:focus-visible) .library-item-title,
body.app-layout.workspace-b #library-page .history-card[role="link"]:is(:hover,:focus-visible):not(:has(button:hover)) .history-card-title { text-decoration: underline; text-underline-offset: 3px; }
body.app-layout.workspace-b #library-page :is(.library-card-menu-btn,.collection-card-menu-btn,.history-card-menu-btn) svg { width: 18px; height: 18px; }
body.app-layout.workspace-b #library-page :is(.library-card-menu,.collection-card-menu,.history-card-menu) { position: fixed; inset: 0 auto auto 0; visibility: hidden; transform: none; transition: opacity .12s ease; }
body.app-layout.workspace-b #library-page :is(.library-card-menu,.collection-card-menu,.history-card-menu).open { visibility: visible; }
@media (min-width: 901px) and (pointer: fine) {
  body.app-layout.workspace-b #library-page :is(.library-item-actions,.collection-card-actions-menu,.history-card-actions-menu) { top: calc(50% - 16px); }
  body.app-layout.workspace-b #library-page :is(.library-card-menu-btn,.collection-card-menu-btn,.history-card-menu-btn) { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
}



/* partials/public-banner.css */
/* Without JavaScript the configured notice and header remain readable in flow. */
body.tm-page.has-site-banner:not(.public-banner-fixed) { padding-top: 0; }
body.tm-page.has-site-banner:not(.public-banner-fixed) > #site-banner { position: relative; }
body.tm-page.has-site-banner:not(.public-banner-fixed) > :is(.tm-nav, .site-header) { position: sticky; top: 0; }
body.tm-page.has-site-banner:not(.public-banner-fixed) > main { padding-top: 0; }


/* partials/public-motion.css */
/* Public-only motion. No hidden baseline, layout animation, or workspace effect. */
body.tm-page:not(.app-layout) [data-reveal],
body.tm-page:not(.app-layout) [data-reveal].reveal-in,
body.tm-page:not(.app-layout) .animate-fade-up {
    opacity: 1;
    transform: none;
    animation: none !important;
    transition: none;
}

body.tm-page:not(.app-layout) :where(a, button, summary, [role="tab"]) {
    transition-property: color, background-color, border-color, outline-color;
    transition-duration: 160ms;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

body.tm-page:not(.app-layout) :where(summary)::after {
    transition: transform 140ms cubic-bezier(0.25, 1, 0.5, 1), color 140ms linear;
}

@media (prefers-reduced-motion: reduce) {
    body.tm-page:not(.app-layout) :where(a, button, summary, [role="tab"]),
    body.tm-page:not(.app-layout) :where(summary)::after {
        transition: none !important;
    }
}


/* partials/mobile-repair-fixes.css */
/* Repair disclosures expand in normal flow at every viewport. */
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-context-tools {
  flex-wrap: wrap;
  gap: 8px;
}
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench #repair-context-cases button {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  white-space: nowrap;
}
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-context-editors,
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-request-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  min-width: 0;
}
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-panel details {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-panel details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 10px 0;
  list-style: none;
  border: 0;
  border-bottom: 1px solid var(--fg-line);
  border-radius: 0;
  color: var(--fg-ink);
  background: transparent;
  font: 500 14px/1.5 var(--font-body);
  cursor: pointer;
}
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench details > summary::-webkit-details-marker { display: none; }
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench details > summary::marker { content: ''; }
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench details > summary::after {
  content: '+';
  flex: 0 0 20px;
  text-align: center;
  font: 400 22px/1 var(--font-body);
}
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench details[open] > summary::after { content: '−'; }
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench details[open] > summary { margin-bottom: 12px; }
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-privacy-detail { margin-top: 12px; }
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-privacy { margin: 0; padding: 0; border: 0; }
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-empty {
  min-height: 0;
  padding: 0;
  text-align: left;
  border: 0;
  background: transparent;
}
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-empty p { margin: 0; color: var(--fg-muted); font-size: 14px; line-height: 1.6; }
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-result-panel:not(:has(#repair-result:not([hidden]))) .repair-panel-heading {
  margin-bottom: 8px;
  padding-bottom: 8px;
}
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-result-panel:not(:has(#repair-result:not([hidden]))) { min-height: 0; }
body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-evidence-tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
@media (max-width: 768px) {
  body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-settings :is(.repair-fields-row, .fg-preferences-fields) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-settings .repair-field { grid-column: auto; }
  body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench :is(input:not([type=checkbox]), select, textarea) { min-height: 44px; }
  body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-result-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  body.app-layout.workspace-b #repair-workflow.repair-sheet-workbench .repair-result-actions .btn { width: 100%; min-height: 44px; }
}


/* partials/mobile-overlay-fixes.css */
/* Mobile fixes for the approved B shell; keep desktop and result menus unchanged. */
@media (max-width: 900px), (pointer: coarse) {
  body.app-layout.workspace-concept.workspace-b :is(input:not([readonly]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]), select, textarea:not([readonly]), .library-collection-input) {
    font-size: 16px !important;
  }
  body.app-layout.workspace-concept.workspace-b :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--fg-ink); outline-offset: 2px; box-shadow: none !important;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-editor-options {
    display: flex; flex-wrap: wrap !important; gap: 8px; width: auto !important; min-width: 0; max-width: 100%;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools .fg-inline-platform {
    flex: 0 1 auto !important; width: auto !important; min-width: 0; max-width: 100%;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-inline-platform :is(.tm-select-shell, .tm-select-trigger, select) {
    width: 100% !important; min-width: 0 !important; max-width: 100%; min-height: 44px; box-sizing: border-box;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-inline-platform .tm-select-trigger { width: auto !important; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-preferences-panel { min-width: 0; max-width: 100%; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-preferences-trigger { min-height: 44px; max-width: 100%; }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog[open] {
    position: fixed; inset: auto; margin: 0; box-sizing: border-box;
    width: min(520px, calc(var(--fg-dialog-viewport-width, 100vw) - 16px));
    max-width: calc(var(--fg-dialog-viewport-width, 100vw) - 16px); min-width: 0;
    max-height: calc(var(--fg-dialog-viewport-height, 100dvh) - 16px);
    left: calc(var(--fg-dialog-viewport-left, 0px) + var(--fg-dialog-viewport-width, 100vw) / 2);
    top: calc(var(--fg-dialog-viewport-top, 0px) + var(--fg-dialog-viewport-height, 100dvh) / 2);
    transform: translate(-50%, -50%); display: flex; flex-direction: column; overflow: hidden;
  }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog > :is(header, footer) { flex: 0 0 auto; min-width: 0; padding: 12px 16px; gap: 8px; }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog > header h2 { min-width: 0; overflow-wrap: anywhere; }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog :focus-visible { outline: 2px solid var(--fg-ink); outline-offset: 2px; box-shadow: none !important; }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog .fg-preferences-close { flex: 0 0 44px; width: 44px; height: 44px; }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog-content { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog .fg-preferences-fields { grid-template-columns: minmax(0, 1fr); }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog :is(input, select) { box-sizing: border-box; min-width: 0; max-width: 100%; min-height: 44px; }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog :is(.fg-preferences-note, .fg-preferences-status) { overflow-wrap: anywhere; }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog > footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: var(--fg-surface); }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog > footer > a { flex: 1 1 auto; min-width: 0; color: var(--fg-ink); text-decoration: underline; text-underline-offset: 3px; }
  body.app-layout.workspace-concept.workspace-b .fg-preferences-dialog .fg-preferences-done { flex: 0 0 auto; width: auto !important; min-height: 44px; }
}
@media (max-width: 900px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .mobile-account-sheet {
    --fg-sheet-top: max(var(--app-shell-banner-offset, 0px), var(--fg-mobile-viewport-top, 0px));
    left: var(--fg-mobile-viewport-left, 0px); right: auto;
    width: var(--fg-mobile-viewport-width, 100vw); box-sizing: border-box;
    bottom: calc(100% - var(--fg-mobile-viewport-top, 0px) - var(--fg-mobile-viewport-height, 100dvh));
    max-height: calc(var(--fg-mobile-viewport-height, 100dvh) + var(--fg-mobile-viewport-top, 0px) - var(--fg-sheet-top) - 8px);
    overflow-y: auto; overscroll-behavior: contain; padding-top: 8px;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .mobile-account-sheet-head {
    position: sticky; top: -8px; z-index: 1; background: var(--bg-shell); padding-block: 8px; gap: 8px;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .mobile-account-sheet-close { flex: 0 0 44px; width: 44px; height: 44px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar {
    --fg-drawer-top: max(var(--app-shell-banner-offset, 0px), var(--fg-mobile-viewport-top, 0px));
    top: var(--fg-drawer-top) !important;
    left: var(--fg-mobile-viewport-left, 0px) !important;
    width: min(320px, calc(var(--fg-mobile-viewport-width, 100vw) - 44px)) !important;
    height: calc(var(--fg-mobile-viewport-height, 100dvh) + var(--fg-mobile-viewport-top, 0px) - var(--fg-drawer-top)) !important;
    max-height: calc(var(--fg-mobile-viewport-height, 100dvh) + var(--fg-mobile-viewport-top, 0px) - var(--fg-drawer-top));
    overflow: hidden !important; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar .fg-sidebar-toolbar { flex: 0 0 auto; min-height: 44px; margin-bottom: 8px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar .fg-sidebar-identity { min-width: 0; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar .fg-sidebar-identity span { overflow: hidden; text-overflow: ellipsis; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar .fg-sidebar-controls { gap: 8px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar .sidebar-nav { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-block: 0 8px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-sidebar .sidebar-user { flex: 0 0 auto; position: static; }
}


/* partials/mobile-generation-forms.css */
/* Keep optional generation inputs in their own full-width row on mobile. */
@media (max-width: 900px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools > .fg-editor-options {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    flex: 0 1 auto !important;
    flex-wrap: wrap !important;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools > .fg-context {
    grid-column: 1;
    grid-row: 2;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
  }

  /* Regex has no platform/settings row, so its context belongs in row one. */
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools > .fg-context:only-child {
    grid-row: 1;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools > .fg-context[open] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools > .fg-context > summary {
    width: 100%;
    min-width: 0;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools > .fg-context > .form-group,
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-composer-tools > .fg-context :is(input, textarea) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* partials/mobile-result-evidence.css */
/* Populated evidence must not inherit the empty Verify CTA two-column grid.
   Keep truth, disclosures and horizontal sample-table scrolling intact. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification:has(.rc-verification-summary-card) { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 8px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification:has(.rc-verification-summary-card) > :is(.rc-verification-summary-card, .rc-collapsible) { grid-column: 1 / -1; min-width: 0; width: 100%; box-sizing: border-box; margin: 0 !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-verification-summary-card { padding: 14px !important; border-color: var(--fg-line) !important; background: var(--fg-surface-soft) !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-coverage-row { justify-content: flex-start !important; flex-wrap: wrap; gap: 8px; margin-bottom: 8px !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification :is(.rc-coverage-label, .rc-coverage-badge, .rc-collapsible-summary, .rc-note-subsection-title) { font: 600 14px/1.5 var(--font-body) !important; text-transform: none !important; letter-spacing: normal !important; color: var(--fg-ink) !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-coverage-badge { min-height: 0; padding: 0; border: 0 !important; background: transparent !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-coverage-badge::before { display: none !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-validation-score { font: 650 22px/1.3 var(--font-body) !important; color: var(--fg-ink) !important; overflow-wrap: anywhere; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification :is(.rc-validation-meta, .rc-verification-copy) { font: 400 14px/1.5 var(--font-body) !important; color: var(--fg-muted) !important; overflow-wrap: anywhere; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-collapsible { border-color: var(--fg-line) !important; background: var(--fg-surface) !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-collapsible-summary { position: relative; min-height: 44px !important; padding: 11px 44px 11px 14px !important; box-sizing: border-box; overflow-wrap: anywhere; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-collapsible-summary::before { display: none !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-collapsible-summary::after { right: 12px !important; width: 20px !important; height: 20px !important; opacity: 1 !important; color: var(--fg-ink) !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-collapsible[open] .rc-collapsible-summary::after { transform: translateY(-50%) !important; background: linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat !important; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-collapsible-body { min-width: 0; padding: 12px 14px 14px !important; border-top-color: var(--fg-line); color: var(--fg-ink); }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification :is(.rc-note-subsection, .rc-list, .rc-list-item) { min-width: 0; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:not(.fg-export-capture) #generate-page .result-card .fg-result-verification .rc-list-item > span:last-child { min-width: 0; overflow-wrap: anywhere; }


/* partials/mobile-output-containment.css */
/* The B mobile toolbar has two rows; the legacy A generator reserved only one. */
@media (max-width: 900px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .app-content-toolbar {
    height: auto !important;
    grid-auto-rows: minmax(44px, auto);
  }
}

@media (max-width: 900px), (pointer: coarse) {
  body.app-layout.workspace-b:not(.fg-export-capture) #generate-page .result-card :is(button, summary) {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  body.app-layout.workspace-b #generate-page .fg-info-disclosure > summary {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
  body.app-layout.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-head-menu-trigger {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }
}

/* Explain fragments are code, not uppercase labels. Long tokens may wrap visually
   without changing their literal text or Copy/export content. */
body.app-layout.workspace-b:not(.fg-export-capture) #generate-page .result-card :is(.rc-section-stack, .rc-component) {
  min-width: 0;
  max-width: 100%;
}
body.app-layout.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-component-code {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
body.app-layout.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-component-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Regex examples are literal tokens too; even a single unbroken example must fit. */
body.app-layout.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-examples {
  min-width: 0;
  max-width: 100%;
}
body.app-layout.workspace-b:not(.fg-export-capture) #generate-page .result-card .rc-examples code {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-transform: none;
}


/* partials/workspace-heading-consistency.css */
/* Shared approved-B heading contract for authenticated workspaces. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b :is(
  #dashboard-page .fg-dashboard-heading h1,
  #generate-page .fg-workspace-heading h1,
  #check-workspace .fg-check-heading h1,
  #repair-workflow .repair-heading h1,
  #airtable-diagnosis .at-heading h1,
  #fgdata-cleaner .fgdata-heading h1,
  #fgstatement-app .fgdata-heading h1,
  #library-page .library-heading-row h1,
  .account-settings-page .section-title h1,
  .billing-page .section-title h1
) {
  margin: 0 !important;
  color: var(--fg-ink) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}

/* Library help follows the same in-flow disclosure contract as generator help. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #library-page .library-heading-row:has(> .library-info[open]) { flex-wrap: wrap; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #library-page .library-heading-row > .library-info[open] {
  position: static; display: grid; flex: 1 1 100%; width: 100%; min-width: 0;
  grid-template-columns: 44px minmax(0,1fr); align-items: start; gap: 8px; margin-top: 4px;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #library-page .library-heading-row > .library-info[open] > summary { width: 44px; height: 44px; min-height: 44px; }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #library-page .library-heading-row > .library-info[open] > .page-subtitle {
  position: static; width: auto; min-width: 0; max-width: 100%; margin: 0; box-shadow: none; overflow-wrap: anywhere;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .fg-dashboard-task-guides a { color: var(--fg-accent-text); }
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .dashboard-recent-type {
  color: var(--fg-muted) !important; background: transparent !important; border: 0 !important;
  padding: 0; font-family: var(--font-body) !important; text-transform: none; letter-spacing: normal;
}
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b .dashboard-recent-type::before { display: none; }

/* Remove decorative heading-only marks; functional navigation and tool icons remain. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #dashboard-page .fg-dashboard-title .fg-heading-icon,
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #check-workspace .fg-check-heading h1 > svg,
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b :is(.account-settings-page, .billing-page) > .container > .section-title > .badge {
  display: none !important;
}

/* A single compact title/description rhythm, without page-specific decorative rules. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b :is(
  #dashboard-page .fg-dashboard-heading,
  #check-workspace .fg-check-heading,
  #repair-workflow .repair-heading,
  #airtable-diagnosis .at-heading,
  #fgdata-cleaner .fgdata-heading,
  #fgstatement-app .fgdata-heading,
  #library-page .library-header,
  .account-settings-page > .container > .section-title,
  .billing-page > .container > .section-title
) {
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
  border: 0 !important;
}

body.app-layout.workspace-shell-v2.workspace-concept.workspace-b :is(
  #dashboard-page .fg-dashboard-heading p,
  #check-workspace .fg-check-heading p,
  #repair-workflow .repair-heading p,
  #airtable-diagnosis .at-heading p,
  #fgdata-cleaner .fgdata-heading > p:last-child,
  #fgstatement-app .fgdata-heading > p:last-child,
  .account-settings-page .section-title p,
  .billing-page .section-title p
) {
  margin: 4px 0 0 !important;
  color: var(--fg-muted) !important;
  font: 14px/1.5 var(--font-body) !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* Keep existing functional info affordances compact and reliably tappable. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-title-line,
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #library-page .library-heading-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-title-line > .fg-info-disclosure > summary,
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #library-page .library-heading-row > .library-info > summary {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: var(--fg-radius-control);
}

/* Section titles use the same restrained serif voice; labels and result evidence stay as authored. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b :is(
  #dashboard-page .fg-entry-header h2,
  #dashboard-page .da-panel-heading h2,
  #generate-page .fg-output-heading h2,
  #check-workspace .fg-check-panel > h2,
  #check-workspace .fg-check-panel-heading h2,
  #repair-workflow .repair-panel-heading h2,
  #airtable-diagnosis .at-panel-heading h2,
  #fgdata-cleaner .fgdata-section-heading h2,
  #fgstatement-app .fgdata-section-heading h2,
  .account-settings-page .card h3,
  .billing-page .card h3
) {
  color: var(--fg-ink);
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.015em;
  text-transform: none;
}

@media (max-width: 900px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b :is(
    #dashboard-page .fg-dashboard-heading h1,
    #generate-page .fg-workspace-heading h1,
    #check-workspace .fg-check-heading h1,
    #repair-workflow .repair-heading h1,
    #airtable-diagnosis .at-heading h1,
    #fgdata-cleaner .fgdata-heading h1,
    #fgstatement-app .fgdata-heading h1,
    #library-page .library-heading-row h1,
    .account-settings-page .section-title h1,
    .billing-page .section-title h1
  ) {
    font-size: 20px !important;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #generate-page .fg-title-line > .fg-info-disclosure > summary,
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b #library-page .library-heading-row > .library-info > summary {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
}


/* partials/generator-disclosure-layout.css */
/*
 * Keep the closed composer compact. When an optional context disclosure is
 * open on desktop, give its fields the full editor width and place the submit
 * action after those fields in normal document flow.
 */
@media (min-width: 901px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-composer-footer:has(> .fg-composer-tools > .fg-context[open]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-composer-footer:has(> .fg-composer-tools > .fg-context[open])
    > .fg-composer-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-composer-footer:has(> .fg-composer-tools > .fg-context[open])
    .fg-editor-options {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-composer-footer:has(> .fg-composer-tools > .fg-context[open])
    > .fg-composer-tools > .fg-context {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-top: 8px;
    border-top: 1px solid var(--fg-line);
  }

  /* Regex has no separate platform/settings row. */
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-composer-footer:has(> .fg-composer-tools > .fg-context[open])
    > .fg-composer-tools > .fg-context:only-child {
    grid-row: 1 !important;
    padding-top: 0;
    border-top: 0;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-composer-footer:has(> .fg-composer-tools > .fg-context[open])
    > .fg-composer-tools > .fg-context[open] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-composer-footer:has(> .fg-composer-tools > .fg-context[open])
    > .fg-composer-tools > .fg-context[open] > summary {
    justify-self: start;
    width: max-content;
    max-width: 100%;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-composer-footer:has(> .fg-composer-tools > .fg-context[open])
    > .fg-composer-tools > .fg-context[open] > .form-group {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-composer-footer:has(> .fg-composer-tools > .fg-context[open])
    > .fg-composer-tools > .fg-context[open] :is(input, textarea) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-composer-footer:has(> .fg-composer-tools > .fg-context[open])
    > .fg-editor-submit {
    grid-column: 1 !important;
    justify-self: end !important;
    align-self: stretch !important;
  }
}

/* Expanded generator info stays in the heading flow instead of covering the prompt. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
  #generate-page .fg-title-line:has(> .fg-info-disclosure[open]) {
  flex-wrap: wrap;
  min-width: 0;
}

body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
  #generate-page .fg-title-line > .fg-info-disclosure[open] {
  position: static;
  display: grid;
  flex: 1 1 100%;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
}

body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
  #generate-page .fg-title-line > .fg-info-disclosure[open] > summary {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  min-height: 44px;
}

body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
  #generate-page .fg-title-line > .fg-info-disclosure[open] > p {
  position: static;
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  margin: 0;
  color: var(--fg-ink);
  background: var(--fg-surface);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius-control);
  box-shadow: none;
  font-size: 13px;
  line-height: 1.5;
}

/* Open examples remain inside their own row; long chip labels scroll within it. */
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
  #generate-page .fg-prompt-label-row,
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
  #generate-page .fg-prompt-label-row .fg-examples,
body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
  #generate-page .fg-prompt-label-row .fg-example-chips {
  min-width: 0;
  max-width: 100%;
}

body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
  #generate-page .fg-prompt-label-row .fg-examples[open] {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
}

body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
  #generate-page .fg-prompt-label-row .fg-examples[open] .fg-example-chips {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

@media (max-width: 900px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b
    #generate-page .fg-prompt-label-row .fg-examples > summary {
    min-height: 44px !important;
  }
}


/* partials/sidebar-viewport-fixes.css */
/* The desktop sidebar belongs to the viewport, not the document's scroll ancestry.
   Keep existing B widths; only its navigation may scroll. Mobile retains the
   visualViewport-aware drawer rules in mobile-overlay-fixes.css. */
@media (min-width: 901px) {
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b { --fg-desktop-sidebar-width: 252px; }
  html.sidebar-collapsed body.app-layout.workspace-shell-v2.workspace-concept.workspace-b,
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b:has(> .app-sidebar.collapsed) { --fg-desktop-sidebar-width: 76px; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b > .app-sidebar {
    position: fixed !important;
    inset: var(--app-shell-banner-offset, 0px) auto auto 0;
    width: var(--fg-desktop-sidebar-width) !important;
    height: calc(100dvh - var(--app-shell-banner-offset, 0px)) !important;
    max-height: calc(100dvh - var(--app-shell-banner-offset, 0px));
    min-height: 0;
    box-sizing: border-box;
    overflow: visible !important;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b > .app-main {
    margin-left: var(--fg-desktop-sidebar-width);
    min-width: 0;
  }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b > .app-sidebar > .fg-sidebar-toolbar,
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b > .app-sidebar > .sidebar-user { flex: 0 0 auto; }
  body.app-layout.workspace-shell-v2.workspace-concept.workspace-b > .app-sidebar > .sidebar-nav {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--fg-muted) transparent;
  }
  body.app-layout.workspace-b > .app-sidebar > .sidebar-nav::-webkit-scrollbar { width: 6px; }
  body.app-layout.workspace-b > .app-sidebar > .sidebar-nav::-webkit-scrollbar-thumb { background: var(--fg-line-strong); border-radius: var(--radius-control); }
}



/* partials/select-chevron-spacing.css */
/* One inset for native selects on web pages and standalone ChatGPT widgets.
   Enhanced selects render their own arrow; listboxes keep native presentation. */
:root {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='m3 5 4 4 4-4' stroke='%2358665f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html.dark-mode {
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='m3 5 4 4 4-4' stroke='%23bdc2b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select:not([multiple]):not([size]):not(.tm-select-native),
select[size="1"]:not([multiple]):not(.tm-select-native) {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 46px !important;
  background-image: var(--select-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px 14px !important;
}
/* Reserve the same edge space for the custom combobox's flex arrow. */
.app-layout .tm-select-trigger { padding-right: 16px !important; }
@media (forced-colors: active) {
  select:not([multiple]):not([size]):not(.tm-select-native),
  select[size="1"]:not([multiple]):not(.tm-select-native) {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    background-image: none !important;
  }
}


/* partials/statement-widget-theme.css */
/* Match workspace-b's Finance palette. Keep this in the revalidated stylesheet
   so replayed ChatGPT resource HTML receives the same light/dark fixes. */
html[data-statement-widget="true"]:root {
  --fg-paper: #faf8f5;
  --fg-surface: #fffdfa;
  --fg-surface-soft: #f2eee8;
  --fg-ink: #242824;
  --fg-muted: #60665f;
  --fg-line: #d9d8d0;
  --fg-line-strong: #bdbfb6;
  --fg-accent: #245d9b;
  --fg-accent-deep: #1e4f86;
  --fg-selected: #e5edf7;
  --fg-radius-panel: 10px;
  --fg-radius-control: 8px;
  --bg-surface: var(--fg-paper);
  --text-primary: var(--fg-ink);
  --text-secondary: var(--fg-muted);
  color-scheme: light;
}

/* :root also outranks the legacy inline dark tokens in cached resources. */
html.dark-mode[data-statement-widget="true"]:root {
  --fg-paper: #191d19;
  --fg-surface: #222822;
  --fg-surface-soft: #292f29;
  --fg-ink: #f1efe8;
  --fg-muted: #bdc2b8;
  --fg-line: #3b433b;
  --fg-line-strong: #60695f;
  --fg-accent: #315f91;
  --fg-accent-deep: #3d71aa;
  --fg-selected: #26374a;
  color-scheme: dark;
}

html[data-statement-widget="true"],
html[data-statement-widget="true"] body {
  background: var(--fg-paper);
}