:root{
  --bg:#ffeef2;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#e2e8f0;
  --primary:#ee7596;

  /* Status palette — теплые, гармоничные */
  --todo:#ce4d43;   /* теплый красный */
  --doing:#d49824;  /* теплый янтарный */
  --done:#44944a;   /* зелёный готово */

  /* Elevation / iOS-like */
  --shadow:0 10px 28px rgba(15,23,42,.08);
  --shadow-soft:0 6px 18px rgba(15,23,42,.06);
}

/* ===== Reset ===== */
*{box-sizing:border-box}
html, body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}

/* ===== Layout ===== */
.bg{background:var(--bg)}
.screen{
  max-width:520px;
  margin:0 auto;
  padding:14px 14px 92px;
}
.center{min-height:100vh;display:flex;align-items:center;justify-content:center}

/* ===== Cards / Typography ===== */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow-soft);
  margin-bottom:12px;
}

.h1{font-size:18px;font-weight:900;margin-bottom:10px}
.h2{font-size:16px;font-weight:900;margin-bottom:10px}
.muted{color:var(--muted)}
.small{font-size:12px}

.section-title{font-weight:900;margin-bottom:10px}

/* ===== Forms ===== */
.form{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.inp{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  outline:none;
  background:#fff;
  font-size:14px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.inp:focus{
  border-color:rgba(238,117,150,.55);
  box-shadow:0 0 0 3px rgba(238,117,150,.18);
}

/* ===== Buttons ===== */
.btn{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  color: var(--text);
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

.btn.primary{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  box-shadow:0 10px 22px rgba(238,117,150,.25);
}
.btn.ghost{background:#fff;color:var(--text)}

/* “приятные” кнопки */
.btn-green{
  background:#aac81c;
  color:#ffffff;
  border-color:#aac81c;
  box-shadow:0 10px 22px rgba(170,200,28,.18);
}
.btn-red{
  background:#dc2626;
  color:#ffffff;
  border-color:#dc2626;
  box-shadow:0 10px 22px rgba(220,38,38,.18);
}

/* Кнопки параллельно */
.actions-row{
  display:flex;
  gap:12px;
  margin-top:12px;
}
.actions-row form{flex:1}
.actions-row .btn{
  width:100%;
  padding:14px;
  border-radius:14px;
  font-weight:900;
  font-size:14px;
}

/* ===== Helpers ===== */
.stack{display:flex;flex-direction:column;gap:10px}

/* ===== Topbar ===== */
.topbar{
  position:sticky;top:0;z-index:10;
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  box-shadow:0 6px 18px rgba(15,23,42,.03);
}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-title{font-weight:900}
.topbar-right{position:absolute;right:12px;top:12px}

.iconbtn{
  border:1px solid var(--border);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.iconbtn:active{transform:translateY(1px)}
.iconbtn:hover{background:rgba(238,117,150,.08);border-color:rgba(238,117,150,.25)}

/* ===== Tabbar ===== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-around;
  padding:8px 6px;
  z-index:20;
  box-shadow:0 -10px 30px rgba(15,23,42,.06);
}
.tab{
  text-decoration:none;
  color:var(--muted);
  width:25%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  font-size:11px;
  padding:6px 0;
  border-radius:12px;
  transition:background-color .18s ease, color .18s ease;
}
.tab.active{
  color:var(--primary);
  font-weight:900;
  background:rgba(238,117,150,.10);
}
.tab-ico{font-size:18px}
.tab-txt{font-size:11px}

/* ===== Drawer ===== */
.drawer{
  position:fixed;top:0;left:0;height:100%;width:280px;
  background:#fff;
  border-right:1px solid var(--border);
  transform:translateX(-100%);
  transition:.2s;
  z-index:30;
  padding:12px;
  box-shadow:18px 0 40px rgba(15,23,42,.12);
}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.drawer-title{font-weight:900}

.drawer-link{
  display:block;
  padding:12px 10px;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--border);
  margin-bottom:8px;
  background:#fff;
  transition:background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.drawer-link:hover{
  background:rgba(238,117,150,.08);
  border-color:rgba(238,117,150,.25);
}
.drawer-link:active{transform:translateY(1px)}

.backdrop{
  position:fixed;inset:0;
  background:rgba(2,6,23,.35);
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:25;
}
.backdrop.show{opacity:1;pointer-events:auto}

/* ===== Rows (preps / orders) ===== */
.row{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  margin:8px 0;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:var(--shadow-soft);
  transition:border-color .22s ease, box-shadow .22s ease, transform .12s ease;
}

/* iOS-like gloss */
.row::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
    radial-gradient(900px 260px at 50% -40px, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  opacity:.55;
  z-index:0;
}

/* Keep content above layers */
.row > *{position:relative;z-index:2}

.row-title{font-weight:900}
.row-main{flex:1}
.row-actions{display:flex;flex-direction:column;gap:8px;min-width:160px}

.sel{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
}

/* ===== STATUS COLORS (premium & consistent) ===== */
.status-none{
  background:rgba(100,116,139,0.05);
  border:1px dashed rgba(100,116,139,0.25);
  box-shadow:none;
}
.status-none::after{opacity:.30}

.row.status-todo,
.row.status-doing,
.row.status-done{
  overflow:hidden;
}

/* Color overlay */
.row.status-todo::before,
.row.status-doing::before,
.row.status-done::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  z-index:1;
}

/* TODO */
.status-todo{
  border:1px solid rgba(206,77,67,0.32);
  box-shadow:0 10px 26px rgba(206,77,67,0.12);
}
.row.status-todo::before{
  background:
    radial-gradient(900px 420px at 30% 0%, rgba(255,255,255,.40), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(206,77,67,.18), rgba(206,77,67,.10));
}

/* DOING */
.status-doing{
  border:1px solid rgba(212,152,36,0.30);
  box-shadow:0 10px 26px rgba(212,152,36,0.12);
}
.row.status-doing::before{
  background:
    radial-gradient(900px 420px at 30% 0%, rgba(255,255,255,.40), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(212,152,36,.18), rgba(212,152,36,.10));
}

/* DONE */
.status-done{
  border:1px solid rgba(68,148,74,0.32);
  box-shadow:0 10px 26px rgba(68,148,74,0.12);
}
.row.status-done::before{
  background:
    radial-gradient(900px 420px at 30% 0%, rgba(255,255,255,.40), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(68,148,74,.18), rgba(68,148,74,.10));
}

/* Hover lift (desktop) */
@media (hover:hover){
  .row:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
}

/* ===== Checklist ===== */
.checkrow{display:flex;gap:10px;align-items:flex-start;padding:8px 0}
.chk{transform:scale(1.2);margin-top:3px}
.checktext{font-weight:700}

/* Locked visuals */
.is-locked .checkrow{opacity:.55}
.locked-card{background:rgba(100,116,139,0.04)}
.locked-text{color:rgba(15,23,42,0.65)}

/* ===== Flash messages ===== */
.flash-wrap{margin-bottom:10px}
.flash{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800
}
.flash.error{
  border-color:#fecaca;
  background:#fff1f2;
  color:#991b1b
}
.flash.ok{
  border-color:rgba(68,148,74,.35);
  background:rgba(68,148,74,.10);
  color:#14532d
}

/* ===== Motion safety ===== */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* =========================================================
   ORDERS (final): same behavior as Preps, no transparency bugs
   ========================================================= */

/* Важно: в Orders НЕ трогаем background детей (не делаем transparent),
   иначе исчезают тексты/плашки/кнопки. */

.orders .row{
  background:#fff !important;
  opacity:1 !important;
}

/* “Добавлено” в Orders = status-done, но иногда класс is-added */
.orders .row.is-added,
.orders .row.added,
.orders .row.order-added{
  border:1px solid rgba(68,148,74,0.32) !important;
  box-shadow:0 10px 26px rgba(68,148,74,0.12) !important;
  overflow:hidden;
}
.orders .row.is-added::before,
.orders .row.added::before,
.orders .row.order-added::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(900px 420px at 30% 0%, rgba(255,255,255,.40), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(68,148,74,.18), rgba(68,148,74,.10));
}
.orders .row.is-added > *,
.orders .row.added > *,
.orders .row.order-added > *{
  position:relative;
  z-index:2;
}

/* Инпуты в Orders всегда белые */
.orders input,
.orders textarea,
.orders select{
  background:#fff !important;
}

/* Кнопки в Orders — текст всегда виден (ПК + телефон) */
.orders .btn,
.orders .btn *{
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  opacity: 1 !important;
}
.orders .btn.primary,
.orders .btn.primary *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.orders .btn.btn-green,
.orders .btn.btn-green *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.orders .btn.btn-red,
.orders .btn.btn-red *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.orders .btn:disabled,
.orders .btn:disabled *{
  opacity:.75 !important;
}
/* ==============================
   INVENTORY — same style as PREPS
   ============================== */

/* Чтобы инвентаризация не выглядела пунктиром/розовым */
.inv-row{
  background:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Не используем пунктир в инвентаризации */
.inv-row.status-none{
  border-style: solid !important;
  background:#fff !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Заполнено — делаем как "Готово" в заготовках */
.inv-row.is-filled{
  border:1px solid rgba(68,148,74,0.32) !important;
  box-shadow: 0 10px 26px rgba(68,148,74,0.12) !important;
}

/* Подложка (дорогой вид) поверх белого, НЕ прозрачная */
.inv-row.is-filled::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(900px 420px at 30% 0%, rgba(255,255,255,.40), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(68,148,74,.18), rgba(68,148,74,.10));
}

/* Контент поверх подложки */
.inv-row > *{
  position:relative;
  z-index:2;
}
/* ==============================
   INVENTORY UI polish
   ============================== */

/* Прогресс */
.inv-progress{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
  color:var(--text);
}

/* Инвентаризация: карточки как PREPS */
.inv-row{
  background:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}
.inv-row.status-none{
  border-style: solid !important;
  background:#fff !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Заполнено — как "готово" */
.inv-row.is-filled{
  border:1px solid rgba(68,148,74,0.32) !important;
  box-shadow: 0 10px 26px rgba(68,148,74,0.12) !important;
}
.inv-row.is-filled::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(900px 420px at 30% 0%, rgba(255,255,255,.40), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(68,148,74,.18), rgba(68,148,74,.10));
}
.inv-row > *{position:relative;z-index:2}

/* Кнопка "Сформировать" — серый disabled, зелёный active */
#invBuildBtn:disabled{
  background:#e5e7eb !important;
  border-color:#e5e7eb !important;
  color:#6b7280 !important;
  box-shadow:none !important;
  opacity:1 !important; /* важно: чтобы текст был читаемым */
}

/* когда активна — обычная зелёная (оставляем твою) */
#invBuildBtn{
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* =========================
   INVENTORY – same look as PREPS/ORDERS
   ========================= */

.inv-head .inv-progress{
  margin-top:10px;
}

.inv-pill{
  display:inline-block;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow-soft);
  font-weight:800;
}

.inv-group{margin-bottom:12px}

/* инвентарные ряды — как row */
.inv-row{
  background:#fff !important;
  border:1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* чтобы не было “розовой прозрачности” */
.inv-row, .inv-row *{
  opacity: 1 !important;
}

/* кнопка disabled – серый вид */
.inv-disabled{
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
  color: #6b7280 !important;
  box-shadow: none !important;
}

/* когда готово — “primary” уже будет включен классом */
.inv-build.inv-ready{
  box-shadow:0 10px 22px rgba(238,117,150,.25);
}

/* лёгкая подсветка инпута */
.inv-inp:focus{
  border-color:rgba(238,117,150,.55);
  box-shadow:0 0 0 3px rgba(238,117,150,.18);
}