/* Гостевое PWA заведения.
   Мир предмета: полутёмный лаунж, дым, тлеющий уголь, латунь, мята.
   Палитра: тёплый дымчато-зелёный полумрак + латунный «уголёк».
   Брендовый цвет заведения (--brand) приходит из /config и перекрашивает
   ключевые элементы под каждого арендатора. */

:root {
  --bg: #0f1513;
  --surface: #18211e;
  --surface-2: #1f2b27;
  --line: #2a3733;
  --ink: #efeae0;
  --muted: #93a39b;
  --brand: #2e9c86;      /* переопределяется из config.tenant.colors.primary */
  --brand-ink: #0f1513;
  --ember: #e0a458;      /* тлеющий уголь: баллы, бейджи, оплата */
  --danger: #d97961;
  --radius: 14px;
  --font-display: Georgia, "Times New Roman", ui-serif, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  touch-action: pan-x pan-y;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* --- Загрузка --------------------------------------------------------- */
.boot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100dvh;
  padding: calc(28px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
  color: var(--muted);
  text-align: center;
}
.boot::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 39%, rgba(224, 164, 88, .09), transparent 18%),
    radial-gradient(circle at 18% 9%, rgba(46, 156, 134, .08), transparent 29%),
    #070b0a;
  content: "";
}
.boot-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.boot-dots .ember-dot:nth-child(2) { animation-delay: .3s; }
.boot-dots .ember-dot:nth-child(3) { animation-delay: .6s; }
.boot p {
  margin: 0;
  color: #eee8dc;
  font: 500 21px/1.2 var(--font-display);
  letter-spacing: .01em;
}
.boot-caption {
  color: #778981;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* --- Уголёк (подпись дизайна) ----------------------------------------- */
.ember-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 10px 2px rgba(224, 164, 88, 0.5);
  animation: ember-breathe 2.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes ember-breathe {
  0%, 100% { opacity: 0.65; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .ember-dot { animation: none; }
}

/* --- Шапка ------------------------------------------------------------- */
.top {
  padding: calc(14px + env(safe-area-inset-top)) 18px 12px;
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(239, 234, 224, 0.05), transparent 60%),
    linear-gradient(180deg, var(--surface), var(--bg));
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.top-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.venue-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0;
}
.venue-sub {
  color: var(--muted);
  font-size: 13px;
  margin: 2px 0 0;
}
.table-chip {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.table-chip .ember-dot { margin-right: 6px; width: 7px; height: 7px; }
.offline-note {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ember);
}

/* --- Контент ------------------------------------------------------------ */
.screen {
  flex: 1;
  padding: 16px 18px calc(86px + env(safe-area-inset-bottom));
}
.section-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 22px 0 10px;
}
.section-title:first-child { margin-top: 4px; }
.hint { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; }

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

/* --- Кнопки и формы ------------------------------------------------------ */
.button {
  display: block;
  width: 100%;
  border: none;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--brand-ink);
  font: 600 16px var(--font-body);
  padding: 13px 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.button:disabled { opacity: 0.45; cursor: default; }
.button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
.button.ember {
  background: var(--ember);
  color: #221a0d;
}
.button + .button { margin-top: 8px; }
.button:focus-visible, .chip:focus-visible, .field:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.field {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font: 15px var(--font-body);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.field::placeholder { color: var(--muted); }
label.lbl { display: block; font-size: 13px; color: var(--muted); margin: 8px 0 4px; }

.row { display: flex; gap: 8px; }
.row > * { flex: 1; }

/* --- Меню ---------------------------------------------------------------- */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 14px;
  font: 14px var(--font-body);
  cursor: pointer;
}
.chip.on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.menu-item:last-child { border-bottom: none; }
.menu-item h3 {
  font: 600 15.5px var(--font-body);
  margin: 0 0 3px;
}
.menu-item p { margin: 0; color: var(--muted); font-size: 13.5px; }
.menu-price {
  flex-shrink: 0;
  font: 600 15.5px var(--font-body);
  color: var(--ink);
  white-space: nowrap;
}
.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: #221a0d;
  background: var(--ember);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}
