/* ═══════════ SPORT HUB · дизайн-система (концепт B «Приборная») ═══════════ */
:root{
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  --disp:'Unbounded',var(--sans);
  --mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --sp:cubic-bezier(.2,1.15,.3,1);
  --r-xl:22px; --r-lg:18px; --r-md:14px; --r-sm:10px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
:root, [data-theme=dark]{
  --ink:#eaf3f2; --ink-2:#a9bdbc; --ink-3:#7e9392; --ink-4:#546767;
  --cy:#6ce6ff; --cy-ink:#01161c; --mint:#6affc8; --mint-ink:#032019;
  --amber:#ffc061; --rose:#ff8b8b;
  --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.075);
  --rim:rgba(255,255,255,.42); --rim-2:rgba(255,255,255,.075);
  --hair:rgba(255,255,255,.06);
  --shade:0 14px 30px -18px rgba(0,0,0,.85);
  --blur:blur(18px) saturate(170%);
  --grid:rgba(255,255,255,.022);
  --veil:linear-gradient(180deg,rgba(3,8,8,.3),rgba(3,8,8,.9));
  --deck:#050b0b;
  --tab-fill:rgba(255,255,255,.03); --tab-rim:rgba(255,255,255,.16);
  --tab-ring:rgba(255,255,255,.05); --tab-blur:blur(44px) saturate(210%);
  --tab-shade:0 16px 34px -22px rgba(0,0,0,.7);
  --seg-fill:rgba(92,225,255,.09); --seg-ring:rgba(92,225,255,.2);
}
[data-theme=light]{
  --ink:#0c1a19; --ink-2:#3a5250; --ink-3:#5c7573; --ink-4:#8aa09e;
  --cy:#00778f; --cy-ink:#fff; --mint:#0b7a5c; --mint-ink:#fff;
  --amber:#9a5a00; --rose:#b3242f;
  --glass:rgba(255,255,255,.58); --glass-2:rgba(255,255,255,.72);
  --rim:rgba(255,255,255,.95); --rim-2:rgba(9,40,38,.09);
  --hair:rgba(9,40,38,.1);
  --shade:0 14px 30px -18px rgba(10,50,48,.5);
  --blur:blur(20px) saturate(150%);
  --grid:rgba(9,40,38,.035);
  --veil:linear-gradient(180deg,rgba(232,244,242,.5),rgba(224,240,238,.86));
  --deck:#dceeeb;
  --tab-fill:rgba(255,255,255,.38); --tab-rim:rgba(255,255,255,.8);
  --tab-ring:rgba(9,40,38,.07); --tab-blur:blur(44px) saturate(190%);
  --tab-shade:0 16px 34px -22px rgba(10,50,48,.4);
  --seg-fill:rgba(0,119,143,.09); --seg-ring:rgba(0,119,143,.22);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{background:var(--deck);color:var(--ink);font-family:var(--sans);font-size:15px;
  line-height:1.5;-webkit-font-smoothing:antialiased;
  /* полноэкранный режим PWA: контент не должен уезжать под Dynamic Island */
  padding-top:var(--safe-t)}

/* живой фон — без него стекло не читается как стекло */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--deck)}
.bg::before{content:'';position:absolute;inset:-30%;
  background:
    radial-gradient(50% 40% at 14% 6%, rgba(92,225,255,.4), transparent 60%),
    radial-gradient(40% 34% at 92% 40%, rgba(106,255,200,.2), transparent 62%),
    radial-gradient(60% 44% at 50% 108%, rgba(30,90,110,.36), transparent 64%);
  animation:pan 22s var(--sp) infinite alternate}
[data-theme=light] .bg::before{
  background:
    radial-gradient(50% 40% at 14% 6%, rgba(0,170,205,.5), transparent 60%),
    radial-gradient(40% 34% at 92% 40%, rgba(0,190,145,.34), transparent 62%),
    radial-gradient(60% 44% at 50% 108%, rgba(90,180,200,.4), transparent 64%)}
