:root {
  --bg: #f6f3ed;
  --card: #ffffff;
  --text: #211f1b;
  --muted: #6d675e;
  --line: #ded8ce;
  --line-strong: #c8c0b4;
  --accent: #365943;
  --accent-dark: #294735;
  --accent-soft: #e9f0eb;
  --warning: #8a5a18;
  --warning-soft: #fff4dd;
  --danger: #a33b32;
  --danger-soft: #f7e9e7;
  --shadow: 0 14px 40px rgba(45, 38, 28, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

.shell { width: min(1080px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 50px; }
.customer-shell { width: min(1040px, calc(100% - 28px)); }

.hero { margin-bottom: 24px; }
.brand { margin: 0; font-size: clamp(1.75rem, 5vw, 2.7rem); letter-spacing: -.035em; line-height: 1.08; }
.kicker { margin: 0 0 6px; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.lead { margin: 9px 0 0; color: var(--muted); max-width: 720px; line-height: 1.55; }
.hero-points { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-points span { background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; font-size: .84rem; color: var(--muted); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 20px; }
.stack { display: grid; gap: 16px; }
.customer-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: 18px; align-items: start; }
.customer-aside { min-width: 0; }
.sticky-summary { position: sticky; top: 16px; }
.compact-card { box-shadow: none; }

.section-title { margin: 0 0 12px; font-size: 1.02rem; }
.section-title-large { font-size: 1.22rem; margin-bottom: 0; }
.step-heading { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.step-heading h2 { margin: 0; font-size: 1.08rem; }
.step-heading p { margin: 3px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.step-number { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-weight: 800; font-size: .9rem; }

.date-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.date-choice, .time-choice { border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 14px; padding: 12px; text-align: left; min-height: 68px; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.date-choice strong, .time-choice strong { display: block; }
.date-choice small, .time-choice small { display: block; margin-top: 4px; color: var(--muted); }
.date-choice.active, .time-choice.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.date-choice:not(:disabled):active, .time-choice:not(:disabled):active { transform: scale(.985); }

.dish-list { display: grid; gap: 10px; }
.dish { position: relative; }
.dish input { position: absolute; opacity: 0; pointer-events: none; }
.dish label { display: grid; gap: 9px; border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.dish input:checked + label { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.dish-main { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dish-name { display: block; line-height: 1.35; }
.dish-price { white-space: nowrap; font-weight: 800; }
.dish-desc { margin: 5px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.dish-select-text { color: var(--accent); font-size: .82rem; font-weight: 750; }
.dish input:checked + label .dish-select-text::before { content: "✓ "; }
.dish input:checked + label .dish-select-text { font-weight: 850; }

.time-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.availability-good { color: var(--accent) !important; }
.availability-low { color: var(--warning) !important; font-weight: 700; }
.availability-off { color: var(--muted) !important; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 750; font-size: .9rem; }
.field small { color: var(--muted); line-height: 1.4; }
.field input, .field textarea, .field select, .admin-date-card select, .copy-menu-actions input { width: 100%; border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px 13px; color: var(--text); min-height: 46px; }
.field textarea { min-height: 86px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus, .admin-date-card select:focus, .copy-menu-actions input:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(54,89,67,.2); outline-offset: 2px; }
.check-row { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.check-row input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; }
.optional { color: var(--muted); font-weight: 500; }

.primary, .secondary { border-radius: 12px; font-weight: 800; min-height: 44px; }
.primary { border: 0; background: var(--accent); color: white; padding: 12px 16px; }
.primary:hover:not(:disabled) { background: var(--accent-dark); }
.primary-large { min-height: 52px; font-size: 1rem; }
.secondary { border: 1px solid var(--line); background: #fff; color: var(--text); padding: 10px 13px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.secondary:hover:not(:disabled) { border-color: var(--line-strong); }
.danger { border-color: #d8aaa5; color: var(--danger); }
.small-button { min-height: 36px; padding: 7px 10px; font-size: .82rem; }

.notice { border-radius: 12px; padding: 12px 14px; background: var(--accent-soft); line-height: 1.45; border: 1px solid rgba(54,89,67,.15); }
.notice.error { background: var(--danger-soft); color: #6e2923; border-color: #e8c7c3; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.hp { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.loading-row { color: var(--muted); padding: 10px 0; display: flex; gap: 8px; align-items: center; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); line-height: 1.5; background: #fbfaf7; }
.form-footnote { margin: -4px 0 0; text-align: center; color: var(--muted); font-size: .82rem; }
.summary dl { margin: 0; display: grid; gap: 9px; }
.summary dl > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #eee9e1; padding-bottom: 8px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 750; text-align: right; overflow-wrap: anywhere; }
.summary-hint { margin-top: 13px; padding: 10px 11px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-dark); font-size: .84rem; line-height: 1.4; }
.simple-list { margin: 0; padding-left: 21px; color: var(--muted); display: grid; gap: 7px; line-height: 1.4; }

.success-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; border-color: rgba(54,89,67,.35); background: #fbfdfb; }
.success-card h2 { margin: 0; font-size: 1.3rem; }
.success-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-size: 1.3rem; font-weight: 900; }
.success-details { font-weight: 750; line-height: 1.55; }
.footer { margin-top: 22px; color: var(--muted); font-size: .82rem; display: flex; gap: 12px; flex-wrap: wrap; }

/* Admin */
.login { width: min(460px, calc(100% - 28px)); margin: 60px auto; }
.login-brand { font-size: 1.8rem; }
.login-form { margin-top: 20px; }
.admin-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 20px; }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-date-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: none; }
.day-nav, .day-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.day-nav select { min-width: 240px; }
.icon-button { width: 44px; padding-left: 0; padding-right: 0; }
.admin-section-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 14px; }
.status-badge, .mini-badge { display: inline-flex; align-items: center; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.status-badge { padding: 7px 10px; font-size: .8rem; }
.status-open { color: var(--accent-dark); background: var(--accent-soft); }
.status-closed { color: var(--danger); background: var(--danger-soft); }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.toggle-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; gap: 10px; align-items: flex-start; }
.toggle-card input { margin-top: 3px; width: 18px; height: 18px; }
.toggle-card span { display: grid; gap: 3px; }
.toggle-card small { color: var(--muted); line-height: 1.35; }

.slot-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.slot-card { border: 1px solid var(--line); border-radius: 13px; padding: 12px; }
.slot-card-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.slot-card-head strong { font-size: 1.02rem; }
.slot-card-head span { color: var(--muted); font-size: .88rem; }
.slot-card small { color: var(--muted); display: block; margin-top: 7px; }
.progress { height: 8px; border-radius: 999px; background: #ece8e1; overflow: hidden; margin-top: 10px; }
.progress span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

.kitchen-card { background: #fffcf5; }
.kitchen-summary { display: grid; gap: 8px; }
.kitchen-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; border-bottom: 1px solid #eee7da; padding: 9px 0; }
.kitchen-row:last-child { border-bottom: 0; }
.kitchen-row strong { font-size: 1.2rem; }

.copy-menu-box { display: flex; justify-content: space-between; gap: 16px; align-items: center; border: 1px solid var(--line); background: #fbfaf7; border-radius: 13px; padding: 13px; margin-bottom: 16px; }
.copy-menu-box p { margin: 4px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.4; }
.copy-menu-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-menu-actions input { width: auto; min-width: 155px; }
.add-dish-form { display: grid; grid-template-columns: 1.5fr .55fr; gap: 10px; align-items: end; border-top: 1px solid #eee9e1; padding-top: 16px; }
.dish-description-field { grid-column: 1 / -1; }
.add-dish-button { justify-self: start; }
.dish-admin-list { display: grid; gap: 12px; margin-top: 18px; }
.dish-admin-card { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: #fff; }
.dish-inactive { opacity: .72; background: #faf9f6; }
.dish-admin-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.dish-admin-title { font-size: 1.02rem; }
.active-check { display: flex; align-items: center; gap: 7px; font-size: .84rem; color: var(--muted); }
.dish-admin-fields { display: grid; grid-template-columns: 1.4fr .45fr; gap: 10px; }
.dish-desc-field { grid-column: 1 / -1; }
.dish-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.selection-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.selection-actions small { color: var(--muted); flex: 1 1 240px; }
.selection-basket { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.selection-basket > strong { display: block; margin-bottom: 8px; }
.basket-item, .success-booking { border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-top: 8px; background: #fff; }
.basket-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.basket-item p, .success-booking p { margin: 0; }
.basket-item small { color: var(--muted); }
.basket-remove { padding: 7px 9px; }
.success-booking a { display: inline-block; margin-top: 6px; font-weight: 700; }
.cancel-card { max-width: 680px; margin: 40px auto; }
.password-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.password-form button { justify-self: start; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; border-bottom: 1px solid #eee9e1; padding: 10px 8px; vertical-align: middle; }
th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
td { overflow-wrap: anywhere; }
.status-cancelled { color: var(--muted); opacity: .7; }
.status-cancelled td:not(:last-child) { text-decoration: line-through; }
.mini-badge { padding: 5px 8px; font-size: .72rem; }
.mini-confirmed { color: var(--accent-dark); background: var(--accent-soft); }
.mini-cancelled { color: var(--danger); background: var(--danger-soft); }
.show-cancelled { color: var(--muted); font-size: .84rem; display: flex; gap: 6px; align-items: center; }
.empty-cell { color: var(--muted); text-align: center; padding: 22px; }

@media (hover:hover) and (pointer:fine) {
  .date-choice:not(:disabled):hover, .time-choice:not(:disabled):hover, .dish label:hover { border-color: var(--line-strong); }
}

@media (max-width: 780px) {
  .customer-grid { grid-template-columns: 1fr; }
  .customer-aside { order: -1; }
  .sticky-summary { position: static; }
  .compact-card { display: none; }
  .date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-grid, .slot-cards { grid-template-columns: 1fr; }
  .form-grid, .status-grid, .dish-admin-fields, .add-dish-form, .password-form { grid-template-columns: 1fr; }
  .dish-desc-field, .dish-description-field { grid-column: auto; }
  .admin-header { display: block; }
  .header-actions { margin-top: 14px; }
  .copy-menu-box { align-items: stretch; flex-direction: column; }
  .copy-menu-actions { align-items: stretch; }
  .copy-menu-actions input, .copy-menu-actions button { width: 100%; }
  .admin-date-card { align-items: stretch; }
  .day-nav, .day-actions { width: 100%; }
  .day-nav select { min-width: 0; flex: 1; }
  .day-actions > * { flex: 1; }
  .admin-section-head { align-items: flex-start; }
  .shell { width: min(100% - 20px, 1080px); padding-top: 18px; }
  .card { padding: 16px; border-radius: 15px; }

  .booking-table thead { display: none; }
  .booking-table, .booking-table tbody, .booking-table tr, .booking-table td { display: block; width: 100%; }
  .booking-table tr { border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; margin-bottom: 10px; background: #fff; }
  .booking-table td { border: 0; padding: 5px 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .booking-table td::before { content: attr(data-label); color: var(--muted); font-size: .78rem; font-weight: 700; }
  .booking-table .empty-cell { display: block; text-align: center; }
  .booking-table .empty-cell::before { display: none; }
}

@media (max-width: 420px) {
  .date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-points { display: grid; }
  .dish-main { gap: 8px; }
  .success-card { grid-template-columns: 1fr; }
}

@media print {
  body { background: #fff; }
  .no-print, .footer, .kitchen-card + section { display: none !important; }
  .shell { width: 100%; padding: 0; }
  .card { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .stack { gap: 12px; }
  .bookings-card { display: block !important; }
  .booking-table { font-size: 10pt; }
  a { color: inherit; text-decoration: none; }
}