.badge.paused { background: var(--line); color: var(--muted); }

/* --- Счёт ------------------------------------------------------------------ */
.bill-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 14.5px;
}
.bill-line span:last-child { white-space: nowrap; }
.bill-total {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  padding-top: 10px;
  font: 600 17px var(--font-body);
}
.status-pill {
  display: inline-block;
  font-size: 13px;
  border-radius: 999px;
  padding: 3px 11px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.status-pill.paid { color: var(--brand); border-color: var(--brand); }
.status-pill.pending { color: var(--ember); border-color: var(--ember); }

/* --- Бронь ------------------------------------------------------------------ */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.slot {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  padding: 11px 12px;
  text-align: left;
  color: var(--ink);
  font: 14px var(--font-body);
  cursor: pointer;
}
.slot small { display: block; color: var(--muted); }
.slot.on { border-color: var(--brand); background: var(--surface-2); }
.slot:disabled { opacity: 0.4; cursor: default; }

/* --- Баллы ------------------------------------------------------------------ */
.points-hero {
  text-align: center;
  padding: 22px 16px 18px;
}
.points-value {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 700;
  color: var(--ember);
  line-height: 1;
}
.points-hero .hint { margin-top: 6px; }
.guest-code {
  font: 600 15px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.06em;
  word-break: break-all;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 10px 0;
  text-align: center;
}
.guest-qr {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  margin: 10px 0;
}
.guest-qr svg { width: 100%; max-width: 220px; height: auto; display: block; }
.guest-qr .qr-placeholder {
  font-size: 13px;
  color: var(--muted);
  padding: 40px 0;
  text-align: center;
}
.reward {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.reward:last-child { border-bottom: none; }
.reward strong { font-size: 15px; font-weight: 600; }
.reward .hint { margin: 2px 0 0; }
.reward button {
  flex-shrink: 0;
  border: 1px solid var(--ember);
  background: transparent;
  color: var(--ember);
  border-radius: 999px;
  padding: 7px 14px;
  font: 600 13.5px var(--font-body);
  cursor: pointer;
}
.reward button:disabled { border-color: var(--line); color: var(--muted); cursor: default; }
.history-list { padding-top: 6px; padding-bottom: 6px; }
.history-row {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.history-row:last-child { border-bottom: none; }
.history-row span { min-width: 0; }
.history-row strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.history-row time {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.history-row b {
  flex-shrink: 0;
  font-size: 15px;
}

/* --- Главная ------------------------------------------------------------------ */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.action-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  font: 600 15px var(--font-body);
}
.action-tile small { display: block; font-weight: 400; color: var(--muted); margin-top: 3px; font-size: 12.5px; }
.news-item h3 { font: 600 15px var(--font-body); margin: 0 0 4px; }
.news-item p { margin: 0; color: var(--muted); font-size: 13.5px; }
.news-item .pin { color: var(--ember); font-size: 12px; }

/* --- Нижние табы ------------------------------------------------------------------ */
.tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 560px;
  display: flex;
  background: rgba(24, 33, 30, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 10;
}
.tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--muted);
  font: 12.5px var(--font-body);
  padding: 10px 4px 12px;
  cursor: pointer;
  position: relative;
}
.tab .t-ico { display: block; font-size: 19px; line-height: 1.2; }
.tab.on { color: var(--ink); }
.tab.on::after {
  content: "";
  position: absolute;
  top: 5px;
  right: calc(50% - 16px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 8px 2px rgba(224, 164, 88, 0.5);
}

/* --- Заглушки и уведомления ------------------------------------------------------ */
.toast {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  max-width: 90vw;
  z-index: 20;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.stub {
  text-align: center;
  padding: 60px 24px;
  color: var(--muted);
}
.stub h2 { font-family: var(--font-display); color: var(--ink); }

/* ========================================================================
   Stage 7.2 — Theme Engine + premium guest home + loyalty cards
   ======================================================================== */
:root[data-theme="dark"] {
  --bg: #0f1513;
  --surface: var(--tenant-surface, #18211e);
  --surface-2: color-mix(in srgb, var(--surface) 84%, white 8%);
  --line: color-mix(in srgb, var(--surface) 68%, white 18%);
  --ink: #f4f0e8;
  --muted: #a8b1ac;
  --soft-shadow: 0 12px 32px rgba(0,0,0,.22);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f7f4ee;
  --surface: var(--tenant-surface, #ffffff);
  --surface-2: color-mix(in srgb, var(--surface) 91%, #75684f 9%);
  --line: color-mix(in srgb, var(--surface) 72%, #4d4538 18%);
  --ink: #211f1b;
  --muted: #706c64;
  --soft-shadow: 0 12px 30px rgba(60,48,30,.10);
  color-scheme: light;
}
:root[data-font-preset="modern"] { --font-display: system-ui, -apple-system, "Segoe UI", sans-serif; }
:root[data-font-preset="editorial"] { --font-display: Georgia, "Times New Roman", serif; }
:root[data-font-preset="classic"] { --font-display: "Times New Roman", Georgia, serif; }
:root[data-card-style="outline"] .card,
:root[data-card-style="outline"] .news-card,
:root[data-card-style="outline"] .profile-link { background: transparent; box-shadow: none; border-width: 1.5px; }
:root[data-card-style="glass"] .card,
:root[data-card-style="glass"] .news-card,
:root[data-card-style="glass"] .profile-link {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.venue-brand { display:flex; align-items:center; gap:10px; min-width:0; }
.venue-logo { width:38px; height:38px; border-radius:11px; object-fit:contain; background:var(--surface-2); border:1px solid var(--line); padding:4px; }

.guest-hero {
  min-height: 340px;
  border-radius: 22px;
  background-size: cover;
  background-position: center;
  padding: 20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:24px;
  color:#fff;
  overflow:hidden;
  box-shadow:var(--soft-shadow);
  border:1px solid rgba(255,255,255,.13);
}
.guest-hero > div { max-width: 90%; }
.guest-hero small { text-transform:uppercase; letter-spacing:.14em; opacity:.82; }
.guest-hero h2 { font:600 36px/1.02 var(--font-display); margin:8px 0 10px; text-wrap:balance; }
.guest-hero p { margin:0; max-width:390px; color:rgba(255,255,255,.84); }
.guest-hero .button { width:auto; min-width:180px; align-self:flex-start; }
.guest-hero-badge { align-self:flex-end; display:inline-flex; align-items:center; gap:7px; background:rgba(8,12,11,.62); border:1px solid rgba(255,255,255,.17); padding:7px 12px; border-radius:999px; font-size:13px; backdrop-filter:blur(10px); }
.guest-hero-badge i { width:8px; height:8px; border-radius:50%; background:#51ce78; box-shadow:0 0 10px rgba(81,206,120,.7); }

.install-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; box-shadow:var(--soft-shadow); }
.install-banner > div:first-child { display:flex; flex-direction:column; min-width:0; }
.install-banner small { color:var(--muted); }
.install-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.install-actions .button { width:auto; padding:8px 12px; font-size:14px; }
.icon-dismiss { border:0; background:transparent; color:var(--muted); font-size:22px; cursor:pointer; padding:8px; }

.mix-of-day { display:grid; grid-template-columns:1.3fr .9fr; padding:0; overflow:hidden; margin-top:12px; min-height:190px; box-shadow:var(--soft-shadow); }
.mix-of-day > div { padding:20px; align-self:center; }
.mix-of-day img { width:100%; height:100%; object-fit:cover; min-height:190px; }
.mix-of-day h3 { font:600 27px/1.05 var(--font-display); margin:6px 0; }
.mix-of-day p { color:var(--muted); margin:0 0 14px; }
.mix-of-day .button { width:auto; display:inline-block; padding:9px 14px; font-size:14px; }
.eyebrow { color:var(--ember); text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; }

.premium-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.premium-actions button { min-height:92px; text-align:left; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); padding:14px; cursor:pointer; box-shadow:var(--soft-shadow); }
.premium-actions button strong { display:block; font-size:16px; margin-bottom:5px; }
.premium-actions button small { display:block; color:var(--muted); }
.premium-actions button::after { content:"→"; display:block; color:var(--ember); margin-top:8px; }

.section-headline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }
.section-headline .section-title { margin:0; }
.section-headline button { border:0; background:transparent; color:var(--ember); cursor:pointer; padding:8px 0; }
.popular-strip { display:grid; grid-auto-flow:column; grid-auto-columns:42%; gap:10px; overflow-x:auto; padding:10px 0 4px; scrollbar-width:none; }
.popular-strip::-webkit-scrollbar { display:none; }
.popular-strip article { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); min-width:0; }
.popular-strip img { display:block; width:100%; height:112px; object-fit:cover; background:var(--surface-2); }
.popular-strip strong,.popular-strip small { display:block; padding:0 11px; }
.popular-strip strong { margin-top:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.popular-strip small { color:var(--muted); padding-bottom:11px; }

.news-grid { display:grid; gap:10px; margin-top:10px; }
.news-card { border:1px solid var(--line); background:var(--surface); border-radius:16px; overflow:hidden; display:grid; grid-template-columns:112px 1fr; box-shadow:var(--soft-shadow); }
.news-card img { width:112px; height:100%; min-height:112px; object-fit:cover; background:var(--surface-2); }
.news-card > div { padding:14px; min-width:0; }
.news-card strong { display:block; margin-bottom:4px; }
.news-card p { color:var(--muted); margin:0; font-size:13px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.home-loyalty-join { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; }
.home-loyalty-join > div { display:flex; flex-direction:column; }
.home-loyalty-join small { color:var(--muted); }
.home-loyalty-join .button { width:auto; }
.home-level-card { margin-top:14px; border-radius:20px; padding:18px; color:var(--level-text); background:linear-gradient(130deg,var(--level-primary),color-mix(in srgb,var(--level-primary) 55%,var(--level-secondary))); display:grid; grid-template-columns:1fr auto; gap:10px 16px; align-items:center; box-shadow:var(--soft-shadow); position:relative; overflow:hidden; }
.home-level-card::after { content:""; position:absolute; inset:auto -35px -55px auto; width:150px; height:150px; border-radius:50%; background:var(--level-secondary); opacity:.22; }
.home-level-card > div:first-child { display:flex; flex-direction:column; position:relative; z-index:1; }
.home-level-card strong { font:600 26px var(--font-display); }
.home-level-card span,.home-level-card small { opacity:.84; }
.home-level-card button { grid-column:1/-1; width:max-content; border:1px solid color-mix(in srgb,var(--level-text) 55%,transparent); background:transparent; color:var(--level-text); border-radius:999px; padding:8px 13px; cursor:pointer; position:relative; z-index:1; }
.level-ring { width:62px; height:62px; border-radius:50%; display:grid; place-items:center; border:6px solid color-mix(in srgb,var(--level-secondary) 78%,transparent); font-weight:700; position:relative; z-index:1; }

.guest-level-card { border-radius:24px; padding:20px; margin-bottom:12px; color:var(--level-text); background:linear-gradient(140deg,var(--level-primary),color-mix(in srgb,var(--level-primary) 48%,var(--level-secondary))); box-shadow:var(--soft-shadow); overflow:hidden; position:relative; }
.guest-level-card::before { content:""; position:absolute; width:240px; height:240px; right:-100px; top:-120px; border-radius:50%; background:var(--level-secondary); opacity:.20; }
.level-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; position:relative; }
.level-card-top small { text-transform:uppercase; letter-spacing:.13em; opacity:.78; }
.level-card-top h2 { font:600 32px/1 var(--font-display); margin:8px 0 6px; }
.level-card-top p { margin:0; opacity:.82; }
.level-emblem { width:68px; height:68px; display:grid; place-items:center; border-radius:20px; background:color-mix(in srgb,var(--level-text) 13%,transparent); border:1px solid color-mix(in srgb,var(--level-text) 27%,transparent); font-size:30px; }
.qualification-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; }
.qualification-row span { border-radius:12px; padding:10px; background:color-mix(in srgb,var(--level-text) 9%,transparent); font-size:12px; }
.qualification-row b { display:block; font-size:16px; margin-top:3px; }
.level-track { height:10px; background:color-mix(in srgb,var(--level-text) 19%,transparent); border-radius:999px; overflow:hidden; margin:18px 0 7px; }
.level-track i { display:block; height:100%; border-radius:inherit; background:var(--level-secondary); }
.guest-level-card > p { margin:0; opacity:.82; font-size:13px; }
.level-benefit-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:15px; }
.level-benefit-list span { font-size:13px; background:color-mix(in srgb,var(--level-text) 9%,transparent); padding:8px 10px; border-radius:10px; }
.level-mini-list { display:flex; gap:6px; overflow-x:auto; margin-top:16px; scrollbar-width:none; }
.level-mini-list span { white-space:nowrap; border:1px solid color-mix(in srgb,var(--level-text) 24%,transparent); padding:6px 9px; border-radius:999px; font-size:12px; opacity:.7; }
.level-mini-list span::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--dot); margin-right:6px; }
.level-mini-list span.on { opacity:1; background:color-mix(in srgb,var(--level-text) 12%,transparent); }

.profile-hero { display:flex; align-items:center; gap:14px; padding:18px; }
.profile-avatar { width:64px; height:64px; border-radius:20px; display:grid; place-items:center; background:var(--brand); color:var(--brand-ink); font:700 24px var(--font-display); flex-shrink:0; }
.profile-hero small,.profile-hero p { color:var(--muted); }
.profile-hero h2 { margin:3px 0; font:600 25px var(--font-display); }
.profile-hero p { margin:0; }
.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.profile-link { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:16px; padding:15px; text-align:left; cursor:pointer; min-height:94px; box-shadow:var(--soft-shadow); }
.profile-link b,.profile-link small { display:block; }
.profile-link small { color:var(--muted); margin-top:5px; }
.profile-link::after { content:"→"; color:var(--ember); display:block; margin-top:8px; }
.contact-card { display:grid; gap:12px; }
.contact-card > div { display:flex; flex-direction:column; }
.contact-card small { color:var(--muted); }

@media (max-width: 430px) {
  .guest-hero { min-height:300px; padding:17px; }
  .guest-hero h2 { font-size:31px; }
  .mix-of-day { grid-template-columns:1fr; }
  .mix-of-day img { height:150px; min-height:150px; order:-1; }
  .popular-strip { grid-auto-columns:64%; }
  .qualification-row { grid-template-columns:1fr; }
  .level-benefit-list,.profile-grid { grid-template-columns:1fr; }
  .news-card { grid-template-columns:90px 1fr; }
  .news-card img { width:90px; }
  .install-banner { align-items:flex-start; }
}

.menu-item-photo { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 0; }
.menu-item-photo + .menu-item-photo { border-top:1px solid var(--line); }
.menu-item-photo > img { width:72px; height:72px; border-radius:14px; object-fit:cover; background:var(--surface-2); }
.menu-item-photo h3 { margin:0 0 5px; }
.menu-item-photo p { margin:0; color:var(--muted); font-size:13px; }
.menu-item-photo.is-stopped img { filter:grayscale(.75); opacity:.55; }
.feature-lock { min-height:430px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,var(--surface),var(--surface-2)); padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:var(--soft-shadow); overflow:hidden; position:relative; }
.feature-lock::before { content:""; position:absolute; width:250px; height:250px; border-radius:50%; top:-150px; right:-80px; background:var(--brand); opacity:.12; }
.feature-lock-icon { width:72px; height:72px; display:grid; place-items:center; border-radius:22px; background:var(--brand); color:var(--brand-ink); font-size:34px; margin-bottom:15px; }
.feature-lock small { color:var(--ember); text-transform:uppercase; letter-spacing:.13em; }
.feature-lock h2 { font:600 30px var(--font-display); margin:8px 0; }
.feature-lock p { color:var(--muted); max-width:360px; }
.feature-lock .button { width:auto; margin-top:14px; }
.feature-lock-demo { display:flex; gap:8px; margin:15px 0; }
.feature-lock-demo i { display:block; width:62px; height:42px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--brand) 12%,var(--surface)); }
@media (max-width:390px) { .menu-item-photo { grid-template-columns:58px minmax(0,1fr); } .menu-item-photo > img { width:58px; height:58px; } .menu-price { grid-column:2; } }