@keyframes pan{to{transform:translate3d(-3%,4%,0) scale(1.14)}}
.bg::after{content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent 0 25px,var(--grid) 25px 26px),
    repeating-linear-gradient(90deg,transparent 0 25px,var(--grid) 25px 26px),
    var(--veil)}

.app{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column}
.view{flex:1;overflow-y:auto;padding:14px 18px calc(112px + var(--safe-b));
  scrollbar-width:none;display:none}
.view::-webkit-scrollbar{display:none}
.view.on{display:block}
.stack>*{margin-bottom:9px}

/* ─── стекло ─── */
.g{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-2),
             inset 0 -14px 26px -18px rgba(92,225,255,.24),var(--shade);
  animation:up .5s var(--sp) both}
[data-theme=light] .g{box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-2),var(--shade)}
.g::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--rim),transparent);opacity:.6}
@keyframes up{from{opacity:0;transform:translateY(12px)}}
.d1{animation-delay:.04s}.d2{animation-delay:.08s}.d3{animation-delay:.12s}
.d4{animation-delay:.16s}.d5{animation-delay:.2s}
.pad{padding:14px}
.tap{cursor:pointer;transition:transform .26s var(--sp)}
.tap:active{transform:scale(.972)}

/* ─── строка состояния приложения ─── */
.bar{display:flex;align-items:center;gap:8px;padding:0 4px;margin-bottom:12px}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;animation:blink 2.6s infinite}
.dot.ok{background:var(--mint);box-shadow:0 0 11px var(--mint)}
.dot.care{background:var(--amber);box-shadow:0 0 11px var(--amber)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.bar .dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--ink-3);
  text-transform:uppercase}
.bar .ph{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  color:var(--cy);padding:4px 9px;border-radius:7px;text-transform:uppercase;
  box-shadow:inset 0 0 0 1px currentColor}

.bh{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.bh .t{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.bh .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--hair),transparent)}
.bh .rt{font-family:var(--mono);font-size:10px;color:var(--ink-3)}

/* ─── пустое состояние ─── */
.empty{text-align:center;padding:34px 20px}
.empty .ic-w{width:52px;height:52px;border-radius:16px;margin:0 auto 14px;display:grid;
  place-items:center;color:var(--ink-3);background:var(--glass-2);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-2)}
.empty h3{font-family:var(--disp);font-size:15px;letter-spacing:-.03em;margin-bottom:7px}
.empty p{font-size:13px;color:var(--ink-2);line-height:1.6;max-width:34ch;margin:0 auto}
.empty .stage{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--cy);padding:5px 10px;
  border-radius:7px;box-shadow:inset 0 0 0 1px currentColor}

/* ─── таблица служебных данных ─── */
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;
  box-shadow:inset 0 -1px 0 var(--hair)}
.kv:last-child{box-shadow:none}
.kv .k{font-size:12.5px;color:var(--ink-2)}
.kv .v{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--ink);text-align:right}
.kv .v.ok{color:var(--mint)}

/* ─── строка приборов ─── */
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;
  border-radius:var(--r-lg);animation:up .5s .04s var(--sp) both}
.cell{padding:13px 11px;background:var(--glass);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);box-shadow:inset 0 1px 0 var(--rim);
  cursor:pointer;transition:transform .26s var(--sp)}
.cell:active{transform:scale(.97)}
.cell .k{font-family:var(--mono);font-size:9px;letter-spacing:.13em;color:var(--ink-3);
  text-transform:uppercase}
.cell .v{font-family:var(--disp);font-size:21px;letter-spacing:-.045em;margin-top:6px;
  line-height:1;min-height:21px}
.cell .v u{text-decoration:none;font-size:10px;color:var(--ink-3);margin-left:1px}
.cell .v .none{color:var(--ink-4)}
.cell .d{font-family:var(--mono);font-size:10px;margin-top:4px;color:var(--mint);font-weight:600}
.cell .d.warn{color:var(--amber)} .cell .d.flat{color:var(--ink-3)}

