/* Tokens shared by the guest page and the panel. --brand and --accent-base come from the owner's theme */
:root {
  --brand: #4F6E27;
  --accent-base: #C98712;
  --bg: #F4F5F1;
  --surface: #FFFFFF;
  --ink: #1C2420;
  --muted: #5F6A64;
  --line: #E1E5DF;
  --primary: var(--brand);
  --primary-soft: color-mix(in srgb, var(--brand) 14%, var(--surface));
  --on-primary: #FFFFFF;
  --accent: var(--accent-base);
  --accent-soft: color-mix(in srgb, var(--accent-base) 16%, var(--surface));
  --sold: #9A3B32;
  --shadow: 0 10px 30px rgba(28, 36, 32, .10);
  --body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --display: "Reem Kufi", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --radius: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111613; --surface: #19201C; --ink: #EEF2EC; --muted: #A7B2AB; --line: #2A332E;
    --primary: color-mix(in srgb, var(--brand) 62%, #FFFFFF); --on-primary: #111613;
    --accent: color-mix(in srgb, var(--accent-base) 70%, #FFFFFF);
    --sold: #E58C82; --shadow: 0 10px 30px rgba(0, 0, 0, .45); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111613; --surface: #19201C; --ink: #EEF2EC; --muted: #A7B2AB; --line: #2A332E;
  --primary: color-mix(in srgb, var(--brand) 62%, #FFFFFF); --on-primary: #111613;
  --accent: color-mix(in srgb, var(--accent-base) 70%, #FFFFFF);
  --sold: #E58C82; --shadow: 0 10px 30px rgba(0, 0, 0, .45); color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.6;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.num { font-variant-numeric: tabular-nums; }
.btn { border: 0; border-radius: 999px; padding: 10px 18px; background: var(--primary); color: var(--on-primary); font-weight: 700; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.danger { background: transparent; color: var(--sold); border: 1px solid var(--line); }
.btn.small { padding: 6px 12px; font-size: 13px; }
.badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.badge.out { background: transparent; color: var(--sold); border: 1px solid var(--sold); }
.plate { width: 76px; height: 76px; flex: none; border-radius: 16px; position: relative; overflow: hidden; }
.plate::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: rgba(255, 255, 255, .85); }
.plate::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: var(--food); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); }
.plate i { position: absolute; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); top: 16px; left: 18px; }
.plate i + i { top: auto; left: auto; bottom: 16px; right: 18px; width: 6px; height: 6px; background: var(--accent); }
.plate.photo::before, .plate.photo::after { display: none; }
.plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate.big { width: 100%; height: 190px; border-radius: 20px; }
.plate.big:not(.photo)::before { inset: 24px 30%; }
.plate.big:not(.photo)::after { inset: 42px calc(30% + 18px); }
.toast { position: fixed; inset-inline: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; z-index: 40; pointer-events: none; }
.toast span { background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 13px; box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }