/* ===== Темы: всё цветное — через переменные. Золото/зелёный/красный одинаковы во всех темах. ===== */
:root, :root[data-theme="meow"] {
  --bg1:#2B0F58; --bg2:#0C0518; --bg3:#07040F;
  --a:#9B4DFF; --a2:#B98CFF; --a3:#C9A8FF; --a-soft:rgba(155,77,255,.16); --a-soft2:rgba(155,77,255,.3);
  --bd1:#8A45E6; --bd2:#31175F; --p1:#1B0E36; --p2:#0C0617;
  --tx:#F3EEFF; --tx2:#D6CFE8; --mu:#8F7DB5; --mu2:#B9AFC9;
  --btn1:#A455FF; --btn2:#6B2BD6; --btn-tx:#fff; --glow:rgba(139,61,255,.3);
  --gold:#FFC247; --green:#3DDC97; --red:#FF5A6A; --orange:#FF8A1F;
  --chrome1:#FFFFFF; --chrome2:#D9CCF2; --chrome3:#9C8AC4;
}
:root[data-theme="ct"] {
  --bg1:#0F3270; --bg2:#06142C; --bg3:#040B18;
  --a:#2F8CFF; --a2:#7DB8FF; --a3:#A9D0FF; --a-soft:rgba(47,140,255,.16); --a-soft2:rgba(47,140,255,.3);
  --bd1:#3C7CE0; --bd2:#17305F; --p1:#0F2244; --p2:#08101F;
  --tx:#EDF4FF; --tx2:#C9D8EE; --mu:#7E96BE; --mu2:#A9BAD6;
  --btn1:#3A98FF; --btn2:#1B5FC9; --btn-tx:#fff; --glow:rgba(47,140,255,.3);
  --chrome1:#FFFFFF; --chrome2:#CFE2FA; --chrome3:#8DAAD6;
}
:root[data-theme="t"] {
  --bg1:#55290A; --bg2:#1C0D03; --bg3:#100702;
  --a:#FF8A1F; --a2:#FFB766; --a3:#FFCF99; --a-soft:rgba(255,138,31,.16); --a-soft2:rgba(255,138,31,.3);
  --bd1:#E67E22; --bd2:#6A3A0E; --p1:#2B1707; --p2:#150B03;
  --tx:#FFF3E6; --tx2:#EBD7BF; --mu:#BD9A78; --mu2:#D6BC9F;
  --btn1:#FFA040; --btn2:#D96A00; --btn-tx:#2A1004; --glow:rgba(255,138,31,.3);
  --chrome1:#FFFFFF; --chrome2:#FFE3C2; --chrome3:#D9A56D;
}
:root[data-theme="bw"] {
  --bg1:#000; --bg2:#000; --bg3:#000;
  --a:#FFFFFF; --a2:#FFFFFF; --a3:#E6E6E6; --a-soft:rgba(255,255,255,.08); --a-soft2:rgba(255,255,255,.55);
  --bd1:#FFFFFF; --bd2:#8C8C8C; --p1:#0B0B0B; --p2:#000;
  --tx:#FFFFFF; --tx2:#DADADA; --mu:#9A9A9A; --mu2:#BDBDBD;
  --btn1:#FFFFFF; --btn2:#E2E2E2; --btn-tx:#000; --glow:rgba(255,255,255,.12);
  --gold:#D4AE55; --green:#62C494; --red:#E06873; --orange:#E0A25A;
  --chrome1:#FFFFFF; --chrome2:#EDEDED; --chrome3:#BDBDBD;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--bg3); }
body { font-family:'Exo 2',system-ui,sans-serif; color:var(--tx); font-size:14px; overscroll-behavior:none; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font-family:inherit; font-size:inherit; color:inherit; }
::-webkit-scrollbar { width:0; height:0; }

#app { position:fixed; inset:0; display:flex; flex-direction:column; max-width:520px; margin:0 auto;
  background:radial-gradient(120% 45% at 50% 0%, var(--bg1) 0%, var(--bg2) 58%, var(--bg3) 100%); }
