:root {
  --bg: #f1f7f7;
  --white: #ffffff;
  --ink: #021a1a;
  --muted: #0b4539;
  --green: #02624c;
  --green2: #053128;
  --lime: #c9eedf;
  --line: #ccdfda;
  --soft: #e5f5ee;
  --accent: #02df82;
  --accent-hover: #2ec195;
  --accent-ink: #02624c;
  --canvas: #f1f7f7;
  --sidebar: #021a1a;
  --secondary: #0b4539;
}

body, body.business-mode { background: var(--bg); color: var(--ink); }
body { line-height: 1.6; }
::selection { background: #a0ffe3; color: #021a1a; }
button, a, input, select, textarea { touch-action: manipulation; }
:is(button,a,input,select,textarea,summary):focus-visible {
  outline: 3px solid #02624c;
  outline-offset: 3px;
}
body > .demo-notice, body.business-mode > .demo-notice {
  background: #dff5eb;
  color: #0b4539;
  border-color: #aacbc3;
  padding: 10px 24px;
  line-height: 1.5;
}
body .demo-notice a, body.business-mode .demo-notice a { color: #053128; font-weight: 600; }

body #app :is(.eyebrow,.muted,.under-button,.small-print,.field small,
  .field-optional,.customer-summary,.data-note,.chart-caption,.chart-y,
  .chart-key,.chart-month small,.metric-card>small,.metric-spark,
  .business-title p,.panel-heading p,.table-sub,.table-customer small,
  .history-row small,.board-footer,.breadcrumb,.sample-pill,.demo-footer,
  .rule p,.response-footnote,.activity-item small,.preview-label) {
  color: var(--secondary);
}
body #app :is(h1,h2,h3,.metric-label,.table-customer strong,.history-row strong,
  .business-table .amount,.mix-line b,.status-line b) { color: var(--ink); }
