/* Мини-приложение: плотные стеклянные плашки iOS над спокойным небом; днём облака, ночью луна и тёмные облака */
:root{
  --sky-1:#B7D0EC; --sky-2:#D3E2F2; --sky-3:#ECF2F8; --sky-glow:transparent; --sky-glow-2:transparent;
  --cl-top:#FFFFFF; --cl-bottom:#D9E5F2; --cl-op:.85; --moon-op:0; --star:rgba(255,255,255,0);
  --ink:#0B1626; --ink-2:rgba(11,22,38,.74); --ink-3:rgba(11,22,38,.5);
  --glass:rgba(255,255,255,.58); --glass-hi:rgba(255,255,255,.88); --glass-solid:rgba(248,251,255,.92);
  --edge:rgba(255,255,255,.95); --rim:#FFFFFF; --rim-low:rgba(255,255,255,.45);
  --shade:rgba(30,60,110,.32); --scrim:rgba(24,48,92,.2);
  --thumb:#FFFFFF; --fill:rgba(11,22,38,.075); --line:rgba(11,22,38,.1);
  --accent:#0A7CFF; --accent-ink:#FFFFFF;
  --good:#0F9A54; --good-bg:rgba(15,154,84,.13);
  --drop:#E66300; --drop-bg:rgba(230,99,0,.12);
  --info:#0A6BE0; --info-bg:rgba(10,124,255,.12);
  --bad:#D92D3A; --bad-bg:rgba(217,45,58,.12);
  --font:-apple-system, BlinkMacSystemFont, "Onest", "Segoe UI", system-ui, sans-serif;
  --round:ui-rounded, "SF Pro Rounded", "Onest", -apple-system, system-ui, sans-serif;
  --spring:cubic-bezier(.32,1.28,.48,1);
  --soft:cubic-bezier(.2,.8,.2,1);
  --top-inset:calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --bottom-inset:max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sky-1:#02040F; --sky-2:#060C2E; --sky-3:#0B1250; --sky-glow:rgba(92,64,255,.34); --sky-glow-2:rgba(0,140,255,.20);
  --cl-top:#1C2766; --cl-bottom:#080D2C; --cl-op:.8; --moon-op:1; --star:rgba(255,255,255,.75);
  --ink:#F5F7FF; --ink-2:rgba(222,230,255,.80); --ink-3:rgba(200,212,255,.56);
  --glass:rgba(10,18,62,.58); --glass-hi:rgba(46,72,200,.34); --glass-solid:rgba(9,15,52,.95);
  --edge:rgba(130,165,255,.24); --rim:rgba(170,195,255,.40); --rim-low:rgba(120,150,255,.10);
  --shade:rgba(0,2,20,.75); --scrim:rgba(0,3,25,.55);
  --thumb:rgba(80,125,255,.42); --fill:rgba(110,140,255,.12); --line:rgba(130,160,255,.14);
  --accent:#3F86FF; --accent-ink:#FFFFFF;
  --good:#2EE88A; --good-bg:rgba(46,232,138,.16);
  --drop:#FF9A3D; --drop-bg:rgba(255,154,61,.17);
  --info:#7DB8FF; --info-bg:rgba(77,149,255,.20);
  --bad:#FF5C6C; --bad-bg:rgba(255,92,108,.17);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --sky-1:#02040F; --sky-2:#060C2E; --sky-3:#0B1250; --sky-glow:rgba(92,64,255,.34); --sky-glow-2:rgba(0,140,255,.20);
  --cl-top:#1C2766; --cl-bottom:#080D2C; --cl-op:.8; --moon-op:1; --star:rgba(255,255,255,.75);
  --ink:#F5F7FF; --ink-2:rgba(222,230,255,.80); --ink-3:rgba(200,212,255,.56);
  --glass:rgba(10,18,62,.58); --glass-hi:rgba(46,72,200,.34); --glass-solid:rgba(9,15,52,.95);
  --edge:rgba(130,165,255,.24); --rim:rgba(170,195,255,.40); --rim-low:rgba(120,150,255,.10);
  --shade:rgba(0,2,20,.75); --scrim:rgba(0,3,25,.55);
  --thumb:rgba(80,125,255,.42); --fill:rgba(110,140,255,.12); --line:rgba(130,160,255,.14);
  --accent:#3F86FF; --accent-ink:#FFFFFF;
  --good:#2EE88A; --good-bg:rgba(46,232,138,.16);
  --drop:#FF9A3D; --drop-bg:rgba(255,154,61,.17);
  --info:#7DB8FF; --info-bg:rgba(77,149,255,.20);
  --bad:#FF5C6C; --bad-bg:rgba(255,92,108,.17);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--sky-2); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.35;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
a{color:inherit; text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* Небо: спокойный фон, рисованные облака; в тёмной теме — луна и тёмные облака */
.sky{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:radial-gradient(90% 55% at 85% 0%,var(--sky-glow),transparent 70%),
    radial-gradient(80% 50% at 0% 100%,var(--sky-glow-2),transparent 70%),
    linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 50%,var(--sky-3) 100%)}
.sky::after{content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,var(--star),transparent 70%),
    radial-gradient(1px 1px at 28% 42%,var(--star),transparent 70%),
    radial-gradient(1.6px 1.6px at 47% 9%,var(--star),transparent 70%),
    radial-gradient(1px 1px at 66% 31%,var(--star),transparent 70%),
    radial-gradient(1.3px 1.3px at 83% 14%,var(--star),transparent 70%),
    radial-gradient(1px 1px at 91% 52%,var(--star),transparent 70%),
    radial-gradient(1.2px 1.2px at 8% 71%,var(--star),transparent 70%),
    radial-gradient(1px 1px at 58% 78%,var(--star),transparent 70%),
    radial-gradient(1.4px 1.4px at 36% 88%,var(--star),transparent 70%);
  animation:twinkle 8s ease-in-out infinite alternate}
