:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #eef2f7;
  --day-color: #2563eb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #f8fafc, #e8edf5); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1040px, 100%); margin: 0 auto; padding: 18px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:16px; }
.eyebrow { margin:0; font-size:.78rem; font-weight:800; letter-spacing:.16em; color:#667085; }
h1 { margin:2px 0 0; font-size:clamp(2rem, 5vw, 3.3rem); }
.icon-button { border:0; background:#fff; width:52px; height:52px; border-radius:16px; font-size:1.35rem; box-shadow:0 8px 24px rgba(20,31,50,.08); }
.day-tabs { display:grid; grid-template-columns:repeat(7, minmax(70px, 1fr)); gap:8px; overflow-x:auto; padding-bottom:8px; }
.day-tab { border:0; background:#fff; padding:9px 8px; border-radius:14px; font-weight:800; color:#596275; min-width:76px; display:grid; gap:2px; place-items:center; }
.day-tab small { font-size:.72rem; font-weight:750; opacity:.75; }
.day-tab.active { color:#fff; background:var(--day-color); transform:translateY(-1px); }
.day-header { margin:12px 0 18px; background:var(--day-color); color:#fff; border-radius:26px; padding:24px; display:grid; grid-template-columns:56px 1fr 56px; align-items:center; text-align:center; box-shadow:0 18px 40px color-mix(in srgb, var(--day-color) 28%, transparent); }
.day-header h2 { margin:2px 0 0; font-size:clamp(2.4rem, 8vw, 5.6rem); line-height:1; }
.date-label { margin:0; font-weight:800; font-size:1.05rem; opacity:.95; }
.nav-button { border:0; background:rgba(255,255,255,.18); color:white; width:50px; height:58px; border-radius:17px; font-size:2.5rem; line-height:1; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.panel { background:#fff; border-radius:22px; padding:20px; box-shadow:0 8px 30px rgba(25,39,64,.07); min-height:170px; }
.panel h3 { margin:0 0 16px; font-size:1.35rem; }
.people { display:grid; gap:10px; }
.person { background:#f2f5f9; border-radius:14px; padding:10px 13px; font-size:1.28rem; font-weight:800; display:flex; align-items:center; gap:12px; }
.person.has-photo { cursor:pointer; transition:transform .15s, background .15s; }
.person.has-photo:hover { transform:translateY(-1px); background:#e9eef5; }
.person img, .staff-manage-row img, .avatar-placeholder { width:46px; height:46px; border-radius:50%; object-fit:cover; flex:0 0 46px; }
.avatar-placeholder { display:grid; place-items:center; background:#e1e7ef; font-size:1.35rem; }
.dinner-panel { grid-column:span 1; }
.activities-panel { grid-column:span 2; }
.large-text { font-size:clamp(1.5rem, 4vw, 2.2rem); font-weight:900; margin:0; }
.dinner-photo { margin:-4px 0 14px; }
.dinner-photo:empty { display:none; }
.dinner-photo img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:15px; display:block; }
.image-button { display:block; width:100%; border:0; background:transparent; padding:0; cursor:zoom-in; }
.activities { display:grid; gap:10px; }
.activity { display:grid; grid-template-columns:auto 88px 1fr; align-items:center; background:#f2f5f9; border-radius:14px; padding:10px 13px; gap:10px; }
.activity:not(:has(.activity-photo)) { grid-template-columns:88px 1fr; }
.activity-photo { width:58px; }
.activity-photo img { width:58px; height:58px; border-radius:12px; object-fit:cover; display:block; }
.activity-time { font-weight:900; color:var(--day-color); font-size:1.15rem; }
.activity-name { font-weight:800; font-size:1.18rem; }
.empty { color:#7c8799; font-style:italic; }
dialog { border:0; padding:0; border-radius:24px; width:min(760px, calc(100% - 24px)); box-shadow:0 25px 80px rgba(12,20,35,.3); }
dialog::backdrop { background:rgba(14,23,38,.58); backdrop-filter:blur(3px); }
.dialog-card { padding:24px; }
.dialog-card h2 { margin-top:0; }
.dialog-card label { display:grid; gap:7px; font-weight:800; color:#445066; }
input, select { width:100%; border:1px solid #d8dee8; background:#fff; padding:13px 14px; border-radius:12px; color:#172033; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.dialog-actions button, #addStaffButton, #saveDayButton { border:0; border-radius:12px; background:#2563eb; color:#fff; padding:12px 18px; font-weight:900; }
.secondary { background:#edf1f6 !important; color:#253047 !important; }
.danger { color:#b42318 !important; }
.error { min-height:20px; color:#b42318; font-weight:800; }
.admin-card { max-height:90vh; overflow:auto; }
.admin-heading, .section-title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.admin-header-actions { display:flex; align-items:center; gap:8px; }
.settings-button { border:0; border-radius:11px; padding:10px 12px; font-weight:850; }
.week-editor-bar { display:grid; grid-template-columns:48px 1fr 48px; gap:10px; align-items:center; text-align:center; background:#f2f5f9; border-radius:16px; padding:10px; margin:12px 0 18px; }
.week-editor-bar strong { display:block; font-size:1.08rem; margin-top:2px; }
.week-editor-caption { color:#667085; font-size:.72rem; font-weight:900; letter-spacing:.08em; }
.week-arrow { border:0; border-radius:11px; height:44px; font-size:1.6rem; font-weight:900; }
.form-section { border-top:1px solid #edf0f4; margin-top:20px; padding-top:18px; }
.form-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.shift-editor-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.shift-editor-group { background:#f7f9fc; border-radius:15px; padding:12px; }
.shift-editor-group h4 { margin:0; }
.shift-editor-rows { display:grid; gap:8px; margin-top:10px; }
.shift-person-row { display:grid; grid-template-columns:1fr 42px; gap:7px; }
.shift-person-row:not(:has(.remove-shift-person)) { grid-template-columns:1fr; }
.remove-shift-person { border:0; border-radius:10px; background:#fff0ee; color:#b42318; font-weight:900; }
.settings-fields { display:grid; gap:12px; margin-top:18px; }
.toggle-setting { display:flex !important; align-items:center; gap:12px !important; background:#f5f7fa; border-radius:13px; padding:12px; cursor:pointer; }
.toggle-setting input { width:22px; height:22px; flex:0 0 22px; }
.toggle-setting span { display:grid; gap:2px; }
.toggle-setting small { color:#667085; font-weight:500; }
.inline-form { display:grid; grid-template-columns:1fr auto; gap:10px; }
.small { padding:9px 12px !important; border:0; border-radius:10px; font-weight:800; }
.activity-edit-row { display:grid; grid-template-columns:120px 1fr 46px; gap:8px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid #edf0f4; }
.activity-upload-button { grid-column:1 / -1; display:block !important; background:#edf2f8; color:#344054 !important; border-radius:10px; padding:10px 12px; text-align:center; cursor:pointer; font-size:.9rem; }
.activity-upload-button input { display:none; }
.remove-row { border:0; background:#fff0ee; color:#b42318; border-radius:11px; font-weight:900; }
.staff-manager { display:grid; gap:9px; margin-top:14px; }
.staff-manage-row { display:grid; grid-template-columns:46px 1fr auto auto; align-items:center; gap:9px; background:#f5f7fa; border-radius:14px; padding:10px; }
.upload-button { display:block !important; background:#e7eefc; color:#1d4ed8 !important; border-radius:10px; padding:9px 11px; font-size:.86rem; cursor:pointer; text-align:center; }
.upload-button input { display:none; }
.remove-staff-button { border:0; background:#fff0ee; color:#b42318; border-radius:10px; padding:9px 11px; font-weight:850; }
.photo-field { margin-top:13px; }
.pexels-search-button { width:100%; margin-top:13px; border:0; border-radius:12px; padding:12px 14px; background:#172033; color:#fff; font-weight:900; }
.image-search-card { max-height:88vh; overflow:auto; }
.image-search-form { display:grid; grid-template-columns:1fr auto; gap:9px; margin-top:16px; }
.image-search-form button { border:0; border-radius:12px; padding:0 18px; background:#2563eb; color:#fff; font-weight:900; }
.image-search-results { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:16px; }
.image-search-result { border:0; background:#f2f5f9; padding:0; border-radius:13px; overflow:hidden; text-align:left; color:#172033; }
.image-search-result img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.image-search-result span { display:block; padding:8px; font-size:.72rem; font-weight:750; }
.image-search-message { grid-column:1 / -1; color:#667085; text-align:center; padding:24px 8px; }
.pexels-credit { color:#667085; font-size:.78rem; text-align:center; margin:16px 0 0; }
.pexels-credit a { color:inherit; }
.file-note { color:#667085; font-size:.85rem; margin:7px 2px 0; }
.note { color:#667085; font-size:.92rem; line-height:1.45; }
.sticky-actions { position:sticky; bottom:-24px; background:white; padding:14px 0 4px; border-top:1px solid #edf0f4; }
.publish-button { background:#7c3aed !important; }
.sync-status { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:20; background:#172033; color:#fff; border-radius:999px; padding:10px 16px; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.2); opacity:1; transition:opacity .2s; }
.sync-status:empty { opacity:0; pointer-events:none; }
.sync-status.success { background:#15803d; }
.sync-status.error { background:#b42318; }
.site-footer { margin:28px 0 6px; padding:18px 12px 4px; border-top:1px solid #d8dee8; color:#667085; text-align:center; font-size:.78rem; line-height:1.45; }
.site-footer p { margin:2px 0; }
.site-footer a { color:#475467; }
button:disabled { opacity:.6; cursor:wait; }
.image-dialog { width:min(900px, calc(100% - 20px)); max-width:none; background:transparent; box-shadow:none; border-radius:0; }
.image-dialog-card { position:relative; display:grid; place-items:center; min-height:50vh; padding:42px 12px 14px; }
.image-dialog-card img { display:block; max-width:100%; max-height:78vh; object-fit:contain; border-radius:18px; box-shadow:0 20px 70px rgba(0,0,0,.45); }
.image-dialog-card p { color:#fff; font-size:1.25rem; font-weight:900; text-align:center; margin:14px 0 0; text-shadow:0 2px 8px #000; }
.image-dialog-close { position:absolute; right:8px; top:0; width:42px; height:42px; border:0; border-radius:50%; background:#fff; color:#172033; font-weight:900; font-size:1.1rem; z-index:2; }
@media (max-width: 760px) {
  .app-shell { padding:12px; }
  .day-tabs { grid-template-columns:repeat(7, 82px); }
  .grid { grid-template-columns:1fr; }
  .dinner-panel, .activities-panel { grid-column:span 1; }
  .panel { min-height:0; }
  .form-grid { grid-template-columns:1fr; }
  .shift-editor-grid { grid-template-columns:1fr; }
  .admin-heading { align-items:flex-start; }
  .admin-header-actions { flex-direction:column-reverse; align-items:flex-end; }
  .settings-button { font-size:.8rem; }
  .day-header { padding:20px 12px; grid-template-columns:48px 1fr 48px; }
  .activity-edit-row { grid-template-columns:105px 1fr 42px; }
  .staff-manage-row { grid-template-columns:42px 1fr; }
  .staff-manage-row .upload-button, .staff-manage-row .remove-staff-button { grid-column:auto; }
  .sticky-actions { flex-wrap:wrap; }
  .sticky-actions .publish-button { order:-1; width:100%; }
  .image-search-results { grid-template-columns:repeat(2, 1fr); }
}