:root { --paper:#f7f6f2; --ink:#302f2b; --muted:#706e67; --line:#dddcd5; --green:#435f50; --invalid:#a43d32; --soft:#edf1eb; font-family:-apple-system,BlinkMacSystemFont,'Noto Sans TC','PingFang TC',sans-serif; color:var(--ink); background:var(--paper); font-size:16px; }
* { box-sizing:border-box; }
body { margin:0; }
[hidden] { display:none !important; }
a { color:inherit; text-underline-offset:4px; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,input,select,textarea { min-height:46px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); }
input,select,textarea { width:100%; padding:11px 12px; }
textarea { resize:vertical; line-height:1.6; }
button { padding:11px 19px; cursor:pointer; line-height:1.4; }
button:disabled { opacity:.55; cursor:wait; }
:focus-visible { outline:3px solid #a88c50; outline-offset:3px; }
.primary { background:var(--green); border-color:var(--green); color:#fff; }
.primary:hover:not(:disabled) { background:#344d40; }
.secondary { background:#fff; }
.site-header { max-width:1280px; margin:auto; padding:28px 48px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.brand { text-decoration:none; display:inline-grid; gap:3px; font:600 24px/1.2 'Noto Serif TC','Songti TC',serif; letter-spacing:0; }
.brand > .brand-name { display:flex; gap:3px; }
.brand > .brand-latin { display:flex; justify-content:space-between; font:9px/1.3 sans-serif; letter-spacing:0; }
.site-header>a:last-child { font-size:14px; }
.booking-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:72px; max-width:1120px; padding:52px 48px 80px; margin:auto; }
.eyebrow { color:var(--green); font-size:12px; letter-spacing:2px; margin:0 0 15px; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { font:500 clamp(38px,4vw,54px)/1.35 'Noto Serif TC','Songti TC',serif; letter-spacing:3px; margin:0 0 24px; }
h2 { font:600 24px/1.5 'Noto Serif TC','Songti TC',serif; margin:0 0 10px; }
h3 { font-size:18px; margin:0; }
p { line-height:1.8; }
.lead { color:var(--muted); max-width:370px; font-size:16px; }
.visit-details { display:grid; gap:22px; margin:38px 0; }
dl div { display:grid; gap:6px; }
dt { font-size:12px; color:var(--muted); }
dd { margin:0; line-height:1.7; overflow-wrap:anywhere; }
#visit-map { display:block; width:fit-content; margin-top:6px; }
.callout { border-left:2px solid #9aa995; padding-left:18px; margin-top:36px; font-size:14px; }
.callout p { color:var(--muted); margin:5px 0 0; }
.booking-panel,.admin-panel { min-width:0; padding:32px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.muted,.field-help { color:var(--muted); }
.muted { margin:0 0 14px; font-size:14px; }
fieldset { border:0; padding:0; margin:0; min-width:0; display:grid; gap:20px; }
label { display:grid; gap:7px; font-size:14px; line-height:1.6; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
.field-help,.optional { font-size:12px; }
.optional { color:var(--muted); margin-top:-5px; }
.privacy { color:var(--muted); font-size:12px; margin:22px 0; }
#submit-appointment { width:100%; }
.message { min-height:0; font-size:14px; color:var(--green); margin:12px 0 20px; }
.message:empty { margin:0; }
.message[data-error=true] { color:var(--invalid); }
.receipt { background:var(--soft); padding:24px; border-radius:8px; }
.receipt dl { display:grid; gap:16px; margin:22px 0; }
.receipt p { font-size:14px; }
.notification { border-top:1px solid #d6ddd2; padding-top:16px; color:var(--muted); }
.site-footer { max-width:1184px; padding:24px 48px; margin:auto; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:16px; top:-100px; background:#fff; padding:12px; z-index:10; }
.skip-link:focus { top:12px; }
.admin-layout { max-width:1100px; margin:auto; padding:40px 48px 80px; }
.admin-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:28px; }
.admin-heading h1 { font-size:36px; margin-bottom:8px; }
.admin-heading p { margin:0; color:var(--muted); font-size:14px; }
.account-controls { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:13px; }
.account-controls span { overflow-wrap:anywhere; }
.admin-login { max-width:440px; }
.admin-login form,.settings-form { display:grid; gap:18px; }
.admin-section { margin-top:28px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.section-heading h2 { margin:0; }
.settings-form>fieldset { gap:18px; }
.settings-form .form-row { grid-template-columns:2fr 1fr; }
.slot-list,.appointment-list { display:grid; gap:16px; padding:0; list-style:none; margin:18px 0; }
.slot-row { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:12px; padding:16px; border:1px solid var(--line); border-radius:8px; }
.slot-row input { min-width:0; }
.slot-row button { padding:11px 12px; }
.settings-actions,.appointment-actions { display:flex; flex-wrap:wrap; gap:10px; }
.appointment-card { padding:24px; border:1px solid var(--line); border-radius:9px; }
.appointment-card-header { display:flex; gap:16px; justify-content:space-between; align-items:flex-start; }
.status-badge { flex-shrink:0; border-radius:100px; padding:5px 12px; background:var(--soft); color:var(--green); font-size:12px; }
.appointment-meta { color:var(--muted); font-size:13px; margin:7px 0 16px; }
.appointment-details { display:grid; grid-template-columns:1fr 1fr; gap:16px; font-size:14px; }
.appointment-details .wide { grid-column:1/-1; }
.appointment-card .notification-list { margin:20px 0; padding:16px 0 0; border-top:1px solid var(--line); list-style:none; display:grid; gap:9px; font-size:13px; line-height:1.7; }
.appointment-card .notification-list small { display:block; color:var(--muted); }
.appointment-notes { white-space:pre-wrap; }
.pending-operation { padding:18px; border:1px solid #b9c6b4; background:var(--soft); border-radius:8px; margin:20px 0; }
.pending-operation p { margin:0 0 12px; font-size:14px; }
.slot-description { margin:0; color:var(--muted); font-size:13px; }
.retention-status { padding:14px 16px; border-radius:8px; background:var(--paper); font-size:14px; }
.retention-status[data-health=healthy] { background:var(--soft); color:var(--green); }
.retention-status[data-health]:not([data-health=healthy]) { background:var(--paper); color:var(--invalid); }
.retention-details { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; font-size:14px; margin:20px 0; }
.retention-help { margin:12px 0 0; color:var(--muted); }
@media(max-width:760px) {
  .site-header { padding:22px 24px; }
  .booking-layout { grid-template-columns:1fr; gap:30px; padding:28px 24px 50px; }
  h1 { font-size:40px; }
  .intro h1 br { display:none; }
  .lead { max-width:none; }
  .visit-details { margin:24px 0; gap:16px; }
  .callout { margin-top:22px; }
  .booking-panel,.admin-panel { padding:24px; }
  .site-footer { padding:24px; }
  .admin-layout { padding:28px 24px 50px; }
  .admin-heading { display:grid; gap:16px; }
  .admin-heading h1 { font-size:30px; }
  .slot-row { grid-template-columns:1fr; padding:14px; }
  .slot-row button { justify-self:start; }
  .settings-form .form-row { grid-template-columns:1fr; }
  .appointment-card { padding:18px; }
}
@media(max-width:420px) {
  .site-header { padding:20px; }
  .booking-layout,.admin-layout { padding-left:16px; padding-right:16px; }
  .booking-panel,.admin-panel { padding:20px; }
  .form-row,.appointment-details { grid-template-columns:1fr; }
  .receipt { padding:20px; }
  .appointment-card-header { gap:8px; }
}

.attachment-auth { border-bottom:1px solid var(--line); padding-bottom:20px; margin:18px 0 24px; }
.attachment-auth h3 { margin-bottom:8px; }
.attachment-auth h3 .optional { margin-left:6px; font-weight:400; }
.attachment-auth form { display:grid; gap:12px; margin-top:16px; }
.attachment-auth .message { margin:12px 0 0; }
.configuration-picker { border:1px solid var(--line); border-radius:8px; padding:16px; background:var(--paper); }
.configuration-picker .field-help { margin:10px 0; }
.configuration-picker button { padding:9px 12px; font-size:13px; }
.appointment-snapshot { margin-top:20px; padding:20px; background:var(--paper); border:1px solid var(--line); border-radius:8px; }
.appointment-snapshot h4 { margin:18px 0 8px; font-size:14px; }
.snapshot-choices { padding-left:22px; line-height:1.8; font-size:13px; overflow-wrap:anywhere; }

.management-layout { max-width:1000px; }
.arrangement-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0; }
.arrangement-grid:empty { display:none; }
.arrangement-grid>.wide { grid-column:1/-1; }
.arrangement-panel { min-width:0; border:1px solid var(--line); border-radius:8px; padding:20px; background:var(--paper); }
.arrangement-panel h3 { font-size:17px; }
.arrangement-panel dl { display:grid; gap:16px; margin-bottom:0; }
.arrangement-panel .muted { margin-top:16px; }
.requested-arrangement { border-color:#b9c6b4; background:var(--soft); }
.notification-heading { margin-top:28px; }
.management-layout .notification-list { padding-left:20px; display:grid; gap:10px; font-size:14px; line-height:1.8; }
.cancellation-actions { border-top:1px solid var(--line); margin-top:28px; padding-top:24px; }
.cancellation-actions p { margin-top:8px; }
.cancel-confirmation { border:1px solid #c68c83; background:#faf0ee; padding:20px; border-radius:8px; margin-top:20px; }
.cancel-confirmation p { font-size:14px; }
.danger { background:var(--invalid); color:#fff; border-color:var(--invalid); }
@media(max-width:760px) { .arrangement-grid { grid-template-columns:1fr; } .arrangement-panel { padding:16px; } }

/* From the configuration drawing to a real visit: one scroll-linked line sequence. */
.booking-layout .visit-details { position:relative; padding-left:18px; }
.booking-layout .visit-details::before { content:''; position:absolute; inset:0 auto 0 0; width:1px; background:var(--green); transform-origin:top; pointer-events:none; }
.booking-layout .booking-panel { position:relative; }
.booking-layout .booking-panel::before { content:''; position:absolute; inset:-1px; border:1px solid var(--green); border-radius:inherit; pointer-events:none; }
.booking-layout[data-scroll-motion=active] .visit-details::before { transform:scaleY(var(--reception-draw,1)); }
.booking-layout[data-scroll-motion=active] .booking-panel::before { clip-path:inset(0 0 calc((1 - var(--booking-draw,1)) * 100%) 0); }
@media(prefers-reduced-motion:reduce) {
  .booking-layout[data-scroll-motion=active] .visit-details::before { transform:none; }
  .booking-layout[data-scroll-motion=active] .booking-panel::before { clip-path:none; }
}