.spark{width:100%;height:24px;display:block;margin-top:6px;overflow:visible}
.spark path{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:200;stroke-dashoffset:200;animation:trace 1.3s .25s var(--sp) forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.spark-empty{height:24px;margin-top:6px;display:flex;align-items:center;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;color:var(--ink-4)}

/* ─── точка состояния ─── */
.dot.idle{background:var(--ink-4);box-shadow:none;animation:none}
.dot.bad{background:var(--rose);box-shadow:0 0 11px var(--rose)}
.bar .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.stateDot.ok ~ .st{color:var(--mint)}
.stateDot.care ~ .st{color:var(--amber)}
.stateDot.bad ~ .st{color:var(--rose)}
.ph.busy{color:var(--amber)}

/* ─── прогресс заполнения ─── */
.pbar{height:5px;border-radius:99px;background:var(--hair);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--cy),var(--mint));
  transition:width .6s var(--sp)}
.hintline{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:9px}

/* ─── крупное поле веса ─── */
.hero{padding:18px 16px;text-align:center}
.hero .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.field-big{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-top:8px}
.field-big input{width:auto;max-width:180px;background:none;border:0;outline:none;
  font-family:var(--disp);font-size:44px;letter-spacing:-.05em;color:var(--ink);
  text-align:center;padding:0;line-height:1.05}
.field-big input::placeholder{color:var(--ink-4)}
.field-big u{text-decoration:none;font-size:17px;color:var(--ink-3)}

/* ─── сетка полей ─── */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.q{display:block;border-radius:var(--r-md);padding:10px 11px;background:var(--glass-2);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-2);
  transition:box-shadow .25s var(--sp)}
.q:focus-within{box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--cy)}
.q .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.11em;color:var(--ink-3);
  text-transform:uppercase}
.q input{width:100%;background:none;border:0;outline:none;margin-top:4px;padding:0;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.q input::placeholder{color:var(--ink-4);font-weight:400}
.q input.bad{color:var(--rose)}

/* ─── шкала самочувствия ─── */
.scale{display:flex;gap:6px}
.scale i{flex:1;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  font-style:normal;font-family:var(--mono);font-size:14px;color:var(--ink-3);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--rim-2);transition:.26s var(--sp)}
.scale i:active{transform:scale(.9)}
.scale i.on{background:var(--cy);color:var(--cy-ink);font-weight:800;box-shadow:none}

/* ═══════════ ТРЕНИРОВКА ═══════════ */
.launch{padding:15px 14px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(100deg,rgba(92,225,255,.2),rgba(106,255,200,.08));
  box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px rgba(92,225,255,.28),
             0 16px 34px -20px rgba(92,225,255,.7);cursor:pointer;
  transition:transform .26s var(--sp)}
.launch:active{transform:scale(.975)}
[data-theme=light] .launch{background:linear-gradient(100deg,rgba(0,150,185,.16),rgba(0,180,140,.1))}
.launch .bx{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(92,225,255,.16);box-shadow:inset 0 0 0 1px rgba(92,225,255,.35);color:var(--cy)}
.launch .a{font-size:14px;font-weight:800}
.launch .b{font-family:var(--mono);font-size:10px;letter-spacing:.07em;color:var(--ink-2);
  margin-top:2px;text-transform:uppercase}

.ex{padding:12px 13px}
.ex .top{display:flex;gap:11px;align-items:center;cursor:pointer}
.ex .idx{width:27px;height:27px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--rim-2)}
.ex .nm{font-size:13px;font-weight:700;line-height:1.3}
.ex .mt{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);margin-top:2px;letter-spacing:.05em}
.ex.done .idx{background:rgba(106,255,200,.15);color:var(--mint);
  box-shadow:inset 0 0 0 1px rgba(106,255,200,.26)}