.moon{position:absolute; top:calc(8px + var(--top-inset)); right:-6px; width:46px; height:46px; border-radius:50%;
  opacity:var(--moon-op);
  background:radial-gradient(circle at 36% 34%,#F6F3E8 0%,#E3DECB 55%,#C6C0AB 100%);
  box-shadow:0 0 26px 6px rgba(240,236,220,.14), 0 0 110px 40px rgba(170,185,255,.07)}
.moon::before,.moon::after{content:""; position:absolute; border-radius:50%; background:rgba(150,142,120,.26)}
.moon::before{width:9px; height:9px; top:12px; left:24px}
.moon::after{width:6px; height:6px; top:26px; left:13px; box-shadow:14px 5px 0 -1px rgba(150,142,120,.2)}
.cl{position:absolute; opacity:var(--cl-op); will-change:transform; animation:drift var(--d,90s) ease-in-out infinite alternate}
.cl svg{display:block; width:100%; height:auto}
.flip svg{transform:scaleX(-1)}
.k1{width:200px; top:13%; left:-50px; --d:85s}
.k2{width:140px; top:5%; right:-24px; --d:110s; opacity:calc(var(--cl-op) * .75); filter:blur(1px); animation-direction:alternate-reverse}
.k3{width:250px; top:44%; left:-110px; --d:120s; opacity:calc(var(--cl-op) * .5); filter:blur(1.5px)}
.k4{width:180px; top:66%; right:-70px; --d:95s; animation-direction:alternate-reverse}
.k5{width:120px; top:87%; left:14%; --d:105s; opacity:calc(var(--cl-op) * .6); filter:blur(1px)}
@keyframes drift{from{transform:translateX(-6vw)}to{transform:translateX(8vw)}}
@keyframes twinkle{from{opacity:.5}to{opacity:.9}}

/* Стекло */
.glass{position:relative; isolation:isolate;
  background:linear-gradient(155deg,var(--glass-hi) 0%,var(--glass) 62%);
  -webkit-backdrop-filter:blur(24px) saturate(175%); backdrop-filter:blur(24px) saturate(175%);
  border:1px solid var(--edge);
  box-shadow:0 22px 44px -26px var(--shade), 0 3px 8px -4px var(--shade),
    inset 0 1px 0 var(--rim), inset 0 -14px 26px -22px var(--rim-low)}
.glass::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(130% 70% at 12% -10%,var(--rim-low),transparent 58%)}

.app{position:relative; z-index:1; max-width:480px; margin:0 auto;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px));
  padding-top:calc(14px + var(--top-inset)); padding-bottom:calc(118px + var(--bottom-inset))}

