:root{
  --page:#f4f5f6;
  --surface:#ffffff;
  --surface-soft:#f8f9f9;
  --surface-muted:#eef2f1;
  --text:#202426;
  --muted:#5f686b;
  --quiet:#7b8486;
  --line:#dfe3e2;
  --line-strong:#cbd2d0;
  --primary:#17695f;
  --primary-hover:#11574f;
  --primary-soft:#e8f3f1;
  --link:#245ea8;
  --danger:#a33a3a;
  --danger-hover:#862e2e;
  --danger-soft:#fbefef;
  --warning:#8a5b12;
  --warning-soft:#fff8e8;
  --success:#277448;
  --success-soft:#edf7f1;
  --shadow:0 1px 2px rgba(31,41,39,.04),0 14px 34px rgba(31,41,39,.07);
  --radius:8px;
  --tap:46px;
}

*{box-sizing:border-box;letter-spacing:0}
html{min-height:100%;background:var(--page)}
body{
  min-height:100%;
  margin:0;
  color:var(--text);
  background:var(--page);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;letter-spacing:0}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.app{min-height:100%;display:flex;flex-direction:column}
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(160%) blur(14px);
}
.topbar__inner{
  width:100%;
  max-width:1120px;
  min-height:68px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{min-width:0;display:flex;align-items:center;gap:12px}
.brand::before{
  content:"";
  width:9px;
  height:36px;
  flex:0 0 auto;
  border-radius:3px;
  background:linear-gradient(180deg,var(--primary) 0 62%,#d69c3b 62% 100%);
}
.brand__title{font-size:16px;line-height:1.25;font-weight:720;color:var(--text)}
.brand__sub{margin-top:2px;color:var(--muted);font-size:12.5px;line-height:1.35}
.topbar__nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.link{
  min-height:38px;
  padding:7px 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:6px;
  color:var(--muted);
  font-size:14px;
  font-weight:620;
}
.link:hover{color:var(--text);background:var(--surface-soft);border-color:var(--line);text-decoration:none}

.main{width:100%;max-width:1120px;margin:0 auto;padding:24px 20px 48px}
.main--narrow{max-width:760px}
.page-head{margin:2px 0 20px}
.page-head__eyebrow,.eyebrow{
  display:block;
  margin:0 0 5px;
  color:var(--primary);
  font-size:12px;
  line-height:1.35;
  font-weight:760;
  text-transform:uppercase;
}
.page-head__title{margin:0;font-size:24px;line-height:1.25;font-weight:740}
.page-head__copy{max-width:720px;margin:7px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55}

.card,.workspace,.mode-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card{padding:24px;margin:16px 0}
.card--narrow{max-width:500px;margin:42px auto}
.card--form{padding:28px}
.card--result{max-width:720px;margin:26px auto;padding:30px}

/* The main appointment form reads as one work surface with separated sections. */
.main > form.form{
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.main > form.form > .card{
  margin:0;
  padding:28px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
}
.main > form.form > .card:last-child{border-bottom:0;background:var(--surface-soft)}
.form-section{padding:24px 0;border-top:1px solid var(--line)}
.form-section:first-of-type{padding-top:18px;border-top:0}
.form-section__head{margin:0 0 16px}
.form-section__head .h2{margin-bottom:4px}

.h1{margin:0 0 14px;font-size:21px;line-height:1.3;font-weight:740}
.h2{margin:0 0 13px;font-size:17px;line-height:1.35;font-weight:720}
.h3{margin:0 0 8px;font-size:15px;line-height:1.4;font-weight:700}
.muted,.hint{color:var(--muted);font-size:13.5px;line-height:1.5}
.hint{margin-top:1px}
.spacer{height:18px}

.form{display:block}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:15px}
.grid--3{grid-template-columns:minmax(0,1fr)}
.field{display:flex;min-width:0;flex-direction:column;gap:7px}
.label{color:#303637;font-size:13.5px;line-height:1.35;font-weight:680}
.label__optional{color:var(--quiet);font-weight:500}
.input,.textarea,.select{
  width:100%;
  min-height:var(--tap);
  padding:10px 12px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  outline:none;
  background:#fff;
  color:var(--text);
  font-size:16px;
  line-height:1.35;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.textarea{min-height:112px;resize:vertical;line-height:1.5}
.textarea--compact{min-height:84px}
.input:hover,.textarea:hover,.select:hover{border-color:#aeb9b6}
.input:focus,.textarea:focus,.select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(23,105,95,.14);
}
.input:disabled,.textarea:disabled,.select:disabled{color:var(--quiet);background:#f1f3f3;cursor:not-allowed}

.toggle{
  min-height:var(--tap);
  padding:9px 12px;
  display:flex;
  align-items:center;
  gap:11px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface-soft);
  cursor:pointer;
}
.toggle:hover{border-color:var(--line-strong)}
.toggle__input{position:absolute;opacity:0;pointer-events:none}
.toggle__track{width:46px;height:26px;position:relative;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:999px;background:#fff}
.toggle__thumb{width:20px;height:20px;position:absolute;top:2px;left:3px;border-radius:999px;background:#aeb8b6;transition:transform .16s ease,background .16s ease}
.toggle input:checked + .toggle__track{border-color:var(--primary);background:var(--primary-soft)}
.toggle input:checked + .toggle__track .toggle__thumb{transform:translateX(18px);background:var(--primary)}
.toggle input:focus-visible + .toggle__track{box-shadow:0 0 0 3px rgba(23,105,95,.16)}
.toggle__text{font-size:14px;line-height:1.4;font-weight:620}

.check-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:15px 0 18px}
.check{
  min-height:48px;
  padding:10px 12px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface-soft);
  color:#394041;
  font-size:13.5px;
  line-height:1.42;
  cursor:pointer;
}
.check:hover{border-color:var(--line-strong);background:#fff}
.check input{width:17px;height:17px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--primary)}

.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.actions--end{justify-content:flex-end}
.btn{
  min-height:var(--tap);
  padding:10px 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-strong);
  border-radius:6px;
  background:#fff;
  color:var(--text);
  cursor:pointer;
  font-size:14.5px;
  line-height:1.3;
  font-weight:680;
  text-align:center;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.btn:hover{border-color:#aab4b2;background:var(--surface-soft);text-decoration:none}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(23,105,95,.18)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.68;cursor:wait;transform:none}
.btn--primary{border-color:var(--primary);background:var(--primary);color:#fff}
.btn--primary:hover{border-color:var(--primary-hover);background:var(--primary-hover)}
.btn--danger{border-color:var(--danger);background:var(--danger);color:#fff}
.btn--danger:hover{border-color:var(--danger-hover);background:var(--danger-hover)}
.btn--wide{width:100%}

.alert{
  position:relative;
  padding:12px 14px 12px 16px;
  border:1px solid var(--line);
  border-left-width:4px;
  border-radius:6px;
  background:var(--surface-soft);
  color:#3d4647;
  font-size:13.5px;
  line-height:1.55;
}
.alert--error{border-color:#efcaca;border-left-color:var(--danger);background:var(--danger-soft);color:#712b2b}
.alert--success{border-color:#c9e4d3;border-left-color:var(--success);background:var(--success-soft);color:#205d3a}
.alert--notice{border-color:#d5e3df;border-left-color:var(--primary);background:#f3f8f7;color:#31534f}
.alert--warning{border-color:#eedcae;border-left-color:var(--warning);background:var(--warning-soft);color:#6c480f}

.kv-list{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--line)}
.kv{min-width:0;padding:11px 13px;background:#fff}
.kv__k{color:var(--quiet);font-size:11.5px;line-height:1.35;font-weight:720;text-transform:uppercase}
.kv__v{margin-top:4px;color:var(--text);font-size:14px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line}

.mode-panel{margin:16px 0;padding:18px;box-shadow:none}
.mode-panel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px}
.mode-panel__head .h2{margin:0}
.mode-nav{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.mode-link{
  min-height:46px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface-soft);
  color:#394142;
  font-size:13.5px;
  line-height:1.35;
  font-weight:680;
  text-align:center;
}
.mode-link:hover{border-color:var(--line-strong);background:#fff;text-decoration:none}
.mode-link--current{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-hover)}
.mode-link--danger{color:var(--danger);background:#fffafa}

.action-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:18px}
.action-card{
  min-height:126px;
  padding:16px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--text);
}
.action-card:hover{border-color:#aeb9b6;box-shadow:0 8px 20px rgba(31,41,39,.07);text-decoration:none}
.action-card__title{display:block;font-size:15px;line-height:1.35;font-weight:730}
.action-card__copy{display:block;margin-top:5px;color:var(--muted);font-size:12.8px;line-height:1.45}
.action-card__meta{display:block;color:var(--primary);font-size:12px;font-weight:720}
.action-card--primary{border-color:#b9d6d1;background:#f4faf8}
.action-card--danger{border-color:#e8caca;background:#fffafa}
.action-card--danger .action-card__title,.action-card--danger .action-card__meta{color:var(--danger)}
.action-grid .btn{width:100%}

.summary-panel{margin:16px 0 20px}
.summary-panel > table{margin-bottom:0!important}
.detail-label,.detail-value{overflow-wrap:anywhere}
.submit-bar{margin-top:20px;padding:16px;border-top:1px solid var(--line);background:var(--surface-soft)}
.danger-zone{margin-top:18px;padding:16px;border:1px solid #e8caca;border-radius:6px;background:var(--danger-soft)}
.danger-zone .h2{color:var(--danger)}

@media (min-width:680px){
  .grid--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .field--full{grid-column:1/-1}
  .check-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kv-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .mode-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
  .action-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .btn--wide{width:auto;min-width:220px}
  .actions .btn--wide:only-child{margin-left:auto}
}

@media (max-width:679px){
  .topbar__inner{min-height:60px;padding:9px 12px;gap:10px}
  .brand::before{height:32px}
  .brand__title{font-size:15px}
  .brand__sub{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .main{padding:14px 10px 32px}
  .card,.card--form,.card--result{padding:18px;margin:10px 0}
  .card--narrow{margin:24px auto}
  .main > form.form > .card{padding:20px 16px}
  .h1{font-size:19px}
  .page-head__title{font-size:21px}
  .mode-panel{padding:14px}
  .detail-label,.detail-value{display:block!important;width:auto!important}
  .detail-label{padding-bottom:2px!important;border-bottom:0!important}
  .detail-value{padding-top:2px!important}
  .actions{align-items:stretch;flex-direction:column}
  .actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}