.ex.now{background:var(--glass-2);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px rgba(92,225,255,.3),
             0 18px 36px -20px rgba(92,225,255,.5)}
.ex.now .idx{background:var(--cy);color:var(--cy-ink);font-weight:800;box-shadow:0 0 16px -3px var(--cy)}

.tbl{margin-top:11px;font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums}
.tbl .hr{display:grid;grid-template-columns:18px 1fr 1fr 36px;gap:6px;font-size:8.5px;
  letter-spacing:.13em;color:var(--ink-4);text-transform:uppercase;padding-bottom:6px;
  box-shadow:inset 0 -1px 0 var(--hair)}
.tr{display:grid;grid-template-columns:18px 1fr 1fr 36px;gap:6px;padding:7px 0;
  box-shadow:inset 0 -1px 0 var(--hair);animation:up .35s var(--sp) both}
.tr:last-child{box-shadow:none}
.tr .i{color:var(--ink-4)}
.tr .r{text-align:right;color:var(--mint);font-weight:600}
.tr.empty,.tr.empty .r{color:var(--ink-4)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.st{border-radius:var(--r-md);padding:8px 7px 9px;text-align:center;background:var(--glass-2);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-2)}
.st .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:var(--ink-3);
  text-transform:uppercase}
.st .rw{display:flex;align-items:center;justify-content:space-between;margin-top:5px}
.st .v{font-family:var(--disp);font-size:18px;letter-spacing:-.05em;min-width:40px}
.sb{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;cursor:pointer;
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rim-2);flex:0 0 auto;user-select:none;
  font-size:17px;line-height:1;font-weight:600;
  transition:transform .24s var(--sp),background .16s,color .16s}
.sb:active{transform:scale(.84);background:var(--cy);color:var(--cy-ink)}

.btn.fin{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rim-2);
  font-weight:700;margin-top:12px}
.tip{display:flex;gap:8px;align-items:flex-start;margin-top:11px;padding:10px 11px;
  border-radius:var(--r-sm);background:rgba(92,225,255,.09);
  box-shadow:inset 0 0 0 1px rgba(92,225,255,.2);color:var(--cy);font-size:11.5px;line-height:1.5}
[data-theme=light] .tip{background:rgba(0,119,143,.1)}
.tip b{font-weight:800}

/* таймер отдыха */
.rest{padding:15px 14px;display:flex;align-items:center;gap:14px;
  background:rgba(255,192,97,.1);box-shadow:inset 0 1px 0 var(--rim),
    inset 0 0 0 1px rgba(255,192,97,.3),0 16px 34px -20px rgba(255,192,97,.5)}
[data-theme=light] .rest{background:rgba(154,90,0,.1)}
.rest .rw{position:relative;width:54px;height:54px;flex:0 0 auto}
.rest svg{transform:rotate(-90deg)}
.rest .tr2{stroke:var(--hair)}
.rest .vl2{stroke:var(--amber);stroke-linecap:round;stroke-dasharray:144;
  transition:stroke-dashoffset 1s linear}
.rest .cn{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);
  font-size:13px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}
.rest .a{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--amber);font-weight:700}
.rest .b{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.45}
.rest .skip{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);padding:9px 11px;border-radius:9px;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--rim-2);flex:0 0 auto}

/* ═══════════ ТРЕНЕР ═══════════ */
.report-lead{font-size:14px;line-height:1.62;color:var(--ink)}
.report-body{font-size:13.5px;line-height:1.68;color:var(--ink-2)}
.more{display:flex;align-items:center;gap:6px;margin-top:12px;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.09em;color:var(--cy);text-transform:uppercase;
  font-weight:600;cursor:pointer}

.msg{max-width:84%;padding:11px 14px;border-radius:var(--r-lg);margin-bottom:8px;font-size:13.5px;
  line-height:1.6;animation:up .45s var(--sp) both;word-wrap:break-word}
