:root {
  --cream: #faf6f0;
  --brown: #4b2e1e;
  --brown-light: #7a5238;
  --accent: #c9812f;
  --accent-dark: #a8641a;
  --green: #2f7a4f;
  --red: #b0392f;
  --card: #ffffff;
  --border: #e6ddd2;
  --fun-bg-a: #f3efff;
  --fun-bg-b: #d9e2ff;
  --fun-accent: #7048e8;
  --fun-accent-2: #0ca678;
  --fun-ink: #2b1748;
  --fun-surface: #fbfaff;
  --fun-font: "Trebuchet MS", sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Professional restaurant workspace */
body{background:#f5f7f8;color:#24322d}.topbar{background:linear-gradient(110deg,#123c32,#1f5a49);box-shadow:0 4px 18px #123c3226}.card{border-color:#dfe7e3;box-shadow:0 5px 20px #163d3020}.btn{background:#b7791f}.btn:hover{background:#925f17}.btn.ghost{background:#eef4f1;color:#17483a}.restaurant-hero{padding:25px 20px;margin-bottom:14px;border-radius:0 0 22px 22px;background:linear-gradient(135deg,#123c32,#24715b);color:white;text-align:center}.restaurant-hero span{font-size:11px;letter-spacing:3px}.restaurant-hero h1{color:white;margin:5px}.wide{width:100%}.seating-card{max-width:520px;margin:20px auto}.reservation-note{padding:10px;background:#fff3d6;border-radius:8px;margin:10px 0}.menu-item small{display:block;color:#66756f}.sticky-order{position:sticky;bottom:0;padding:12px;background:#fff;border-radius:12px;box-shadow:0 -6px 24px #172f2920;display:grid;gap:8px;text-align:center}.page-heading,.ticket-top,.card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.page-heading p,.ticket-top small{display:block;color:#687a73}.metric{background:#e4f2eb;color:#1f5a49;padding:7px 12px;border-radius:30px;font-weight:700}.kitchen-grid,.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}.kitchen-ticket{border-top:5px solid #b7791f}.kitchen-ticket .btn{margin-top:12px;width:100%}.service-items{padding-left:22px}.service-items li{padding:7px 0;border-bottom:1px solid #e4eae7;display:flex;justify-content:space-between}.item-state{border:0;border-radius:20px;padding:4px 9px;cursor:pointer}.pill.available{background:#d9f2e3;color:#17603d}.pill.reserved{background:#fff0bf;color:#7a5700}.pill.occupied{background:#dce9ff;color:#214d91}.pill.queued{background:#f6e2c4}.pill.cooking{background:#fff0ad}.invoice{max-width:780px;margin:20px auto}.invoice-brand,.invoice-meta{display:inline-block;width:49%;vertical-align:top}.invoice-meta{text-align:right}.invoice-totals{margin-left:auto;max-width:300px}.invoice-totals p,.invoice-totals h2{display:flex;justify-content:space-between}.thank-you{text-align:center}.period-tabs{display:flex;flex-wrap:wrap;gap:5px}.period-tabs a{padding:6px 10px;border-radius:20px;text-decoration:none}.period-tabs a.active{background:#1f5a49;color:#fff}.table-manage{display:grid;grid-template-columns:100px 1fr 180px auto;gap:5px;min-width:620px}.empty-state{text-align:center;padding:30px;color:#6b7974}@media(max-width:650px){.page-heading,.card-actions{align-items:stretch;flex-direction:column}.invoice-brand,.invoice-meta{width:100%;text-align:left}.table-manage{grid-template-columns:1fr}.visitor-shell .container{padding:0 10px 24px}}
@media print{.topbar,.no-print{display:none!important}.container{max-width:none}.invoice{box-shadow:none;border:0}}
.group-filter{display:flex;gap:6px;overflow-x:auto;padding:7px 0 12px}.group-filter a{white-space:nowrap;text-decoration:none;padding:6px 10px;border:1px solid #d9e5df;border-radius:20px;background:#fff;font-size:12px}.group-filter a.active{background:#1f5a49;color:#fff}.inventory-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.inventory-summary div{background:linear-gradient(135deg,#153f34,#25705b);color:#fff;border-radius:12px;padding:18px}.inventory-summary strong{display:block;font-size:28px}.inventory-summary span{font-size:12px;opacity:.8}.inventory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.inventory-card{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid #dfe7e3;border-left:5px solid #b7791f;border-radius:12px;padding:16px;text-decoration:none;color:#24322d;box-shadow:0 5px 18px #163d3014;transition:.18s}.inventory-card:hover{transform:translateY(-2px);box-shadow:0 9px 25px #163d3024}.inventory-card h2{margin:0 0 4px}.inventory-card p{margin:0}.inventory-icon{font-size:34px}@media(max-width:650px){.inventory-summary{grid-template-columns:repeat(2,1fr)}}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  line-height: 1.5;
}

a { color: var(--accent-dark); }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
}

.topbar {
  background: var(--brown);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar a { color: #fff; text-decoration: none; margin-left: 14px; font-size: 14px; }
.topbar .brand { font-weight: 700; font-size: 18px; letter-spacing: 0.3px; display: flex; align-items: center; }
.topbar .nav a.active { text-decoration: underline; }
.brand-logo { height: 34px; width: 34px; border-radius: 50%; margin-right: 9px; flex-shrink: 0; }
.guest-logo-header { text-align: center; padding: 14px 0 0; }
.guest-logo-header img { height: 64px; width: 64px; border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.invoice-logo { height: 54px; width: 54px; border-radius: 50%; margin-bottom: 8px; }

.badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 12px;
  margin-left: 4px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}

h1, h2, h3 { color: var(--brown); }
h1 { font-size: 22px; }
h2 { font-size: 18px; }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { background: var(--accent-dark); }
.btn.secondary { background: var(--brown-light); }
.btn.danger { background: var(--red); }
.btn.small { padding: 5px 10px; font-size: 12px; }

input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 10px;
}

label { font-size: 13px; font-weight: 600; color: var(--brown-light); display: block; margin-bottom: 3px; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--brown-light); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.pill.received { background: #fde7c8; color: #8a5a11; }
.pill.preparing { background: #fff0b3; color: #7a5d00; }
.pill.ready { background: #d7f0d9; color: #1f6b2c; }
.pill.served { background: #dbe7ff; color: #234a9c; }
.pill.paid { background: #e6e6e6; color: #444; }

.reward-card { background: linear-gradient(135deg, #fff4dd, #ffe6c2); border: 1px solid #e9c078; }

.menu-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.menu-item .price { color: var(--accent-dark); font-weight: 700; }
.qty-controls { display: flex; align-items: center; gap: 8px; }
.qty-controls button { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: #fff; cursor: pointer; }

.footer-note { text-align: center; font-size: 12px; color: var(--brown-light); margin-top: 24px; padding-bottom: 24px; }

.qr-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.qr-cell { border: 1px solid var(--border); border-radius: 8px; padding: 10px; text-align: center; width: 160px; }
.qr-cell canvas, .qr-cell img { max-width: 100%; }

@media print {
  .no-print { display: none !important; }
  .qr-cell { break-inside: avoid; }
}

.alert-toast {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--brown);
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  max-width: 300px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  font-size: 14px;
}

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.flash.error { background: #fbe0dd; color: var(--red); }
.flash.success { background: #ddf0e0; color: var(--green); }

.profile-strip { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; padding:10px 14px; border-radius:10px; background:#fff; border:1px solid var(--border); font-weight:700; }
.profile-strip a { font-size:13px; }
.fun-heading { text-align:center; margin:18px 0 22px; }
.profile-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.profile-card { display:flex; flex-direction:column; gap:7px; padding:18px; border:1px solid var(--border); border-radius:14px; background:#fff; color:var(--brown); text-decoration:none; box-shadow:0 4px 14px rgba(75,46,30,.06); }
.profile-card:hover,.profile-card.selected { border-color:var(--accent); transform:translateY(-1px); }
.profile-card strong { font-size:18px; }
.profile-card span:last-child { color:var(--brown-light); font-size:14px; }
.profile-emoji { font-size:34px; }
.profile-welcome,.fun-stage { text-align:center; max-width:620px; margin:28px auto; padding:28px; }
.profile-hero-emoji { font-size:58px; }
.fun-eyebrow { text-transform:uppercase; letter-spacing:.7px; color:var(--brown-light); font-size:12px; font-weight:700; }
.fun-content { font-size:18px; }
.fun-stage details { text-align:left; margin:18px auto; max-width:480px; }
.fun-stage summary { cursor:pointer; font-weight:700; color:var(--accent-dark); }
.slot-note { margin:22px 0 14px; padding:10px; border-radius:8px; background:#f7efe5; color:var(--brown-light); font-size:13px; }
.profile-checks { display:flex; flex-wrap:wrap; gap:4px 8px; min-width:130px; }
.profile-checks label { display:inline-flex; align-items:center; gap:2px; margin:0; cursor:pointer; }
.profile-checks input { margin:0; }
.game-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:14px 0; }
.game-btn { margin:3px; }
.game-status { min-height:24px; font-weight:700; color:var(--accent-dark); }
.game-big { font-size:42px; font-weight:800; letter-spacing:6px; margin:16px 0; }
.memory-grid { display:grid; grid-template-columns:repeat(4,58px); gap:8px; justify-content:center; margin:16px 0; }
.memory-card,.ttt-cell,.connect-cell { border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--brown); font-size:25px; cursor:pointer; }
.memory-card { width:58px; height:58px; }
.ttt-grid { display:grid; grid-template-columns:repeat(3,72px); gap:6px; justify-content:center; margin:16px 0; }
.ttt-cell { width:72px; height:72px; font-weight:800; }
.connect-grid { display:grid; grid-template-columns:repeat(7,42px); gap:4px; justify-content:center; padding:8px; border-radius:10px; background:#315f72; margin:16px auto; width:max-content; }
.connect-cell { width:42px; height:42px; border-radius:50%; padding:0; }
.tap-button { width:180px; height:120px; font-size:26px; }
.sudoku-grid { display:grid; grid-template-columns:repeat(9,38px); width:max-content; margin:16px auto; border:2px solid var(--brown); }
.sudoku-grid input,.sudoku-grid span { width:38px; height:38px; margin:0; padding:0; display:flex; align-items:center; justify-content:center; text-align:center; border:1px solid var(--border); border-radius:0; font-size:17px; }
.sudoku-grid input::-webkit-inner-spin-button { display:none; }
.sudoku-grid .wrong { background:#fbe0dd; color:var(--red); }
@media (max-width:480px) { .connect-grid { grid-template-columns:repeat(7,36px); } .connect-cell { width:36px;height:36px; } .sudoku-grid input,.sudoku-grid span { width:33px;height:33px; } }
.cms-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.cms-header h1 { margin-bottom:3px; }
.cms-header p { margin-top:0; color:var(--brown-light); }
.cms-layout { display:grid; grid-template-columns:230px minmax(0,1fr); gap:16px; align-items:start; }
.cms-sidebar { position:sticky; top:12px; }
.cms-summary { display:flex; flex-direction:column; gap:7px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.cms-summary span { color:var(--brown-light); font-size:13px; }
.cms-filters { display:grid; grid-template-columns:1fr 150px auto; gap:8px; align-items:start; }
.cms-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
.cms-item.is-hidden { opacity:.62; }
.cms-item-title { font-weight:700; }
.cms-item p { white-space:normal; overflow-wrap:anywhere; }
.cms-actions { display:flex; flex-wrap:wrap; align-content:start; gap:5px; }
.cms-actions form { display:inline; }
.pagination { display:flex; gap:5px; flex-wrap:wrap; margin-top:16px; }
.pagination a { min-width:30px; padding:5px 8px; text-align:center; border:1px solid var(--border); border-radius:6px; text-decoration:none; }
.pagination a.active { background:var(--accent); color:#fff; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.prompt-card { margin:16px auto; padding:20px; max-width:500px; border:2px dashed var(--accent); border-radius:12px; font-size:20px; font-weight:700; background:#fffaf3; }
.word-row { font-family:monospace; font-size:18px; margin:7px; letter-spacing:2px; }
.reaction-pad { width:220px; height:150px; border:0; border-radius:16px; background:var(--red); color:#fff; font-size:28px; font-weight:800; cursor:pointer; }
.reaction-pad.go { background:var(--green); }
#draw-pad { width:100%; max-width:320px; background:#fff; border:2px solid var(--brown); border-radius:8px; touch-action:none; }
.mystery-box { width:120px; height:120px; display:flex; align-items:center; justify-content:center; margin:18px auto; border-radius:18px; background:linear-gradient(135deg,#6941c6,#c2478a); color:#fff; font-size:58px; font-weight:900; box-shadow:0 8px 20px rgba(105,65,198,.25); }
.checkers-board { display:grid; grid-template-columns:repeat(8,52px); width:max-content; margin:16px auto; border:4px solid #4b2e1e; }
.checker-square { width:52px; height:52px; border:0; padding:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.checker-square.light { background:#efd8b5; }
.checker-square.dark { background:#7a5238; }
.checker-square.selected { box-shadow:inset 0 0 0 4px #ffd54f; }
.checker-square.legal { box-shadow:inset 0 0 0 4px #72d79b; }
.checker-piece { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#ffd54f; font-size:22px; font-weight:900; box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),0 2px 4px rgba(0,0,0,.25); }
.checker-piece.red { background:#c83b35; }
.checker-piece.black { background:#242424; }
.checker-piece.king { border:3px solid #ffd54f; }
@media (max-width:480px) { .checkers-board { grid-template-columns:repeat(8,39px); } .checker-square { width:39px;height:39px; } .checker-piece { width:30px;height:30px;font-size:17px; } }
.chess-board { display:grid; grid-template-columns:repeat(8,52px); width:max-content; margin:16px auto; border:4px solid #3b2818; }
.chess-square { width:52px; height:52px; border:0; padding:0; display:flex; align-items:center; justify-content:center; font-size:39px; line-height:1; cursor:pointer; font-family:"Segoe UI Symbol","Arial Unicode MS",serif; }
.chess-square.light { background:#f0d9b5; }
.chess-square.dark { background:#8b5a3c; }
.chess-square.selected { box-shadow:inset 0 0 0 4px #ffd54f; }
.chess-square.legal { box-shadow:inset 0 0 0 4px #72d79b; }
@media (max-width:480px) { .chess-board { grid-template-columns:repeat(8,39px); } .chess-square { width:39px;height:39px;font-size:31px; } }
@media (max-width:760px) { .cms-layout { grid-template-columns:1fr; } .cms-sidebar { position:static; } .cms-filters,.form-grid { grid-template-columns:1fr; } .cms-item { grid-template-columns:1fr; } }

/* Visitor FunCate themes: randomized by fun-games.js on each activity load. */
body.fun-experience-page {
  min-height:100vh;
  color:var(--fun-ink);
  background:
    radial-gradient(circle at 10% 12%,color-mix(in srgb,var(--fun-accent) 20%,transparent) 0 8%,transparent 28%),
    radial-gradient(circle at 88% 78%,color-mix(in srgb,var(--fun-accent-2) 20%,transparent) 0 10%,transparent 30%),
    linear-gradient(135deg,var(--fun-bg-a),var(--fun-bg-b));
  background-attachment:fixed;
  overflow-x:hidden;
}
.fun-experience-page .container { position:relative; z-index:2; }
.themed-profile-strip { font-family:var(--fun-font); background:color-mix(in srgb,var(--fun-surface) 88%,transparent); border-color:color-mix(in srgb,var(--fun-accent) 28%,white); box-shadow:0 8px 30px color-mix(in srgb,var(--fun-accent) 12%,transparent); backdrop-filter:blur(9px); }
.themed-profile-strip a { color:var(--fun-accent); }
.themed-fun-card { position:relative; overflow:hidden; font-family:var(--fun-font); color:var(--fun-ink); background:linear-gradient(145deg,color-mix(in srgb,var(--fun-surface) 95%,white),color-mix(in srgb,var(--fun-bg-a) 78%,white)); border:1px solid color-mix(in srgb,var(--fun-accent) 32%,white); border-top:7px solid var(--fun-accent); box-shadow:0 24px 65px color-mix(in srgb,var(--fun-accent) 20%,transparent); opacity:0; transform:translateY(14px) scale(.985); }
.themed-fun-card.fun-theme-loaded { animation:fun-card-in .55s cubic-bezier(.2,.8,.2,1) forwards; }
.themed-fun-card::before { content:""; position:absolute; width:170px; height:170px; right:-90px; top:-100px; border-radius:50%; background:linear-gradient(135deg,var(--fun-accent),var(--fun-accent-2)); opacity:.13; }
.themed-fun-card h1,.themed-fun-card h2 { color:var(--fun-ink); font-family:var(--fun-font); }
.themed-fun-card h1 { font-size:clamp(26px,5vw,40px); letter-spacing:-.6px; }
.themed-fun-card .fun-eyebrow { color:var(--fun-accent); }
.themed-fun-card .btn { background:linear-gradient(135deg,var(--fun-accent),var(--fun-accent-2)); color:#fff; border:0; box-shadow:0 7px 18px color-mix(in srgb,var(--fun-accent) 28%,transparent); transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.themed-fun-card .btn:hover { transform:translateY(-2px) scale(1.025); filter:saturate(1.13); box-shadow:0 11px 25px color-mix(in srgb,var(--fun-accent) 35%,transparent); }
.themed-fun-card .btn:active { transform:translateY(1px) scale(.98); }
.themed-fun-card input,.themed-fun-card textarea,.themed-fun-card select { border:2px solid color-mix(in srgb,var(--fun-accent) 30%,white); background:var(--fun-surface); color:var(--fun-ink); }
.themed-fun-card .slot-note { background:linear-gradient(90deg,color-mix(in srgb,var(--fun-accent) 10%,white),color-mix(in srgb,var(--fun-accent-2) 10%,white)); color:var(--fun-ink); }
.themed-fun-card .prompt-card { border-color:var(--fun-accent); background:var(--fun-surface); transform:rotate(-.35deg); box-shadow:7px 7px 0 color-mix(in srgb,var(--fun-accent-2) 18%,transparent); }
.themed-fun-card .game-status { color:var(--fun-accent); }
.themed-fun-card .memory-card { background:linear-gradient(145deg,var(--fun-accent),var(--fun-accent-2)); color:#fff; border:2px solid rgba(255,255,255,.65); transition:transform .2s ease; }
.themed-fun-card .memory-card:hover { transform:rotate(2deg) scale(1.07); }
.fun-ambient { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.fun-ambient span { position:absolute; display:block; border-radius:38% 62% 55% 45%; background:linear-gradient(135deg,var(--fun-accent),var(--fun-accent-2)); opacity:.12; filter:blur(1px); }
.fun-ambient span:nth-child(1){width:130px;height:130px;left:5%;top:18%;animation:fun-float 8s ease-in-out infinite;}
.fun-ambient span:nth-child(2){width:80px;height:80px;right:9%;top:12%;animation:fun-float 6s ease-in-out -2s infinite reverse;}
.fun-ambient span:nth-child(3){width:180px;height:180px;right:4%;bottom:5%;animation:fun-float 10s ease-in-out -4s infinite;}
.fun-ambient span:nth-child(4){width:55px;height:55px;left:14%;bottom:12%;animation:fun-float 7s ease-in-out -1s infinite reverse;}
.fun-motion-2 .themed-fun-card h1 { animation:fun-pop .65s .18s both; }
.fun-motion-3 .themed-fun-card { border-radius:26px 10px 26px 10px; }
.fun-motion-4 .themed-fun-card::before { animation:fun-spin 12s linear infinite; }
@keyframes fun-card-in { to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes fun-pop { 0%{transform:scale(.8);opacity:0} 70%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
@keyframes fun-float { 0%,100%{transform:translate(0,0) rotate(0)} 50%{transform:translate(18px,-24px) rotate(22deg)} }
@keyframes fun-spin { to{transform:rotate(360deg)} }
@media (prefers-reduced-motion:reduce) { .themed-fun-card,.fun-ambient span,.themed-fun-card h1,.themed-fun-card::before { animation:none!important; transition:none!important; } .themed-fun-card { opacity:1;transform:none; } }

/* Compact desktop workspace. Visitor-facing pages keep the mobile layout above. */
.admin-shell .container { max-width:1280px; padding:12px 18px 24px; }
.admin-shell .topbar { position:sticky; top:0; z-index:50; padding:8px 18px; flex-wrap:nowrap; box-shadow:0 2px 12px rgba(45,28,18,.16); }
.admin-shell .topbar .brand { white-space:nowrap; font-size:16px; }
.admin-shell .topbar .nav { display:flex; align-items:center; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:thin; }
.admin-shell .topbar a { display:inline-block; margin:0; padding:6px 9px; border-radius:6px; white-space:nowrap; font-size:12px; }
.admin-shell .topbar a:hover,.admin-shell .topbar a.active { background:rgba(255,255,255,.14); text-decoration:none; }
.admin-shell h1 { margin:8px 0 10px; font-size:21px; }
.admin-shell h2 { margin:5px 0 9px; font-size:16px; }
.admin-shell p { margin:6px 0 10px; }
.admin-shell .card { padding:11px 13px; margin-bottom:10px; border-radius:8px; overflow-x:auto; }
.admin-shell table { min-width:700px; }
.admin-shell th,.admin-shell td { padding:5px 6px; font-size:12px; vertical-align:middle; }
.admin-shell th { background:#fffaf4; }
.admin-shell input[type=text],.admin-shell input[type=password],.admin-shell input[type=number],.admin-shell select,.admin-shell textarea { padding:6px 8px; margin-bottom:6px; font-size:12px; }
.admin-shell textarea { min-height:58px; }
.admin-shell label { font-size:11px; }
.admin-shell .btn { padding:6px 11px; font-size:12px; border-radius:6px; }
.admin-shell .btn.small { padding:4px 7px; font-size:11px; }
.admin-shell .flash { padding:7px 10px; margin-bottom:9px; }
.admin-shell .qr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:9px; }
.admin-shell .qr-cell { width:auto; min-width:0; padding:7px; }
.admin-shell .qr-cell:not(.pool-cell) canvas,.admin-shell .qr-cell:not(.pool-cell) img { width:108px!important; height:108px!important; }
.admin-shell .cms-layout { grid-template-columns:210px minmax(0,1fr); gap:11px; }
.admin-shell .cms-header { margin-bottom:9px; }
.admin-shell .cms-item { padding:10px 0; gap:9px; }
.admin-shell .profile-checks { min-width:110px; gap:2px 5px; }
.admin-shell.page-funcate td input[type=number] { width:65px; margin:0; }
.admin-shell.page-funcate table { min-width:980px; }
.admin-shell.page-qrcodes .qr-grid { grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); align-items:end; }
/* Pool codes render as real <img> elements with their own width/height
   attributes (set in JS from the per-code random size) - no CSS forces a
   size here, so the image's actual pixel dimensions are what you see. */
.admin-shell.page-qrcodes .pool-cell img { width:auto; height:auto; max-width:100%; border-radius:6px; display:block; margin:0 auto; }
.admin-shell.page-qrcodes .pool-cell { background:#fff; }
.qr-actions { margin-top:6px; }
.qr-actions .btn { text-decoration:none; display:inline-block; }
.qr-render.qr-loading { min-height:100px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--brown-light); }
.admin-shell.page-restaurant .card { max-width:100%; }
.admin-shell.page-restaurant td code { display:inline-block; white-space:nowrap; font-size:11px; }
/* The inline "update status" form in the Manage column (.table-manage) needs
   real horizontal room (see its own rule below) - without a floor on the
   table itself, the browser starves the other columns down to nothing
   instead of letting the table (and its scrollable .card) grow wider. */
.admin-shell.page-restaurant table { min-width:900px; }

/* --- Consolidated tabbed pages (Restaurant / QR Codes / Admin) ---
   Compact, professional, low-scroll: tighter type scale, denser cards,
   a simple underline tab strip shared by all three grouped pages. */
.section-tabs { display:flex; flex-wrap:wrap; gap:4px; margin:10px 0 14px; border-bottom:1px solid var(--border); }
.section-tabs a { padding:8px 14px; font-size:13px; font-weight:600; text-decoration:none; color:var(--brown-light); border-bottom:2px solid transparent; margin-bottom:-1px; }
.section-tabs a:hover { color:#1f5a49; }
.section-tabs a.active { color:#1f5a49; border-bottom-color:#1f5a49; }
.tab-panel-wrap { max-width:100%; }
.panel-intro { color:var(--brown-light); font-size:13px; margin:0 0 10px; line-height:1.45; }
.panel-heading-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.compact-card.card { padding:12px 14px; margin-bottom:10px; }
.compact-card h2 { font-size:15px; margin:0 0 8px; }
.compact-table { font-size:13px; }
.compact-table th, .compact-table td { padding:6px 8px; }
.inline-form { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; margin:0; }
.inline-form label { font-size:11px; margin-bottom:2px; }
.inline-form input, .inline-form select { margin-bottom:0; }
.compact-grid.service-grid, .compact-grid.kitchen-grid { grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:10px; }
.admin-shell.page-restaurant h1, .admin-shell.page-qrmanage h1, .admin-shell.page-administration h1 { font-size:20px; margin:6px 0 4px; }
.admin-shell.page-restaurant .container, .admin-shell.page-qrmanage .container, .admin-shell.page-administration .container { max-width:1000px; }
@media (max-width:800px) {
  .admin-shell .container { padding:10px; }
  .admin-shell .topbar { position:static; align-items:flex-start; flex-wrap:wrap; }
  .admin-shell .topbar .nav { width:100%; }
  .admin-shell .cms-layout { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .admin-shell .topbar { padding:8px 10px; }
  .admin-shell .topbar .brand { width:100%; }
  .admin-shell .topbar .nav { padding-bottom:3px; }
  .admin-shell.page-tables .container > p { overflow-wrap:anywhere; }
}

/* Artwork entry and visitor presentation */
.artwork-image{display:block;width:100%;max-height:65vh;object-fit:contain;border-radius:12px;margin:1rem auto;background:#f5f3ef}
.artwork-thumbnail{display:block;max-width:100%;width:240px;max-height:220px;object-fit:contain;margin:1rem 0;border-radius:8px}
.artwork-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.artwork-active{display:flex;align-items:center;gap:10px;margin:18px 0}.artwork-active input{width:auto;margin:0}
.artwork-metadata{display:flex;flex-wrap:wrap;gap:24px}.artwork-metadata dt{font-size:.85rem;opacity:.7}.artwork-metadata dd{margin:4px 0}
.cms-item>div:first-child{min-width:0;flex:1}.cms-item .artwork-image{max-height:260px}.artwork-artist{font-style:italic}

/* "Scan another code" - full-screen live camera overlay.
   NOTE: display must only apply when NOT [hidden] - a bare class selector
   ties in specificity with the browser's own [hidden]{display:none} rule,
   and author CSS wins that tie, so the overlay would stay visible (and
   block the button underneath) even while JS has it hidden. */
.qr-scan-overlay[hidden] { display:none; }
.qr-scan-overlay:not([hidden]) { position:fixed; inset:0; z-index:999; background:rgba(20,14,8,.92); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:20px; }
.qr-scan-frame { position:relative; width:min(80vw,340px); height:min(80vw,340px); border-radius:16px; overflow:hidden; background:#000; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.qr-scan-frame video { width:100%; height:100%; object-fit:cover; display:block; }
.qr-scan-reticle { position:absolute; inset:12%; border:3px solid rgba(255,255,255,.85); border-radius:14px; box-shadow:0 0 0 999px rgba(0,0,0,.25); pointer-events:none; }
.qr-scan-status { color:#fff; font-size:14px; text-align:center; max-width:320px; margin:0; }
.qr-scan-overlay .btn.secondary { background:rgba(255,255,255,.15); color:#fff; }

/* ---- Regular / Member diners --------------------------------------- */
.diner-choice { display:grid; gap:10px; }
.diner-choice .btn { display:block; text-align:center; line-height:1.35; padding:14px; }
.diner-choice .btn small { display:block; font-weight:400; font-size:12px; opacity:.85; margin-top:4px; }
.auth-tabs { display:flex; gap:8px; margin:6px 0 14px; }
.auth-tabs .btn { flex:1; }
.member-welcome { text-align:center; }
.member-badge { display:inline-block; background:#f7efe5; color:var(--brown); border-radius:30px; padding:5px 14px; font-size:12px; font-weight:700; letter-spacing:.5px; }
.member-welcome h2 { margin:12px 0 4px; }
.member-exclusive { color:var(--brown-light); font-size:15px; margin-bottom:18px; }
.member-strip { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:#f7efe5; border-radius:12px; padding:10px 14px; margin-bottom:12px; font-weight:700; color:var(--brown); font-size:14px; }
.member-strip span { font-weight:400; font-size:12px; color:var(--brown-light); }
.member-strip.casual { font-weight:400; color:var(--brown-light); background:#f3f3f1; }
.member-strip .btn.small { margin:0; }
.members-only-card { text-align:center; }
.members-only-card .member-badge { margin-bottom:10px; }

/* ---- Member portal (member.php) ------------------------------------- */
.member-card { max-width:520px; margin:20px auto; }
.member-back { display:inline-block; font-size:13px; margin-bottom:8px; }
.member-actions { display:grid; gap:10px; margin:18px 0 6px; }
.member-actions .btn { display:block; text-align:center; padding:14px; font-size:16px; }
.member-signout { text-align:center; margin-top:14px; }
.record-row { border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:10px; }
.record-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.record-meta { font-size:12px; color:var(--brown-light); margin-top:3px; }
.record-items { list-style:none; padding:0; margin:8px 0 0; }
.record-items li { display:flex; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid var(--border); font-size:14px; }
.record-total { margin-top:8px; text-align:right; font-size:14px; color:var(--brown-light); }

/* ---- QR export: select + high-res PNG download ---------------------- */
.qr-section { margin-bottom: 18px; }
.qr-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 10px;
  padding:8px 12px; background:#f7efe5; border-radius:10px; font-size:13px; }
.qr-toolbar label { display:flex; align-items:center; gap:6px; margin:0; font-size:13px; color:var(--brown); }
.qr-toolbar select { width:auto; margin:0; padding:4px 8px; font-size:13px; }
.qr-toolbar input[type=checkbox] { width:auto; margin:0; }
.qr-count { color:var(--brown-light); font-size:12px; }
.qr-progress { color:var(--brown-light); font-size:12px; }
.qr-pick { display:block; text-align:right; margin:0 0 2px; }
.qr-pick input { width:auto; margin:0; }
.qr-cell.is-selected { outline:2px solid var(--brown); outline-offset:1px; background:#fdf7f0; }
.qr-dl { margin-top:6px; width:100%; padding:3px 6px; font-size:11px; }

/* ---- Library: live rotation monitor + rolling log ------------------- */
.rotation-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rotation-head h2 { margin:0; }
.rotation-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rotation-controls select { width:auto; margin:0; padding:5px 9px; font-size:13px; }
.rotation-controls label { display:flex; align-items:center; gap:6px; margin:0; font-size:13px; }
.rotation-controls input[type=checkbox] { width:auto; margin:0; }
.rotation-stage { margin-top:12px; padding:18px; border-radius:12px; background:#f7efe5; text-align:center;
  transition:background .25s ease; }
.rotation-stage.is-switching { animation:rotation-blink .45s ease; }
@keyframes rotation-blink {
  0%   { background:#ffe6b0; box-shadow:0 0 0 3px rgba(183,121,31,.5); }
  100% { background:#f7efe5; box-shadow:0 0 0 0 rgba(183,121,31,0); }
}
.rotation-now { font-size:22px; font-weight:700; color:var(--brown); line-height:1.25; }
.rotation-meta { font-size:12px; color:var(--brown-light); margin-top:5px; }
.rotation-next { font-size:12px; color:var(--brown-light); margin-top:6px; }
.rotation-bar { height:5px; border-radius:4px; background:#e6d8c6; margin-top:10px; overflow:hidden; }
.rotation-bar span { display:block; height:100%; width:0; background:var(--brown); transition:width .25s linear; }

.rotation-log { position:fixed; right:14px; bottom:14px; width:250px; z-index:60;
  background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 26px rgba(75,46,30,.18);
  font-size:12px; overflow:hidden; }
.rotation-log-head { display:flex; align-items:center; gap:8px; padding:8px 10px; background:#f7efe5; }
.rotation-log-head strong { flex:1; color:var(--brown); }
.rotation-log-head span { color:var(--brown-light); }
.rotation-log-head button { border:0; background:none; cursor:pointer; font-size:13px; color:var(--brown-light); padding:0 2px; }
.rotation-log-body { max-height:240px; overflow-y:auto; }
.rotation-log-row { display:flex; gap:8px; padding:4px 10px; border-bottom:1px solid #f0ece6; }
.rotation-log-row span { color:var(--brown-light); flex-shrink:0; font-variant-numeric:tabular-nums; }
.rotation-log-foot { padding:5px 10px; color:var(--brown-light); font-size:11px; background:#faf6f1; }
.rotation-log.collapsed .rotation-log-body,
.rotation-log.collapsed .rotation-log-foot { display:none; }
@media (max-width:650px) { .rotation-log { position:static; width:auto; margin-top:14px; box-shadow:none; } }