/* ============================================================================
   shakeyourmind.by — тренажёр меню
   Одна система на две поверхности: витрина (убедить) и кабинет (работать).
   Сцена решает свет: управляющий сидит с ноутбуком днём, в кабинете или
   в зале до открытия. Поэтому светлая тема, а не тёмная «премиальная».
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Golos+Text:wght@400;500;600;700&display=swap');

:root{
  /* Основа: белая бумага и тёплый лист под ней. Чистый #fff на длинных
     формах слепит, поэтому фон страницы всегда чуть тёплый. */
  --paper:#ffffff;
  --ground:#f7f6f2;
  --ground-deep:#efece5;

  --ink:#15191a;
  --ink-2:#4a524f;
  --ink-3:#79817d;

  --line:#e3e0d8;
  --line-strong:#cfcabd;

  /* Зелёный — от бара и кухни, не корпоративный синий соседей по рынку. */
  --brand:#1d6b4f;
  --brand-deep:#134634;
  --brand-ink:#0f3527;
  --brand-soft:#e7f1ec;
  --brand-line:#bcdccf;

  --warn:#8a5a12;
  --warn-soft:#fdf4e4;
  --warn-line:#f0dfbe;
  --danger:#a3341f;

  --r-sm:8px; --r:12px; --r-lg:18px;
  --shadow-1:0 1px 2px rgba(21,25,26,.05), 0 4px 10px rgba(21,25,26,.04);
  --shadow-2:0 2px 4px rgba(21,25,26,.06), 0 14px 34px rgba(21,25,26,.07);

  --display:'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text:'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap:1080px;
  --ease:cubic-bezier(.2,.7,.25,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 16px/1.6 var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Поверхности, которые мы не рисовали, но которые всё равно наши. */
::selection{background:var(--brand-soft); color:var(--brand-ink)}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
input, textarea{caret-color:var(--brand)}
*{scrollbar-color:var(--line-strong) transparent; scrollbar-width:thin}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-thumb{
  background:var(--line-strong); border-radius:99px;
  border:3px solid var(--ground);
}
::-webkit-scrollbar-track{background:transparent}

a{color:var(--brand-deep); text-decoration:none;
  text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration:underline}

h1,h2,h3{font-family:var(--display); letter-spacing:-.02em; margin:0}
h1{font-size:clamp(30px, 4.4vw, 50px); line-height:1.08; font-weight:700; text-wrap:balance}
h2{font-size:clamp(23px, 2.7vw, 32px); line-height:1.16; font-weight:700; text-wrap:balance}
h3{font-size:19px; line-height:1.3; font-weight:600}
p{margin:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.tnum{font-variant-numeric:tabular-nums}

/* ── шапка сайта ─────────────────────────────────────────────────────────── */
.site-head{
  background:rgba(255,255,255,.92); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.4) blur(8px);
}
.site-head .wrap{display:flex; align-items:center; gap:28px; height:66px}
.logo{display:inline-flex; align-items:center; gap:10px; color:var(--ink)}
.logo:hover{text-decoration:none}
/* Знак заведения — готовый SVG, круглый по своей форме, поэтому ни фона,
   ни скругления от нас не требует. */
.logo-mark{width:34px; height:34px; flex:none; display:block}
/* Название набрано прописными и с разрядкой — так оно выглядит в самом
   знаке и в мини-приложении игры; сжатый межбуквенный интервал прописным
   противопоказан. */
.logo b{font:700 14.5px/1 var(--display); letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap}
.logo i{font-style:normal; color:var(--ink-3); font-size:12.5px; display:block; margin-top:3px}
.site-nav{display:flex; gap:22px; margin-left:auto; font-size:15px; align-items:center}
.site-nav a{color:var(--ink-2)}
.site-nav a:hover{color:var(--ink)}
/* Кнопка внутри навигации: без этого правило .site-nav a перебивает .btn
   по специфичности и красит белый текст кнопки в серо-зелёный. */
.site-nav a.btn{color:var(--ink)}
.site-nav a.btn-primary{color:#fff}
.site-nav a.btn:hover{text-decoration:none}

/* ── кнопки ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--paper); color:var(--ink); font:500 15px/1.2 var(--text);
  cursor:pointer; white-space:nowrap;
  transition:background .16s var(--ease), border-color .16s var(--ease),
             box-shadow .16s var(--ease), transform .16s var(--ease);
}
.btn:hover{background:var(--ground); text-decoration:none; border-color:var(--line-strong)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 1px 2px rgba(19,70,52,.24), 0 6px 16px rgba(19,70,52,.16)}
.btn-primary:hover{background:var(--brand-deep); border-color:var(--brand-deep)}
.btn-lg{padding:14px 24px; font-size:16px; border-radius:var(--r)}
.btn-sm{padding:7px 12px; font-size:14px}
.btn-quiet{border-color:transparent; background:transparent; color:var(--ink-3)}
.btn-quiet:hover{background:transparent; color:var(--danger)}
.btn[disabled]{opacity:.55; cursor:not-allowed; box-shadow:none}

/* ── витрина ─────────────────────────────────────────────────────────────── */
.hero{padding:64px 0 40px; background:linear-gradient(var(--paper), var(--ground) 78%)}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.hero p.lead{font-size:19px; line-height:1.55; color:var(--ink-2); margin:20px 0 0; max-width:34em}
.hero-cta{display:flex; gap:12px; margin:30px 0 0; flex-wrap:wrap}
.hero-foot{margin:20px 0 0; font-size:14px; color:var(--ink-3)}

/* Карточка вопроса — доказательство продукта, а не иллюстрация. */
.proof{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); padding:24px 24px 22px;
  animation:rise .5s var(--ease) both;
}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .proof{animation:none}
  .btn, .opt, .row{transition:none}
}
.proof-head{display:flex; align-items:baseline; gap:10px; margin:0 0 16px}
.proof-head span{font-size:13px; color:var(--ink-3)}
.proof h3{font-size:22px; font-family:var(--display); margin:2px 0 0}
.opts{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0}
.opt{
  padding:9px 14px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--ground); font:500 14px/1.3 var(--text); color:var(--ink);
  cursor:pointer; transition:background .15s var(--ease), border-color .15s var(--ease),
    color .15s var(--ease), box-shadow .15s var(--ease);
}
.opt:hover{border-color:var(--line-strong); background:var(--paper)}
.opt.hit{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-ink);
  box-shadow:0 1px 2px rgba(19,70,52,.1), 0 6px 14px rgba(19,70,52,.08)}
