:root{
  --bg:#0a0d0c; --card:#121614; --card2:#161b18; --line:#20261f;
  --green:#31d07a; --green2:#2bbd6e; --txt:#eef2ee; --mut:#8b938c; --mut2:#5f665f;
  --chip:#141a16;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:15px}
#app{max-width:640px;margin:0 auto;padding:0 14px 90px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}

/* ── Иконки (SVG, без обычных эмодзи) ── */
svg{width:20px;height:20px;display:block;flex:0 0 auto}
.ic{display:inline-flex;align-items:center;justify-content:center;line-height:0;vertical-align:-.15em}
.ic svg{width:18px;height:18px}

/* ── Плавные переходы по умолчанию ── */
button,.chip,.tab,.pill,.pm,.f-row,.sort-opt,.card,.bn,.buy{transition:transform .16s cubic-bezier(.2,.7,.3,1),background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.card .buy:active,.btn-primary:active,.btn-ghost:active,.type-tabs .tab:active,.pill:active,.bn:active,.pm:active,.f-row:active,.sort-opt:active,.chip:active{transform:scale(.965)}
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* Шапка */
.hdr{padding:16px 2px 10px}
.hdr-title{font-weight:900;font-size:26px;letter-spacing:.5px}
.hdr-title span{color:var(--green)}
.hdr-title .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-left:4px;vertical-align:middle}
.hdr-sub{color:var(--mut);font-size:13px;margin-top:3px}

/* Тип-табы */
.type-tabs{display:flex;gap:10px;margin:8px 0}
.type-tabs .tab{flex:1;padding:12px 8px;border-radius:14px;background:var(--card);color:var(--txt);font-weight:700;font-size:14px;transition:.15s}
.type-tabs .tab.active{background:var(--green);color:#08110b}

/* Аренда/Покупка + поиск */
.row-search{display:flex;gap:10px;align-items:center;margin:8px 0}
.pill-tabs{display:flex;gap:6px;background:var(--card);border-radius:14px;padding:5px}
.pill-tabs .pill{padding:9px 16px;border-radius:11px;color:var(--mut);font-weight:700;font-size:14px}
.pill-tabs .pill.active{background:var(--green);color:#08110b}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:14px;padding:0 14px;height:44px}
.search .ic{color:var(--mut)}
.search .ic svg{width:18px;height:18px}
.search input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:15px;height:100%}

/* Чипы фильтров */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:flex;align-items:center;gap:6px;background:var(--chip);border:1px solid var(--line);
  color:var(--txt);padding:8px 14px;border-radius:12px;font-size:13px;font-weight:600;white-space:nowrap}
.chip .ic svg{width:15px;height:15px}
.chip.sortbtn{padding:8px 11px}
.chip.on{border-color:var(--green);color:var(--green);background:rgba(49,208,122,.08)}

/* Грид */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:var(--card);border-radius:16px;overflow:hidden;position:relative;animation:cardIn .34s ease both}
.card:nth-child(2){animation-delay:.03s}.card:nth-child(3){animation-delay:.06s}.card:nth-child(4){animation-delay:.09s}
.card:nth-child(5){animation-delay:.12s}.card:nth-child(6){animation-delay:.15s}.card:nth-child(7){animation-delay:.18s}
.card:nth-child(8){animation-delay:.21s}.card:nth-child(n+9){animation-delay:.24s}
.card:active{transform:scale(.98)}
.card .thumb{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:#1c221c;overflow:hidden}
.card .thumb img{width:70%;height:70%;object-fit:contain}
.card .thumb .giftimg{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:active .thumb .giftimg{transform:scale(1.04)}
.card .thumb .ph{display:none;position:absolute;inset:0;width:100%;height:100%;align-items:center;justify-content:center}
.card .thumb .ph svg{width:46%;height:46%;opacity:.85}
.card.tg .tg-ava img{width:56px;height:56px;object-fit:contain}
.rent-hero .giftimg{width:100%;height:100%;object-fit:cover}
.rent-hero .ph{width:100%;height:100%;align-items:center;justify-content:center}
.rent-hero .ph svg{width:52%;height:52%}
.card .eye{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.45);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;color:#fff}
.card .eye svg{width:15px;height:15px}
.card .days{position:absolute;left:8px;bottom:8px;background:rgba(10,13,12,.82);color:#cfe;font-size:11px;
  font-weight:700;padding:4px 9px;border-radius:9px}
.card .body{padding:11px 12px 12px}
.card .name{font-weight:700;font-size:15px;line-height:1.2}
.card .sub{color:var(--mut);font-size:12px;margin-top:2px}
.card .buy{margin-top:10px;width:100%;background:var(--green);color:#08110b;font-weight:800;font-size:14px;
  padding:11px;border-radius:12px}
.card.tg .thumb{background:#0f1512}
.card.tg .tg-ava{width:88px;height:88px;border-radius:22px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:52px}
.card .num-badge{position:absolute;left:10px;right:10px;bottom:34px;text-align:center;color:#fff;font-weight:800;
  font-size:15px;padding:8px;border-radius:10px}

/* Пусто */
.empty{text-align:center;color:var(--mut);padding:60px 20px}
.empty .circle{width:64px;height:64px;border-radius:50%;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--green)}
.empty .circle svg{width:28px;height:28px}
.empty b{display:block;color:var(--txt);font-size:16px;margin-bottom:4px}

/* Мои аренды */
.rentals-view{padding-top:6px}
.rentals-head{font-weight:900;font-size:22px;text-transform:uppercase}
.rentals-head small{display:block;color:var(--mut);font-size:12px;font-weight:500;text-transform:none;margin-top:2px}
.rent-item{background:var(--card);border-radius:16px;padding:12px;margin-top:10px;display:flex;gap:12px;align-items:center;animation:cardIn .3s ease both}
.rent-mini{width:52px;height:52px;flex:0 0 auto;border-radius:14px;background:radial-gradient(120% 120% at 50% 15%,#1f271f,#12160f);
  display:flex;align-items:center;justify-content:center;color:var(--green)}
.rent-mini svg{width:26px;height:26px}
.rent-item-name{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rent-item-meta{color:var(--mut);font-size:12px;margin-top:2px}
.rent-badge{flex:0 0 auto;align-self:flex-start;font-size:11px;font-weight:700;padding:5px 10px;border-radius:9px;background:#1c221c;color:var(--mut)}
.rent-badge.fulfilled,.rent-badge.paid{background:rgba(49,208,122,.14);color:var(--green)}
.rent-badge.linking{background:rgba(224,178,58,.16);color:#e0b23a}
.rent-badge.failed{background:rgba(224,85,78,.16);color:#e0554e}

/* Нижняя навигация */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;display:flex;gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 26%)}
.bottom-nav .bn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;border-radius:16px;
  background:var(--card);color:var(--mut);font-weight:700;font-size:15px}
.bottom-nav .bn span{display:inline-flex}
.bottom-nav .bn svg{width:20px;height:20px}
.bottom-nav .bn.active{background:var(--green);color:#08110b;box-shadow:0 6px 18px -6px rgba(49,208,122,.5)}

/* Модалки / bottom-sheet */
.sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;
  z-index:50;backdrop-filter:blur(3px);animation:fadeIn .2s ease}
/* КРИТИЧНО: класс display:flex перебивает атрибут hidden — явно гасим оверлей, когда скрыт */
.sheet-overlay[hidden]{display:none!important}
[hidden]{display:none!important}
.sheet{width:100%;max-width:640px;background:#0e1210;border-radius:22px 22px 0 0;max-height:92vh;overflow-y:auto;
  padding:14px 16px calc(20px + env(safe-area-inset-bottom));animation:up .22s ease}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
.grip{width:38px;height:4px;border-radius:3px;background:#333;margin:2px auto 12px}
.sh-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sh-title{font-weight:900;font-size:19px;text-transform:uppercase}
.sh-x{width:32px;height:32px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--mut)}
.sh-x svg{width:17px;height:17px}
.sh-back{width:34px;height:34px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;margin-right:8px;color:var(--txt)}
.sh-back svg{width:20px;height:20px}

/* Модалка аренды — узкая, по центру */
.rent-wrap{max-width:340px;margin:0 auto;animation:fadeIn .25s ease}
.rent-hero{width:132px;height:132px;border-radius:26px;margin:2px auto 14px;background:radial-gradient(120% 120% at 50% 15%,#1f271f,#12160f);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.04);animation:pop .32s ease both}
.rent-hero::after{content:"";position:absolute;inset:0;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.06),transparent 45%);pointer-events:none}
.rent-hero img{width:78%;height:78%;object-fit:contain}
.rent-name{text-align:center;font-weight:900;font-size:21px;line-height:1.15}
.rent-id{text-align:center;color:var(--mut);font-size:13px;margin-top:3px}
.rent-tags{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px}
.rent-tags .t{background:#161b18;border:1px solid var(--line);border-radius:9px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--txt)}
.slider-block{margin:16px 0 6px;background:#0f130f;border:1px solid var(--line);border-radius:16px;padding:14px 15px 10px}
.slider-top{display:flex;justify-content:space-between;align-items:center;color:var(--txt);font-weight:700}
.slider-top .lbl{display:flex;align-items:center;gap:7px;color:var(--mut);font-weight:600;font-size:14px}
.slider-top .lbl .ic svg{width:15px;height:15px}
.slider-top b{color:var(--green)}
input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:4px;margin:12px 0 4px;background:#20261f}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--green);border:3px solid #0e1210;box-shadow:0 0 0 1px var(--green)}
.slider-ends{display:flex;justify-content:space-between;color:var(--mut);font-size:12px}
.breakdown{background:#12160f;border-radius:14px;padding:14px 16px;margin:14px 0}
.breakdown .r{display:flex;justify-content:space-between;padding:5px 0;color:var(--mut)}
.breakdown .r b{color:var(--txt)}
.breakdown .r.total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;color:var(--txt);font-weight:800}
.note{color:var(--mut2);font-size:12px;text-align:center;margin:6px 0}
.pay-total{display:flex;justify-content:space-between;align-items:center;margin:8px 2px}
.pay-total .k{color:var(--mut);font-size:13px}
.pay-total .v{color:var(--green);font-weight:900;font-size:22px}
.btn-primary{width:100%;background:var(--green);color:#08110b;font-weight:800;font-size:16px;padding:16px;border-radius:16px;margin-top:6px}
.btn-ghost{width:100%;background:var(--card);color:var(--txt);font-weight:700;font-size:15px;padding:14px;border-radius:14px}

/* Оплата */
.paycard{border-radius:16px;background:linear-gradient(120deg,#12241a,#0e1712);padding:16px;margin-bottom:14px}
.paycard .k{color:var(--green);font-size:11px;font-weight:800;letter-spacing:.14em}
.paycard .v{font-weight:900;font-size:30px;margin-top:4px}
.pm{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:10px}
.pm.on{border-color:var(--green)}
.pm .logo{width:42px;height:42px;border-radius:12px;background:#1c221c;display:flex;align-items:center;justify-content:center}
.pm .logo svg{width:22px;height:22px}
.pm.on{background:rgba(49,208,122,.06)}
.pm .info{flex:1}
.pm .info b{display:block;font-size:15px}
.pm .info small{color:var(--mut);font-size:12px}
.pm .radio{width:20px;height:20px;border-radius:50%;border:2px solid #3a423a}
.pm.on .radio{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px #0e1210}

/* Ожидание оплаты / успех */
.center-state{text-align:center;padding:20px 10px 8px}
.spinner{width:56px;height:56px;border-radius:50%;border:4px solid #1e241d;border-top-color:var(--green);margin:8px auto 16px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ok-check{width:68px;height:68px;border-radius:50%;background:rgba(49,208,122,.12);color:var(--green);display:flex;align-items:center;justify-content:center;margin:6px auto 14px;animation:pop .4s ease both}
.ok-check svg{width:34px;height:34px}
.ok-check.wait{background:rgba(255,255,255,.06);color:var(--mut)}
.ok-check.wait svg{animation:spin 2.4s linear infinite}
.center-state b{display:block;font-size:19px;margin-bottom:6px}
.center-state p{color:var(--mut);font-size:14px;margin:0 auto;max-width:320px}
.link{color:var(--green);text-decoration:underline;background:none;font-size:14px;margin-top:12px}

/* Фильтр-списки */
.f-search{width:100%;background:var(--card);border:none;border-radius:14px;padding:13px 15px;color:var(--txt);font-size:15px;outline:none;margin-bottom:12px}
.f-list{display:flex;flex-direction:column;gap:9px;max-height:52vh;overflow-y:auto}
.f-row{display:flex;align-items:center;gap:12px;background:#0f130f;border:1px solid var(--line);border-radius:14px;padding:13px 15px;font-weight:600}
.f-row.on{border-color:var(--green)}
.f-row .dotc{width:22px;height:22px;border-radius:50%;flex:0 0 auto}
.f-row .mini{width:34px;height:34px;border-radius:9px;background:#1c221c;flex:0 0 auto}
.f-actions{display:flex;gap:10px;margin-top:14px}
.f-actions .reset{flex:0 0 40%;background:var(--card);color:var(--txt);font-weight:700;padding:15px;border-radius:14px}
.f-actions .apply{flex:1;background:var(--green);color:#08110b;font-weight:800;padding:15px;border-radius:14px}
.f-hint{color:var(--mut);text-align:center;padding:30px 10px}
.price-row{display:flex;gap:12px}
.price-row .fld{flex:1}
.price-row .fld label{display:block;color:var(--mut);font-size:12px;margin-bottom:6px}
.price-row .fld input{width:100%;background:var(--card);border:none;border-radius:12px;padding:14px;color:var(--txt);font-size:16px;outline:none}
.sort-opt{display:flex;align-items:center;justify-content:space-between;background:#0f130f;border:1px solid var(--line);border-radius:14px;padding:15px;margin-bottom:9px;font-weight:600}
.sort-opt.on{border-color:var(--green);background:rgba(49,208,122,.06)}
.sort-opt .chk{color:var(--green);display:inline-flex}
.sort-opt .chk svg{width:20px;height:20px}
.f-sec-title{font-weight:800;margin:14px 0 8px}
.seg{display:flex;flex-direction:column;gap:9px}
.seg .opt{display:flex;align-items:center;justify-content:space-between;background:#0f130f;border:1px solid var(--line);border-radius:14px;padding:14px;font-weight:600}
.seg .opt.on{border-color:var(--green)}
.len-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.len-grid .lg{background:#0f130f;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;font-weight:700}
.len-grid .lg.on{border-color:var(--green)}
.digits{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.digits .d{background:#0f130f;border:1px solid var(--line);border-radius:12px;padding:16px 0;text-align:center;font-weight:800;font-size:18px;position:relative}
.digits .d.want{border-color:var(--green);color:var(--green)}
.digits .d.avoid{border-color:#e0554e;color:#e0554e}
.hidden{display:none}