:root, [data-theme="light"] {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem;
  --color-bg:              #f7f6f2;
  --color-surface:         #f9f8f5;
  --color-surface-2:       #fbfbf9;
  --color-surface-offset:  #f0ede8;
  --color-surface-dynamic: #e6e4df;
  --color-divider:         #dcd9d5;
  --color-text:            #28251d;
  --color-text-muted:      #696761;
  --color-text-faint:      #9a9690;
  --color-text-inverse:    #f9f8f4;
  --color-primary:         #01696f;
  --color-primary-hover:   #0c4e54;
  --color-primary-highlight: #cedcd8;
  --color-success:         #437a22;
  --color-success-highlight: #d7e4cf;
  --color-error:           #a13544;
  --color-error-highlight: #ead7d8;
  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-full:9999px;
  --shadow-sm: 0 1px 2px oklch(0.2 0.01 80 / 0.06);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 80 / 0.08);
  --content-wide: 1100px;
  --font-display: 'Helvetica Neue', 'Arial Nova', Arial, sans-serif;
  --font-body:    'Helvetica Neue', 'Arial Nova', Arial, sans-serif;
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] {
  --color-bg:              #171614;
  --color-surface:         #1c1b19;
  --color-surface-2:       #201f1d;
  --color-surface-offset:  #262320;
  --color-surface-dynamic: #2d2c2a;
  --color-divider:         #2e2c29;
  --color-text:            #e3e0da;
  --color-text-muted:      #b7b2aa;
  --color-text-faint:      #817c74;
  --color-text-inverse:    #1a1917;
  --color-primary:         #4f98a3;
  --color-primary-hover:   #67a8b1;
  --color-primary-highlight: #2b3b3d;
  --color-success:         #82b85d;
  --color-success-highlight: #33422d;
  --color-error:           #dd6974;
  --color-error-highlight: #4c3033;
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.35);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-height:100dvh; font-family:var(--font-body); font-size:var(--text-base); line-height:1.5; color:var(--color-text); background:var(--color-bg); }
button, input, select { font:inherit; color:inherit; }
button { cursor:pointer; border:none; background:none; }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-sm); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* Shell */
.app-shell { min-height:100dvh; display:flex; flex-direction:column; }
.topbar {
  position:sticky; top:0; z-index:10;
  backdrop-filter:blur(14px);
  background:color-mix(in oklab, var(--color-bg) 85%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--color-text) 9%, transparent);
}
.topbar-inner {
  max-width:var(--content-wide); margin:0 auto;
  padding:var(--space-4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
}
.brand { display:flex; align-items:center; gap:var(--space-3); font-family:var(--font-display); font-size:var(--text-sm); font-weight:700; letter-spacing:.01em; }
.brand-mark { width:34px; height:34px; color:var(--color-primary); flex-shrink:0; }
.theme-toggle {
  width:44px; height:44px; border-radius:var(--radius-full);
  border:1px solid color-mix(in oklab, var(--color-text) 12%, transparent);
  background:var(--color-surface); display:inline-grid; place-items:center;
  transition:background var(--transition);
}
.theme-toggle:hover { background:var(--color-surface-offset); }
main { flex:1; max-width:var(--content-wide); width:100%; margin:0 auto; padding:var(--space-6) var(--space-4) var(--space-12); }

/* Views */
.view { display:none; }
.view.active { display:block; }
.panel { background:var(--color-surface); border-radius:var(--radius-xl); border:1px solid color-mix(in oklab, var(--color-text) 9%, transparent); box-shadow:var(--shadow-sm); }

/* Login */
.login-layout { min-height:calc(100dvh - 80px); display:grid; align-items:center; }
.login-card { width:min(100%,460px); margin:0 auto; padding:var(--space-8); display:grid; gap:var(--space-6); }
.eyebrow {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-full);
  background:var(--color-primary-highlight); color:var(--color-primary);
  font-size:var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
h1 { font-family:var(--font-display); font-size:var(--text-xl); font-weight:800; line-height:1.05; letter-spacing:-.03em; }
.muted { color:var(--color-text-muted); }
.form-group { display:grid; gap:var(--space-4); }
.field { display:grid; gap:var(--space-2); }
.field label {
  display:block;
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--color-text-muted);
  line-height:1.4;
}
.field input, .field select {
  width:100%; min-height:48px; border-radius:var(--radius-md);
  border:1px solid color-mix(in oklab, var(--color-text) 12%, transparent);
  background:var(--color-surface-2); padding:0 var(--space-4); font-size:var(--text-sm);
  transition:border-color var(--transition), background var(--transition);
}
.field input:focus, .field select:focus { border-color:var(--color-primary); }
.field input[readonly] { color:var(--color-text-muted); background:var(--color-surface-offset); }
.btn {
  min-height:48px; padding:0 var(--space-5); border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  transition:background var(--transition), color var(--transition);
}
.btn-primary { background:var(--color-primary); color:var(--color-text-inverse); }
.btn-primary:hover { background:var(--color-primary-hover); }
.btn-ghost { background:transparent; border:1px solid color-mix(in oklab, var(--color-text) 12%, transparent); color:var(--color-text-muted); }
.btn-ghost:hover { background:var(--color-surface-offset); }

/* Booking page */
.bookings-layout { display:grid; gap:var(--space-6); }
.controls-card { padding:var(--space-6); display:grid; gap:var(--space-5); }
.controls-row {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--space-4);
  align-items:end;
}
.week-strip {
  display:flex;
  gap:var(--space-2);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:var(--space-1);
}
.week-strip::-webkit-scrollbar { display:none; }
.day-chip {
  min-width:72px;
  width:72px;
  flex-shrink:0;
  padding:var(--space-3) var(--space-2); border-radius:var(--radius-lg);
  border:1px solid color-mix(in oklab, var(--color-text) 9%, transparent);
  background:var(--color-surface-2); text-align:center;
  min-height:70px; display:grid; gap:var(--space-1); align-content:center;
  cursor:pointer; transition:background var(--transition), border-color var(--transition);
}
.day-chip:hover:not(.active) { background:var(--color-surface-offset); }
.day-chip.active { background:var(--color-primary-highlight); border-color:color-mix(in oklab, var(--color-primary) 35%, transparent); color:var(--color-primary); }
.day-chip .day-name  { font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.day-chip .day-num   { font-size:var(--text-lg); font-weight:700; line-height:1; }
.day-chip .day-month { font-size:var(--text-xs); opacity:.75; }

/* Schedule card */
.schedule-card { overflow:hidden; }
.schedule-head {
  padding:var(--space-5) var(--space-6);
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  flex-wrap:wrap; border-bottom:1px solid var(--color-divider);
}
.schedule-title { font-family:var(--font-display); font-size:var(--text-lg); font-weight:700; }
.legend { display:flex; gap:var(--space-4); flex-wrap:wrap; font-size:var(--text-xs); color:var(--color-text-muted); }
.legend-item { display:inline-flex; align-items:center; gap:var(--space-2); }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot-available { background:var(--color-success); }
.dot-reserved  { background:var(--color-error); }
.dot-mine      { background:var(--color-primary); }

/* Slots wrapper */
.slots-wrapper {
  position:relative;
  padding:var(--space-6) var(--space-6) var(--space-6) var(--space-10);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}

/* Meal bands */
.meal-band {
  position:absolute;
  left:0; right:0;
  pointer-events:none;
  z-index:0;
}
.meal-band-label {
  position:absolute;
  left:var(--space-2);
  top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:var(--text-xs); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  opacity:.6;
  white-space:nowrap;
  z-index:3;
  pointer-events:none;
  color:var(--color-text-muted);
}

/* Slot card */
.slot-card {
  position:relative; z-index:1;
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-lg);
  border:1px solid color-mix(in oklab, var(--color-text) 9%, transparent);
  background:var(--color-surface-2);
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  column-gap:var(--space-5);
  row-gap:var(--space-2);
  align-items:center;
  transition:background var(--transition), box-shadow var(--transition);
}
.slot-card[data-state="available"]:hover { box-shadow:var(--shadow-md); background:var(--color-surface); }
.slot-card[data-state="mine"] {
  background:var(--color-primary-highlight);
  border-color:color-mix(in oklab, var(--color-primary) 30%, transparent);
}
.slot-card[data-state="reserved"] {
  background:var(--color-surface-offset);
  opacity:.7;
}

.slot-time {
  font-size:var(--text-base); font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.slot-card[data-state="reserved"] .slot-time { color:var(--color-text-faint); }

.slot-state-pill {
  grid-row:1; grid-column:2;
  display:inline-flex; align-items:center;
  padding:var(--space-1) var(--space-3);
  border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.pill-available { background:var(--color-success-highlight); color:var(--color-success); }
.pill-reserved  { background:var(--color-error-highlight);   color:var(--color-error); }
.pill-mine      { background:var(--color-primary-highlight);  color:var(--color-primary); }

.slot-desc {
  grid-row:2; grid-column:1;
  font-size:var(--text-sm); color:var(--color-text-muted);
}
.slot-card[data-state="reserved"] .slot-desc { color:var(--color-text-faint); }

.slot-action {
  grid-row:2; grid-column:2;
  min-height:38px; padding:0 var(--space-4);
  border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:600;
  white-space:nowrap;
  transition:background var(--transition), color var(--transition);
}
.action-book   { background:var(--color-primary); color:var(--color-text-inverse); }
.action-book:hover { background:var(--color-primary-hover); }
.action-cancel { background:transparent; border:1px solid color-mix(in oklab, var(--color-primary) 40%, transparent); color:var(--color-primary); }
.action-cancel:hover { background:var(--color-primary-highlight); }
.action-taken  { color:var(--color-text-faint); cursor:not-allowed; }

/* Modal */
.modal-backdrop {
  position:fixed; inset:0;
  background:color-mix(in oklab, #000 46%, transparent);
  display:none; align-items:center; justify-content:center;
  padding:var(--space-4); z-index:20;
}
.modal-backdrop.open { display:flex; }
.modal {
  width:min(100%,440px); padding:var(--space-6);
  background:var(--color-surface); border-radius:var(--radius-xl);
  border:1px solid color-mix(in oklab, var(--color-text) 9%, transparent);
  box-shadow:var(--shadow-md); display:grid; gap:var(--space-5);
}
.summary-list { display:grid; gap:0; }
.summary-row {
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-4);
  padding:var(--space-3) 0; border-bottom:1px solid var(--color-divider);
  font-size:var(--text-sm);
}
.summary-row:last-child { border-bottom:0; }
.summary-row dt { color:var(--color-text-muted); }
.summary-row dd { font-weight:600; }
.modal-actions { display:flex; gap:var(--space-3); flex-wrap:wrap; }

@media (max-width: 720px) {
  .controls-row { grid-template-columns:1fr 1fr; }
  .slot-card { grid-template-columns:1fr; }
  .slot-state-pill { grid-row:auto; grid-column:auto; width:fit-content; }
  .slot-action { grid-row:auto; grid-column:auto; width:fit-content; }
}
@media (max-width: 480px) {
  .controls-row { grid-template-columns:1fr; }
  .week-strip { gap:var(--space-1); }
  .day-chip {
    min-width:72px;
    width:72px;
    flex-shrink:0; padding:var(--space-2) var(--space-1); min-height:58px; }
  .day-chip .day-num { font-size:var(--text-base); }
}