/* Композиция: телефонный экран, фиксированная нижняя панель на 5 вкладок, сверху крупный логотип. Тёмно-синий иней, красного нет. */
:root{
  --bg:#101b30; --bg2:#1a2943; --card:#1f2f4c; --line:#34507c;
  --ice:#8fe3ff; --ice2:#d9f6ff; --text:#eaf6ff; --mute:#a6b8d2; --warn:#ffd36b;
  --bronze:#cd7f32; --silver:#c9d3df; --gold:#ffc83d; --diamond:#7df3ff;
  --disp:'Unbounded','Arial Black',sans-serif; --body:'Manrope',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font:400 15px/1.45 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
#app{max-width:460px;margin:0 auto;min-height:100%;position:relative;padding-bottom:92px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
input,select{font:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;width:100%;min-width:0}
h1,h2,h3{font-family:var(--disp);margin:0;text-wrap:balance}
h2{font-size:17px;font-weight:700;letter-spacing:.02em}
.logo{font-family:var(--disp);font-weight:900;font-size:22px;line-height:1.05;letter-spacing:.01em;
  background:linear-gradient(100deg,#fff,var(--ice) 60%,#4aa8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:14px 0 10px;background:linear-gradient(var(--bg) 70%,transparent)}
.demo{font-size:11px;color:var(--warn);border:1px dashed var(--warn);border-radius:8px;padding:2px 8px;white-space:nowrap}
.hero{border-radius:22px;padding:20px;margin:6px 0 18px;position:relative;overflow:hidden;
  background:radial-gradient(120% 140% at 85% 0%,#1b4f9c 0%,#0d2350 45%,#07122b 100%);border:1px solid var(--line)}
.hero:after{content:"";position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(143,227,255,.35),transparent 65%)}
.hero .hi{font-size:13px;color:var(--mute)}
.hero .nick{font-family:var(--disp);font-size:20px;font-weight:700;margin-top:4px;word-break:break-word}
section{margin:0 0 22px}
.sh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.link{color:var(--ice);font-weight:600;font-size:13px}
.btn{display:block;width:100%;text-align:center;padding:14px 16px;border-radius:14px;font-weight:800;
  background:linear-gradient(180deg,var(--ice2),var(--ice));color:#04204a;box-shadow:0 6px 22px rgba(143,227,255,.22)}
.btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.btn.ghost{background:var(--card);color:var(--ice);box-shadow:none;border:1px solid var(--line)}
.btn.sm{padding:9px 12px;font-size:13px;border-radius:11px}
.row{display:flex;gap:10px;align-items:center}
.row>*{min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px}
.hscroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
.hscroll .pc{flex:0 0 150px;scroll-snap-align:start}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:8px;position:relative}
.pc.out{filter:grayscale(1);opacity:.55}
.ph{aspect-ratio:3/4;border-radius:12px;display:grid;place-items:center;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#35557f,#1a2740)}
.ph svg{width:70%;height:90%}
.pn{font-weight:800;font-size:14px;line-height:1.2}
.pm{color:var(--mute);font-size:12px}
.pp{font-family:var(--disp);font-weight:700;font-size:14px}
.badge{position:absolute;left:8px;top:8px;z-index:2;font-size:10px;font-weight:800;padding:3px 8px;border-radius:99px;color:#101820;letter-spacing:.03em}
.heart{position:absolute;right:6px;top:6px;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(5,11,26,.65);display:grid;place-items:center;font-size:17px;color:var(--ice)}
.stock{font-size:12px;font-weight:800;color:var(--mute);text-align:center;padding:10px 0}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px}
.chip{flex:0 0 auto;padding:7px 14px;border-radius:99px;border:1px solid var(--line);background:var(--bg2);font-size:13px;font-weight:600;color:var(--mute)}
.chip.on{background:var(--ice);color:#04204a;border-color:var(--ice)}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:10;background:rgba(16,27,48,.96);border-top:1px solid var(--line);
  padding:8px max(8px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
.nav div{max-width:460px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.nav button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:11px;font-weight:600;color:var(--mute);position:relative}
.nav button.on{color:var(--ice)}
.nav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cnt{position:absolute;top:0;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:9px;background:var(--ice);color:#04204a;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 4px}
.star{position:absolute;right:12px;top:10px;color:var(--warn);font-size:18px}
.big{font-family:var(--disp);font-weight:900;font-size:44px;line-height:1;color:var(--ice2)}
.small{font-size:11px;color:var(--mute)}
.lv{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.lv:last-child{border:0}
.dot{width:14px;height:14px;border-radius:50%}
.qty{display:flex;align-items:center;gap:10px}
.qty button{width:30px;height:30px;border-radius:50%;background:var(--bg2);border:1px solid var(--line);font-weight:800;color:var(--ice)}
.tot{display:flex;justify-content:space-between;padding:4px 0}
.tot.b{font-family:var(--disp);font-weight:700;font-size:17px;padding-top:10px;border-top:1px solid var(--line);margin-top:6px}
.login{min-height:88vh;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:30px 0;text-align:center;
  background:radial-gradient(90% 60% at 50% 0%,#17479a 0%,transparent 70%)}
.hero{background-blend-mode:normal}
.avatar{width:170px;height:170px;border-radius:50%;margin:0 auto 6px;display:block;object-fit:cover;border:2px solid var(--ice);box-shadow:0 0 50px rgba(143,227,255,.3)}
label.chk{text-align:left;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--mute)}
label.chk input{width:20px;height:20px;margin:0;flex:0 0 auto;accent-color:var(--ice)}
.fld{display:grid;gap:6px;margin-bottom:10px}
.fld span{font-size:12px;color:var(--mute)}
.seg{display:flex;gap:6px;margin-bottom:12px}
.seg button{flex:1;padding:10px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-weight:800;color:var(--mute)}
.seg button.on{background:var(--ice);color:#04204a}
.steps{display:grid;gap:6px;margin-top:8px}
.st{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--mute)}
.st i{width:10px;height:10px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto}
.st.on{color:var(--ice2);font-weight:800}.st.on i{background:var(--ice);border-color:var(--ice)}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);background:var(--ice);color:#04204a;padding:10px 16px;border-radius:12px;font-weight:800;z-index:20}
.back{color:var(--ice);font-weight:700;padding:6px 0}
.note{border:1px dashed var(--warn);color:var(--warn);border-radius:12px;padding:10px 12px;font-size:13px}
@media (prefers-reduced-motion:no-preference){.pc,.btn{transition:transform .15s}.btn:active,.pc:active{transform:scale(.98)}}
.row input{flex:1 1 auto}.row .btn.sm{flex:0 0 auto}