/* Шапка */
.top{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding-block:10px 4px}
.top > div{min-width:0}
.top h1{margin:0; font:800 32px/1.08 var(--font); letter-spacing:-.025em; text-wrap:balance; overflow-wrap:anywhere;
  padding-right:30px}
.top .sub{margin-top:5px; color:var(--ink-2); font-size:13.5px}
.status{display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 10px; border-radius:999px;
  font-size:13px; font-weight:650; white-space:nowrap; flex:none; transition:transform .3s var(--spring)}
.status:active{transform:scale(.94)}
.dot{width:8px; height:8px; border-radius:50%; background:var(--good); animation:pulse 2.2s ease-out infinite}
.dot.paused{background:var(--drop); animation:none}
.dot.busy{background:var(--accent)}
.dot.bad{background:var(--bad)}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--good-bg)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.demo{display:inline-block; margin-top:8px; font-size:11.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-2); background:var(--fill); padding:3px 9px; border-radius:999px}

.view{display:flex; flex-direction:column; gap:14px; margin-top:12px}

/* Парение */
.floaty{animation:float var(--fd,7s) ease-in-out infinite alternate; animation-delay:calc(var(--i,0) * -1.3s)}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-4px)}}

/* Сводка-облачка */
.clouds{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.puff{border-radius:22px; padding:12px 12px 11px; min-width:0}
.puff b{display:block; font:700 25px/1.05 var(--round); letter-spacing:-.01em; font-variant-numeric:tabular-nums; white-space:nowrap}
.puff span{display:block; margin-top:4px; font-size:12px; color:var(--ink-2); line-height:1.2}

/* Сегменты */
.seg{position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); padding:4px; border-radius:999px}
.seg button{position:relative; z-index:1; padding:9px 4px; border-radius:999px; font-size:14px; font-weight:650;
  color:var(--ink-2); transition:color .3s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg .lens{position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / var(--n)); border-radius:999px;
  background:var(--thumb); box-shadow:0 4px 14px -6px var(--shade), inset 0 1px 0 var(--rim);
  transform:translateX(calc(var(--i) * 100%)); transition:transform .55s var(--spring)}

.chips{position:relative; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-inline:-16px; padding:2px 16px 4px}
.chips::-webkit-scrollbar{display:none}
.chipbtn{flex:none; padding:8px 14px; border-radius:999px; font-size:14px; font-weight:650; color:var(--ink);
  transition:transform .35s var(--spring), color .2s, background .2s}
.chipbtn[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.chipbtn:active{transform:scale(.94)}

.group-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.group-label{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); padding-left:4px}
.pill-btn{padding:6px 12px; border-radius:999px; font-size:13px; font-weight:650}

