/* Диспетчерская — тёмный «пульт» для торговли игровыми товарами.
   Золото — идентичность и первое место. Коралл — горит. Мята — в норме. */

:root{
  --bg-0:#0D0A11;
  --bg-1:#141019;
  --bg-2:#1B1624;
  --bg-3:#241E2F;
  --bg-4:#2E2739;
  --line:#2B2436;
  --line-2:#3A3247;

  --txt-0:#F5F1F8;
  --txt-1:#B6ACC4;
  --txt-2:#7C7391;

  --gold:#FFB627;
  --gold-2:#FFD27A;
  --gold-dim:rgba(255,182,39,.13);
  --gold-line:rgba(255,182,39,.34);

  --coral:#FF4D6A;
  --coral-dim:rgba(255,77,106,.13);
  --coral-line:rgba(255,77,106,.36);

  --mint:#2FE0A6;
  --mint-dim:rgba(47,224,166,.12);

  --ch-digiseller:#4C8DFF;
  --ch-ggsel:#FF8A3D;
  --ch-playerok:#C77DFF;
  --ch-telegram:#37B7E9;

  --f-display:"Unbounded","Segoe UI",system-ui,sans-serif;
  --f-body:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;

  --r-card:16px;
  --r-input:10px;
  --inset:inset 0 1px 0 rgba(255,255,255,.045);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg-0);
  background-image:
    radial-gradient(900px 420px at 78% -140px, rgba(255,182,39,.09), transparent 70%),
    radial-gradient(700px 380px at 8% -60px, rgba(199,125,255,.07), transparent 70%);
  background-attachment:fixed;
  color:var(--txt-0);
  font-family:var(--f-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:700;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(26px,3.4vw,36px);line-height:1.06}
h2{font-size:18px;line-height:1.2;letter-spacing:-.01em}
h3{font-size:15px;font-weight:700;font-family:var(--f-body);letter-spacing:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- каркас ---------- */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.rail{
  background:var(--bg-1);border-right:1px solid var(--line);
  padding:22px 14px;display:flex;flex-direction:column;gap:26px;
  position:sticky;top:0;height:100vh;
}
.wordmark{display:block;padding:0 10px;font-family:var(--f-display);font-weight:800;
  font-size:15px;letter-spacing:.01em;color:var(--txt-0);line-height:1.25}
.wordmark:hover{text-decoration:none}

/* Верхняя полоса — только на телефоне, на широком экране её роль играет рельс. */
.topbar{display:none;position:sticky;top:0;z-index:20;align-items:center;
  justify-content:space-between;gap:12px;padding:10px 14px;
  background:var(--bg-1);border-bottom:1px solid var(--line)}
.topbar .wordmark{font-size:13px;padding:0}
.topbar-right{display:flex;align-items:center;gap:9px}

/* Полоса смены: менеджер всегда видит, работает он сейчас или нет. */
.shiftbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-radius:12px;margin-bottom:18px;font-size:13.5px;
  border:1px solid var(--line);background:var(--bg-2);color:var(--txt-1)}
.shiftbar .mono{font-weight:700;color:var(--txt-0)}
.shiftbar a{margin-left:auto;white-space:nowrap}
.shiftbar.live{border-color:rgba(47,224,166,.4);
  background:linear-gradient(90deg,var(--mint-dim),transparent 60%),var(--bg-2)}
.shiftbar.live .mono{color:var(--mint)}
.shiftbar.rest{border-color:var(--line-2)}
.shiftbar.off{border-color:var(--gold-line);
  background:linear-gradient(90deg,var(--gold-dim),transparent 60%),var(--bg-2)}

.railnav{display:flex;flex-direction:column;gap:3px;flex:1}
.railnav a{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  color:var(--txt-1);font-size:14px;font-weight:600;position:relative;
  transition:background .14s ease,color .14s ease;
}
.railnav a:hover{background:var(--bg-2);color:var(--txt-0);text-decoration:none}
.railnav a.active{background:var(--gold-dim);color:var(--gold-2)}
.railnav a.active::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;
  border-radius:0 3px 3px 0;background:var(--gold)}
.railnav .ico{width:17px;height:17px;flex:none;opacity:.9}
.railnav .count{margin-left:auto;font-family:var(--f-mono);font-size:11px;font-weight:700;
  background:var(--bg-3);color:var(--txt-1);padding:1px 7px;border-radius:999px}
