/* Трекер подарков — тёмный минимализм с мягким пастельным градиентом */
:root{
  --bg:#131313; --surface:#1d1d1d; --surface2:#262626; --line:#2c2c2c;
  --text:#f3f3f1; --muted:#8d8d8a; --muted2:#7a7a76;
  --ink:#151515;                 /* текст на градиенте */
  --lime:#e7ea9b; --sage:#cad8c4; --lav:#d6d7f1;
  --green:#a9e0a0; --red:#ff8a80;
  --grad:
    radial-gradient(70% 90% at 92% 8%, #ecee98 0%, transparent 62%),
    radial-gradient(75% 85% at 35% 100%, #d9daf4 0%, transparent 70%),
    linear-gradient(135deg, #c3d3bf 0%, #d7dce6 55%, #e3e6b0 100%);
  --bar:linear-gradient(90deg, #e9eb9d, #cfdac6 55%, #d7d8f1);
  --r:24px; --r2:16px;
  --font:"Onest",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{color:var(--text);font-family:var(--font);font-size:15px;line-height:1.35;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
.screen{max-width:520px;margin:0 auto;padding:12px 16px calc(104px + env(safe-area-inset-bottom));min-height:100vh}
::selection{background:var(--lime);color:var(--ink)}

/* иконки */
.i{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;display:block}

/* ---------- шапка экранов ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;margin:4px 0 14px}
.top.sticky{position:sticky;top:0;z-index:20;background:var(--bg);margin:-12px -16px 10px;padding:12px 16px 8px}
.pill{height:44px;min-width:64px;padding:0 18px;border-radius:22px;border:0;background:var(--surface);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-weight:500;font-size:14px}
.pill:active{transform:scale(.97)}
.pill.dark{background:#1b1b1b;color:#f3f3f1}
.h1{font-size:30px;font-weight:400;letter-spacing:-.015em;line-height:1.15;margin:4px 2px 18px}
.h1 b{font-weight:700}
.h2{font-size:20px;font-weight:400;margin:26px 2px 12px;display:flex;align-items:center;justify-content:space-between}
.h2 small{font-size:13px;color:var(--muted)}
.sub{color:var(--muted);font-size:14px;margin:-8px 2px 18px}

/* ---------- hero (главная / пейвол) ---------- */
.hero{background:var(--grad);color:var(--ink);margin:-12px -16px 18px;padding:14px 16px 16px;
  border-radius:0 0 34px 34px;position:relative}
.hero .top{margin-top:0}
.hero .h1{color:var(--ink);margin:10px 2px 20px}
.me-ava{width:64px;height:44px;border-radius:22px;background:#1b1b1b center/cover;display:grid;place-items:center;
  color:#f3f3f1;font-weight:600;font-size:16px}
.live{display:inline-flex;align-items:center;gap:7px}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #e7ea9b99}70%{box-shadow:0 0 0 7px #e7ea9b00}100%{box-shadow:0 0 0 0 #e7ea9b00}}
.balance{background:#1b1b1b;color:var(--text);border-radius:var(--r);padding:16px 20px 18px;cursor:pointer}
.balance .bl{font-size:14px;color:#c9c9c6}
.balance .bv{font-size:30px;font-weight:500;text-align:right;letter-spacing:-.01em;margin-top:6px}
.balance .bv small{font-size:15px;color:var(--muted);font-weight:400;margin-left:4px}

/* ---------- плитки-вкладки ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.tile{background:var(--surface);border:0;border-radius:var(--r);padding:12px 12px 13px;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;gap:12px;min-height:94px;transition:background .15s}
.tile .i{align-self:flex-end;width:24px;height:24px;color:#e9e9e6}
.tile small{font-size:11px;color:var(--muted);display:block}
.tile b{font-size:16px;font-weight:500;display:block;margin-top:1px}
.tile.on{background:var(--surface2)}
.tile.on small,.tile.on .i{color:var(--lime)}
.tile .n{font-size:11px;color:var(--muted);font-weight:400;margin-left:4px}

/* ---------- сегменты ---------- */
.seg{display:flex;background:var(--surface);border-radius:22px;padding:4px;gap:4px;margin:0 0 16px}
.seg button{flex:1;background:none;border:0;color:var(--muted);height:38px;border-radius:18px;font-weight:500;cursor:pointer;font-size:14px}
.seg button.on{background:var(--text);color:var(--ink)}

/* ---------- карточки ---------- */
.card{background:var(--surface);border-radius:var(--r);padding:16px 18px;margin-bottom:12px}
.list-rows{background:var(--surface);border-radius:var(--r);padding:4px 18px;margin-bottom:12px}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv span{color:#cfcfcc}
.kv b{font-weight:500;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* лот в списке */
.lot{background:var(--surface);border-radius:var(--r);padding:14px 14px 12px;margin-bottom:12px;cursor:pointer;transition:transform .1s}
.lot:active{transform:scale(.985)}
.lot-top{display:flex;gap:12px;align-items:center}
.thumb{width:62px;height:62px;flex:0 0 62px;border-radius:18px;overflow:hidden;background:var(--surface2)}
.thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.noimg{display:grid;place-items:center;color:var(--muted2);width:100%;height:100%;background:var(--surface2)}
.noimg .i{width:40%;height:40%}
.lot-main{flex:1;min-width:0}
.lot-title{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lot-title span{color:var(--muted);font-weight:400}
.lot-meta{color:var(--muted);font-size:12.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lot-when{font-size:11.5px;color:var(--muted2);margin-top:4px}
.lot-when.drop{color:var(--green)}
.cur{flex:0 0 auto;display:block}
.s-sub .i{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-left:1px}
.lot-price{text-align:right;flex:0 0 auto}
.lot-price b{font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:flex-end;gap:6px;letter-spacing:-.01em}
.lot-price span{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:13px;color:var(--muted);margin-top:3px}
.lot-price s{display:block;font-size:11px;color:var(--muted2);margin-top:2px}
.lot-seller{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ava{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;
  color:var(--ink);background:var(--sage) center/cover}
.s-main{flex:1;min-width:0}
.s-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-sub{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-sub .ok{color:var(--green)}

/* ---------- кнопки ---------- */
.btn{border:0;border-radius:22px;height:40px;padding:0 18px;font-weight:600;font-size:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.6}
.btn-g{background:var(--grad);color:var(--ink)}
.btn-l{background:var(--text);color:var(--ink)}
.btn-o{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px #3a3a38}
.btn-s{background:var(--surface2);color:var(--text)}
.btn-w{width:100%;height:52px;border-radius:26px;font-size:15px}

/* CTA-карта с градиентом (как «Nueva meta») */
.cta{background:var(--grad);color:var(--ink);border-radius:var(--r);padding:16px 18px;min-height:112px;display:flex;
  flex-direction:column;justify-content:flex-end;position:relative;cursor:pointer;margin-bottom:8px}
.cta .i{position:absolute;right:16px;top:16px;width:28px;height:28px;stroke-width:1.4}
.cta small{font-size:12px;opacity:.75}
.cta b{font-size:21px;font-weight:500;margin-top:1px}
.cta em{font-style:normal;font-size:12.5px;opacity:.7;margin-top:4px}

/* разделы трекера */
.sec{background:var(--surface);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;cursor:pointer}
.sec:active{transform:scale(.985)}
.sec .sic{width:42px;height:42px;border-radius:50%;flex:0 0 42px;display:grid;place-items:center;background:var(--surface2);color:var(--lime)}
.sec .sm{flex:1;min-width:0}
.sec .st{font-size:15px;font-weight:500}
.sec .sd{font-size:12px;color:var(--muted);margin-top:2px}
.sec .sn{font-size:20px;font-weight:400;text-align:right}
.sec .sn small{display:block;font-size:10.5px;color:var(--muted)}
.bar{height:22px;background:#141414;border-radius:11px;overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--bar);border-radius:11px 0 0 11px;box-shadow:inset -2px 0 0 #f3f3f1}
.bar-l{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:10px}

/* строки меню */
.menu{background:var(--surface);border-radius:var(--r);padding:2px 0;margin-bottom:12px}
.mi{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;position:relative}
.mi + .mi::before{content:"";position:absolute;top:0;left:66px;right:16px;border-top:1px solid var(--line)}
.mi .mic{width:36px;height:36px;border-radius:50%;flex:0 0 36px;display:grid;place-items:center;background:var(--surface2);color:#e9e9e6}
.mi .mic .i{width:18px;height:18px}
.mi .mt{flex:1;min-width:0}
.mi .mt b{display:block;font-weight:500;font-size:15px}
.mi .mt small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.mi .arr{color:var(--muted2)}
.mi .val{color:var(--muted);font-size:13px}

/* переключатель */
.sw{width:48px;height:28px;border-radius:14px;background:#343432;position:relative;flex:0 0 48px;cursor:pointer;transition:.2s}
.sw.on{background:var(--lime)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#f3f3f1;transition:.2s}
.sw.on::after{left:23px;background:var(--ink)}

/* чипсы выбора */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:36px;padding:0 15px;border-radius:18px;border:0;background:var(--surface);color:#d6d6d3;font-size:13.5px;cursor:pointer}
.chip.on{background:var(--text);color:var(--ink);font-weight:600}
.var{height:32px;padding:0 12px;border-radius:16px;border:0;background:var(--surface2);color:var(--lime);font-size:13px;cursor:pointer;font-family:ui-monospace,Menlo,monospace}

/* поля */
.lbl{color:var(--muted);font-size:13px;margin:20px 4px 9px}
input,textarea{width:100%;background:var(--surface);border:1px solid transparent;color:var(--text);border-radius:var(--r2);
  padding:14px 16px;font:inherit;font-size:15px;resize:none}
input::placeholder,textarea::placeholder{color:var(--muted2)}
input:focus,textarea:focus{outline:none;border-color:#4a4a47}
.inrow{display:flex;gap:10px}
.inrow .btn{height:50px;border-radius:var(--r2)}

/* ---------- страница лота ---------- */
.gift-hero{position:relative;border-radius:28px;overflow:hidden;background:var(--surface2);max-width:400px;margin:0 auto}
.gift-hero .hero-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.gift-hero .noimg{aspect-ratio:1/1}
.hero-lot{position:absolute;inset:0;display:none;pointer-events:none}
.gift-hero.vec .hero-lot{display:block}
.gift-hero.vec .hero-img{opacity:0}
.hero-lot svg{width:100%!important;height:100%!important;display:block}
.hero-tag{position:absolute;left:12px;top:12px;background:#151515cc;backdrop-filter:blur(10px);color:#f3f3f1;font-size:12px;font-weight:500;padding:6px 12px;border-radius:16px}
.gift-name{font-size:26px;font-weight:400;margin:18px 2px 0;letter-spacing:-.01em}
.gift-name span{color:var(--muted)}
.issued{font-size:13px;color:var(--muted);margin:2px 2px 0;min-height:18px}
.price-big{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin:12px 2px 16px}
.price-big .pb{display:flex;align-items:center;gap:9px}
.price-big .pb b{font-size:34px;font-weight:500;letter-spacing:-.02em}
.price-big .pb-s b{font-size:22px;font-weight:500;color:#d6d6d3}
.price-big s{color:var(--muted2);font-size:15px}
.attrs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.attr{background:var(--surface);border-radius:20px;padding:12px 10px;text-align:center;min-width:0}
.aic{width:52px;height:52px;margin:0 auto 8px;display:grid;place-items:center;color:var(--muted2)}
.aic svg{width:100%;height:100%;display:block}
.aic>.i{width:26px;height:26px}
.aic-background{width:46px;height:46px;margin:3px auto 11px;border-radius:14px;background:var(--surface2);box-shadow:inset 0 0 0 1px #ffffff14}
/* узор в Telegram — чёрный силуэт; на тёмном фоне красим в светлый */
.aic-pattern svg:not(.i) path{fill:#e9e9e6!important;stroke:none!important}
.attr small{display:block;font-size:11px;color:var(--muted)}
.attr b{display:block;font-size:13px;font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attr em{display:block;font-style:normal;font-size:11px;color:var(--lime);margin-top:2px;min-height:14px}
.seller-card{display:flex;align-items:center;gap:14px}
.seller-card .ava{width:52px;height:52px;flex:0 0 52px;font-size:18px}
.seller-card .s-name{font-size:17px}
.links{display:flex;gap:10px;margin-top:14px}
.links .btn{flex:1;height:42px}
.hscroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.mini{flex:0 0 120px;background:var(--surface);border-radius:20px;padding:8px 8px 10px;font-size:12px;cursor:pointer}
.mini img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;display:block;margin-bottom:8px;background:var(--surface2)}
.mini b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.mini span{color:var(--muted);padding:0 2px}
.mini i{display:block;font-style:normal;font-weight:600;margin-top:3px;padding:0 2px}
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:35;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 65%,transparent)}
.actionbar>div{max-width:488px;margin:0 auto}
body.detail .tabbar{display:none}

/* ---------- анимации ---------- */
:root{--ease:cubic-bezier(.22,.8,.24,1)}
.screen.enter{animation:scrIn .38s var(--ease)}
@keyframes scrIn{from{opacity:0;transform:translateY(10px)}}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.985)}}
.lot,.sec,.mini{animation:cardIn .45s var(--ease) backwards}
.lot:nth-child(2),.sec:nth-child(2),.mini:nth-child(2){animation-delay:.04s}
.lot:nth-child(3),.sec:nth-child(3),.mini:nth-child(3){animation-delay:.08s}
.lot:nth-child(4),.sec:nth-child(4),.mini:nth-child(4){animation-delay:.12s}
.lot:nth-child(5),.sec:nth-child(5),.mini:nth-child(5){animation-delay:.16s}
.lot:nth-child(n+6),.sec:nth-child(n+6),.mini:nth-child(n+6){animation-delay:.2s}
.noanim .lot,.noanim .sec{animation:none}
/* картинки проявляются по мере загрузки */
.thumb-img,.hero-img,.mini img{opacity:0;transition:opacity .45s var(--ease)}
.thumb-img.ld,.hero-img.ld,.mini img.ld{opacity:1}
/* мягкие нажатия и переключения */
.btn,.pill,.tile,.chip,.plan,.lot,.sec,.cta,.mi,.tab{transition:transform .25s var(--ease),background-color .25s var(--ease),color .25s var(--ease),opacity .25s var(--ease)}
.btn:active,.pill:active,.chip:active,.plan:active{transform:scale(.95)}
.lot:active,.sec:active,.cta:active{transform:scale(.98)}
.mi:active{background:#ffffff08}
.tab:active{transform:scale(.92)}
.seg button{transition:background-color .3s var(--ease),color .3s var(--ease)}
.sw,.sw::after{transition:all .3s var(--ease)}
.sheet-wrap{transition:opacity .3s var(--ease)}
.sheet{transition:transform .38s var(--ease)}
.toast{transition:opacity .3s var(--ease),transform .35s var(--ease)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.thumb-img,.hero-img,.mini img{opacity:1}}

/* узор вокруг подарка (только под анимацией — на обычной картинке узор уже есть) */
.hero-pat{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s var(--ease)}
.hero-pat.on{opacity:1}
.gift-hero:not(.vec) .hero-pat{display:none}
.hero-pat i{position:absolute;transform:translate(-50%,-50%);background:var(--pc);
  -webkit-mask:var(--pm) center/contain no-repeat;mask:var(--pm) center/contain no-repeat}

/* аватарки продавцов: фото поверх буквы */
.ava{position:relative;overflow:hidden}
.ava-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease)}
.ava-img.ld{opacity:1}

/* ползунок «Занять» */
.slide{position:relative;width:142px;height:42px;flex:0 0 auto;border-radius:21px;background:var(--surface2);overflow:hidden;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.slide-fill{position:absolute;left:0;top:0;bottom:0;width:42px;border-radius:21px;background:var(--grad);opacity:.28}
.slide-t{position:absolute;inset:0;display:grid;place-items:center;padding-left:34px;font-size:13.5px;font-weight:600;pointer-events:none;
  background:linear-gradient(90deg,#8d8d8a 20%,#f3f3f1 50%,#8d8d8a 80%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 2.6s linear infinite}
@keyframes shine{from{background-position:120% 0}to{background-position:-120% 0}}
.slide-knob{position:absolute;left:3px;top:3px;width:36px;height:36px;border-radius:50%;background:var(--grad);color:var(--ink);
  display:grid;place-items:center;box-shadow:0 3px 10px #0007;pointer-events:none}
.slide-knob .i{width:18px;height:18px;stroke-width:2.2}
.slide.drag{cursor:grabbing}
.lot:has(.slide.drag){transform:none}
.slide.drag .slide-knob{box-shadow:0 4px 16px #0009,0 0 0 4px #e7ea9b33}
.slide.busy .slide-fill{opacity:1}
.slide.busy .slide-t{color:var(--ink);background:none;padding:0;animation:none}
.slide-w{width:100%;height:58px;border-radius:29px;background:#262626;box-shadow:0 10px 30px -10px #000}
.slide-w .slide-fill{width:58px;border-radius:29px}
.slide-w .slide-knob{width:52px;height:52px}
.slide-w .slide-knob .i{width:22px;height:22px}
.slide-w .slide-t{padding-left:40px;font-size:15px}

/* заглушка, пока грузится app.js */
.boot{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted);font-size:14px}
.boot-dot{width:44px;height:44px;border-radius:50%;background:var(--grad);animation:sk 1.2s ease-in-out infinite}

/* прочее */
.empty{color:var(--muted);text-align:center;padding:48px 20px;font-size:14px}
.empty .i{width:36px;height:36px;margin:0 auto 12px;color:var(--muted2)}
.skel{background:var(--surface);border-radius:var(--r);height:132px;margin-bottom:12px;animation:sk 1.2s ease-in-out infinite}
@keyframes sk{50%{opacity:.55}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.stat{background:var(--surface);border-radius:var(--r);padding:14px 16px}
.stat small{display:block;font-size:12px;color:var(--muted)}
.stat b{display:block;font-size:28px;font-weight:400;margin-top:6px}
.rule{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.rule:last-child{border-bottom:0}
.rule .rn{width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:var(--surface2);color:var(--lime);display:grid;place-items:center;font-size:13px}
.rule b{font-weight:500;display:block}
.rule small{color:var(--muted);font-size:13px;display:block;margin-top:2px}
.note{font-size:12.5px;color:var(--muted);margin:10px 4px 0;line-height:1.45}
.note b{color:var(--text);font-weight:500}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:10px}
.plan{background:var(--surface);border:0;border-radius:var(--r);padding:14px 12px;text-align:left;cursor:pointer}
.plan small{display:block;font-size:12px;color:var(--muted)}
.plan b{display:block;font-size:18px;font-weight:500;margin-top:14px}
.plan em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
.plan.best{background:var(--surface2)}
.plan.best small{color:var(--lime)}

/* ---------- нижняя панель ---------- */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;
  display:flex;gap:4px;padding:6px;background:#1d1d1dee;backdrop-filter:blur(16px);border-radius:32px;
  box-shadow:0 10px 30px -8px #000c;width:calc(100% - 32px);max-width:420px}
.tab{flex:1;background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;height:52px;border-radius:26px;cursor:pointer;transition:background .2s,color .2s}
.tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab span{font-size:10.5px;font-weight:500}
.tab.active{background:var(--grad);color:var(--ink)}

.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,16px);background:#f3f3f1;color:var(--ink);
  padding:12px 18px;border-radius:22px;opacity:0;transition:.25s;z-index:60;font-size:14px;font-weight:500;max-width:88%;pointer-events:none;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* шторка */
.sheet-wrap{position:fixed;inset:0;z-index:50;background:#000a;opacity:0;pointer-events:none;transition:.2s;display:flex;align-items:flex-end}
.sheet-wrap.show{opacity:1;pointer-events:auto}
.sheet{width:100%;max-width:520px;margin:0 auto;background:var(--surface);border-radius:28px 28px 0 0;
  padding:10px 16px calc(20px + env(safe-area-inset-bottom));max-height:78vh;overflow:auto;transform:translateY(40px);transition:.22s}
.sheet::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#3a3a38;margin:0 auto 14px}
.sheet-wrap.show .sheet{transform:translateY(0)}
.sheet h3{font-size:20px;font-weight:400;margin:0 4px 12px}
.sheet input{background:var(--surface2);margin-bottom:8px}
.pick{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 6px;border-bottom:1px solid var(--line);cursor:pointer}
.pick:last-child{border-bottom:0}
.pick.on{color:var(--lime)}
.pick small{color:var(--muted);font-size:12px;white-space:nowrap}
.pick .floor{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.mini i{display:flex;align-items:center;gap:5px}
.pick-img{width:44px;height:44px;flex:0 0 44px;border-radius:14px;object-fit:cover;background:var(--surface2);display:grid;place-items:center}
.pick-img.noimg .i{width:20px;height:20px}
.pick-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick.on .pick-img{box-shadow:0 0 0 2px var(--lime)}
.pick:has(.pick-img){padding:10px 6px}
/* обычный подарок — прозрачный стикер: целиком, без обрезки и тени */
img.pick-img[src^="/api/orig"]{object-fit:contain;padding:4px}
.cta-img[src^="/api/orig"]{object-fit:contain;box-shadow:none;border-radius:0}
.cta-img{position:absolute;right:14px;top:14px;width:64px;height:64px;border-radius:18px;object-fit:cover;box-shadow:0 6px 18px -6px #0006}