@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-Light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("/static/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #161616;
  --ink-soft: #4b4b4b;
  --ink-muted: #766d65;
  --canvas: #f7f3ee;
  --canvas-deep: #eee7df;
  --panel: rgba(255, 255, 255, 0.9);
  --panel-solid: #fffdf9;
  --panel-muted: #faf6f2;
  --surface-soft: var(--panel-muted);
  --glass: rgba(255, 255, 255, 0.7);
  --glass-strong: rgba(255, 255, 255, 0.84);
  --glass-line: rgba(255, 255, 255, 0.72);
  --line: #ece4dc;
  --line-strong: #d9cfc5;
  --brand: #ff9f00;
  --brand-hover: #f0a017;
  --brand-strong: var(--brand-hover);
  --brand-deep: #9b5a00;
  --brand-soft: #fff0d5;
  --brand-faint: rgba(255, 159, 0, 0.1);
  --forest: #356554;
  --forest-soft: #e4f0ea;
  --warning: #8b5a16;
  --warning-soft: #fff0cf;
  --danger: #a33a39;
  --danger-soft: #fae5e2;
  --sidebar: rgba(22, 22, 22, 0.88);
  --sidebar-text: #f8f3ed;
  --shadow-sm: 0 8px 24px rgba(35, 27, 20, 0.06);
  --shadow-md: 0 18px 50px rgba(35, 27, 20, 0.09);
  --shadow-glass: 0 24px 64px rgba(30, 22, 15, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  --shadow-lg: var(--shadow-glass);
  --muted: var(--ink-muted);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 32px;
  --control-radius: 6px;
  --control-radius-compact: 5px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --signature-canvas-bg: #fffdf8;
  --signature-ink: #2d2722;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  min-width: 320px;
  background: var(--canvas);
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 4%, rgba(255, 177, 65, 0.2), transparent 27rem),
    radial-gradient(circle at 95% 18%, rgba(255, 221, 171, 0.38), transparent 32rem),
    radial-gradient(circle at 72% 108%, rgba(220, 197, 178, 0.32), transparent 36rem),
    linear-gradient(145deg, #fbf8f4 0%, var(--canvas) 46%, var(--canvas-deep) 100%);
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  font-kerning: normal;
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  filter: blur(1px);
}

body::before {
  top: -14rem;
  right: 13%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 206, 124, 0.42), rgba(255, 159, 0, 0.06) 56%, transparent 72%);
}

body::after {
  bottom: -18rem;
  left: 21%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.82), rgba(231, 214, 198, 0.22) 56%, transparent 72%);
}

::selection { color: var(--ink); background: rgba(255, 159, 0, 0.34); }

h1,
h2,
h3 {
  margin-top: 0;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

h1 { margin-bottom: 0.7rem; font-size: clamp(2rem, 3.3vw, 3.45rem); }
h2 { margin-bottom: 0.75rem; font-size: clamp(1.1rem, 1.35vw, 1.4rem); }
h3 { margin-bottom: 0.55rem; font-size: 1rem; letter-spacing: -0.02em; }
p { margin-top: 0; }

a {
  color: var(--brand-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 150ms var(--ease-out);
}

a:hover { color: var(--ink); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 50%;
  min-height: 44px;
  padding: 11px 18px;
  color: var(--ink);
  background: var(--brand);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transform: translate(-50%, -180%);
  transition: transform 180ms var(--ease-out);
}

.skip-link:focus { transform: translate(-50%, 0); }

.topbar {
  position: fixed;
  z-index: 60;
  inset: 16px auto 16px 16px;
  width: 264px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  padding: 14px;
  color: var(--sidebar-text);
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 159, 0, 0.19), transparent 32%),
    linear-gradient(160deg, rgba(32, 30, 27, 0.9), var(--sidebar));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  box-shadow: 0 28px 72px rgba(24, 18, 14, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(26px) saturate(135%);
}

.brand-shell { position: relative; display: flex; align-items: center; gap: 8px; }

.brand {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 10px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 21px;
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px rgba(0, 0, 0, 0.14);
  text-decoration: none;
}

.brand:hover { color: var(--ink); }
.brand img { width: 120px; height: 81px; object-fit: contain; }
.brand span { padding-left: 12px; border-left: 1px solid var(--line); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; }

.nav-close { display: none; }

.nav-stage {
  min-height: 0;
  flex: 1;
  display: grid;
  overflow: hidden;
}

.nav-links,
.nav-panels {
  grid-area: 1 / 1;
  min-height: 0;
}

.nav-links {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 18px;
  overflow-y: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
}

.nav-links.is-hidden { opacity: 0; pointer-events: none; transform: translateX(-14px); }
.nav-panels { position: relative; opacity: 0; pointer-events: none; transform: translateX(14px); transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out); }
.nav-panels.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); }
.nav-panel { height: 100%; overflow-y: auto; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.nav-panel[hidden] { display: none; }
.nav-panel.is-open { display: grid; align-content: start; gap: 18px; }
.nav-panel-header { display: flex; align-items: center; gap: 10px; padding: 2px 4px 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.nav-panel-header p { margin: 0 0 4px; color: rgba(248,243,237,.48); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.nav-panel-header h2 { margin: 0; color: var(--sidebar-text); font-size: 1rem; letter-spacing: -.02em; }
.nav-back { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; color: rgba(248,243,237,.8); background: transparent; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; font-size: 1.1rem; line-height: 1; text-decoration: none; cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 160ms ease; }
.nav-back:hover { color: var(--ink); background: var(--brand); transform: translateX(-2px); }
.nav-panel-links { display: grid; gap: 4px; }
.nav-panel-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 9px 11px; color: rgba(248,243,237,.82); background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: .78rem; text-decoration: none; transition: background 160ms ease, color 160ms ease, transform 160ms ease; }
.nav-panel-link > span:last-child { color: rgba(248,243,237,.38); font-size: 1.1rem; }
.nav-panel-link:hover, .nav-panel-link.is-active { color: var(--ink); background: rgba(255,159,0,.92); border-color: rgba(255,220,161,.72); transform: translateX(2px); }
.nav-panel-link:hover > span:last-child, .nav-panel-link.is-active > span:last-child { color: var(--ink); }

.nav-section { display: grid; gap: 6px; }
.nav-section > p { margin: 0 0 2px; padding: 0 12px; color: rgba(248, 243, 237, 0.5); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
.nav-section > div { display: grid; gap: 3px; }

.nav-section a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 40px;
  padding: 8px 12px;
  color: rgba(248, 243, 237, 0.82);
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 140ms var(--ease-out), background 180ms var(--ease-out), transform 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.nav-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 4px transparent;
  transition: background 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

@media (hover: hover) {
  .nav-section a:hover {
    color: #fffaf2;
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
  }
}

.nav-section a.is-active {
  color: var(--ink);
  background: linear-gradient(135deg, #ffc25a 0%, var(--brand) 100%);
  border-color: rgba(255, 220, 161, 0.75);
  box-shadow: 0 12px 24px rgba(255, 159, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.nav-section a.is-active .nav-dot { background: var(--ink); box-shadow: 0 0 0 4px rgba(22, 22, 22, 0.1); }

.auth-chip {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--sidebar-text);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
}

.auth-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--brand);
  border-radius: 50%;
  font-size: 0.74rem;
  font-weight: 700;
}

.auth-identity { min-width: 0; display: grid; line-height: 1.3; }
.auth-identity strong { overflow: hidden; font-size: 0.76rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.auth-identity small { color: rgba(248, 243, 237, 0.56); font-size: 0.65rem; }
.auth-chip form { grid-column: 1 / -1; margin: 0; }
.auth-chip .button.secondary { width: 100%; color: var(--sidebar-text); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.auth-chip > .button { grid-column: 1 / -1; }

.mobile-topbar,
.nav-scrim { display: none; }

.page-shell {
  width: calc(100% - 296px);
  min-height: 100vh;
  margin-left: 296px;
  padding: clamp(24px, 2.8vw, 48px) clamp(22px, 3vw, 54px) 64px;
}

.hero,
.panel,
.metric-card,
.appointment-card,
.form-card {
  border: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow-md);
}

.hero,
.metric-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(255, 252, 247, 0.64)),
    var(--glass);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(18px) saturate(132%);
}

.panel,
.appointment-card,
.form-card {
  background: var(--panel);
  border-color: rgba(225, 214, 204, 0.86);
}

.panel { min-width: 0; padding: clamp(20px, 2vw, 32px); border-radius: var(--radius-lg); }
.panel > .data-table { display: block; max-width: 100%; overflow-x: auto; }

.hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  margin-bottom: 24px;
  padding: clamp(28px, 4vw, 58px);
  border-radius: var(--radius-xl);
}

.hero::after {
  position: absolute;
  right: -6rem;
  bottom: -8rem;
  width: 20rem;
  height: 20rem;
  border: 1px solid rgba(255, 159, 0, 0.26);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 189, 77, 0.3), transparent 64%);
  content: "";
  pointer-events: none;
}

.hero > * { position: relative; z-index: 1; }
.hero p { max-width: 720px; margin-bottom: 0; color: var(--ink-soft); font-size: 1.03rem; }

.public-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  align-items: stretch;
  min-height: 430px;
  padding: clamp(32px, 5vw, 72px);
}

.public-home-hero::after { display: none; }
.public-home-copy { align-self: center; max-width: 790px; }
.public-home-copy h1 { max-width: 12ch; margin-bottom: 18px; font-size: clamp(3rem, 5.5vw, 5.8rem); line-height: 0.98; }
.public-home-hero .public-home-lede { max-width: 650px; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.65; }
.public-home-actions { margin-top: 30px; }
.public-home-staff-link { margin-top: 20px; color: var(--ink-muted) !important; font-size: 0.78rem !important; }
.public-home-staff-link a { font-weight: 600; }

.public-home-visit-card {
  align-self: stretch;
  padding: clamp(22px, 2.5vw, 34px);
  background: rgba(250, 246, 242, 0.84);
  border: 1px solid rgba(217, 207, 197, 0.84);
  border-radius: var(--radius-lg);
}

.public-home-visit-card ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.public-home-visit-card li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 19px 0; border-top: 1px solid var(--line); }
.public-home-visit-card li:first-child { border-top: 0; }
.public-home-visit-card li > span { color: var(--brand-deep); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; }
.public-home-visit-card strong { display: block; margin-bottom: 5px; font-size: 0.92rem; }
.public-home-visit-card li p { margin: 0; color: var(--ink-muted); font-size: 0.78rem; line-height: 1.55; }

