:root {
  --dough: #f4ead7;        /* тесто / фон */
  --dough-dark: #e8d9bd;
  --flour: #fffdf8;        /* мука / карточки */
  --crust: #c9a063;        /* золотистая корочка */
  --crust-dark: #a77f43;
  --broth: #6b8e4e;        /* зелень укропа / акцент */
  --broth-dark: #54713c;
  --pepper: #2e2a24;       /* текст */
  --pepper-soft: #6b635a;
  --sour-cream: #fbf7ef;
  --radius: 18px;
  --shadow: 0 8px 28px rgba(80, 60, 30, 0.12);
  --shadow-sm: 0 3px 12px rgba(80, 60, 30, 0.10);
  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--pepper);
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.6) 0 2px, transparent 3px) 0 0/46px 46px,
    radial-gradient(circle at 70% 60%, rgba(201,160,99,.10) 0 2px, transparent 3px) 0 0/64px 64px,
    var(--dough);
  line-height: 1.55;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ---------- Шапка ---------- */
.nav {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 28px;
  background: var(--flour);
  border-bottom: 2px solid var(--dough-dark);
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.35rem; letter-spacing: -.5px;
  margin-right: auto;
}
.brand .dumpling { font-size: 1.6rem; }
.brand b { color: var(--broth-dark); }
.nav a.link {
  padding: 9px 16px; border-radius: 12px; font-weight: 600;
  color: var(--pepper-soft); transition: .15s;
}
.nav a.link:hover { background: var(--dough); color: var(--pepper); }
.nav a.cta {
  background: var(--broth); color: #fff;
}
.nav a.cta:hover { background: var(--broth-dark); color:#fff; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: none; border-radius: 14px;
  font-family: var(--font); font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: .15s; text-align: center;
}
.btn-primary { background: var(--broth); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--broth-dark); transform: translateY(-1px); }
.btn-crust { background: var(--crust); color: #3a2c12; }
.btn-crust:hover { background: var(--crust-dark); color:#fff; }
.btn-ghost { background: transparent; border: 2px solid var(--dough-dark); color: var(--pepper); }
.btn-ghost:hover { background: var(--dough); }
.btn-danger { background: #b9543f; color:#fff; }
.btn-danger:hover { background:#9c4332; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-block { width: 100%; }

/* ---------- Карточки / контейнеры ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 40px 24px; }
.wrap-narrow { max-width: 440px; }
.card {
  background: var(--flour); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
  border: 1px solid var(--dough-dark);
}
.card + .card { margin-top: 22px; }

/* ---------- Формы ---------- */
label { display:block; font-weight:600; font-size:.92rem; margin: 14px 0 6px; color: var(--pepper-soft); }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select {
  width: 100%; padding: 12px 14px; font-size: 1rem; font-family: var(--font);
  border: 2px solid var(--dough-dark); border-radius: 12px; background: var(--sour-cream);
  color: var(--pepper); transition: .15s;
}
input:focus, select:focus { outline: none; border-color: var(--broth); background:#fff; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }
.check { display: flex; align-items: center; gap: 9px; margin: 9px 0; font-weight: 500; cursor:pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--broth); }
.check label { margin: 0; font-weight: 500; color: var(--pepper); cursor:pointer; }

/* ---------- Типографика ---------- */
h1 { font-size: 2.2rem; letter-spacing: -1px; margin-bottom: 10px; }
h2 { font-size: 1.4rem; margin-bottom: 14px; letter-spacing:-.4px; }
.muted { color: var(--pepper-soft); }
.center { text-align: center; }
.pill {
  display:inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--dough); color: var(--broth-dark); font-weight:700; font-size:.8rem;
}

/* ---------- Сообщения ---------- */
.msg { padding: 11px 15px; border-radius: 12px; font-weight: 600; font-size:.92rem; margin: 12px 0; display:none; }
.msg.show { display:block; }
.msg.ok { background: #e6f0da; color: var(--broth-dark); }
.msg.err { background: #f7e0da; color: #9c4332; }

/* ---------- Hero ---------- */
.hero { text-align:center; padding: 70px 24px 40px; }
.hero h1 { font-size: 2.9rem; }
.hero p.lead { font-size: 1.2rem; color: var(--pepper-soft); max-width: 620px; margin: 16px auto 28px; }
.hero .actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- Фичи ---------- */
.features { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top: 30px; }
.feature { background: var(--flour); border:1px solid var(--dough-dark); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.feature .emo { font-size: 2rem; }
.feature h3 { margin: 10px 0 6px; }
.feature p { color: var(--pepper-soft); font-size:.94rem; }

/* ---------- Результаты / таблицы ---------- */
pre.out {
  background: var(--pepper); color: #e9e2d4; padding: 18px; border-radius: 14px;
  overflow:auto; font-size:.86rem; max-height: 360px; font-family: ui-monospace, monospace;
}
table { width:100%; border-collapse: collapse; font-size:.9rem; }
th, td { text-align:left; padding: 9px 10px; border-bottom: 1px solid var(--dough-dark); }
th { color: var(--pepper-soft); font-weight:700; }
.status-ok { color: var(--broth-dark); font-weight:700; }
.status-bad { color:#9c4332; font-weight:700; }

.tabs { display:flex; gap:8px; margin-bottom: 18px; flex-wrap:wrap; }
.tab { padding: 9px 16px; border-radius: 12px; background: var(--dough); font-weight:700; cursor:pointer; border:2px solid transparent; }
.tab.active { background:#fff; border-color: var(--broth); color: var(--broth-dark); }

footer { text-align:center; padding: 30px; color: var(--pepper-soft); font-size:.88rem; }

.spinner { display:inline-block; width:16px; height:16px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* активный пункт меню */
.nav a.nav-active { background: var(--dough); color: var(--broth-dark); }

/* плашка состояния очереди на Кухне */
.queue-bar {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px;
}
.queue-item {
  background:var(--flour); border:1px solid var(--dough-dark); border-radius:16px;
  padding:18px; text-align:center; box-shadow:var(--shadow-sm);
}
.queue-num { display:block; font-size:2rem; font-weight:800; color:var(--broth-dark); line-height:1; }
.queue-lbl { display:block; margin-top:6px; font-size:.85rem; color:var(--pepper-soft); text-transform:uppercase; letter-spacing:.4px; }
@media(max-width:560px){ .queue-num{ font-size:1.5rem; } .queue-lbl{ font-size:.72rem; } }
/* телефон: меню переносится строкой ниже, а не раздвигает страницу вбок */
@media(max-width:560px){
  .nav { flex-wrap: wrap; gap: 4px 6px; padding-left: 16px; padding-right: 16px; position: static; }
  .nav .brand { width: 100%; }
  .nav .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* hidden должен побеждать display из классов (.btn, .link и т.п.) */
[hidden] { display: none !important; }
/* широкие таблицы на телефоне листаются внутри карточки, а не двигают страницу */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.table-wrap table { min-width: 640px; }
.chip { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.8rem; font-weight:700; background: var(--dough); color: var(--pepper-soft); white-space:nowrap; }
.chip.ok { background:#e6f0da; color: var(--broth-dark); }
.chip.bad { background:#f7e0da; color:#9c4332; }
.chip.wait { background:#fbeeda; color: var(--crust-dark); }
.btn-sm { padding: 6px 12px; font-size: .85rem; border-radius: 10px; }
.copy-box { display:flex; gap:8px; margin-top:10px; }
.copy-box input { flex:1; min-width:0; font-size:.85rem; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom: 8px; }
.stat { background: var(--sour-cream); border:1px solid var(--dough-dark); border-radius:14px; padding:14px 16px; }
.stat b { display:block; font-size:1.6rem; }
.stat span { font-size:.8rem; color: var(--pepper-soft); text-transform: uppercase; letter-spacing:.3px; }
@media(max-width:560px){
  .table-wrap table.cards { min-width: 0; }
  table.cards thead { display: none; }
  table.cards tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--dough-dark); }
  table.cards td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 3px 0; text-align: right; }
  table.cards td[data-label]::before { content: attr(data-label); color: var(--pepper-soft); font-size: .8rem; text-align: left; flex-shrink: 0; }
  table.cards, table.cards tbody { display: block; width: 100%; }
  table.cards td:first-child { display: block; text-align: left; padding-bottom: 6px; }
  table.cards td:first-child::before { display: none; }
  table.cards td:empty { display: none; }
}