.opt.miss{background:#fdf0ed; border-color:#f0cfc7; color:var(--danger);
  text-decoration:line-through; text-decoration-thickness:1px}
.proof-foot{margin:18px 0 0; font-size:13.5px; color:var(--ink-3); min-height:1.5em}

/* Шапка липкая, поэтому якорь из навигации прятал заголовок секции под ней. */
.band[id], .hero[id]{scroll-margin-top:80px}
.band{padding:66px 0; border-top:1px solid var(--line); background:var(--paper)}
.band-quiet{background:var(--ground)}
.band-dark{background:var(--brand-ink); color:#e9efeb; border-top:0}
.band-dark h2{color:#fff}
.band-dark p{color:#bcd0c6}
.band h2 + p.sub{color:var(--ink-2); font-size:17px; margin:14px 0 0; max-width:56ch}
.band-dark h2 + p.sub{color:#bcd0c6}

/* Шаги — последовательность, а не набор карточек: номер здесь несёт смысл. */
.steps{counter-reset:s; display:grid; gap:2px; margin:38px 0 0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--line)}
.step{background:var(--paper); padding:26px 28px; display:grid;
  grid-template-columns:38px 1fr; gap:18px; align-items:start}
.step::before{
  counter-increment:s; content:counter(s);
  font:700 15px/34px var(--display); text-align:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand-ink);
}
.step h3{margin:5px 0 0}
.step p{color:var(--ink-2); margin:8px 0 0; max-width:62ch}

.split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin:38px 0 0}
.split ul{margin:20px 0 0; padding:0; list-style:none; display:grid; gap:14px}
.split li{display:grid; grid-template-columns:22px 1fr; gap:12px; color:var(--ink-2)}
.split li b{color:var(--ink); font-weight:600}
.ico{width:20px; height:20px; color:var(--brand); flex:none; margin-top:2px}

/* Телефон стажёра: рамка нарисована, содержимое настоящее. */
.phone{
  width:290px; margin:0 auto; background:var(--paper); border:1px solid var(--line-strong);
  border-radius:26px; box-shadow:var(--shadow-2); padding:14px; position:relative;
}
.phone::before{content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:56px; height:4px; border-radius:99px; background:var(--line-strong)}
.phone-body{background:var(--ground); border-radius:16px; padding:16px 14px; margin-top:8px}
.phone-q{font:600 15px/1.3 var(--display); margin:0 0 12px}
.phone-o{background:var(--paper); border:1px solid var(--line); border-radius:8px;
  padding:8px 11px; font-size:13.5px; margin:0 0 7px}
.phone-o.on{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-ink)}
.phone-meta{display:flex; gap:10px; font-size:12px; color:var(--ink-3); margin:12px 0 0}