.msg.me{margin-left:auto;background:linear-gradient(120deg,var(--cy),rgba(106,255,200,.85));
  color:var(--cy-ink);border-bottom-right-radius:6px;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.msg.ai{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  color:var(--ink-2);border-bottom-left-radius:6px;
  box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-2)}
.typing{display:flex;gap:5px;padding:15px 16px;width:auto;max-width:70px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:bob 1.3s infinite}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes bob{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.qq{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.qq span{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:8px 12px;
  border-radius:99px;color:var(--ink-3);cursor:pointer;box-shadow:inset 0 0 0 1px var(--rim-2);
  transition:.26s var(--sp)}
.qq span:active{transform:scale(.94);color:var(--cy)}

.comp{position:fixed;left:16px;right:16px;bottom:calc(90px + var(--safe-b));z-index:25;display:flex;
  align-items:center;gap:10px;padding:8px 8px 8px 15px;border-radius:var(--r-lg);
  background:var(--tab-fill);backdrop-filter:var(--tab-blur);-webkit-backdrop-filter:var(--tab-blur);
  box-shadow:inset 0 1px 0 var(--tab-rim),inset 0 0 0 1px var(--tab-ring),var(--tab-shade)}
.comp input{flex:1;background:none;border:0;outline:none;font-family:var(--sans);
  font-size:14px;color:var(--ink);padding:8px 0}
.comp input::placeholder{color:var(--ink-4)}
.comp input:disabled{opacity:.5}
.sendBtn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;
  cursor:pointer;color:var(--cy-ink);background:linear-gradient(120deg,var(--cy),var(--mint));
  transition:transform .26s var(--sp)}
.sendBtn:active{transform:scale(.88)}
/* Переписка прижимается к низу, как в любом мессенджере: пустое поле должно
   быть сверху, а не под последним сообщением. */
#v4{padding-bottom:calc(160px + var(--safe-b))}
#v4.on{display:flex;flex-direction:column}
#msgs{margin-top:auto}

/* ═══════════ РАЗДЕЛЫ ВКЛАДКИ «ТЕЛО» ═══════════ */
.seg2{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;margin-bottom:10px;
  border-radius:var(--r-md);background:var(--glass);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-2)}
.seg2 span{text-align:center;padding:9px 4px;border-radius:10px;cursor:pointer;
  font-size:12px;font-weight:700;color:var(--ink-3);transition:.28s var(--sp)}
.seg2 span.on{background:var(--cy);color:var(--cy-ink)}
.seg2 span:active{transform:scale(.94)}

.macro{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;
  font-size:13px;color:var(--ink-2)}
.macro b{font-family:var(--mono);color:var(--ink);font-size:13px}
.q .qv{font-family:var(--disp);font-size:19px;letter-spacing:-.04em;margin-top:5px}
.mealtitle{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:10px}
.mealgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mealgrid .q{padding:8px 7px}
.mealgrid .q .k{font-size:8px}
.mealgrid input{font-size:13px}

.photorow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.photoslot{height:74px;border-radius:var(--r-md);display:grid;place-items:center;cursor:pointer;
  background:var(--glass-2);box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--rim-2);
  font-size:11.5px;color:var(--ink-3);transition:.28s var(--sp)}
.photoslot:active{transform:scale(.95)}
.photoslot.busy{opacity:.5}
.photoslot.done{box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--mint);color:var(--mint)}

.uploadbtn{display:block;text-align:center;cursor:pointer}
.rules{margin:10px 0 0;padding:0;list-style:none}
.rules li{font-size:12.5px;color:var(--ink-2);line-height:1.5;padding-left:15px;
  position:relative;margin-bottom:7px}
.rules li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;
  border-radius:50%;background:var(--cy)}