/* Stage 7.3 — complete guest flows */
.top-actions{display:flex;align-items:center;gap:9px}.notification-button{position:relative;width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:20px}.notification-button b{position:absolute;right:-4px;top:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--ember);color:#17130d;font-size:11px;display:grid;place-items:center}.lang-switch{position:relative}.lang-switch-trigger{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center}.lang-switch-trigger svg{width:20px;height:20px}.lang-switch-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:20;display:grid;gap:2px;min-width:150px;padding:6px;margin:0;list-style:none;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--soft-shadow)}.lang-switch-menu li{display:block}.lang-switch-menu button{width:100%;text-align:start;padding:9px 11px;border:0;border-radius:9px;background:transparent;color:var(--ink);font-size:14px}.lang-switch-menu button.on{background:color-mix(in srgb,var(--ember) 12%,var(--surface));color:var(--ember);font-weight:700}.sheet-scroll{max-height:min(82vh,700px);overflow:auto}.sheet-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.sheet-title-row small{color:var(--ember);text-transform:uppercase;letter-spacing:.12em}.sheet-title-row h3{margin:4px 0 0;font-size:25px}.icon-dismiss{width:40px;height:40px;border-radius:13px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:25px}.notification-list{display:grid;gap:9px}.notification-row{width:100%;display:grid;grid-template-columns:18px 1fr;gap:10px;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);padding:14px}.notification-row>span{color:var(--muted)}.notification-row.is-unread{border-color:color-mix(in srgb,var(--ember) 58%,var(--line));background:color-mix(in srgb,var(--ember) 7%,var(--surface))}.notification-row.is-unread>span{color:var(--ember)}.notification-row strong,.notification-row p,.notification-row time{display:block}.notification-row p{margin:5px 0;color:var(--muted);font-size:13px}.notification-row time{font-size:11px;color:var(--muted)}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:15px}.service-grid button{min-height:86px;border-radius:17px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);text-align:left;padding:15px}.service-grid b,.service-grid small{display:block}.service-grid small{margin-top:5px;color:var(--muted)}.service-status{display:flex;align-items:center;gap:8px;color:var(--muted);margin:14px 0 0}.tip-staff-list{display:grid;gap:8px;margin-bottom:14px}.tip-staff-list button{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:15px;background:var(--surface);color:var(--ink);padding:11px;text-align:left}.tip-staff-list button.on{border-color:var(--ember);background:color-mix(in srgb,var(--ember) 8%,var(--surface))}.tip-staff-list button>span{width:42px;height:42px;border-radius:14px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:700}.tip-staff-list b,.tip-staff-list small{display:block}.tip-staff-list small{color:var(--muted);margin-top:3px}.tip-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 15px}.tip-amounts button{border:1px solid var(--line);border-radius:13px;background:var(--surface-2);color:var(--ink);padding:12px 5px}.inline-action{display:grid;grid-template-columns:1fr auto;gap:8px}.inline-action .button{width:auto;margin:0}.visit-context{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.visit-context>div{flex:1;min-width:160px}.visit-context small,.visit-context strong,.visit-context span{display:block}.visit-context small{color:var(--ember);text-transform:uppercase;letter-spacing:.11em}.visit-context span{color:var(--muted);font-size:13px;margin-top:4px}.visit-context .button{width:auto;margin:0}.section-headline{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-headline>button{border:0;background:transparent;color:var(--ember);font-weight:700}.booking-cards{display:grid;gap:10px}.booking-card{display:grid;grid-template-columns:74px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--surface);box-shadow:var(--soft-shadow)}.booking-date{width:66px;min-height:66px;border-radius:15px;background:var(--brand);color:var(--brand-ink);display:flex;flex-direction:column;align-items:center;justify-content:center}.booking-date b{font-size:12px}.booking-date span{font-size:18px}.booking-card h3,.booking-card p{margin:3px 0}.booking-card p,.booking-card small{color:var(--muted)}.booking-actions{display:grid;gap:6px}.booking-actions button{border:1px solid var(--line);border-radius:11px;background:var(--surface-2);color:var(--ink);padding:8px}.booking-actions button:last-child{color:#d56565}.booking-editor{margin-top:12px}.inline-actions{display:flex;gap:8px;margin-top:12px}.inline-actions .button{margin:0}.booking-history{margin-top:18px;border-top:1px solid var(--line);padding-top:13px}.booking-history summary{cursor:pointer;color:var(--muted)}.booking-history>div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}.empty-state{text-align:center;padding:24px;border:1px dashed var(--line);border-radius:17px;color:var(--muted)}.empty-state b{display:block;color:var(--ink);margin-bottom:5px}.success-banner{display:flex;align-items:center;gap:10px;border:1px solid color-mix(in srgb,var(--brand) 45%,var(--line));border-radius:16px;padding:13px;background:color-mix(in srgb,var(--brand) 8%,var(--surface));margin-bottom:12px}.success-banner>span{width:34px;height:34px;border-radius:11px;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center}.success-banner strong,.success-banner small{display:block}.success-banner small{color:var(--muted);margin-top:3px}
@media(max-width:540px){.booking-card{grid-template-columns:62px 1fr}.booking-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}.tip-amounts{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:1fr 1fr}}