.railnav a.active .count{background:var(--gold);color:#20160A}

.railuser{border-top:1px solid var(--line);padding-top:16px;display:flex;align-items:center;gap:10px}
.railuser .who{min-width:0;flex:1}
.railuser .nm{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.railuser .rl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-2)}

.avatar{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:700;font-size:13px;color:#20160A;
  background:linear-gradient(140deg,var(--gold-2),var(--gold))}
.avatar.a2{background:linear-gradient(140deg,#8FE9FF,var(--ch-telegram));color:#06222C}
.avatar.a3{background:linear-gradient(140deg,#E0B0FF,var(--ch-playerok));color:#2A0F3D}
.avatar.a4{background:linear-gradient(140deg,#9DF5D2,var(--mint));color:#04291D}
.avatar.lg{width:52px;height:52px;border-radius:16px;font-size:19px}

/* min-width:0 обязателен: без него широкая таблица внутри распирает
   колонку грида, и вся страница начинает ездить вбок. */
.main{padding:clamp(20px,2.6vw,34px) clamp(16px,2.6vw,34px) 80px;max-width:1360px;min-width:0}
.card,.scroll{min-width:0}

/* ---------- карточки ---------- */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--inset);margin-bottom:20px;overflow:hidden}
.card > header{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:15px 18px;border-bottom:1px solid var(--line)}
.card > header .hint{font-size:12.5px;color:var(--txt-2)}
.card-body{padding:18px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media (max-width:1000px){.grid2{grid-template-columns:1fr}}

/* ---------- подиум ---------- */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
@media (max-width:840px){.podium{grid-template-columns:1fr}}
.seat{position:relative;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-card);padding:20px;box-shadow:var(--inset);overflow:hidden;
  transition:transform .16s ease,border-color .16s ease}
.seat:hover{transform:translateY(-2px)}
.seat .rank{position:absolute;right:12px;top:-14px;font-family:var(--f-display);font-weight:800;
  font-size:82px;line-height:1;color:var(--txt-0);opacity:.05;pointer-events:none}
.seat.first{border-color:var(--gold-line);
  background:linear-gradient(165deg,var(--gold-dim),transparent 52%),var(--bg-2)}
.seat.first .rank{color:var(--gold);opacity:.16}
.seat .prize{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#20160A;background:var(--gold);
  padding:4px 10px;border-radius:999px;margin-bottom:14px}
.seat .who{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.seat .who .nm{font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.seat .who .tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-2);margin-top:3px}
.seat .score{font-family:var(--f-display);font-weight:800;font-size:38px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;margin-bottom:3px}
.seat.first .score{color:var(--gold)}
.seat .score-lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:14px}
.xp{height:6px;border-radius:999px;background:var(--bg-4);overflow:hidden;margin-bottom:16px}
.xp i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.seat:not(.first) .xp i{background:linear-gradient(90deg,#6F6683,#9A90AE)}
.statline{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.statline div{min-width:0}
.statline .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:4px;white-space:nowrap}
.statline .v{font-family:var(--f-mono);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.statline .v.bad{color:var(--coral)}
.statline .v.good{color:var(--mint)}

/* ---------- таблицы ---------- */
.scroll{overflow-x:auto}
.scroll.wide table{min-width:840px}
table{border-collapse:collapse;width:100%;font-size:14px}
td b{white-space:nowrap}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--txt-2);font-weight:500;white-space:nowrap;background:var(--bg-1)}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--bg-3)}
tbody tr:last-child td{border-bottom:none}
tbody tr.self{background:var(--gold-dim)}
tbody tr.self:hover{background:rgba(255,182,39,.18)}
td.num,th.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.right{text-align:right}
td.ident{max-width:130px;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--txt-1)}
.dim{color:var(--txt-2)}
.strike{text-decoration:line-through;color:var(--txt-2)}
.sub{font-size:12px;color:var(--txt-2);margin-top:3px}

/* ---------- чипы ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10.5px;
  font-weight:500;letter-spacing:.04em;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:var(--bg-3);color:var(--txt-1);border:1px solid var(--line-2)}
.chip.gold{background:var(--gold-dim);color:var(--gold-2);border-color:var(--gold-line)}
.chip.hot{background:var(--coral-dim);color:var(--coral);border-color:var(--coral-line)}
.chip.ok{background:var(--mint-dim);color:var(--mint);border-color:rgba(47,224,166,.32)}
.chip .dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex:none}
.chip.ch-digiseller{color:var(--ch-digiseller)}
.chip.ch-ggsel{color:var(--ch-ggsel)}
.chip.ch-playerok{color:var(--ch-playerok)}
.chip.ch-telegram{color:var(--ch-telegram)}

/* ---------- очередь ---------- */
.queue{display:flex;flex-direction:column;gap:9px}
.qcard{display:grid;grid-template-columns:142px minmax(0,1fr) auto;gap:18px;align-items:center;
  background:var(--bg-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  transition:border-color .15s ease,transform .15s ease}
.qcard:hover{border-color:var(--line-2);transform:translateX(2px)}
.qcard.hot{border-color:var(--coral-line);
  background:linear-gradient(90deg,var(--coral-dim),transparent 46%),var(--bg-2)}
.qcard.warm{border-color:rgba(255,182,39,.28)}
.qcard.locked{opacity:.62}
.qcard.locked .qtitle{color:var(--txt-1)}
.qtimer{font-family:var(--f-mono);font-size:21px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:var(--mint);white-space:nowrap}
.qcard.warm .qtimer{color:var(--gold)}
.qcard.hot .qtimer{color:var(--coral)}
.qcard.hot .qtimer{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .qcard.hot .qtimer{animation:none}
  .qcard:hover,.seat:hover{transform:none}
}
.qtimer-lbl{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt-2);margin-top:4px}
.qfuse{height:3px;border-radius:999px;background:var(--bg-4);margin-top:9px;overflow:hidden}
.qfuse i{display:block;height:100%;border-radius:999px;background:var(--mint)}
.qcard.warm .qfuse i{background:var(--gold)}
.qcard.hot .qfuse i{background:var(--coral)}
.qtitle{font-weight:700;font-size:15px;margin-bottom:5px}
.qtitle a{color:var(--txt-0)}
.qmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;color:var(--txt-2)}
.qside{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.qprice{font-family:var(--f-mono);font-size:14px;font-weight:700;white-space:nowrap}
.empty{padding:52px 20px;text-align:center;color:var(--txt-2)}
.empty b{display:block;font-family:var(--f-display);font-size:17px;color:var(--txt-1);margin-bottom:6px}
/* Раскладку карточки на телефоне задаёт общий блок ниже (max-width:900px). */

/* ---------- переписка ---------- */
.thread{display:flex;flex-direction:column;gap:14px;padding:20px;max-height:56vh;overflow-y:auto}
.bubble{max-width:78%;padding:12px 15px;border-radius:14px;background:var(--bg-3);
  border:1px solid var(--line-2)}
.bubble.manager{align-self:flex-end;background:var(--gold-dim);border-color:var(--gold-line)}
.bubble .who{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:6px}
.bubble p{margin:0;font-size:14.5px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:13.5px;margin:0}
.facts dt{color:var(--txt-2)}
.facts dd{margin:0;font-weight:600;text-align:right}

/* ---------- формы ---------- */
label{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-2);margin-bottom:7px}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--txt-0);background:var(--bg-1);
  border:1px solid var(--line-2);border-radius:var(--r-input);padding:10px 12px;width:100%;
  transition:border-color .14s ease,background .14s ease}