.public-home-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.public-home-benefits article { min-height: 185px; padding: 26px; background: var(--panel); border: 1px solid rgba(225, 214, 204, 0.86); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.public-home-benefits h2 { margin-bottom: 12px; font-size: clamp(1.15rem, 1.6vw, 1.55rem); }
.public-home-benefits article > p:last-child { margin-bottom: 0; color: var(--ink-soft); font-size: 0.9rem; }

.public-home-closing { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px; background: rgba(255, 255, 255, 0.56); border: 1px solid rgba(225, 214, 204, 0.86); border-radius: var(--radius-lg); }
.public-home-closing h2 { margin-bottom: 0; font-size: clamp(1.45rem, 2.2vw, 2rem); }

.workspace-header,
.panel-header,
.hero-actions,
.inline-form,
.form-row,
.split,
.detail-shell,
.detail-grid,
.metrics-grid,
.forms-grid,
.appointment-grid,
.calendar-controls,
.calendar-filter,
.module-tabs,
.filter-bar,
.queue-review-form {
  display: flex;
  gap: 16px;
}

.workspace-header { justify-content: space-between; align-items: flex-end; margin-bottom: 24px; }
.workspace-header h1 { margin-bottom: 0; }
.eyebrow,
.step-kicker {
  margin: 0 0 7px;
  color: var(--brand-deep);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.panel-header { justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.panel-header h1,
.panel-header h2 { margin-bottom: 0; }
.hero-actions { align-items: center; flex-wrap: wrap; }

.button {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  gap: 7px;
  padding: 9px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(213, 201, 190, 0.9);
  border-radius: var(--control-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 2px 7px rgba(43, 31, 23, 0.035);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms var(--ease-out), transform 160ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

@media (hover: hover) {
  .button:hover { color: var(--ink); transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(43, 31, 23, 0.07); }
}

.button:active { transform: translateY(0) scale(0.985); }
.button.primary { color: var(--ink); background: var(--brand); border-color: rgba(239, 143, 0, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 3px 8px rgba(255, 159, 0, 0.12); }
.button.primary:hover { color: var(--ink); background: var(--brand-hover); }
.button.secondary { color: var(--ink); background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(14px); }
.button.compact { min-height: 34px; padding: 6px 10px; border-radius: var(--control-radius-compact); font-size: 0.74rem; }
.button.danger { color: #fff9f7; background: var(--danger); border-color: var(--danger); box-shadow: none; }
.button.danger:hover { color: #fff; background: #842d2d; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(155, 90, 0, 0.44);
  outline-offset: 3px;
}

button:disabled { opacity: 0.52; cursor: not-allowed; transform: none; }

.metrics-grid { flex-wrap: wrap; margin-bottom: 24px; }
.metric-card { position: relative; min-width: 170px; flex: 1; overflow: hidden; padding: 22px; border-radius: 22px; }
.metric-card::after { position: absolute; inset: auto 18px 0; height: 2px; background: linear-gradient(90deg, var(--brand), transparent); content: ""; opacity: 0.72; }
.metric-value { margin-bottom: 5px; font-size: clamp(1.65rem, 2.3vw, 2.35rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; }
.metric-value.small { font-size: 1.2rem; }
.metric-label,
.intro-text,
.timeline-date,
.timeline-item p,
.meta-list dt,
.profile-meta dt { color: var(--ink-soft); }

.split,
.detail-shell { align-items: flex-start; }
.split > *:first-child { flex: 1.8; min-width: 0; }
.form-panel { width: min(410px, 100%); flex: 0 0 auto; }
.three-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.table-scroll { width: 100%; overflow-x: auto; border-radius: var(--radius-sm); scrollbar-width: thin; }
.data-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.data-table th,
.data-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table th { color: var(--ink-muted); background: rgba(250, 246, 242, 0.96); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.data-table th:first-child { border-radius: 12px 0 0 0; }
.data-table th:last-child { border-radius: 0 12px 0 0; }
.data-table tbody tr { transition: background 140ms var(--ease-out); }
.data-table tbody tr:hover { background: rgba(255, 159, 0, 0.055); }
.data-table tbody tr:last-child td { border-bottom: 0; }

.stack-form,
.profile-meta,
.timeline,
.meta-list { display: grid; gap: 14px; }
.stack-form label,
.calendar-filter label,
.filter-bar label,
.queue-review-form label { display: grid; gap: 7px; color: var(--ink); font-size: 0.8rem; font-weight: 600; }
.checkbox-row { display: flex !important; align-items: center; gap: 10px; min-height: 44px; }
.checkbox-row input { width: auto; }
.form-row > label { flex: 1; }

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;
  color: var(--ink);
  background: rgba(255, 253, 249, 0.96);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  box-shadow: inset 0 1px 2px rgba(33, 26, 21, 0.025);
  font: inherit;
  font-size: 0.88rem;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), background 140ms var(--ease-out);
}

input:hover,
select:hover,
textarea:hover { border-color: #c9b9aa; }
input:focus,
select:focus,
textarea:focus { background: #fffefa; border-color: var(--brand-deep); box-shadow: 0 0 0 4px rgba(255, 159, 0, 0.11); }
textarea { min-height: 100px; resize: vertical; }
::placeholder { color: #756b63; opacity: 1; }

/* Typeahead combobox (booking service + client pickers) */
.combobox { position: relative; }
.combobox-list {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 60;
  margin: 0; padding: 5px; list-style: none;
  max-height: 268px; overflow-y: auto;
  background: #fffefa; border: 1px solid var(--line-strong); border-radius: 13px;
  box-shadow: var(--shadow-md); display: grid; gap: 2px;
}
.combobox-list[hidden] { display: none; }
.combobox-option {
  padding: 9px 11px; border-radius: 9px; cursor: pointer;
  color: var(--ink); font-size: 0.85rem; font-weight: 600; line-height: 1.25;
}
.combobox-option:hover,
.combobox-option.is-active { background: rgba(255, 159, 0, 0.1); }
.combobox-option[aria-selected="true"] { background: rgba(255, 159, 0, 0.16); }
.combobox-empty { padding: 10px 11px; color: var(--ink-muted); font-size: 0.8rem; }

/* Inline validation */
.field-invalid,
input.field-invalid,
select.field-invalid,
textarea.field-invalid { border-color: #d64545; box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.13); }
.field-help.is-error { color: #c0392b; font-weight: 700; }

/* Progressive custom select: the native control remains in the form while the
   visible list follows the same Amber control language on every screen. */
.select-shell { position: relative; width: 100%; min-width: 0; }
.select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  inset: auto auto 0 0;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.select-trigger {
  appearance: none;
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 42px 10px 13px;
  color: var(--ink);
  background: rgba(255, 253, 249, 0.96);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  box-shadow: inset 0 1px 2px rgba(33, 26, 21, 0.025);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), background 140ms var(--ease-out);
}
.select-trigger::after {
  position: absolute;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: translateY(-2px) rotate(45deg);
  content: "";
  transition: transform 160ms var(--ease-out);
}
.select-trigger:hover { border-color: #c9b9aa; }
.select-trigger:focus-visible,
.select-shell.is-open .select-trigger { outline: none; background: #fffefa; border-color: var(--brand-deep); box-shadow: 0 0 0 4px rgba(255, 159, 0, 0.11); }
.select-shell.is-invalid .select-trigger { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(163, 58, 57, 0.1); }
.select-shell.is-open .select-trigger::after { transform: translateY(2px) rotate(225deg); }
.select-trigger:disabled { opacity: 0.52; cursor: not-allowed; }
.select-menu {
  position: absolute;
  z-index: 120;
  inset: calc(100% + 7px) 0 auto;
  max-height: 280px;
  display: grid;
  gap: 3px;
  padding: 7px;
  overflow-y: auto;
  color: var(--ink);
  background: #fffdf9;
  border: 1px solid rgba(201, 185, 170, 0.96);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(48, 34, 24, 0.16), 0 3px 9px rgba(48, 34, 24, 0.07);
  scrollbar-width: thin;
}
.select-menu[hidden] { display: none; }
.select-option {
  appearance: none;
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 34px 8px 10px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 9px;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.select-option:hover,
.select-option:focus-visible { outline: none; background: var(--brand-soft); }
.select-option[aria-selected="true"] { position: relative; background: #fff0d6; font-weight: 600; }
.select-option[aria-selected="true"]::after { position: absolute; right: 12px; color: var(--brand-deep); content: "✓"; }
.select-option:disabled { opacity: 0.45; cursor: not-allowed; }
.select-option[data-option-color]::before { width: 12px; height: 12px; flex: 0 0 auto; background: var(--option-color, var(--brand)); border: 1px solid rgba(43, 31, 23, 0.12); border-radius: 50%; content: ""; }
.select-option[data-option-color="amber"] { --option-color: #ffad24; }
.select-option[data-option-color="forest"] { --option-color: #4d8b73; }
.select-option[data-option-color="blue"] { --option-color: #659bc5; }
.select-option[data-option-color="violet"] { --option-color: #9a77bd; }
.select-option[data-option-color="rose"] { --option-color: #ce6875; }
.select-option[data-option-color="slate"] { --option-color: #71808d; }

.profile-card { position: sticky; top: 24px; width: 340px; }
.avatar { width: 66px; height: 66px; display: grid; place-items: center; margin-bottom: 15px; color: var(--ink); background: linear-gradient(145deg, #ffc86c, var(--brand)); border: 4px solid rgba(255, 255, 255, 0.72); border-radius: 50%; box-shadow: 0 10px 22px rgba(255, 159, 0, 0.18); font-size: 1.25rem; font-weight: 600; }
.avatar.small { width: 31px; height: 31px; margin: 0; border-width: 2px; font-size: 0.78rem; }
.profile-meta,
.meta-list { grid-template-columns: 130px 1fr; margin: 18px 0; }
.profile-meta dd,
.meta-list dd { margin: 0; overflow-wrap: anywhere; }

.timeline-item { position: relative; padding: 16px 18px 16px 20px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: 15px; }
.timeline-item::before { position: absolute; inset: 13px auto 13px 0; width: 3px; background: var(--line-strong); border-radius: 0 3px 3px 0; content: ""; }
.timeline-item h3 { margin: 0 0 6px; }
.timeline-item p { margin-bottom: 0; }
.message-outbound { background: #fff8ed; }
.message-outbound::before { background: var(--brand); }
.message-inbound { background: #f2f8f5; }
.message-inbound::before { background: var(--forest); }

.appointment-grid,
.forms-grid { flex-direction: column; }
.appointment-card,
.form-card { padding: 18px; border-radius: 17px; box-shadow: var(--shadow-sm); }
.appointment-time { margin-bottom: 8px; color: var(--ink-soft); }

.status-pill,
.chip { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 10px; color: #274d40; background: var(--forest-soft); border: 1px solid rgba(53, 101, 84, 0.14); border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.01em; }
.status-pill.warning { color: #73480e; background: var(--warning-soft); }
.status-pill.danger { color: #842d2d; background: var(--danger-soft); }
.status-pill.status-queued,
.status-pill.status-sending,
.status-pill.status-requires-payment,
.status-pill.status-pending { color: #73480e; background: var(--warning-soft); }
.status-pill.status-failed,
.status-pill.status-unknown,
.status-pill.status-payment-link-expired,
.status-pill.status-canceled,
.status-pill.status-no-show { color: #842d2d; background: var(--danger-soft); }
.status-pill.status-sent,
.status-pill.status-delivered,
.status-pill.status-paid,
.status-pill.status-completed { color: #274d40; background: var(--forest-soft); }
.message-delivery { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.status-banner { padding: 13px 15px; color: #274d40; background: var(--forest-soft); border: 1px solid #bfd5ca; border-radius: 13px; }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.compact-form { min-width: 210px; gap: 8px; }
.compact-form input,
.compact-form select { min-height: 40px; padding: 7px 10px; }
details > summary.button { list-style: none; cursor: pointer; }
details > summary.button::-webkit-details-marker { display: none; }
details[open] > .compact-form { margin-top: 9px; padding: 14px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: 15px; }

.form-card-top,
.action-cell { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.action-cell { justify-content: flex-start; }
.action-cell form { margin: 0; }
.detail-grid { flex-wrap: wrap; margin-top: 10px; }
.detail-grid > * { flex: 1; min-width: 220px; }

.auth-page { display: grid; place-items: center; min-height: calc(100vh - 96px); padding: 28px 0; }
.auth-panel { width: min(100%, 540px); }
.page-login .auth-panel { padding: clamp(28px, 4vw, 48px); background: rgba(255, 255, 255, 0.77); border-color: var(--glass-line); box-shadow: var(--shadow-glass); backdrop-filter: blur(24px) saturate(135%); }
.note-box,
.knowledge-card { margin-top: 17px; padding: 16px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: 15px; }
.note-box p:last-child,
.knowledge-card p:last-child { margin-bottom: 0; }
.error-banner { padding: 12px 14px; color: #842d2d; background: var(--danger-soft); border: 1px solid #e3bbb6; border-radius: 13px; }
.top-gap { margin-top: 22px; }
.timeline-date { font-size: 0.72rem; }

.module-tabs { margin: -4px 0 22px; padding: 4px; overflow-x: auto; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 8px; box-shadow: 0 3px 10px rgba(35, 27, 20, 0.04); backdrop-filter: blur(14px); }
.module-tabs a { min-height: 38px; display: grid; place-items: center; padding: 7px 13px; white-space: nowrap; color: var(--ink-soft); border-radius: var(--control-radius-compact); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.module-tabs a:hover,
.module-tabs a.active { color: var(--ink); background: rgba(255, 255, 255, 0.86); }

.filter-bar,
.queue-review-form { align-items: end; flex-wrap: wrap; margin-bottom: 18px; padding: 15px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: 16px; }
.filter-bar label,
.queue-review-form label { min-width: 160px; flex: 1; }

.page-calendar .page-shell { height: 100dvh; min-height: 0; padding: 16px 16px 16px 0; overflow: hidden; }
.calendar-workspace { min-width: 0; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; background: rgba(255, 253, 249, 0.72); border: 1px solid rgba(255, 255, 255, 0.86); border-radius: 28px; box-shadow: var(--shadow-glass); backdrop-filter: blur(22px) saturate(128%); }
.calendar-rail { min-width: 0; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; padding: 18px 14px; color: #fff8ed; background: linear-gradient(160deg, rgba(34, 31, 28, 0.96), rgba(27, 26, 24, 0.92)); border-right: 1px solid rgba(255, 255, 255, 0.1); scrollbar-width: thin; }
.sidebar-tools { display: grid; gap: 10px; }
.page-calendar .topbar { gap: 10px; padding: 10px; }
.page-calendar .brand { min-height: 58px; gap: 8px; padding: 5px 10px; border-radius: 16px; }
.page-calendar .brand img { width: 94px; height: 52px; }
.page-calendar .brand span { padding-left: 8px; font-size: 0.62rem; }
.page-calendar .nav-stage { flex: 1 1 auto; min-height: 128px; }
.page-calendar .nav-links { gap: 10px; }
.page-calendar .nav-section { gap: 3px; }
.page-calendar .nav-section > p { margin-bottom: 0; font-size: 0.58rem; }
.page-calendar .nav-section a { min-height: 34px; padding: 6px 10px; border-radius: 10px; font-size: 0.75rem; }
.page-calendar .auth-chip { padding: 9px; border-radius: 14px; }
.page-calendar .auth-chip form { display: block; }
.workspace-location-switcher { position: relative; }
.workspace-location-switcher > summary { min-height: 42px; display: grid; grid-template-columns: 29px minmax(0, 1fr) 10px; align-items: center; gap: 8px; padding: 6px 8px; color: #fff8ed; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 12px; cursor: pointer; list-style: none; }
.workspace-location-switcher > summary::-webkit-details-marker { display: none; }
.workspace-location-switcher > summary > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.workspace-location-switcher > summary small { color: rgba(255, 248, 237, 0.46); font-size: 0.53rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.workspace-location-switcher > summary strong { overflow: hidden; font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-location-switcher > summary i { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.workspace-location-mark { width: 28px; height: 28px; display: grid; place-items: center; color: var(--ink); background: var(--brand); border-radius: 9px; font-size: 0.7rem; font-weight: 800; }
.workspace-location-menu { position: absolute; z-index: 80; top: calc(100% + 7px); left: 0; width: 100%; display: grid; gap: 8px; padding: 10px; color: var(--ink); background: rgba(255, 253, 249, 0.98); border: 1px solid var(--glass-line); border-radius: 14px; box-shadow: 0 20px 45px rgba(18, 15, 12, 0.3); backdrop-filter: blur(22px); }
.workspace-location-menu header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1px solid var(--line); font-size: 0.72rem; }
.workspace-location-menu header a { color: var(--brand-deep); font-size: 0.66rem; }
.workspace-location-menu > div { display: grid; gap: 3px; }
.workspace-location-link { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px; color: var(--ink); border-radius: 8px; font-size: 0.66rem; text-decoration: none; }
.workspace-location-link:hover, .workspace-location-link.is-active { color: var(--ink); background: var(--brand-soft); }
.workspace-location-link small { color: var(--brand-deep); font-size: 0.55rem; }
.workspace-location-add { min-height: 34px; display: grid; place-items: center; color: var(--ink); border: 1px dashed var(--line-strong); border-radius: 8px; font-size: 0.65rem; font-weight: 700; text-decoration: none; }
.sidebar-tools .mini-calendar { padding: 0 3px; }
.sidebar-tools .mini-calendar header { min-height: 28px; grid-template-columns: 28px 1fr 28px; }
.sidebar-tools .mini-calendar header a { min-height: 28px; }
.sidebar-tools .mini-calendar-day { min-height: 23px; font-size: 0.6rem; }
.sidebar-tools .calendar-rail-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sidebar-tools .calendar-quick-action { min-height: 54px; grid-template-columns: 28px minmax(0, 1fr); column-gap: 7px; padding: 8px; border-radius: 12px; }
.sidebar-tools .calendar-quick-action > span { width: 27px; height: 27px; }
.sidebar-tools .calendar-quick-action strong { font-size: 0.62rem; }
.sidebar-tools .calendar-quick-action small { display: none; }
.sidebar-tools .calendar-day-summary { padding: 9px 10px; border-radius: 11px; }
.mini-calendar { display: grid; gap: 7px; }
.mini-calendar header { min-height: 34px; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 4px; }
.mini-calendar header strong { text-align: center; font-size: 0.8rem; }
.mini-calendar header a { min-height: 34px; display: grid; place-items: center; color: #fff8ed; border-radius: 10px; text-decoration: none; }
.mini-calendar header a:hover { background: rgba(255, 255, 255, 0.1); }
.mini-calendar-weekdays,
.mini-calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mini-calendar-weekdays span { color: rgba(255, 248, 237, 0.48); font-size: 0.58rem; font-weight: 700; text-align: center; }
.mini-calendar-day { position: relative; min-height: 27px; display: grid; place-items: center; color: rgba(255, 248, 237, 0.76); border: 1px solid transparent; border-radius: 9px; font-size: 0.66rem; font-variant-numeric: tabular-nums; text-decoration: none; }
.mini-calendar-day.is-outside { color: rgba(255, 248, 237, 0.28); }
.mini-calendar-day.has-activity::after { position: absolute; bottom: 2px; width: 3px; height: 3px; background: var(--brand); border-radius: 50%; content: ""; }
.mini-calendar-day.is-today { border-color: rgba(255, 159, 0, 0.62); }
.mini-calendar-day.is-selected { color: var(--ink); background: var(--brand); box-shadow: 0 7px 18px rgba(255, 159, 0, 0.24); }
.calendar-rail-actions { display: grid; gap: 8px; }
.calendar-quick-action { min-height: 58px; display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; padding: 10px; color: #fff8ed; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; text-align: left; cursor: pointer; }
.calendar-quick-action > span { grid-row: 1 / 3; width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink); background: rgba(255, 255, 255, 0.86); border-radius: 10px; font-size: 1rem; }
.calendar-quick-action strong { font-size: 0.72rem; }
.calendar-quick-action small { color: rgba(255, 248, 237, 0.52); font-size: 0.6rem; }
.calendar-quick-action.is-primary { color: var(--ink); background: var(--brand); border-color: rgba(255, 204, 118, 0.9); }
.calendar-quick-action.is-primary small { color: rgba(35, 28, 22, 0.64); }
.calendar-day-summary { display: grid; gap: 4px; padding: 13px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 14px; }
.calendar-day-summary .eyebrow { color: rgba(255, 248, 237, 0.45); }
.calendar-day-summary strong { font-size: 0.82rem; }
.calendar-day-summary span { color: rgba(255, 248, 237, 0.52); font-size: 0.64rem; }
.calendar-legend { display: grid; gap: 7px; margin-top: auto; padding: 0 4px; }
.calendar-legend span { display: flex; align-items: center; gap: 7px; color: rgba(255, 248, 237, 0.58); font-size: 0.62rem; }
.calendar-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--brand); }
.calendar-legend .legend-completed { background: var(--forest); }
.calendar-legend .legend-block { background: #8d8580; }
.calendar-read-only { margin: 0; color: rgba(255, 248, 237, 0.65); font-size: 0.72rem; }
.calendar-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.calendar-commandbar { position: relative; z-index: 12; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 11px 16px; background: rgba(255, 253, 249, 0.78); border-bottom: 1px solid var(--line); backdrop-filter: blur(22px) saturate(135%); }
.calendar-date-navigation { min-width: 0; display: flex; align-items: center; gap: 7px; }
.calendar-date-navigation > a { min-width: 38px; min-height: 38px; display: grid; place-items: center; color: var(--ink); background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: var(--control-radius); text-decoration: none; }
.calendar-date-navigation > a.calendar-today { width: auto; padding: 0 12px; font-size: 0.7rem; font-weight: 700; }
.calendar-date-navigation > div { min-width: 0; margin-left: 5px; }
.calendar-date-navigation .eyebrow { margin-bottom: 2px; }
.calendar-date-navigation h1 { margin: 0; overflow: hidden; font-family: var(--font-body); font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.calendar-toolbar-actions { display: flex; align-items: center; gap: 8px; }
.calendar-provider-chip { max-width: 180px; overflow: hidden; padding: 8px 11px; color: var(--ink-soft); background: var(--panel-muted); border: 1px solid var(--line); border-radius: 12px; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.calendar-view-switch { display: flex; padding: 3px; background: rgba(255, 255, 255, 0.74); border: 1px solid var(--line); border-radius: 8px; }
.calendar-view-switch a { min-height: 32px; display: grid; place-items: center; padding: 0 12px; color: var(--ink-soft); border-radius: var(--control-radius-compact); font-size: 0.7rem; font-weight: 700; text-decoration: none; }
.calendar-view-switch a.is-active { color: #fff9f0; background: var(--ink); box-shadow: var(--shadow-sm); }
.calendar-filter-popover { position: relative; }
.calendar-filter-popover summary { min-height: 38px; display: grid; place-items: center; padding: 0 12px; color: var(--ink); background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: var(--control-radius); font-size: 0.7rem; font-weight: 700; cursor: pointer; list-style: none; }
.calendar-filter-popover summary::-webkit-details-marker { display: none; }
.calendar-filter-popover form { position: absolute; top: calc(100% + 9px); right: 0; width: min(320px, calc(100vw - 32px)); display: grid; gap: 10px; padding: 15px; background: rgba(255, 253, 249, 0.96); border: 1px solid var(--glass-line); border-radius: 17px; box-shadow: 0 20px 50px rgba(35, 27, 20, 0.2); backdrop-filter: blur(24px); }
.calendar-filter-popover label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 0.68rem; font-weight: 700; }
.calendar-instruction { margin: 0; padding: 8px 16px; color: var(--ink-muted); background: rgba(255, 249, 241, 0.68); border-bottom: 1px solid var(--line); font-size: 0.68rem; }
.calendar-main > .status-banner { margin: 8px 12px 0; }
.calendar-board-wrap { min-width: 0; min-height: 0; flex: 1; overflow: hidden; }
.calendar-board { width: 100%; height: 100%; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(276px, 1fr); grid-template-columns: 64px; align-items: start; gap: 1px; overflow: auto; background: var(--line); scrollbar-color: rgba(107, 89, 76, 0.4) transparent; }
.calendar-board-week { grid-auto-columns: minmax(190px, 1fr); }
.calendar-time-rail { position: sticky; left: 0; z-index: 8; width: 64px; background: rgba(250, 246, 242, 0.98); }
.calendar-time-rail-header { position: sticky; top: 0; z-index: 9; height: 64px; background: rgba(243, 236, 229, 0.98); border-bottom: 1px solid var(--line); }
.calendar-time-labels { position: relative; min-height: 720px; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 14px, rgba(139, 119, 102, 0.12) 15px, transparent 16px, transparent 59px, var(--line-strong) 60px); }
.calendar-time-labels span { position: absolute; top: 0; right: 8px; color: var(--ink-muted); font-size: 0.64rem; font-weight: 700; font-variant-numeric: tabular-nums; transform: translateY(-50%); }
.calendar-time-labels span:first-child { transform: translateY(4px); }
.provider-lane { min-width: 0; background: rgba(255, 253, 249, 0.9); }
.provider-lane > header { position: sticky; top: 0; z-index: 6; min-height: 64px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: rgba(248, 243, 236, 0.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.provider-lane > header > span:last-child { min-width: 0; display: grid; gap: 2px; }
.provider-lane > header strong { overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.provider-lane > header small { overflow: hidden; color: var(--ink-muted); font-size: 0.59rem; text-overflow: ellipsis; white-space: nowrap; }
.provider-schedule { position: relative; min-height: 720px; background-color: rgba(255, 253, 249, 0.92); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 14px, rgba(139, 119, 102, 0.12) 15px, transparent 16px, transparent 59px, var(--line-strong) 60px); }
.provider-schedule[role="button"] { cursor: crosshair; }
.provider-schedule[role="button"]:focus-visible { outline: 3px solid rgba(155, 90, 0, 0.46); outline-offset: -3px; }
.calendar-slot-preview { position: absolute; right: 0; left: 0; z-index: 1; height: 15px; pointer-events: none; background: rgba(255, 159, 0, 0.13); border-top: 2px solid var(--brand); }
.calendar-slot-preview::after { position: absolute; right: 8px; top: -14px; padding: 3px 8px; color: var(--brand-deep); background: var(--brand-soft); border: 1px solid rgba(255, 159, 0, 0.24); border-radius: 999px; content: "New slot"; font-size: 0.61rem; font-weight: 700; }
.calendar-now-line { position: absolute; right: 0; left: 0; z-index: 4; height: 2px; pointer-events: none; background: #dc5e42; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.54); }
.calendar-now-line b { position: absolute; left: 5px; top: -8px; padding: 1px 5px; color: #fff9f2; background: #dc5e42; border-radius: 5px; font-size: 0.52rem; }
.calendar-event,
.calendar-block { position: absolute; top: 0; right: 5px; left: 5px; z-index: 3; min-height: 30px; height: 30px; display: grid; align-content: start; gap: 1px; padding: 6px 8px 6px 10px; overflow: hidden; color: var(--ink); background: rgba(255, 227, 181, 0.86); border: 1px solid rgba(255, 159, 0, 0.24); border-top: 4px solid var(--brand); border-radius: 8px; box-shadow: 0 4px 12px rgba(67, 44, 32, 0.08); text-decoration: none; backdrop-filter: blur(8px); }
.calendar-event:hover { color: var(--ink); background: rgba(255, 217, 153, 0.94); box-shadow: 0 9px 22px rgba(67, 44, 32, 0.14); }
.calendar-event:focus-visible { outline: 3px solid rgba(155, 90, 0, 0.48); outline-offset: 2px; }
.calendar-event time,
.calendar-block time { color: var(--brand-deep); font-size: 0.61rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.calendar-event strong,
.calendar-block strong { overflow: hidden; font-size: 0.7rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event span,
.calendar-event small,
.calendar-block span { overflow: hidden; color: var(--ink-soft); font-size: 0.59rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event.is-compact { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 7px; padding-top: 4px; border-top-width: 3px; }
.calendar-event.is-compact strong { grid-column: 2; grid-row: 1; }
.calendar-event.is-compact span,
.calendar-event.is-compact small { display: none; }
.calendar-event.status-completed { background: rgba(220, 239, 224, 0.9); border-color: rgba(56, 107, 71, 0.28); border-top-color: var(--forest); }
.calendar-event.status-canceled,
.calendar-event.status-no-show { background: rgba(248, 226, 222, 0.9); border-color: rgba(154, 59, 48, 0.26); border-top-color: var(--danger); }
.calendar-block { z-index: 2; color: #4f4a46; background: rgba(223, 219, 215, 0.86); border-color: rgba(103, 96, 91, 0.2); border-top-color: #8d8580; box-shadow: none; }
.calendar-block time { color: #6c635d; }
.calendar-empty { min-width: 280px; min-height: 180px; display: grid; place-items: center; margin: 20px; padding: 24px; color: var(--ink-muted); background: rgba(255, 255, 255, 0.5); border: 1px dashed var(--line-strong); border-radius: 14px; }
.calendar-create-menu { position: fixed; z-index: 95; width: 242px; display: grid; gap: 5px; padding: 7px; color: var(--ink); background: rgba(255, 253, 249, 0.96); border: 1px solid var(--glass-line); border-radius: 16px; box-shadow: 0 20px 55px rgba(35, 27, 20, 0.24); backdrop-filter: blur(24px) saturate(135%); }
.calendar-create-menu button { min-height: 54px; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: var(--control-radius); text-align: left; cursor: pointer; }
.calendar-create-menu button:hover,
.calendar-create-menu button:focus-visible { background: var(--brand-soft); border-color: rgba(255, 159, 0, 0.34); outline: none; }
.calendar-create-menu button > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; background: var(--panel-muted); border-radius: 10px; font-size: 1rem; }
.calendar-create-menu button > span:last-child { min-width: 0; display: grid; gap: 2px; }
.calendar-create-menu strong { font-size: 0.72rem; }
.calendar-create-menu small { color: var(--ink-muted); font-size: 0.6rem; }

.appointment-drawer {
  inset: 0 0 0 auto;
  width: min(880px, calc(100vw - 296px));
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  overflow: visible;
  color: var(--ink);
  background: transparent;
  border: 0;
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out), overlay 320ms allow-discrete, display 320ms allow-discrete;
}
.appointment-drawer[open] { opacity: 1; transform: translateX(0); }
.appointment-drawer::backdrop { background: rgba(28, 24, 20, 0.28); backdrop-filter: blur(7px); }
.appointment-drawer-shell { height: 100%; overflow-y: auto; padding: 20px; background: rgba(255, 253, 249, 0.9); border-left: 1px solid rgba(255, 255, 255, 0.84); box-shadow: -24px 0 70px rgba(35, 27, 20, 0.18), inset 1px 0 0 rgba(255, 255, 255, 0.72); backdrop-filter: blur(28px) saturate(138%); scrollbar-width: thin; }
.appointment-drawer-header { position: sticky; z-index: 6; top: -20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin: -20px -20px 14px; padding: 18px 20px; background: rgba(255, 253, 249, 0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(24px); }
.appointment-drawer-header h2 { margin-bottom: 7px; font-size: 1.55rem; }
.appointment-slot-summary { margin: 0; color: var(--ink-soft); font-size: 0.83rem; }
.drawer-close { width: 40px; min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0; color: var(--ink); background: rgba(255, 255, 255, 0.68); border: 1px solid var(--line-strong); border-radius: 9px; font: inherit; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.appointment-record-drawer { width: min(720px, calc(100vw - 296px)); }
.appointment-record-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; padding-bottom: 0; }
.appointment-record-header { position: relative; top: auto; margin-bottom: 0; }
.appointment-record-header-actions { display: flex; align-items: center; gap: 8px; }
.appointment-record-content { min-height: 0; overflow-y: auto; padding: 20px; scrollbar-width: thin; }
.appointment-record-content > .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.appointment-record-content > .split > .panel { padding: 20px; border-radius: 16px; box-shadow: none; }
.appointment-record-content .support-copy[href^="/calendar"] { display: none; }
.appointment-record-content h1 { margin: 0 0 16px; font-size: clamp(1.8rem, 4vw, 2.7rem); }
.appointment-record-content .metric-card { min-width: 150px; padding: 16px; border-radius: 14px; }
.appointment-record-content .metrics-grid { gap: 10px; margin-bottom: 16px; }
.appointment-record-content .timeline-item { border-radius: 11px; }
.appointment-record-content textarea { min-height: 92px; }
.appointment-workspace { width: min(100%, 760px); display: grid; gap: 14px; margin: 0 auto; padding: 20px; background: rgba(255, 253, 249, 0.82); border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 20px; box-shadow: var(--shadow-md); backdrop-filter: blur(20px); }
.appointment-workspace-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.appointment-workspace-heading .appointment-back { grid-column: 1 / -1; width: max-content; color: var(--brand-deep); font-size: 0.7rem; font-weight: 700; text-decoration: none; }
.appointment-workspace-heading h1 { margin: 0 0 3px; font-family: var(--font-body); font-size: clamp(1.35rem, 3vw, 1.85rem); }
.appointment-workspace-heading p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 0.72rem; }
.appointment-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: 10px; }
.appointment-tabs button { min-height: 36px; padding: 6px 10px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 7px; font: inherit; font-size: 0.7rem; font-weight: 700; cursor: pointer; }
.appointment-tabs button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.62); }
.appointment-tabs button.is-active { color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.appointment-panel { display: grid; gap: 14px; }
.appointment-panel[hidden] { display: none; }
.appointment-status-strip { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; color: #fff8ed; background: linear-gradient(135deg, #2d2925, #1f1d1a); border-radius: 13px; }
.appointment-status-strip > div:first-child { display: grid; gap: 1px; }
.appointment-status-strip small { color: rgba(255, 248, 237, 0.54); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.1em; }
.appointment-status-strip strong { font-size: 0.88rem; }
.appointment-status-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.appointment-status-form { margin: 0; }
.appointment-status-select-form { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.appointment-status-select-form label { margin: 0; }
.appointment-status-select-form select,
.appointment-status-select-form input { min-height: 34px; margin: 0; padding: 6px 9px; color: var(--ink); background: #fffdf8; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 7px; font: inherit; font-size: 0.64rem; }
.appointment-status-select-form input { width: min(230px, 32vw); }
.appointment-status-action { min-height: 34px; padding: 6px 10px; color: var(--ink); background: var(--brand); border: 1px solid rgba(255, 217, 153, 0.75); border-radius: 7px; font: inherit; font-size: 0.64rem; font-weight: 750; cursor: pointer; }
.appointment-status-action.status-no-show, .appointment-status-action.status-canceled { color: #fff7f3; background: rgba(154, 59, 48, 0.82); border-color: rgba(255, 255, 255, 0.18); }
.appointment-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.appointment-facts article { min-width: 0; display: grid; align-content: start; gap: 4px; padding: 12px; background: rgba(255, 255, 255, 0.68); border: 1px solid var(--line); border-radius: 12px; }
.appointment-facts small, .appointment-client-card small, .appointment-note-card small { color: var(--ink-muted); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.appointment-facts strong { overflow: hidden; font-size: 0.76rem; text-overflow: ellipsis; }
.appointment-facts span { color: var(--ink-soft); font-size: 0.65rem; line-height: 1.4; }

@media (max-width: 700px) {
  .appointment-status-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .appointment-status-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .appointment-status-select-form {
    width: 100%;
    justify-content: flex-start;
  }

  .appointment-status-select-form input {
    width: 100%;
  }

  .appointment-facts {
    grid-template-columns: 1fr;
  }

  .appointment-client-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .appointment-client-card > .button {
    grid-column: 1 / -1;
    width: 100%;
  }
}
.appointment-note-card { padding: 12px 14px; background: var(--brand-soft); border-left: 3px solid var(--brand); border-radius: 9px; }
.appointment-note-card p { margin: 4px 0 0; font-size: 0.7rem; }
.appointment-panel > .stack-form { margin-top: 0; padding: 12px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: 12px; }
.appointment-panel > .stack-form textarea { min-height: 72px; }
.appointment-client-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px; background: rgba(255, 255, 255, 0.68); border: 1px solid var(--line); border-radius: 13px; }
.appointment-client-avatar { width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink); background: var(--brand); border-radius: 14px; font-weight: 800; }
.appointment-client-card h2 { margin: 1px 0 4px; font-family: var(--font-body); font-size: 1rem; }
.appointment-client-card p { margin: 0; color: var(--ink-soft); font-size: 0.68rem; }
.appointment-client-actions { display: flex; gap: 8px; }
.appointment-history-group { padding: 0 12px 12px; background: rgba(255, 255, 255, 0.58); border: 1px solid var(--line); border-radius: 12px; }
.appointment-history-group summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); font-size: 0.72rem; font-weight: 750; cursor: pointer; }
.appointment-history-group summary span { min-width: 25px; display: grid; place-items: center; padding: 3px 6px; color: var(--brand-deep); background: var(--brand-soft); border-radius: 999px; font-size: 0.58rem; }
.appointment-history-group .timeline { padding-top: 4px; }
.appointment-empty-state { min-height: 160px; display: grid; place-items: center; align-content: center; gap: 5px; color: var(--ink-soft); text-align: center; }
.appointment-empty-state strong { color: var(--ink); font-size: 0.86rem; }
.appointment-empty-state span { font-size: 0.68rem; }
.appointment-more-grid { display: grid; gap: 10px; }
.appointment-more-grid > *, .appointment-more-grid .top-gap { margin-top: 0; }
.appointment-record-content .appointment-workspace { width: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.appointment-record-content .appointment-workspace-heading { padding-top: 0; }
.appointment-record-content .appointment-back { display: none; }
.drawer-loading,
.drawer-error { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 28px; color: var(--ink-muted); text-align: center; }
.drawer-error strong { color: var(--ink); font-size: 1rem; }
.drawer-error .button { margin-top: 8px; }
.appointment-form { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.appointment-status-switch { display: flex; gap: 7px; padding: 0; border: 0; }
.appointment-status-switch label { cursor: pointer; }
.appointment-status-switch input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.appointment-status-switch span { min-height: 36px; display: grid; place-items: center; padding: 0 12px; color: var(--ink-soft); background: var(--panel-muted); border: 1px solid var(--line); border-radius: var(--control-radius); font-size: 0.68rem; font-weight: 700; }
.appointment-status-switch input:checked + span { color: #fff9f0; background: var(--ink); border-color: var(--ink); }
.appointment-status-switch input:focus-visible + span { outline: 3px solid rgba(155, 90, 0, 0.42); outline-offset: 2px; }
.appointment-form-layout { display: grid; grid-template-columns: minmax(210px, 0.88fr) minmax(250px, 1.1fr) minmax(220px, 1fr); gap: 10px; align-items: start; }
.booking-pane { min-width: 0; display: grid; gap: 13px; padding: 14px; background: rgba(255, 255, 255, 0.54); border: 1px solid var(--line); border-radius: 17px; }
.booking-pane > header { display: grid; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.booking-pane > header .eyebrow { margin: 0; }
.booking-pane > header h3 { margin: 0; font-family: var(--font-body); font-size: 0.93rem; }
.booking-pane label { display: grid; gap: 6px; color: var(--ink); font-size: 0.7rem; font-weight: 700; }
.booking-schedule-pane .form-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.booking-pane .field-help { overflow-wrap: anywhere; }
.service-choice-grid { max-height: calc(100dvh - 310px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; overflow-y: auto; padding-right: 2px; }
.service-choice { min-height: 84px; display: grid; align-content: start; gap: 4px; padding: 10px; color: var(--ink); background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: 12px; text-align: left; cursor: pointer; }
.service-choice:hover,
.service-choice.is-selected { background: var(--brand-soft); border-color: rgba(255, 159, 0, 0.48); }
.service-choice strong { font-size: 0.68rem; line-height: 1.2; }
.service-choice span { color: var(--ink-muted); font-size: 0.57rem; line-height: 1.3; }
.service-choice b { color: var(--brand-deep); font-size: 0.63rem; }
.availability-block-drawer { width: min(480px, calc(100vw - 296px)); }
.client-mode-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 5px; background: rgba(238, 231, 223, 0.76); border: 1px solid var(--line); border-radius: 15px; }
.client-mode-switch button { min-height: 42px; padding: 8px 10px; color: var(--ink-soft); background: transparent; border: 0; border-radius: 11px; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.client-mode-switch button.is-active { color: var(--ink); background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-sm); }
.client-existing-fields,
.client-new-fields { display: grid; gap: 12px; padding: 15px; background: rgba(250, 246, 242, 0.82); border: 1px solid var(--line); border-radius: 16px; }
.client-existing-fields label,
.client-new-fields label { display: grid; gap: 7px; color: var(--ink); font-size: 0.8rem; font-weight: 600; }
.field-help { display: block; margin: 2px 0 0; color: var(--ink-soft); font-size: 0.7rem; font-weight: 400; line-height: 1.45; }
.appointment-drawer-footer { position: sticky; bottom: -20px; z-index: 6; display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; margin: 8px -20px -20px; padding: 15px 20px max(17px, env(safe-area-inset-bottom)); background: rgba(255, 253, 249, 0.92); border-top: 1px solid var(--line); backdrop-filter: blur(24px); }

/* Calendar appointment workspace: one connected three-column workflow. */
.appointment-create-drawer,
.appointment-record-drawer { width: min(1220px, calc(100vw - 296px)); }
.appointment-create-shell { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; padding: 0; }
.appointment-create-shell .appointment-drawer-header { position: relative; top: auto; margin: 0; padding: 14px 18px; }
.appointment-create-shell .appointment-drawer-header h2 { margin: 0 0 2px; font-size: 1.15rem; }
.appointment-create-shell .appointment-slot-summary { font-size: 0.72rem; }
.appointment-create-shell .appointment-form { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 0; }
.appointment-create-shell .appointment-form-layout { min-height: 0; grid-template-columns: 228px minmax(360px, 1fr) 310px; gap: 0; align-items: stretch; overflow: hidden; }
.appointment-create-shell .booking-pane { align-content: start; overflow-y: auto; padding: 16px; background: rgba(255, 253, 249, 0.76); border: 0; border-right: 1px solid var(--line); border-radius: 0; scrollbar-width: thin; }
.appointment-create-shell .booking-service-pane { background: rgba(250, 247, 242, 0.9); }
.appointment-create-shell .booking-client-pane { border-right: 0; background: rgba(255, 255, 255, 0.72); }
.booking-time-row { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: 8px; }
.booking-buffer-summary { padding: 9px 10px; color: var(--brand-deep); background: var(--brand-soft); border: 1px solid rgba(255, 159, 0, 0.24); border-radius: 9px; font-size: 0.65rem; }
.appointment-service-switch { display: flex; gap: 4px; padding: 4px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: 9px; }
.appointment-service-switch span { min-height: 30px; display: grid; place-items: center; padding: 0 12px; color: var(--ink-soft); border-radius: 6px; font-size: 0.68rem; font-weight: 700; }
.appointment-service-switch span.is-active { color: var(--ink); background: #fff; box-shadow: var(--shadow-sm); }
.appointment-search-label input { min-height: 40px; }
.appointment-selected-service { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: #fff; border: 1px solid rgba(255, 159, 0, 0.38); border-radius: 12px; box-shadow: var(--shadow-sm); }
.appointment-selected-service > div { min-width: 0; display: grid; gap: 3px; }
.appointment-selected-service > div:last-child { grid-template-columns: auto 28px; align-items: center; }
.appointment-selected-service small { color: var(--ink-muted); font-size: 0.58rem; }
.appointment-selected-service strong { overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.appointment-selected-service b { color: var(--brand-deep); font-size: 0.7rem; }
.appointment-selected-service button { width: 28px; height: 28px; padding: 0; color: var(--ink-soft); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.appointment-selected-service button:hover { color: var(--ink); background: var(--panel-muted); }
.appointment-service-browser { display: grid; gap: 12px; }
.appointment-quick-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.appointment-service-card { min-height: 92px; display: grid; align-content: start; gap: 5px; padding: 10px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 11px; text-align: left; cursor: pointer; }
.appointment-service-card:hover { background: var(--brand-soft); border-color: rgba(255, 159, 0, 0.42); }
.appointment-service-card strong { font-size: 0.65rem; line-height: 1.25; }
.appointment-service-card span { color: var(--brand-deep); font-size: 0.66rem; font-weight: 750; }
.appointment-service-card small { color: var(--ink-muted); font-size: 0.58rem; }
.appointment-service-categories { display: grid; gap: 3px; }
.appointment-service-category { border-bottom: 1px solid var(--line); }
.appointment-service-category summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); font-size: 0.7rem; font-weight: 750; cursor: pointer; }
.appointment-service-category summary span { color: var(--ink-muted); font-size: 0.58rem; }
.appointment-service-category > div { display: grid; gap: 4px; padding: 0 0 8px; }
.appointment-service-category button { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; color: var(--ink); background: rgba(255, 255, 255, 0.66); border: 1px solid var(--line); border-radius: 8px; text-align: left; cursor: pointer; }
.appointment-service-category button:hover { background: var(--brand-soft); }
.appointment-service-category button span { font-size: 0.66rem; font-weight: 650; }
.appointment-service-category button small { color: var(--ink-muted); font-size: 0.58rem; }
.appointment-client-summary { display: grid; gap: 12px; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.appointment-client-summary > div:first-child { min-width: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; }
.appointment-client-summary .appointment-client-avatar { width: 38px; height: 38px; border-radius: 11px; font-size: 0.7rem; }
.appointment-client-summary strong { display: block; overflow: hidden; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.appointment-client-summary small { display: block; overflow-wrap: anywhere; color: var(--ink-soft); font-size: 0.61rem; }
.appointment-client-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.appointment-client-metrics span { display: grid; gap: 2px; padding: 7px; color: var(--ink-muted); background: var(--panel-muted); border-radius: 7px; font-size: 0.54rem; }
.appointment-client-metrics strong { color: var(--ink); font-size: 0.62rem; white-space: normal; }
.appointment-client-summary > p { margin: 0; padding: 8px; color: var(--ink-soft); background: var(--brand-soft); border-radius: 7px; font-size: 0.62rem; }
.appointment-recent-clients { display: grid; gap: 4px; }
.appointment-recent-clients h3 { margin: 4px 0; font-family: var(--font-body); font-size: 0.72rem; }
.appointment-recent-clients button { min-height: 42px; display: grid; gap: 2px; padding: 7px 9px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 8px; text-align: left; cursor: pointer; }
.appointment-recent-clients button:hover { background: var(--brand-soft); border-color: rgba(255, 159, 0, 0.24); }
.appointment-recent-clients strong { font-size: 0.66rem; }
.appointment-recent-clients span { color: var(--ink-muted); font-size: 0.58rem; }
.appointment-create-shell .appointment-drawer-footer { position: relative; bottom: auto; grid-template-columns: 1fr auto; align-items: center; margin: 0; padding: 11px 16px max(11px, env(safe-area-inset-bottom)); }
.appointment-create-shell .appointment-drawer-footer > div { display: flex; gap: 8px; }
.appointment-create-shell .appointment-drawer-footer > span { color: var(--ink-muted); font-size: 0.68rem; }
.combobox-option { display: grid; gap: 2px; }
.combobox-option strong { font-size: 0.72rem; }
.combobox-option small { color: var(--ink-muted); font-size: 0.6rem; font-weight: 500; }

.appointment-record-workspace { width: 100%; max-width: 1180px; gap: 0; padding: 0; overflow: hidden; }
.appointment-record-workspace > .appointment-workspace-heading { padding: 14px 16px; background: rgba(255, 253, 249, 0.82); }
.appointment-record-layout { min-height: 560px; display: grid; grid-template-columns: 224px minmax(360px, 1fr) 286px; }
.appointment-record-rail,
.appointment-record-main,
.appointment-record-client { min-width: 0; display: grid; align-content: start; gap: 12px; padding: 16px; border-right: 1px solid var(--line); }
.appointment-record-rail { background: rgba(243, 238, 232, 0.76); }
.appointment-record-main { background: rgba(255, 253, 249, 0.78); }
.appointment-record-client { border-right: 0; background: rgba(255, 255, 255, 0.74); }
.appointment-record-provider { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 9px; }
.appointment-record-provider .appointment-client-avatar { width: 40px; height: 40px; border-radius: 11px; }
.appointment-record-provider div { min-width: 0; display: grid; gap: 2px; }
.appointment-record-provider small,
.appointment-record-facts dt,
.appointment-client-network dt { color: var(--ink-muted); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.appointment-record-provider strong { font-size: 0.72rem; }
.appointment-record-provider span { color: var(--ink-soft); font-size: 0.6rem; }
.appointment-record-facts,
.appointment-client-network { display: grid; gap: 0; margin: 0; }
.appointment-record-facts div,
.appointment-client-network div { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.appointment-record-facts dd,
.appointment-client-network dd { margin: 0; color: var(--ink); font-size: 0.68rem; font-weight: 650; line-height: 1.4; }
.appointment-service-summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.appointment-service-summary > div { min-width: 0; display: grid; gap: 3px; }
.appointment-service-summary > div:last-child { justify-items: end; text-align: right; }
.appointment-service-summary small { color: var(--ink-muted); font-size: 0.58rem; }
.appointment-service-summary strong { font-size: 0.8rem; }
.appointment-service-summary span { color: var(--ink-soft); font-size: 0.63rem; }
.appointment-service-summary b { color: var(--brand-deep); font-size: 0.82rem; }
.appointment-record-payment { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; color: var(--ink-soft); background: var(--panel-muted); border-radius: 9px; font-size: 0.64rem; }
.appointment-record-payment strong { color: var(--ink); }
.appointment-record-actions { display: grid; gap: 6px; }
.appointment-record-actions > details { padding: 0 12px 12px; background: rgba(255, 255, 255, 0.66); border: 1px solid var(--line); border-radius: 10px; }
.appointment-record-actions > details > summary { min-height: 42px; display: flex; align-items: center; font-size: 0.68rem; font-weight: 750; cursor: pointer; }
.appointment-record-actions .top-gap { margin-top: 0; }
.appointment-record-actions .note-box { padding: 10px; box-shadow: none; }
.appointment-record-history { display: grid; gap: 7px; }
.appointment-record-history > h2 { margin: 3px 0; font-family: var(--font-body); font-size: 0.82rem; }
.appointment-record-client .appointment-client-card { grid-template-columns: 44px minmax(0, 1fr); padding: 0 0 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.appointment-record-client .appointment-client-avatar { width: 44px; height: 44px; border-radius: 12px; }
.appointment-record-client .appointment-client-actions { display: grid; grid-template-columns: 1fr; }
.appointment-record-client .appointment-client-actions .button { width: 100%; }
.appointment-client-note { padding: 11px; background: var(--brand-soft); border-radius: 9px; }
.appointment-client-note h3 { margin: 0 0 5px; font-family: var(--font-body); font-size: 0.7rem; }
.appointment-client-note p { margin: 0; color: var(--ink-soft); font-size: 0.63rem; line-height: 1.45; }
.appointment-record-content .appointment-record-workspace { max-width: none; }
.appointment-record-content .appointment-record-layout { min-height: 100%; }
body:has(.appointment-drawer[open]) { overflow: hidden; }

@starting-style {
  .appointment-drawer[open] { opacity: 0; transform: translateX(32px); }
}

.ai-result pre { margin: 0; white-space: pre-wrap; font: inherit; line-height: 1.65; }
code { padding: 2px 6px; background: #f1e9e0; border-radius: 6px; }

.public-form-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 159, 0, 0.2), transparent 25rem),
    linear-gradient(145deg, #fbf8f4 0%, var(--canvas) 52%, #ebe2d8 100%);
}

.public-form-shell { width: min(900px, calc(100% - 32px)); margin: 0 auto; padding: clamp(32px, 6vw, 76px) 0 96px; }
.public-form-hero { max-width: 720px; margin-bottom: 36px; }
.public-form-hero h1 { max-width: 18ch; margin-bottom: 16px; }
.public-form-hero > p:not(.eyebrow) { max-width: 62ch; color: var(--ink-soft); font-size: 1.02rem; }
.packet-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-soft); font-size: 0.8rem; }
.public-form { display: grid; gap: 24px; }
.public-form-card { padding: clamp(24px, 4vw, 40px); background: rgba(255, 255, 255, 0.84); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); backdrop-filter: blur(18px) saturate(128%); }
.public-form-card h2 { margin-bottom: 22px; font-size: clamp(1.35rem, 3vw, 1.85rem); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field-wide { grid-column: 1 / -1; }
.choice-list { display: grid; gap: 10px; margin-bottom: 22px; }
.choice-list label,
.typed-signature-option { display: flex; align-items: flex-start; gap: 10px; min-height: 46px; padding: 12px 13px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: 13px; }
.choice-list input,
.typed-signature-option input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand-deep); }
.support-copy { max-width: 68ch; color: var(--ink-soft); }
.consent-stack { display: grid; gap: 10px; }
.consent-section { background: var(--panel-muted); border: 1px solid var(--line); border-radius: 13px; }
.consent-section summary { min-height: 50px; padding: 14px 16px; cursor: pointer; font-weight: 600; }
.consent-section p { max-width: 72ch; padding: 0 16px 18px; color: var(--ink-soft); line-height: 1.65; white-space: pre-line; }
.signature-pad-wrap { display: grid; gap: 10px; margin: 18px 0; }
.signature-pad-wrap canvas { width: 100%; height: 190px; touch-action: none; background: var(--signature-canvas-bg); border: 1px solid var(--line-strong); border-radius: 14px; }
.signature-pad-wrap canvas:focus-visible,
.signature-pad-wrap canvas[aria-invalid="true"] { outline: 3px solid rgba(155, 90, 0, 0.44); outline-offset: 3px; }
.signature-pad-wrap .button { justify-self: start; }
.sign-packet { width: 100%; min-height: 52px; margin-top: 20px; }
.form-errors { margin-bottom: 24px; padding: 18px 20px; color: #842d2d; background: var(--danger-soft); border: 1px solid #dba9a9; border-radius: 14px; }
.form-errors h2 { margin-bottom: 8px; }
.form-errors ul { margin: 0; padding-left: 20px; }
.success-panel { margin-top: 12vh; }

.honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: #1c1b19; }
  .hero,
  .metric-card,
  .page-login .auth-panel,
  .public-form-card,
  .module-tabs,
  .button.secondary { background: #fffaf4; }
}

@media (max-width: 1180px) {
  .public-home-hero { grid-template-columns: 1fr; min-height: 0; }
  .public-home-copy { max-width: none; }
  .public-home-visit-card { margin-top: 8px; }
  .public-home-benefits { grid-template-columns: 1fr; }
  .public-home-benefits article { min-height: 0; }
  .three-column { grid-template-columns: 1fr; }
  .split,
  .detail-shell { flex-direction: column; }
  .form-panel,
  .profile-card { position: static; width: 100%; }
}

.client-workspace,
.catalog-workspace { display: grid; gap: 18px; }

.client-create-panel {
  width: min(100%, 1040px);
  margin: -4px 0 24px auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
}
.client-create-panel[hidden] { display: none; }
.client-create-panel.is-open { opacity: 1; transform: translateY(0); }
.client-create-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.client-create-heading h2 { margin: 0 0 4px; }
.client-create-heading p:last-child { margin: 0; color: var(--ink-soft); }
.client-create-heading .icon-button {
  appearance: none;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink-soft);
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 50%;
  font: inherit;
  font-size: 1.3rem;
  cursor: pointer;
}
.client-create-form { margin-top: 20px; }
.client-create-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }

.segment-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.segment-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}
.segment-chip:hover,
.segment-chip.is-active { color: var(--ink); background: var(--brand-soft); border-color: rgba(255, 159, 0, 0.48); }
.client-filter-bar { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(160px, 0.8fr)) auto; align-items: end; }
.catalog-filter-bar { align-items: end; }
.filter-search { flex: 1 1 260px; }
.compact-header { min-height: 42px; margin: 0; }
.compact-header > p { margin: 0; }
.client-table td:first-child { min-width: 220px; }
.client-name-link { display: block; width: fit-content; font-weight: 600; }
.client-table .support-copy,
.service-table .support-copy { display: block; margin-top: 3px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.client-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; }
.tag-amber { color: #704000; background: #ffe3b0; }
.tag-forest { color: #244a3d; background: #dceee6; }
.tag-blue { color: #285076; background: #dcecf8; }
.tag-violet { color: #5b4078; background: #e9def5; }
.tag-rose { color: #813f50; background: #f7dfe6; }
.tag-slate { color: #43505c; background: #e2e8ed; }
.profile-tags { display: grid; gap: 10px; margin: 20px 0; padding: 16px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: var(--radius-md); }
.profile-tags h2 { margin: 0; font-size: 1rem; }
.tag-management { display: grid; gap: 8px; }
.tag-remove-form { display: inline-flex; }
.tag-remove-form button { min-height: 34px; padding: 5px 10px; color: var(--danger); background: transparent; border: 1px solid rgba(163, 58, 57, 0.25); border-radius: 999px; font-size: 0.7rem; }
.inline-disclosure > summary,
.service-category-group > summary { cursor: pointer; font-weight: 600; }
.category-manager { margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.category-manager > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 2px; cursor: pointer; list-style: none; }
.category-manager > summary::-webkit-details-marker { display: none; }
.category-manager > summary span { font-weight: 600; }
.category-manager > summary span::before { display: inline-block; width: 18px; color: var(--brand-deep); content: "+"; }
.category-manager[open] > summary span::before { content: "−"; }
.category-manager > summary small { color: var(--ink-muted); font-size: 0.72rem; font-weight: 400; }
.category-manager-body { display: grid; gap: 18px; padding: 18px; background: rgba(250, 246, 242, 0.68); border: 1px solid var(--line); border-radius: var(--radius-md); }
.category-explainer { max-width: 760px; margin: 0; color: var(--ink-soft); }
.category-list-editor { display: grid; gap: 9px; }
.category-edit-row,
.category-create-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.45fr) auto; align-items: end; gap: 10px; padding: 12px; background: rgba(255, 255, 255, 0.64); border: 1px solid var(--line); border-radius: 15px; }
.category-edit-row label,
.category-create-row label { display: grid; gap: 6px; font-size: 0.76rem; font-weight: 600; }
.category-row-actions { display: flex; gap: 7px; align-items: center; }
.category-create-row { padding-top: 16px; border-color: rgba(255, 159, 0, 0.32); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; }
.empty-state { display: grid; justify-items: center; gap: 5px; padding: 36px 20px; color: var(--ink-muted); text-align: center; }
.empty-state strong { color: var(--ink); }

@media (max-width: 1280px) {
  .client-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-filter-bar .filter-search { grid-column: 1 / -1; }
  .client-filter-bar > .button { justify-self: start; }
}

@media (max-width: 720px) {
  .workspace-header { align-items: stretch; }
  .workspace-header > .button { width: 100%; }
  .client-filter-bar,
  .category-edit-row,
  .category-create-row { grid-template-columns: 1fr; }
  .client-filter-bar .filter-search { grid-column: auto; }
  .client-filter-bar > .button,
  .category-create-row > .button { width: 100%; }
  .client-create-heading { align-items: center; }
  .client-create-panel { margin-top: 0; }
  .client-create-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .category-manager > summary { align-items: flex-start; flex-direction: column; gap: 3px; }
}

/* Connected client record workspace. */
.client360-shell { display: grid; gap: 16px; }
.appointment-checkout-summary {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.appointment-checkout-summary > div:first-child,
.appointment-checkout-summary dl,
.appointment-checkout-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.appointment-checkout-summary > div:first-child { justify-content: space-between; }
.appointment-checkout-summary > div:first-child > div { display: grid; gap: 2px; }
.appointment-checkout-summary > div:first-child span:first-child,
.appointment-checkout-summary dt {
  color: var(--muted);
  font-size: 12px;
}
.appointment-checkout-summary dl { margin: 0; }
.appointment-checkout-summary dl div {
  min-width: 112px;
  display: grid;
  gap: 2px;
}
.appointment-checkout-summary dd { margin: 0; font-weight: 700; }
.appointment-checkout-controls { align-items: flex-start; }
.appointment-checkout-refund[open] { width: 100%; }
.appointment-checkout-refund summary { list-style: none; }
.appointment-checkout-refund summary::-webkit-details-marker { display: none; }
.appointment-manual-payment { flex: 1 1 320px; }
.inbox-compose { position: relative; }
.inbox-compose > summary { list-style: none; cursor: pointer; }
.inbox-compose > summary::-webkit-details-marker { display: none; }
.inbox-compose[open] > form {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 8px);
  width: min(420px, calc(100vw - 48px));
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(30, 24, 18, .18);
}
.client360-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
}
.client360-identity { min-width: 0; display: flex; align-items: flex-start; gap: 14px; }
.client360-identity h1 { margin: 2px 0 4px; font-size: clamp(1.55rem, 3vw, 2.35rem); }
.client360-identity p { margin: 0; color: var(--ink-soft); }
.client360-identity .tag-list { margin-top: 10px; }
.client360-back {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
}
.client360-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.client360-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.client360-stats > div {
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.client360-stats span { color: var(--ink-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.client360-stats strong { font-size: 1.05rem; }
.client360-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  overflow-x: auto;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 14px;
  scrollbar-width: thin;
}
.client360-tabs a { min-height: 38px; display: inline-flex; align-items: center; padding: 8px 13px; color: var(--ink-soft); border-radius: 10px; font-size: 0.76rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.client360-tabs a:hover,
.client360-tabs a.is-active { color: var(--ink); background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }
.client360-content { min-width: 0; }
.client360-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.75fr); gap: 16px; }
.client360-main-stack,
.client360-side-stack { min-width: 0; display: grid; align-content: start; gap: 16px; }
.client360-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: 14px; }
.client360-facts > div { min-width: 0; display: grid; gap: 4px; padding: 13px 14px; background: rgba(255, 255, 255, 0.76); }
.client360-facts dt { color: var(--ink-muted); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; }
.client360-facts dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.client360-editor,
.client360-danger { margin-top: 14px; border-top: 1px solid var(--line); }
.client360-editor > summary,
.client360-danger > summary { padding: 14px 0 4px; cursor: pointer; font-weight: 700; }
.client360-editor form,
.client360-danger form { margin-top: 12px; }
.client360-note-form,
.client360-plan-form { display: grid; gap: 10px; margin-bottom: 14px; padding: 14px; background: var(--panel-muted); border: 1px solid var(--line); border-radius: 14px; }
.client360-notes,
.client360-plans,
.client360-messages,
.client360-files,
.client360-benefits,
.client360-payment-methods { display: grid; gap: 9px; }
.client360-note,
.client360-plan,
.client360-message,
.client360-file,
.client360-benefit,
.client360-payment-method,
.client360-timeline-item { padding: 13px 14px; background: rgba(255, 255, 255, 0.66); border: 1px solid var(--line); border-radius: 13px; }
.client360-note > div,
.client360-plan > div,
.client360-message > div,
.client360-file,
.client360-timeline-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.client360-note p,
.client360-plan p,
.client360-message p { margin: 9px 0 5px; white-space: pre-wrap; }
.client360-note time,
.client360-plan time,
.client360-message time,
.client360-timeline-item time { color: var(--ink-muted); font-size: 0.68rem; }
.client360-timeline { display: grid; gap: 8px; }
.client360-timeline-item { align-items: flex-start; flex-direction: column; }
.client360-timeline-item a { font-size: 0.72rem; font-weight: 700; }
.client360-plan h3 { margin: 8px 0 0; font-size: 1rem; }
.client360-benefit,
.client360-payment-method { display: grid; gap: 4px; }
.client360-merged { max-width: 720px; margin: 40px auto; text-align: center; }
.client360-merged .button { width: fit-content; margin: 12px auto 0; }
.client360-header .tag-management { margin-top: 10px; }
.client360-header .tag-remove-form { display: none; }

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

@media (max-width: 700px) {
  .client360-header { align-items: stretch; flex-direction: column; padding: 16px; }
  .client360-actions { display: grid; grid-template-columns: 1fr; }
  .client360-stats,
  .client360-facts { grid-template-columns: 1fr; }
  .client360-note > div,
  .client360-plan > div,
  .client360-message > div,
  .client360-file { align-items: flex-start; flex-direction: column; }
}

.settings-hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.settings-hub-card {
  min-height: 168px;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 22px;
  color: var(--ink);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,248,238,.7));
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  backdrop-filter: blur(20px) saturate(130%);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.settings-hub-card:hover { color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.settings-hub-card strong { font-size: 1rem; }
.settings-hub-card > span:last-child { color: var(--ink-muted); font-size: 0.78rem; }
.settings-hub-kicker { color: var(--brand-deep); font-size: 0.65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Settings reference shell: persistent navigation rail + focused editor. */
.settings-layout { display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-content { min-width: 0; }
.settings-sidebar { position: sticky; top: 18px; min-height: 620px; padding: 12px 10px 18px; background: rgba(255,255,255,.58); border-right: 1px solid rgba(210,198,188,.55); }
.settings-search { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; color: var(--ink-muted); background: rgba(245,242,238,.88); border: 1px solid rgba(221,212,203,.8); border-radius: 20px; }
.settings-search input { width: 100%; min-height: 34px; padding: 0; background: transparent; border: 0; box-shadow: none; font-size: .78rem; }
.settings-search input:focus { outline: none; box-shadow: none; }
.settings-nav { display: grid; gap: 20px; margin-top: 22px; }
.settings-nav-group { display: grid; gap: 2px; }
.settings-nav-group p { margin: 0 10px 6px; color: var(--ink); font-size: .72rem; font-weight: 700; }
.settings-nav-link { display: block; padding: 9px 10px; color: var(--ink-soft); border-radius: 5px; font-size: .78rem; text-decoration: none; transition: background 150ms ease, color 150ms ease; }
.settings-nav-link:hover, .settings-nav-link.is-active { color: var(--ink); background: rgba(255,159,0,.13); }
.settings-main { min-width: 0; }
.settings-main > .workspace-header { padding-top: 6px; }
.settings-main .panel { background: rgba(255,255,255,.68); }
.settings-main .settings-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-main .settings-hub-card { min-height: 132px; padding: 18px; border-radius: 8px; }
.settings-main .form-card { border-radius: 8px; }

/* Forms workspace: Mangomint clarity expressed through the Amber design system. */
.page-forms .page-shell,
.page-form-templates .page-shell,
.page-active-forms .page-shell,
.page-form-template .page-shell {
  min-width: 0;
}

.page-forms .page-shell {
  height: 100dvh;
  min-height: 680px;
  overflow: hidden;
  padding: 16px 18px 16px 0;
}

.page-forms .page-shell > .panel {
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: rgba(255, 253, 249, 0.88);
  border-color: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(22px) saturate(128%);
}

.page-forms .page-shell > .panel > .panel-header:first-child {
  min-height: 78px;
  align-items: center;
  margin: 0;
  padding: 17px 22px;
  background: rgba(255, 255, 255, 0.58);
  border-bottom: 1px solid var(--line);
}

.page-forms .page-shell > .panel > .panel-header:first-child h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.page-forms .page-shell > .panel > .panel-header:first-child .chip,
.page-forms .page-shell > .panel > .intro-text,
.page-forms .page-shell > .panel > .forms-grid {
  display: none;
}

.page-forms .page-shell > .panel > .panel-header.top-gap,
.forms-queue-toolbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 13px 22px;
  background: rgba(250, 247, 243, 0.74);
  border-bottom: 1px solid var(--line);
}

.page-forms .page-shell > .panel > .panel-header.top-gap h2 {
  margin: 0;
  font-size: 1rem;
}

.page-forms .compact-search,
.forms-queue-search {
  min-width: min(360px, 48vw);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.page-forms .compact-search input,
.forms-queue-search input {
  width: min(290px, 42vw);
  min-height: 40px;
  padding-left: 14px;
  background: rgba(255, 255, 255, 0.78);
  border-color: var(--line);
  border-radius: 999px;
}

.forms-search-form {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) 168px auto;
  align-items: end;
  gap: 8px;
  margin: 0;
}

.forms-search,
.forms-status-filter {
  position: relative;
  min-width: 0;
}

.forms-search > span,
.forms-status-filter > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.forms-search input,
.forms-status-filter select {
  width: 100%;
  min-height: 40px;
  background: rgba(255, 255, 255, 0.82);
  border-color: var(--line);
}

.forms-search input {
  padding-left: 15px;
  border-radius: 999px;
}

.forms-status-filter select {
  border-radius: var(--control-radius);
}

.page-forms .table-scroll,
.forms-queue-table {
  height: calc(100% - 146px);
  overflow: auto;
  background: rgba(255, 255, 255, 0.4);
  scrollbar-width: thin;
}

.forms-queue-panel > .table-scroll {
  height: calc(100% - 68px);
}

.forms-queue-panel .forms-queue-table {
  height: auto;
}

.forms-queue-panel .forms-queue-table tbody,
.forms-queue-panel .forms-queue-table tbody tr {
  height: auto;
}

.page-forms .data-table {
  min-width: 940px;
  border-collapse: separate;
  border-spacing: 0;
}

.page-forms .data-table thead {
  position: sticky;
  z-index: 3;
  top: 0;
}

.page-forms .data-table th {
  padding: 13px 18px;
  color: var(--ink-muted);
  background: rgba(250, 247, 243, 0.96);
  border-bottom: 1px solid var(--line);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

.page-forms .data-table td {
  padding: 17px 18px;
  background: rgba(255, 255, 255, 0.42);
  border-bottom: 1px solid rgba(236, 228, 220, 0.72);
  font-size: 0.78rem;
  vertical-align: middle;
}

.page-forms .data-table tbody tr {
  transition: background 150ms var(--ease-out);
}

.page-forms .data-table tbody tr:hover td {
  background: var(--brand-faint);
}

.page-forms .data-table td:first-child a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.page-forms .data-table td:nth-child(2) small {
  display: inline-block;
  margin-top: 3px;
  color: var(--ink-muted);
}

.forms-row-link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.forms-queue-row.is-clickable {
  cursor: pointer;
}

.forms-queue-row .status-pill {
  gap: 7px;
  padding-right: 10px;
  padding-left: 9px;
}

.forms-queue-row .status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.72;
}

.forms-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  color: var(--ink-muted);
  text-align: center;
}

.forms-empty strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.forms-empty span {
  font-size: 0.72rem;
}

.page-forms .queue-review-form {
  min-width: 240px;
  display: grid;
  grid-template-columns: minmax(112px, 0.8fr) minmax(128px, 1fr);
  gap: 7px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.page-forms .queue-review-form button {
  grid-column: 1 / -1;
  justify-self: start;
}

.submission-drawer {
  position: fixed;
  z-index: 75;
  inset: 0 0 0 auto;
  width: min(570px, calc(100vw - 296px));
  max-width: 100vw;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: visible;
  background: var(--panel-solid);
  border-left: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: -24px 0 70px rgba(35, 27, 20, 0.22);
  isolation: isolate;
  animation: drawer-in 240ms var(--ease-out);
}

.submission-drawer::before {
  position: fixed;
  z-index: -1;
  inset: 0 100% 0 -100vw;
  background: rgba(22, 20, 18, 0.56);
  content: "";
  backdrop-filter: blur(3px);
}

.submission-drawer-overlay,
[data-submission-drawer-overlay] {
  position: fixed;
  z-index: 74;
  inset: 0;
  background: rgba(22, 20, 18, 0.56);
  border: 0;
  backdrop-filter: blur(3px);
  cursor: default;
}

.submission-scrim {
  position: fixed;
  z-index: 74;
  inset: 0;
  background: rgba(22, 20, 18, 0.56);
  backdrop-filter: blur(3px);
  animation: drawer-scrim-in 180ms ease-out;
}

.submission-scrim > a {
  position: absolute;
  inset: 0;
}

body.submission-drawer-open {
  overflow: hidden;
}

.submission-drawer-header {
  position: relative;
  z-index: 2;
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: var(--sidebar-text);
  background: rgba(29, 27, 25, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.submission-drawer-header h2 {
  overflow: hidden;
  margin: 0;
  color: #fffaf2;
  font-size: 0.94rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submission-drawer-header .eyebrow {
  margin: 0 0 2px;
  color: rgba(255, 250, 242, 0.56);
  font-size: 0.58rem;
}

.submission-drawer-header .chip {
  margin-left: auto;
  color: #fffaf2;
  background: rgba(255, 159, 0, 0.16);
  border-color: rgba(255, 159, 0, 0.36);
  white-space: nowrap;
}

.submission-drawer-header > div > p:last-child {
  overflow: hidden;
  margin: 3px 0 0;
  color: rgba(255, 250, 242, 0.58);
  font-size: 0.62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submission-drawer-header .status-pill {
  margin-left: auto;
  color: #fffaf2;
  background: rgba(255, 159, 0, 0.16);
  border-color: rgba(255, 159, 0, 0.36);
  white-space: nowrap;
}

.submission-drawer .drawer-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  color: rgba(255, 250, 242, 0.68);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
}

.submission-drawer .drawer-close:hover,
.submission-drawer .drawer-close:focus-visible {
  color: #fffaf2;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.submission-drawer-body {
  min-height: 0;
  overflow-y: auto;
  padding: 36px 42px max(52px, env(safe-area-inset-bottom));
  background: var(--panel-solid);
  scrollbar-color: rgba(107, 89, 76, 0.42) transparent;
  scrollbar-width: thin;
}

.submission-drawer-body > .support-copy:first-child {
  margin-bottom: 26px;
  font-size: 0.74rem;
}

.submission-fields {
  display: grid;
  gap: 25px;
  margin: 0 0 30px;
}

.submission-field,
.submission-answer {
  display: grid;
  gap: 5px;
  break-inside: avoid;
}

.submission-field dt,
.submission-answer dt,
.submission-signature dt {
  color: var(--ink-muted);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.35;
}

.submission-field dd,
.submission-answer dd,
.submission-signature dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.submission-section {
  display: grid;
  gap: 20px;
  padding: 28px 0 4px;
  border-top: 1px solid var(--line);
}

.submission-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.submission-section > h3 {
  margin: 0;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
}

.submission-legal-copy {
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.65;
  white-space: pre-line;
}

.submission-signature {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.submission-signature img,
.submission-signature canvas,
.submission-signature-preview {
  width: min(100%, 360px);
  max-height: 132px;
  object-fit: contain;
  object-position: left center;
  background: var(--signature-canvas-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.submission-appointment,
.submission-metadata {
  display: grid;
  gap: 7px;
  margin-top: 28px;
  padding: 18px;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.submission-metadata {
  color: var(--ink-muted);
  font-size: 0.7rem;
  line-height: 1.55;
}

.submission-review-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  padding: 16px 18px;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.submission-review-summary strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.submission-review-summary span {
  color: var(--ink-muted);
  font-size: 0.68rem;
  text-align: right;
}

.submission-review-summary p {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.55;
}

.submission-review-form,
.submission-drawer-body > form.stack-form {
  display: grid;
  gap: 12px;
  margin-top: 28px;
  padding: 20px;
  background: rgba(255, 159, 0, 0.07);
  border: 1px solid rgba(255, 159, 0, 0.22);
  border-radius: 14px;
}

.submission-review-form .button.primary,
.submission-drawer-body > form.stack-form .button.primary {
  width: 100%;
  min-height: 48px;
}

.submission-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, auto);
  gap: 8px;
}

.submission-actions .button.primary {
  grid-column: 1 / -1;
  grid-row: 1;
}

.submission-actions .button,
.submission-actions a {
  width: 100%;
}

body:has(.submission-drawer) {
  overflow: hidden;
}

@keyframes drawer-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes drawer-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes drawer-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.page-form-template .page-shell {
  height: 100dvh;
  min-height: 680px;
  overflow: hidden;
  padding: 16px 18px 16px 0;
}

.template-workspace {
  container-type: inline-size;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  overflow: hidden;
  margin: 0;
  background: rgba(244, 242, 239, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(22px) saturate(126%);
}

@container (max-width: 1050px) {
  .template-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .template-rail {
    min-height: 0;
    grid-template-columns: auto minmax(180px, 0.8fr) minmax(260px, 1.2fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .template-rail > .button.primary {
    width: auto;
    white-space: nowrap;
  }

  .template-rail > .form-manager-search {
    min-width: 0;
  }

  .template-list {
    display: flex;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
  }

  .template-list-item {
    flex: 0 0 min(240px, 68vw);
    padding: 8px 11px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 7px 7px 0 0;
  }

  .template-list-item:hover,
  .template-list-item.is-active {
    border-left: 0;
    border-bottom-color: var(--brand);
  }

  .template-editor {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0;
    padding: 20px clamp(16px, 3vw, 30px) 42px;
  }

  .template-editor-header {
    grid-column: 1;
    min-height: 0;
    margin-bottom: 14px;
    padding-bottom: 16px;
  }

  .template-tabs {
    position: sticky;
    z-index: 4;
    top: -20px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: 0 calc(clamp(16px, 3vw, 30px) * -1) 18px;
    padding: 9px clamp(16px, 3vw, 30px);
    background: rgba(244, 242, 239, 0.96);
    border-bottom: 1px solid var(--line);
  }

  .template-tab {
    flex: 0 0 auto;
  }
}

.template-rail {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  overflow: hidden;
  padding: 22px 18px 0;
  background: rgba(255, 253, 249, 0.9);
  border-right: 1px solid var(--line);
}

.template-back {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: var(--brand-deep);
  font-size: 0.74rem;
  font-weight: 500;
  text-decoration: none;
}

.template-rail > .button.primary {
  width: 100%;
  min-height: 42px;
  border-radius: 999px;
}

.template-rail > .form-manager-search {
  min-height: 0;
  height: auto;
  align-self: start;
  padding: 0;
  border: 0;
}

.template-search {
  width: 100%;
}

.template-search input {
  min-height: 40px;
  border-radius: 999px;
}

.template-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  overflow-y: auto;
  margin: 0 -18px;
  padding-bottom: 18px;
  scrollbar-width: thin;
}

.template-list-item {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 18px;
  color: var(--ink);
  background: transparent;
  border-left: 3px solid transparent;
  font-size: 0.76rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}

.template-list-item:hover,
.template-list-item.is-active {
  color: var(--ink);
  background: var(--brand-faint);
  border-left-color: var(--brand);
}

.template-list-item .status-pill,
.template-list-item .chip {
  flex: 0 0 auto;
  font-size: 0.58rem;
}

.template-list-item > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.template-list-item strong,
.template-list-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-list-item small { color: var(--ink-muted); font-size: 0.66rem; }

.template-editor {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 38px);
  overflow-y: auto;
  padding: 28px clamp(22px, 4vw, 62px) 58px;
  scrollbar-width: thin;
}

.template-editor-header {
  grid-column: 1 / -1;
  min-height: 116px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-strong);
}

.template-editor-header h1 {
  margin-bottom: 7px;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.template-editor-header .support-copy {
  max-width: 64ch;
  margin-bottom: 0;
  font-size: 0.75rem;
}

.template-tabs {
  position: sticky;
  top: 0;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 5px;
  margin: 0;
  padding: 0;
  border: 0;
}

.template-tab {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 11px;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 7px 7px 0;
  font-size: 0.76rem;
  font-weight: 500;
  text-decoration: none;
}

.template-tab:hover,
.template-tab.is-active {
  color: var(--ink);
  background: var(--brand-faint);
  border-left-color: var(--brand);
}

.template-editor-panel {
  width: 100%;
  max-width: 760px;
  align-self: start;
  margin: 0;
  padding: clamp(22px, 3vw, 32px);
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.template-editor-panel > .panel-header {
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--line);
}

.template-editor-panel > .panel-header h2 {
  margin-bottom: 4px;
  font-size: 1.15rem;
}

.template-editor-panel .stack-form {
  gap: 18px;
}

.template-editor-panel .stack-form > label,
.template-detail-card,
.template-setting-group,
.confirmation-message-card,
.active-rule-card {
  display: grid;
  gap: 7px;
}

.template-editor-panel .stack-form > label {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.template-editor-panel input,
.template-editor-panel select,
.template-editor-panel textarea {
  background: rgba(255, 253, 249, 0.96);
}

.template-detail-card,
.template-setting-group,
.confirmation-message-card {
  margin-top: 16px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.template-setting-options,
.reviewer-list,
.service-scope-list {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.template-setting-option,
.reviewer-row,
.service-scope-row {
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 8px;
}

.template-setting-option:hover,
.reviewer-row:hover,
.service-scope-row:hover {
  background: var(--brand-faint);
}

.template-field-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.template-field-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto 38px;
  align-items: center;
  gap: 13px;
  padding: 10px 13px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(35, 27, 20, 0.045);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out), transform 150ms var(--ease-out);
}

.template-field-row:hover,
.template-field-row:focus-within {
  border-color: rgba(255, 159, 0, 0.5);
  box-shadow: 0 9px 24px rgba(35, 27, 20, 0.08);
  transform: translateY(-1px);
}

.template-field-row strong {
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-field-row > span:last-of-type {
  color: var(--ink-muted);
  font-size: 0.64rem;
  white-space: nowrap;
}

.field-type {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  color: var(--brand-deep);
  background: var(--brand-faint);
  border: 1px solid rgba(255, 159, 0, 0.2);
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.template-field-row .icon-button {
  border-color: transparent;
  box-shadow: none;
}

.template-field-summary {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.template-field-summary strong {
  display: block;
}

.template-field-summary .support-copy {
  margin: 0;
  font-size: 0.62rem;
}

.template-field-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.template-field-actions .icon-button {
  min-width: 32px;
  min-height: 32px;
  padding: 5px 7px;
  font-size: 0.6rem;
}

.template-field-actions [data-form-field-delete] {
  color: var(--danger);
}

.field-builder-toolbar,
.field-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-type-picker,
.field-editor-panel {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.field-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.field-type-option {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}

.field-type-option:hover,
.field-type-option:focus-visible {
  background: var(--brand-faint);
  border-color: rgba(255, 159, 0, 0.48);
}

[data-form-builder] .stack-form > label:has(> [name="fields_json"]) {
  display: none;
}

[data-form-builder] textarea[name="fields_json"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.template-details-form .form-choice-grid {
  display: grid;
  gap: 0;
  margin: 8px 0 22px;
}

.template-details-form .form-choice-card {
  min-height: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.template-details-form .form-choice-card:last-child {
  border-bottom: 0;
}

.template-details-form .form-choice-card input[type="radio"] {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--brand);
}

.template-details-form .form-choice-card span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.template-details-form .form-choice-card strong,
.template-details-form .form-choice-card small {
  display: block;
}

.template-details-form .form-choice-card strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.35;
}

.template-details-form .form-choice-card small {
  color: var(--ink-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.template-details-form {
  width: 100%;
  max-width: 760px;
  display: grid;
  gap: 18px;
  align-self: start;
}

.template-details-form .template-editor-panel {
  max-width: none;
}

.template-identity-card > label {
  display: grid;
  gap: 7px;
  margin-top: 17px;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 500;
}

.template-identity-card .template-status-toggle {
  grid-template-columns: 38px minmax(0, 1fr);
  margin: 21px 0 5px;
}

.template-identity-card .button-row {
  justify-content: flex-start;
  margin-top: 23px;
  padding-top: 19px;
  border-top: 1px solid var(--line);
}

.template-detail-summary {
  display: grid;
  gap: 23px;
  margin: 0;
}

.template-detail-summary > div {
  display: grid;
  gap: 6px;
}

.template-detail-summary dt {
  color: var(--ink-muted);
  font-size: 0.67rem;
}

.template-detail-summary dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-line;
}

.template-status-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}

.text-action {
  padding: 2px;
  color: var(--brand-deep);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.text-action:hover,
.text-action:focus-visible {
  color: var(--ink);
}

.details-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.details-section-heading h2 {
  margin: 2px 0 0;
  font-size: 1.05rem;
}

.details-selection-state {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: var(--ink-muted);
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 650;
}

.template-details-form .form-choice-card {
  margin: 0 -10px;
  padding: 13px 10px;
  border-radius: 8px;
  transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out);
}

.template-details-form .form-choice-card:has(input:checked) {
  background: var(--brand-faint);
}

.template-details-form .form-choice-card:hover {
  background: rgba(255, 159, 0, 0.055);
}

.details-progressive-stack {
  display: grid;
  gap: 18px;
}

.details-progressive-stack[hidden],
[data-client-appointment-settings][hidden],
[data-specific-scope][hidden],
[data-reviewers-settings][hidden],
[data-details-save-bar][hidden] {
  display: none !important;
}

.compact-choice-grid {
  margin-bottom: 14px !important;
}

.scope-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 17px;
}

.details-picker {
  overflow: clip;
  background: rgba(255, 253, 249, 0.82);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.details-picker > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

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

.details-picker > summary::after {
  color: var(--brand-deep);
  content: "+";
  font-size: 1rem;
  line-height: 1;
}

.details-picker[open] > summary::after {
  content: "−";
}

.details-picker > summary strong {
  margin-left: auto;
  color: var(--ink-muted);
  font-size: 0.6rem;
  font-weight: 550;
}

.details-picker .scope-options,
.details-picker .reviewer-options {
  max-height: 260px;
  display: grid;
  gap: 0;
  padding: 6px 13px 11px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}

.scope-option,
.reviewer-option {
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(82, 59, 34, 0.08);
  font-size: 0.68rem;
  cursor: pointer;
}

.scope-option:last-child,
.reviewer-option:last-child {
  border-bottom: 0;
}

.scope-option input,
.reviewer-option input {
  width: 17px !important;
  min-width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  padding: 0;
  accent-color: var(--brand);
}

.reviewer-picker {
  margin-top: 18px;
}

.template-save-bar {
  position: sticky;
  bottom: 14px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: rgba(255, 253, 249, 0.96);
  border: 1px solid rgba(255, 159, 0, 0.28);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(46, 34, 24, 0.14);
  backdrop-filter: blur(14px);
}

.template-save-bar span {
  color: var(--ink-muted);
  font-size: 0.68rem;
}

@media (max-width: 760px) {
  .public-home-copy h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
  .public-home-closing { align-items: flex-start; flex-direction: column; }
  .public-home-closing .button { width: 100%; }
  .scope-picker-grid {
    grid-template-columns: 1fr;
  }

  .template-save-bar {
    bottom: 8px;
  }
}

[data-form-field-editor] {
  width: 100%;
  max-width: 720px;
  display: grid;
  gap: 20px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 34px);
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  font: inherit;
}

[data-form-field-editor][hidden] {
  display: none;
}

dialog[data-form-field-editor] {
  position: fixed;
  inset: 0;
  margin: auto;
}

dialog[data-form-field-editor]::backdrop {
  background: rgba(22, 20, 18, 0.48);
  backdrop-filter: blur(4px);
}

[data-form-field-editor] h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

[data-form-field-editor] > label {
  display: grid;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 500;
}

[data-form-field-editor] > label input,
[data-form-field-editor] > label select,
[data-form-field-editor] > label textarea {
  width: 100%;
  background: rgba(255, 253, 249, 0.98);
}

[data-form-field-editor] .choice-row {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.form-field-type-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.form-field-type-picker .button {
  min-height: 46px;
  justify-content: flex-start;
  text-align: left;
}

.form-fields-builder {
  max-width: 860px;
  margin-inline: auto;
}

.form-fields-header {
  align-items: flex-start;
}

.form-fields-content {
  display: grid;
  gap: 26px;
}

.form-fields-content[hidden] {
  display: none;
}

.form-fields-builder .template-field-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.form-fields-builder .template-field-row {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(55, 44, 31, 0.045);
}

.form-field-row-button {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(116px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  color: var(--ink);
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.form-field-row-button:hover,
.form-field-row-button:focus-visible {
  background: var(--brand-faint);
}

.field-row-action {
  color: var(--ink-muted);
  font-size: 0.68rem;
}

.reorder-controls {
  padding-right: 8px;
}

.form-reorder-save {
  display: flex;
  justify-content: flex-end;
}

.form-field-library {
  display: grid;
  gap: 14px;
}

.form-field-library[hidden] {
  display: none;
}

.form-field-library h3 {
  margin: 0;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
}

.form-field-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-field-type-button {
  min-height: 54px;
  display: flex;
  align-items: center;
  padding: 13px 16px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(55, 44, 31, 0.045);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.form-field-type-button:hover,
.form-field-type-button:focus-visible {
  color: var(--brand-deep);
  background: var(--brand-faint);
  border-color: rgba(255, 159, 0, 0.45);
}

.form-field-type-button:disabled {
  color: var(--ink-muted);
  background: var(--panel-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.field-editor-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.field-editor-header h3 {
  color: var(--ink);
  font-size: 1rem;
}

.field-type-description {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.55;
}

.field-config-toggle {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 10px !important;
  padding: 2px 0;
  cursor: pointer;
}

.field-config-toggle > input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}

.field-config-switch {
  width: 36px;
  height: 20px;
  position: relative;
  display: block;
  margin-top: 1px;
  background: #ded6ce;
  border: 1px solid rgba(82, 59, 34, 0.1);
  border-radius: 999px;
  transition: background 160ms ease;
}

.field-config-switch::after {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  background: #fffdfa;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(27, 24, 20, 0.2);
  transition: transform 160ms ease;
}

.field-config-toggle > input:checked + .field-config-switch {
  background: var(--brand);
  box-shadow: 0 3px 10px rgba(255, 159, 0, 0.22);
}

.field-config-toggle > input:checked + .field-config-switch::after {
  transform: translateX(16px);
}

.field-config-toggle > input:focus-visible + .field-config-switch {
  outline: 3px solid rgba(255, 159, 0, 0.28);
  outline-offset: 2px;
}

.field-config-toggle-copy {
  display: grid;
  gap: 3px;
}

.field-config-toggle-copy strong {
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 500;
}

.field-config-toggle-copy small {
  color: var(--ink-muted);
  font-size: 0.66rem;
  font-style: italic;
  line-height: 1.45;
}

.field-options-editor {
  display: grid;
  gap: 9px;
}

.field-control-label {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 500;
}

.field-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: 8px;
}

.image-source-options {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
}

.image-source-options legend {
  margin-bottom: 4px;
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.image-source-choice {
  align-items: flex-start !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.image-source-choice input[type="radio"] {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin-top: 2px;
}

.image-source-choice span {
  display: grid;
  gap: 3px;
}

.image-source-choice small {
  color: var(--ink-muted);
  font-size: 0.66rem;
}

.template-image-upload {
  min-height: 108px;
  display: grid !important;
  place-items: center;
  gap: 8px !important;
  padding: 18px;
  overflow: hidden;
  background: var(--panel-muted);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
}

.template-image-upload[hidden] {
  display: none !important;
}

.template-image-upload input[type="file"] {
  max-width: 100%;
  font-size: 0.66rem;
}

.template-image-preview {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 8px;
}

.rich-text-editor {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--panel-solid);
}

.rich-text-toolbar {
  display: flex;
  gap: 3px;
  padding: 7px 10px;
  background: var(--panel-muted);
  border-bottom: 1px solid var(--line);
}

.rich-text-toolbar button {
  min-width: 30px;
  min-height: 30px;
  padding: 4px 7px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.rich-text-toolbar button:hover,
.rich-text-toolbar button:focus-visible {
  background: var(--panel-solid);
  outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent);
  outline-offset: -2px;
}

.rich-text-content {
  min-height: 180px;
  padding: 14px 16px;
  color: var(--ink);
  background: var(--panel-solid);
  font-size: 0.74rem;
  line-height: 1.6;
  outline: none;
}

.rich-text-content:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-muted);
  font-style: italic;
}

.rich-text-source {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rich-text-field {
  display: grid;
  gap: 8px;
}

.rich-text-message-view {
  min-height: 112px;
  padding: 18px 0 4px;
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.65;
  border-top: 1px solid var(--line);
}

.rich-text-message-view p:first-child,
.rich-text-message-view ul:first-child {
  margin-top: 0;
}

.advanced-confirmation-card {
  width: min(100%, 760px);
}

.template-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.template-editor-actions form {
  margin: 0;
}

.field-editor-actions {
  justify-content: flex-start;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.form-builder-save {
  display: none;
}

.template-preview-panel {
  overflow: visible;
}

.template-preview-shell {
  width: min(100%, 760px);
  margin: 26px auto 0;
  padding: clamp(14px, 3vw, 26px);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-muted) 86%, transparent);
  border: 1px solid var(--line);
}

.template-preview-header {
  display: grid;
  gap: 7px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.template-preview-header > span {
  color: var(--brand-deep);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.template-preview-header h2,
.template-preview-header p {
  margin: 0;
}

.template-preview-header h2 {
  font-size: clamp(1.28rem, 3vw, 1.72rem);
}

.template-preview-header p {
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.6;
  white-space: pre-line;
}

.template-preview-fields {
  display: grid;
  gap: 22px;
  padding: 24px 0 8px;
}

.form-preview-field {
  display: grid;
  min-width: 0;
  gap: 9px;
  margin: 0;
  padding: 0;
  color: var(--ink);
  border: 0;
}

.form-preview-field > span,
.form-preview-field legend,
.form-preview-label > span,
.form-preview-name label > span,
.form-preview-birthday label > span {
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 500;
}

.form-preview-field legend {
  padding: 0 0 5px;
}

.form-preview-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-preview-field select,
.form-preview-field textarea {
  width: 100%;
  min-height: 44px;
  border-color: #bdb4ab;
  border-radius: 6px;
  background: #fff;
  font-size: 0.78rem;
}

.form-preview-field textarea {
  min-height: 104px;
  resize: vertical;
}

.form-preview-field input:focus,
.form-preview-field select:focus,
.form-preview-field textarea:focus,
.form-preview-signature canvas:focus-visible {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-faint);
  outline: 0;
}

.form-preview-field > small,
.form-preview-field label > small {
  color: var(--ink-muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.required-mark {
  color: var(--brand-deep);
  font-weight: 700;
}

.form-preview-name > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.form-preview-name label,
.form-preview-birthday label {
  display: grid;
  gap: 6px;
}

.form-preview-name label:nth-child(3) {
  grid-column: 1 / -1;
}

.form-preview-birthday > div {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(82px, 0.8fr) minmax(96px, 0.9fr);
  gap: 10px;
}

.form-preview-options {
  gap: 10px;
}

.form-preview-choice,
.form-preview-switch-row {
  display: flex;
  align-items: center;
  width: fit-content;
  gap: 9px;
  cursor: pointer;
  font-size: 0.78rem;
}

.form-preview-choice input[type="radio"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--brand);
}

.form-preview-toggle {
  display: flex !important;
  align-items: center;
  gap: 9px;
  width: fit-content;
  cursor: pointer;
}

.form-preview-toggle input,
.form-preview-switch-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-preview-switch {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #d4cec7;
  box-shadow: inset 0 0 0 1px rgba(22, 22, 22, 0.06);
  transition: background 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.form-preview-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(30, 22, 15, 0.2);
  transition: transform 180ms var(--ease-out);
}

.form-preview-toggle input:checked + .form-preview-switch,
.form-preview-switch-row input:checked + .form-preview-switch {
  background: var(--brand);
}

.form-preview-toggle input:checked + .form-preview-switch::after,
.form-preview-switch-row input:checked + .form-preview-switch::after {
  transform: translateX(14px);
}

.form-preview-toggle input:focus-visible + .form-preview-switch,
.form-preview-switch-row input:focus-visible + .form-preview-switch {
  box-shadow: 0 0 0 3px var(--brand-faint);
}

.form-preview-upload {
  position: relative;
}

.form-preview-upload > input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-preview-dropzone {
  display: grid;
  min-height: 76px;
  place-content: center;
  gap: 3px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  border: 1px dashed #bdb4ab;
  border-radius: 7px;
  background: #fff;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}

.form-preview-dropzone strong {
  color: var(--brand-deep);
  font-size: 0.76rem;
}

.form-preview-dropzone small {
  color: var(--ink-muted);
  font-size: 0.66rem;
}

.form-preview-upload:hover .form-preview-dropzone,
.form-preview-upload:focus-within .form-preview-dropzone {
  border-color: var(--brand);
  background: var(--brand-faint);
}

.form-preview-markup {
  gap: 10px;
}

.form-preview-markup-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f1eee9;
  border: 1px solid #bdb4ab;
  border-radius: 7px;
}

.form-preview-markup-stage img {
  display: block;
  width: 100%;
  max-height: 640px;
  object-fit: contain;
}

.form-preview-markup-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: crosshair;
  pointer-events: none;
  touch-action: none;
  transition: opacity 180ms var(--ease-out);
}

.form-preview-markup-stage.is-marking canvas {
  opacity: 1;
  pointer-events: auto;
}

.form-preview-markup-action {
  width: fit-content;
  color: var(--brand-deep);
  font-size: 0.74rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-preview-markup-empty {
  position: relative;
  display: grid;
  min-height: 118px;
  place-content: center;
  gap: 5px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  border: 1px dashed #bdb4ab;
  border-radius: 7px;
  background: #fff;
}

.form-preview-markup-empty input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-preview-signature {
  gap: 8px;
}

.form-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.form-preview-signature canvas {
  display: block;
  width: 100%;
  height: 118px;
  cursor: crosshair;
  touch-action: none;
  background: var(--signature-canvas-bg);
  border: 1px solid #bdb4ab;
  border-radius: 7px;
}

.form-preview-heading {
  display: grid;
  gap: 6px;
  padding: 12px 0 2px;
}

.form-preview-heading h3,
.form-preview-heading p,
.form-preview-copy p {
  margin: 0;
}

.form-preview-heading h3 {
  font-size: 1.04rem;
}

.form-preview-heading p,
.form-preview-copy {
  color: var(--ink-soft);
  font-size: 0.76rem;
  line-height: 1.65;
}

.form-preview-copy {
  overflow-wrap: anywhere;
}

.form-preview-appointment {
  gap: 7px;
}

.form-preview-appointment strong {
  display: block;
  padding: 14px 16px;
  color: var(--ink-soft);
  background: #eeeae5;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 500;
}

.template-preview-submit {
  width: 100%;
  margin-top: 24px;
}

.template-preview-submit:disabled {
  color: #fff;
  background: #786f67;
  opacity: 0.76;
}

.template-preview-note {
  display: block;
  margin-top: 9px;
  color: var(--ink-muted);
  font-size: 0.64rem;
  text-align: center;
}

.template-preview-card {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 38px);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.template-preview-card > h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}

.template-preview-section {
  display: grid;
  gap: 8px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.template-preview-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
}

.template-preview-section p,
.confirmation-message-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.65;
  white-space: pre-line;
}

.confirmation-message-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

.confirmation-message-card > header h3 {
  margin: 0;
}

.forms-management-shell,
.active-forms-workspace,
.forms-active-workspace {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.form-manager-home {
  min-width: 0;
  min-height: calc(100dvh - 138px);
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  overflow: hidden;
  background: rgba(244, 242, 239, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.form-manager-list {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: rgba(255, 255, 255, 0.78);
  border-right: 1px solid var(--line);
}

.form-manager-list-actions {
  display: grid;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--line);
}

.form-manager-list-actions > .button {
  width: 100%;
}

.form-manager-search {
  display: grid;
  gap: 5px;
  color: var(--ink-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.form-manager-search input {
  width: 100%;
  min-height: 40px;
  padding: 8px 11px;
  background: var(--panel-solid);
}

.form-manager-items {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 4px;
  overflow-y: auto;
  padding: 10px 8px 18px;
}

.form-manager-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 11px;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.form-manager-item:hover,
.form-manager-item:focus-visible {
  background: var(--brand-faint);
  border-color: rgba(255, 159, 0, 0.24);
  transform: translateX(2px);
}

.form-manager-item > span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.form-manager-item strong,
.form-manager-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-manager-item strong {
  font-size: 0.78rem;
}

.form-manager-item small {
  color: var(--ink-muted);
  font-size: 0.66rem;
}

.form-manager-intro {
  min-width: 0;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  padding: clamp(46px, 7vw, 92px) clamp(28px, 7vw, 96px);
}

.form-manager-intro > div {
  width: min(100%, 720px);
  padding: clamp(28px, 4vw, 44px);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.form-manager-intro h1 {
  margin: 7px 0 12px;
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  letter-spacing: -0.05em;
}

.form-manager-intro p:not(.eyebrow) {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.65;
}

.form-manager-intro .button-row {
  margin-top: 24px;
}

.forms-active-workspace > .workspace-header {
  align-items: flex-start;
  padding: 6px 0 20px;
  border-bottom: 1px solid var(--line-strong);
}

.active-forms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.active-form-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.active-form-card h3 {
  margin: 5px 0 6px;
  font-size: 1rem;
}

.active-form-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.active-form-card dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.active-form-card dl > div {
  min-width: 0;
  padding: 10px;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 9px;
}

.active-form-card dt {
  margin-bottom: 4px;
  color: var(--ink-muted);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.active-form-card dd {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-form-card > form {
  align-self: start;
  margin: 0;
}

.active-form-setup {
  padding: 22px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.active-form-rule-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  margin-top: 16px;
  padding: 18px;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.active-form-rule-form > label {
  min-width: 0;
}

.active-form-rule-form .checkbox-row {
  align-self: center;
}

.active-form-rule-form > .button {
  min-height: 44px;
}

.page-form-templates .settings-content > .workspace-header,
.page-active-forms .settings-content > .workspace-header {
  align-items: flex-start;
  padding: 6px 0 20px;
  border-bottom: 1px solid var(--line-strong);
}

.page-form-templates .settings-content > .workspace-header h1,
.page-active-forms .settings-content > .workspace-header h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
}

.page-form-templates .settings-content > .workspace-header .intro-text,
.page-active-forms .settings-content > .workspace-header .intro-text {
  max-width: 66ch;
  margin-bottom: 0;
}

.page-form-templates .settings-content > .forms-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-form-templates .form-card {
  min-height: 0;
  padding: 18px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.page-form-templates .form-card .meta-list {
  grid-template-columns: 90px minmax(0, 1fr);
  margin: 14px 0;
  font-size: 0.7rem;
}

.page-form-templates .form-card .button-row {
  gap: 7px;
}

.page-form-templates .settings-content > .panel,
.page-active-forms .settings-content > .panel,
.active-rules-panel {
  padding: 22px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.page-form-templates .settings-content > .panel > .form-row,
.page-active-forms .settings-content > .panel > .form-row,
.active-rule-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding: 18px;
  background: var(--panel-muted);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.active-rule-form .span-2,
.page-active-forms .settings-content > .panel > .form-row > .checkbox-row {
  grid-column: 1 / -1;
}

.active-rule-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.active-rule-summary strong {
  display: block;
  margin-bottom: 3px;
  font-size: 0.82rem;
}

.active-rule-summary p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.7rem;
}

.service-category-list { display: grid; gap: 12px; }
.service-category-group { overflow: hidden; background: rgba(255,255,255,.58); border: 1px solid var(--line); border-radius: var(--radius-md); }
.service-category-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; list-style: none; }
.service-category-group > summary::-webkit-details-marker { display: none; }
.service-category-group > summary > span:first-child { display: grid; gap: 2px; }
.service-category-group > summary > span:first-child > span { color: var(--ink-muted); font-size: .72rem; font-weight: 400; }
.service-category-group[open] > summary { background: var(--brand-faint); border-bottom: 1px solid var(--line); }
.service-table { min-width: 920px; }

/* Service catalog workspace */
.page-services .page-shell {
  height: 100dvh;
  overflow: hidden;
  padding: 16px 18px 16px 0;
}

.services-workspace {
  height: calc(100dvh - 32px);
  min-height: 620px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(24px) saturate(132%);
}

.services-commandbar {
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(200px, 0.65fr) minmax(420px, 1.7fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.66);
  border-bottom: 1px solid var(--line);
}

.services-commandbar h1,
.service-editor-header h1 { margin: 0; font-size: clamp(1.35rem, 1.7vw, 1.85rem); }
.services-commandbar .eyebrow,
.service-editor-header .eyebrow { margin-bottom: 4px; }
.services-search-form { min-width: 0; display: grid; grid-template-columns: minmax(220px, 1fr) 170px 180px; gap: 9px; }
.services-search-form label { min-width: 0; }
.services-search-form input,
.services-search-form select { width: 100%; min-height: 44px; }
.services-command-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.services-shell { min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }

.service-catalog-pane {
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  background: rgba(249, 245, 240, 0.72);
  border-right: 1px solid var(--line);
}

.service-status-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.service-status-tabs a {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  color: var(--ink-muted);
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}
.service-status-tabs a.is-active { color: var(--ink); background: var(--brand-soft); box-shadow: 0 4px 12px rgba(155, 90, 0, 0.1); }
.service-catalog-summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 4px 10px; color: var(--ink-muted); font-size: 0.72rem; }
.service-catalog-summary strong { color: var(--ink); }
.service-catalog-pane .service-category-list { gap: 9px; }
.service-catalog-pane .service-category-group { background: rgba(255, 255, 255, 0.6); }
.service-catalog-pane .service-category-group > summary { min-height: 56px; padding: 11px 12px; }
.service-catalog-pane .service-category-group > summary > span:first-child { min-width: 0; }
.service-catalog-pane .service-category-group > summary small { color: var(--ink-muted); font-size: 0.68rem; font-weight: 400; }
.category-caret { color: var(--ink-muted); font-size: 0.66rem; }
.service-category-group[open] .category-caret { font-size: 0; }
.service-category-group[open] .category-caret::after { content: "Hide"; font-size: 0.66rem; }
.service-category-rows { display: grid; padding: 6px; }

.service-catalog-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 11px 10px;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 13px;
  text-decoration: none;
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.service-catalog-row:hover { background: rgba(255, 255, 255, 0.8); border-color: var(--line); transform: translateX(2px); }
.service-catalog-row.is-selected { background: linear-gradient(135deg, #fff3dd, rgba(255, 255, 255, 0.9)); border-color: rgba(255, 159, 0, 0.55); box-shadow: 0 8px 20px rgba(155, 90, 0, 0.08); }
.service-row-main { min-width: 0; display: grid; gap: 2px; }
.service-row-main strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.service-row-main > span { color: var(--ink-muted); font-size: 0.66rem; }
.service-row-meta { display: flex; align-items: center; gap: 5px; color: var(--ink-muted); font-size: 0.62rem; white-space: nowrap; }
.service-online-dot { width: 8px; height: 8px; flex: 0 0 auto; background: #c9c1ba; border-radius: 50%; }
.service-online-dot.is-on { background: var(--forest); box-shadow: 0 0 0 3px var(--forest-soft); }
.service-row-alert { color: var(--danger); }

.service-editor-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: rgba(255, 255, 255, 0.48); }
.service-editor-empty { place-items: center; padding: 40px; text-align: center; }
.service-editor-empty > div { max-width: 480px; padding: 44px; background: rgba(255, 255, 255, 0.62); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.service-editor-empty p { color: var(--ink-muted); }
.service-editor-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.service-editor-header > div:first-of-type { min-width: 0; }
.service-editor-header p:last-child { margin: 4px 0 0; color: var(--ink-muted); font-size: 0.75rem; }
.service-editor-state { display: flex; align-items: center; gap: 8px; }
.saved-indicator { color: var(--forest); font-size: 0.7rem; font-weight: 600; }
.service-mobile-back { display: none; }
.service-editor-form { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.service-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.58);
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.service-tab { min-height: 38px; padding: 7px 13px; color: var(--ink-muted); background: transparent; border: 1px solid transparent; border-radius: var(--control-radius-compact); font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.service-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.72); }
.service-tab.is-active { color: var(--ink); background: var(--brand-soft); border-color: rgba(255, 159, 0, 0.3); }
.service-editor-scroll { min-height: 0; overflow-y: auto; padding: 24px; }
.service-tab-panel { width: min(100%, 980px); display: grid; gap: 22px; margin: 0 auto; }
.service-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.service-section-heading h2 { margin: 0 0 5px; }
.service-section-heading p { margin: 0; color: var(--ink-muted); font-size: 0.75rem; }
.service-form-grid { display: grid; gap: 16px; }
.service-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-form-grid .span-2 { grid-column: 1 / -1; }
.service-form-grid label { min-width: 0; }
.service-form-grid small,
.service-resource-requirement small { color: var(--ink-muted); }

.switch-control { min-height: 42px; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch-control input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-control > span { display: inline-flex; align-items: center; gap: 9px; font-size: 0.75rem; font-weight: 600; }
.switch-control > span::before { width: 42px; height: 24px; display: block; background: #d8d2cc; border: 1px solid rgba(22,22,22,.08); border-radius: 999px; box-shadow: inset 0 1px 3px rgba(0,0,0,.09); content: ""; transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
.switch-control > span::after { position: absolute; width: 18px; height: 18px; margin-left: 3px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.18); content: ""; transition: transform 160ms var(--ease-out); }
.switch-control input[type="checkbox"]:checked + span::before { background: var(--brand); }
.switch-control input[type="checkbox"]:checked + span::after { transform: translateX(18px); }
.switch-control input[type="checkbox"]:focus-visible + span::before { outline: 3px solid rgba(255, 159, 0, 0.3); outline-offset: 2px; }
.field-switch { align-self: end; padding: 0 4px; }

.service-summary-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.service-summary-strip > span { display: grid; gap: 2px; padding: 14px 16px; color: var(--ink-muted); background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: .68rem; }
.service-summary-strip strong { color: var(--ink); font-size: 1rem; }
.service-assignment-list { display: grid; gap: 9px; }
.service-assignment-row { min-height: 66px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 13px; background: rgba(255,255,255,.64); border: 1px solid var(--line); border-radius: 15px; cursor: pointer; }
.service-assignment-row:hover { border-color: rgba(255, 159, 0, .38); }
.service-assignment-row > input { width: 20px; height: 20px; accent-color: var(--brand); }
.service-assignment-row > span:nth-of-type(1) { min-width: 0; display: grid; gap: 2px; }
.service-assignment-row small { color: var(--ink-muted); }
.service-assignment-row.is-disabled { opacity: .52; cursor: not-allowed; }
.service-online-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 20px; align-items: start; }
.service-public-preview { position: sticky; top: 0; display: grid; gap: 10px; padding: 22px; background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,240,213,.64)); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.service-public-preview p { margin: 0; color: var(--ink-muted); font-size: .76rem; }
.service-resource-requirement { width: min(100%, 420px); }
.service-danger-zone { display: grid; gap: 5px; padding: 16px; color: var(--danger); background: var(--danger-soft); border: 1px solid rgba(163, 58, 57, .15); border-radius: var(--radius-md); }
.service-danger-zone span { font-size: .72rem; }
.service-editor-footer { min-height: 72px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 12px 20px; background: rgba(255,255,255,.78); border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
.service-editor-footer .button { min-width: 120px; }
.service-editor-footer-spacer { flex: 1 1 auto; }
.service-delete-button { min-width: 132px; }
.glass-dialog { width: min(520px, calc(100% - 28px)); padding: 0; background: rgba(255,255,255,.88); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); box-shadow: 0 32px 90px rgba(30,22,15,.28); backdrop-filter: blur(24px) saturate(135%); }
.glass-dialog::backdrop { background: rgba(22,22,22,.34); backdrop-filter: blur(6px); }
.category-dialog form { padding: 22px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Staff & permissions workspace */
.page-staff-permissions .page-shell { height: 100dvh; overflow: hidden; padding: 18px; }
.staff-workspace {
  height: 100%; min-height: 0; display: grid; grid-template-columns: 350px minmax(0, 1fr);
  overflow: hidden; background: rgba(255, 253, 249, 0.7); border: 1px solid var(--glass-line);
  border-radius: 28px; box-shadow: var(--shadow-glass); backdrop-filter: blur(22px) saturate(130%);
}
.staff-directory-pane { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: rgba(249, 245, 239, .72); border-right: 1px solid var(--line); }
.staff-directory-header { min-height: 116px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 18px 14px; }
.staff-directory-header h1 { margin: 2px 0 5px; font-size: clamp(1.4rem, 2vw, 1.85rem); }
.staff-directory-header p { margin: 0; color: var(--ink-muted); font-size: .72rem; }
.staff-filter-form { display: grid; gap: 9px; padding: 0 14px 14px; border-bottom: 1px solid var(--line); }
.staff-filter-form > div { display: grid; grid-template-columns: 1fr 1fr .78fr; gap: 7px; }
.staff-filter-form input,
.staff-filter-form select { min-height: 40px; padding: 8px 10px; font-size: .7rem; background: rgba(255,255,255,.76); }
.staff-search input { width: 100%; padding-left: 13px; }
.staff-list { min-height: 0; overflow-y: auto; padding: 9px; scrollbar-width: thin; }
.staff-list-row { min-height: 84px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; color: var(--ink); border: 1px solid transparent; border-radius: 16px; text-decoration: none; transition: 150ms var(--ease-out); }
.staff-list-row:hover { background: rgba(255,255,255,.66); border-color: var(--line); transform: translateX(2px); }
.staff-list-row.is-selected { background: linear-gradient(135deg, rgba(255,242,218,.92), rgba(255,255,255,.88)); border-color: rgba(255,159,0,.42); box-shadow: 0 8px 22px rgba(133,77,0,.08); }
.staff-avatar { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #3a2919; background: linear-gradient(145deg, #ffd58d, #ffa414); border: 1px solid rgba(255,255,255,.8); border-radius: 50%; box-shadow: 0 6px 14px rgba(121,74,15,.14); font-size: .72rem; font-weight: 700; }
.staff-avatar.is-pending { color: var(--ink-muted); background: rgba(224,218,210,.9); }
.staff-avatar.is-large { width: 60px; height: 60px; font-size: 1rem; }
.staff-list-copy { min-width: 0; display: grid; gap: 3px; }
.staff-list-copy strong,
.staff-list-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-list-copy strong { font-size: .79rem; }
.staff-list-copy small { color: var(--ink-muted); font-size: .63rem; }
.staff-list-state { min-width: 58px; display: grid; justify-items: end; gap: 2px; color: var(--ink-muted); font-size: .61rem; text-align: right; }
.staff-list-state i { width: 8px; height: 8px; display: block; background: #bbb5ae; border-radius: 50%; }
.staff-list-state i.is-online { background: #2f9d70; box-shadow: 0 0 0 4px rgba(47,157,112,.1); }
.staff-list-state small { font-size: .58rem; }
.pending-invites { margin: 8px; background: rgba(255,255,255,.46); border: 1px solid var(--line); border-radius: 16px; }
.pending-invites > summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 8px 11px; cursor: pointer; font-size: .7rem; font-weight: 600; }
.pending-invites > div { max-height: 230px; overflow-y: auto; padding: 0 7px 7px; }
.pending-invite-row { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 8px; padding: 9px 4px; border-top: 1px solid var(--line); }
.pending-invite-row .staff-avatar { width: 34px; height: 34px; font-size: .6rem; }
.pending-invite-row > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.pending-invite-row strong,
.pending-invite-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-invite-row strong { font-size: .68rem; }
.pending-invite-row small { color: var(--ink-muted); font-size: .58rem; }
.pending-invite-actions { grid-column: 2; display: flex; gap: 10px; }
.pending-invite-actions form { margin: 0; }
.staff-rail-empty { margin: 8px; color: var(--ink-muted); font-size: .68rem; }

.staff-editor-pane { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: rgba(255,255,255,.36); }
.staff-editor-empty { place-items: center; text-align: center; }
.staff-editor-empty > div { width: min(420px, calc(100% - 36px)); display: grid; justify-items: center; gap: 8px; color: var(--ink-muted); }
.staff-editor-empty h2,
.staff-editor-empty p { margin: 0; }
.staff-empty-icon { width: 68px; height: 68px; display: inline-flex; align-items: center; justify-content: center; color: #5f472e; background: rgba(255,196,93,.3); border: 1px solid rgba(255,159,0,.28); border-radius: 22px; font-weight: 700; }
.staff-editor-header { min-height: 108px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 15px; padding: 20px 24px 15px; border-bottom: 1px solid var(--line); }
.staff-editor-header h1 { margin: 2px 0 4px; font-size: clamp(1.55rem, 2.4vw, 2.2rem); }
.staff-editor-header p { margin: 0; color: var(--ink-muted); font-size: .72rem; }
.staff-editor-state { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.staff-mobile-back { display: none; }
.staff-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 10px 18px; background: rgba(255,255,255,.58); border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.staff-tab { min-height: 44px; padding: 7px 13px; color: var(--ink-muted); background: transparent; border: 1px solid transparent; border-radius: var(--control-radius-compact); font: inherit; font-size: .72rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.staff-tab:hover { color: var(--ink); background: rgba(255,255,255,.74); }
.staff-tab.is-active { color: var(--ink); background: var(--brand-soft); border-color: rgba(255,159,0,.3); }
.staff-editor-scroll { min-height: 0; overflow-y: auto; padding: 22px; scrollbar-width: thin; }
.staff-panel-form { width: min(100%, 1040px); min-height: 100%; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 16px; margin: 0 auto; }
.staff-panel-form > fieldset { min-width: 0; display: grid; align-content: start; gap: 16px; margin: 0; padding: 0; border: 0; }
.staff-section-card { display: grid; gap: 18px; padding: 22px; background: rgba(255,255,255,.7); border: 1px solid var(--glass-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
.staff-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.staff-section-heading h2,
.staff-section-heading p { margin: 0; }
.staff-section-heading p { margin-top: 5px; color: var(--ink-muted); font-size: .72rem; }
.staff-toggle-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.staff-toggle-card { min-height: 82px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 14px; background: rgba(250,247,243,.74); border: 1px solid var(--line); border-radius: 16px; cursor: pointer; }
.staff-toggle-card > input[type="hidden"] { display: none; }
.staff-toggle-card > span:first-of-type { display: grid; gap: 4px; }
.staff-toggle-card strong { font-size: .76rem; }
.staff-toggle-card small { color: var(--ink-muted); font-size: .66rem; line-height: 1.45; }
.staff-danger-card { grid-template-columns: minmax(0,1fr) auto; align-items: center; background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,235,232,.58)); border-color: rgba(163,58,57,.15); }
.staff-danger-card h2,
.staff-danger-card p { margin: 0; }
.staff-danger-card p { margin-top: 5px; color: var(--ink-muted); font-size: .7rem; }
.staff-form-footer { position: sticky; z-index: 4; bottom: -22px; min-height: 72px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 -22px -22px; padding: 12px 22px; background: rgba(255,255,255,.8); border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
.staff-form-footer [data-staff-unsaved] { margin-right: auto; color: var(--ink-muted); font-size: .68rem; }

.staff-access-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 22px; color: #fff; background: linear-gradient(135deg, rgba(52,43,32,.94), rgba(28,27,25,.94)); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); box-shadow: 0 18px 40px rgba(30,24,18,.14); }
.staff-access-hero h2,
.staff-access-hero p { margin: 0; }
.staff-access-hero p { max-width: 650px; margin-top: 5px; color: rgba(255,255,255,.67); font-size: .72rem; }
.staff-access-hero > div:last-child { display: grid; justify-items: end; }
.staff-access-hero > div:last-child strong { color: var(--brand); font-size: 2.1rem; }
.staff-access-hero > div:last-child span { color: rgba(255,255,255,.67); font-size: .64rem; }
.permission-toolbar { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(220px,1fr) auto; align-items: end; gap: 10px; }
.permission-toolbar label { margin: 0; }
.permission-groups { display: grid; gap: 10px; }
.permission-group { background: rgba(255,255,255,.68); border: 1px solid var(--glass-line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.permission-group > summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; }
.permission-group > summary > span { display: grid; gap: 3px; }
.permission-group > summary small { color: var(--ink-muted); font-size: .65rem; font-weight: 400; }
.permission-group > div { display: grid; padding: 0 8px 8px; }
.permission-group > .permission-group-actions { display: flex; justify-content: flex-end; padding: 0 8px 8px; }
.permission-row { min-height: 70px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px; border-top: 1px solid var(--line); cursor: pointer; }
.permission-row[hidden] { display: none; }
.permission-row > input { width: 20px; height: 20px; accent-color: var(--brand); }
.permission-row > span:nth-child(2) { display: grid; gap: 3px; }
.permission-row strong { font-size: .74rem; }
.permission-row small { color: var(--ink-muted); font-size: .66rem; line-height: 1.4; }
.permission-source { padding: 4px 8px; color: var(--ink-muted); background: var(--panel-muted); border-radius: 999px; font-size: .6rem; white-space: nowrap; }
.staff-audit-list,
.notification-queue-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.staff-audit-list li,
.notification-queue-list li { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.staff-audit-list li > span,
.notification-queue-list li > span:first-child { display: grid; gap: 2px; }
.staff-audit-list small,
.staff-audit-list time,
.notification-queue-list small { color: var(--ink-muted); font-size: .64rem; }

.staff-services-search { max-width: 480px; margin: 0; }
.staff-service-list { display: grid; gap: 14px; }
.staff-service-group { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; }
.staff-service-group > header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(245,241,236,.8); }
.staff-service-group > header span { color: var(--ink-muted); font-size: .66rem; }
.staff-service-row { min-height: 74px; display: grid; grid-template-columns: minmax(210px,1fr) 105px 105px 95px; align-items: end; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
.staff-service-row[hidden] { display: none; }
.staff-service-row > label { margin: 0; font-size: .62rem; }
.staff-service-row input { min-height: 38px; }
.staff-service-main { align-self: center; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; cursor: pointer; }
.staff-service-main > input { width: 20px; min-height: 20px; accent-color: var(--brand); }
.staff-service-main > span { display: grid; gap: 3px; }
.staff-service-main strong { font-size: .72rem; }
.staff-service-main small { color: var(--ink-muted); font-size: .62rem; }

.staff-schedule-list { display: grid; gap: 8px; }
.staff-schedule-row { min-height: 68px; display: grid; grid-template-columns: 190px minmax(300px,1fr) 70px; align-items: center; gap: 14px; padding: 10px 14px; background: rgba(249,247,244,.76); border: 1px solid var(--line); border-radius: 15px; }
.staff-schedule-row > div { display: grid; grid-template-columns: minmax(110px,1fr) auto minmax(110px,1fr); align-items: end; gap: 9px; }
.staff-schedule-row > div label { margin: 0; font-size: .6rem; }
.staff-schedule-row input[type="time"] { min-height: 38px; }
.schedule-day-state { color: var(--ink-muted); font-size: .65rem; text-align: right; }
.staff-schedule-row.is-off > div { opacity: .42; pointer-events: none; }
.staff-schedule-exceptions { display: grid; gap: 14px; }
.staff-exception-form { display: grid; grid-template-columns: .75fr 1fr 1fr 1.25fr auto; gap: 10px; align-items: end; margin-top: 14px; }
.staff-exception-form label { display: grid; gap: 6px; margin: 0; font-size: .68rem; font-weight: 700; }
.staff-schedule-exception-list { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.staff-schedule-exception-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; background: rgba(249,247,244,.76); border: 1px solid var(--line); border-radius: 13px; }
.staff-schedule-exception-list > li > span { display: grid; gap: 3px; }
.staff-schedule-exception-list small { color: var(--muted); }

.connector-strip { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.68); border: 1px solid var(--line); border-radius: 17px; }
.connector-strip > a { margin-left: auto; font-size: .68rem; }
.connector-state { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; color: var(--ink-muted); background: var(--panel-muted); border-radius: 999px; font-size: .63rem; }
.connector-state i { width: 7px; height: 7px; background: #aaa49e; border-radius: 50%; }
.connector-state.is-ready { color: var(--forest); background: var(--forest-soft); }
.connector-state.is-ready i { background: var(--forest); }
.notification-preference-head,
.notification-preference-row { display: grid; grid-template-columns: minmax(240px,1fr) auto; align-items: center; gap: 12px; }
.notification-preference-head { padding: 0 10px 8px; color: var(--ink-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.notification-preference-row { min-height: 64px; padding: 10px; border-top: 1px solid var(--line); }
.notification-preference-row > span { display: grid; gap: 3px; }
.notification-preference-row small { color: var(--ink-muted); font-size: .62rem; }
.notification-preference-row > div { display: grid; grid-template-columns: repeat(3, 80px); gap: 7px; }
.notification-channel { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px; background: rgba(248,245,241,.82); border: 1px solid var(--line); border-radius: 10px; font-size: .63rem; cursor: pointer; }
.notification-channel input { width: 16px; height: 16px; accent-color: var(--brand); }
.notification-channel.is-unavailable { opacity: .45; cursor: not-allowed; }

.staff-compensation-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.staff-compensation-summary article { display: grid; gap: 6px; padding: 16px; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--shadow-sm); }
.staff-compensation-summary span { color: var(--ink-muted); font-size: .65rem; }
.staff-compensation-summary strong { font-size: 1.25rem; }
.staff-compensation-summary article.is-highlight { background: linear-gradient(135deg, #fff0d2, rgba(255,255,255,.86)); border-color: rgba(255,159,0,.32); }
.compensation-total { color: var(--forest); font-size: 1.55rem; }

.staff-invite-dialog { width: min(650px, calc(100% - 28px)); }
.staff-invite-dialog form { padding: 22px; }
.staff-invite-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.staff-invite-dialog h2 { margin: 2px 0 0; }
.dialog-close { width: 40px; height: 40px; color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 50%; font: inherit; font-size: 1.35rem; cursor: pointer; }
.text-button { padding: 0; color: var(--link); background: transparent; border: 0; font: inherit; font-size: .64rem; cursor: pointer; }
.text-button.danger { color: var(--danger); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@media (max-width: 1320px) {
  .staff-workspace { grid-template-columns: 320px minmax(0,1fr); }
  .staff-service-row { grid-template-columns: minmax(190px,1fr) 92px 92px 88px; }
  .staff-compensation-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .page-form-template .template-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .page-form-template .template-rail {
    min-height: 0;
    grid-template-columns: auto minmax(180px, .8fr) minmax(260px, 1.2fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .page-form-template .template-rail > .button.primary { width: auto; white-space: nowrap; }
  .page-form-template .template-rail > .form-manager-search { min-width: 0; }
  .page-form-template .template-list {
    display: flex;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
  }
  .page-form-template .template-list-item {
    flex: 0 0 min(240px, 68vw);
    padding: 8px 11px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 7px 7px 0 0;
  }
  .page-form-template .template-list-item:hover,
  .page-form-template .template-list-item.is-active { border-left: 0; border-bottom-color: var(--brand); }
  .page-form-template .template-editor {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0;
    padding: 20px clamp(16px, 3vw, 30px) 42px;
  }
  .page-form-template .template-editor-header {
    grid-column: 1;
    min-height: 0;
    margin-bottom: 14px;
    padding-bottom: 16px;
  }
  .page-form-template .template-tabs {
    position: sticky;
    z-index: 4;
    top: -20px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: 0 calc(clamp(16px, 3vw, 30px) * -1) 18px;
    padding: 9px clamp(16px, 3vw, 30px);
    background: rgba(244, 242, 239, .96);
    border-bottom: 1px solid var(--line);
  }
  .page-form-template .template-tab { flex: 0 0 auto; }
}

@media (max-width: 1320px) {
  .services-commandbar { min-height: 142px; grid-template-columns: minmax(180px, 1fr) auto; gap: 10px; }
  .services-commandbar > div:first-child { grid-column: 1; grid-row: 1; }
  .services-command-actions { grid-column: 2; grid-row: 1; }
  .services-search-form { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(190px, 1fr) 145px 150px; }
  .services-shell { grid-template-columns: 300px minmax(0, 1fr); }
}

.report-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-delta { display: inline-flex; width: fit-content; margin-top: 10px; padding: 4px 8px; border-radius: 999px; font-size: .68rem; font-weight: 600; }
.metric-delta.positive { color: var(--forest); background: var(--forest-soft); }
.metric-delta.negative { color: var(--danger); background: var(--danger-soft); }
.metric-delta.neutral { color: var(--ink-muted); background: var(--panel-muted); }
.report-trend-panel { margin-top: 18px; }
.report-trend { width: 100%; height: 280px; display: block; margin: 12px 0; }
.report-health-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.report-health-strip article { display: grid; gap: 6px; padding: 18px; background: rgba(255,255,255,.68); border: 1px solid var(--line); border-radius: var(--radius-md); }
.report-health-strip article > span:first-child { color: var(--ink-muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.report-health-strip strong { font-size: 1.45rem; }

@media (max-width: 1100px) {
  body.nav-open { overflow: hidden; }

  .mobile-topbar {
    position: sticky;
    z-index: 45;
    top: max(10px, env(safe-area-inset-top));
    width: calc(100% - 24px);
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 12px 0;
    padding: 8px 10px 8px 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 22px;
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(22px) saturate(138%);
  }

  .mobile-brand { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
  .mobile-brand img { width: 78px; height: 53px; object-fit: contain; }
  .mobile-brand span { padding-left: 10px; border-left: 1px solid var(--line-strong); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; }

  .nav-toggle,
  .nav-close {
    appearance: none;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 13px;
    color: var(--ink);
    background: linear-gradient(135deg, #ffc25a, var(--brand));
    border: 1px solid rgba(239, 143, 0, 0.7);
    border-radius: 999px;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
  }

  .nav-toggle-lines { width: 16px; display: grid; gap: 5px; }
  .nav-toggle-lines i { height: 1.5px; display: block; background: currentColor; border-radius: 2px; }

  .topbar {
    inset: max(10px, env(safe-area-inset-top)) auto max(10px, env(safe-area-inset-bottom)) 10px;
    width: min(310px, calc(100vw - 32px));
    transform: translateX(calc(-100% - 22px));
    visibility: hidden;
    transition: transform 280ms var(--ease-out), visibility 280ms;
  }

  body.nav-open .topbar { transform: translateX(0); visibility: visible; }
  .nav-close { width: 44px; flex: 0 0 auto; padding: 0; font-size: 1.4rem; }
  .nav-scrim { position: fixed; z-index: 55; inset: 0; display: block; visibility: hidden; opacity: 0; background: rgba(22, 22, 22, 0.34); backdrop-filter: blur(6px); transition: opacity 220ms var(--ease-out), visibility 220ms; }
  body.nav-open .nav-scrim { visibility: visible; opacity: 1; }

  .page-shell { width: 100%; min-width: 0; overflow-x: hidden; margin-left: 0; padding: 24px 16px calc(48px + env(safe-area-inset-bottom)); }
  .page-services .page-shell { height: calc(100dvh - 96px); overflow: hidden; padding: 10px 12px 12px; }
  .services-workspace { height: 100%; min-height: 0; border-radius: 22px; }
  .services-commandbar { min-height: 124px; grid-template-columns: minmax(150px, .5fr) minmax(330px, 1.5fr); gap: 10px; padding: 12px 14px; }
  .services-command-actions { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .services-search-form { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr 1fr; }
  .services-search { grid-column: 1 / -1; }
  .services-shell { grid-template-columns: 300px minmax(0, 1fr); }
  .service-editor-scroll { padding: 20px; }
  .service-online-layout { grid-template-columns: 1fr; }
  .service-public-preview { position: static; }
  .split > * { width: 100%; max-width: 100%; min-width: 0; }
  .table-scroll { max-width: 100%; }
  .page-calendar .page-shell { height: calc(100dvh - 96px); padding: 10px 12px 12px; }
  .calendar-workspace { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); border-radius: 22px; }
  .calendar-rail { min-height: 118px; max-height: 150px; display: grid; grid-template-columns: 205px minmax(250px, 1fr) minmax(170px, 0.7fr); grid-auto-flow: column; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 10px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .calendar-rail-actions { grid-template-columns: repeat(2, minmax(150px, 1fr)); align-content: center; }
  .calendar-day-summary { align-content: center; }
  .calendar-legend { display: none; }
  .mini-calendar { min-width: 205px; }
  .mini-calendar header { min-height: 26px; }
  .mini-calendar-day { min-height: 18px; }
  .calendar-commandbar { min-height: 68px; }
  .appointment-form-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .booking-client-pane { grid-column: 1 / -1; }
  .appointment-create-drawer,
  .appointment-record-drawer { width: calc(100vw - 24px); }
  .appointment-create-shell .appointment-form-layout,
  .appointment-record-layout { grid-template-columns: 210px minmax(330px, 1fr) 270px; }
  .appointment-create-shell .booking-client-pane { grid-column: auto; }
  .hero,
  .panel-header,
  .workspace-header,
  .hero-actions,
  .inline-form,
  .form-row,
  .detail-grid,
  .forms-grid,
  .appointment-grid,
  .calendar-filter,
  .filter-bar,
  .queue-review-form { flex-direction: column; align-items: stretch; }

  .workspace-header { align-items: flex-start; }
  .calendar-header-actions { width: 100%; align-items: stretch; justify-content: space-between; }
  .calendar-header-actions > .button { align-self: flex-start; }
  .metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .settings-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: 1fr; gap: 12px; }
  .settings-sidebar { position: static; min-height: 0; border-right: 0; border-bottom: 1px solid rgba(210,198,188,.55); }
  .settings-nav { display: flex; gap: 16px; overflow-x: auto; margin-top: 14px; padding-bottom: 4px; }
  .settings-nav-group { min-width: max-content; }
  .settings-nav-link { padding: 7px 9px; }
  .report-health-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-card { min-width: 0; padding: 17px; }
  .metric-value { font-size: 1.55rem; }
  .calendar-controls { justify-content: space-between; }
  .calendar-filter label,
  .filter-bar label,
  .queue-review-form label { min-width: 0; }
  .profile-meta,
  .meta-list { grid-template-columns: 1fr; gap: 4px; }
  .button,
  button,
  input,
  select,
  textarea { min-height: 44px; }

  .appointment-drawer {
    inset: auto 0 0;
    width: 100%;
    height: min(88dvh, 900px);
    max-height: 88dvh;
    margin: auto 0 0;
    transform: translateY(32px);
  }
  .appointment-drawer[open] { transform: translateY(0); }
  .appointment-drawer-shell { border-top: 1px solid rgba(255, 255, 255, 0.9); border-left: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -24px 64px rgba(35, 27, 20, 0.18); }
  .appointment-record-shell { padding: 0; }
  .appointment-record-header { top: auto; margin: 0; }

  .page-forms .page-shell,
  .page-form-template .page-shell {
    height: calc(100dvh - 96px);
    min-height: 0;
    padding: 10px 12px 12px;
  }

  .page-forms .page-shell > .panel,
  .template-workspace {
    border-radius: 22px;
  }

  .submission-drawer {
    width: min(570px, 100vw);
  }

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

  .template-editor {
    grid-template-columns: 122px minmax(0, 1fr);
    column-gap: 18px;
    padding: 24px 22px 48px;
  }

  .page-form-templates .settings-content > .forms-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .forms-queue-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .forms-search-form {
    grid-template-columns: minmax(190px, 1fr) 160px auto;
  }

  .forms-queue-panel > .table-scroll {
    height: calc(100% - 118px);
  }

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

  .template-rail {
    min-height: 0;
    grid-template-columns: auto minmax(180px, 1fr) minmax(210px, 1.2fr);
    grid-template-rows: auto;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .template-rail > .button.primary {
    width: auto;
    white-space: nowrap;
  }

  .template-list {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: 0;
  }

  .template-list-item {
    min-width: 210px;
    min-height: 42px;
    padding: 8px 11px;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 7px 7px 0 0;
  }

  .template-list-item:hover,
  .template-list-item.is-active {
    border-left: 0;
    border-bottom-color: var(--brand);
  }

  .template-editor {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0;
    padding: 20px 18px 42px;
  }

  .template-editor-header {
    grid-column: 1;
    min-height: 0;
    margin-bottom: 14px;
    padding-bottom: 16px;
  }

  .template-tabs {
    position: sticky;
    z-index: 4;
    top: -20px;
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: 0 -18px 18px;
    padding: 9px 18px;
    background: rgba(244, 242, 239, 0.96);
    border-bottom: 1px solid var(--line);
  }

  .template-tab {
    min-height: 38px;
    flex: 0 0 auto;
    padding: 8px 11px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 7px 7px 0 0;
  }

  .template-tab:hover,
  .template-tab.is-active {
    border-left: 0;
    border-bottom-color: var(--brand);
  }

  .template-editor-panel {
    max-width: none;
  }

  .form-manager-home {
    min-height: calc(100dvh - 116px);
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .form-manager-list {
    grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1fr);
    grid-template-rows: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .form-manager-list-actions {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .form-manager-items {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 0.8fr);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
  }

  .form-manager-intro {
    place-items: start center;
    padding: 32px 22px 44px;
  }

  .active-forms-grid {
    grid-template-columns: 1fr;
  }

  .active-form-rule-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-form-templates .settings-content > .panel > .form-row,
  .page-active-forms .settings-content > .panel > .form-row,
  .active-rule-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .page-services .page-shell { height: calc(100dvh - 92px); padding: 8px; }
  .services-workspace { border-radius: 18px; }
  .services-commandbar { min-height: 0; grid-template-columns: 1fr auto; padding: 13px; }
  .services-commandbar > div:first-child { grid-column: 1; }
  .services-commandbar h1 { font-size: 1.35rem; }
  .services-search-form { grid-column: 1 / -1; grid-row: auto; grid-template-columns: 1fr 1fr; }
  .services-command-actions { grid-column: 2; grid-row: 1; }
  .services-command-actions .button.secondary { display: none; }
  .services-command-actions .button.primary { min-width: 64px; padding: 10px; font-size: 0.68rem; }
  .services-shell { display: block; }
  .service-catalog-pane { height: 100%; border-right: 0; }
  .services-workspace.has-editor .service-catalog-pane { display: none; }
  .services-workspace.has-editor .services-commandbar { display: none; }
  .services-workspace.has-editor .services-shell { height: 100%; }
  .service-editor-pane { height: 100%; }
  .service-editor-header { min-height: 82px; padding: 10px 13px; }
  .service-editor-header h1 { max-width: 66vw; overflow: hidden; font-size: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
  .service-editor-header p:last-child { display: none; }
  .service-mobile-back { min-width: 56px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; color: var(--ink); background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: 9px; font-size: .66rem; font-weight: 600; text-decoration: none; }
  .service-editor-state .saved-indicator { display: none; }
  .service-tabs { padding: 8px 10px; }
  .service-editor-scroll { padding: 17px 13px; }
  .service-form-grid.two,
  .service-summary-strip { grid-template-columns: 1fr; }
  .service-form-grid .span-2 { grid-column: auto; }
  .service-section-heading { align-items: flex-start; }
  .service-section-heading .button { min-width: auto; }
  .service-assignment-row { grid-template-columns: auto minmax(0, 1fr); }
  .service-assignment-row .status-pill { grid-column: 2; justify-self: start; }
  .service-editor-footer { min-height: 74px; padding: 10px 13px max(10px, env(safe-area-inset-bottom)); }
  .service-editor-footer .button { flex: 1; min-width: 0; }
  .settings-hub,
  .report-health-strip { grid-template-columns: 1fr; }
  .settings-main .settings-hub { grid-template-columns: 1fr; }
  .page-forms .page-shell > .panel > .panel-header:first-child { min-height: 64px; padding: 12px 14px; }
  .page-forms .page-shell > .panel > .panel-header:first-child .button-row { width: auto; }
  .page-forms .page-shell > .panel > .panel-header:first-child .button { min-width: 0; white-space: nowrap; }
  .page-forms .page-shell > .panel > .panel-header.top-gap,
  .forms-queue-toolbar { min-height: 112px; align-items: stretch; padding: 12px 14px; }
  .page-forms .table-scroll,
  .forms-queue-table { height: calc(100% - 176px); }
  .forms-queue-panel > .table-scroll { height: calc(100% - 164px); }
  .forms-search-form { grid-template-columns: minmax(0, 1fr) auto; }
  .forms-search { grid-column: 1 / -1; }
  .forms-status-filter { min-width: 0; }
  .submission-drawer { inset: auto 0 0; width: 100%; height: min(92dvh, 900px); border-radius: 22px 22px 0 0; animation-name: drawer-up; }
  .submission-drawer::before { inset: -100vh 0 100% 0; }
  .submission-drawer-header { border-radius: 22px 22px 0 0; }
  .submission-drawer-header { grid-template-columns: 38px minmax(0, 1fr); }
  .submission-drawer-header .status-pill { grid-column: 2; justify-self: start; margin-left: 0; }
  .submission-drawer-body { padding: 26px 20px max(38px, env(safe-area-inset-bottom)); }
  .submission-review-summary { grid-template-columns: 1fr; }
  .submission-review-summary span { text-align: left; }
  .submission-review-summary p { grid-column: 1; }
  .submission-actions { grid-template-columns: 1fr; }
  .submission-actions .button.primary { grid-column: 1; }
  .page-forms .compact-search { width: 100%; }
  .page-forms .compact-search input { flex: 1; width: auto; }
  .template-rail { grid-template-columns: auto auto; }
  .template-rail > .button.primary { justify-self: end; }
  .template-list { grid-column: 1 / -1; }
  .template-editor { padding: 18px 12px 38px; }
  .template-editor-header { flex-direction: column; gap: 10px; }
  .template-editor-header .support-copy { display: none; }
  .template-tabs { top: -18px; gap: 2px; margin: 0 -12px 14px; padding: 8px 12px; }
  .template-tab { flex: 0 0 auto; }
  .template-editor-panel { padding: 18px 14px; border-radius: 12px; }
  .template-field-row { grid-template-columns: 58px minmax(0,1fr) 34px; gap: 9px; }
  .template-field-row > span:last-of-type { display: none; }
  .template-field-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: 7px; border-top: 1px solid var(--line); }
  .field-type-grid { grid-template-columns: 1fr; }
  [data-form-field-editor] { width: 100%; max-height: none; padding: 19px 16px; border-radius: 14px; }
  .form-field-type-picker,
  .form-field-type-grid { grid-template-columns: 1fr; }
  .form-field-row-button { grid-template-columns: 1fr; gap: 5px; }
  .form-field-row-button .field-type { justify-self: start; }
  .field-row-action { display: none; }
  .form-preview-name > div { grid-template-columns: 1fr; }
  .form-preview-birthday > div { grid-template-columns: 1fr 1fr; }
  .form-preview-birthday > div label:first-child { grid-column: 1 / -1; }
  .template-preview-shell { padding: 8px; }
  .template-preview-card { padding: 22px 16px; }
  .form-manager-home { min-height: calc(100dvh - 104px); border-radius: 12px; }
  .form-manager-list { display: grid; grid-template-columns: 1fr; }
  .form-manager-list-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; padding: 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .form-manager-list-actions > .button { min-width: 0; padding-right: 10px; padding-left: 10px; }
  .form-manager-items { grid-auto-columns: minmax(190px, 82vw); }
  .form-manager-intro { padding: 18px 12px 32px; }
  .form-manager-intro > div { padding: 22px 18px; border-radius: 13px; }
  .form-manager-intro .button-row { align-items: stretch; flex-direction: column; }
  .form-manager-intro .button-row .button { width: 100%; }
  .forms-active-workspace > .workspace-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .active-form-card { grid-template-columns: minmax(0, 1fr) auto; padding: 15px; }
  .active-form-card dl { grid-template-columns: 1fr; }
  .active-form-rule-form { grid-template-columns: 1fr; padding: 14px; }
  .active-form-setup { padding: 16px 14px; }
  .submission-review-form,
  .submission-drawer-body > form.stack-form { margin-right: -4px; margin-left: -4px; padding: 16px; }
  .page-form-templates .settings-content > .panel,
  .page-active-forms .settings-content > .panel,
  .active-rules-panel { padding: 16px 14px; }
  .page-form-templates .settings-content > .panel > .form-row,
  .page-active-forms .settings-content > .panel > .form-row,
  .active-rule-form { padding: 14px; }
  .active-rule-summary { align-items: flex-start; flex-direction: column; }
  .settings-hub-card { min-height: 138px; }
  .segment-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .segment-chip { flex: 0 0 auto; }
  .client-table { min-width: 760px; }
  .report-trend { height: 240px; }
  .public-form-shell { width: min(100% - 20px, 900px); padding-top: 30px; }
  .field-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .public-form-card { padding: 22px 17px; }
  .signature-pad-wrap canvas { height: 160px; }
  .hero { padding: 26px 20px; }
  .panel { padding: 20px 17px; border-radius: 21px; }
  h1 { font-size: clamp(1.85rem, 10vw, 2.65rem); }
  .page-calendar .page-shell { height: calc(100dvh - 92px); padding: 8px; }
  .calendar-workspace { grid-template-rows: auto minmax(0, 1fr); border-radius: 18px; }
  .calendar-rail { min-height: auto; max-height: none; display: block; padding: 8px; }
  .mini-calendar,
  .calendar-day-summary,
  .calendar-legend { display: none; }
  .calendar-rail-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-quick-action { min-height: 52px; }
  .calendar-commandbar { min-height: 108px; align-items: stretch; flex-direction: column; gap: 8px; padding: 9px; }
  .calendar-date-navigation { justify-content: space-between; }
  .calendar-date-navigation > div { flex: 1; }
  .calendar-toolbar-actions { justify-content: flex-end; }
  .calendar-provider-chip { display: none; }
  .calendar-filter-popover form { right: -82px; }
  .calendar-instruction { padding: 6px 10px; font-size: 0.62rem; }
  .calendar-board { grid-auto-columns: minmax(278px, 1fr); grid-template-columns: 56px; }
  .calendar-time-rail { width: 56px; }
  .appointment-form-layout { grid-template-columns: 1fr; }
  .booking-client-pane { grid-column: auto; }
  .appointment-create-drawer,
  .appointment-record-drawer { width: 100vw; max-width: 100vw; }
  .appointment-create-shell { overflow-y: auto; }
  .appointment-create-shell .appointment-form { display: block; overflow: visible; }
  .appointment-create-shell .appointment-form-layout,
  .appointment-record-layout { display: block; overflow: visible; }
  .appointment-create-shell .booking-pane,
  .appointment-record-rail,
  .appointment-record-main,
  .appointment-record-client { overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); }
  .appointment-create-shell .appointment-drawer-footer { position: sticky; bottom: 0; }
  .service-choice-grid { max-height: none; }
  .calendar-header-actions { flex-direction: column; }
  .calendar-controls { width: 100%; }
  .appointment-drawer-shell { padding: 18px 16px; }
  .appointment-drawer-header { top: -18px; margin: -18px -16px 18px; padding: 18px 16px; }
  .appointment-record-shell { padding: 0; }
  .appointment-record-header { top: auto; margin: 0; padding: 14px 16px; }
  .appointment-record-header-actions .button { display: none; }
  .appointment-record-content { padding: 0; }
  .appointment-record-content > .split > .panel { padding: 16px 14px; }
  .appointment-drawer-footer { bottom: -18px; grid-template-columns: 1fr; margin: 8px -16px -18px; padding: 14px 16px max(16px, env(safe-area-inset-bottom)); }
  .appointment-drawer { height: min(94dvh, 980px); max-height: 94dvh; }
}

/* Settings Forms: one left navigation surface at every depth. */
.nav-panel-action {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 9px 12px;
  color: var(--ink);
  background: var(--brand);
  border: 1px solid rgba(255, 220, 161, 0.72);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(255, 159, 0, 0.18);
}

.nav-panel-search {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
  color: rgba(248, 243, 237, 0.5);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.nav-panel-search input {
  width: 100%;
  min-height: 39px;
  padding: 8px 11px;
  color: var(--sidebar-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

.nav-panel-search input::placeholder { color: rgba(248, 243, 237, 0.42); }
.nav-panel-search input:focus { border-color: rgba(255, 159, 0, 0.72); outline: 2px solid rgba(255, 159, 0, 0.18); }

.nav-panel-template {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 9px;
  color: rgba(248, 243, 237, 0.84);
  border: 1px solid transparent;
  border-radius: 7px;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.nav-panel-template:hover,
.nav-panel-template:focus-visible {
  color: var(--sidebar-text);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.09);
  transform: translateX(2px);
}

.nav-panel-template > span:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.nav-panel-template strong,
.nav-panel-template small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-panel-template strong { font-size: 0.72rem; }
.nav-panel-template small { color: rgba(248, 243, 237, 0.48); font-size: 0.62rem; }
.nav-panel-template .status-pill { padding: 4px 6px; font-size: 0.52rem; }
.nav-panel-link.is-disabled { opacity: 0.38; pointer-events: none; }
.nav-panel-link.nav-panel-submit {
  appearance: none;
  width: 100%;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.form-manager-home.form-manager-home-single {
  grid-template-columns: minmax(0, 1fr);
}

.template-workspace.template-workspace-single {
  display: block;
}

.template-workspace-single .template-editor.template-editor-single {
  display: block;
  overflow-y: auto;
  padding: 28px clamp(22px, 4vw, 62px) 58px;
}

.template-workspace-single .template-editor-header {
  width: min(100%, 1120px);
  min-height: 0;
  margin: 0 auto 26px;
}

.template-workspace-single .template-editor-panel,
.template-workspace-single .template-details-form,
.template-workspace-single .template-preview-card {
  width: min(100%, 920px);
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 640px) {
  .template-workspace-single .template-editor.template-editor-single { padding: 18px 12px 38px; }
  .template-workspace-single .template-editor-header { display: flex; margin-bottom: 18px; }
}

@media (max-width: 430px) {
  .page-shell { padding-right: 12px; padding-left: 12px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .auth-chip > span { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-topbar { width: calc(100% - 16px); margin-right: 8px; margin-left: 8px; }
}

@media (pointer: coarse) {
  .nav-section a { min-height: 44px; }
}

@media (max-width: 1320px) {
  .page-staff-permissions .page-shell { height: calc(100dvh - 96px); padding: 10px 12px 12px; }
  .staff-workspace { grid-template-columns: 1fr; border-radius: 22px; }
  .staff-directory-pane { border-right: 0; }
  .staff-workspace.mobile-editor-open .staff-directory-pane { display: none; }
  .staff-workspace:not(.mobile-editor-open) .staff-editor-pane { display: none; }
  .staff-mobile-back { min-height: 36px; display: inline-flex; align-items: center; padding: 6px 11px; color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .67rem; font-weight: 600; cursor: pointer; }
  .staff-editor-header { grid-template-columns: auto auto minmax(0,1fr) auto; padding: 14px; }
  .staff-editor-header .staff-avatar.is-large { width: 48px; height: 48px; }
  .staff-editor-header h1 { font-size: 1.45rem; }
  .staff-editor-state { max-width: 155px; }
  .staff-editor-scroll { padding: 16px; }
  .staff-form-footer { bottom: -16px; margin: 0 -16px -16px; padding: 11px 16px; }
}

@media (max-width: 760px) {
  .staff-directory-header { min-height: 102px; padding: 16px 14px 12px; }
  .staff-directory-header h1 { font-size: 1.45rem; }
  .staff-filter-form > div { grid-template-columns: 1fr 1fr; }
  .staff-filter-form > div label:last-child { grid-column: 1 / -1; }
  .staff-editor-header { grid-template-columns: auto minmax(0,1fr); gap: 9px; }
  .staff-editor-header .staff-mobile-back { grid-column: 1 / -1; width: fit-content; }
  .staff-editor-header .staff-avatar { grid-column: 1; }
  .staff-editor-header > div:nth-of-type(2) { grid-column: 2; }
  .staff-editor-state { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
  .staff-tabs { padding: 8px 10px; }
  .staff-editor-scroll { padding: 11px; }
  .staff-section-card { gap: 15px; padding: 16px; border-radius: 18px; }
  .staff-section-heading { align-items: flex-start; flex-direction: column; }
  .staff-toggle-grid,
  .staff-compensation-summary { grid-template-columns: 1fr; }
  .staff-panel-form .service-form-grid.two { grid-template-columns: 1fr; }
  .staff-panel-form .service-form-grid .span-2 { grid-column: auto; }
  .staff-danger-card { grid-template-columns: 1fr; }
  .staff-access-hero { grid-template-columns: 1fr; }
  .staff-access-hero > div:last-child { justify-items: start; }
  .permission-toolbar { grid-template-columns: 1fr; }
  .permission-row { grid-template-columns: auto minmax(0,1fr); }
  .permission-source { grid-column: 2; width: fit-content; }
  .staff-service-row { grid-template-columns: minmax(0,1fr) 1fr 1fr; align-items: end; }
  .staff-service-main { grid-column: 1 / -1; }
  .staff-service-row > .switch-control { align-self: center; }
  .staff-schedule-row { grid-template-columns: 1fr auto; gap: 8px; }
  .staff-schedule-row > div { grid-column: 1 / -1; grid-row: 2; }
  .schedule-day-state { grid-column: 2; grid-row: 1; }
  .staff-exception-form { grid-template-columns: 1fr; }
  .staff-exception-form .button { width: 100%; }
  .staff-schedule-exception-list > li { align-items: flex-start; flex-direction: column; }
  .connector-strip { align-items: flex-start; flex-wrap: wrap; }
  .connector-strip > a { width: 100%; margin-left: 0; }
  .notification-preference-head { display: none; }
  .notification-preference-row { grid-template-columns: 1fr; }
  .notification-preference-row > div { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .staff-form-footer { bottom: -11px; margin: 0 -11px -11px; }
  .staff-form-footer .button { width: 100%; }
  .staff-form-footer [data-staff-unsaved] { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar { background: #1c1b19; backdrop-filter: none; }
  .hero,
  .metric-card,
  .page-login .auth-panel,
  .public-form-card,
  .mobile-topbar,
  .module-tabs,
  .button.secondary { background: #fffaf4; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.commerce-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.commerce-overview article {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 18px;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.commerce-overview span,
.commerce-overview small { color: var(--ink-muted); }
.commerce-overview strong { font-size: clamp(1.3rem, 2.5vw, 2rem); }

.commerce-action-panel { padding: 0; overflow: clip; }
.commerce-action-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}
.commerce-action-panel > summary::-webkit-details-marker { display: none; }
.commerce-action-panel > summary > span:first-child { display: grid; gap: 3px; }
.commerce-action-panel > summary small { color: var(--ink-muted); font-weight: 400; }
.commerce-action-panel[open] > summary { border-bottom: 1px solid var(--line); }
.commerce-action-grid { padding: 16px; }
.commerce-action-grid > .panel { box-shadow: none; }

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

@media (max-width: 560px) {
  .commerce-overview { grid-template-columns: 1fr; }
  .commerce-action-panel > summary { align-items: flex-start; padding: 16px; }
}

/* Send-ready Forms workflow */
.form-title-cell {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.form-title-cell strong,
.form-title-cell small {
  display: block;
  line-height: 1.35;
}

.template-tab.is-disabled {
  cursor: not-allowed;
  color: var(--ink-muted);
  opacity: 0.52;
}

.rule-step-label {
  display: block;
  margin-bottom: 5px;
  color: var(--brand-deep);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-send-workspace {
  width: min(1040px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.form-send-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.form-send-summary > div {
  min-width: 0;
  padding: 18px 20px;
  display: grid;
  gap: 5px;
}

.form-send-summary > div + div { border-left: 1px solid var(--line); }
.form-send-summary span { color: var(--ink-muted); font-size: 0.72rem; }
.form-send-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.form-send-form {
  display: grid;
  gap: 14px;
}

.form-send-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.form-send-step-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--brand-deep);
  background: var(--brand-faint);
  border: 1px solid rgba(174, 112, 32, 0.22);
  border-radius: 50%;
  font-weight: 750;
}

.form-send-step h2 { margin: 0 0 4px; font-size: 1.12rem; }
.form-send-step p { margin: 0 0 16px; color: var(--ink-soft); }
.form-send-step label { display: grid; gap: 7px; }

.form-send-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.form-send-channel {
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: start;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
}

.form-send-channel:has(input:checked) {
  background: var(--brand-faint);
  border-color: rgba(174, 112, 32, 0.5);
  box-shadow: 0 0 0 2px rgba(245, 163, 54, 0.1);
}

.form-send-channel span { display: grid; gap: 3px; }
.form-send-channel small { color: var(--ink-muted); font-weight: 450; }

.form-send-review dl {
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.form-send-review dl > div {
  padding: 12px;
  background: var(--surface-soft);
  border-radius: var(--control-radius);
}

.form-send-review dt { color: var(--ink-muted); font-size: 0.7rem; }
.form-send-review dd { margin: 5px 0 0; font-weight: 650; }
.form-send-empty { min-height: 310px; padding: 32px; }

.form-send-success-card {
  max-width: 780px;
  margin: 16px auto 0;
  display: grid;
  gap: 24px;
  padding: clamp(24px, 5vw, 42px);
}

.form-link-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.form-link-copy input { min-width: 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.78rem; }

.appointment-form-box { display: grid; gap: 12px; }
.appointment-form-box > p { margin: 0; }
.appointment-form-box > .button { width: fit-content; }

.appointment-form-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.appointment-form-status > div { display: grid; gap: 2px; }
.appointment-form-status small { color: var(--ink-muted); }

.dynamic-public-form {
  display: grid;
  gap: 22px;
}

.dynamic-form-heading {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.dynamic-form-heading h2,
.dynamic-form-copy h3 { margin: 0 0 6px; }
.dynamic-form-heading p,
.dynamic-form-copy p { margin: 0; color: var(--ink-soft); white-space: pre-line; }

.dynamic-form-copy,
.dynamic-appointment-details {
  padding: 16px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
}

.dynamic-appointment-details { display: grid; gap: 5px; }
.dynamic-appointment-details span { color: var(--ink-soft); }
.dynamic-answer-field { display: grid; gap: 7px; }
.dynamic-answer-field > span { font-weight: 650; }

.dynamic-choice-field {
  margin: 0;
  padding: 0;
  border: 0;
}

.dynamic-choice-field legend { margin-bottom: 5px; font-weight: 650; }
.dynamic-choice-field > small { display: block; margin-bottom: 10px; color: var(--ink-muted); }

.dynamic-signature-field {
  display: grid;
  gap: 12px;
  padding-top: 8px;
}

.dynamic-signature-field canvas {
  width: 100%;
  height: 180px;
  background: #fffdf8;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  touch-action: none;
}

.signature-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.signature-controls label { display: flex; align-items: center; gap: 8px; }

.public-form-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.82);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.public-form-submit p { margin: 0; color: var(--ink-muted); }

@media (max-width: 760px) {
  .form-send-summary,
  .form-send-review dl,
  .form-send-channels { grid-template-columns: 1fr; }
  .form-send-summary > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .form-send-step { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 18px 14px; }
  .form-send-step-number { width: 32px; height: 32px; }
  .form-link-copy { grid-template-columns: 1fr; }
  .public-form-submit { align-items: stretch; flex-direction: column; }
  .public-form-submit .button { width: 100%; }
}

/* Workspace setup, connection health, and Inbox onboarding states. */
.workspace-subview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-strong);
}

.workspace-subview-header h1,
.workspace-subview-header h2,
.workspace-subview-header h3 { margin-bottom: 0; }
.workspace-subview-header p { max-width: 68ch; margin: 6px 0 0; color: var(--ink-muted); }

.connection-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.connection-status-strip {
  margin-top: 18px;
  padding: clamp(20px, 3vw, 30px);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.connection-status-strip > .button-row { margin-top: 16px; }
.connection-status-channel { display: block; margin-bottom: 7px; color: var(--ink); font-size: 0.86rem; font-weight: 700; }

.connection-status-card {
  --connection-state: var(--ink-muted);
  --connection-state-soft: var(--panel-muted);
  position: relative;
  min-width: 0;
  min-height: 150px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-content: start;
  gap: 5px 13px;
  overflow: hidden;
  padding: 18px;
  background:
    radial-gradient(circle at 0 0, var(--connection-state-soft), transparent 9rem),
    rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.connection-status-card::before {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--connection-state);
  background: var(--connection-state-soft);
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  content: "\2022";
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.connection-status-card > * { min-width: 0; grid-column: 2; }
.connection-status-card > .connection-status-meta { grid-column: 1 / -1; }
.connection-status-card h2,
.connection-status-card h3 { margin: 1px 0 2px; font-size: 0.92rem; letter-spacing: -0.018em; }
.connection-status-card p { margin: 0; color: var(--ink-muted); font-size: 0.76rem; line-height: 1.55; }

.connection-status-card.is-healthy {
  --connection-state: var(--forest);
  --connection-state-soft: var(--forest-soft);
}
.connection-status-card.is-healthy::before { content: "\2713"; }

.connection-status-card.is-warning {
  --connection-state: var(--warning);
  --connection-state-soft: var(--warning-soft);
}
.connection-status-card.is-warning::before { content: "!"; }

.connection-status-card.is-degraded {
  --connection-state: var(--danger);
  --connection-state-soft: var(--danger-soft);
}
.connection-status-card.is-degraded::before { content: "\00D7"; }

.connection-status-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-top: 12px;
  padding-top: 12px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
  line-height: 1.45;
}

.connection-status-meta > * { min-width: 0; }
.connection-status-meta strong { color: var(--connection-state, var(--ink-soft)); font-weight: 650; }

.inbox-empty-state {
  position: relative;
  min-height: clamp(280px, 42vh, 430px);
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  padding: clamp(30px, 6vw, 64px);
  background:
    radial-gradient(circle at 50% 18%, var(--brand-faint), transparent 12rem),
    rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  text-align: center;
}

.inbox-empty-state::before {
  width: 54px;
  height: 4px;
  margin-bottom: 22px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  border-radius: 999px;
  content: "";
}

.inbox-empty-state h1,
.inbox-empty-state h2,
.inbox-empty-state h3 { max-width: 22ch; margin-bottom: 10px; }
.inbox-empty-state p { max-width: 58ch; margin: 0; color: var(--ink-muted); }

.inbox-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.setup-checklist {
  display: grid;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  list-style: none;
}

.calendar-setup-dialog {
  width: min(680px, calc(100vw - 28px));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.calendar-setup-shell { display: grid; gap: 18px; padding: clamp(22px, 4vw, 34px); }
.calendar-setup-shell > .panel-header { margin: 0; }
.calendar-setup-shell > .support-copy { margin: -8px 0 0; }
.calendar-setup-shell > .setup-checklist-actions {
  grid-column: 1;
  grid-row: auto;
  justify-content: flex-end;
  margin: 0;
}

.setup-checklist-item {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px 18px;
  padding: 17px 18px 17px 58px;
  transition: background 180ms var(--ease-out), color 180ms var(--ease-out);
}

.setup-checklist-item + .setup-checklist-item { border-top: 1px solid var(--line); }

.setup-checklist-item::before {
  position: absolute;
  top: 17px;
  left: 18px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  background: var(--panel-solid);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  content: "";
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.setup-checklist-item > :not(.setup-checklist-actions) { min-width: 0; grid-column: 1; }
.setup-checklist-item > span { display: grid; gap: 4px; }
.setup-checklist-item h2,
.setup-checklist-item h3,
.setup-checklist-item strong { margin: 0; font-size: 0.84rem; }
.setup-checklist-item p,
.setup-checklist-item small { margin: 0; color: var(--ink-muted); font-size: 0.72rem; line-height: 1.5; }

.setup-checklist-item.is-complete {
  background: linear-gradient(90deg, rgba(228, 240, 234, 0.72), rgba(255, 255, 255, 0.36));
}

.setup-checklist-item.is-complete::before {
  color: #fffaf2;
  background: var(--forest);
  border-color: var(--forest);
  content: "\2713";
}

.setup-checklist-item.is-complete h2,
.setup-checklist-item.is-complete h3,
.setup-checklist-item.is-complete strong { color: var(--forest); }

.setup-checklist-actions {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

@media (hover: hover) {
  .connection-status-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .setup-checklist-item:not(.is-complete):hover { background: var(--brand-faint); }
}

@media (max-width: 760px) {
  .workspace-subview-header { align-items: stretch; flex-direction: column; gap: 12px; }
  .workspace-subview-header > .button,
  .workspace-subview-header > .button-row { width: 100%; }
  .workspace-subview-header > .button-row .button { flex: 1; }
  .connection-status-grid { grid-template-columns: 1fr; }
  .connection-status-card { min-height: 0; padding: 16px; }
  .inbox-empty-state { min-height: 300px; padding: 34px 18px; }
  .inbox-empty-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .inbox-empty-actions .button { width: 100%; }
  .setup-checklist-item { grid-template-columns: 1fr; padding: 16px 14px 16px 52px; }
  .setup-checklist-item::before { top: 16px; left: 14px; }
  .setup-checklist-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 8px; }
  .setup-checklist-actions .button { flex: 1; }
}

@media (prefers-reduced-transparency: reduce) {
  .connection-status-card,
  .inbox-empty-state,
  .setup-checklist { background: var(--panel-solid); }
}

@media (prefers-reduced-motion: reduce) {
  .connection-status-card,
  .setup-checklist-item { transition: none; }
  .connection-status-card:hover { transform: none; }
}

/* Staff QA Center */
.qa-report-trigger {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 65;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  color: #15120e;
  font: inherit;
  font-weight: 700;
  background: var(--brand);
  border: 1px solid var(--brand-strong);
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(82, 55, 12, .24);
  cursor: pointer;
}

.qa-report-trigger:hover { background: var(--brand-strong); }

.page-staff-permissions .qa-report-trigger { bottom: 96px; }

.qa-reporter {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  margin: auto 16px auto auto;
  padding: 0;
  color: var(--ink);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
}

.qa-reporter::backdrop { background: rgba(20, 18, 15, .48); backdrop-filter: blur(5px); }
.qa-reporter-form { display: grid; gap: 16px; padding: 24px; }
.qa-reporter-form > header,
.qa-reporter-form > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qa-reporter-form > header { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.qa-reporter-form > header h2 { margin: 2px 0 0; }
.qa-reporter-form > footer { padding-top: 16px; border-top: 1px solid var(--line); }
.qa-reporter-form label,
.qa-item-form label,
.qa-new-run label,
.qa-approval-panel label { display: grid; gap: 7px; font-size: .84rem; font-weight: 650; }
.qa-reporter-form input,
.qa-reporter-form select,
.qa-reporter-form textarea,
.qa-item-form input,
.qa-item-form select,
.qa-item-form textarea,
.qa-new-run input,
.qa-approval-panel textarea { width: 100%; }
.qa-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.qa-drop-zone {
  min-height: 116px;
  align-content: center;
  justify-items: center;
  padding: 20px;
  text-align: center;
  background: var(--brand-faint);
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  cursor: pointer;
}
.qa-drop-zone input { max-width: 100%; }
.qa-drop-zone span { color: var(--muted); font-weight: 500; }
.qa-capture-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qa-capture-actions small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

.qa-page { display: grid; gap: 20px; }
.qa-run-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; }
.qa-run-tab {
  display: grid;
  flex: 0 0 auto;
  gap: 2px;
  min-width: 180px;
  padding: 13px 15px;
  color: var(--ink);
  text-decoration: none;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.qa-run-tab.active { background: var(--brand-faint); border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.qa-run-tab small { color: var(--muted); }
.qa-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; gap: 20px; }
.qa-workspace { min-width: 0; padding: 22px; }
.qa-workspace > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.qa-workspace > header h2 { margin: 3px 0 0; }
.qa-side-column { display: grid; gap: 18px; position: sticky; top: 20px; }
.qa-new-run,
.qa-approval-panel { padding: 20px; }
.qa-new-run form,
.qa-approval-panel form { display: grid; gap: 14px; }
.qa-new-run h2,
.qa-approval-panel h2 { margin: 3px 0 16px; }
.qa-item-list { display: grid; gap: 12px; padding-top: 18px; }
.qa-item { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 16px; overflow: clip; }
.qa-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px; cursor: pointer; list-style: none; }
.qa-item > summary::-webkit-details-marker { display: none; }
.qa-item > summary > span:first-child { display: flex; align-items: center; gap: 11px; min-width: 0; }
.qa-item > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-priority { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.qa-item-form { display: grid; gap: 14px; padding: 18px; background: var(--panel-solid); border-top: 1px solid var(--line); }
.qa-item-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qa-package-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; }
.qa-package-check input { width: auto; }
.qa-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.qa-gallery a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.qa-gallery img { width: 100%; height: 100%; object-fit: cover; }
.qa-history { margin: 0 18px 18px; color: var(--muted); font-size: .82rem; }
.qa-history ol { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 20px; }
.qa-history time { margin-left: 5px; font-size: .75rem; }
.qa-status { display: inline-flex; align-items: center; min-height: 25px; padding: 3px 9px; border-radius: 999px; color: var(--muted); background: #eee9e2; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.qa-status-passed,
.qa-status-closed { color: #235b49; background: #e0f0e9; }
.qa-status-issue-found,
.qa-status-critical { color: #8b332d; background: #fae5e2; }
.qa-status-blocked { color: #8a5a0a; background: #fff0c9; }
.qa-status-ready-for-fix,
.qa-status-fixing,
.qa-status-ready-for-retest { color: #6b4b0c; background: var(--brand-faint); }
.qa-package-list { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.qa-package-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qa-package-list a { color: var(--ink); font-weight: 700; }
.qa-package-list form { display: flex; align-items: center; gap: 6px; }
.qa-package-list select { min-width: 118px; padding: 7px 28px 7px 8px; font-size: .72rem; }

@media (max-width: 980px) {
  .qa-layout { grid-template-columns: 1fr; }
  .qa-side-column { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .qa-report-trigger { right: 14px; bottom: 14px; min-height: 42px; padding: 0 14px; }
  .page-staff-permissions .qa-report-trigger { bottom: 86px; }
  .qa-reporter { width: 100%; max-height: 94vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .qa-reporter-form { padding: 18px; }
  .qa-reporter-form > footer,
  .qa-item-actions { align-items: stretch; flex-direction: column-reverse; }
  .qa-reporter-form > footer > *,
  .qa-item-actions .button { width: 100%; }
  .qa-form-grid,
  .qa-side-column { grid-template-columns: 1fr; }
  .qa-workspace { padding: 16px; }
  .qa-workspace > header { align-items: flex-start; flex-direction: column; }
  .qa-item > summary { align-items: flex-start; }
  .qa-item > summary > span:first-child { align-items: flex-start; flex-direction: column; }
  .qa-item > summary strong { white-space: normal; }
}