#view { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:0 16px 20px; -webkit-overflow-scrolling:touch; }
#view > * + * { margin-top:12px; }
#view > .hd { margin-top:0; }

/* ===== Навигация ===== */
#tabs { flex:0 0 auto; display:flex; border-top:1px solid var(--bd2); background:var(--p2); padding-bottom:env(safe-area-inset-bottom); }
#tabs[hidden] { display:none; }
#tabs a { flex:1; position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 0 8px;
  font-size:9.5px; font-weight:800; letter-spacing:.8px; color:var(--mu); cursor:pointer; }
#tabs a.on { color:var(--a2); }
#tabs a.on::before { content:''; position:absolute; top:0; left:25%; right:25%; height:2px; background:var(--a); box-shadow:0 0 8px var(--a); }
#tabs svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.badge { position:absolute; top:4px; left:calc(50% + 7px); min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--orange); color:#2A1004; font-size:10px; font-weight:900; display:flex; align-items:center; justify-content:center; }

/* ===== Заголовок ===== */
.hd { display:flex; align-items:center; gap:10px; min-height:62px; padding-top:env(safe-area-inset-top); }
.hd h1 { margin:0; flex:1; min-width:0; font-size:22px; font-weight:900; font-style:italic; letter-spacing:1px; text-transform:uppercase;
  background:linear-gradient(180deg,var(--chrome1) 0%,var(--chrome2) 55%,var(--chrome3) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hd .back { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--a-soft2); background:var(--a-soft); cursor:pointer; flex:0 0 auto; }
.hd .back svg { width:18px; height:18px; stroke:var(--a3); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
h2.sec { margin:6px 0 0; font-size:11px; font-weight:800; letter-spacing:1.5px; color:var(--mu); text-transform:uppercase; }

/* ===== Панели со срезанными углами ===== */
.pnl { filter:drop-shadow(0 0 7px var(--glow)); }
.pnl > .o { padding:1px; background:linear-gradient(135deg,var(--bd1),var(--bd2)); clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
.pnl > .o > .i { padding:13px 14px; background:linear-gradient(160deg,var(--p1),var(--p2)); clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px); }
.pnl.tap { cursor:pointer; }
.pnl.gold > .o { background:linear-gradient(135deg,var(--gold),#7a5a1a); }
.pnl.warn > .o { background:linear-gradient(135deg,var(--orange),#7a3a0a); }
.pnl.bad > .o { background:linear-gradient(135deg,var(--red),#6a1a24); }
.pnl.flat { filter:none; }

/* ===== Кнопки ===== */
.btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:44px; padding:0 16px; border:0; cursor:pointer;
  font-size:13.5px; font-weight:900; font-style:italic; letter-spacing:.8px; text-transform:uppercase;
  background:linear-gradient(135deg,var(--btn1),var(--btn2)); color:var(--btn-tx);
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px); }
.btn:active { filter:brightness(.88); }
.btn[disabled] { opacity:.45; pointer-events:none; }
.btn.ghost { background:var(--a-soft); color:var(--a3); box-shadow:inset 0 0 0 1px var(--a-soft2); }
:root[data-theme="bw"] .btn.ghost { color:#fff; box-shadow:inset 0 0 0 1px #fff; background:#000; }
.btn.danger { background:rgba(255,90,106,.14); color:var(--red); box-shadow:inset 0 0 0 1px rgba(255,90,106,.55); }
.btn.sm { min-height:36px; font-size:12px; padding:0 12px; }
.btn.inline { width:auto; }
.row { display:flex; gap:8px; align-items:center; }
.row > .btn { flex:1; }
.col { display:flex; flex-direction:column; gap:10px; }
.grow { flex:1; min-width:0; }
.sp { height:4px; }

/* ===== Чипы, теги ===== */
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:1px solid var(--a-soft2); background:rgba(255,255,255,.04);
  font-size:11.5px; font-weight:700; color:var(--mu2); cursor:pointer; user-select:none; }
.chip.on { background:var(--a-soft2); border-color:var(--a2); color:#fff; font-weight:800; }
:root[data-theme="bw"] .chip.on { background:#fff; color:#000; }
.tag { display:inline-block; padding:3px 9px; background:var(--a-soft); border:1px solid var(--a-soft2); font-size:10.5px; font-weight:700; color:var(--a3); }
:root[data-theme="bw"] .tag { color:#fff; }
.tag.gold { background:rgba(255,194,71,.12); border-color:rgba(255,194,71,.5); color:var(--gold); }
.tag.green { background:rgba(61,220,151,.12); border-color:rgba(61,220,151,.5); color:var(--green); }
.tag.red { background:rgba(255,90,106,.12); border-color:rgba(255,90,106,.5); color:var(--red); }

/* ===== Текст ===== */
.t-mu { color:var(--mu); } .t-mu2 { color:var(--mu2); } .t-gold { color:var(--gold); } .t-green { color:var(--green); } .t-red { color:var(--red); } .t-a { color:var(--a2); }
.small { font-size:11.5px; } .xs { font-size:10.5px; } .b { font-weight:800; } .it { font-style:italic; } .c { text-align:center; }
.lbl { font-size:10.5px; font-weight:800; letter-spacing:1.2px; color:var(--mu); text-transform:uppercase; margin:2px 0 6px; }
.lead { font-size:13px; line-height:1.45; color:var(--tx2); }
.num { font-weight:900; font-style:italic; }
.big { font-size:30px; font-weight:900; font-style:italic; }
.pts { color:var(--gold); font-weight:900; font-style:italic; }

/* ===== Аватар ===== */
.av { position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:46px; height:46px;
  background:linear-gradient(135deg,var(--btn1),var(--btn2)); color:var(--btn-tx); font-size:15px; font-weight:900; font-style:italic;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); }
.av img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.avw { position:relative; flex:0 0 auto; }
.avw .live { position:absolute; right:-2px; bottom:-2px; width:11px; height:11px; border-radius:50%; background:var(--green); border:2px solid var(--p2); box-shadow:0 0 8px var(--green); }
.av.xl { width:84px; height:84px; font-size:28px; clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px); }
.av.sm { width:36px; height:36px; font-size:12px; }

/* ===== Формы ===== */
.fld { display:flex; flex-direction:column; gap:5px; }
.in, textarea.in, select.in { width:100%; min-height:44px; padding:0 12px; background:rgba(255,255,255,.05); border:1px solid var(--a-soft2); outline:none; color:var(--tx); }
textarea.in { padding:10px 12px; min-height:90px; resize:none; line-height:1.4; }
.in:focus { border-color:var(--a2); box-shadow:0 0 0 1px var(--a2); }
.in::placeholder { color:var(--mu); }
select.in option { background:#111; color:#fff; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sw { position:relative; flex:0 0 auto; width:46px; height:26px; border:1px solid var(--a-soft2); background:rgba(255,255,255,.06); cursor:pointer; }
.sw::after { content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--mu); transition:.15s; }
.sw.on { background:var(--a-soft2); border-color:var(--a2); }
.sw.on::after { left:23px; background:var(--a2); }
:root[data-theme="bw"] .sw.on::after { background:#fff; }
.line { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.line:last-child { border-bottom:0; }
.line.tap { cursor:pointer; }
.chev { width:16px; height:16px; stroke:var(--mu); fill:none; stroke-width:2.2; flex:0 0 auto; }

/* ===== Табы-сегменты ===== */
.seg { display:flex; border:1px solid var(--a-soft2); }
.seg > div { flex:1; text-align:center; padding:9px 4px; font-size:12px; font-weight:800; color:var(--mu2); cursor:pointer; }
.seg > div.on { background:var(--a-soft2); color:#fff; }
:root[data-theme="bw"] .seg > div.on { background:#fff; color:#000; }

/* ===== Прочее ===== */
.stat { text-align:center; padding:10px 6px; border:1px solid var(--a-soft2); background:var(--a-soft); }
.stat b { display:block; font-size:19px; font-weight:900; font-style:italic; }
.stat span { font-size:9.5px; font-weight:800; letter-spacing:1px; color:var(--mu); text-transform:uppercase; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bar { height:8px; background:rgba(255,255,255,.08); }
.bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--btn2),var(--btn1)); }
.match { padding:4px 9px; background:rgba(255,194,71,.12); border:1px solid rgba(255,194,71,.5); text-align:center; }
.match small { display:block; font-size:8.5px; font-weight:800; letter-spacing:1px; color:#E3B04A; }
.match b { font-size:13px; font-weight:900; font-style:italic; color:var(--gold); }
.banner { height:120px; background:linear-gradient(135deg,var(--btn2),var(--bg1)) center/cover; margin:0 -16px; }
.empty { text-align:center; padding:34px 10px; }
.empty h3 { margin:12px 0 6px; font-size:16px; font-weight:900; font-style:italic; letter-spacing:.8px; text-transform:uppercase; }
.empty p { margin:0 auto 16px; max-width:290px; font-size:12.5px; line-height:1.45; color:var(--mu2); }
.cat { width:96px; height:96px; margin:0 auto; opacity:.9; }
.loader { display:flex; justify-content:center; padding:60px 0; }
.loader i { width:30px; height:30px; border:3px solid var(--a-soft2); border-top-color:var(--a2); border-radius:50%; animation:sp .8s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.skel { height:110px; background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04)); background-size:200% 100%; animation:sh 1.2s infinite; }
@keyframes sh { to { background-position:-200% 0; } }
.itemimg { height:150px; background:rgba(255,255,255,.05) center/contain no-repeat; }
.shopgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.shopgrid .itemimg { height:100px; margin-bottom:8px; }
.mapimg { height:130px; background:linear-gradient(135deg,var(--btn2),var(--bg1)) center/cover; margin:-13px -14px 10px; }
.shot { width:100%; max-height:420px; object-fit:contain; background:#000; display:block; }
.place { width:28px; text-align:center; font-weight:900; font-style:italic; font-size:16px; color:var(--mu2); }
.place.p1 { color:var(--gold); } 
hr.d { border:0; border-top:1px solid rgba(255,255,255,.08); width:100%; margin:4px 0; }

/* ===== Слой: тосты и окна ===== */
#layer .toast { position:fixed; left:50%; bottom:86px; transform:translateX(-50%); max-width:86%; padding:11px 16px; background:var(--p1);
  border:1px solid var(--a2); color:var(--tx); font-size:12.5px; font-weight:700; z-index:50; box-shadow:0 4px 20px rgba(0,0,0,.5); animation:fi .2s; }
#layer .toast.err { border-color:var(--red); }
#layer .ov { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.66); display:flex; align-items:flex-end; justify-content:center; animation:fi .15s; }
#layer .sheet { width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(160deg,var(--p1),var(--p2)); border-top:2px solid var(--a); }
#layer .sheet h3 { margin:0 0 6px; font-size:17px; font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:.8px; }
#layer .sheet p { margin:0 0 14px; font-size:13px; line-height:1.45; color:var(--tx2); }
@keyframes fi { from { opacity:0; } }
input[type=file] { display:none; }
.btn.disabled-look { opacity:.5; }
.row > .btn.inline { flex:0 0 auto; }
.row > .in { flex:1; min-width:0; }
.btn { white-space:nowrap; }

/* ===== v2: раскладка как в макете ===== */
h2.sec { display:flex; align-items:center; gap:9px; margin:8px 0 0; font-size:11.5px; font-weight:800; letter-spacing:2px; color:var(--mu2); text-transform:uppercase; }
h2.sec::before { content:''; width:22px; height:3px; background:linear-gradient(90deg,var(--btn2),var(--btn1)); flex:0 0 auto; }
h2.sec.green::before { background:var(--green); } h2.sec.green { color:var(--green); }
.hd .logo { width:34px; height:34px; border-radius:50%; overflow:hidden; border:2px solid var(--a-soft2); flex:0 0 auto; }
.hd .logo img { width:100%; height:100%; object-fit:cover; display:block; }
.hd .ibtn { position:relative; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; }
.hd .ibtn svg, .ibtn svg { width:21px; height:21px; stroke:var(--a3); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:root[data-theme="bw"] .hd .ibtn svg { stroke:#fff; }
.ibtn .badge { top:-2px; left:auto; right:-4px; }
.fbtn { display:flex; align-items:center; gap:6px; height:34px; padding:0 11px; border:1px solid var(--a-soft2); background:var(--a-soft); font-size:12px; font-weight:800; color:var(--tx); cursor:pointer; flex:0 0 auto; }
.fbtn svg { width:15px; height:15px; stroke:var(--a3); fill:none; stroke-width:2.2; stroke-linecap:round; }
.fbtn b { min-width:17px; height:17px; padding:0 4px; display:flex; align-items:center; justify-content:center; background:var(--orange); color:#2A1004; font-size:10px; font-weight:900; border-radius:9px; }
.coin { display:flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--a-soft2); background:var(--a-soft); font-size:15px; font-weight:900; font-style:italic; flex:0 0 auto; }
.coin i { width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFE79A,var(--gold) 55%,#B8841C); flex:0 0 auto; }
.coin small { font-size:10.5px; font-weight:700; font-style:normal; color:var(--mu2); }
.av.ring { width:88px; height:88px; border-radius:50%; clip-path:none; font-size:30px; border:3px solid var(--bg2); box-shadow:0 0 0 2px var(--a2), 0 0 18px var(--glow); }
.av.ring img { border-radius:50%; }
.camb { position:absolute; right:-2px; bottom:-2px; width:28px; height:28px; border-radius:50%; background:var(--btn1); color:var(--btn-tx); display:flex; align-items:center; justify-content:center; border:2px solid var(--bg2); cursor:pointer; }
.camb svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; }
:root[data-theme="bw"] .av:not(:has(img)) { filter:grayscale(1); }
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--green); border:1px solid rgba(61,220,151,.5); background:rgba(61,220,151,.1); }
.pill i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); }
.lvl { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; }
.lvl b { padding:3px 9px; background:rgba(255,255,255,.1); border:1px solid var(--a-soft2); font-size:11px; font-weight:800; }
.hero { position:relative; margin:0 -16px; aspect-ratio:3/1; min-height:112px; background:linear-gradient(135deg,var(--btn2),var(--bg1)) center/cover; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,var(--bg2)); }
.hero .acts { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:16px; right:16px; display:flex; justify-content:space-between; z-index:2; }
.hero .rb { width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.45); border:1px solid var(--a-soft2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.hero .rb svg { width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.who { display:flex; align-items:flex-end; justify-content:space-between; margin-top:-46px; position:relative; z-index:3; gap:10px; }
.who + .nm { margin-top:6px; }
.nm .n { font-size:25px; font-weight:900; font-style:italic; line-height:1.1; }
.nm .m { font-size:12.5px; color:var(--mu2); margin-top:2px; }
.stats3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.st { padding:10px 6px 9px; text-align:center; border:1px solid var(--a-soft2); background:rgba(255,255,255,.03); }
.st small { display:block; font-size:10px; font-weight:800; letter-spacing:1.4px; color:var(--mu2); text-transform:uppercase; }
.st b { display:block; margin-top:3px; font-size:17px; font-weight:900; font-style:italic; }
.tile { padding:10px 12px; background:rgba(255,255,255,.04); }
.tile small { display:block; font-size:11px; color:var(--mu2); }
.tile b { display:block; margin-top:2px; font-size:22px; font-weight:900; font-style:italic; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.seg { border:0; border-bottom:1px solid var(--a-soft2); }
.seg > div { padding:11px 4px; font-size:12.5px; color:var(--mu2); border-bottom:2px solid transparent; margin-bottom:-1px; }
.seg > div.on { background:var(--a-soft); color:var(--tx); border-bottom-color:var(--a2); }
:root[data-theme="bw"] .seg > div.on { background:var(--a-soft); color:#fff; border-bottom-color:#fff; }
.seg > div i { font-style:normal; display:inline-flex; min-width:17px; height:17px; padding:0 4px; margin-left:5px; align-items:center; justify-content:center; background:var(--orange); color:#2A1004; font-size:10px; font-weight:900; border-radius:9px; vertical-align:middle; }
.quote { padding:8px 10px; background:rgba(255,255,255,.05); font-size:12.5px; line-height:1.4; color:var(--tx2); }
.cta { position:sticky; bottom:-20px; margin:0 -16px; padding:12px 16px 16px; background:linear-gradient(180deg,transparent,var(--bg3) 35%); z-index:5; }
.note { display:flex; gap:10px; align-items:center; font-size:12px; line-height:1.4; color:var(--tx2); }
.note svg { width:16px; height:16px; stroke:var(--mu2); fill:none; stroke-width:2; flex:0 0 auto; }
.big4 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tl { position:relative; min-height:94px; display:flex; flex-direction:column; justify-content:flex-end; }
.tl .ic { position:absolute; top:0; left:0; width:34px; height:34px; display:flex; align-items:center; justify-content:center; background:var(--a-soft); border:1px solid var(--a-soft2); }
.tl .ic svg { width:18px; height:18px; stroke:var(--a3); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
:root[data-theme="bw"] .tl .ic svg { stroke:#fff; }
.tl .tt { font-size:14px; font-weight:900; font-style:italic; text-transform:uppercase; }
.tl .ss { font-size:11.5px; color:var(--mu2); margin-top:1px; }
.tl .bd { position:absolute; top:0; right:0; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--orange); color:#2A1004; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.findbig { display:flex; align-items:center; justify-content:space-between; }
.findbig .k { font-size:11.5px; font-weight:800; letter-spacing:2px; color:var(--mu2); }
.findbig .t { font-size:28px; font-weight:900; font-style:italic; line-height:1.1; margin-top:2px; }
.arrowb { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--btn1),var(--btn2)); color:var(--btn-tx); clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); flex:0 0 auto; }
.arrowb svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.avstack { display:flex; align-items:center; margin-top:12px; }
.avstack .av { width:30px; height:30px; border-radius:50%; clip-path:none; font-size:10px; margin-right:-8px; border:2px solid var(--p2); }
.avstack span { margin-left:16px; font-size:12.5px; color:var(--mu2); }
.gold-row { border:1px solid rgba(255,194,71,.55); background:linear-gradient(135deg,rgba(255,194,71,.1),rgba(255,138,31,.04)); padding:12px 14px; display:flex; align-items:center; gap:12px; cursor:pointer; clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); }
.gold-row svg.tr { width:24px; height:24px; stroke:var(--gold); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.dash-row { border:1px dashed rgba(255,194,71,.6); padding:12px 14px; display:flex; align-items:center; gap:8px; color:var(--gold); font-weight:800; font-size:13px; cursor:pointer; text-transform:uppercase; }
.dash-row span { flex:1; } .dash-row svg { width:16px; height:16px; stroke:var(--gold); fill:none; stroke-width:2.2; }
.mapthumb { width:62px; height:62px; flex:0 0 auto; background:linear-gradient(135deg,var(--btn2),var(--bg1)) center/cover; display:flex; align-items:center; justify-content:center; border:1px solid var(--a-soft2); }
.mapthumb svg { width:26px; height:26px; stroke:var(--a3); fill:none; stroke-width:1.8; }
.filters-on { display:flex; flex-wrap:wrap; gap:6px; }
.thm { padding:8px; }
.thm .pv { padding:9px; border:1px solid; background:rgba(0,0,0,.35); display:flex; flex-direction:column; gap:5px; }
.thm .pv i { display:block; height:5px; width:38%; } .thm .pv u { display:block; height:22px; border:1px solid; text-decoration:none; }
.thm .pv .r2 { display:flex; gap:5px; } .thm .pv .r2 u { flex:1; height:16px; } .thm .pv em { display:block; height:15px; font-style:normal; font-size:7px; font-weight:900; letter-spacing:1px; text-align:center; line-height:15px; }
.thm .tn { font-size:16px; font-weight:900; font-style:italic; margin-top:9px; } .thm .td { font-size:10.5px; color:var(--mu2); }
.thm.sel { box-shadow:inset 0 0 0 2px var(--a2); }
.chk { position:absolute; top:14px; right:14px; width:24px; height:24px; border-radius:50%; background:var(--a2); color:#000; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; }
.itm .itemimg { height:104px; background-color:rgba(255,255,255,.04); }
.shop2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.price { display:flex; align-items:center; gap:6px; margin-top:8px; }
.price i { width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFE79A,var(--gold) 55%,#B8841C); flex:0 0 auto; }
.price b { font-size:17px; font-weight:900; font-style:italic; color:var(--gold); flex:1; }
.pg { height:4px; background:rgba(255,255,255,.12); margin-top:8px; } .pg i { display:block; height:100%; background:var(--mu); }
.tabs-f { display:flex; gap:6px; }
.pnl.green > .o { background:linear-gradient(135deg,var(--green),#1b5e46); }
.av { color:#fff; }

.hero.pr .acts { top:auto; bottom:30px; left:auto; right:16px; justify-content:flex-end; gap:8px; }
.hero.pr .rb { width:32px; height:32px; background:rgba(0,0,0,.55); }
.hero.pr .rb svg { width:15px; height:15px; }
.hero { background-size:cover; background-position:center; }

/* верх профиля: баннер под аватаром и ником */
.pt { position:relative; margin:0 -16px; padding:14px 16px 14px; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(135deg,var(--btn2),var(--bg1)) center/cover; }
.pt::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.28) 45%,var(--bg2) 100%); }
.pt > * { position:relative; }
.pt .acts { position:absolute; top:10px; left:16px; right:16px; display:flex; justify-content:space-between; gap:8px; z-index:2; }
.pt .acts.r { justify-content:flex-end; }
.pt .rb { width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid var(--a-soft2); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.pt .rb svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pt .idrow { display:flex; gap:14px; align-items:flex-end; }
.pt .av { width:84px; height:84px; font-size:30px; }
.pt .nm { padding-bottom:4px; min-width:0; }
.pt .nm .n { text-shadow:0 2px 8px #000a; overflow-wrap:anywhere; }
.pt .nm .m { color:#e5dcff; text-shadow:0 1px 6px #000a; margin-top:3px; }
.pt .sp { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.pt .lvl { gap:6px; font-size:11px; }
.pt .lvl b { padding:2px 6px; font-size:10px; }
.pt .pill { font-size:10px; padding:3px 8px; letter-spacing:.5px; }
.pt + * { margin-top:12px; }
.fav { width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; }
.fav svg { width:22px; height:22px; stroke:var(--mu2); fill:none; stroke-width:2; stroke-linejoin:round; }
.fav.on svg { stroke:var(--gold); fill:var(--gold); }
.tag.ct { color:var(--green); border-color:rgba(61,220,151,.5); background:rgba(61,220,151,.08); }

/* отряды */
.pips { display:inline-flex; gap:3px; flex:0 0 auto; }
.pips i { width:9px; height:14px; background:rgba(255,255,255,.12); border:1px solid var(--a-soft2); clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px); }
.pips i.on { background:var(--a2); border-color:var(--a2); box-shadow:0 0 6px var(--glow); }
:root[data-theme="bw"] .pips i.on { background:#fff; border-color:#fff; }
.avstack .av.sm { border:2px solid var(--p2); }
.sqi { width:46px; height:46px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:rgba(255,194,71,.12); border:1px solid rgba(255,194,71,.5); }
.sqi svg { width:24px; height:24px; stroke:var(--gold); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.newtag { padding:1px 7px; font-size:9.5px; font-weight:900; letter-spacing:1px; background:var(--gold); color:#2A1A00; }

/* узкие экраны (окно Telegram на десктопе ~360–380px): если кнопки в ряду не помещаются, переносим на следующую строку */
.row { flex-wrap:wrap; }
.row > .btn:not(.inline) { flex:1 1 0; min-width:max-content; }

/* v89: главная с картинкой и компактные плитки */
.pnl.herop > .o > .i { position:relative; overflow:hidden; min-height:112px; padding:12px 14px; }
.herop .herobg { position:absolute; right:0; top:0; width:82%; height:100%; object-fit:cover; object-position:68% 40%; }
.herop .herofade { position:absolute; inset:0; background:linear-gradient(90deg,var(--p2) 0%,rgba(6,3,14,.9) 34%,rgba(6,3,14,.35) 62%,rgba(6,3,14,0) 100%); }
:root[data-theme="bw"] .herop .herofade { background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.9) 34%,rgba(0,0,0,.35) 62%,rgba(0,0,0,0) 100%); }
.herop .herotx { position:relative; z-index:1; }
.herop .findbig .t { font-size:25px; }
.herop .avstack { margin-top:8px; }
.herop .avstack .av { width:24px; height:24px; font-size:8px; margin-right:-6px; }
.herop .avstack span { margin-left:14px; font-size:11px; }
.herop .herogo { position:absolute; right:12px; bottom:12px; z-index:1; width:34px; height:34px; }
.big4 { gap:8px; }
.big4 .pnl > .o > .i { padding:8px 10px; }
.big4 .tl { min-height:0; flex-direction:row; align-items:center; justify-content:flex-start; gap:9px; }
.big4 .tl .ic { position:static; flex:none; width:30px; height:30px; }
.big4 .tl .ic svg { width:17px; height:17px; }
.big4 .tl .tt { font-size:12.5px; line-height:1.15; }
.big4 .tl .ss { font-size:10.5px; line-height:1.25; margin-top:0; }
.big4 .tl .tx { min-width:0; }
.big4 .tl .bd { top:-2px; right:-4px; }

/* v95: скелетон при загрузке вкладок */
.skelwrap { display:flex; flex-direction:column; gap:12px; padding-top:8px; }

/* v97: центр уведомлений */
.nrow { display:flex; gap:10px; align-items:flex-start; }
.nrow .ndot { width:8px; height:8px; border-radius:50%; background:var(--orange); margin-top:6px; flex:none; }
.nrow.rd .ndot { visibility:hidden; }
.nrow .nt { font-size:13.5px; line-height:1.4; }
.nrow.rd .nt { color:var(--mu2); }
#layer .ntoast { position:fixed; left:12px; right:12px; top:calc(10px + env(safe-area-inset-top)); z-index:90; display:flex; gap:10px; align-items:center; padding:11px 14px; background:var(--p1); border:1px solid var(--a-soft2); box-shadow:0 6px 24px rgba(0,0,0,.5); font-size:13px; font-weight:700; cursor:pointer; animation:ntin .25s; }
#layer .ntoast svg { width:20px; height:20px; flex:none; stroke:var(--a3); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes ntin { from { transform:translateY(-120%); opacity:0; } to { transform:none; opacity:1; } }
:root[data-theme="bw"] #layer .ntoast { background:#000; border-color:#fff; }