em { color: var(--accent-ink); }
.collection-hero p, .demo-card p, .demo-help p { color: var(--secondary); }
.demo-header { background: #f8fcfa; border-color: var(--line); gap: 20px; }
.tidy-brand { color: var(--ink); }
.tidy-brand small { color: var(--secondary); line-height: 1.45; }
.demo-header nav a { min-height: 44px; border-radius: 10px; }
.demo-header nav a.selected, .demo-header nav a:hover { background: var(--soft); }
.demo-card { border-color: var(--line); box-shadow: 0 2px 4px #06362805; }
.demo-card:hover { border-color: #4ed2aa; box-shadow: 0 12px 28px #06362810; }
.demo-help, .estimate-card { background: #e5f5ee; border-color: #aacbc3; }
.soft-note, .sample-fill, .icon-box { background: var(--soft); color: #0b4539; }
.sample-fill { border-color: #19876c; border-style: solid; min-height: 46px; }

body #app .btn, #detail-dialog .btn {
  background: var(--accent);
  color: #021a1a;
  border: 1px solid #19876c;
  min-height: 46px;
  padding: 11px 17px;
  border-radius: 10px;
  font-weight: 600;
  gap: 10px;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  box-shadow: 0 1px 2px #0c3d2e08;
  transition: background .18s, box-shadow .18s, transform .18s;
}
body #app .btn:hover, #detail-dialog .btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 10px #0c3d2e14;
}
body #app .btn.secondary, #detail-dialog .btn.secondary {
  background: white;
  color: var(--ink);
  border-color: #aacbc3;
}
body #app .btn.secondary:hover, #detail-dialog .btn.secondary:hover { background: #edf8f3; }
body #app .btn:disabled { background: #d9ede7; color: #4c645d; border-color: #bbd9d0; box-shadow: none; }
.text-link, .back-link, .panel-link { color: var(--accent-ink); min-height: 36px; }
.field input, .field select, .field textarea {
  color: var(--ink); background: white; border-color: #aacbc3; border-radius: 9px;
}
input::placeholder, textarea::placeholder { color: #4f7368; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #02624c; }
.progress li { color: #436259; }
.progress .current, .progress .done { color: #02624c; }
.progress .current>span { background: var(--accent); color: #021a1a; border-color: #19876c; }
.progress .done>span { background: #c9eedf; color: #021a1a; border-color: #aacbc3; }
.visit-choice label:has(input:checked) { background: #dff5eb; border-color: #16ad80; }
.day.chosen, .time.chosen { background: var(--accent); color: #021a1a; border-color: #09a778; }
.day.chosen small, .time.chosen small { color: #053128; }
.day, .time { min-height: 48px; }
.extras input, .visit-choice input { accent-color: #0d986e; }

body #app .language-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 0; border-radius: 8px; background: transparent; flex-shrink: 0;
}
body #app .language-switch button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 32px; padding: 5px 8px; border: 1px solid transparent;
  border-radius: 6px; color: #0b4539; font-family: var(--font); font-weight: 600;
  line-height: 1.25; transition: background .16s, color .16s;
}
body #app .language-switch button::after { content: ''; position: absolute; inset: -6px 0; }
body #app .language-switch button:hover { background: #e5f5ee; }
body #app .language-switch button[data-language] { font-size: 13px; }
body #app .language-switch button[aria-pressed=true] {
  background: #dff5eb; color: #02624c; border-color: #aacbc3; font-weight: 700;
}
.language-check { visibility: hidden; width: 12px; flex-shrink: 0; font-weight: 700; }
.language-switch button[aria-pressed=true] .language-check { visibility: visible; }

.business-shell { grid-template-columns: 224px minmax(0,1fr);  background: var(--sidebar); }
.business-sidebar { background: var(--sidebar); padding: 24px 14px 48px; border-right: 1px solid #283a35; align-self: start; position: sticky; top: 0; height: 100dvh; min-height: 100dvh; }
.workspace-brand { color: #f1f7f7; padding: 0 10px 24px; gap: 12px; }
.workspace-brand img { width: 38px; height: 38px; background: transparent; padding: 0; border-radius: 11px; }
.workspace-brand small { color: #d4e9e2; }
.workspace-label { color: #aacbc3; padding-left: 12px; }
.business-sidebar nav { gap: 6px; }
.business-sidebar nav a, .sidebar-bottom>a {
  color: #f1f7f7; min-height: 46px; padding: 11px 12px; border-radius: 10px;
}
.business-sidebar nav a:hover, .sidebar-bottom>a:hover { background: #0b4539; color: white; }
.business-sidebar nav a.active { background: var(--accent); color: #021a1a; }
.business-sidebar nav a.active svg { color: #021a1a; }
.business-sidebar nav a.active .nav-count { background: #02624c; color: #f1f7f7; }
.nav-count { background: #02624c; color: #f1f7f7; }
.demo-sidebar-note { color: #d4e9e2; border-color: #304d44; }
.business-main { background: var(--canvas); min-width: 0; }
.business-topbar { min-height: 60px; height: auto; padding: 12px 28px; gap: 16px; }
.breadcrumb { flex-wrap: wrap; min-width: 0; line-height: 1.4; }
.topbar-tools { gap: 12px; min-width: 0; }
.sample-pill { background: #e5f5ee; border: 1px solid #aacbc3; }
.business-avatar { background: #042222; color: #02df82; }
.business-wrap { padding: 28px; }
.business-title { gap: 24px; align-items: flex-start; margin-bottom: 24px; }
body #app .business-title h1 { font-size: 30px; line-height: 1.2; letter-spacing: -.04em; }
.business-title p { line-height: 1.55; max-width: 640px; }
.business-title .eyebrow { letter-spacing: .07em; line-height: 1.5; }
.title-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.overview-stats { gap: 14px; margin-bottom: 18px; }
.metric-card { padding: 20px; border-color: var(--line); border-radius: 14px; min-height: 174px; }
body #app .metric-card>strong { font-size: 34px; margin: 14px 0 8px; }
.metric-card>small, .metric-spark { line-height: 1.5; }
.metric-label { gap: 12px; }
.metric-label svg { color: #387966; }
.metric-spark { margin-top: 12px; }
.overview-grid, .overview-grid.lower-grid { gap: 18px; margin-bottom: 18px; }
.dashboard-panel, .rules-panel, .activity-panel { border-color: var(--line); border-radius: 14px; overflow: hidden; }
.dashboard-panel .panel-heading, .panel-heading { padding: 20px; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
body #app .dashboard-panel .panel-heading h2 { font-size: 18px; line-height: 1.3; }
.panel-heading p { margin-top: 5px; line-height: 1.5; }
.chart-key { flex-wrap: wrap; row-gap: 8px; white-space: normal; }
.chart-key i, .requests-bar { background: var(--accent); }
.chart-key i.key-completed, .completed-bar { background: #02624c; }
.chart-area { height: 190px; padding: 18px 20px 2px 10px; }
.chart-y { width: 30px; }
.chart-caption { align-items: flex-start; padding: 14px 20px; line-height: 1.5; }
.chart-caption svg { color: #02624c; margin-top: 3px; }
.status-breakdown { padding: 4px 20px 14px; }
.status-line { padding: 13px 0; gap: 10px; color: var(--ink); }
.status-dot { width: 9px; height: 9px; background: #19876c; }
.status-dot.new { background: #02df82; }
.status-dot.requested { background: #2ea98c; }
.status-dot.confirmed { background: #085543; }
.status-dot.completed { background: #02624c; }
.status-dot.cancelled { background: white; border: 2px solid #508b79; }
.service-mix { padding: 4px 20px 16px; }
.mix-line { padding: 12px 0; }
.mix-line>div:first-child { color: var(--ink); }
.mix-color, .mix-fill { background: var(--accent); }
.mix-color.mix-1, .mix-fill.mix-1 { background: #085543; }
.mix-color.mix-2, .mix-fill.mix-2 { background: #02624c; }
.mix-track { background: #d1f1e7; height: 5px; }
.data-note { background: #f1f7f7; border-color: var(--line); padding: 14px 20px; line-height: 1.6; }
.business-table th { background: #e9fbf6; color: #0b4539; font-weight: 600; }
.business-table td, .business-table th { padding: 14px 16px; border-color: #d5eee6; line-height: 1.5; }
.business-table td { color: var(--ink); }
.table-scroll { scrollbar-color: #29af87 #d6f4eb; scrollbar-width: thin; overscroll-behavior-x: contain; }
.business-table tbody tr:hover, .history-row:hover { background: #ecfff9; }
.table-customer { gap: 10px; }
.table-customer strong, .table-customer small, .table-sub { max-width: 230px; }
.business-table .avatar { width: 34px; height: 34px; background: #dff5eb; color: #02624c; }
.row-open { min-width: 40px; min-height: 40px; color: #02624c; border-radius: 8px; }
.row-open:hover { background: #dff5eb; }
.tag, .tag.new, .tag.requested, .tag.confirmed, .tag.completed, .tag.cancelled {
  background: #dff5eb; color: #0b4539; border: 1px solid #aacbc3; border-radius: 7px;
}
.tag.completed { background: #c9eedf; color: #053128; }
.tag.cancelled { background: #f1f7f7; border-style: dashed; color: #0b4539; }
.repeat-badge { background: #dff5eb; color: #02624c; border: 1px solid #aacbc3; }
.request-toolbar { padding: 16px; gap: 14px; }
.filter-tabs { gap: 7px; flex-wrap: wrap; }
.filter-tabs button { min-height: 42px; padding: 10px 13px; color: #0b4539; border-radius: 8px; }
.filter-tabs button.active { background: #dff5eb; color: #053128; border-color: #2dc396; }
.filter-tabs button span { color: #0b4539; background: #f1f7f7; }
.search-field { border-color: #aacbc3; background: white; min-height: 46px; border-radius: 9px; }
.search-field input { min-width: 0; width: 200px; color: var(--ink); }
.customer-summary { line-height: 1.6; margin-bottom: 18px; }
.board-footer { gap: 16px; flex-wrap: wrap; line-height: 1.6; padding-top: 18px; }
.board-footer>div { flex-wrap: wrap; gap: 16px; }
.board-footer button { min-height: 40px; color: #02624c; font-weight: 500; }
.rule { gap: 16px; padding: 24px; }
.rule>div { min-width: 0; flex: 1; }
.rule p { line-height: 1.5; }
.rule .text-link { text-align: left; }
.rule-number { color: #02624c; }
.switch { width: 48px; height: 28px; padding: 4px; background: #aacbc3; position: relative; }
.switch:after { content: ''; position: absolute; inset: -8px -3px; }
.switch span { width: 20px; height: 20px; }
.switch.on { background: #02624c; }
.switch.on span { transform: translateX(20px); }
.message-icon, .history-mark { background: #dff5eb; color: #02624c; }
.activity-item { padding: 20px; gap: 14px; }
.activity-item>span { min-width: 0; }
.activity-item strong, .activity-item small { overflow-wrap: anywhere; }
dialog { border-color: var(--line); border-radius: 16px; }
dialog::backdrop { background: #021a1a70; }
.dialog-close { width: 44px; height: 44px; background: #dff5eb; color: #053128; }
.record-summary>div { align-items: flex-start; gap: 18px; line-height: 1.5; }
.record-summary strong { overflow-wrap: anywhere; }
.history-row { padding: 16px; }
.history-row small { line-height: 1.5; }
.record-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.danger { color: #02624c; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1200px) {
  .overview-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .business-title { flex-wrap: wrap; }
  .title-actions { justify-content: flex-start; }
  .sample-pill { display: none; }
}
@media (max-width: 1000px) {
  .business-shell { grid-template-columns: minmax(0,1fr); }
  .business-sidebar {
    position: relative; top: auto; height: auto; min-height: 0;
    display: grid; grid-template-columns: 1fr; padding: 16px 20px; gap: 14px;
    overflow: visible; border-right: 0;
  }
  .workspace-brand { padding: 0; font-size: 18px; }
  .workspace-brand small, .workspace-label, .sidebar-bottom { display: none; }
  .business-sidebar nav {
    display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; overflow: visible;
  }
  .business-sidebar nav a { justify-content: center; white-space: normal; padding: 12px 8px; min-width: 0; }
  .business-sidebar nav a svg { width: 18px; height: 18px; }
  .business-sidebar nav .nav-count { display: none; }
  .business-topbar { padding: 12px 20px; }
  .business-avatar { display: none; }
  .business-wrap { padding: 24px 20px; }
  .overview-grid, .overview-grid.lower-grid { grid-template-columns: minmax(0,1fr); }
  .automation-layout { grid-template-columns: minmax(0,1fr); }
  .request-toolbar .search-field { width: 100%; max-width: none; margin: 0; }
  .request-toolbar .search-field input { width: 100%; }
  .filter-tabs { overflow: visible; }
}
@media (max-width: 620px) {
  body > .demo-notice, body.business-mode > .demo-notice { padding: 9px 16px; font-size: 13px; gap: 12px; }
  .demo-header { display: grid; grid-template-columns: minmax(0,1fr) auto; padding: 18px 16px; min-height: 0; gap: 16px; }
  .demo-header .tidy-brand { font-size: 24px; }
  .demo-header .tidy-brand small { display: none; }
  .demo-header .language-switch { position: static; grid-column: 2; grid-row: 1; justify-self: end; margin-left: 0; }
  .demo-header nav { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 0; }
  .demo-header nav a { padding: 10px; gap: 8px; text-align: center; justify-content: center; }
  body #app .language-switch { gap: 2px; padding: 2px; border-radius: 8px; }
  body #app .language-switch button { min-width: 36px; min-height: 32px; padding: 5px 8px; }
  .business-sidebar { padding: 16px; gap: 14px; }
  .workspace-brand { gap: 10px; }
  .workspace-brand img { width: 34px; height: 34px; }
  .business-sidebar nav { gap: 5px; }
  .business-sidebar nav a { flex-direction: column; gap: 7px; min-height: 64px; line-height: 1.3; padding: 10px 4px; }
  .business-topbar { position: relative; top: auto; min-height: 56px; padding: 10px 16px; gap: 10px; }
  .breadcrumb { gap: 0; max-width: 100px; }
  .breadcrumb>span { display: none; }
  .topbar-tools { gap: 0; }
  .business-wrap { padding: 24px 16px 32px; }
  body #app .business-title h1 { font-size: 28px; line-height: 1.2; }
  .business-title { gap: 16px; margin-bottom: 20px; }
  .business-title .eyebrow { letter-spacing: .05em; }
  .title-actions { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; }
  .title-actions .btn { width: 100%; }
  .overview-stats { gap: 12px; margin-bottom: 16px; }
  .overview-grid, .overview-grid.lower-grid { gap: 16px; margin-bottom: 16px; }
  .metric-card { border-radius: 12px; padding: 18px; }
  .dashboard-panel .panel-heading, .panel-heading { padding: 18px; gap: 12px; }
  .chart-area { height: 180px; padding-right: 16px; }
  .chart-key { width: 100%; gap: 8px; }
  .chart-month small { padding-top: 6px; }
  .chart-caption, .data-note { padding: 14px 18px; }
  .status-breakdown { padding: 0 18px 10px; }
  .business-table { min-width: 740px; }
  .business-table td, .business-table th { padding: 14px; }
  .filter-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; width: 100%; }
  .filter-tabs button { display: flex; align-items: center; justify-content: space-between; text-align: left; padding: 10px; white-space: normal; }
  .request-toolbar { padding: 14px; }
  .customer-summary { display: grid; gap: 8px; }
  .customer-summary span+span { padding-left: 0; border: 0; }
  .business-title>.search-field { width: 100%; }
  .business-title>.search-field input { width: 100%; }
  .rule { padding: 20px 16px; gap: 10px; }
  .rule-number { display: none; }
  .rule .text-link { line-height: 1.5; }
  .activity-item { padding: 18px 16px; }
  .field input, .field select, .field textarea { font-size: 16px; }
  .page-wrap { padding-left: 16px; padding-right: 16px; }
  .form-card { padding: 24px 18px; }
  .field-row { gap: 12px; }
  .visit-choice { grid-template-columns: minmax(0,1fr); }
  .time-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .day { padding: 12px 4px; }
  .date-options { gap: 5px; }
  .demo-footer { align-items: flex-start; flex-direction: column; gap: 12px; padding: 24px 16px; }
  dialog { padding: 28px 20px; max-height: calc(100dvh - 28px); width: calc(100% - 24px); }
  dialog h2 { padding-right: 30px; }
  .record-summary>div { flex-direction: column; align-items: stretch; gap: 5px; padding: 12px 0; }
  .record-summary strong { max-width: none; text-align: left; }
  .record-bottom { align-items: flex-start; }
}
@media (max-width: 480px) {
  .overview-stats { grid-template-columns: minmax(0,1fr); }
  .metric-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px 18px; min-height: 0; }
  .metric-label { grid-column: 1; align-self: center; }
  body #app .metric-card>strong { grid-column: 2; grid-row: 1/3; align-self: center; margin: 0; font-size: 32px; }
  .metric-card>small { grid-column: 1; }
  .metric-spark { grid-column: 1/-1; margin-top: 4px; }
  .business-title h1 { max-width: 100%; }
}
@media (max-width: 359px) {
  .business-sidebar nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .business-sidebar nav a { flex-direction: row; min-height: 48px; padding: 10px 8px; gap: 8px; }
  .field-row { grid-template-columns: minmax(0,1fr); }
}