:root{color-scheme:light;--ink:#482535;--muted:#765465;--accent:#a01253;--line:#ebc7d7;--soft:#fbe4ee;--paper:#fffaf6}
*{box-sizing:border-box} [hidden]{display:none!important} body{margin:0;background:radial-gradient(ellipse at 50% 5%,#fdebf2,transparent 500px),var(--paper);color:var(--ink);font:16px/1.65 "Yu Gothic","Hiragino Sans",sans-serif}
.masthead{padding:14px clamp(16px,5vw,52px);display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line);background:#fffaf6}
.brand,.eyebrow,footer{font-family:Georgia,serif;letter-spacing:.17em;color:var(--accent);font-size:.78rem}.brand{text-decoration:none;font-weight:bold}
main{width:min(540px,calc(100% - 32px));margin:auto}.hero{text-align:center;padding-top:42px}.hero h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(2rem,8vw,3rem);line-height:1.25;letter-spacing:.08em;margin:.2em 0}.hero p{margin:0;color:var(--muted);letter-spacing:.18em}.ornament{height:10px;margin:24px auto;background:radial-gradient(circle at 8px 0,transparent 7px,var(--soft) 7.5px) repeat-x;background-size:16px 10px}
.card,dialog{background:white;border:1px solid var(--line);border-radius:19px;padding:clamp(18px,5vw,30px);box-shadow:0 8px 26px #a0125310;margin:0 0 16px}h2{font-size:1.25rem;margin:.2em 0 .4em}.muted,.demo{color:var(--muted);font-size:.85rem}.intro{margin:0 0 18px}#menu-copy{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:0}
.field{display:block;font-weight:700;margin-bottom:7px}.step{color:var(--accent);font: bold .8rem Georgia;margin-right:6px}input,button,textarea{font:inherit}input[type=date],textarea{display:block;width:100%;min-width:0;min-height:45px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fffafb;color:var(--ink)}textarea{resize:vertical}fieldset{border:0;padding:0;margin:20px 0 14px;min-width:0}legend{padding:0}.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}.slot{position:relative}.slot input{position:absolute;opacity:0}.slot span{display:block;padding:8px;text-align:center;border:1px solid var(--line);border-radius:10px;cursor:pointer}.slot input:checked+span{background:var(--soft);color:var(--accent);border-color:var(--accent);font-weight:bold}.slot input:focus-visible+span,:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button{cursor:pointer}.quiet{background:white;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.78rem}.primary{width:100%;padding:10px;border:0;border-radius:999px;background:var(--accent);color:white;font-weight:bold}.primary:disabled{cursor:default;background:#eee1e8;color:#6f5260}.demo{text-align:center;margin:9px 0 0;font-size:.75rem}footer{text-align:center;padding:12px 12px 28px}footer span{margin:0 .5em}
dialog{width:min(480px,calc(100% - 32px));margin:auto;color:var(--ink);max-height:90vh}dialog::backdrop{background:#48253565}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.toggle{display:flex;align-items:center;gap:8px;margin:18px 0 12px}.toggle input{accent-color:var(--accent);width:18px;height:18px}#settings-error{color:var(--accent);font-size:.85rem}#summary{font-weight:bold}
body{background:linear-gradient(#fcf1f5,var(--paper) 680px);min-height:100vh}.masthead{background:transparent;border:0}.hero{padding-top:10px}.hero img{width:min(240px,70vw);height:auto;display:block;margin:auto}.hero p{margin-top:7px}.primary:not(:disabled){background:linear-gradient(105deg,#d72a76,#a01253);box-shadow:0 5px 14px #a012532a}
.date-field{margin-top:0}#range{margin:0 0 8px}.calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}.weekday{font-size:.75rem;color:var(--muted)}.date-cell span{background:#fbe4ee;color:var(--accent);border-color:transparent;min-height:54px;padding:4px 0;font-size:.85rem}.date-cell img{display:block;width:26px;height:21px;object-fit:contain;margin:1px auto 0}.calendar-note{margin-bottom:0}.date-cell input:checked+span{background:#f2c9dd}input[type=number],input[type=time]{display:block;width:100%;min-width:0;min-height:45px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:#fffafb;color:var(--ink)}.time-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:8px;margin-bottom:12px}.time-row label{font-size:.8rem;font-weight:bold}.time-row .quiet{margin-bottom:7px;padding:5px 9px}h3{font-size:1rem;margin-bottom:0}#people{max-width:150px}#people-help{margin:8px 0 18px}
.slot input:disabled+span {
  opacity:.4;
  cursor:default;
  background:#f4edf1}
.admin-main {
  width:min(960px,calc(100% - 32px));
  margin:24px auto}
.admin-heading h1 {
  font-size:1.8rem;
  margin:3px 0}
.admin-heading p {
  margin-top:0}
.preview-notice {
  padding:14px 18px;
  background:#fbe4ee;
  border:1px solid var(--line);
  border-radius:12px;
  font-size:.85rem}
.admin-nav {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:22px 0}
.admin-nav a {
  color:var(--accent);
  background:white;
  padding:7px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  text-decoration:none;
  font-weight:bold;
  font-size:.85rem}
.section-head {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  flex-wrap:wrap}
.section-head label {
  font-size:.8rem}
.stats {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px}
.stat-total {
  font-size:1.4rem;
  font-weight:bold;
  color:var(--accent)}
.occupancy {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:10px;
  margin-bottom:18px}
.occupancy-item {
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  font-size:.85rem}
.occupancy-item strong {
  font-size:1.1rem}
.empty-state {
  text-align:center;
  padding:30px 12px;
  color:var(--muted);
  border-top:1px solid var(--line)}
.reservation-item {
  padding:15px 0;
  border-top:1px solid var(--line);
  overflow-wrap:anywhere}
.reservation-item h3,.reservation-item p {
  margin:3px 0}
.reservation-item .quiet {
  margin-top:8px}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px}
.form-grid label {
  font-size:.85rem;
  font-weight:bold}
input:not([type]),input[type=tel],select {
  display:block;
  width:100%;
  min-height:45px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fffafb;
  color:var(--ink);
  font:inherit}
.weekdays {
  display:flex;
  flex-wrap:wrap;
  gap:12px}
.weekdays label {
  display:flex;
  align-items:center;
  gap:4px}
.weekdays input {
  accent-color:var(--accent);
  width:18px;
  height:18px}
.error {
  color:#a01253;
  font-size:.85rem}
.dialog-actions {
  display:flex;
  gap:12px;
  justify-content:flex-end}
.dialog-actions .primary {
  width:auto;
  padding:10px 20px}
.admin-main section {
  scroll-margin-top:16px}
.admin-main #time-settings {
  max-width:520px}
.admin-main .primary {
  max-width:360px}
.admin-main h3 {
  margin-top:20px}
#status:empty,#admin-error:empty {
  display:none}
@media(max-width:560px) {
  .form-grid {
  grid-template-columns:1fr}
.masthead {
  flex-wrap:wrap}
.admin-heading h1 {
  font-size:1.5rem}
}

.settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  margin-left: auto;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  color: var(--accent);
  font-size: .85rem;
  font-weight: bold;
}
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
.hamburger span {
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
}
.admin-menu {
  inset: 0;
  width: min(380px, 100%);
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  border-radius: 18px 0 0 18px;
  overflow-y: auto;
}
.settings-menu {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}
.settings-menu button,
.settings-menu a {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  text-align: left;
}
.settings-menu button:hover,
.settings-menu a:hover {
  background: var(--soft);
}
.settings-menu span {
  color: var(--muted);
  font-size: .8rem;
}
.admin-edit-dialog {
  width: min(720px, calc(100% - 32px));
  overflow-y: auto;
}
.admin-edit-dialog .dialog-head {
  align-items: flex-start;
  margin-bottom: 16px;
}
.admin-edit-dialog .dialog-head > .quiet {
  flex-shrink: 0;
}
.admin-edit-dialog .primary {
  margin-top: 8px;
}
input[type=email],input[type=text] {
  display: block;
  width: 100%;
  min-height: 45px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffafb;
  color: var(--ink);
}
.customer-fields {
  margin: 22px 0;
}
.customer-fields label {
  margin-top: 14px;
}
#customer-summary, #complete-summary {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.login-panel {
  width: min(480px, calc(100% - 32px));
  margin: 60px auto;
}
.login-panel .primary, .login-panel .quiet {
  margin-top: 16px;
}
.settings-button {
  min-width: 44px;
}