/* Уведомления */
.list{display:grid; gap:10px}
.note-wrap{position:relative}
.note-wrap > .floaty{position:relative}
/* Действие под смахиваемой карточкой: вправо — «Купил», влево — «Скрыть» (как в уведомлениях iOS) */
.swipe-act{position:absolute; top:0; bottom:0; width:0; border-radius:24px; overflow:hidden; display:flex; align-items:center;
  color:#FFFFFF; font-size:13px; font-weight:700; opacity:.82; transition:opacity .2s}
.swipe-act.sw-buy{left:0; justify-content:flex-start; background:var(--good)}
.swipe-act.sw-hide{right:0; justify-content:flex-end; background:#8E8E93}
.swipe-act.armed{opacity:1}
.swipe-act span{flex:none; display:grid; justify-items:center; gap:3px; padding-inline:16px; white-space:nowrap; opacity:0;
  transition:transform .35s var(--spring)}
.swipe-act.armed span{transform:scale(1.12)}
.swipe-act svg{width:22px; height:22px}
.note{display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:11px; align-items:start;
  padding:12px 14px 13px 12px; border-radius:24px; cursor:pointer; touch-action:pan-y; user-select:none; -webkit-user-select:none;
  transition:transform .25s var(--soft)}
.note:active{transform:scale(.985)}
.intro .note{animation:rise .7s var(--spring) backwards; animation-delay:calc(var(--i) * 70ms)}
@keyframes rise{from{opacity:0; transform:translateY(18px) scale(.97)}}
.note-main{min-width:0; display:grid; gap:2px}
.note-meta{display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--ink-2)}
.note-meta time{flex:none}
.tags{color:var(--accent); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.note-title{font-weight:700; font-size:16px; margin-top:1px}
.note-price{display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px; font-size:15px}
.note-price b{font-family:var(--round); font-size:16.5px}
.note-price s{color:var(--ink-3)}
.note-body{color:var(--ink-2); font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.appicon{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 12px -6px rgba(0,0,0,.45)}
.appicon svg{width:24px; height:24px}
.appicon.brawl_stars{background:linear-gradient(160deg,#FFD84D 0%,#FF8A00 100%); color:#2A1500}
.appicon.clash_royale{background:linear-gradient(160deg,#63CBFF 0%,#2F55F5 100%); color:#FFFFFF}
.appicon.server{background:linear-gradient(160deg,#8FE3C8 0%,#2E9C8F 100%); color:#FFFFFF}

.chip{display:inline-flex; align-items:center; font-size:12px; font-weight:650; padding:2px 8px; border-radius:999px; white-space:nowrap}
.chip.good{color:var(--good); background:var(--good-bg)}
.chip.drop{color:var(--drop); background:var(--drop-bg)}
.chip.info{color:var(--info); background:var(--info-bg)}
.chip.bad{color:var(--bad); background:var(--bad-bg)}

/* Стопка «Ранее» */
.stack{display:grid; gap:10px}
.stack-body{position:relative; display:grid; gap:10px}
.stack.collapsed .stack-body{padding-bottom:20px}
.stack.collapsed .note-wrap{transform-origin:50% 100%}
.stack.collapsed .note-wrap:first-child{z-index:5}
.stack.collapsed .note-wrap:nth-child(n+2){position:absolute; left:0; right:0; top:0; height:var(--front-h); pointer-events:none}
.stack.collapsed .note-wrap:nth-child(n+2) .note{height:100%}
.stack.collapsed .note-wrap:nth-child(n+2) .note > *{opacity:0}
.stack.collapsed .note-wrap:nth-child(n+2) .floaty{animation:none; height:100%}
.stack.collapsed .note-wrap:nth-child(2){transform:translateY(10px) scale(.94); z-index:4}
.stack.collapsed .note-wrap:nth-child(2) .note{opacity:.88}
.stack.collapsed .note-wrap:nth-child(3){transform:translateY(20px) scale(.88); z-index:3}
.stack.collapsed .note-wrap:nth-child(3) .note{opacity:.62}
.stack.collapsed .note-wrap:nth-child(n+4){transform:translateY(20px) scale(.88); z-index:2}
.stack.collapsed .note-wrap:nth-child(n+4) .note{opacity:0}
.hint{text-align:center; font-size:12.5px; color:var(--ink-3)}

/* Топ-10 */
.limit{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-radius:18px; font-size:13.5px}
.limit b{font-family:var(--round); text-align:right}
.podium{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:end}
.pod{border-radius:22px; padding:12px 11px; display:grid; gap:3px; text-align:left; width:100%; min-width:0}
.pod .rank{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font:700 13px var(--round);
  background:var(--fill); margin-bottom:4px}
.floaty:first-child .pod .rank{background:var(--accent); color:var(--accent-ink)}
.pod .p{font:700 20px/1.1 var(--round); font-variant-numeric:tabular-nums; white-space:nowrap}
.p.ok{color:var(--good)}
.pod .d{font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rows{border-radius:24px; padding:4px 0}
.row{display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 14px; transition:background .2s}
.row + .row{border-top:1px solid var(--line)}
.row:active{background:var(--fill)}
.row .r{font:600 14px var(--round); color:var(--ink-3); font-variant-numeric:tabular-nums}
.row .p{font:700 16px var(--round); font-variant-numeric:tabular-nums; display:block}
.row .d{font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.site{font-size:12px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:4px}
.site svg{width:14px; height:14px; color:var(--ink-3)}
.legend{font-size:12.5px; color:var(--ink-3); padding-inline:4px}
.warn{font-size:13px; color:var(--drop); padding-inline:4px}
.alert{color:var(--drop); font-weight:650}

/* Проверка по тегу */
.search{display:flex; align-items:center; gap:8px; padding:6px 6px 6px 16px; border-radius:999px}
.search label{font:700 20px var(--round); color:var(--ink-3)}
.search input{flex:1; min-width:0; border:0; background:none; color:var(--ink); font:600 17px var(--font); letter-spacing:.04em;
  text-transform:uppercase; padding:8px 0; outline:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:13px 20px; border-radius:999px;
  font-weight:700; font-size:15.5px; transition:transform .3s var(--spring), opacity .2s}
.btn:active{transform:scale(.95)}
.btn:disabled{opacity:.5}
.btn.primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 12px 24px -12px var(--accent), inset 0 1px 0 var(--rim-low)}
.btn.ghost{background:var(--thumb); box-shadow:0 8px 18px -12px var(--shade), inset 0 1px 0 var(--rim)}
.btn.small{padding:8px 14px; font-size:14px}
.btn.wide{width:100%}
.card{border-radius:26px; padding:16px}
.player{display:flex; align-items:center; gap:12px}
.player > div{min-width:0}
.player h2{margin:0; font:800 22px/1.1 var(--font); letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis}
.player .t{color:var(--accent); font-weight:600; font-size:14px}
.rings{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px}
.ring{display:grid; justify-items:center; gap:6px; text-align:center; font-size:12px; color:var(--ink-2)}
.ring svg{width:76px; height:76px; transform:rotate(-90deg)}
.ring .bg{stroke:var(--fill)}
.ring .fg{stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset 1.3s var(--soft)}
.ring.gold .fg{stroke:var(--drop)}
.ring.green .fg{stroke:var(--good)}
.ring .v{position:relative; margin:-62px 0 14px; height:36px; display:grid; place-items:center;
  font:700 16px var(--round); color:var(--ink); font-variant-numeric:tabular-nums}
.ring .v small{font-size:11px; color:var(--ink-3); font-weight:600}
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.tile{border-radius:20px; padding:12px 14px; background:var(--fill); min-width:0}
.tile b{display:block; font:700 21px/1.1 var(--round); font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis}
.tile span{font-size:12.5px; color:var(--ink-2)}
.names{display:flex; flex-wrap:wrap; gap:6px}
.names span{font-size:12.5px; font-weight:600; padding:4px 9px; border-radius:999px; background:var(--fill)}
.names.gold span{background:var(--drop-bg); color:var(--drop)}
.sec-title{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin:4px 0 8px}
.muted{color:var(--ink-2); font-size:13.5px}
.recent{display:flex; flex-wrap:wrap; gap:8px}
.copybox{display:grid; gap:10px}
.copybox pre,.copybox .title{margin:0; padding:12px 14px; border-radius:16px; background:var(--fill); font:500 13.5px/1.45 var(--font);
  white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; -webkit-user-select:text}
.copybox .title{font-weight:650}
.skel{border-radius:26px; padding:16px; display:grid; gap:12px}
.sk{height:14px; border-radius:8px; background:linear-gradient(90deg,var(--fill) 0%,var(--rim-low) 50%,var(--fill) 100%);
  background-size:200% 100%; animation:shimmer 1.1s linear infinite}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* Таблица цен и проверка */
.ladder{border-radius:24px; padding:6px 12px 12px}
.lrow{display:grid; gap:8px; align-items:center; padding:6px 0}
.ladder.w3 .lrow{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1fr) 30px}
.ladder.w2 .lrow{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 30px}
.lhead{font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); padding:8px 0 2px}
.lhead span{padding-inline:10px}
.lrow input{width:100%; min-width:0; border:0; border-radius:12px; padding:9px 10px; background:var(--fill); color:var(--ink);
  font:600 15px var(--round); font-variant-numeric:tabular-nums; outline:none; transition:box-shadow .2s}
.lrow input:focus{box-shadow:0 0 0 2px var(--accent)}
.lrow input.badv{box-shadow:0 0 0 2px var(--bad)}
.del{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--ink-3); transition:transform .3s var(--spring)}
.del:active{transform:scale(.85)}
.del svg{width:16px; height:16px}
.add{margin-top:6px; width:100%; padding:10px; border-radius:14px; border:1.5px dashed var(--line); color:var(--accent); font-weight:650}
.example{display:flex; justify-content:space-between; gap:4px 10px; flex-wrap:wrap; margin-top:10px; padding:10px 12px; border-radius:14px;
  background:var(--info-bg); color:var(--info); font-size:13.5px; font-weight:600}
.example input{width:84px; border:0; border-radius:8px; padding:2px 6px; background:var(--thumb); color:var(--ink);
  font:600 13.5px var(--round); font-variant-numeric:tabular-nums}
.settings{border-radius:24px; padding:4px 16px}
.set{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; min-height:52px}
.set + .set{border-top:1px solid var(--line)}
.set .k{min-width:0}
.set .k small{display:block; color:var(--ink-2); font-size:12.5px; margin-top:1px}
.set.block{display:block}
.stepper{display:flex; align-items:center; gap:4px; background:var(--fill); border-radius:999px; padding:3px; flex:none}
.stepper button{width:32px; height:30px; border-radius:999px; font:600 18px var(--round)}
.stepper button:active{background:var(--thumb)}
.stepper output{min-width:58px; text-align:center; font:700 15px var(--round); font-variant-numeric:tabular-nums}
input[type=range]{width:100%; accent-color:var(--accent); margin:8px 0 6px}
.btnrow{display:flex; gap:8px; flex-wrap:wrap}
.switch{position:relative; flex:none; width:51px; height:31px}
.switch input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1}
.switch i{position:absolute; inset:0; border-radius:999px; background:var(--fill); transition:background .3s}
.switch i::after{content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%;
  background:#FFFFFF; box-shadow:0 3px 8px rgba(0,0,0,.22); transition:transform .45s var(--spring)}
.switch input:checked + i{background:var(--good)}
.switch input:checked + i::after{transform:translateX(20px)}
.switch input:focus-visible + i{outline:2px solid var(--accent); outline-offset:2px}

/* Сервер */
.meters{display:grid; gap:14px}
.meter .head{display:flex; justify-content:space-between; gap:10px; font-size:14px; margin-bottom:7px}
.meter .head b{font-family:var(--round); font-variant-numeric:tabular-nums; text-align:right}
.track{height:12px; border-radius:999px; background:var(--fill); overflow:hidden; box-shadow:inset 0 1px 2px var(--line)}
.track i{display:block; height:100%; width:var(--w,0%); border-radius:inherit; background:var(--accent);
  box-shadow:inset 0 1px 0 var(--rim-low); transition:width .9s var(--soft)}
.track i.hot{background:var(--drop)}
.meter small{display:block; margin-top:5px; font-size:12.5px; color:var(--ink-2)}
.kv{display:grid; gap:9px}
.kv div{display:flex; justify-content:space-between; gap:10px; font-size:14px}
.kv div span:first-child{color:var(--ink-2)}
.kv div b{font-family:var(--round); font-variant-numeric:tabular-nums; text-align:right}

/* Карточка «Открывать в одно касание» */
.qa{border-radius:24px; overflow:hidden; display:grid}
.qa-text{display:grid; gap:4px; padding:16px 18px 14px}
.qa-text b{font-size:17px; font-weight:750}
.qa-text span{color:var(--ink-2); font-size:14.5px; line-height:1.4}
.qa-row{text-align:left; padding:14px 18px; color:var(--accent); font-size:16px; font-weight:600;
  border-top:1px solid var(--line); transition:background .2s}
.qa-row:active{background:var(--fill)}

/* Нижняя панель */
.tabwrap{position:fixed; left:0; right:0; bottom:0; z-index:20; display:flex; justify-content:center; pointer-events:none;
  padding-left:max(12px, env(safe-area-inset-left,0px)); padding-right:max(12px, env(safe-area-inset-right,0px));
  padding-bottom:calc(10px + var(--bottom-inset))}
.tabbar{pointer-events:auto; position:relative; width:100%; max-width:460px; display:grid; grid-template-columns:repeat(6,1fr);
  padding:6px; border-radius:999px}
.tabbar .lens{position:absolute; top:6px; bottom:6px; left:6px; width:calc((100% - 12px) / 6); border-radius:999px;
  background:var(--thumb); box-shadow:0 6px 16px -8px var(--shade), inset 0 1px 0 var(--rim);
  transform:translateX(calc(var(--i,0) * 100%)); transition:transform .6s var(--spring)}
.tab{position:relative; z-index:1; display:grid; justify-items:center; gap:2px; padding:7px 0 6px; border-radius:999px;
  color:var(--ink-2); font-size:10.5px; font-weight:700; transition:color .3s; min-width:0}
.tab svg{width:22px; height:22px; transition:transform .45s var(--spring)}
.tab[aria-current="page"]{color:var(--accent)}
.tab[aria-current="page"] svg{transform:translateY(-1px) scale(1.08)}

/* Шторка */
.sheet-wrap{position:fixed; inset:0; z-index:40}
.scrim{position:absolute; inset:0; background:var(--scrim); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .4s}
.sheet{position:absolute; left:0; right:0; bottom:-40px; margin-inline:auto; max-width:520px; max-height:calc(88vh + 40px); overflow-y:auto;
  overscroll-behavior:contain; border-radius:32px 32px 0 0; border-bottom:0;
  background:linear-gradient(170deg,var(--glass-hi),var(--glass-solid) 40%);
  padding-left:max(18px, env(safe-area-inset-left,0px)); padding-right:max(18px, env(safe-area-inset-right,0px));
  padding-top:8px; padding-bottom:calc(64px + var(--bottom-inset));
  transform:translateY(105%); transition:transform .6s var(--spring)}
.sheet-wrap.open .scrim{opacity:1}
.sheet-wrap.open .sheet{transform:translateY(0)}
.grab{display:flex; justify-content:center; padding:4px 0 10px; cursor:grab; touch-action:none}
.grab i{width:38px; height:5px; border-radius:3px; background:var(--ink-3)}
.sh{display:grid; gap:14px}
.sh-head{display:flex; align-items:center; gap:12px}
.sh-head .k{flex:1; min-width:0}
.sh-head .k div:last-child{font-weight:700; font-size:16px}
.x{width:32px; height:32px; border-radius:50%; background:var(--fill); display:grid; place-items:center; flex:none}
.x svg{width:14px; height:14px}
.sh-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.sh-price .big{font:800 40px/1 var(--round); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.sh-price s{color:var(--ink-3); font:600 18px var(--round)}
.chipline{display:flex; flex-wrap:wrap; gap:6px}
.check{display:grid; gap:10px; border-radius:20px; padding:14px; background:var(--fill)}
.check .line{display:flex; justify-content:space-between; gap:10px; font-size:14px}
.check .line span:first-child{color:var(--ink-2)}
.check .line b{font-family:var(--round); text-align:right}
.desc{white-space:pre-wrap; overflow-wrap:anywhere}
.desc.clamp{max-height:260px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 65%, transparent); mask-image:linear-gradient(#000 65%, transparent)}
.desc + .more{margin-top:8px}
.actions{display:grid; gap:10px}
.actions-row{display:flex; gap:10px}
.actions-row .btn{flex:1}
.btn.act-buy{color:var(--good)}
.btn.act-del{color:var(--bad)}

/* Покупки */
.brow{width:100%; text-align:left}
.puff b.money{font-size:19px; line-height:1.35}
.pos{color:var(--good)}
.neg{color:var(--bad)}
.pform{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.pfield{display:grid; gap:6px; font-size:12.5px; font-weight:650; color:var(--ink-2); min-width:0}
.pfield.wide{grid-column:1 / -1}
.pfield input,.pfield textarea{width:100%; min-width:0; border:0; border-radius:14px; padding:11px 12px; background:var(--fill);
  color:var(--ink); font:600 16px var(--font); outline:none; resize:none}
.pfield input:focus,.pfield textarea:focus{box-shadow:0 0 0 2px var(--accent)}
.pfield input::placeholder,.pfield textarea::placeholder{color:var(--ink-3); font-weight:500}

/* Всплывашка сверху */
.toast{position:fixed; z-index:60; left:50%; top:calc(10px + var(--top-inset)); max-width:calc(100% - 32px);
  display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:22px; font-size:14px; font-weight:600;
  transform:translate(-50%,-180%); transition:transform .6s var(--spring)}
.toast.show{transform:translate(-50%,0)}
.toast.err{color:var(--bad)}
.toast button{flex:none; padding:6px 12px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:13px; font-weight:700}

.empty{text-align:center; padding:28px 16px; border-radius:24px; color:var(--ink-2); display:grid; gap:12px; justify-items:center}
.gate{position:relative; z-index:1; max-width:420px; margin:18vh auto 0; padding:28px 22px; border-radius:30px; text-align:center;
  display:grid; gap:12px; justify-items:center}
.gate h1{margin:0; font:800 24px/1.15 var(--font)}
.gate p{margin:0; color:var(--ink-2)}

@media (max-width:370px){
  .top h1{font-size:28px}
  .puff b{font-size:21px}
  .pod .p{font-size:17px}
  .tab{font-size:9.5px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}