:root{
  --bg: #F3F7FA;
  --surface: #FFFFFF;
  --border: #DCE6EC;
  --ink: #16232E;
  --ink-soft: #57697A;
  --brand: #0B5C82;
  --brand-dark: #073F59;
  --brand-pale: #E4F0F6;
  --sun: #F2A541;
  --sun-pale: #FCEBCB;
  --success: #2F9E75;
  --success-pale: #DFF3EA;
  --danger: #D14343;
  --danger-pale: #FBE7E7;
  --taken: #E3E8EC;
  --shadow: 0 10px 26px -16px rgba(11,45,66,0.28);
  --radius: 12px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Inter', -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
  line-height:1.55;
}

h1, h2, .brand-font{
  font-family:'Manrope', 'Inter', sans-serif;
}

/* ---------- Topbar ---------- */
.topbar{ background:var(--brand-dark); color:#fff; }
.topbar-inner{
  max-width:880px;
  margin:0 auto;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.topbar-brand{ display:flex; align-items:center; gap:12px; }
.topbar-mark{
  width:46px; height:46px;
  border-radius:50%;
  background:#fff;
  padding:2px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,0.25);
}
.topbar-mark img{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.topbar-title{
  font-family:'Manrope', sans-serif;
  font-weight:800;
  font-size:17px;
  line-height:1.25;
}
.topbar-subtitle{
  font-size:13px;
  color:rgba(255,255,255,0.75);
  margin-top:2px;
}
.topbar-user{
  display:flex; align-items:center; gap:12px;
  font-size:13.5px;
  color:rgba(255,255,255,0.9);
  flex-shrink:0;
}
.topbar-user a{
  color:#fff;
  background:rgba(255,255,255,0.14);
  padding:7px 12px;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  font-size:12.5px;
  white-space:nowrap;
}
.topbar-user a:hover{ background:rgba(255,255,255,0.24); }
.topbar-wave{ display:block; width:100%; height:14px; }
@media (max-width:640px){
  .topbar-inner{ padding:14px 18px; flex-wrap:wrap; }
  .topbar-title{ font-size:15.5px; }
}

/* ---------- Page shell ---------- */
.page{
  max-width:760px;
  margin:0 auto;
  padding:36px 24px 70px 24px;
}
.page.admin-wrap{ max-width:960px; }
@media (max-width:640px){ .page{ padding:26px 16px 50px 16px; } }

header.top{ margin-bottom:28px; text-align:center; }
header.top .lede{ margin-left:auto; margin-right:auto; }

.eyebrow{
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--brand);
  font-weight:700;
  margin-bottom:8px;
}

h1{
  font-weight:800;
  font-size:clamp(24px, 4vw, 32px);
  line-height:1.2;
  margin:0 0 10px 0;
  color:var(--ink);
}

.lede{
  font-size:15.5px;
  color:var(--ink-soft);
  max-width:56ch;
  margin:0;
}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px;
  margin-bottom:20px;
}

.card h2{
  font-size:17px;
  font-weight:700;
  margin:0 0 4px 0;
  color:var(--ink);
}

.card .hint{
  font-size:13.5px;
  color:var(--ink-soft);
  margin:0 0 16px 0;
}

/* ---------- Date picker ---------- */
.date-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:thin;
}

.date-chip{
  flex:0 0 auto;
  border:1.5px solid var(--border);
  background:var(--surface);
  border-radius:10px;
  padding:9px 13px;
  text-align:center;
  cursor:pointer;
  font-family:'Inter';
  transition:border-color .15s ease, background .15s ease, color .15s ease;
  min-width:60px;
}
.date-chip .dow{
  display:block; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft);
}
.date-chip .dom{
  display:block; font-family:'Manrope', sans-serif; font-size:17px; font-weight:700; margin-top:2px; color:var(--ink);
}
.date-chip:hover{ border-color:var(--brand); }
.date-chip:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }
.date-chip.selected{ background:var(--brand); border-color:var(--brand); }
.date-chip.selected .dow, .date-chip.selected .dom{ color:#fff; }

/* ---------- Slots ---------- */
.slot-list{ margin-top:4px; }
.slot-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 4px; border-bottom:1px solid var(--border);
}
.slot-row:last-child{ border-bottom:none; }
.slot-time{ font-family:'Manrope', sans-serif; font-size:15.5px; font-weight:700; color:var(--ink); }

