/* x88 · Soft prosperity palette · local Manrope and Space Grotesk typography */
:root {
  --color-paper: oklch(100% 0 0); --color-surface: oklch(100% 0 0);
  --color-tint: oklch(94% .014 80); --color-ink: oklch(25% .012 80);
  --color-muted: oklch(45% .015 80); --color-rule: oklch(84% .014 80);
  --color-accent: oklch(39% .035 150); --color-accent-ink: oklch(98% .005 80);
  --color-focus: oklch(49% .06 150); --color-seal: oklch(48% .055 30);
  --color-chart-3: oklch(62% .055 80); --color-chart-4: oklch(58% .025 145); --color-chart-5: oklch(73% .012 80);
  --color-swatch-sage: oklch(84% .045 145); --color-swatch-ivory: oklch(91% .035 80); --color-swatch-lavender: oklch(84% .055 300); --color-swatch-slate: oklch(82% .04 240);
  --color-shadow: oklch(25% .012 80 / .07); --color-error: oklch(40% .11 25); --color-transparent: transparent;
  --space-2xs: .25rem; --space-xs: .5rem; --space-sm: .75rem;
  --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem;
  --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem;
  --font-heading: var(--font-body); --font-wordmark: var(--font-display);
  --text-xs: .75rem; --text-sm: .875rem; --text-md: 1rem;
  --text-lg: 1.25rem; --text-xl: 1.5625rem;
  --text-display: clamp(2.3rem, 4.1vw + .5rem, 4.25rem);
  --radius-card: 8px; --radius-button: 6px;
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --z-sticky: 200;
  --ink: var(--color-ink); --muted: var(--color-muted); --accent: var(--color-accent);
  --accent-dark: var(--color-ink); --tint: var(--color-tint); --line: var(--color-rule);
}
[data-theme="monochrome"] {
  --color-paper: oklch(100% 0 0); --color-surface: oklch(100% 0 0);
  --color-tint: oklch(94% 0 0); --color-ink: oklch(25% 0 0);
  --color-muted: oklch(45% 0 0); --color-rule: oklch(84% 0 0);
  --color-accent: oklch(30% 0 0); --color-focus: oklch(49% 0 0);
}
[data-theme="sage"] {
  --color-paper: oklch(100% 0 0); --color-surface: oklch(100% 0 0);
  --color-tint: oklch(94% .026 145); --color-ink: oklch(27% .019 145);
  --color-muted: oklch(45% .019 145); --color-rule: oklch(84% .023 145);
  --color-accent: oklch(38% .046 145); --color-focus: oklch(49% .07 145);
}
[data-theme="ivory"] {
  --color-paper: oklch(100% 0 0); --color-surface: oklch(100% 0 0);
  --color-tint: oklch(94% .025 80); --color-ink: oklch(29% .024 70);
  --color-muted: oklch(46% .028 70); --color-rule: oklch(83% .025 80);
  --color-accent: oklch(40% .04 70); --color-focus: oklch(50% .065 70);
  --font-heading: var(--font-display);
}
[data-theme="lavender"] {
  --color-paper: oklch(100% 0 0); --color-surface: oklch(100% 0 0);
  --color-tint: oklch(94% .032 300); --color-ink: oklch(29% .025 300);
  --color-muted: oklch(46% .025 300); --color-rule: oklch(84% .028 300);
  --color-accent: oklch(40% .065 300); --color-focus: oklch(50% .085 300);
}
[data-theme="slate"] {
  --color-paper: oklch(100% 0 0); --color-surface: oklch(100% 0 0);
  --color-tint: oklch(94% .02 240); --color-ink: oklch(29% .025 240);
  --color-muted: oklch(46% .024 240); --color-rule: oklch(84% .02 240);
  --color-accent: oklch(39% .045 240); --color-focus: oklch(50% .065 240);
}
.x88-page {
  --ink: var(--color-ink); --muted: var(--color-muted); --accent: var(--color-accent);
  --accent-dark: var(--color-ink); --tint: var(--color-tint); --line: var(--color-rule);
}

