:root {
  --ink: #183233;
  --muted: #697d7c;
  --line: #d9e3e1;
  --soft: #f3f7f6;
  --brand: #15786f;
  --brand-dark: #0f5d56;
  --dr: #e6f0ff;
  --dr-strong: #4d79b8;
  --dh: #edf7e8;
  --dh-strong: #5f8d55;
  --pending: #fff4d6;
  --danger: #b94747;
  font-family: Inter, "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  color: var(--ink);
  background: #edf3f2;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; }

button, input, select, textarea { font: inherit; }

button { cursor: pointer; }

.site-header {
  background: linear-gradient(120deg, #0f655e, #1e8b80);
  color: white;
  padding: 18px clamp(20px, 4vw, 52px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-header h1 { font-size: clamp(20px, 2.4vw, 30px); margin: 0; }
.site-header p { margin: 4px 0 0; opacity: .86; font-size: 13px; }
.site-header nav { display: flex; gap: 10px; }
.site-header a { color: white; text-decoration: none; border: 1px solid #ffffff66; padding: 9px 14px; border-radius: 999px; }

.page-shell { width: min(1180px, calc(100% - 32px)); margin: 28px auto 60px; }
.panel { background: white; border-radius: 18px; box-shadow: 0 16px 46px #18323314; padding: clamp(20px, 3vw, 36px); }
.eyebrow { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.lead { color: var(--muted); line-height: 1.75; }

.preview-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  margin-bottom: 26px;
  padding: 12px 15px;
  border-radius: 10px;
  background: #fff3da;
  color: #6d4b11;
  font-size: 13px;
}
.preview-banner strong { font-size: 14px; }
.reassurance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 4px; }
.reassurance-card { display: flex; align-items: flex-start; gap: 10px; padding: 17px; border: 1px solid #cfe5df; border-radius: 12px; background: #f4faf8; }
.reassurance-card strong { display: block; font-size: 14px; }
.reassurance-card p { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 5px 0 0; }
.reassurance-icon { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border-radius: 50%; background: #d9eee8; color: var(--brand-dark); font-weight: 900; }

.stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 26px 0 32px; }
.stepper span { background: var(--soft); color: var(--muted); border-radius: 999px; padding: 8px 12px; text-align: center; font-size: 13px; }
.stepper span.active { background: var(--brand); color: white; }

.field { margin: 24px 0; }
.field > label, .field > legend { display: block; font-weight: 800; margin-bottom: 10px; }
.required { color: var(--danger); font-size: 12px; margin-left: 6px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.choice {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  display: flex;
  gap: 9px;
  align-items: center;
  background: white;
}
.choice:has(input:checked) { border-color: var(--brand); background: #edf9f7; box-shadow: 0 0 0 2px #15786f1f; }

input[type="text"], input[type="tel"], input[type="email"], input[type="date"], select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 13px;
  background: white;
}

.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.muted-box { background: var(--soft); border-radius: 12px; padding: 14px 16px; color: var(--muted); }
.field-help { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.field-help a { color: var(--brand-dark); font-weight: 800; }
.privacy-details { border: 1px solid var(--line); border-radius: 12px; margin: 26px 0 16px; }
.privacy-details summary { cursor: pointer; padding: 15px 17px; font-weight: 800; }
.privacy-details > div { padding: 0 17px 14px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.privacy-details p { margin: 8px 0; }

.slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 10px; }
.slot-button {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  padding: 12px 10px;
  border-radius: 10px;
  font-weight: 800;
}
.slot-button:hover, .slot-button.selected { border-color: var(--brand); color: var(--brand-dark); background: #eaf7f5; }
.slot-button small { display: block; color: var(--muted); margin-top: 3px; font-weight: 500; }

.primary {
  background: var(--brand);
  color: white;
  border: 0;
  border-radius: 11px;
  padding: 13px 22px;
  font-weight: 800;
}
.primary:hover { background: var(--brand-dark); }
.secondary { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; color: var(--ink); }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.notice { border-left: 4px solid var(--brand); background: #edf9f7; padding: 12px 15px; border-radius: 8px; }
.schedule-wrap { margin-top: 12px; }
.success { text-align: center; padding: 40px 10px; }
.success-icon { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 18px; background: #dff4ef; border-radius: 50%; font-size: 30px; color: var(--brand); }
.hidden { display: none !important; }

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.date-control { display: flex; align-items: center; gap: 8px; }
.date-control input { width: auto; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .dr::before { background: var(--dr-strong); }
.legend .dh::before { background: var(--dh-strong); }
.legend .pending::before { background: #d39b28; }

.schedule-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: white; }
.schedule-grid {
  --time-width: 76px;
  --lane-width: minmax(210px, 1fr);
  display: grid;
  grid-template-columns: var(--time-width) repeat(4, var(--lane-width));
  min-width: 930px;
  position: relative;
}
.schedule-head { position: sticky; top: 0; z-index: 8; background: white; border-bottom: 2px solid #8ea3a0; padding: 12px 8px; text-align: center; font-weight: 900; }
.schedule-head.group-dr { background: #eef5ff; color: #345f99; }
.schedule-head.group-dh { background: #f0f8ec; color: #4f7b45; }
.schedule-head small { display: block; font-weight: 500; color: var(--muted); margin-top: 3px; }
.time-axis, .lane { position: relative; }
.time-axis { border-right: 1px solid #8ea3a0; background: #fbfcfc; }
.time-label { position: absolute; right: 10px; transform: translateY(-50%); font-size: 12px; color: var(--muted); }
.time-label.hour { font-size: 14px; color: var(--ink); font-weight: 900; }
.lane { border-right: 1px solid var(--line); background-size: 100% 18px; background-image: linear-gradient(to bottom, transparent 17px, #dfe7e5 17px); }
.lane:last-child { border-right: 0; }
.lane.closed { background: repeating-linear-gradient(135deg, #f4f6f6, #f4f6f6 10px, #ebeeee 10px, #ebeeee 20px); }
.slot-guide { position: absolute; left: 0; right: 0; border-top: 2px solid #51615f; border-bottom: 1px solid #8c9a98; padding: 4px 6px; color: #60716f; font-size: 11px; }
.slot-guide:nth-child(even) { background: #283f3c08; }
.slot-guide.clickable:hover { background: #15786f17; }
.lunch-block { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #e8edec, #e8edec 9px, #dde5e3 9px, #dde5e3 18px); display: grid; place-items: center; color: var(--muted); font-weight: 800; font-size: 12px; z-index: 1; }
.appointment { position: absolute; left: 6px; right: 6px; z-index: 4; border-radius: 9px; padding: 7px 9px; border: 1px solid; box-shadow: 0 5px 14px #18323324; overflow: hidden; cursor: grab; }
.appointment:active { cursor: grabbing; }
.appointment.dr { background: #dceaff; border-color: var(--dr-strong); }
.appointment.dh { background: #e4f3de; border-color: var(--dh-strong); }
.appointment.pending { box-shadow: inset 4px 0 #d39b28, 0 5px 14px #18323324; }
.appointment strong { display: block; font-size: 13px; }
.appointment small { display: block; margin-top: 3px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.lane.drop-ready { box-shadow: inset 0 0 0 3px #15786f88; }
.empty-message { padding: 42px 20px; text-align: center; color: var(--muted); }

dialog { border: 0; border-radius: 16px; box-shadow: 0 24px 80px #102f2d55; width: min(520px, calc(100% - 30px)); }
dialog::backdrop { background: #102f2d80; }
dialog h2 { margin-top: 0; }

@media (max-width: 680px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .reassurance-grid { grid-template-columns: 1fr; }
  .stepper { grid-template-columns: repeat(2, 1fr); }
  .page-shell { width: min(100% - 18px, 1180px); margin-top: 12px; }
  .panel { border-radius: 12px; padding: 18px; }
}