/* ── заявка ──────────────────────────────────────────────────────────────── */
.lead-form{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:32px 0 0}
.lead-form .full{grid-column:1 / -1}
.band-dark label{color:#a9c1b5}
.band-dark input[type=text], .band-dark textarea{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.2); color:#fff}
.band-dark input[type=text]::placeholder, .band-dark textarea::placeholder{color:#8ba79a}
.band-dark input[type=text]:focus, .band-dark textarea:focus{
  border-color:#7fd0b0; box-shadow:0 0 0 3px rgba(127,208,176,.2)}
.band-dark .btn-primary{background:#fff; border-color:#fff; color:var(--brand-ink)}
.band-dark .btn-primary:hover{background:#dff0e7; border-color:#dff0e7}
.sent{display:flex; gap:10px; align-items:center; background:rgba(127,208,176,.14);
  border:1px solid rgba(127,208,176,.4); color:#d8f0e5; padding:14px 18px;
  border-radius:var(--r); margin:0 0 24px}

.site-foot{background:var(--ground-deep); padding:34px 0; font-size:14px; color:var(--ink-3)}
.site-foot .wrap{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.site-foot a{color:var(--ink-2)}

/* ── кабинет ─────────────────────────────────────────────────────────────── */
.app-head{background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:20}
.app-head .wrap{display:flex; align-items:center; gap:26px; height:62px}
.app-nav{display:flex; gap:6px; margin-left:auto}
.app-nav a{padding:7px 13px; border-radius:99px; color:var(--ink-2); font-size:15px}
.app-nav a:hover{background:var(--ground); text-decoration:none}
.app-nav a.on{background:var(--brand-soft); color:var(--brand-ink); font-weight:500}
.venue-chip{font-size:14px; color:var(--ink-3); padding-left:16px; border-left:1px solid var(--line)}

main.app{max-width:var(--wrap); margin:0 auto; padding:30px 24px 90px}
.page-title{margin:0 0 6px}
.sub{color:var(--ink-3); font-size:15px; margin:0 0 26px}
.crumbs{font-size:14px; color:var(--ink-3); margin:0 0 12px}
.crumbs a{color:var(--ink-3)}

.card{background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-1); margin:0 0 18px}
.card-head{display:flex; align-items:center; gap:12px; padding:15px 20px;
  border-bottom:1px solid var(--line)}
.card-head h2{font-size:17px}
.card-head .count{color:var(--ink-3); font-size:14px; margin-left:auto;
  font-variant-numeric:tabular-nums}
.card-foot{padding:13px 20px; border-top:1px solid var(--line); background:var(--ground)}

.rows{list-style:none; margin:0; padding:0}
.rows li{border-bottom:1px solid var(--line)}
.rows li:last-child{border-bottom:0}
.row{display:flex; align-items:center; gap:14px; padding:13px 20px; color:var(--ink);
  transition:background .14s var(--ease)}
a.row:hover{background:var(--brand-soft); text-decoration:none}
.row .name{font-weight:500}
.row .made{color:var(--ink-3); font-size:14px; margin-left:auto; max-width:50%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .meta{color:var(--ink-3); font-size:14px; font-variant-numeric:tabular-nums;
  min-width:2ch; text-align:right}
.row .made + .meta{margin-left:14px}
.row .made:only-of-type{margin-left:auto}

.actions{display:flex; gap:10px; align-items:center; margin:0 0 22px; flex-wrap:wrap}

label{display:block; font:500 14px/1.4 var(--text); margin:0 0 7px; color:var(--ink-2)}
input[type=text], textarea{
  width:100%; padding:11px 13px; font:400 15px/1.5 var(--text); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm)}
input[type=text]::placeholder, textarea::placeholder{color:var(--ink-3)}
input[type=text]:focus, textarea:focus{outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
textarea{resize:vertical; min-height:110px}
textarea.compose{min-height:230px; line-height:1.7}
.field{margin:0 0 20px}
.hint{font-size:14px; color:var(--ink-3); margin:8px 0 0; max-width:70ch}
.form-inline{display:flex; gap:8px; flex:1}
.form-inline input[type=text]{flex:1; min-width:0}

.note{display:flex; gap:11px; padding:14px 18px; border-radius:var(--r);
  font-size:15px; margin:0 0 22px; border:1px solid transparent; align-items:flex-start}
.note svg{flex:none; margin-top:2px}
.note-warn{background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn)}
.note-info{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-ink)}
.note b{font-weight:600}

.tag{font-size:12.5px; padding:3px 9px; border-radius:99px; background:var(--ground);
  color:var(--ink-3); border:1px solid var(--line); white-space:nowrap}
.tag-warn{background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line)}

.preview{display:grid; grid-template-columns:1fr 280px; gap:20px; align-items:start}
.quiz{padding:24px 26px 26px}
.quiz .q{font-size:14px; color:var(--ink-3); margin:0 0 5px}
.quiz h3{font-size:22px; margin:0 0 4px}
.legend{font-size:14px; color:var(--ink-3); margin:20px 0 0}
.legend i{display:inline-block; width:22px; height:12px; border-radius:4px;
  background:var(--brand-soft); border:1px solid var(--brand-line);
  margin-right:8px; vertical-align:-1px}
.opt.ok{background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand-ink)}
.side .rows a{display:block; padding:11px 18px; font-size:15px; color:var(--ink)}
.side .rows a:hover{background:var(--ground); text-decoration:none}
.side .rows a.on{background:var(--brand-soft); color:var(--brand-ink); font-weight:500}

.empty{padding:44px 22px; text-align:center; color:var(--ink-3)}
.empty p{margin:0 0 16px}

.code{font:700 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing:.14em; padding:16px 20px; background:var(--ground);
  border:1px dashed var(--line-strong); border-radius:var(--r);
  display:inline-block; color:var(--ink)}

@media (max-width:640px){
  /* На телефоне кнопка заявки вылезала за край экрана. Она не нужна в шапке:
     тот же призыв стоит первым экраном, крупной кнопкой. */
  .site-nav a.btn-primary{display:none}
  .site-head .wrap{gap:14px}
  .logo i{display:none}
  .app-head .wrap{height:56px}
  .venue-chip{display:none}
}

@media (max-width:860px){
  .hero-grid, .split, .lead-form{grid-template-columns:1fr; gap:32px}
  .preview{grid-template-columns:1fr}
  .site-nav a.hide-sm{display:none}
  .hero{padding:40px 0 28px}
  .band{padding:48px 0}
  .row .made{display:none}
}

/* ── вход и регистрация ──────────────────────────────────────────────────── */
main.auth{
  max-width:var(--wrap); margin:0 auto; padding:52px 24px 90px;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:48px; align-items:start;
}
.auth-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); padding:34px 36px 36px; max-width:560px;
}
.auth-card .sub{margin:8px 0 26px}
.auth-card .two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
input[type=password]{
  width:100%; padding:11px 13px; font:400 15px/1.5 var(--text); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm)}