.demo-root {
  --canvas: #f6f6f0;
  --deep: #465337;
  --accent: #738254;
  --tint: #edf0e1;
  --border: #e3e6d8;
}
.demo-root[data-theme="clay"] {
  --canvas: #f7f3ee;
  --deep: #805845;
  --accent: #a37359;
  --tint: #f2e8df;
  --border: #e8ded3;
}
.demo-root[data-theme="ink"] {
  --canvas: #f2f4f5;
  --deep: #3b4a59;
  --accent: #697c8a;
  --tint: #e7edf0;
  --border: #dce3e8;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: #292d27;
  background: #f6f6f0;
  font-family: var(--font-body), sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  color: inherit;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent, #66754d);
  outline-offset: 3px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -0.035em;
}
h1 {
  font-family: var(--font-display), serif;
  font-size: 38px;
  line-height: 1.2;
  margin-bottom: 12px;
}
h2 {
  font-size: 21px;
  margin-bottom: 14px;
}
h3 {
  font-size: 16px;
}
p {
  line-height: 1.6;
  color: #666a60;
}
small {
  font-size: 12px;
  line-height: 1.45;
}
svg {
  flex-shrink: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.small {
  font-size: 12px;
}
.muted {
  color: #72766b;
}
.eyebrow {
  display: block;
  color: #6e745f;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
}
.demo-root {
  min-height: 100vh;
  background: var(--canvas);
}
.demo-strip {
  height: 34px;
  background: var(--deep);
  color: #f7f8ef;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  font-size: 11px;
  letter-spacing: 0.01em;
}
.demo-strip > span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ced9b4;
}
.demo-strip button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: inherit;
  border-left: 1px solid #ffffff35;
  padding: 0 0 0 20px;
  font-size: 11px;
}
.app-layout {
  display: flex;
  min-height: calc(100vh - 34px);
}
.sidebar {
  width: 238px;
  flex-shrink: 0;
  background: #fffef9;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 27px 18px 15px;
  position: sticky;
  top: 0;
  height: calc(100vh - 34px);
  overflow-y: auto;
}
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.sidebar-brand a {
  display: flex;
  gap: 11px;
  align-items: center;
}
.brand-symbol {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--deep);
  color: #f9f9f0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-family: var(--font-display), serif;
  font-size: 20px;
  font-style: italic;
}
.sidebar-brand strong {
  font-family: var(--font-display), serif;
  font-size: 23px;
  font-weight: normal;
  letter-spacing: -1px;
}
.sidebar-brand strong span {
  font-family: var(--font-body), sans-serif;
  display: block;
  margin-top: 5px;
  font-size: 7px;
  letter-spacing: 1.4px;
}
.business-card {
  display: flex;
  gap: 9px;
  align-items: center;
  margin-bottom: 29px;
  padding: 12px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #f8f8f2;
}
.business-card > div {
  min-width: 0;
  flex: 1;
}
.business-card strong {
  font-size: 11px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.business-card div span {
  display: block;
  font-size: 10px;
  color: #868b7b;
  margin-top: 5px;
}
.business-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #d7dbc9;
  background: #eef1e5;
  border-radius: 4px;
  font-family: var(--font-display), serif;
  font-size: 16px;
}
.tiny-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.nav-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #9b9f91;
  padding-left: 12px;
  margin-bottom: 10px;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: #727769;
  font-size: 12px;
  border-radius: 5px;
}
.sidebar nav a:hover {
  background: #f3f4eb;
  color: #33392c;
}
.sidebar nav a.active {
  background: var(--tint);
  color: var(--deep);
  font-weight: 600;
}
.nav-count {
  margin-left: auto;
  background: var(--deep);
  color: #fff;
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 27px;
}
.config-teaser {
  border: 1px solid #dce1ce;
  background: #f6f7ed;
  padding: 16px 12px;
  border-radius: 6px;
}
.config-teaser > svg {
  margin-bottom: 10px;
  color: var(--accent);
}
.config-teaser strong {
  display: block;
  font-size: 12px;
}
.config-teaser p {
  font-size: 11px;
  margin: 7px 0 10px;
}
.config-teaser button {
  border: 0;
  background: none;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 0;
  color: var(--deep);
}
.website-link {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 17px 5px;
  font-size: 11px;
  color: #727768;
}
.role-card {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.role-card label {
  flex: 1;
  min-width: 0;
}
.role-card label > span {
  display: block;
  font-size: 10px;
  font-weight: 600;
}
.role-card select {
  border: 0;
  background: none;
  font-size: 10px;
  color: #7b7e70;
  padding: 3px 0;
  width: 100%;
  margin: 0;
}
.avatar {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #efeee6;
  color: #777b68;
  font-size: 11px;
  font-weight: 500;
  width: 34px;
  height: 34px;
  border: 1px solid #e5e5d9;
  border-radius: 50%;
  flex-shrink: 0;
}
.workspace {
  min-width: 0;
  flex: 1;
}
.topbar {
  height: 70px;
  padding: 0 42px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: #ffffff50;
  gap: 12px;
}
.topbar > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.breadcrumb {
  font-size: 11px;
  color: #858979;
  display: flex;
  align-items: center;
  gap: 12px;
}
.breadcrumb strong {
  font-weight: 400;
  color: #404736;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  padding: 10px 17px;
  background: var(--deep);
  color: #fffef7;
  border: 1px solid var(--deep);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  transition:
    background 0.15s,
    transform 0.15s;
}
.button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.button.secondary {
  background: #fffef9;
  color: #474f3c;
  border-color: #dfe2d3;
}
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 9px 0;
  color: var(--accent);
  font-size: 12px;
}
.danger {
  color: #9c5044;
}
.icon-button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 38px;
  min-height: 38px;
  padding: 5px;
  background: transparent;
  border: 0;
}
.page-content {
  max-width: 1380px;
  margin: auto;
  padding: 39px 42px 20px;
}
.page-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
}
.page-heading p {
  font-size: 13px;
  margin-bottom: 0;
}
.heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.welcome-note {
  background: #edeedf;
  border: 1px solid #dfe3d0;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #697354;
  font-size: 11px;
  border-radius: 5px;
  margin-bottom: 28px;
}
.outline-pill {
  margin-left: auto;
  padding: 4px 7px;
  font-size: 8px;
  letter-spacing: 0.05em;
  border: 1px solid #d0d7b8;
  border-radius: 3px;
  white-space: nowrap;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  margin-bottom: 27px;
}
.metric {
  padding: 20px 20px 17px;
  background: #fffef9;
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 134px;
}
.metric > span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #727867;
}
.metric strong {
  display: block;
  font-size: 29px;
  letter-spacing: -1.3px;
  font-weight: 500;
  margin: 19px 0 8px;
  line-height: 1;
}
.metric small {
  font-size: 10px;
  color: #969986;
}
.metric.emphasis {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}
.metric.emphasis > span {
  color: #e0e5d7;
}
.metric.emphasis small {
  color: #c6ceba;
}
.metric-dot {
  width: 5px;
  height: 5px;
  border: 1px solid #acb393;
  border-radius: 50%;
}
.overview-columns {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
}
.panel {
  background: #fffef9;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 25px;
  margin-bottom: 23px;
  min-width: 0;
}
.attention-panel,
.schedule-panel {
  padding: 23px 21px 0;
  overflow: hidden;
  margin-bottom: 0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.section-heading h2,
.section-heading h3 {
  margin-bottom: 0;
}
.section-heading .eyebrow {
  font-size: 9px;
  margin-bottom: 8px;
}
.section-heading > a {
  font-size: 10px;
  color: #80866f;
  display: flex;
  align-items: center;
  gap: 6px;
}
.section-heading > span {
  font-size: 11px;
  color: #858c78;
}
.list-header {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #edeee3;
  border-bottom: 1px solid #edeee3;
  padding: 12px 0;
  font-size: 8px;
  color: #9a9d8c;
  letter-spacing: 0.07em;
}
.work-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid #ededdf;
  min-height: 73px;
}
.work-row:last-child {
  border-bottom: 0;
}
.work-title {
  flex: 1;
  min-width: 0;
}
.work-title > strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
}
.work-title > small {
  display: block;
  font-size: 10px;
  color: #8f9482;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.work-title small span {
  color: #a3a68e;
}
.row-status {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 7px;
}
.row-status small {
  font-size: 10px;
  color: #8b917e;
}
.work-row > svg {
  color: #b2b59f;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  background: #f0eee4;
  color: #7c795e;
  border: 1px solid #eae7d9;
  padding: 4px 7px;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.25;
}
.badge.confirmed,
.badge.scheduled,
.badge.available,
.badge.current {
  background: #edf0e4;
  color: #6a7749;
  border-color: #e0e6d0;
}
.badge.completed,
.badge.paid,
.badge.payment,
.badge.security_received {
  background: #eaf1e7;
  color: #506a48;
  border-color: #dbe5d3;
}
.badge.active,
.badge.issued,
.badge.partially_paid {
  background: #faf0dd;
  color: #93763e;
  border-color: #efdfb8;
}
.badge.cancelled,
.badge.refund,
.badge.expense,
.badge.security_deduction {
  background: #f8eae4;
  color: #9a6053;
  border-color: #eed8ce;
}
.schedule-row {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid #eeeede;
  align-items: center;
}
.date-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 43px;
  min-height: 48px;
  background: #f5f5ec;
  border: 1px solid #ececdf;
  border-radius: 4px;
  flex-shrink: 0;
}
.date-tile small {
  font-size: 8px;
  color: #959a83;
  text-transform: uppercase;
}
.date-tile strong {
  font-family: var(--font-display), serif;
  font-size: 20px;
  color: #727b5b;
  font-weight: normal;
  margin-top: 2px;
}
.date-tile.highlight {
  background: #eef1df;
  border-color: #e1e6cc;
}
.schedule-row > div {
  flex: 1;
  min-width: 0;
}
.schedule-row > div strong,
.schedule-row > div small,
.schedule-row > div > span {
  display: block;
}
.schedule-row > div strong {
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 5px;
}
.schedule-row > div small {
  color: #949987;
  font-size: 10px;
}
.schedule-row > div > span {
  margin-top: 6px;
  font-size: 9px;
  color: #a1a78f;
}
.small-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a5b480;
}
.schedule-bottom {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 5px;
  padding: 17px 0;
  color: #a1a68b;
}
.schedule-bottom p {
  font-size: 10px;
  margin: 0;
  color: #a1a68b;
}
.bottom-feature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 30px;
  margin-top: 24px;
  border-radius: 7px;
  border: 1px solid #dfe3d0;
  background: #f0f1e6;
  overflow: hidden;
}
.bottom-feature h2 {
  font-family: var(--font-display), serif;
  font-size: 23px;
}
.bottom-feature p {
  font-size: 11px;
  margin-bottom: 0;
}
.sketch-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 85px;
  border: 1px solid #cbd3b9;
  border-radius: 50%;
  color: #9aa680;
  transform: rotate(-14deg);
  flex-shrink: 0;
  margin-left: 20px;
}
.workspace-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid #e5e7d9;
  margin-top: 34px;
  padding: 17px 0;
  font-size: 9px;
  color: #9ba18b;
}
.workspace-footer > span:last-child {
  font-size: 8px;
  letter-spacing: 0.08em;
}
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}
.toolbar > span {
  font-size: 11px;
  color: #838a77;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #fffefa;
  border: 1px solid var(--border);
  border-radius: 5px;
  max-width: 360px;
  flex: 1;
  color: #969d88;
}
.search-box input {
  border: 0;
  background: none;
  padding: 11px 0;
  min-width: 0;
  width: 100%;
  font-size: 12px;
  outline-offset: 4px;
}
.toolbar select {
  width: auto;
  min-width: 160px;
  margin: 0;
  font-size: 12px;
}
.data-list {
  padding: 0;
  overflow: hidden;
}
.data-header,
.data-row {
  display: grid;
  align-items: center;
  gap: 20px;
  padding: 17px 21px;
}
.data-header {
  background: #f8f8f0;
  color: #8f9580;
  font-size: 9px;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
}
.data-row {
  background: transparent;
  width: 100%;
  color: inherit;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #edeee2;
  font-size: 12px;
  min-height: 69px;
}
.data-row:last-child {
  border-bottom: 0;
}
.data-row:is(a, button):hover {
  background: #f6f7ed;
}
.data-row strong {
  font-size: 12px;
  font-weight: 500;
}
.four {
  grid-template-columns: 1.4fr 1.2fr 1fr 1fr;
}
.five {
  grid-template-columns: 2fr 0.9fr 0.9fr 0.9fr 20px;
}
.three {
  grid-template-columns: 1fr 1fr 1.3fr;
}
.identity {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.stack small {
  color: #939982;
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.row-end {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8c947a;
  font-size: 10px;
  justify-content: flex-end;
}
.booking-row {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #edeee2;
  padding: 18px 22px;
}
.booking-row > .stack {
  flex: 1;
}
.booking-row > span.muted {
  font-size: 12px;
}
.small-button {
  border: 1px solid var(--border);
  padding: 8px 11px;
  font-size: 11px;
  border-radius: 4px;
  background: #f7f8ed;
}
.package-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.package-card {
  position: relative;
  padding: 33px;
  margin-bottom: 0;
}
.package-card h2 {
  font-family: var(--font-display), serif;
  font-size: 28px;
}
.package-card p {
  font-size: 12px;
  max-width: 270px;
  min-height: 45px;
}
.package-card > strong {
  display: block;
  font-size: 25px;
  font-weight: 400;
  margin: 20px 0 8px;
  letter-spacing: -1px;
}
.package-number {
  position: absolute;
  right: 28px;
  top: 25px;
  font-family: var(--font-display), serif;
  font-size: 37px;
  color: #d8dfc9;
}
.order-stages {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fffef8;
  margin-bottom: 25px;
}
.order-stages > span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #a4a993;
  font-size: 12px;
}
.order-stages > span > span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f2f3e9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.order-stages > .done {
  color: var(--deep);
}
.order-stages > .done > span {
  background: var(--tint);
  color: var(--deep);
}
.order-columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 25px;
}
.order-details,
.action-card {
  padding: 30px;
}
.order-details h2,
.action-card h2 {
  font-family: var(--font-display), serif;
  font-size: 25px;
}
.order-details dl {
  margin: 25px 0;
}
.order-details dl > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 25px;
  padding: 16px 0;
  border-bottom: 1px solid #edeee1;
  font-size: 12px;
}
.order-details dt {
  color: #8c927c;
}
.order-details dd {
  margin: 0;
  text-align: right;
}
.order-details dd small {
  display: block;
  color: #9ca18c;
  margin-top: 5px;
  font-size: 10px;
}
.order-details dl .balance-dl {
  font-size: 17px;
  color: var(--deep);
  font-weight: 600;
  padding: 20px 0;
}
.document-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.action-card p {
  font-size: 12px;
}
.action-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 25px;
}
.complete-callout {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--tint);
  color: var(--deep);
  border-radius: 5px;
  padding: 15px;
  font-size: 12px;
}
.back-link {
  display: inline-flex;
  color: #808b6d;
  font-size: 12px;
  margin-bottom: 24px;
}
.related-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #e8ebda;
  font-size: 12px;
}
.related-row small {
  display: block;
  color: #9ba18b;
  font-size: 10px;
  margin-top: 6px;
}
.history-panel {
  padding: 28px;
}
.report-chart {
  padding: 30px;
}
.chart-row {
  display: grid;
  grid-template-columns: 170px 1fr 95px;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  font-size: 12px;
}
.chart-row strong {
  text-align: right;
  font-weight: 500;
}
.bar-track {
  height: 20px;
  background: #f0f2e6;
  border-radius: 3px;
  overflow: hidden;
}
.bar-track > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.activity-list > div {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 0;
  border-bottom: 1px solid #ededdf;
  font-size: 12px;
}
.activity-list small {
  display: block;
  color: #959c83;
  margin-top: 6px;
  font-size: 10px;
}
.activity-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.settings-panel {
  max-width: 800px;
}
.settings-panel .button {
  margin-top: 25px;
}
.empty {
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 160px;
  color: #969e84;
}
.empty p {
  margin: 13px 0;
  font-size: 12px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #1f281d66;
  backdrop-filter: blur(3px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px;
}
.modal {
  width: 560px;
  max-width: 100%;
  max-height: calc(100dvh - 50px);
  background: #fffef9;
  border-radius: 10px;
  box-shadow: 0 25px 90px #20291730;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal.wide {
  width: 780px;
}
.modal > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 27px 28px 22px;
  border-bottom: 1px solid #e4e7d8;
  flex-shrink: 0;
}
.modal > header h2 {
  font-family: var(--font-display), serif;
  font-size: 27px;
  margin: 0;
}
.modal > header .eyebrow {
  font-size: 8px;
  margin-bottom: 7px;
}
.modal-content {
  padding: 24px 28px;
  overflow-y: auto;
}
.modal > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 28px;
  background: #fafbf3;
  border-top: 1px solid #e2e6d4;
  flex-shrink: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.full {
  grid-column: 1/-1;
}
.form-note {
  font-size: 11px;
  padding: 10px 13px;
  border-radius: 4px;
  background: var(--tint);
  margin: 0;
}
.form-grid label,
.configurator > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
}
.form-grid label:has(textarea) {
  grid-column: 1/-1;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  border: 1px solid #dfe3d2;
  border-radius: 5px;
  background: #fffefa;
  color: #424a37;
  padding: 11px 12px;
  font-size: 12px;
  margin-top: 6px;
  min-height: 39px;
}
textarea {
  resize: vertical;
}
.configurator > p {
  font-size: 12px;
}
.configurator > label {
  margin: 19px 0;
}
.theme-choices {
  padding: 0;
  border: 0;
  display: flex;
  gap: 10px;
  margin: 20px 0 25px;
}
.theme-choices legend {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 10px;
}
.theme-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  border: 1px solid #e1e5d5;
  background: #fffefa;
  border-radius: 5px;
  padding: 11px 8px;
  font-size: 12px;
}
.theme-choice.selected {
  border-color: var(--accent);
  background: var(--tint);
}
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #697850;
}
.swatch.clay {
  background: #a26e52;
}
.swatch.ink {
  background: #424f61;
}
.feature-list {
  border-top: 1px solid #e6e9dc;
}
.feature-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #e6e9dc;
  cursor: pointer;
}
.feature-toggle strong {
  font-size: 12px;
  font-weight: 500;
  display: block;
}
.feature-toggle small {
  display: block;
  font-size: 10px;
  color: #929981;
  margin-top: 5px;
}
.feature-toggle input {
  appearance: none;
  position: relative;
  background: #dadfd0;
  width: 34px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.feature-toggle input:before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: left 0.15s;
}
.feature-toggle input:checked {
  background: var(--accent);
}
.feature-toggle input:checked:before {
  left: 17px;
}
.share-callout {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px;
  background: var(--tint);
  border-radius: 5px;
  margin-top: 22px;
  color: var(--accent);
}
.share-callout p {
  font-size: 11px;
  margin: 0;
}
.toast {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 80;
  max-width: 430px;
  padding: 15px 16px;
  background: var(--deep);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 5px 25px #0002;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  line-height: 1.6;
}
.toast button {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  display: flex;
}
.error {
  font-size: 12px;
  color: #9d4431;
  background: #fbede8;
  padding: 11px;
  border-radius: 4px;
  margin: 0;
}
.persistence-note {
  font-size: 12px;
  color: #856431;
  background: #f8eed8;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.document-wrapper {
  overflow-y: auto;
  background: #edeee5;
  padding: 25px;
}
.document {
  background: #fff;
  padding: 38px;
  position: relative;
  color: #333;
  box-shadow: 0 3px 15px #0001;
}
.print-watermark {
  text-align: center;
  color: #9b5d49;
  letter-spacing: 0.18em;
  font-size: 12px;
  border: 1px solid #d8b9ae;
  padding: 10px;
  margin-bottom: 26px;
}
.document > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.wordmark {
  font-family: var(--font-display), serif;
  font-size: 21px;
}
.document p {
  font-size: 11px;
}
.document h2 {
  font-family: var(--font-display), serif;
  font-size: 29px;
}
.document header > div:last-child {
  text-align: right;
  font-size: 11px;
}
.document-client {
  margin: 35px 0;
  font-size: 11px;
}
.document-client h3 {
  font-size: 17px;
}
.document-client .eyebrow {
  font-size: 8px;
}
.document-line {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-block: 1px solid #e4e4df;
  font-size: 13px;
}
.document-totals {
  max-width: 300px;
  margin: 25px 0 25px auto;
}
.document-totals p {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 8px 0;
}
.document-totals .balance-line {
  border-top: 1px solid #ccc;
  font-size: 15px;
  padding-top: 15px;
}
.document-note {
  border-top: 1px solid #e5e5df;
  padding-top: 20px;
  margin-top: 35px;
}
.document-note h4 {
  font-size: 11px;
  font-weight: 600;
}
.sample-terms {
  margin: 30px 0;
}
.loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f7f7ef;
  gap: 18px;
}
.loading .brand-symbol {
  --deep: #424e32;
}
.loading p {
  font-size: 12px;
}
.mobile-only {
  display: none;
}
.nav-scrim {
  display: none;
}
@media (min-width: 1500px) {
  .page-content {
    padding-top: 48px;
  }
  .overview-columns {
    grid-template-columns: 1.7fr 1fr;
  }
  .sidebar {
    width: 255px;
  }
}
@media (max-width: 1100px) {
  .sidebar {
    width: 212px;
    padding-inline: 13px;
  }
  .topbar {
    padding-inline: 25px;
  }
  .page-content {
    padding: 30px 25px;
  }
  .overview-columns {
    grid-template-columns: 1fr;
  }
  .data-header,
  .data-row {
    gap: 12px;
    padding-inline: 16px;
  }
  .four {
    grid-template-columns: 1.4fr 1.1fr 0.8fr 0.8fr;
  }
  .five {
    grid-template-columns: 1.8fr 0.9fr 0.8fr 0.8fr 16px;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-heading h1 {
    font-size: 33px;
  }
  .heading-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .order-columns {
    grid-template-columns: 1fr;
  }
  .order-details,
  .action-card {
    margin-bottom: 0;
  }
  .history-panel {
    margin-top: 24px;
  }
}
@media (max-width: 760px) {
  .demo-strip {
    height: auto;
    min-height: 38px;
    padding: 8px 13px;
    justify-content: space-between;
    gap: 10px;
    font-size: 9px;
  }
  .demo-strip > span {
    max-width: 245px;
    line-height: 1.4;
  }
  .demo-strip button {
    padding-left: 9px;
    font-size: 9px;
    white-space: nowrap;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100dvh;
    width: 258px;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.2s;
    padding-top: 20px;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: #1e291770;
    z-index: 35;
    border: 0;
  }
  .mobile-only {
    display: flex;
  }
  .topbar {
    height: 63px;
    padding: 0 15px;
  }
  .topbar > .button {
    font-size: 10px;
    padding: 8px 10px;
    min-height: 35px;
  }
  .breadcrumb {
    font-size: 10px;
    gap: 6px;
  }
  .breadcrumb > strong {
    display: none;
  }
  .page-content {
    padding: 25px 17px 15px;
  }
  .page-heading {
    align-items: flex-start;
    gap: 14px;
    flex-direction: column;
    margin-bottom: 22px;
  }
  .page-heading h1 {
    font-size: 31px;
  }
  .page-heading p {
    font-size: 12px;
    line-height: 1.6;
  }
  .heading-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .welcome-note {
    font-size: 10px;
    line-height: 1.6;
    padding: 12px;
    margin-bottom: 20px;
  }
  .outline-pill {
    display: none;
  }
  .metrics {
    gap: 10px;
    margin-bottom: 20px;
  }
  .metric {
    padding: 16px 14px;
    min-height: 120px;
  }
  .metric strong {
    font-size: 26px;
    margin: 18px 0 7px;
  }
  .metric > span {
    font-size: 10px;
  }
  .metric small {
    font-size: 9px;
  }
  .overview-columns {
    gap: 15px;
  }
  .attention-panel {
    padding: 19px 14px 0;
  }
  .section-heading h2 {
    font-size: 20px;
  }
  .work-row {
    gap: 8px;
    padding: 15px 0;
  }
  .work-row .avatar {
    width: 28px;
    height: 28px;
    font-size: 9px;
  }
  .work-title > strong {
    font-size: 11px;
  }
  .work-title small {
    font-size: 9px;
  }
  .work-title small > span {
    display: none;
  }
  .work-row > svg {
    display: none;
  }
  .badge {
    font-size: 8px;
    padding: 4px 6px;
  }
  .bottom-feature {
    padding: 22px 18px;
    margin-top: 20px;
  }
  .bottom-feature h2 {
    font-size: 22px;
  }
  .bottom-feature p {
    font-size: 10px;
  }
  .bottom-feature .sketch-circle {
    width: 45px;
    height: 45px;
    margin-left: 8px;
  }
  .bottom-feature .sketch-circle svg {
    width: 26px;
  }
  .workspace-footer {
    font-size: 9px;
    margin-top: 26px;
    line-height: 1.6;
  }
  .workspace-footer > span:last-child {
    max-width: 110px;
    text-align: right;
    font-size: 7px;
  }
  .toolbar {
    gap: 10px;
  }
  .toolbar > span {
    font-size: 10px;
    white-space: nowrap;
  }
  .toolbar select {
    max-width: 150px;
    min-width: 0;
    font-size: 10px;
    padding: 10px;
  }
  .search-box {
    padding-inline: 10px;
  }
  .search-box input {
    font-size: 11px;
  }
  .data-header {
    display: none;
  }
  .data-row.four,
  .data-row.five,
  .data-row.three {
    grid-template-columns: 1fr auto;
    gap: 9px;
    padding: 15px;
  }
  .data-row.four > :first-child,
  .data-row.five > :first-child {
    grid-column: 1;
    grid-row: 1/3;
  }
  .data-row.four > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    font-size: 10px;
    max-width: 140px;
    overflow-wrap: anywhere;
  }
  .data-row.four > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    font-size: 10px;
  }
  .data-row.four > :nth-child(4) {
    display: none;
  }
  .data-row.five > :nth-child(2) {
    display: none;
  }
  .data-row.five > :nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }
  .data-row.five > :nth-child(4) {
    grid-column: 2;
    grid-row: 2;
    font-size: 11px;
    text-align: right;
  }
  .data-row.five > :last-child {
    display: none;
  }
  .data-row strong {
    font-size: 11px;
  }
  .data-row .identity {
    gap: 8px;
  }
  .data-row .avatar {
    width: 28px;
    height: 28px;
    font-size: 9px;
  }
  .data-row .stack small {
    max-width: 210px;
    font-size: 9px;
  }
  .booking-row {
    padding: 15px 13px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .booking-row .stack strong {
    font-size: 11px;
  }
  .booking-row .stack small {
    font-size: 9px;
  }
  .booking-row > .muted {
    display: none;
  }
  .booking-row .small-button {
    padding: 9px;
    font-size: 10px;
  }
  .date-tile {
    width: 36px;
    min-height: 43px;
  }
  .package-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .package-card {
    padding: 27px;
  }
  .order-stages {
    gap: 8px;
    padding: 13px 11px;
  }
  .order-stages > span {
    font-size: 9px;
    gap: 5px;
  }
  .order-stages > span > span {
    width: 20px;
    height: 20px;
    font-size: 9px;
  }
  .order-details,
  .action-card,
  .history-panel {
    padding: 22px 18px;
  }
  .order-details dl > div {
    gap: 18px;
    font-size: 11px;
  }
  .order-details h2,
  .action-card h2 {
    font-size: 25px;
  }
  .document-actions {
    gap: 6px;
  }
  .chart-row {
    grid-template-columns: 100px 1fr 65px;
    gap: 8px;
    font-size: 10px;
  }
  .report-chart {
    padding: 22px 16px;
  }
  .settings-panel {
    padding: 23px 18px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .full {
    grid-column: 1;
  }
  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    border-radius: 12px 12px 0 0;
    width: 100%;
    max-height: 94dvh;
  }
  .modal > header {
    padding: 23px 20px 18px;
  }
  .modal-content {
    padding: 21px 20px;
  }
  .modal-footer {
    padding: 16px 20px;
  }
  .modal > header h2 {
    font-size: 26px;
  }
  .toast {
    left: 15px;
    right: 15px;
    bottom: 15px;
    max-width: none;
    font-size: 11px;
  }
  .document-wrapper {
    padding: 12px;
  }
  .document {
    padding: 24px 18px;
  }
  .document > header {
    gap: 12px;
  }
  .document h2 {
    font-size: 24px;
  }
  .document header span {
    font-size: 9px;
  }
  .document .wordmark {
    font-size: 17px;
  }
  .document-line {
    font-size: 12px;
  }
  .document-client {
    margin: 28px 0;
  }
  .theme-choice {
    font-size: 11px;
  }
  .configurator .section-heading h3 {
    font-size: 15px;
  }
}
@media (max-width: 760px) {
  .transaction-list .data-row.four > :first-child {
    grid-row: 1/4;
  }
  .transaction-list .data-row.four > :nth-child(2) {
    grid-column: 2;
    grid-row: 3;
    text-align: right;
  }
  .transaction-list .data-row.four > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }
  .transaction-list .data-row.four > :nth-child(4) {
    display: block;
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-size: 13px;
  }
  .inventory-list .data-row.four > :nth-child(2) {
    display: none;
  }
  .inventory-list .data-row.four > :nth-child(3) {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }
  .inventory-list .data-row.four > :nth-child(4) {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .claims-list .data-row.four > :nth-child(2) {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }
  .claims-list .data-row.four > :nth-child(3) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .claims-list .data-row.four > :nth-child(4) {
    display: inline-flex;
    grid-column: 1/-1;
    grid-row: 3;
    justify-content: center;
    min-height: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  @page {
    margin: 18mm;
  }
  body * {
    visibility: hidden !important;
  }
  .document,
  .document * {
    visibility: visible !important;
  }
  .modal-backdrop {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    background: none;
    backdrop-filter: none;
  }
  .modal,
  .modal.wide {
    display: block;
    width: 100%;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }
  .modal > header,
  .modal-footer,
  .toast {
    display: none;
  }
  .document-wrapper {
    padding: 0;
    overflow: visible;
    background: white;
  }
  .document {
    box-shadow: none;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .print-watermark {
    position: fixed;
    top: -12mm;
    left: 0;
    right: 0;
    border: 0;
    padding: 0;
    font-size: 9px;
  }
  .document-note,
  .document-line,
  .document-totals {
    break-inside: avoid;
  }
}

/* Studio Edit: editorial headings, a quiet ledger and compact working lists. */
:root { --deep: #354636; --accent: #647752; --tint: #edf1e7; --border: #dce2d8; }
body { font-size: 16px; color: #252f28; }
.demo-root { --canvas: #f5f5ef; --deep: #354636; --accent: #647752; --tint: #edf1e7; --border: #dce2d8; }
h1 { font-weight: 450; font-size: clamp(30px, 3vw, 43px); letter-spacing: -.045em; }
h2 { font-size: 21px; font-weight: 600; }
.page-heading p { font-size: 15px; max-width: 620px; }
.eyebrow { color: var(--deep); font-size: 11px; letter-spacing: .12em; }
.topbar { background: #fffef9; }
.sidebar-brand strong { font-size: 24px; }
.sidebar nav a { min-height: 44px; font-size: 13px; }
.sidebar nav a.active { background: var(--tint); color: var(--deep); font-weight: 700; }
.business-card { border-radius: 3px; }
.business-card strong { font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.business-card span, .role-card label > span { font-size: 12px; }
.config-teaser { border-radius: 3px; }
.config-teaser p, .config-teaser button, .website-link { font-size: 12px; }
.config-teaser button { min-height: 44px; }
.demo-strip { font-size: 12px; min-height: 44px; height: auto; padding: 4px 16px; }
.demo-strip button { min-height: 36px; font-size: 12px; }
.button { min-height: 44px; border-radius: 4px; font-size: 13px; transition: background .18s, transform .18s; }
.button:active { transform: translateY(1px); }
.icon-button { min-width: 44px; min-height: 44px; }
.button-spinner { display: inline-block; width: 17px; height: 17px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: studio-spin .7s linear infinite; flex-shrink: 0; }
.loading { background: #f5f5ef; font-family: var(--font-body), sans-serif; }
.loading-ring { position: relative; padding: 12px; }
.loading-ring::after { content: ''; position: absolute; inset: 0; border: 2px solid #dce2d8; border-top-color: #354636; border-radius: 50%; animation: studio-spin 1s linear infinite; }
.loading p { font-size: 16px; color: #4c594d; }
@keyframes studio-spin { to { transform: rotate(360deg); } }
.profile-picker { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.profile-picker .eyebrow { margin-bottom: 5px; }
.profile-picker small { color: #626b60; font-size: 12px; }
.profile-options { display: flex; gap: 6px; }
.profile-options button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 13px; font-size: 12px; background: transparent; border: 1px solid transparent; border-radius: 4px; }
.profile-options button:hover { background: var(--tint); }
.profile-options button.selected { border-color: var(--deep); color: var(--deep); background: #fffef9; font-weight: 700; }
.metrics { gap: 0; border-block: 1px solid var(--border); margin-bottom: 30px; }
.metric, .metric.emphasis { background: transparent; color: #253029; border: 0; border-right: 1px solid var(--border); border-radius: 0; padding: 22px 20px; min-height: 120px; }
.metric:last-child { border-right: 0; }
.metric:first-child { padding-left: 0; }
.metric > span, .metric.emphasis > span { font-size: 12px; color: #4d5b4c; }
.metric strong { font-variant-numeric: tabular-nums; font-size: 31px; font-weight: 600; }
.metric small, .metric.emphasis small { font-size: 12px; color: #5d695d; }
.metric-dot, .metric > span > svg { display: none; }
.panel { border-radius: 3px; box-shadow: none; }
.section-heading .eyebrow { margin-bottom: 9px; }
.work-title strong { font-size: 14px; }
.work-title small, .row-status small, .schedule-row small { font-size: 12px; color: #5b6759; }
.badge { font-size: 11px; }
.studio-checklist { display: grid; grid-template-columns: 1.2fr 1fr; gap: 35px; padding: 28px 0; margin-top: 26px; border-top: 1px solid var(--border); }
.studio-checklist h2 { font-family: var(--font-display), serif; font-weight: 450; font-size: 27px; }
.studio-checklist p { font-size: 14px; max-width: 420px; }
.studio-checklist ol { list-style: none; margin: 0; padding: 0; }
.studio-checklist li { display: flex; gap: 18px; align-items: center; border-bottom: 1px solid var(--border); font-size: 13px; }
.studio-checklist li > span { color: #63705f; font-size: 11px; }
.studio-checklist a { flex: 1; display: flex; justify-content: space-between; align-items: center; min-height: 46px; }
.package-grid { display: block; }
.package-card { display: grid; grid-template-columns: 45px 120px 1fr 1.4fr 100px; gap: 20px; align-items: center; padding: 24px 0; margin: 0; border: 0; border-top: 1px solid var(--border); background: transparent; }
.package-card h2, .package-card p, .package-card .eyebrow { margin: 0; }
.package-card h2 { font-size: 17px; }
.package-card p { font-size: 13px; }
.package-card > .small { grid-column: 3 / -1; font-size: 11px; }
.report-toolbar { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 24px; }
.report-toolbar .eyebrow { text-transform: uppercase; margin-bottom: 6px; }
.report-toolbar p { margin: 0; font-size: 13px; }
.period-control { display: grid; gap: 5px; font-size: 11px; color: #4d5b4c; }
.period-control select { min-height: 44px; border: 1px solid var(--border); padding: 8px 12px; border-radius: 4px; background: #fffef9; color: inherit; font-size: 13px; }
.report-ledger { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--border); margin-bottom: 35px; }
.report-ledger > div { padding: 25px 20px; border-right: 1px solid var(--border); }
.report-ledger > div:first-child { padding-left: 0; }
.report-ledger > div:last-child { border: 0; }
.report-ledger span, .report-ledger small { display: block; font-size: 12px; color: #56634f; }
.report-ledger strong { display: block; font-size: clamp(24px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.06em; margin: 12px 0; font-variant-numeric: tabular-nums; }
.report-section { padding: 25px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.report-section h2 { margin-bottom: 22px; }
.report-section .section-heading h2 { margin-bottom: 0; }
.trend-total { display: grid; gap: 4px; text-align: right; }
.trend-total strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.trend-total small { font-size: 11px; color: #56634f; }
.trend-svg { width: 100%; display: block; min-height: 170px; margin-top: 25px; }
.axis-text { font-size: 11px; fill: #56634f; font-family: var(--font-body), sans-serif; }
.chart-data summary { min-height: 44px; padding: 13px 0; color: var(--deep); font-size: 12px; cursor: pointer; }
.daily-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 25px; font-size: 12px; }
.daily-figures > div { display: flex; justify-content: space-between; gap: 8px; }
.report-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sales-bars > div { margin-bottom: 17px; }
.sales-bars > div > div:first-child { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; font-size: 13px; }
.sales-bars small { color: #56634f; font-size: 11px; }
.sales-track { height: 6px; background: var(--border); margin-bottom: 5px; }
.sales-track span { display: block; height: 100%; background: var(--deep); }
.pipeline-visual { display: flex; align-items: center; gap: 22px; }
.pipeline-visual svg { width: 155px; flex-shrink: 0; }
.donut-value { font-size: 30px; font-weight: 600; fill: #253029; font-family: var(--font-body), sans-serif; }
.stage-legend { list-style: none; padding: 0; margin: 0; flex: 1; }
.stage-legend li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 12px; text-transform: capitalize; }
.stage-legend li > span:first-child { width: 8px; height: 8px; }
.stage-legend strong { margin-left: auto; }
.balance-list > a { display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.balance-list > a:hover { background: var(--tint); }
.balance-list > a > span { flex: 1; min-width: 0; }
.balance-list small { display: block; color: #56634f; font-size: 12px; margin-top: 4px; }
.report-footnote { font-size: 12px; padding-top: 20px; }
@media(max-width: 1100px) {
  .profile-picker { flex-wrap: wrap; gap: 14px; }
  .package-card { grid-template-columns: 35px 95px 1fr 100px; }
  .package-card p { grid-column: 3 / -1; grid-row: 2; }
}
@media(max-width: 760px) {
  .demo-strip { font-size: 10px; }
  .demo-strip button { font-size: 10px; min-height: 40px; }
  .profile-picker { margin-bottom: 22px; padding-bottom: 17px; gap: 12px; }
  .profile-options { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .profile-options button { justify-content: center; padding: 10px 5px; flex-direction: column; font-size: 10px; gap: 6px; }
  .profile-options button > svg:last-child:not(:first-child) { display: none; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric, .metric.emphasis { min-height: 114px; padding: 20px 12px; border-bottom: 1px solid var(--border); }
  .metric:nth-child(odd) { padding-left: 0; }
  .metric:nth-child(even) { border-right: 0; }
  .metric strong { font-size: 27px; }
  .metric > span { font-size: 11px; }
  .studio-checklist, .report-columns { grid-template-columns: 1fr; gap: 12px; }
  .report-toolbar { display: block; }
  .report-toolbar .heading-actions { margin-top: 18px; justify-content: space-between; flex-wrap: wrap; }
  .report-ledger { grid-template-columns: 1fr; }
  .report-ledger > div, .report-ledger > div:first-child { padding: 18px 0; border: 0; border-bottom: 1px solid var(--border); }
  .report-ledger strong { font-size: 32px; margin: 10px 0; }
  .report-section .section-heading { align-items: flex-start; }
  .report-section h2 { font-size: 20px; }
  .trend-total strong { font-size: 19px; }
  .trend-total small { max-width: 110px; }
  .daily-figures { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pipeline-visual { gap: 25px; }
  .package-card { grid-template-columns: 24px 1fr auto; gap: 12px; }
  .package-card .eyebrow { grid-column: 2; }
  .package-card h2 { grid-column: 2; }
  .package-card > strong { grid-column: 3; grid-row: 2; font-size: 20px; }
  .package-card p, .package-card > .small { grid-column: 2 / -1; grid-row: auto; }
  .workspace-footer { font-size: 10px; }
}
@media(prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media(max-width:760px) { input, select, textarea { font-size: 16px; } .demo-strip button { min-height:44px; } }

@media(max-width: 760px) {
  .trend-svg .axis-text { font-size: 22px; }
  .trend-svg { overflow: visible; }
  .work-title > strong, .data-row strong { font-size: 13px; }
  .work-title small, .data-row .stack small { font-size: 12px; }
  .schedule-row strong { font-size: 13px; }
  .schedule-row small, .schedule-row span { font-size: 12px; }
  .badge { font-size: 11px; }
  .data-row.four > :nth-child(2), .data-row.four > :nth-child(3) { font-size: 12px; }
}

@media(max-width:1100px) { .report-columns { grid-template-columns: 1fr; gap: 0; } .report-toolbar { flex-wrap: wrap; } }

/* Hallmark · macrostructure: Workbench · tone: modern-minimal · theme: x88 per-business
 * pre-emit critique: P4 H4 E4 S5 R4 V4 · enrichment: none · tokens: ../../tokens.css
 */
html, body { overflow-x: clip; }
.demo-root[data-theme] { --canvas: var(--color-paper); --deep: var(--color-accent); --accent: var(--color-focus); --tint: var(--color-tint); --border: var(--color-rule); color: var(--color-ink); }
.demo-root h1, .demo-root h2, .demo-root h3 { font-style: normal; overflow-wrap: anywhere; min-width: 0; }
.demo-root h1, .demo-root .studio-checklist h2 { font-family: var(--font-heading); }
.demo-root h1 { font-weight: 550; }
.demo-root .topbar, .demo-root .sidebar, .demo-root .panel, .demo-root .business-card { background: var(--color-surface); color: var(--color-ink); }
.demo-root .profile-options button.selected { background: var(--color-tint); }
.demo-root .profile-picker { flex-wrap: wrap; }
.demo-root .profile-options { flex-wrap: wrap; }
.demo-root .profile-options button { white-space: nowrap; }
.demo-root .page-heading p, .demo-root .profile-picker small, .demo-root .muted, .demo-root .metric > span { color: var(--color-muted); }
.demo-root .brand-symbol { background: var(--color-tint); color: var(--color-accent); font-family: var(--font-display); }
.demo-root .sidebar-brand strong { font-family: var(--font-display); font-size: 32px; letter-spacing: -.035em; }
.demo-root .sidebar-brand strong span { font-family: var(--font-body); letter-spacing: .08em; font-size: 9px; }
.demo-root .button { white-space: nowrap; }
.demo-root .axis-text, .demo-root .donut-value { fill: var(--color-ink); }
.demo-root .button:focus-visible, .demo-root button:focus-visible, .demo-root a:focus-visible { outline-color: var(--color-focus); }
.demo-root .business-card div span,
.demo-root .nav-label,
.demo-root .sidebar nav a:not(.active),
.demo-root .website-link,
.demo-root .breadcrumb,
.demo-root .workspace-footer,
.demo-root .section-heading > a,
.demo-root .section-heading > span,
.demo-root .list-header,
.demo-root .work-title small,
.demo-root .work-title small span,
.demo-root .row-status small,
.demo-root .schedule-row > div small,
.demo-root .schedule-row > div > span,
.demo-root .schedule-bottom p,
.demo-root .toolbar > span,
.demo-root .data-header,
.demo-root .row-end,
.demo-root .stack small,
.demo-root .date-tile small,
.demo-root .order-details dt,
.demo-root .order-details dd small,
.demo-root .related-row small { color: var(--color-muted); }
.demo-root .avatar { color: var(--color-accent); background: var(--color-tint); }
.demo-root .date-tile strong { color: var(--color-accent); }
.demo-root .badge { color: var(--color-accent); }
.swatch.monochrome { background: var(--color-ink); }
.swatch.sage { background: var(--color-swatch-sage); }
.swatch.ivory { background: var(--color-swatch-ivory); }
.swatch.lavender { background: var(--color-swatch-lavender); }
.swatch.slate { background: var(--color-swatch-slate); }
@media (max-width: 760px) {
 .demo-root .profile-options { display: flex; flex-wrap: wrap; width: 100%; }
 .demo-root .profile-options button { flex: 1 1 120px; padding-inline: 8px; font-size: 11px; }
 .demo-root .profile-options button span { min-width: 0; }
}
@media (max-width: 359px) {
 .demo-root .topbar-actions { gap: 2px; }
 .demo-root .topbar .button { padding-inline: 7px; font-size: 11px; }
 .demo-root .workspace { padding-inline: 12px; }
}
.demo-root .x88-logo, .loading .x88-logo { display:inline-flex; align-items:center; gap:12px; color:var(--color-ink); }
.demo-root .x88-logo svg, .loading .x88-logo svg { width:36px; height:32px; overflow:visible; }
.demo-root .x88-logo .x88-logotype { width:60px; height:24px; }

.x88-logo { font-family:var(--font-wordmark); font-weight:600; font-size:36px; letter-spacing:-.055em; line-height:1; display:inline-block; color:var(--color-ink); }
.demo-root .x88-logo, .loading .x88-logo { font-family:var(--font-wordmark); font-size:32px; display:inline-block; }

/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 */
.x88-logo { gap:0; align-items:baseline; font-family:var(--font-wordmark); font-size:36px; font-weight:600; letter-spacing:-.055em; }
.x88-logo svg.x88-crossing { width:.59em; height:.59em; margin-right:.035em; }
.demo-strip { background:var(--color-surface); color:var(--color-ink); display:flex; justify-content:space-between; padding:12px 24px; border-bottom:1px solid var(--border); min-height:68px; }
.demo-strip > a:first-child { display:inline-flex; align-items:center; min-height:44px; font-size:13px; font-weight:600; white-space:nowrap; }
.demo-strip .button { font-size:13px; }
.role-top { display:flex; align-items:center; gap:12px; font-size:11px; color:var(--muted); }
.role-top select { width:132px; min-height:44px; border:1px solid var(--border); border-radius:8px; background:var(--color-surface); padding:8px 12px; color:var(--color-ink); font:inherit; font-size:12px; }
.sidebar-role { display:grid; gap:8px; padding:12px 20px; }
.sidebar-role select { width:100%; }
.workspace-footer { flex-wrap:wrap; gap:20px; }
.demo-footer-actions { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.demo-footer-actions > button { display:inline-flex; align-items:center; gap:8px; min-height:44px; font:inherit; background:var(--color-surface); border:0; color:var(--muted); white-space:nowrap; }
.demo-about { width:100%; }
.demo-about summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.demo-about p { max-width:76ch; font-size:12px; line-height:1.7; }
.report-toolbar .heading-actions { display:flex; flex-wrap:nowrap; align-items:center; gap:12px; }
.report-toolbar .period-control { display:flex; align-items:center; gap:12px; margin:0; font-size:12px; white-space:nowrap; }
.report-toolbar select { min-height:44px; margin:0; }
.report-toolbar .button { min-height:44px; white-space:nowrap; font-size:12px; }
.business-insights { margin-block:24px 32px; padding:24px; background:var(--tint); border-radius:16px; }
.insight-progress { display:flex; justify-content:space-between; gap:24px; align-items:center; margin-bottom:24px; }
.insight-progress h2 { font-size:22px; margin:8px 0 0; }
.insight-progress > div:last-child { width:180px; flex-shrink:0; display:grid; gap:8px; }
.insight-progress > div:last-child strong { font-size:20px; }
.insight-progress > div:last-child > span { font-size:11px; color:var(--muted); }
.insight-track { height:6px; border-radius:8px; background:var(--border); }
.insight-track > span { display:block; height:100%; border-radius:inherit; background:var(--deep); }
.next-moves { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.next-moves > a { padding:20px; border-radius:12px; background:var(--color-surface); display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0; }
.next-moves > a > svg { color:var(--deep); }
.next-moves strong { font-size:13px; line-height:1.6; }
.next-moves p { font-size:12px; color:var(--muted); line-height:1.7; margin:0 0 8px; }
.next-moves > a > span { display:flex; align-items:center; gap:8px; font-size:11px; margin-top:auto; min-height:24px; }
.sales-track { height:10px; border-radius:8px; }
.sales-track > span { border-radius:inherit; }
@media(max-width:1000px) { .next-moves { grid-template-columns:minmax(0,1fr); } }
@media(max-width:760px) { .demo-strip { padding:8px 12px; gap:8px; } .demo-strip > a:first-child,.demo-strip .button { font-size:11px; } .demo-strip .button { padding-inline:12px; } .topbar .role-top > span { display:none; } .topbar .role-top select { width:112px; } .business-insights { padding:16px; } .insight-progress { display:grid; gap:16px; } .insight-progress > div:last-child { width:100%; } .report-toolbar .heading-actions { width:100%; gap:8px; } .report-toolbar .period-control { font-size:0; flex:1; } .report-toolbar .period-control select { font-size:11px; width:100%; min-width:0; } .report-toolbar .button { font-size:11px; padding:8px 10px; flex-shrink:0; } .report-toolbar .button svg { width:14px; } }

.demo-root .x88-logo, .loading .x88-logo { display:inline-flex; gap:0; align-items:baseline; }
.demo-root .x88-logo svg.x88-crossing, .loading .x88-logo svg.x88-crossing { width:.59em; height:.59em; }

@media(max-width:760px) { .trend-svg .axis-text { font-size:24px; } }
/* Compact shared enquiry/business bar; centred waist-derived x. */
.demo-root .x88-logo, .loading .x88-logo { align-items:center; }
.demo-root .x88-logo svg.x88-crossing, .loading .x88-logo svg.x88-crossing { width:.4em; height:.4em; }
.demo-root .demo-strip { gap:20px; align-items:center; }
.demo-root .demo-strip .profile-picker { display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:12px; padding:0; margin:0; border:0; min-width:0; }
.profile-picker label { font-size:12px; white-space:nowrap; }
.profile-picker select { min-height:44px; width:164px; max-width:100%; border:1px solid var(--border); border-radius:8px; color:var(--color-ink); background:var(--color-tint); padding:8px 12px; font:inherit; font-size:12px; }
.demo-root .page-content { padding-top:24px; }
@media(max-width:760px) { .demo-root .demo-strip { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; } .demo-strip > .profile-picker { grid-column:1 / -1; grid-row:2; } .demo-strip > .button { grid-column:2; grid-row:1; } .demo-root .demo-strip .profile-picker { justify-content:space-between; } .profile-picker select { width:180px; } }

/* bloom8 visual reference v5. Theme choices only tint small selected surfaces. */
:root, .demo-root[data-theme] {
  --color-paper: #fcfcfc;
  --color-surface: #ffffff;
  --color-ink: #252525;
  --color-muted: #636363;
  --color-rule: #e7e7e7;
  --color-accent: #252525;
  --color-focus: #252525;
  --color-accent-ink: #ffffff;
  --color-soft: #f4f4f4;
  --color-rose: #eedad6;
  --color-chart-3: #a5a5a5;
  --color-chart-4: #727272;
  --color-chart-5: #d6d6d6;
  --font-heading: var(--font-display);
  --radius-card: 16px;
  --radius-button: 999px;
  --deep: var(--color-ink);
  --accent: var(--color-ink);
  --border: var(--color-rule);
  --muted: var(--color-muted);
}
:root, .demo-root[data-theme="monochrome"] { --color-tint: var(--color-rose); }
body, .loading { background: var(--color-paper); color: var(--color-ink); }
.bloom8-inline-loader { display: inline-flex; width: 28px; height: 28px; flex-shrink: 0; align-items: center; color: inherit; }
p, .loading p { color: var(--color-muted); }
.bloom8-logo { display: inline-block; font: 600 36px/1 var(--font-display), sans-serif; letter-spacing: -.065em; color: var(--color-ink); }
.loading-ring { padding: 24px; }
.loading-ring::after { border-color: var(--color-rule); border-top-color: var(--color-ink); }
.demo-root h1, .demo-root h2, .demo-root h3 { font-family: var(--font-display), sans-serif; letter-spacing: -.02em; }
.demo-root h1 { font-size: 32px; font-weight: 400; line-height: 1.2; }
.demo-root h2 { font-size: 20px; font-weight: 500; line-height: 1.2; }
.demo-root h3 { font-size: 18px; font-weight: 500; }
.demo-root .eyebrow { color: var(--color-muted); font-size: 12px; font-weight: 600; letter-spacing: .055em; }
.demo-root .demo-strip { padding: 12px 32px; }
.demo-root .sidebar { width: 240px; padding: 32px 16px 20px; height: 100dvh; }
.sidebar-brand { padding-inline: 12px; margin-bottom: 32px; }
.demo-root .business-card { background: var(--color-soft); border: 0; border-radius: 12px; padding: 16px 12px; margin-bottom: 16px; }
.business-avatar { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--border); border-radius: 8px; width: 32px; height: 32px; font-style: normal; }
.tiny-dot, .small-dot { background: var(--color-muted); }
.sidebar-role { padding: 8px 12px 24px; }
.nav-label { padding-inline: 12px; font-size: 11px; letter-spacing: .08em; }
.demo-root .sidebar nav a { min-height: 48px; border-radius: 10px; padding: 12px; font-size: 14px; gap: 12px; }
.demo-root .sidebar nav a.active { background: var(--tint); color: var(--color-ink); font-weight: 600; }
.sidebar nav a:hover { background: var(--color-soft); }
.nav-count { background: var(--color-surface); color: var(--color-muted); border-radius: 6px; }
.sidebar-bottom { padding: 32px 12px 0; }
.sidebar-bottom .eyebrow { font-size: 10px; letter-spacing: .035em; }
.demo-root .topbar { padding-inline: 32px; background: var(--color-paper); }
.breadcrumb, .role-top { font-size: 12px; }
.breadcrumb strong { color: var(--color-ink); }
.demo-root .page-content { max-width: 1264px; padding: 40px 32px 24px; }
.page-heading { margin-bottom: 32px; gap: 24px; }
.demo-root .page-heading p { font-size: 16px; line-height: 1.6; }
.demo-root .button { min-height: 48px; padding: 12px 24px; border-radius: 999px; font-size: 14px; font-weight: 600; background: var(--color-ink); color: var(--color-surface); border-color: var(--color-ink); }
.demo-root .button.secondary { background: var(--color-surface); color: var(--color-ink); border-color: #a5a5a5; }
.demo-root .button.secondary:hover { background: var(--color-soft); }
.metrics { gap: 16px; border: 0; margin-bottom: 32px; }
.demo-root .metric, .demo-root .metric.emphasis { padding: 24px; min-height: 156px; background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--border); border-radius: 16px; }
.demo-root .metric.emphasis { background: var(--color-soft); border-color: var(--color-soft); }
.demo-root .metric strong { font-family: var(--font-display), sans-serif; font-size: clamp(26px, 2.3vw, 36px); font-weight: 400; letter-spacing: -.02em; margin-block: 16px 8px; }
.demo-root .metric > span, .demo-root .metric small { color: var(--color-muted); font-size: 12px; }
.demo-root .business-insights { background: var(--color-soft); padding: 24px; margin-block: 0 32px; }
.insight-progress h2 { font-size: 24px; font-weight: 400; }
.next-moves { gap: 16px; }
.next-moves > a { padding: 24px; border: 1px solid var(--border); border-radius: 16px; }
.next-moves > a:hover { border-color: #a5a5a5; }
.next-moves strong { font-size: 14px; font-weight: 600; }
.next-moves p { font-size: 14px; line-height: 1.6; }
.next-moves > a > span { font-size: 12px; min-height: 44px; }
.overview-columns { gap: 24px; }
.demo-root .panel { border-radius: 16px; border-color: var(--border); }
.attention-panel, .schedule-panel { padding: 24px; }
.section-heading { gap: 16px; margin-bottom: 24px; }
.section-heading > a { min-height: 44px; }
.list-header { font-size: 10px; letter-spacing: .04em; padding-block: 12px; }
.work-row { padding-block: 18px; }
.demo-root .avatar { background: var(--color-soft); color: var(--color-ink); border-radius: 10px; }
.demo-root .date-tile { border-radius: 10px; background: var(--color-soft); border-color: var(--border); }
.demo-root .date-tile.highlight { background: var(--tint); }
.demo-root .badge { color: var(--color-ink); background: var(--color-soft); border: 1px solid var(--border); padding: 5px 9px; font-weight: 500; }
.demo-root .badge:is(.active, .issued, .partially_paid) { background: var(--tint); border-color: transparent; }
.schedule-bottom { background: var(--color-surface); }
.demo-root input:not([type="checkbox"]), .demo-root select, .demo-root textarea { min-height: 48px; border: 1px solid #a5a5a5; border-radius: 10px; background: var(--color-surface); color: var(--color-ink); font-size: 16px; }
.demo-root .role-top select, .demo-root .profile-picker select { font-size: 14px; border-color: var(--border); }
.demo-root .profile-picker select { background: var(--color-soft); }
.search-box { min-height: 48px; border-radius: 10px; background: var(--color-surface); border-color: #a5a5a5; }
.demo-root .search-box input { border: 0; min-height: 44px; margin: 0; padding: 8px 0; outline-offset: 0; }
.data-list { background: var(--color-surface); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; }
.data-header { background: var(--color-surface); padding-block: 16px; }
.data-row { background: var(--color-surface); padding-block: 20px; }
.data-row:is(a, button):hover { background: var(--color-soft); }
.demo-root .modal { background: var(--color-surface); border-radius: 16px; color: var(--color-ink); }
.modal > header, .modal-footer { background: var(--color-surface); border-color: var(--border); padding: 24px; }
.modal-content, .modal > form { padding: 24px; }
.form-grid { gap: 24px; }
.form-grid label, .configurator > label { font-size: 14px; font-weight: 600; }
.form-note, .share-callout, .complete-callout { background: var(--color-soft); color: var(--color-muted); border-color: var(--border); border-radius: 10px; }
.report-ledger strong { font-family: var(--font-display), sans-serif; font-weight: 400; letter-spacing: -.02em; }
.report-ledger span, .report-ledger small, .trend-total small, .sales-bars small, .balance-list small { color: var(--color-muted); }
.demo-root .studio-checklist h2 { font-size: 28px; font-weight: 400; }
.workspace-footer { border-color: var(--border); margin-top: 40px; font-size: 12px; }
.mobile-workspace-brand { display: none; }
@media (max-width: 1100px) {
  .demo-root .metric, .demo-root .metric.emphasis { padding: 20px 16px; }
  .overview-columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bloom8-logo { font-size: 30px; }
  .demo-root .demo-strip { padding: 8px 16px 12px; gap: 4px 12px; }
  .demo-root .demo-strip > a:first-child { font-size: 12px; }
  .demo-root .demo-strip > .button { min-height: 44px; padding: 8px 16px; font-size: 12px; }
  .demo-root .demo-strip .profile-picker { gap: 12px; }
  .demo-root .profile-picker select { width: 190px; font-size: 16px; min-height: 44px; margin: 0; }
  .demo-root .topbar { position: sticky; top: 0; z-index: 30; padding-inline: 12px; height: 64px; background: var(--color-surface); }
  .topbar .breadcrumb { display: none; }
  .mobile-workspace-brand { display: inline-flex; align-items: center; min-height: 44px; }
  .mobile-workspace-brand .bloom8-logo { font-size: 28px; }
  .demo-root .topbar > div { gap: 4px; }
  .demo-root .sidebar { width: min(300px, calc(100vw - 32px)); padding-top: 24px; }
  .sidebar-brand { margin-bottom: 24px; }
  .demo-root .workspace { padding-inline: 0; }
  .demo-root .page-content { padding: 24px 16px max(24px, env(safe-area-inset-bottom)); }
  .demo-root h1 { font-size: 28px; }
  .demo-root h2 { font-size: 18px; }
  .demo-root .page-heading p { font-size: 14px; }
  .page-heading { gap: 16px; margin-bottom: 20px; }
  .page-heading h1 { margin-bottom: 8px; }
  .page-heading .eyebrow { font-size: 11px; margin-bottom: 8px; }
  .page-heading .heading-actions { width: 100%; }
  .page-heading .heading-actions > .button { flex: 1; }
  .demo-root .button { padding-inline: 20px; }
  .metrics { gap: 8px; margin-bottom: 20px; }
  .demo-root .metric, .demo-root .metric.emphasis { padding: 16px 12px; min-height: 124px; border-radius: 12px; }
  .demo-root .metric strong { font-size: 28px; margin-block: 10px 6px; }
  .demo-root .metric > span, .demo-root .metric small { font-size: 12px; line-height: 1.4; }
  .demo-root .business-insights, .attention-panel, .schedule-panel { padding: 16px; }
  .demo-root .business-insights { margin-bottom: 20px; }
  .insight-progress { gap: 12px; margin-bottom: 16px; }
  .insight-progress h2 { margin-top: 4px; }
  .insight-progress .eyebrow { font-size: 11px; margin-bottom: 6px; }
  .insight-progress > div:last-child { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: baseline; }
  .insight-progress > div:last-child strong { font-size: 16px; }
  .insight-progress > div:last-child > span { font-size: 12px; }
  .insight-track { grid-column: 1 / -1; height: 4px; }
  .next-moves { gap: 8px; }
  .next-moves > a { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 6px 10px; padding: 14px; border-radius: 12px; }
  .next-moves > a > svg { margin-top: 2px; }
  .next-moves strong { font-size: 14px; line-height: 1.45; }
  .next-moves p { grid-column: 2; font-size: 13px; line-height: 1.5; margin: 0; }
  .next-moves > a > span { grid-column: 2; min-height: 24px; font-size: 12px; }
  .overview-columns { gap: 20px; }
  .section-heading { gap: 8px; margin-bottom: 16px; }
  .section-heading .eyebrow { font-size: 11px; }
  .section-heading > a { font-size: 12px; }
  .work-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding-block: 16px; }
  .work-row .avatar, .data-row .avatar { width: 32px; height: 32px; font-size: 11px; }
  .work-title > strong, .demo-root .data-row strong, .booking-row .stack strong, .schedule-row > div strong { font-size: 14px; }
  .demo-root .work-title small { white-space: normal; line-height: 1.5; }
  .demo-root .badge { font-size: 11px; padding: 4px 7px; }
  .row-status small { font-size: 12px; }
  .schedule-row { gap: 12px; padding-block: 16px; }
  .date-tile { width: 44px; min-height: 52px; }
  .schedule-row > div > span, .schedule-row > div small, .booking-row .stack small { font-size: 12px; }
  .schedule-bottom p { font-size: 12px; }
  .demo-root .role-top select { width: 126px; font-size: 16px; padding-inline: 8px; min-height: 44px; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .search-box { width: 100%; flex: 1 1 100%; }
  .demo-root .toolbar select { max-width: 100%; font-size: 16px; }
  .demo-root .data-row { gap: 12px; padding: 16px 12px; }
  .data-row .stack { min-width: 0; overflow-wrap: anywhere; }
  .demo-root .data-row .stack small { font-size: 12px; }
  .demo-root .booking-row .small-button { min-height: 44px; font-size: 13px; padding: 10px 14px; }
  .demo-root .modal-backdrop { align-items: flex-end; padding: 0; }
  .demo-root .modal, .demo-root .modal.wide { width: 100%; max-height: calc(100dvh - 16px); border-radius: 20px 20px 0 0; }
  .demo-root .modal > header, .demo-root .modal-content, .demo-root .modal > form, .demo-root .modal-footer { padding: 20px 16px; }
  .demo-root .modal > header h2 { font-size: 22px; }
  .demo-root .modal-footer { gap: 8px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .modal-footer .button { flex: 1; padding-inline: 12px; }
  .form-grid { gap: 20px; }
  .demo-root .report-toolbar .period-control select { font-size: 16px; }
  .demo-root .report-toolbar .button { min-height: 48px; font-size: 12px; }
  .studio-checklist { margin-top: 20px; padding-block: 24px; }
  .demo-root .studio-checklist h2 { font-size: 24px; }
  .studio-checklist li { font-size: 14px; }
  .studio-checklist a { min-height: 48px; }
  .workspace-footer { gap: 12px; margin-top: 24px; font-size: 12px; }
  .demo-footer-actions { width: 100%; gap: 8px; justify-content: space-between; }
  .demo-footer-actions > button { font-size: 12px; }
}
@media (max-width: 359px) {
  .mobile-workspace-brand .bloom8-logo { font-size: 24px; }
  .demo-root .topbar .role-top select { width: 116px; }
  .demo-root .page-content { padding-inline: 12px; }
  .demo-root .metric strong { font-size: 26px; }
  .work-row { grid-template-columns: minmax(0, 1fr) auto; }
  .work-row .avatar { display: none; }
}
@media print { body, .demo-root { background: #fff; } }
/* Mobile workspace: persistent navigation, concise records, readable detail sheets. */
.mobile-bottom-nav, .client-email { display: none; }
.detail-grid { display: grid; gap: 0; margin: 24px 0; }
.detail-grid > div { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; overflow-wrap: anywhere; }
.detail-record { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 14px; margin-bottom: 12px; }
.detail-record > span { color: var(--muted); }
.detail-record .badge { justify-self: start; }
.booking-detail-button { border: 0; background: none; text-align: left; padding: 8px 0; cursor: pointer; min-width: 0; flex: 1; }
.mobile-more nav, .create-choices { display: grid; gap: 8px; }
.mobile-more nav a, .mobile-more > a, .create-choices > button { min-height: 48px; padding: 12px; display: flex; align-items: center; gap: 12px; background: var(--color-soft); border: 0; border-radius: 10px; color: var(--color-ink); font-size: 14px; }
.mobile-more nav a > span { flex: 1; }
.mobile-more nav a[aria-current] { background: var(--tint); }
.mobile-more > a { margin-top: 12px; }
.create-choices > button > svg:last-child { margin-left: auto; }
.document-history { margin-top: 24px; }
@media (max-width: 760px) {
  .demo-root > .demo-strip, .demo-root .sidebar { display: none; }
  .demo-root .app-layout { min-height: 100dvh; }
  .demo-root .topbar { padding: 0 16px; }
  .demo-root .page-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; position: fixed; inset: auto 0 0; z-index: 35; padding: 8px 8px max(8px, env(safe-area-inset-bottom)); background: var(--color-surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px #25252506; }
  .mobile-bottom-nav > a, .mobile-bottom-nav > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 4px; font-size: 11px; border: 0; background: none; color: var(--muted); }
  .mobile-bottom-nav > [aria-current="page"] { color: var(--color-ink); background: var(--tint); border-radius: 12px; }
  .mobile-bottom-nav > .mobile-create { justify-self: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-ink); color: white; }
  .mobile-more .profile-picker { display: grid; grid-template-columns: 1fr; margin-bottom: 20px; gap: 8px; }
  .demo-root .mobile-more .profile-picker select { width: 100%; }
  .demo-root .client-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; text-align: left; }
  .demo-root .client-row > .identity { grid-row: 1; min-width: 0; }
  .demo-root .client-row .identity .stack { overflow: hidden; }
  .demo-root .client-row .identity strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .demo-root .client-row .client-email { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 12px; }
  .demo-root .client-row .client-email-desktop { display: none; }
  .demo-root .client-row > :nth-child(3) { grid-column: 2; grid-row: 1; display: grid; gap: 6px; text-align: right; justify-items: end; white-space: nowrap; }
  .demo-root .client-row .avatar { display: none; }
  .demo-root .data-row .stack strong, .demo-root .data-row .stack small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .demo-root .data-row > *, .demo-root .identity { min-width: 0; }
  .demo-root .data-row .stack { overflow: hidden; }
  .demo-root .booking-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 14px 12px; }
  .booking-detail-button strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .booking-detail-button small { line-height: 1.5; }
  .demo-root .booking-row > .badge { grid-column: 2; justify-self: start; }
  .demo-root .booking-row > .small-button { grid-column: 3; grid-row: 1 / 3; }
  .demo-root .document { padding: 16px; }
  .document > header { display: grid; gap: 16px; }
  .document header > div:last-child { text-align: left; }
  .document .wordmark { font-size: 22px; }
  .document-client span { font-size: 12px; }
  .document-line { gap: 12px; grid-template-columns: minmax(0, 1fr) auto; font-size: 14px; }
  .document-line > span, .document-totals strong { white-space: nowrap; }
  .document p { font-size: 14px; }
  .document-wrapper { padding: 0; }
  .detail-grid > div { grid-template-columns: 1fr; gap: 5px; }
  .order-details dl > div { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 14px; }
  .order-details dd { text-align: left; overflow-wrap: anywhere; }
  .document-actions { flex-wrap: wrap; }
  .document-actions > .button { flex: 1 1 100%; }
  .related-row { gap: 12px; font-size: 14px; }
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  .package-grid { display: grid; gap: 12px; }
  .demo-root .package-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 20px 16px; gap: 10px 12px; border: 1px solid var(--border); border-radius: 16px; background: white; }
  .package-card .package-number { display: none; }
  .package-card .eyebrow { grid-column: 1; grid-row: 1; font-size: 12px; }
  .demo-root .package-card h2 { grid-column: 1; grid-row: 2; font-size: 18px; min-width: 0; }
  .demo-root .package-card > strong { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 22px; white-space: nowrap; }
  .package-card p, .package-card > .small { grid-column: 1 / -1; grid-row: auto; }
  .package-card > .small { font-size: 12px; }
  .booking-detail-button small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .demo-root .booking-row > .small-button { background: var(--color-soft); color: var(--color-ink); border-color: var(--border); }
}
@media (max-width: 760px) {
  .transaction-list .stack > .text-button { justify-content: flex-start; min-height: 44px; padding-block: 8px; font-size: 13px; }
  .demo-root .claims-list .small-button { min-height: 44px; background: var(--color-soft); color: var(--color-ink); border-color: var(--border); font-size: 13px; }
}
/* Mobile UX review: prioritise work, label amounts and shorten profile sheets. */
.dashboard-insights { margin: 24px 0; border: 1px solid var(--border); border-radius: 16px; background: var(--color-surface); }
.dashboard-insights > summary, .client-secondary > summary { padding: 16px; cursor: pointer; min-height: 48px; font-size: 14px; }
.dashboard-insights > summary > span { margin-left: 12px; color: var(--muted); font-size: 12px; }
.demo-root .dashboard-insights .business-insights { margin: 0; border-radius: 0 0 16px 16px; }
.client-contact-actions { display: flex; gap: 12px; }
.client-contact-actions a { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--border); padding: 10px 16px; border-radius: 999px; font-size: 14px; }
.client-finances { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.client-finances > div { padding: 14px; border-radius: 12px; background: var(--color-soft); }
.client-finances dt { font-size: 12px; color: var(--muted); }
.client-finances dd { margin: 6px 0 0; font-size: 24px; font-family: var(--font-display); }
.client-secondary { margin-top: 20px; border-top: 1px solid var(--border); }
.client-secondary > summary { padding-inline: 0; }
.client-secondary p { overflow-wrap: anywhere; }
.client-order-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
.invoice-total small { font-size: 12px; font-weight: 400; }
@media (max-width: 760px) {
  .demo-root .invoice-row > .invoice-total { display: block; grid-column: 2; grid-row: 1; white-space: nowrap; text-align: right; font-size: 14px; }
  .demo-root .invoice-row > .invoice-due { grid-column: 2; grid-row: 2; white-space: nowrap; text-align: right; font-size: 12px; }
  .demo-root .invoice-row > .badge { grid-column: 2; grid-row: 3; justify-self: end; }
  .demo-root .invoice-row > .stack { grid-row: 1 / 4; align-self: center; }
  .dashboard-insights > summary > span { display: block; margin: 6px 0 0; }
  .client-finances { gap: 8px; }
  .client-finances > div { padding: 12px; }
}

.growth-workspace { --growth-tint: var(--color-soft, #f7f3f1); }
.growth-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.growth-document-layout { grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); }
.growth-stack { display: grid; gap: 24px; min-width: 0; }
.growth-card, .growth-brand-card { padding: clamp(20px, 2.5vw, 32px); min-width: 0; overflow-wrap: anywhere; }
.growth-workspace h2 { font-size: 24px; font-weight: 500; letter-spacing: -.035em; line-height: 1.2; margin: 0 0 16px; }
.growth-workspace h3 { font-size: 16px; margin: 24px 0 8px; }
.growth-workspace p { color: var(--color-muted); font-size: 14px; line-height: 1.7; margin: 0 0 20px; }
.growth-workspace small { font-size: 12px; color: var(--color-muted); line-height: 1.6; }
.growth-brand-card > header { display: grid; gap: 14px; border-bottom: 1px solid var(--border); padding-bottom: 24px; margin-bottom: 28px; }
.growth-brand-card > header strong, .growth-document-header strong { font-family: var(--font-display); font-size: 23px; font-weight: 500; letter-spacing: -.04em; }
.growth-form { display: grid; gap: 18px; }
.growth-form label, .growth-field { display: grid; gap: 8px; font-size: 13px; font-weight: 500; }
.growth-form :is(input, select, textarea), .growth-field select { width: 100%; min-width: 0; min-height: 46px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--color-ink); font: inherit; font-size: 16px; }
.growth-form textarea { resize: vertical; }
.growth-workspace .button { white-space: normal; text-align: center; gap: 10px; min-height: 44px; }
.growth-kicker { display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .12em; margin-bottom: 22px; }
.growth-reply { padding: 20px; background: var(--growth-tint); border-radius: 12px; display: grid; gap: 10px; margin-bottom: 16px; }
.growth-reply strong { font-size: 14px; }
.growth-reply p { margin: 0; }
.growth-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.growth-record { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 18px; display: grid; gap: 12px; }
.growth-record strong, .growth-record small { display: block; }
.growth-record p { margin: 10px 0 0; }
.growth-record .button { justify-self: start; }
.growth-workspace .growth-result { border: 1px solid #c8d8c6; padding: 14px; margin: 18px 0 0; border-radius: 10px; background: #f3f8f1; color: #355534; }
.growth-workspace .growth-result.is-error { border-color: #dfc8c3; color: #784139; background: #fbf5f3; }
.growth-document-list { display: grid; gap: 10px; }
.growth-document-list button { padding: 16px; display: grid; gap: 8px; text-align: left; border: 1px solid var(--border); border-radius: 10px; background: white; color: var(--color-ink); }
.growth-document-list button.selected { background: var(--growth-tint); border-color: #999; }
.growth-document-list strong { font-size: 14px; font-weight: 500; }
.growth-document-list span { font-size: 12px; color: var(--color-muted); text-transform: capitalize; }
.growth-text-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 44px; margin-top: 12px; padding: 4px 0; border: 0; background: none; color: var(--color-ink); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.growth-document-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.growth-document-header > div { display: grid; gap: 12px; }
.growth-document-header .badge { flex-shrink: 0; }
.growth-document-client { margin: 28px 0; }
.growth-document-client h3 { margin: 10px 0 4px; font-size: 20px; }
.growth-document-client p { margin: 0 0 8px; }
.growth-scope { white-space: pre-wrap; }
.growth-total { background: var(--growth-tint); border-radius: 12px; padding: 24px; margin: 24px 0; display: grid; gap: 10px; }
.growth-total > span { font-size: 13px; }
.growth-total > strong { font-family: var(--font-display); font-size: 40px; line-height: 1.1; font-weight: 500; letter-spacing: -.05em; }
.growth-document > .button { display: flex; margin-top: 20px; }
.growth-workspace .growth-disclaimer { margin: 16px 0 0; font-size: 12px; line-height: 1.6; }
.growth-agreement-note { background: var(--growth-tint); font-size: 13px; padding: 16px; border-radius: 10px; margin-bottom: 24px; line-height: 1.6; }
.growth-form .growth-checkbox { grid-template-columns: 20px minmax(0, 1fr); align-items: start; font-size: 13px; line-height: 1.6; min-height: 44px; }
.growth-checkbox input { min-height: 0; width: 18px; height: 18px; margin-top: 2px; }
.growth-signature-record { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border: 1px solid #c8d8c6; border-radius: 12px; }
.growth-signature-record > svg { flex-shrink: 0; }
.growth-signature { display: block; font-family: Georgia, serif; font-style: italic; font-size: 30px; font-weight: 400; margin: 16px 0; }
.growth-signature-record p { margin: 0 0 8px; }
.growth-benefits { padding: 0; margin: 0; list-style: none; display: grid; gap: 18px; }
.growth-benefits li { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.growth-benefits svg { flex-shrink: 0; }
.growth-card > .badge + .button { display: flex; margin-top: 18px; }
.growth-checkout > .eyebrow { display: block; margin-bottom: 16px; }
.growth-checkout > .button { display: flex; width: 100%; margin-top: 16px; }
.growth-test-card { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; margin: 24px 0; }
.growth-test-card strong, .growth-test-card small { display: block; }
.growth-test-card strong { font-size: 14px; }
.growth-paid { display: grid; justify-items: center; text-align: center; padding: 28px 0; }
.growth-paid h3 { font-size: 24px; }
.growth-paid strong { font-size: 28px; margin-bottom: 14px; }
.growth-workspace button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 1100px) { .growth-split, .growth-document-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .growth-split, .growth-stack { gap: 16px; }
  .growth-card, .growth-brand-card { padding: 20px; }
  .growth-document-header { flex-wrap: wrap; }
  .growth-document-header .badge { font-size: 10px; }
  .growth-workspace h2 { font-size: 23px; }
  .growth-total { padding: 20px; }
}
.client-workspace-views { display: flex; gap: 8px; margin: 0 0 24px; flex-wrap: wrap; }
.client-workspace-views a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid #e7e4e2; border-radius: 10px; color: #666; background: #fff; font-size: 13px; }
.client-workspace-views a[aria-current="page"] { background: #f0e6e2; border-color: #d9c6bd; color: #40362f; }
.client-workspace-views a:focus-visible { outline: 2px solid #8b5f56; outline-offset: 3px; }

/* Approved Option B: capsule controls, selectable tiles and inset order panels. */
:root, .demo-root[data-theme] {
  --canvas: #fcfcfc; --deep: #252525; --accent: #252525; --tint: #eedad6; --border: #e7e7e7;
  --color-paper: #fcfcfc; --color-surface: #fff; --color-ink: #252525; --color-muted: #636363;
  --color-rule: #e7e7e7; --color-soft: #f4f4f4; --color-rose: #eedad6; --color-tint: #eedad6;
  --radius-card: 28px; --radius-button: 999px;
}
.demo-root { font-weight: 400; }
.demo-root :is(h1, h2, h3), .growth-workspace :is(h2, h3) { font-family: var(--font-display), sans-serif; font-weight: 400; letter-spacing: -.025em; }
.demo-root h1 { font-size: clamp(28px, 2.6vw, 38px); }
.demo-root :is(button, select, a.button) { font-weight: 600; }
.demo-root :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid #252525; outline-offset: 4px; }
.demo-root :is(input, select, textarea):focus-visible { border-color: #252525; }
.demo-root .button { min-height: 52px; border-radius: 999px; padding: 14px 24px; }
.demo-root .button.secondary { background: #f4f4f4; color: #252525; border-color: #e7e7e7; }
.demo-root .button:disabled { color: #636363; background: #f4f4f4; border-color: #e7e7e7; opacity: 1; }
.demo-root .icon-button { width: 48px; height: 48px; min-width: 48px; min-height: 48px; border: 1px solid #e7e7e7; border-radius: 50%; background: #fff; }
.demo-root .icon-button:hover, .demo-root .document-tile:hover { background: #f4f4f4; }
.demo-root .demo-strip { min-height: 86px; padding: 18px 28px; background: #fff; border-bottom: 1px solid #e7e7e7; gap: 24px; }
.desktop-workspace-brand { display: inline-flex; align-items: center; }
.demo-root .demo-strip > a:first-child { font-size: inherit; }
.demo-root .demo-strip > a:nth-child(2) { margin-left: auto; font-size: 12px; }
.demo-root .demo-strip .profile-picker { margin: 0; padding: 0; border: 0; }
.demo-root .profile-picker select { border-radius: 999px; background: #f4f4f4; border-color: transparent; padding-inline: 20px; }
.demo-root .sidebar { width: 104px; padding: 24px 8px; background: #fff; height: calc(100dvh - 86px); top: 0; overflow: visible; border-color: #e7e7e7; z-index: 40; }
.sidebar .sidebar-brand, .sidebar .business-card, .sidebar .sidebar-role, .sidebar > .nav-label, .sidebar .sidebar-bottom { display: none; }
.demo-root .sidebar nav { display: grid; gap: 12px; }
.demo-root .sidebar nav > a { display: flex; flex-direction: column; gap: 7px; padding: 0; border-radius: 0; background: transparent; font-size: 11px; min-height: 80px; font-weight: 400; color: #636363; }
.rail-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: #252525; }
.demo-root .sidebar nav > a.active { color: #252525; font-weight: 600; background: transparent; }
.demo-root .sidebar nav > a.active .rail-icon { background: #eedad6; }
.demo-root .sidebar nav > a:hover .rail-icon { background: #f4f4f4; }
.rail-more { position: relative; }
.rail-more > summary { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 80px; cursor: pointer; color: #636363; font-size: 11px; list-style: none; }
.rail-more > summary::-webkit-details-marker { display: none; }
.rail-more > div { position: absolute; left: 96px; bottom: 0; width: 240px; padding: 12px; border: 1px solid #e7e7e7; background: #fff; border-radius: 24px; z-index: 40; box-shadow: 0 12px 32px #2525250d; }
.demo-root .sidebar .rail-more a { display: flex; min-height: 48px; gap: 12px; padding: 12px; border-radius: 999px; font-size: 13px; }
.demo-root .sidebar .rail-more a[aria-current] { background: #eedad6; }
.demo-root .topbar { height: 64px; border: 0; padding-inline: 32px; background: #fcfcfc; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.demo-root .role-top select { border-radius: 999px; background: #f4f4f4; border-color: transparent; }
.demo-root .page-content { max-width: 1760px; padding: 24px 32px 32px; }
.demo-root .page-heading { margin-bottom: 28px; }
.demo-root .page-heading p { font-size: 14px; }
.demo-root .panel, .demo-root :is(.metric, .metric.emphasis, .package-card, .next-moves > a, .growth-card, .growth-brand-card, .dashboard-insights) { border-radius: 24px; border-color: #e7e7e7; }
.demo-root :is(.avatar, .business-avatar) { border-radius: 50%; background: #f4f4f4; color: #252525; }
.demo-root .date-tile { width: 56px; height: 56px; min-height: 56px; flex: 0 0 56px; border-radius: 14px; padding: 6px; gap: 3px; background: #f4f4f4; color: #252525; }
.demo-root .date-tile small { font-size: 10px; line-height: 1.2; }
.demo-root .date-tile strong { font-size: 21px; line-height: 1; margin: 0; }
.demo-root .badge { border: 0; border-radius: 999px; padding: 8px 12px; background: #f4f4f4; color: #252525; font-weight: 600; font-size: 11px; }
.demo-root .badge:is(.active, .issued, .partially_paid) { background: #eedad6; }
.demo-root .search-box, .demo-root .toolbar select, .demo-root .order-toolbar select { border: 1px solid transparent; background: #f4f4f4; border-radius: 999px; min-height: 52px; }
.demo-root .search-box { padding: 0 18px; color: #636363; }
.demo-root .search-box input { background: transparent; border: 0; font-size: 14px; min-width: 0; }
.demo-root .search-box:focus-within { outline: 2px solid #252525; outline-offset: 3px; }
.demo-root .search-box input:focus-visible { outline: none; }
.demo-root :is(input:not([type="checkbox"]), select, textarea) { border-radius: 16px; border-color: #a5a5a5; }
.demo-root :is(.profile-picker, .role-top, .toolbar, .order-toolbar) select { border-radius: 999px; background: #f4f4f4; border-color: transparent; }
.demo-root .data-list { padding: 8px; background: transparent; border: 0; overflow: visible; }
.demo-root .data-header { background: transparent; color: #636363; border: 0; }
.demo-root .data-row, .demo-root .booking-row { border: 1px solid #e7e7e7; border-radius: 20px; background: #fff; margin-bottom: 10px; }
.demo-root .data-row:last-child { border-bottom: 1px solid #e7e7e7; }
.demo-root .transaction-list .stack > .text-button { align-self: flex-start; justify-content: flex-start; width: fit-content; min-height: 44px; text-align: left; }
.demo-root .package-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.demo-root .package-card { display: grid; grid-template-columns: 40px minmax(220px, 1fr) minmax(240px, 1.4fr) 112px; grid-template-areas: "number title description price" "number duration description pricing"; gap: 8px 24px; align-items: center; padding: 24px; border: 1px solid #e7e7e7; background: #fff; }
.demo-root .package-card .package-number { grid-area: number; position: static; display: block; font-size: 24px; color: #636363; }
.demo-root .package-card .eyebrow { grid-area: duration; margin: 0; white-space: nowrap; font-size: 11px; }
.demo-root .package-card h2 { grid-area: title; margin: 0; font-size: 20px; line-height: 1.35; overflow-wrap: normal; word-break: normal; }
.demo-root .package-card p { grid-area: description; margin: 0; min-height: 0; max-width: 440px; font-size: 13px; line-height: 1.6; }
.demo-root .package-card > strong { grid-area: price; margin: 0; font-size: 24px; text-align: right; white-space: nowrap; }
.demo-root .package-card > .small { grid-area: pricing; font-size: 11px; text-align: right; }
.demo-root :is(.small-button, .profile-options button, .configurator .swatch-button) { border-radius: 999px; min-height: 44px; }
.demo-root .client-workspace-views { display: flex; background: #f4f4f4; padding: 5px; width: fit-content; border-radius: 999px; gap: 4px; }
.demo-root .client-workspace-views a { border: 0; border-radius: 999px; color: #636363; background: transparent; }
.demo-root .client-workspace-views a[aria-current="page"] { background: #fff; color: #252525; }
.demo-root :is(.growth-total, .growth-agreement-note, .growth-reply, .growth-test-card, .growth-signature-record) { border-radius: 20px; background: #f4f4f4; }
.demo-root .growth-document-list button { border-radius: 22px; padding: 20px; }
.demo-root .growth-document-list button.selected { background: #eedad6; border-color: #eedad6; }
.demo-root .modal, .demo-root .modal.wide { border-radius: 28px; }
.demo-root .modal > header { border-radius: 28px 28px 0 0; }
.demo-root .modal-footer { border-radius: 0 0 28px 28px; }
.demo-root .mobile-more nav a, .demo-root .create-choices button { border-radius: 999px; }
.orders-page { min-width: 0; }
.order-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; }
.segmented-tabs { display: inline-flex; gap: 4px; padding: 5px; background: #f4f4f4; border-radius: 999px; max-width: 100%; }
.segmented-tabs > button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 24px; border: 0; border-radius: 999px; background: transparent; color: #636363; font-size: 13px; white-space: nowrap; }
.segmented-tabs > button:is([aria-selected="true"], [aria-pressed="true"]) { background: #fff; color: #252525; }
.order-groups { margin-right: auto; }
.order-toolbar .search-box { width: min(320px, 100%); flex: 1 1 200px; max-width: 360px; }
.order-toolbar .filter-select { width: 180px; }
.order-toolbar select { width: 100%; padding-inline: 18px; font-size: 14px; color: #636363; }
.order-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.order-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 14px 12px; align-items: start; min-width: 0; padding: 24px; border: 1px solid #e7e7e7; background: #fff; border-radius: 28px; text-align: left; }
.order-tile:hover { border-color: #a5a5a5; }
.order-tile[aria-pressed="true"] { background: #eedad6; border-color: #eedad6; }
.order-tile .avatar { width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; font-size: 12px; background: #f4f4f4; }
.order-tile[aria-pressed="true"] .avatar, .order-tile[aria-pressed="true"] .badge { background: #fff; }
.order-tile .stack { min-width: 0; gap: 6px; }
.order-tile .stack strong { font-size: 14px; font-weight: 600; }
.order-tile .stack small { color: #636363; font-size: 13px; line-height: 1.5; white-space: normal; }
.tile-indicator { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e7e7e7; background: #fff; width: 40px; height: 40px; border-radius: 50%; color: #252525; flex-shrink: 0; }
.order-tile > .tile-indicator { justify-self: end; }
.order-tile > .badge { grid-column: 1 / 3; grid-row: 2; justify-self: start; align-self: end; margin-top: 14px; }
.order-tile .tile-date { grid-column: 1 / 3; grid-row: 3; font-size: 11px; color: #636363; align-self: end; font-weight: 400; }
.tile-balance { grid-column: 3; grid-row: 2 / 4; justify-self: end; align-self: end; text-align: right; display: grid; gap: 7px; }
.tile-balance strong { font-family: var(--font-display), sans-serif; font-size: clamp(24px, 2.2vw, 34px); font-weight: 400; line-height: 1.1; white-space: nowrap; }
.tile-balance small { color: #636363; font-size: 11px; font-weight: 400; white-space: nowrap; }
.order-carousel-controls { display: none; }
.order-workspace { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .9fr); gap: 22px 28px; padding: 28px; min-width: 0; }
.demo-root .order-workspace { border-radius: 30px; }
.order-title { grid-column: 1; }
.order-title .eyebrow { font-size: 11px; letter-spacing: .025em; margin: 0 0 16px; }
.order-title > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.demo-root .order-title h2 { font-size: clamp(25px, 2.4vw, 34px); margin: 0; font-weight: 400; }
.order-title .badge { flex-shrink: 0; }
.order-tab-control { grid-column: 1; }
.order-tab-control .segmented-tabs { width: min(100%, 460px); }
.order-tab-control .segmented-tabs > button { flex: 1; padding-inline: 12px; }
.order-balance { grid-column: 2; grid-row: 1 / 5; padding: 26px; border-radius: 26px; background: #eedad6; align-self: start; min-width: 0; }
.order-balance.is-cancelled { background: #f4f4f4; }
.balance-label { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 14px; font-weight: 600; }
.balance-label .tile-indicator { border: 0; }
.balance-amount { display: block; font-family: var(--font-display), sans-serif; font-size: clamp(34px, 4vw, 56px); font-weight: 400; letter-spacing: -.04em; margin-block: 20px; line-height: 1.1; }
.balance-summary { display: grid; gap: 18px; margin: 0 0 24px; font-size: 13px; }
.balance-summary > div { display: flex; justify-content: space-between; gap: 10px; }
.balance-summary dt { color: #636363; }
.balance-summary dd { margin: 0; font-weight: 600; }
.payment-progress { height: 10px; background: #fff; border-radius: 999px; overflow: hidden; }
.payment-progress > span { display: block; height: 100%; border-radius: 999px; background: #252525; }
.payment-progress-label { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; margin-top: 10px; }
.payment-progress-label > span { color: #636363; }
.order-balance .action-stack { gap: 12px; margin-top: 28px; }
.payment-primary { justify-content: space-between; }
.order-balance p { font-size: 12px; line-height: 1.7; margin-bottom: 0; }
.security-summary { display: grid; gap: 6px; padding-block: 16px; border-top: 1px solid #25252520; font-size: 13px; }
.security-summary small { color: #636363; }
.order-tab-panel { grid-column: 1; min-width: 0; }
.order-tab-panel h3 { font-size: 16px; margin-bottom: 14px; }
.order-client-summary { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 16px; margin: 4px 0 24px; padding-bottom: 24px; border-bottom: 1px solid #e7e7e7; }
.order-client-summary dt { color: #636363; font-size: 11px; margin-bottom: 8px; }
.order-client-summary dd { margin: 0; font-size: 13px; font-weight: 600; }
.order-client-summary dd small { display: block; color: #636363; font-size: 11px; margin-top: 6px; font-weight: 400; }
.summary-client { display: flex; gap: 12px; align-items: start; }
.summary-client .avatar { width: 44px; height: 44px; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.summary-client dd { margin-bottom: 8px; }
.order-brief { margin-bottom: 28px; }
.order-brief p { font-size: 13px; line-height: 1.7; margin-bottom: 12px; }
.order-brief small { color: #636363; overflow-wrap: anywhere; }
.linked-documents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.linked-documents > :is(.document-send-actions, .document-simulation-feedback) { grid-column: 1 / -1; }
.document-tile { display: flex; align-items: center; gap: 12px; background: #f4f4f4; border: 0; border-radius: 20px; padding: 16px; text-align: left; min-width: 0; color: #252525; }
.document-tile .stack { min-width: 0; flex: 1; }
.document-tile strong { font-size: 13px; font-weight: 600; }
.document-tile small { font-size: 11px; color: #636363; line-height: 1.6; }
.document-tile .tile-indicator { width: 36px; height: 36px; }
.document-tile > .tile-indicator:first-child { display: none; }
.payment-history .related-row { border-color: #e7e7e7; }
.order-secondary-actions { display: flex; gap: 20px; flex-wrap: wrap; grid-column: 1; }
.order-secondary-actions .text-button { font-size: 12px; min-height: 44px; color: #636363; }
.order-secondary-actions .danger { color: #783f37; }
.order-permalink { display: flex; justify-content: flex-end; min-height: 44px; font-size: 12px; }
.order-types { margin-top: 20px; }
.demo-root .back-link, .demo-root .muted { color: #636363; }
.demo-root .date-tile small { color: #252525; }
@media (max-width: 1100px) {
  .demo-root .package-card { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title price" "duration pricing" "description description"; gap: 10px 20px; }
  .demo-root .package-card .package-number { display: none; }
  .demo-root .package-card p { max-width: none; }
}
/* Charcoal on rose clears 4.5:1 for small text while preserving the approved palette. */
.order-tile[aria-pressed="true"] :is(.tile-date, .stack small, .tile-balance small),
.order-balance:not(.is-cancelled) :is(p, small, dt, .payment-progress-label > span),
.demo-root .growth-document-list button.selected span { color: #252525; }
@media (max-width: 1240px) {
  .order-toolbar .order-groups { flex: 1 1 100%; width: fit-content; max-width: fit-content; }
  .order-toolbar .search-box { max-width: none; }
  .order-tile { padding: 20px; }
  .order-workspace { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .9fr); padding: 24px; gap: 20px; }
  .order-client-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .linked-documents { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) and (min-width: 761px) {
  .order-tiles { gap: 12px; }
  .order-tile { grid-template-columns: 36px minmax(0, 1fr); padding: 16px; }
  .order-tile > .tile-indicator { display: none; }
  .order-tile > .badge { grid-column: 1; }
  .order-tile .tile-date { grid-column: 1 / -1; grid-row: 4; }
  .order-tile .tile-balance { grid-column: 2; }
  .order-tile .avatar { width: 36px; height: 36px; }
}
@media (max-width: 760px) {
  .demo-root .booking-row { grid-template-columns: 56px minmax(0, 1fr); gap: 12px 16px; padding: 16px; }
  .demo-root .booking-row > .date-tile { grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .demo-root .booking-row > .small-button { grid-column: 2; grid-row: 3; justify-self: start; }
  .demo-root .topbar { background: #fff; border-bottom: 1px solid #e7e7e7; height: 72px; padding: 0 16px; }
  .topbar-actions { gap: 4px; }
  .demo-root .topbar .role-top select { width: 104px; padding-inline: 8px; font-size: 14px; }
  .demo-root .topbar .icon-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .desktop-create { background: #252525 !important; color: #fff; border-color: #252525 !important; }
  .demo-root .page-content { padding: 24px 16px calc(116px + env(safe-area-inset-bottom)); }
  .demo-root .page-heading { gap: 16px; margin-bottom: 24px; }
  .orders-page .page-heading { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: start; gap: 12px; }
  .orders-page .page-heading .heading-actions { width: 48px; }
  .orders-page .page-heading .button { width: 48px; padding: 0; font-size: 0; gap: 0; }
  .orders-page .page-heading .button svg { width: 22px; height: 22px; }
  .demo-root .button { min-height: 48px; padding: 12px 20px; }
  .order-toolbar { gap: 12px; margin-bottom: 20px; }
  .order-toolbar .order-groups { max-width: 100%; width: 100%; flex: 1 1 100%; }
  .segmented-tabs > button { padding: 10px 12px; flex: 1; font-size: 12px; }
  .order-toolbar .search-box { flex: 1 1 170px; width: auto; }
  .order-toolbar .filter-select { width: 122px; }
  .order-toolbar select, .demo-root .search-box input { font-size: 16px; }
  .order-tiles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 4px 4px 8px; margin: -4px -4px 0; }
  .order-tile { width: 100%; flex: 0 0 100%; scroll-snap-align: start; grid-template-columns: 42px minmax(0, 1fr) 40px; padding: 20px; border-radius: 24px; }
  .order-tile .tile-date { grid-column: 1 / 3; grid-row: 3; }
  .tile-balance strong { font-size: 28px; }
  .order-carousel-controls { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: #636363; margin: 4px 0 20px; }
  .order-carousel-controls > div { display: flex; gap: 8px; }
  .order-carousel-controls .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .order-workspace { display: flex; flex-direction: column; padding: 20px; gap: 20px; }
  .demo-root .order-workspace { border-radius: 28px; }
  .order-title .eyebrow { margin-bottom: 12px; font-size: 10px; }
  .demo-root .order-title h2 { font-size: 26px; }
  .order-title > div { align-items: flex-start; }
  .order-title .badge { font-size: 10px; padding: 6px 10px; }
  .order-tab-control .segmented-tabs { width: 100%; }
  .order-balance { padding: 20px; border-radius: 22px; width: 100%; }
  .balance-label { font-size: 13px; }
  .balance-amount { font-size: 38px; margin-block: 10px 16px; }
  .balance-label .tile-indicator { width: 36px; height: 36px; }
  .balance-summary { gap: 10px; margin-bottom: 18px; font-size: 12px; }
  .order-balance .action-stack { margin-top: 20px; }
  .order-client-summary { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .order-client-summary dd { font-size: 13px; }
  .summary-client { grid-column: 1 / -1; }
  .linked-documents { gap: 10px; }
  .document-tile { padding: 14px; border-radius: 18px; }
  .order-secondary-actions { gap: 10px 20px; }
  .demo-root .data-list { padding: 0; }
  .demo-root .client-workspace-views { width: 100%; border-radius: 24px; }
  .demo-root .client-workspace-views a { flex: 1; padding-inline: 12px; justify-content: center; }
  .demo-root .mobile-bottom-nav { border: 1px solid #e7e7e7; border-radius: 999px; inset: auto 12px max(12px, env(safe-area-inset-bottom)); padding: 6px; box-shadow: 0 4px 20px #25252508; }
  .demo-root .mobile-bottom-nav > :is(a, button) { min-height: 58px; color: #636363; border-radius: 999px; gap: 4px; padding: 8px 0; background: transparent; }
  .demo-root .mobile-bottom-nav > [aria-current="page"] { color: #252525; background: #eedad6; }
  .mobile-bottom-nav > :is(a, button) > span { font-size: 9px; font-weight: 400; }
  .demo-root .modal, .demo-root .modal.wide { border-radius: 28px 28px 0 0; }
  .demo-root .modal-footer { border-radius: 0; }
  .demo-root .toast { bottom: calc(94px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .demo-root *, .demo-root *::before, .demo-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print {
  .demo-root .order-workspace { display: block; }
  .demo-root :is(.sidebar, .demo-strip, .topbar, .mobile-bottom-nav, .order-toolbar, .order-tiles, .order-carousel-controls, .order-tab-control, .order-secondary-actions) { display: none !important; }
}

/* Dashboard capability previews and flowing document output, using the approved rounded palette. */
.demo-root .business-insights { border-radius: 28px; margin-bottom: 24px; }
.dashboard-capabilities { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.booking-calendar, .process-automation { min-width: 0; padding: 24px; }
.booking-calendar .section-heading p, .process-automation .section-heading p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: #636363; }
.calendar-month { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.calendar-month h3 { font-size: 18px; margin: 0; }
.calendar-grid { overflow-x: auto; padding: 5px; margin-inline: -5px; }
.calendar-weekdays, .calendar-dates { display: grid; grid-template-columns: repeat(7, minmax(44px, 1fr)); min-width: 332px; gap: 4px; }
.calendar-weekdays { margin-bottom: 8px; font-size: 11px; text-align: center; color: #636363; }
.calendar-dates button { border: 1px solid transparent; border-radius: 14px; min-width: 0; min-height: 48px; display: grid; place-content: center; gap: 3px; background: #f4f4f4; color: #252525; cursor: pointer; font-size: 13px; }
.calendar-dates button small { font-size: 10px; }
.calendar-dates button[data-count="booked"] { background: #eedad6; }
.calendar-dates button[aria-pressed="true"] { background: #252525; color: white; }
.calendar-dates button[aria-current="date"] { border-color: #252525; }
.calendar-help { font-size: 11px; color: #636363; line-height: 1.6; }
.calendar-bookings { margin-top: 20px; border-top: 1px solid #e7e7e7; padding-top: 20px; }
.calendar-bookings h3 { font-size: 16px; }
.calendar-bookings ul { list-style: none; margin: 0; padding: 0; }
.calendar-bookings li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid #e7e7e7; font-size: 13px; }
.calendar-bookings li > div { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.calendar-bookings li span { color: #636363; font-size: 12px; }
.automation-order { display: grid; gap: 8px; font-size: 13px; margin: 20px 0; }
.automation-order select { width: 100%; min-width: 0; min-height: 48px; border: 0; border-radius: 16px; padding: 12px 16px; background: #f4f4f4; font: inherit; }
.automation-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.demo-root .automation-actions .button { min-height: 48px; padding: 12px 16px; font-size: 12px; }
.simulation-label { display: inline-flex; align-items: center; gap: 8px; background: #eedad6; color: #252525; padding: 8px 12px; border-radius: 999px; font-size: 12px; }
.simulation-confirmation dl { display: grid; gap: 16px; margin: 24px 0; }
.simulation-confirmation dt { font-size: 12px; color: #636363; margin-bottom: 5px; }
.simulation-confirmation dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.simulation-success { background: #f4f4f4; color: #252525; padding: 16px; border-radius: 16px; font-size: 13px; line-height: 1.6; }
.document-send-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-block: 12px; }
.document-simulation-feedback:empty { display: none; }
.document-simulation-feedback { padding-inline: 24px; }
.demo-root .refined-document { color: #252525; padding: 32px; font-size: 13px; line-height: 1.6; }
.refined-document .print-watermark { background: #f4f4f4; color: #636363; border: 0; border-radius: 8px; margin-bottom: 24px; padding: 8px; font-size: 10px; }
.refined-document > header { border-bottom: 1px solid #e7e7e7; padding-bottom: 24px; align-items: start; }
.refined-document header h2 { font-size: 32px; margin: 4px 0; }
.refined-document .wordmark { font-family: var(--font-display), sans-serif; font-weight: 400; font-size: 23px; }
.refined-document p { font-size: 12px; line-height: 1.65; margin: 8px 0; }
.refined-document .eyebrow { font-size: 10px; color: #636363; }
.document-parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin: 24px 0; }
.refined-document .document-client { margin: 0; overflow-wrap: anywhere; }
.refined-document .document-client h3 { margin: 8px 0; font-size: 18px; }
.document-metadata { display: grid; gap: 6px; margin: 0; font-size: 11px; }
.document-metadata > div { display: flex; justify-content: space-between; gap: 12px; }
.document-metadata dt { color: #636363; }
.document-metadata dd { margin: 0; text-align: right; }
.refined-document table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.refined-document table th, .refined-document table td { padding: 12px 8px; border-bottom: 1px solid #e7e7e7; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.refined-document table th { background: #f4f4f4; font-size: 10px; font-weight: 600; color: #636363; }
.refined-document table small { display: block; font-size: 10px; color: #636363; margin-top: 4px; }
.invoice-items th:first-child { width: 42%; }
.invoice-items th:nth-child(2) { width: 8%; }
.invoice-items th:nth-child(n+3) { width: 25%; }
.refined-document table :is(th, td):last-child, .invoice-items :is(th, td):nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.invoice-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; margin-top: 20px; align-items: start; }
.invoice-tax-note { font-size: 11px; padding: 12px; background: #f4f4f4; border-radius: 12px; }
.invoice-tax-note p { font-size: 10px; }
.refined-document .document-totals { margin: 0; max-width: none; }
.refined-document .document-totals p { gap: 12px; margin: 0; }
.refined-document .balance-line { font-size: 14px; color: #252525; }
.refined-document .document-history { margin-top: 28px; }
.refined-document :is(.document-history, .sample-terms) h3 { font-size: 17px; margin: 0 0 12px; }
.refined-document :is(.document-note, .sample-terms) h4 { font-size: 12px; font-weight: 600; margin: 16px 0 4px; }
.invoice-history th:first-child { width: 28%; }
.invoice-history th:last-child { width: 23%; }
.refined-document .document-note { margin-top: 24px; padding-top: 12px; }
.document-end { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; color: #636363; border-top: 1px solid #e7e7e7; padding-top: 12px; margin-top: 20px; }
@media (max-width: 1050px) { .dashboard-capabilities { grid-template-columns: minmax(0, 1fr); } }
@media screen and (max-width: 760px) {
  .booking-calendar, .process-automation { padding: 16px; }
  .dashboard-capabilities { gap: 20px; }
  .demo-root .refined-document { padding: 16px; }
  .document-parties, .invoice-summary { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .refined-document table { font-size: 10px; }
  .refined-document table :is(th, td) { padding: 10px 3px; }
  .refined-document table th:first-child { width: 33%; }
  .invoice-items th:nth-child(2) { width: 9%; }
  .invoice-items th:nth-child(n+3) { width: 29%; }
  .refined-document > header { gap: 16px; }
  .automation-order select { font-size: 16px; }
  .modal:has(.refined-document) > .modal-footer { flex-wrap: wrap; }
  .modal:has(.refined-document) > .modal-footer > .button { flex: 1 1 auto; }
}
@media print {
  @page { size: A4; margin: 16mm; }
  html, body { height: auto !important; min-height: 0 !important; overflow: visible !important; background: white !important; }
  body:has(.document) .demo-root > :not(.modal-backdrop) { display: none !important; }
  body:has(.document) .modal-backdrop:not(:has(.document)), .screen-only, .document-simulation-feedback { display: none !important; }
  .demo-root, .modal-backdrop:has(.document), .modal-backdrop:has(.document) .modal, .document-wrapper { display: block !important; position: static !important; inset: auto !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: white !important; transform: none !important; animation: none !important; filter: none !important; backdrop-filter: none !important; }
  .demo-root .document.refined-document { position: static !important; width: auto !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; font-size: 10pt; }
  .refined-document .print-watermark { position: fixed !important; top: -10mm; left: 0; right: 0; margin: 0; padding: 0; background: white; border-radius: 0; font-size: 7pt; }
  .refined-document > header { display: flex !important; padding-bottom: 5mm; }
  .refined-document header > div:last-child { text-align: right !important; }
  .document-parties { grid-template-columns: 1fr 1fr; margin: 6mm 0; gap: 6mm; }
  .invoice-summary { grid-template-columns: 1fr 1.2fr; gap: 6mm; }
  .refined-document p { font-size: 9pt; }
  .refined-document table { font-size: 9pt; }
  .refined-document table :is(th, td) { padding: 3mm 2mm; }
  .refined-document thead { display: table-header-group; }
  .refined-document tr, .refined-document > header, .document-parties, .invoice-summary, .document-note, .document-end { break-inside: avoid; }
  .refined-document h3, .refined-document h4 { break-after: avoid; }
  .refined-document p { orphans: 3; widows: 3; }
  .refined-document { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

.language-switcher { display:inline-flex; align-items:center; flex-shrink:0; }
.language-switcher select { font:inherit; font-size:13px; color:#252525; background:#fff; border:1px solid #d6d6d6; border-radius:999px; padding:8px 28px 8px 12px; min-height:40px; max-width:140px; cursor:pointer; }
.language-switcher select:focus-visible { outline:2px solid #252525; outline-offset:3px; }
html[lang="zh-CN"] { --font-chinese: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
html[lang="zh-CN"] body { font-family:var(--font-body),var(--font-chinese); }
html[lang="zh-CN"] :is(h1,h2,h3,h4,button,input,select,textarea) { font-family:var(--font-display),var(--font-chinese); }
html[lang="zh-CN"] :is(.open-eyebrow,.eyebrow,.nav-label) { letter-spacing:.06em; }
@media(max-width:760px) { .open-header { flex-wrap:wrap; } .demo-strip { flex-wrap:wrap; } .language-switcher select { font-size:12px; min-height:36px; } }
@media print { .language-switcher { display:none; } }

@media screen and (max-width:760px) {
  .demo-root .topbar:has(.language-switcher) { height:auto; min-height:104px; padding-block:10px; }
  .demo-root .topbar > div:first-child .language-switcher { display:flex; margin-top:8px; }
  .demo-root .topbar .language-switcher select { max-width:116px; padding:5px 22px 5px 8px; min-height:34px; font-size:12px; }
}

.order-agreements { min-width: 0; margin-top: 24px; padding-top: 24px; border-top: 1px solid #e7e7e7; }
.order-agreements h3 { margin: 0; }
.order-agreements .growth-section-title { flex-wrap: wrap; gap: 12px; }
.agreement-staff-preview, .agreement-issue { display: grid; gap: 20px; margin-top: 20px; }
.agreement-staff-preview > p { margin: 0; }
.agreement-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.order-agreements .agreement-actions { margin: 0; }
.agreement-link-actions[open] > .agreement-actions { margin-top: 16px; }
.order-agreements details > summary, .recipient-signing details > summary { min-height: 44px; padding-block: 12px; cursor: pointer; color: #252525; font-weight: 600; }
.recipient-signing { display: grid; gap: 24px; min-width: 0; }
.recipient-signing > h2 { font-family: var(--font-display), sans-serif; font-size: clamp(24px, 3vw, 32px); font-weight: 400; margin: 0; letter-spacing: -.025em; }
.recipient-brand { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid #e7e7e7; }
.recipient-brand span { font-size: 12px; color: #636363; }
.signing-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 0; list-style: none; gap: 8px; }
.signing-progress li { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; border-radius: 999px; background: #f4f4f4; font-size: 13px; color: #636363; }
.signing-progress li[aria-current] { background: #eedad6; color: #252525; font-weight: 600; }
.signing-progress li > span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; flex-shrink: 0; font-size: 11px; }
.agreement-document { padding: 28px; border: 1px solid #e7e7e7; border-radius: 24px; background: #fff; min-width: 0; overflow-wrap: anywhere; }
.agreement-document h2 { font-family: var(--font-display), sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; }
.agreement-document section { margin-top: 24px; }
.agreement-document h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.agreement-document p { line-height: 1.8; font-size: 13px; margin: 0; }
.agreement-summary { display: grid; gap: 16px; margin: 24px 0; padding-block: 24px; border-block: 1px solid #e7e7e7; }
.agreement-summary dt { font-size: 12px; color: #636363; margin-bottom: 6px; }
.agreement-summary dd { font-size: 14px; margin: 0; }
.agreement-signature-preview { display: grid; gap: 12px; padding: 24px; border: 1px solid #e7e7e7; border-radius: 20px; background: #fcfcfc; min-height: 140px; overflow-wrap: anywhere; }
.agreement-signature-preview > span { color: #636363; font-size: 12px; }
.agreement-signature-canvas { width: 100%; height: auto; aspect-ratio: 5 / 2; display: block; border: 1px solid #a5a5a5; border-radius: 20px; background: #fcfcfc; touch-action: none; }
.agreement-retained-signature { display: block; max-width: 300px; width: 100%; height: auto; }
.recipient-signing .growth-signature-record { margin: 0; }
.recipient-signing .growth-signature { overflow-wrap: anywhere; }
.recipient-primary { justify-self: end; }
.agreement-unavailable { padding: 24px; border-radius: 20px; background: #f4f4f4; }
.growth-contract-list .growth-field { margin-block: 24px; }
.order-agreements .growth-checkbox { align-items: start; }
.order-agreements .growth-checkbox input, .recipient-signing .growth-checkbox input { margin-top: 4px; min-width: 18px; min-height: 18px; accent-color: #252525; }
@media (max-width: 760px) {
  .recipient-signing { gap: 20px; }
  .agreement-document { padding: 20px; border-radius: 20px; }
  .signing-progress li { padding: 10px 6px; gap: 5px; font-size: 11px; }
  .agreement-actions > .button, .recipient-primary { width: 100%; }
  .agreement-actions { align-items: stretch; }
  .recipient-signing .agreement-actions { flex-direction: column-reverse; }
  .agreement-summary dd { font-size: 13px; }
}

/* Keep the approved rounded design as the default; ?ui=shadcn opens the preview. */
html:not([data-ui="shadcn"]) :is([data-slot="button"], [data-slot="dropdown-menu-trigger"]) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 1px solid #252525; border-radius: 999px; background: #252525; color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
html:not([data-ui="shadcn"]) :is([data-slot="button"], [data-slot="dropdown-menu-trigger"])[data-variant="secondary"], html:not([data-ui="shadcn"]) :is([data-slot="button"], [data-slot="dropdown-menu-trigger"])[data-variant="outline"] { color: #252525; background: #f4f4f4; border-color: #e7e7e7; }
html:not([data-ui="shadcn"]) :is([data-slot="button"], [data-slot="dropdown-menu-trigger"])[data-variant="ghost"] { color: #252525; background: transparent; border-color: transparent; }
html:not([data-ui="shadcn"]) :is([data-slot="button"], [data-slot="dropdown-menu-trigger"])[data-size="icon"] { width: 48px; padding: 0; flex-shrink: 0; }
html:not([data-ui="shadcn"]) :is([data-slot="button"], [data-slot="dropdown-menu-trigger"]):disabled { background: #f4f4f4; color: #636363; border-color: #e7e7e7; cursor: not-allowed; }
html:not([data-ui="shadcn"]) .segmented-tabs :is([data-slot="button"], [data-slot="dropdown-menu-trigger"]) { background: transparent; color: #636363; border: 0; min-height: 44px; padding: 10px 20px; }
html:not([data-ui="shadcn"]) .segmented-tabs [aria-selected="true"] { background: #eedad6; color: #252525; }
html:not([data-ui="shadcn"]) .sidebar-divider { display: none; }
html:not([data-ui="shadcn"]) .rail-more > div { max-height: min(560px, 75dvh); overflow-y: auto; }
html:not([data-ui="shadcn"]) [data-slot="dropdown-menu-content"] { min-width: 220px; padding: 10px; border: 1px solid #e7e7e7; border-radius: 20px; background: #fff; color: #252525; box-shadow: 0 12px 32px #2525250d; }
html:not([data-ui="shadcn"]) [data-slot="dropdown-menu-item"] { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px; border-radius: 12px; cursor: pointer; }
html:not([data-ui="shadcn"]) [data-slot="dropdown-menu-item"][data-highlighted] { background: #f4f4f4; outline: 2px solid #252525; outline-offset: -2px; }
html:not([data-ui="shadcn"]) [data-slot="dropdown-menu-item"] svg { width: 18px; height: 18px; }
html:not([data-ui="shadcn"]) .metric[data-slot="card"] { display: block; box-shadow: none; }
html:not([data-ui="shadcn"]) .demo-root:has(.modal-backdrop) > .toast { visibility: hidden; }
@media (max-width: 760px) {
  html:not([data-ui="shadcn"]) .demo-root .topbar { gap: 8px; padding-inline: 12px; }
  html:not([data-ui="shadcn"]) .demo-root .topbar > div:first-child { flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
  html:not([data-ui="shadcn"]) .demo-root .topbar > div:first-child .language-switcher { margin-top: 0; }
  html:not([data-ui="shadcn"]) .demo-root .topbar .language-switcher select { max-width: 96px; }
  html:not([data-ui="shadcn"]) .demo-root .topbar .role-top select { width: 96px; font-size: 12px; }
  html:not([data-ui="shadcn"]) .topbar-actions { flex-shrink: 0; gap: 4px; }
  html:not([data-ui="shadcn"]) .topbar :is(.desktop-create, .desktop-navigation) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
  html:not([data-ui="shadcn"]) .topbar .desktop-create { color: #fff; }
  html:not([data-ui="shadcn"]) .topbar :is(.desktop-create, .desktop-navigation) svg { display: block; width: 18px; height: 18px; }
  html:not([data-ui="shadcn"]) .desktop-navigation { display: inline-flex; }
}
@media (max-height: 760px) and (min-width: 761px) {
  html:not([data-ui="shadcn"]) .demo-root .sidebar nav { gap: 4px; }
  html:not([data-ui="shadcn"]) .demo-root .sidebar nav > a, html:not([data-ui="shadcn"]) .rail-more > summary { min-height: 68px; }
  html:not([data-ui="shadcn"]) .demo-root .rail-icon { width: 48px; height: 48px; }
}