input:hover,select:hover,textarea:hover{border-color:#4A4159}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);background:var(--bg-0)}
input[type=number],input.mono{font-family:var(--f-mono)}
input::placeholder,textarea::placeholder{color:var(--txt-2)}
textarea{resize:vertical;min-height:96px;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--txt-2) 50%),
  linear-gradient(135deg,var(--txt-2) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.field{margin-bottom:15px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
form.inline{display:flex;gap:8px;flex-wrap:nowrap;align-items:center}
form.inline input{width:auto;min-width:0}

button,.btn{font-family:var(--f-body);font-size:13.5px;font-weight:700;cursor:pointer;
  border:1px solid transparent;border-radius:var(--r-input);padding:10px 17px;white-space:nowrap;
  background:var(--gold);color:#20160A;display:inline-block;
  transition:filter .14s ease,background .14s ease,border-color .14s ease}
button:hover,.btn:hover{filter:brightness(1.08);text-decoration:none}
button.ghost,.btn.ghost{background:transparent;color:var(--txt-1);border-color:var(--line-2)}
button.ghost:hover,.btn.ghost:hover{background:var(--bg-3);color:var(--txt-0)}
button.danger{background:var(--coral);color:#2A0209}
button.ok,.btn.ok{background:var(--mint);color:#04291D}
button.sm,.btn.sm{font-size:12px;padding:7px 12px}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.actions.top{margin:0}

/* ---------- вход ---------- */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px}
.gate-card{width:100%;max-width:378px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:20px;padding:34px 32px;box-shadow:var(--inset),0 30px 80px -40px #000}
.gate-card .mark{font-family:var(--f-display);font-weight:800;font-size:23px;letter-spacing:-.02em}
.gate-card .mark em{font-style:normal;color:var(--gold)}
.gate-card .tagline{font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--txt-2);margin:8px 0 28px}
.alert{border-radius:var(--r-input);padding:11px 14px;font-size:13.5px;margin-bottom:18px;
  background:var(--coral-dim);color:var(--coral);border:1px solid var(--coral-line)}
.alert.good{background:var(--mint-dim);color:var(--mint);border-color:rgba(47,224,166,.32)}

/* ---------- магазины ---------- */
.shops{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}
.shop{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--bg-1)}
.shop.off{opacity:.5}
.shop-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.shop-head b{font-size:15px}
.shop .sub{margin:0}

/* ---------- график работы ---------- */
/* Один и тот же список дней: на широком экране три колонки, на телефоне
   карточки встают одна под другой. Никаких широких таблиц. */
.sched-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;margin-bottom:20px}
.sched-card > header{align-items:center}
.sched-card h2{font-size:16px}
.sched-card .card-body{padding:8px 16px 14px}

.sched-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.sched-row:last-child{border-bottom:none}
.sched-row .d{font-size:14px;font-weight:600}
.sched-row.off .d{color:var(--txt-2);font-weight:500}
.sched-row.today{margin:0 -16px;padding-left:16px;padding-right:16px;
  background:var(--gold-dim);border-radius:10px;border-bottom-color:transparent}
.sched-row.today .d{color:var(--gold-2)}
.span-read{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.sched-row.off .span-read{color:var(--txt-2);font-weight:400}
.span-edit{display:flex;align-items:center;gap:6px;flex:none}
.span-edit input{width:68px;text-align:center;padding:8px 4px;font-size:13.5px}
.span-edit .dash{color:var(--txt-2)}

/* Справка, которую читают один раз: свёрнута, чтобы не занимать экран. */
.howto{border:1px solid var(--line);border-radius:12px;background:var(--bg-2);
  margin-bottom:18px;overflow:hidden}
.howto summary{cursor:pointer;padding:12px 16px;font-size:13.5px;font-weight:600;
  color:var(--txt-1);list-style:none;display:flex;align-items:center;gap:8px}
.howto summary::-webkit-details-marker{display:none}
.howto summary::before{content:"?";display:grid;place-items:center;width:18px;height:18px;
  border-radius:999px;background:var(--bg-4);color:var(--gold);font-size:11px;font-weight:700}
.howto[open] summary{border-bottom:1px solid var(--line)}
.howto-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.howto-body p{margin:0;font-size:13.5px;color:var(--txt-1)}
.howto-body b{color:var(--txt-0)}

/* ---------- прочее ---------- */
.note{border:1px solid var(--line-2);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;
  background:var(--bg-1);padding:14px 17px;font-size:13.5px;color:var(--txt-1);margin:18px 0}
.note b{color:var(--txt-0)}
.formula{font-family:var(--f-mono);font-size:13px;background:var(--bg-1);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;color:var(--txt-1);overflow-x:auto;white-space:nowrap}
.formula b{color:var(--gold-2);font-weight:700}
.grade{font-family:var(--f-mono);font-size:13px;font-weight:700;padding:3px 9px;border-radius:8px}
.grade.hi{background:var(--mint-dim);color:var(--mint)}
.grade.mid{background:var(--gold-dim);color:var(--gold)}
.grade.lo{background:var(--coral-dim);color:var(--coral)}
.grade.none{background:var(--bg-3);color:var(--txt-2)}

/* ---------- телефон: рельс уезжает в нижнюю панель ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .topbar{display:flex}

  .rail{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;
    height:auto;flex-direction:row;gap:0;padding:6px 4px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
    border-right:none;border-top:1px solid var(--line);
    background:rgba(20,16,25,.96);backdrop-filter:blur(12px);
    overflow-x:auto;scrollbar-width:none;
  }
  .rail::-webkit-scrollbar{display:none}
  .rail > .wordmark,.railuser{display:none}

  .railnav{flex-direction:row;gap:2px;width:100%}
  .railnav a{
    flex:1 0 auto;min-width:70px;flex-direction:column;gap:4px;
    padding:8px 6px;border-radius:12px;font-size:10.5px;font-weight:600;
    text-align:center;white-space:nowrap;position:relative;
  }
  .railnav a .ico{width:21px;height:21px}
  .railnav a.active::before{display:none}
  .railnav .count{position:absolute;top:2px;right:calc(50% - 24px);
    margin:0;font-size:9.5px;padding:0 5px;line-height:15px}

  /* Место под нижнюю панель, чтобы она не накрывала содержимое. */
  .main{padding:16px 14px calc(96px + env(safe-area-inset-bottom))}

  h1{font-size:26px}
  .head{gap:14px;margin-bottom:18px}
  .head p{font-size:13.5px}
  .tiles{grid-template-columns:repeat(2,1fr);gap:10px}
  .tile{padding:13px 14px}
  .tile .val{font-size:26px}
  .tile .val.sm{font-size:18px}
  .podium{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .card{border-radius:14px}
  .card > header{padding:13px 15px}
  .card-body{padding:15px}
  .fields{grid-template-columns:1fr}

  /* Пальцем по кнопке нужно попадать с первого раза. */
  button,.btn{padding:12px 16px;font-size:14px}
  button.sm,.btn.sm{padding:10px 13px;font-size:13px}
  input,select,textarea{font-size:16px;padding:12px} /* 16px — иначе iOS зумит */

  /* Карточка заказа: таймер строкой сверху, кнопки во всю ширину. */
  .qcard{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:14px}
  .qcard > div:first-child{display:flex;align-items:center;gap:10px}
  .qtimer{font-size:24px}
  .qtimer-lbl{margin:0;flex:none}
  .qfuse{flex:1;margin:0;min-width:40px}
  .qtitle{font-size:15px;line-height:1.35}
  .qmeta{gap:7px;font-size:12px}
  .qmeta .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .qside{justify-content:stretch;gap:8px;align-items:center}
  .qside form{flex:1 1 46%}
  .qside form button{width:100%}
  .qprice{width:100%;font-size:16px;order:-1}

  .thread{max-height:none;padding:15px}
  .bubble{max-width:92%}

  /* Широкие таблицы листаются вбок — подсказываем это тенью справа. */
  .scroll{position:relative;-webkit-overflow-scrolling:touch}
  .scroll.wide table{min-width:640px}
  th,td{padding:10px 12px}

  .shops{grid-template-columns:1fr}
  .statline{grid-template-columns:repeat(2,1fr);gap:12px}
  .formula{white-space:normal}
}

@media (max-width:420px){
  .tiles{grid-template-columns:1fr}
  .railnav a{min-width:62px;font-size:10px}
  .head .btn{width:100%}
}

/* ---------- заголовок страницы ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:24px}
.head p{margin:9px 0 0;color:var(--txt-1);font-size:14px;max-width:74ch}
.head p b{color:var(--txt-0);font-weight:700}
.kicker{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
.kicker::before{content:"";width:16px;height:1px;background:var(--gold);opacity:.65}

/* ---------- плитки ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:12px;margin-bottom:24px}
.tile{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);
  padding:16px 18px;box-shadow:var(--inset);position:relative;overflow:hidden}
.tile .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:11px}
.tile .val{font-family:var(--f-display);font-weight:700;font-size:33px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile .val.sm{font-size:23px}
.tile .sub{font-size:12.5px;color:var(--txt-2);margin-top:8px}
.tile.alert{border-color:var(--coral-line);background:
  linear-gradient(180deg,var(--coral-dim),transparent 60%),var(--bg-2)}
.tile.alert .val{color:var(--coral)}
.tile.win{border-color:var(--gold-line);background:
  linear-gradient(180deg,var(--gold-dim),transparent 60%),var(--bg-2)}
.tile.win .val{color:var(--gold)}
.tile.good .val{color:var(--mint)}