input[type=password]:focus{outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}
.opt-mark{color:var(--ink-3); font-weight:400}
.note-error{background:#fdf0ed; border-color:#f0cfc7; color:var(--danger)}

.auth-aside{padding:8px 0 0}
.auth-aside h2{font-size:17px; margin:0 0 16px}
.plain-steps{counter-reset:a; list-style:none; margin:0; padding:0; display:grid; gap:14px}
.plain-steps li{display:grid; grid-template-columns:26px 1fr; gap:12px;
  color:var(--ink-2); font-size:15px}
.plain-steps li::before{
  counter-increment:a; content:counter(a);
  font:600 13px/22px var(--display); text-align:center;
  width:22px; height:22px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand-ink);
}
.aside-note{margin:22px 0 0; padding:14px 16px; background:var(--brand-soft);
  border:1px solid var(--brand-line); border-radius:var(--r);
  color:var(--brand-ink); font-size:14px}

/* Пустой кабинет: первый экран нового заведения. */
.start{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); padding:40px 40px 42px; max-width:720px}
.start h2{margin:0 0 10px}
.start p{color:var(--ink-2); max-width:60ch}
.start .actions{margin:26px 0 0}

.logout{margin-left:10px}
.logout button{background:none; border:0; padding:7px 10px; cursor:pointer;
  color:var(--ink-3); font:400 15px/1.2 var(--text); border-radius:99px}
