/* Цвета берутся из темы Telegram (светлой или тёмной), с запасными значениями для браузера */
:root{
  --bg: var(--tg-theme-bg-color, #ffffff);
  --surface: var(--tg-theme-secondary-bg-color, #f4f0f5);
  --fg: var(--tg-theme-text-color, #1f1724);
  --muted: var(--tg-theme-hint-color, #7b6d81);
  --line: color-mix(in srgb, var(--fg) 10%, transparent);
  --accent: #c2336f;
  --on-accent: #ffffff;
  --online: #22a660;
  --offline: #9e91a3;
  --display: "Unbounded", "Onest", system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}

.top{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--line)}
.top h1{font-family:var(--display);font-size:18px;margin:0;letter-spacing:-.01em}
.sub{margin:2px 0 0;font-size:12px;color:var(--muted)}
main,#detail-view{padding:14px max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  display:flex;flex-direction:column;gap:14px}

.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;white-space:nowrap}
button.chip[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg));color:var(--accent)}
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}

.dot{width:8px;height:8px;border-radius:50%;background:var(--offline);flex:none;display:inline-block}
.dot.on{background:var(--online);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--online) 55%,transparent)}60%{box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){.dot.on{animation:none}}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg);text-align:left;padding:0;display:flex;flex-direction:column;transition:transform .15s}
.card:active{transform:scale(.98)}
.card.off .ph{filter:saturate(.3) brightness(.92)}
.ph{aspect-ratio:3/4;width:100%;position:relative;display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:38px;font-weight:700;background-size:cover;background-position:center}
.status{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(14,9,17,.6);color:#fff;font-family:var(--body);font-size:11px;font-weight:600;padding:4px 8px;border-radius:999px;backdrop-filter:blur(4px)}
.meta{padding:10px 11px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.name{font-weight:700}
.line{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.price{font-size:13px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums;margin-top:3px}
.empty{color:var(--muted);text-align:center;padding:40px 10px;margin:0}

.hero{aspect-ratio:4/5;max-height:62vh;border-radius:20px;font-size:64px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
h2{font-family:var(--display);font-size:22px;margin:0;text-wrap:balance}
.about{margin:0;font-size:15.5px}
.price-box{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--surface)}
.price-box b{font-size:20px;color:var(--accent);font-variant-numeric:tabular-nums}
.rules{font-size:12.5px;color:var(--muted);margin:0}
.btn{border:0;border-radius:12px;padding:14px 16px;font-weight:600;background:var(--accent);color:var(--on-accent);width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:var(--surface);color:var(--fg)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;font-size:14px;z-index:30;max-width:calc(100% - 32px);text-align:center}

/* цвета заглушек, когда нет фото */
.c0{background-image:linear-gradient(150deg,#b23a6f,#5b2a86)}
.c1{background-image:linear-gradient(150deg,#d0644a,#8e2d55)}
.c2{background-image:linear-gradient(150deg,#3a7bd5,#6a3093)}
.c3{background-image:linear-gradient(150deg,#1f8a70,#2c5364)}
.c4{background-image:linear-gradient(150deg,#c9773a,#6d214f)}
.c5{background-image:linear-gradient(150deg,#7f5af0,#2c8a9e)}
.c6{background-image:linear-gradient(150deg,#e0567a,#a8326b)}
.c7{background-image:linear-gradient(150deg,#4b6cb7,#182848)}
.c8{background-image:linear-gradient(150deg,#a2416b,#3f1f4e)}
.c9{background-image:linear-gradient(150deg,#2f9e8f,#6a3093)}

/* ---------- шапка: кнопка профиля ---------- */
.top-right{display:flex;align-items:center;gap:8px}
.icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;padding:0;color:var(--fg)}
.icon-btn:active{transform:scale(.95)}

/* ---------- профиль покупателя ---------- */
#page-view{padding:14px max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:16px}
.prof{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:8px}
.ava-wrap{position:relative;width:104px;height:104px;cursor:pointer;margin-bottom:6px}
.ava{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:40px;background-size:cover;background-position:center;background-image:linear-gradient(150deg,#b23a6f,#5b2a86)}
.ava-edit{position:absolute;right:0;bottom:0;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;border:3px solid var(--bg)}
.ava-wrap.loading .ava{opacity:.5}
.prof-name{font-family:var(--display);font-size:21px;font-weight:700;margin:0;word-break:break-word}
.prof-bio{margin:0;max-width:34ch;color:var(--fg);font-size:14.5px;white-space:pre-line;word-break:break-word}
.prof-bio.bio-empty{color:var(--muted)}
.link-btn{border:0;background:none;color:var(--accent);font-weight:600;font-size:14px;padding:4px 8px}
.menu{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg)}
.menu-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto 16px;align-items:center;gap:12px;padding:14px;border:0;border-top:1px solid var(--line);background:none;text-align:left;width:100%}
.menu-row:first-child{border-top:0}
.menu-row:active{background:var(--surface)}
.menu-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff}
.menu-ic.a{background:#c2336f}.menu-ic.b{background:#2f9e6b}.menu-ic.c{background:#3a7bd5}
.menu-row .val{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.menu-row .chev{color:var(--muted)}
.page-title{font-family:var(--display);font-size:20px;margin:0}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.field input,.field textarea{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:12px;padding:12px 14px;font:inherit;font-size:15.5px}
.field textarea{min-height:96px;resize:vertical}
.counter{align-self:flex-end;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.err{color:#d0473a;font-size:13px;margin:0}
.balance{display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--line);border-radius:16px;padding:22px 14px;background:var(--surface)}
.balance b{font-family:var(--display);font-size:34px;font-variant-numeric:tabular-nums}
.balance span{color:var(--muted);font-size:13px}
.hist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hist-row{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;border-top:1px solid var(--line);font-size:14px}
.hist-row:first-child{border-top:0}
.hist-row small{display:block;color:var(--muted);font-size:12px}
.note{font-size:13px;color:var(--muted);margin:0;text-align:center}
.done{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:30px 10px}
.done b{font-size:17px}

/* ---------- пополнение ---------- */
.sub-title{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:6px 0 -6px;font-weight:600}
.tp-box{display:flex;flex-direction:column;gap:12px}
.quick{display:flex;gap:8px;flex-wrap:wrap}
.methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:2px}
.method{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1.5px solid var(--line);background:var(--bg);border-radius:12px;padding:10px 12px;text-align:left;color:var(--fg)}
.method b{font-size:15px}
.method span{font-size:12px;color:var(--muted)}
.method[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.pay-card{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--surface)}
.pay-net{display:flex;align-items:baseline;gap:8px}
.pay-net b{font-size:17px}.pay-net span{color:var(--muted);font-size:13px}
.pay-row{display:flex;flex-direction:column;gap:6px}
.pay-row>span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.copy-line{display:flex;align-items:center;gap:10px;justify-content:space-between}
.copy-line code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;word-break:break-all;min-width:0;user-select:all}
.copy-line code.big{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.copy-line .chip{flex:none}
.pay-warn{margin:0;font-size:13px;color:var(--fg);background:color-mix(in srgb,#d98a2b 14%,var(--bg));border-radius:12px;padding:10px 12px}
.pay-status{display:flex;align-items:center;gap:10px;justify-content:center;font-size:14px;color:var(--muted);text-align:center}
.pay-status b{color:var(--fg);font-variant-numeric:tabular-nums}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.ok-mark{width:64px;height:64px;border-radius:50%;background:var(--online);color:#fff;display:grid;place-items:center;font-size:32px;font-weight:700}

/* ---------- ключ восстановления ---------- */
.menu-ic.d{background:#c98a1e}.menu-ic.e{background:#6a4fd0}
.key-box{border:1.5px dashed var(--accent);border-radius:16px;padding:20px 12px;text-align:center;background:var(--surface)}
.key-box code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:22px;font-weight:700;letter-spacing:.06em;user-select:all;word-break:break-all}
.key-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:19px!important;letter-spacing:.06em;text-transform:uppercase}
.check{display:flex;gap:10px;align-items:center;font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--accent)}

/* ---------- язык, ресурсы ---------- */
.menu-ic.f{background:#2c8a9e}.menu-ic.g{background:#3a7bd5}
.lang-row{grid-template-columns:36px minmax(0,1fr) auto 22px}
.lang-code{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--surface);font-weight:700;font-size:13px;letter-spacing:.04em}
.lang-row[aria-pressed="true"] .lang-code{background:var(--accent);color:var(--on-accent)}
.lang-check{color:var(--accent);display:grid;place-items:center}

/* ---------- значки валют ---------- */
.coin-wrap{position:relative;width:32px;height:32px;flex:none}
.coin{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:17px;line-height:1}
.coin.usdt{background:#26a17b}
.coin.ton{background:#0098ea}
.coin.tron{background:#e5303c}
.coin.star{background:color-mix(in srgb,#f5b301 22%,var(--bg));font-size:18px}
.coin-badge{position:absolute;right:-5px;bottom:-4px;border-radius:50%;border:2px solid var(--bg);display:block;line-height:0}
.coin-badge .coin{width:17px;height:17px;font-size:10px}
.coin-badge .coin svg{width:10px;height:10px}
.method{flex-direction:row!important;align-items:center!important;gap:10px!important}
.method-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.method-txt b{font-size:15px;line-height:1.2;overflow-wrap:anywhere}
.method-txt span{font-size:12px;color:var(--muted)}
.pay-net{align-items:center!important}

/* ---------- кабинет модели ---------- */
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--surface)}
.big{font-size:18px;font-weight:700}
.switch{width:58px;height:34px;border-radius:999px;border:0;background:var(--offline);position:relative;flex:none;transition:background .2s;padding:0}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .2s}
.switch[aria-checked="true"]{background:var(--online)}
.switch[aria-checked="true"]::after{transform:translateX(24px)}

/* ---------- кабинет модели: статус, галерея, выводы ---------- */
.switch:disabled{opacity:.4;cursor:not-allowed}
.note-box{display:flex;flex-direction:column;gap:4px}
.note-line{display:flex;gap:8px;align-items:center}
.note-line input{flex:1;min-width:0}
.note-line .chip{flex:none;padding:10px 14px}
.gal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:4px}
.gal-item{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--surface)}
.gal-item img,.gal-item video{width:100%;height:100%;object-fit:cover;display:block}
.gal-play{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;pointer-events:none}
.gal-acts{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:4px;padding:6px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.gal-btn{border:0;border-radius:8px;padding:5px 6px;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.92);color:#1f1724}
.gal-btn.danger{color:#c0392b}
.gal-add{aspect-ratio:3/4;border-radius:12px;border:1.5px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:30px;color:var(--accent);cursor:pointer;text-align:center;padding:6px}
.gal-add span{font-size:12px;color:var(--muted);line-height:1.25}
.gal-add.loading{opacity:.6;pointer-events:none}
.st{display:block;font-size:12px;font-weight:600}
.st-wait{color:#c07419}.st-ok{color:var(--online)}.st-bad{color:#d0473a}

/* ---------- каталог: комментарий к статусу и галерея ---------- */
.status-note{font-size:12px;color:var(--muted);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;border-radius:20px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery>*{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:4/5;max-height:62vh;border-radius:20px;object-fit:cover;background:var(--surface);width:100%}
.gal-wrap{position:relative}
.gal-wrap .status{z-index:2}
.gal-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.gal-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.gal-dots i.on{background:var(--accent)}
.detail-note{margin:-6px 0 0;font-size:14px;color:var(--muted);font-style:italic}
.coin.rub{background:#5b5bd6;font-size:17px}