/* ВАЙБ — shared tokens and components, theme «Барная карта»:
   warm black, ivory text, wide Unbounded for headings and figures (echoes the logo),
   small radii, the brand pink only as small marks. Used by the guest menu, waiter panel and admin. */
:root {
  --bg: #11100e;
  --surface: #181613;
  --surface-2: #1f1c18;
  --surface-3: #2a2620;
  --line: rgba(236, 229, 218, .09);
  --line-2: rgba(236, 229, 218, .2);
  --text: #ece5da;
  --muted: #8c8478;
  --dim: #625b51;
  --accent: #e6007e;
  --accent-soft: rgba(230, 0, 126, .12);
  --rose: #c9659a;
  --ok: #7cc49b;
  --ok-soft: rgba(124, 196, 155, .12);
  --warn: #d8a64e;
  --warn-soft: rgba(216, 166, 78, .12);
  --danger: #e2606f;
  --danger-soft: rgba(226, 96, 111, .12);
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 10px;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wide: 'Unbounded', 'Onest', system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(.25, .8, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 400 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid rgba(236, 229, 218, .5); outline-offset: 2px; }

.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* Headings: wide, uppercase, small */
.h2 { display: flex; align-items: baseline; gap: 12px; font: 500 14px/1.3 var(--wide); letter-spacing: .08em; text-transform: uppercase; }
.h2-num { font-size: 11px; color: var(--accent); letter-spacing: .1em; }
.eyebrow { font: 400 10px/1.4 var(--wide); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.label { display: block; margin: 26px 0 12px; font: 400 10px/1.4 var(--wide); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 20px; border-radius: var(--r);
  font: 500 12px/1 var(--wide); letter-spacing: .07em; text-transform: uppercase;
  background: transparent; color: var(--text); border: 1px solid var(--line-2);
  transition: background-color .2s, opacity .2s, transform .1s; user-select: none; text-decoration: none;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--text); color: var(--bg); border-color: transparent; }
.btn-primary:hover { background: #f6f0e6; }
.btn-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.btn-ok:hover { background: rgba(124, 196, 155, .2); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 11px; border-radius: var(--r-sm); }
.btn[disabled] { opacity: .35; pointer-events: none; }
.btn .ic { width: 17px; height: 17px; }
.grow { flex: 1; }

.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r); color: var(--muted); flex: none; transition: background-color .2s, color .2s; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* Quantity stepper */
.step { display: inline-flex; align-items: center; height: 30px; border-radius: var(--r-sm); border: 1px solid var(--line-2); }
.step button { width: 30px; height: 100%; display: grid; place-items: center; color: var(--muted); border-radius: var(--r-sm); }
.step button:hover { color: var(--text); }
.step button .ic { width: 15px; height: 15px; }
.step span { min-width: 18px; text-align: center; font: 500 12.5px var(--wide); }

/* Inputs */
.field { width: 100%; padding: 11px 13px; background: var(--surface); border-radius: var(--r); resize: none; outline: none;
  border: 1px solid var(--line); transition: border-color .2s; }
.field::placeholder { color: var(--dim); }
.field:focus { border: 1px solid rgba(236, 229, 218, .4); }

/* Item visuals: photo, or a quiet placeholder */
.media { overflow: hidden; background: var(--surface-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.art { display: grid; place-items: center; background: var(--surface-2); color: var(--dim); }
.art .ic { width: 34%; height: 34%; stroke-width: 1.2; }

/* Toast */
.toast { position: fixed; z-index: 100; left: 50%; top: calc(14px + var(--safe-t)); transform: translate(-50%, -150%);
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 420px); padding: 12px 16px 12px 14px; border-radius: var(--r);
  background: var(--surface-3); color: var(--text); font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); border: 1px solid var(--line);
  transition: transform .35s var(--ease); pointer-events: none; }
.toast.show { transform: translate(-50%, 0); }
.toast .ic { width: 18px; height: 18px; color: var(--ok); }
.toast.error .ic { color: var(--danger); }

/* Bottom sheet */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .3s; }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 92dvh; display: flex; flex-direction: column; background: #151310;
  border-radius: 14px 14px 0 0; box-shadow: inset 0 1px 0 var(--line); transform: translateY(100%); transition: transform .34s var(--ease); overflow: hidden; }
.sheet::before { content: ''; position: absolute; z-index: 3; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--line-2); }
.sheet-wrap.open .backdrop { opacity: 1; }
.sheet-wrap.open .sheet { transform: none; }
.sheet-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.sheet-pad { padding: 30px 20px 26px; }
.sheet-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--line); background: #151310; }
.sheet-x { position: absolute; z-index: 2; top: 16px; right: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r);
  background: rgba(42, 38, 32, .85); color: var(--muted); backdrop-filter: blur(8px); }
.sheet-x:hover { color: var(--text); }
.sheet-x .ic { width: 16px; height: 16px; }
.sheet-title { margin-top: 8px; font: 500 18px/1.3 var(--wide); letter-spacing: .04em; text-transform: uppercase; }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; background: var(--surface-3); color: var(--muted); white-space: nowrap; }
.pill.accent { background: var(--accent-soft); color: #f27ab8; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.solid { background: var(--text); color: var(--bg); }

.spinner { width: 22px; height: 22px; border: 2px solid var(--line-2); border-top-color: var(--text); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.skeleton { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}