.logout button:hover{background:var(--ground); color:var(--ink)}

@media (max-width:860px){
  main.auth{grid-template-columns:1fr; gap:28px; padding-top:32px}
  .auth-card{padding:26px 22px 28px}
  .auth-card .two{grid-template-columns:1fr}
}

/* Ссылка-приглашение в разделе «Персонал». */
.invite{display:flex; gap:8px}
.invite input[type=text]{
  flex:1; min-width:0; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:14px; color:var(--ink-2)}

/* ── оболочка кабинета: панель слева, работа справа ──────────────────────── */
.app-head .head-inner{
  display:flex; align-items:center; gap:26px; height:62px; padding:0 24px}
.shell{display:grid; grid-template-columns:264px minmax(0,1fr); align-items:start}
.work{padding:28px 32px 90px; min-width:0}

.rail{
  position:sticky; top:62px; align-self:start;
  height:calc(100vh - 62px); overflow-y:auto;
  background:var(--paper); border-right:1px solid var(--line);
  padding:20px 0 40px;
}
.rail-head{
  font:600 12px/1 var(--display); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:0 20px 12px}
.rail-folder{padding:0 0 18px}
.rail-folder-name{
  display:flex; align-items:baseline; gap:8px; padding:8px 20px 6px;
  font:600 14px/1.3 var(--text); color:var(--ink)}
.rail-folder-name b{margin-left:auto; color:var(--ink-3); font-weight:400; font-size:13px}
.rail ul{list-style:none; margin:0; padding:0}
.rail li a{
  display:flex; align-items:center; gap:8px; padding:8px 20px;
  color:var(--ink-2); font-size:14.5px; border-left:3px solid transparent}
.rail li a:hover{background:var(--ground); text-decoration:none; color:var(--ink)}
.rail li a.on{
  background:var(--brand-soft); color:var(--brand-ink); font-weight:550;
  border-left-color:var(--brand)}
.rail li a span{margin-left:auto; color:var(--ink-3); font-size:13px}
.rail-add{display:flex; gap:6px; padding:8px 20px 0}
.rail-add input{
  flex:1; min-width:0; padding:7px 10px; font-size:13.5px; border-radius:7px;
  border:1px solid var(--line); background:var(--ground); color:var(--ink)}
.rail-add button{
  width:32px; border:1px solid var(--line); border-radius:7px; cursor:pointer;
  background:var(--paper); color:var(--ink-2); font-size:17px; line-height:1}
.rail-add button:hover{background:var(--ground); color:var(--ink)}
.rail-add-folder{margin-top:8px; padding-top:16px; border-top:1px solid var(--line)}

/* Переименование: поле выглядит как заголовок, пока в него не зашли. */
.rename{display:flex; gap:8px; align-items:center; flex:1}
.rename input{
  flex:1; min-width:0; padding:7px 10px; font:600 16px/1.3 var(--display);
  border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink)}
.rename input:hover{background:var(--ground)}
.rename input:focus{background:var(--paper); border-color:var(--brand)}
.rename button{opacity:0; transition:opacity .15s var(--ease)}
.rename:focus-within button{opacity:1}
.rename-title input{font:700 26px/1.15 var(--display); letter-spacing:-.02em; padding:6px 10px}
.rename-title{margin:0 0 4px}

/* ── таблица состава ─────────────────────────────────────────────────────── */
.card-pad{padding:22px 24px}
.two-up{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.yield{display:flex; gap:8px}
.yield input{max-width:120px}
select{
  padding:11px 12px; font:400 15px/1.5 var(--text); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm)}