/* Stage 7.4 — table cart and order statuses */
.menu-order-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:86px}.menu-add{border:0;border-radius:999px;padding:8px 12px;background:var(--brand);color:var(--brand-ink,#fff);font:inherit;font-weight:700}.cart-fab{position:sticky;bottom:86px;z-index:8;margin:18px auto 0;width:min(100%,520px);border:0;border-radius:18px;padding:13px 16px;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;background:var(--brand);color:var(--brand-ink,#fff);box-shadow:0 14px 34px rgba(0,0,0,.28);font:inherit}.cart-fab span{text-align:left;font-weight:800}.cart-fab b{min-width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.18)}.cart-lines{display:grid;gap:10px}.cart-line{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}.cart-line div:first-child{display:grid;gap:3px}.cart-line small{color:var(--muted)}.cart-stepper{display:flex;align-items:center;gap:8px}.cart-stepper button{width:32px;height:32px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:18px}.cart-total{display:flex;justify-content:space-between;align-items:center;margin:16px 0;font-size:1.1rem}.cart-orders-title{margin:24px 0 10px}.order-status-list{display:grid;gap:8px}.order-status-list article{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:14px}.order-status-list article div{display:grid}.order-status-list small{color:var(--muted)}.order-status{font-size:.78rem;padding:6px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border)}.status-ready{background:color-mix(in srgb,var(--brand) 20%,transparent);color:var(--text)}
@media(max-width:420px){.cart-line{grid-template-columns:1fr auto}.cart-line>strong{grid-column:1/-1;text-align:right}.menu-order-actions{min-width:74px}}

/* Stage 7.5 — modifiers and live order details */
.modifier-sheet{max-width:560px}.modifier-group{padding:14px 0;border-bottom:1px solid var(--line)}.modifier-group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.modifier-group-head b,.modifier-group-head small{display:block}.modifier-group-head small{margin-top:4px;color:var(--muted)}.modifier-group-head>span{padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--ember) 12%,var(--surface));color:var(--ember);font-size:11px}.modifier-options{display:grid;gap:8px}.modifier-option{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--surface);cursor:pointer}.modifier-option.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--surface))}.modifier-option input{width:18px;height:18px;accent-color:var(--brand)}.modifier-option b,.modifier-option small{display:block}.modifier-option small{margin-top:3px;color:var(--muted)}.modifier-option i{width:26px;height:26px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;color:var(--brand);font-style:normal;font-weight:800}.modifier-summary{margin:16px 0;border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--surface-2)}.modifier-summary>div{display:flex;justify-content:space-between;padding:5px 0}.modifier-summary .modifier-total{margin-top:6px;padding-top:11px;border-top:1px solid var(--line);font-size:1.08rem}.cart-line small+small{margin-top:2px}.order-status-list article small.order-detail{margin-top:4px;color:var(--muted)}