.slot-btn{
  font-family:'Inter'; font-size:13px; font-weight:700;
  padding:8px 15px; border-radius:8px;
  border:1.5px solid var(--brand); background:var(--surface); color:var(--brand);
  cursor:pointer; transition:background .15s ease, color .15s ease;
}
.slot-btn:hover{ background:var(--brand-pale); }
.slot-btn:focus-visible{ outline:3px solid var(--brand); outline-offset:2px; }
.slot-btn.taken{ border-color:var(--taken); background:var(--taken); color:var(--ink-soft); cursor:not-allowed; }
.slot-btn.selected{ background:var(--brand); color:#fff; }

.empty-note{ color:var(--ink-soft); font-size:13.5px; padding:14px 4px; }

/* ---------- Form ---------- */
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--ink); }
.field input{
  width:100%; padding:11px 12px; border:1.5px solid var(--border); border-radius:9px;
  font-family:'Inter'; font-size:15px; background:var(--surface); color:var(--ink);
}
.field input:focus-visible{ outline:3px solid var(--brand); outline-offset:1px; border-color:var(--brand); }
.field-row{ display:flex; gap:14px; }
.field-row .field{ flex:1; }
@media (max-width:520px){ .field-row{ flex-direction:column; gap:0; } }

.selected-slot-banner{
  display:flex; align-items:center; gap:10px;
  background:var(--sun-pale); border:1px solid var(--sun); border-radius:10px;
  padding:11px 14px; margin-bottom:18px; font-size:14px;
}

.btn-primary{
  font-family:'Inter'; font-weight:700; font-size:15px; padding:13px 22px; border-radius:10px;
  border:none; background:var(--brand-dark); color:#fff; cursor:pointer; width:100%;
  transition:background .15s ease;
}
.btn-primary:hover{ background:var(--brand); }
.btn-primary:focus-visible{ outline:3px solid var(--sun); outline-offset:2px; }
.btn-primary:disabled{ opacity:0.6; cursor:not-allowed; }

.btn-ghost{
  font-family:'Inter'; font-weight:600; font-size:13px; padding:9px 14px; border-radius:8px;
  border:1.5px solid var(--border); background:transparent; color:var(--ink-soft); cursor:pointer;
}
.btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }

.btn-brand{
  font-family:'Inter'; font-weight:700; font-size:13px; padding:9px 15px; border-radius:8px;
  border:1.5px solid var(--brand); background:var(--brand-pale); color:var(--brand-dark); cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn-brand:hover{ background:var(--brand); color:#fff; }

.error-text{ color:var(--danger); font-size:13px; margin-top:6px; display:none; }

/* ---------- Confirmation ---------- */
.confirm-card{ text-align:center; padding:34px 24px; }
.confirm-card h2{ font-size:20px; margin-bottom:8px; }
.confirm-details{ text-align:left; background:var(--bg); border-radius:10px; padding:16px 18px; margin:18px 0; font-size:14px; }
.confirm-details div{ padding:3px 0; }
.confirm-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

footer.page-footer{
  margin-top:36px; padding-top:18px; border-top:1px solid var(--border);
  font-size:12.5px; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
}
footer.page-footer a{ color:var(--brand); font-weight:600; }

/* ---------- Admin table & filter ---------- */
.filter-bar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px;
}
.filter-bar label{ font-size:13px; font-weight:700; color:var(--ink); }
.filter-bar select{
  padding:9px 12px; border:1.5px solid var(--border); border-radius:8px;
  font-family:'Inter'; font-size:14px; background:var(--surface); color:var(--ink);
}
.filter-bar select:focus-visible{ outline:3px solid var(--brand); }

.badge{
  display:inline-block; font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--brand-pale); color:var(--brand-dark);
}

table.admin-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.admin-table th, table.admin-table td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
table.admin-table th{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); }
table.admin-table tbody tr:hover{ background:var(--bg); }
.row-actions form{ margin:0; }
.row-actions button{
  font-size:12px; padding:6px 10px; border-radius:6px; border:1px solid var(--danger);
  background:transparent; color:var(--danger); cursor:pointer;
}
.row-actions button:hover{ background:var(--danger-pale); }

.hidden{ display:none !important; }

.print-only{ display:none; }

@media print{
  .topbar, footer.page-footer, header.top, .no-print{ display:none !important; }
  body{ background:#fff; }
  .page{ padding:0; max-width:none; }
  .card{ box-shadow:none; border:none; padding:0; }
  .print-only{ display:block; text-align:center; }
}

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important; } }