select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
input[type=file]{font:400 14px/1.5 var(--text); color:var(--ink-2)}
.photo-now{display:flex; align-items:center; gap:12px; margin:12px 0 0}
.photo-now img{width:64px; height:64px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line)}
.check{display:flex; align-items:center; gap:6px; font-size:14px; color:var(--ink-3); margin:0}

table.ing{width:100%; border-collapse:collapse}
table.ing th{
  text-align:left; font:500 12.5px/1 var(--text); color:var(--ink-3);
  padding:10px 10px 8px; border-bottom:1px solid var(--line); white-space:nowrap}
table.ing th:first-child{padding-left:20px}
table.ing td{padding:5px 6px; border-bottom:1px solid var(--line)}
table.ing td:first-child{padding-left:20px; width:36%}
table.ing td input, table.ing td select{
  width:100%; padding:8px 10px; font-size:14.5px; border-radius:7px}
table.ing td:nth-child(2) input, table.ing td:nth-child(3) input{max-width:88px}
table.ing td:last-child{width:40px; padding-right:14px}
.row-del{
  width:28px; height:28px; border:0; border-radius:7px; cursor:pointer;
  background:transparent; color:var(--ink-3); font-size:18px; line-height:1}
.row-del:hover{background:var(--warn-soft); color:var(--danger)}

/* ── карточки блюд ───────────────────────────────────────────────────────── */
.dishes{display:grid; gap:10px}
.dish{
  display:flex; align-items:center; gap:16px; padding:12px 16px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-1); color:var(--ink);
  transition:border-color .14s var(--ease), box-shadow .14s var(--ease)}
.dish:hover{text-decoration:none; border-color:var(--brand-line); box-shadow:var(--shadow-2)}
.dish-photo{width:56px; height:56px; border-radius:9px; object-fit:cover; flex:none;
  border:1px solid var(--line)}
.dish-photo-empty{display:grid; place-items:center; background:var(--ground); color:var(--line-strong)}
.dish-photo-empty svg{width:22px; height:22px}
.dish-body{display:flex; flex-direction:column; gap:3px; min-width:0}
.dish-body b{font-weight:600; font-size:15.5px}
.dish-body .made{color:var(--ink-3); font-size:13.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dish-meta{margin-left:auto; text-align:right; color:var(--ink-3); font-size:14px; flex:none}
.dish-meta i{display:block; font-style:normal; font-size:12.5px}
.danger{margin:26px 0 0}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{position:static; height:auto; border-right:0; border-bottom:1px solid var(--line);
    padding-bottom:20px}
  .work{padding:22px 18px 80px}
  .two-up{grid-template-columns:1fr}
  table.ing td:first-child{width:auto}
}

/* Имя заведения в витринной шапке — признак, что человек не разлогинен. */
.who{color:var(--ink-3); font-size:14px; padding-right:4px}

.code-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap}

/* Плитки подкатегорий на главной кабинета: переход в подкатегорию и сразу
   «+ блюдо» — то, ради чего управляющий и заходит. */
.tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px; padding:16px 20px}
.tile{display:flex; align-items:stretch; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; background:var(--paper);
  transition:border-color .14s var(--ease)}
.tile:hover{border-color:var(--brand-line)}
.tile-main{flex:1; min-width:0; padding:12px 14px; display:flex;
  flex-direction:column; gap:3px; color:var(--ink)}
.tile-main:hover{text-decoration:none; background:var(--brand-soft)}
.tile-main b{font-weight:600; font-size:15px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.tile-main span{color:var(--ink-3); font-size:13px}
.tile-add{display:grid; place-items:center; padding:0 14px; flex:none;
  border-left:1px solid var(--line); color:var(--brand-deep);
  font-size:13.5px; font-weight:500; white-space:nowrap}
.tile-add:hover{background:var(--brand-soft); text-decoration:none}

/* Ссылка на бота в шапке. Значок, а не слово: место в шапке дорогое, а
   марку телеграма узнают без подписи. */
.tg-link{display:grid; place-items:center; width:34px; height:34px;
  border-radius:9px; color:var(--ink-3)}
.tg-link:hover{background:var(--ground); color:#2aabee; text-decoration:none}
.tg-link svg{width:20px; height:20px}
.site-nav .tg-link, .app-nav .tg-link{margin-right:2px}