.alertrow{padding:10px 0;box-shadow:inset 0 -1px 0 var(--hair)}
.alertrow:last-child{box-shadow:none}
.alertrow .an{font-size:13px;font-weight:600}
.alertrow .an b{font-family:var(--mono);color:var(--amber)}
.alertrow.alarm .an b{color:var(--rose)}
.alertrow .am{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.45}

.labrow{display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:baseline;
  padding:7px 0;box-shadow:inset 0 -1px 0 var(--hair);font-size:12.5px}
.labrow:last-child{box-shadow:none}
.labrow .lv{font-family:var(--mono);font-weight:700;color:var(--amber)}
.labrow.low .lv{color:var(--cy)}
.labrow .lr{font-family:var(--mono);font-size:10px;color:var(--ink-4)}

.hintline.good,.good{color:var(--mint)}
.hintline.bad,.bad{color:var(--rose)}
.rt.bad{color:var(--rose)}

/* ═══════════ ВЕРСИЯ И ОБНОВЛЕНИЕ ═══════════ */
.verline{display:flex;align-items:center;gap:12px;justify-content:space-between}
.vermeta{font-size:12.5px;color:var(--ink-3);line-height:1.45}
.vermeta.warn{color:var(--amber)}

/* Плашка обновления. Висит над таб-баром, но не перекрывает его: пропустить
   выход новой версии не страшно, а вот потерять кнопку навигации — да. */
.updbar{position:fixed;left:16px;right:16px;bottom:calc(88px + var(--safe-b));z-index:40;
  display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;border-radius:var(--r-lg);
  background:linear-gradient(100deg,rgba(92,225,255,.22),rgba(106,255,200,.12));
  backdrop-filter:var(--tab-blur);-webkit-backdrop-filter:var(--tab-blur);
  box-shadow:inset 0 1px 0 var(--tab-rim),inset 0 0 0 1px rgba(92,225,255,.3),var(--tab-shade);
  animation:up .5s var(--sp) both;font-size:13px;font-weight:600}
.updbar span{flex:1}
.updbar button{border:0;cursor:pointer;padding:10px 16px;border-radius:12px;
  font-family:var(--sans);font-size:13px;font-weight:800;color:var(--cy-ink);
  background:linear-gradient(100deg,var(--cy),var(--mint));
  transition:transform .26s var(--sp)}
.updbar button:active{transform:scale(.94)}
.updbar button:disabled{opacity:.6}

/* ─── таб-бар: прозрачность как в Telegram ─── */
.tabs{position:fixed;left:16px;right:16px;bottom:calc(16px + var(--safe-b));height:64px;z-index:30;
  display:grid;grid-template-columns:repeat(5,1fr);align-items:center;border-radius:22px;
  background:var(--tab-fill);backdrop-filter:var(--tab-blur);
  -webkit-backdrop-filter:var(--tab-blur);
  box-shadow:inset 0 1px 0 var(--tab-rim),inset 0 0 0 1px var(--tab-ring),var(--tab-shade);
  overflow:hidden}
.seg{position:absolute;left:0;top:6px;bottom:6px;width:20%;border-radius:17px;
  background:var(--seg-fill);box-shadow:inset 0 0 0 1px var(--seg-ring);
  transition:transform .46s var(--sp)}
.tb{display:grid;place-items:center;color:var(--ink-4);cursor:pointer;height:100%;
  position:relative;z-index:2;transition:color .3s var(--sp)}
.tb.on{color:var(--cy)}
.tb:active{transform:scale(.9)}
.ic{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.65;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ic.s{width:14px;height:14px} .ic.l{width:26px;height:26px}

/* ─── кнопки ─── */
.btn{width:100%;padding:15px;border:0;border-radius:var(--r-md);cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:800;color:var(--cy-ink);
  background:linear-gradient(100deg,var(--cy),var(--mint));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 14px 30px -16px rgba(92,225,255,.85);
  transition:transform .26s var(--sp)}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.45}
.btn.gh{background:transparent;color:var(--ink-2);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--rim-2)}

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