/* ═══════════════════════════════════════════════════
   Hestatus AI. Стекло и пружины, темы: светлая, серая, красно-чёрная.
   Без backdrop-filter: в WebView Telegram он оставляет «призраки» при скролле.
   ═══════════════════════════════════════════════════ */

:root {
  /* отступы под системные и телеграмные элементы; JS уточняет их в полноэкранном режиме */
  --app-top: env(safe-area-inset-top, 0px);
  --app-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overscroll-behavior-y: none; }
body {
  font-family: "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--bg1);
  -webkit-font-smoothing: antialiased; transition: background var(--t-slow), color var(--t-med);
}
body, button { user-select: none; -webkit-user-select: none; }
textarea, input, .msg, .doc { user-select: text; -webkit-user-select: text; }
h1, h2, p { margin: 0; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--ac-text); }
.hidden { display: none !important; }
.muted { color: var(--ink2); font-size: 13px; }
.center { text-align: center; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg { width: 20px; height: 20px; flex: none; }

/* ═══ Фон ═══ */
#bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 4%, var(--soft) 0%, transparent 58%),
    radial-gradient(100% 80% at 92% 12%, var(--soft2) 0%, transparent 52%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  transition: background var(--t-slow);
}
.blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; will-change: transform; transition: background var(--t-slow); }
.b1 { width: 62vw; height: 62vw; top: -14vw; left: -18vw; background: radial-gradient(circle, var(--blob1), transparent 70%); animation: d1 26s ease-in-out infinite; }
.b2 { width: 54vw; height: 54vw; top: 24vh; right: -20vw; background: radial-gradient(circle, var(--blob2), transparent 70%); animation: d2 32s ease-in-out infinite; }
.b3 { width: 70vw; height: 70vw; bottom: -24vw; left: 8vw; background: radial-gradient(circle, var(--blob3), transparent 72%); animation: d3 38s ease-in-out infinite; }
@keyframes d1 { 50% { transform: translate3d(8vw, 6vh, 0) scale(1.12); } }
@keyframes d2 { 50% { transform: translate3d(-10vw, -5vh, 0) scale(1.08); } }
@keyframes d3 { 50% { transform: translate3d(6vw, -7vh, 0) scale(1.14); } }

/* ═══ Заставка, вход ═══ */
.screen {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--gap-md); padding: calc(var(--app-top) + 24px) 24px calc(var(--app-bottom) + 24px); text-align: center;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
}
.screen .st { width: min(52vw, 210px); }
.screen p { max-width: 330px; color: var(--ink2); }
.badge { background: linear-gradient(180deg, var(--ac1), var(--ac2)); color: var(--on-ac); border-radius: 10px; padding: 2px 9px; font-size: 14px; font-weight: 700; vertical-align: middle; }
@keyframes float { 50% { transform: translateY(-9px); } }
#splash { z-index: 60; transition: opacity 480ms var(--ease-out), transform 480ms var(--spring-soft); }
#splash.gone { opacity: 0; transform: scale(1.06); pointer-events: none; }
.track { width: min(62vw, 230px); height: 8px; border-radius: var(--r-pill); background: var(--soft2); overflow: hidden; }
.track span { display: block; height: 100%; background: linear-gradient(90deg, var(--ac1), var(--ac2)); transform: scaleX(.06); transform-origin: left; transition: transform 520ms var(--ease-out); }

/* ═══ Кнопки ═══ */
.btn {
  padding: 14px 24px; border-radius: var(--r-pill); font-weight: 650;
  background: linear-gradient(180deg, var(--ac1), var(--ac2)); color: var(--on-ac);
  box-shadow: var(--lift-md), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform var(--t-fast) var(--spring), filter var(--t-fast);
}
.btn:active { transform: scale(.94); filter: saturate(1.15); }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; }
.ibtn {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); color: var(--ink2); font-size: 22px; line-height: 1;
  transition: transform var(--t-fast) var(--spring), color var(--t-med);
}
.ibtn:active { transform: scale(.88); color: var(--ac-text); }

/* ═══ Оболочка и страницы ═══ */
#app { position: relative; z-index: 10; height: 100dvh; overflow: hidden; }
.page {
  position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none;
  padding: calc(var(--app-top) + 14px) 14px calc(var(--app-bottom) + 100px);
  display: flex; flex-direction: column; gap: 12px;
}
.page::-webkit-scrollbar { display: none; }
.ptitle { padding: 6px 4px 0; }
.phead { display: flex; align-items: center; gap: 12px; }
.phead h2 { font-size: 18px; line-height: 1.25; }

/* ═══ Нижняя навигация ═══ */
#nav {
  position: fixed; left: 50%; bottom: calc(var(--app-bottom) + 14px); transform: translateX(-50%); z-index: 20;
  display: flex; gap: 4px; padding: 6px; border-radius: var(--r-pill); background: var(--surface-solid);
}
#nav button {
  display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: var(--r-pill);
  color: var(--ink2); font-size: 14px; font-weight: 650;
  transition: color var(--t-med) var(--ease-out), background var(--t-med), transform var(--t-fast) var(--spring);
}
#nav button:active { transform: scale(.92); }
#nav button { position: relative; z-index: 1; }
#nav button.on { color: var(--ac-text); }
#nav button:not(.on) span { display: none; }
#nav-pill { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: var(--r-pill); background: var(--soft);
  transition: transform 460ms var(--spring), width 460ms var(--spring); pointer-events: none; }
#app[data-view="chat"] #nav, #app[data-view="rules"] #nav { display: none; }

/* ═══ Главная ═══ */
.profile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); }
.av { object-fit: cover; border-radius: 50%; background: var(--soft2); }
.av.big { width: 64px; height: 64px; box-shadow: 0 0 0 3px var(--surface-solid), var(--lift-sm); }
.pt { flex: 1; min-width: 0; }
.nm { font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { background: var(--surface); border-radius: var(--r-md); padding: 12px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 24px; letter-spacing: -0.02em; color: var(--ac-text); font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--ink2); }
.resume {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface);
  text-align: left; transition: transform var(--t-fast) var(--spring);
}
.resume:active { transform: scale(.98); }
.resume .av { width: 54px; height: 54px; }
.resume .rt { flex: 1; min-width: 0; }
.resume .rl { font-size: 12px; color: var(--ac-text); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.resume .rp { color: var(--ink2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu { display: flex; flex-direction: column; gap: 10px; }
.mrow {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface);
  text-align: left; font-weight: 600; transition: transform var(--t-fast) var(--spring);
}
.mrow:active { transform: scale(.98); }
.mi { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--soft); color: var(--ac-text); }
.ml { flex: 1; min-width: 0; }
.mv { color: var(--ink2); font-weight: 500; font-size: 14px; }
.chev { color: var(--ink3); font-size: 22px; line-height: 1; margin-left: 2px; }

/* ═══ Персонажи ═══ */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.card {
  position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface);
  overflow: hidden; text-align: left; transition: transform var(--t-fast) var(--spring);
}
.card:active { transform: scale(.97); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--soft2); }
.card .ct { padding: 10px 12px 12px; }
.card .ct b { display: block; font-size: 16px; }
.card .ct small { display: block; color: var(--ink2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.cur { box-shadow: inset 0 0 0 2px var(--ac2), var(--lift-sm); }
.card.add { align-items: center; justify-content: center; min-height: 190px; gap: 8px; color: var(--ac-text); font-weight: 650; background: var(--soft); }
.card.add svg { width: 34px; height: 34px; }
.card .del { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; font-size: 16px; }

/* ═══ Настройки ═══ */
.group { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); }
.gl { font-weight: 650; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; width: 100%; }
.srow.link { padding: 6px 0; }
.srow.danger .gl { color: var(--err); }
.seg2 { position: relative; display: flex; padding: 4px; border-radius: var(--r-pill); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--hair); }
.seg2 button { position: relative; z-index: 1; flex: 1; padding: 9px 6px; border-radius: var(--r-pill); font-size: 14px; font-weight: 650; color: var(--ink2); transition: color var(--t-med); }
.seg2 button.on { color: var(--on-ac); }
.seg2 .ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--ac1), var(--ac2)); transition: transform var(--t-med) var(--spring), width var(--t-med) var(--spring);
}
.switch { position: relative; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 2; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--hair); transition: background var(--t-med); }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-solid); box-shadow: var(--lift-sm); transition: transform var(--t-med) var(--spring); }
.switch input:checked + span { background: linear-gradient(180deg, var(--ac1), var(--ac2)); }
.switch input:checked + span::after { transform: translateX(20px); }

/* ═══ Правила ═══ */
.doc { padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); display: flex; flex-direction: column; gap: 14px; }
.doc h3 { margin: 0 0 4px; font-size: 16px; color: var(--ac-text); }
.doc p { font-size: 14.5px; color: var(--ink); }

/* ═══ Чат ═══ */
.chatpage { padding: 0; gap: 0; overflow: hidden; }
.top { display: flex; align-items: center; gap: 8px; padding: calc(var(--app-top) + 8px) 12px 8px; }
.who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: var(--r-pill); background: var(--surface); }
.who .av { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--surface-solid); }
.who .sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); }
.who .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

#msgs { flex: 1; overflow-y: auto; padding: 10px 14px 6px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
#msgs::-webkit-scrollbar { display: none; }
.msg { max-width: 82%; padding: 10px 15px; border-radius: 22px; white-space: pre-wrap; word-break: break-word; animation: pop 340ms var(--spring) both; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.msg.me { align-self: flex-end; border-bottom-right-radius: 8px; color: var(--on-ac); background: linear-gradient(180deg, var(--ac1), var(--ac2)); box-shadow: var(--lift-sm), inset 0 1px 0 rgba(255,255,255,.35); }
.msg.bot { align-self: flex-start; border-bottom-left-radius: 8px; background: var(--surface); box-shadow: var(--lift-sm), inset 0 0 0 1px var(--hair); }
.msg.err { align-self: center; background: none; box-shadow: none; color: var(--err); font-size: 14px; padding: 4px; max-width: 94%; text-align: center; }
.msg.photo { padding: 4px; background: var(--surface); }
.msg.photo img { display: block; width: min(68vw, 270px); border-radius: 18px; }
.msg.sticker { padding: 0; background: none; box-shadow: none; }
.msg.sticker img { width: 128px; height: 128px; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.msg.sticker.me { align-self: flex-end; }
.wait { display: flex; align-items: center; gap: 10px; }
.wait img { width: 44px; height: 44px; }
.dots span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--ink3); animation: b 1s infinite; }
.dots span:nth-child(2) { animation-delay: .15s; } .dots span:nth-child(3) { animation-delay: .3s; }
@keyframes b { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; } }
.empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--ink2); padding: 24px; }
.empty img { width: 150px; }

footer { padding: 4px 12px calc(var(--app-bottom) + 10px); }
.seg { display: flex; gap: 8px; padding: 2px 2px 8px; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink2); font-size: 14px; font-weight: 600;
  transition: transform var(--t-fast) var(--spring), background var(--t-med), color var(--t-med), opacity var(--t-med);
}
.chip svg { width: 17px; height: 17px; }
.chip:active { transform: scale(.92); }
.chip:disabled { pointer-events: none; }
.chip.on { background: linear-gradient(180deg, var(--ac1), var(--ac2)); color: var(--on-ac); box-shadow: var(--lift-md), inset 0 1px 0 rgba(255,255,255,.4); }
.chip.off { opacity: .38; }
.bar { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border-radius: 26px; background: var(--surface); }
#input { flex: 1; min-width: 0; resize: none; max-height: 120px; border: 0; outline: none; background: none; font: inherit; font-size: 16px; color: var(--ink); padding: 10px 6px; }
#input::placeholder { color: var(--ink3); }
.send { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--on-ac); background: linear-gradient(180deg, var(--ac1), var(--ac2)); box-shadow: var(--lift-sm); transition: transform var(--t-fast) var(--spring); }
.send:active { transform: scale(.88); }
.send:disabled { pointer-events: none; }
.bar .ibtn { background: none; width: 40px; height: 40px; }

/* ═══ Шторки ═══ */
.drawer { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; background: var(--scrim); animation: fade 200ms ease-out; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  width: 100%; max-height: calc(100% - var(--app-top) - 12px); overflow-y: auto; border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface-solid); padding: 10px 16px calc(var(--app-bottom) + 18px);
  animation: up 420ms var(--spring-soft) both; scrollbar-width: none;
}
.sheet::-webkit-scrollbar { display: none; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--soft2); margin: 0 auto 10px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sheet-head b { font-size: 19px; }
.sheet .btn { margin-top: 14px; }
label { display: block; margin: 12px 0 0; font-size: 14px; color: var(--ink2); }
label input:not([type=checkbox]), label textarea, label select {
  display: block; width: 100%; margin-top: 6px; border: 0; outline: none; border-radius: var(--r-md);
  background: var(--sunk); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); padding: 13px 14px; font: inherit;
}
label.check { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); }
.preview { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-top: 10px; }
.error { color: var(--err); min-height: 20px; margin: 8px 0 0; font-size: 14px; }

.pg { margin-top: 14px; }
.pg .pl { font-size: 13px; font-weight: 650; color: var(--ink2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts .chip { font-size: 14px; padding: 8px 14px; }
.opts .chip.lock { opacity: .38; }

.stgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.stgrid button { padding: 4px; border-radius: var(--r-md); transition: transform var(--t-fast) var(--spring), background var(--t-med); }
.stgrid button:active { transform: scale(.88); background: var(--soft); }
.stgrid img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ═══ Переходы между экранами ═══ */
.page.enter-r { animation: enterR 440ms var(--spring-soft) both; }
.page.enter-l { animation: enterL 440ms var(--spring-soft) both; }
.page.enter-f { animation: enterF 380ms var(--spring-soft) both; }
.page.leave-l { animation: leaveL 300ms var(--ease-out) both; pointer-events: none; }
.page.leave-r { animation: leaveR 300ms var(--ease-out) both; pointer-events: none; }
.page.leave-f { animation: leaveF 220ms ease-out both; pointer-events: none; }
@keyframes enterR { from { opacity: 0; transform: translateX(40px) scale(.98); } }
@keyframes enterL { from { opacity: 0; transform: translateX(-40px) scale(.98); } }
@keyframes enterF { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes leaveL { to { opacity: 0; transform: translateX(-40px) scale(.98); } }
@keyframes leaveR { to { opacity: 0; transform: translateX(40px) scale(.98); } }
@keyframes leaveF { to { opacity: 0; } }

/* элементы списков появляются по очереди; backwards, чтобы не перебивать :active */
.si { animation: sin 480ms var(--spring) backwards; animation-delay: calc(var(--i, 0) * 45ms + 70ms); }
@keyframes sin { from { opacity: 0; transform: translateY(18px) scale(.96); } }

/* закрытие шторок */
.drawer.closing { animation: fadeOut 240ms ease-in both; }
.drawer.closing .sheet { animation: downOut 260ms var(--ease-out) both; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes downOut { to { transform: translateY(60px); opacity: 0; } }

.linkbtn { color: var(--ac-text); font-weight: 650; padding: 4px 10px; text-decoration: underline; text-underline-offset: 3px; }
.who { animation: sin 460ms var(--spring) backwards; }

/* ═══ Заливка экрана при смене режима: круг растёт от нажатой кнопки ═══ */
#fill {
  position: fixed; inset: 0; z-index: 4; display: none; pointer-events: none;
  background:
    radial-gradient(120% 90% at 12% 4%, var(--soft) 0%, transparent 58%),
    radial-gradient(100% 80% at 92% 12%, var(--soft2) 0%, transparent 52%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}
#fill.on { display: block; }

/* ═══ Переливающиеся кнопки ═══ */
@keyframes flow { from { background-position: 0 0, 0% 50%; } to { background-position: 0 0, 200% 50%; } }
@keyframes flowOn { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes sheen { 0%, 55% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }

#chip-spicy { position: relative; overflow: hidden; border: 1.5px solid transparent;
  background:
    linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
    linear-gradient(110deg, var(--ac1), #ffc27a, var(--ac2), #ffc27a, var(--ac1)) border-box;
  background-size: 100% 100%, 200% 100%; animation: flow 3.6s linear infinite; }
#chip-spicy.on { border-color: transparent; background: linear-gradient(180deg, var(--ac1), var(--ac2)); animation: none; }
.btn, .send { position: relative; overflow: hidden; }
.btn:disabled::after { display: none; }

/* ═══ Откровенные картинки закрыты до подтверждения ═══ */
.msg.photo { position: relative; overflow: hidden; }
.msg.photo.nsfw img { filter: blur(30px) saturate(.8); transform: scale(1.12); }
.veil { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; text-align: center; color: #fff; background: rgba(20, 8, 12, .38); font-size: 13px; font-weight: 600; }
.veil b { font-size: 30px; padding: 4px 16px; border-radius: var(--r-pill); background: linear-gradient(180deg, var(--ac1), var(--ac2)); }

/* ═══ Ошибка с повтором ═══ */
.retry { margin-top: 6px; padding: 7px 16px; border-radius: var(--r-pill); background: var(--soft); color: var(--ac-text); font-weight: 650; font-size: 14px; }
.retry:active { transform: scale(.94); }
#sleep { z-index: 70; }

/* ═══ Баланс и пополнение ═══ */
.chipbal { display: flex; align-items: center; gap: 5px; height: 42px; padding: 0 13px; border-radius: var(--r-pill); background: var(--surface);
  color: var(--ac-text); font-weight: 700; transition: transform var(--t-fast) var(--spring); }
.chipbal svg { width: 16px; height: 16px; }
.chipbal:active { transform: scale(.92); }
.balbox { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: var(--r-md); background: var(--soft); margin: 6px 0; }
.balbox b { font-size: 24px; color: var(--ac-text); font-variant-numeric: tabular-nums; }
.shop-hint { padding: 10px 14px; border-radius: var(--r-md); background: var(--soft2); color: var(--ink); font-weight: 600; margin: 6px 0; }
.pack { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); margin: 8px 0;
  box-shadow: inset 0 0 0 1px var(--hair); }
.pack .pt b { display: block; font-size: 17px; }
.pack .pt small { color: var(--ink2); }
.pack .pb { display: flex; gap: 8px; }
.pack .pb button { padding: 9px 13px; border-radius: var(--r-pill); font-weight: 700; font-size: 14px; color: var(--on-ac);
  background: linear-gradient(180deg, var(--ac1), var(--ac2)); transition: transform var(--t-fast) var(--spring); }
.pack .pb button.alt { background: var(--sunk); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.pack .pb button:active { transform: scale(.92); }
.pack .pb button:disabled { opacity: .5; }
.tonbox { padding: 14px; border-radius: var(--r-md); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--hair); margin: 8px 0; }
.tonbox .line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; }
.tonbox code { font-size: 12.5px; word-break: break-all; color: var(--ink); }
.tonbox .big { font-size: 22px; font-weight: 800; color: var(--ac-text); }
.tonbox .warn { color: var(--err); font-weight: 650; font-size: 13px; margin: 6px 0; }
.tonbox .mini { padding: 6px 12px; border-radius: var(--r-pill); background: var(--soft); color: var(--ac-text); font-weight: 650; font-size: 13px; }
.row2 { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.row2 input { margin: 0 !important; }
.row2 .btn { margin: 0; padding: 12px 16px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--app-bottom) + 90px); transform: translateX(-50%); z-index: 80; padding: 11px 20px; border-radius: var(--r-pill);
  background: var(--surface-solid); box-shadow: var(--lift-md); font-weight: 650; max-width: 90vw; text-align: center; animation: sin 360ms var(--spring) backwards; }

/* смена режима: без размазанных переходов и без стандартного кроссфейда */
.notr *, .notr *::before, .notr *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* кредиты одной кнопкой */
.creditbtn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: transform var(--t-fast) var(--spring); }
.creditbtn:active { transform: scale(.98); }
.cbi { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; color: var(--on-ac); background: linear-gradient(180deg, var(--ac1), var(--ac2)); }
.cbi svg { width: 22px; height: 22px; }
.cbt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cbt b { font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ac-text); font-variant-numeric: tabular-nums; }
.cbt span { font-size: 12px; color: var(--ink2); }
.cbp { padding: 8px 14px; border-radius: var(--r-pill); font-weight: 650; font-size: 14px; color: var(--on-ac); background: linear-gradient(180deg, var(--ac1), var(--ac2)); }
/* история фото */
.ggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gcell { position: relative; aspect-ratio: 3 / 4; padding: 0; overflow: hidden; border-radius: var(--r-md); background: var(--surface); }
.gcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gcell.nsfw img { filter: blur(22px); transform: scale(1.15); }
.gveil { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 20px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.gempty { text-align: center; padding: 40px 0; }
.vbar .btn { padding: 10px 16px; border-radius: var(--r-pill); font-weight: 650; color: #fff; background: rgba(255,255,255,.14); }
.msg.photo img { cursor: zoom-in; }

/* ожидание: без стикеров и точек, переливается сам текст */
.wait { display: flex; align-items: center; }
.wait .shim { font-weight: 600; background: linear-gradient(100deg, var(--ink3) 30%, var(--ink) 50%, var(--ink3) 70%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: shimtext 1.8s linear infinite; }
@keyframes shimtext { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* подсказка «?» */
.qm { width: 22px; height: 22px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--ink2);
  background: var(--sunk); box-shadow: inset 0 0 0 1px var(--hair); vertical-align: middle; }
.chip.qm { width: 34px; height: 34px; padding: 0; flex: none; justify-content: center; font-size: 15px; }
/* просмотр фото */
.vx { position: absolute; top: calc(var(--app-top, 0px) + 14px); right: 14px; width: 40px; height: 40px; border-radius: 50%; font-size: 28px; line-height: 1; color: #fff; background: rgba(255,255,255,.16); }
.vbar { width: 100%; max-width: 420px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vbtn:active { transform: scale(.96); }
.vbtn:disabled { opacity: .6; pointer-events: none; }

.viewer { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; gap: 14px; background: rgba(0,0,0,.94); animation: fade 200ms ease-out;
  padding: calc(var(--app-top, 0px) + 64px) 16px calc(var(--app-bottom, 0px) + 26px); }
.viewer.hidden { display: none; }
.vimg { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.vimg img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 16px; touch-action: pinch-zoom; }
.vbar { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 460px; margin: 0 auto; }
.vbtn { display: flex; align-items: center; justify-content: center; gap: 9px; height: 54px; border-radius: var(--r-pill); font-weight: 650; font-size: 16px;
  color: #fff; background: rgba(255,255,255,.14); transition: transform var(--t-fast) var(--spring), opacity var(--t-med); }
.vbtn svg { width: 20px; height: 20px; flex: none; }
.vbtn.main { background: linear-gradient(180deg, var(--ac1), var(--ac2)); color: var(--on-ac); box-shadow: var(--lift-md); }
.vbtn:active { transform: scale(.96); }
.vbtn.busy { pointer-events: none; opacity: .75; }

/* ═══ Жидкое стекло: размытие фона, мягкий блик сверху, без контурных рамок ═══ */
:root {
  --lg-hi: rgba(255, 255, 255, 0.30);
  --lg-lo: rgba(0, 0, 0, 0.22);
  --lg-drop: rgba(0, 0, 0, 0.30);
  --lg-sheen: rgba(255, 255, 255, 0.09);
}
[data-theme="light"] {
  --lg-hi: rgba(255, 255, 255, 0.95);
  --lg-lo: rgba(217, 69, 113, 0.10);
  --lg-drop: rgba(217, 69, 113, 0.22);
  --lg-sheen: rgba(255, 255, 255, 0.55);
  --surface: rgba(255, 255, 255, 0.52);
}
.glass, .glass-active {
  -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
  background-image: linear-gradient(150deg, var(--lg-sheen), rgba(255, 255, 255, 0) 52%);
  box-shadow:
    inset 0 1px 0 0 var(--lg-hi),
    inset 0 -14px 22px -16px var(--lg-lo),
    0 10px 28px -14px var(--lg-drop);
}
.glass-indicator { box-shadow: inset 0 1px 0 0 var(--lg-hi), 0 3px 8px -2px var(--lg-drop); }
.chip.glass, .ibtn.glass, .who.glass, .chipbal.glass { box-shadow: inset 0 1px 0 0 var(--lg-hi), 0 6px 16px -10px var(--lg-drop); }
#chip-spicy { box-shadow: none; }

/* значки без плашек и рамок */
.mi { width: 30px; height: 30px; background: none; border-radius: 0; }
.mi svg { width: 26px; height: 26px; }
.cbi { width: 34px; height: 34px; background: none; box-shadow: none; color: var(--ac-text); border-radius: 0; }
.cbi svg { width: 30px; height: 30px; }

/* плашка режима вместо «18+»: понятно, что включено, и переключается одним нажатием */
.modepill { margin-left: auto; padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 650; color: var(--ink2);
  background: var(--sunk); transition: transform var(--t-fast) var(--spring), background var(--t-med), color var(--t-med); }
.modepill.on { color: var(--on-ac); background: linear-gradient(180deg, var(--ac1), var(--ac2)); }
.modepill:active { transform: scale(.94); }

/* заставка: девушка облокотилась на название */
.splash-art { width: min(90vw, 440px); height: auto; filter: drop-shadow(0 18px 30px var(--lg-drop)); animation: sin 650ms var(--spring) both; }

/* подсказка рядом с вопросом, со стрелкой и крестиком */
.hint { position: fixed; z-index: 90; padding: 14px 40px 14px 16px; border-radius: var(--r-md); font-size: 14px; line-height: 1.4; color: var(--ink);
  background-color: var(--surface-solid); animation: sin 220ms var(--spring) both; }
.hint .hx { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--ink2); background: var(--sunk); }
.hint .harr { position: absolute; top: -7px; width: 14px; height: 14px; margin-left: -7px; transform: rotate(45deg); background: var(--surface-solid); border-radius: 3px; }
.hint.up .harr { top: auto; bottom: -7px; }

/* жидкое стекло на кнопках во всех темах, в красной и серой заметнее */
[data-theme="dark"] { --lg-hi: rgba(255, 220, 228, 0.42); --lg-lo: rgba(0, 0, 0, 0.45); --lg-drop: rgba(0, 0, 0, 0.55); --lg-sheen: rgba(255, 140, 160, 0.16); --surface: rgba(255, 255, 255, 0.09); }
[data-theme="gray"] { --lg-hi: rgba(255, 255, 255, 0.34); --lg-sheen: rgba(255, 255, 255, 0.12); --surface: rgba(255, 255, 255, 0.09); }
.chip:not(.on), .ibtn, .chipbal, .who, .btn.ghost, .modepill:not(.on), .qm, .vx {
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  background-image: linear-gradient(150deg, var(--lg-sheen), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 0 var(--lg-hi), inset 0 -10px 16px -12px var(--lg-lo), 0 6px 16px -10px var(--lg-drop);
}
.chip.on, .send, .cbp, .vbtn.main, .modepill.on, .btn:not(.ghost):not(.danger), .retry, .tab.on, #chip-spicy.on {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0) 52%), linear-gradient(180deg, var(--ac1), var(--ac2));
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.65), inset 0 -10px 14px -10px rgba(0, 0, 0, 0.35), 0 8px 18px -8px var(--ac2);
}
.vbtn { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.3); }
.vbtn.main { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.65), 0 8px 18px -8px var(--ac2); }

/* печатает: непрерывное переливание текста без перескока */
.wait .shim { background: linear-gradient(100deg, var(--ink3) 0, var(--ink3) 30%, var(--ink) 50%, var(--ink3) 70%, var(--ink3) 100%) 0 0 / 180px 100% repeat-x;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: shimtext 1.5s linear infinite; }
@keyframes shimtext { from { background-position: 0 0; } to { background-position: 180px 0; } }
.loading { background: linear-gradient(100deg, var(--ink3) 0, var(--ink3) 30%, var(--ink) 50%, var(--ink3) 70%, var(--ink3) 100%) 0 0 / 180px 100% repeat-x;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: shimtext 1.5s linear infinite; }

/* меню выбора тона */
.hint.menu { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.mitem { text-align: left; padding: 12px 14px; border-radius: var(--r-sm); font-weight: 600; color: var(--ink); }
.mitem.on { background: var(--soft); color: var(--ac-text); }
.mitem:active { transform: scale(.98); }

/* шаблоны фото и кнопка «Нарисовать» в стиле жидкого стекла */
.tplbtn { align-self: flex-start; margin: 6px 0; padding: 9px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 650; color: var(--ink2);
  background: var(--sunk); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 0 var(--lg-hi); }
.tpls { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.tpl { padding: 8px 13px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; color: var(--ink2); background: var(--sunk); box-shadow: inset 0 1px 0 0 var(--lg-hi); transition: transform var(--t-fast) var(--spring), background var(--t-med), color var(--t-med); }
.tpl.on { color: var(--ac-text); background: var(--soft2); box-shadow: inset 0 0 0 1px var(--ac2), inset 0 1px 0 0 var(--lg-hi); }
.tpl:active { transform: scale(.94); }
.gobtn { width: 100%; margin-top: 8px; padding: 15px; border-radius: var(--r-pill); font-weight: 700; font-size: 16px; color: var(--ink);
  background-color: var(--soft2); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
  box-shadow: inset 0 1px 0 0 var(--lg-hi), inset 0 -12px 18px -14px var(--lg-lo), 0 10px 24px -12px var(--ac2); transition: transform var(--t-fast) var(--spring); }
.gobtn:active { transform: scale(.97); }
.sheet label { display: block; }
.sheet { display: flex; flex-direction: column; }

/* зум фото */
.vimg img { touch-action: none; transform-origin: center center; will-change: transform; user-select: none; -webkit-user-select: none; }
.vimg { overflow: hidden; touch-action: none; }

/* экран сна без переходов */
#sleep, #sleep * { animation: none !important; transition: none !important; }

/* фото от человека */
.aprev { display: flex; align-items: center; gap: 10px; margin: 0 4px 8px; padding: 8px 10px; border-radius: var(--r-md); font-size: 13px; color: var(--ink2); }
.aprev img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: none; }
.aprev span { flex: 1; min-width: 0; }
.aprev button { width: 30px; height: 30px; border-radius: 50%; font-size: 20px; line-height: 1; color: var(--ink2); background: var(--sunk); flex: none; }
.msg.me.photo { padding: 4px; background: linear-gradient(180deg, var(--ac1), var(--ac2)); color: var(--on-ac); }
.msg.me.photo img { display: block; width: min(60vw, 240px); border-radius: 18px; cursor: zoom-in; }
.msg.me.photo .cap { padding: 7px 10px 5px; }

/* крестики: значок ровно по центру, без рамки и кольца */
.xb { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--sunk); color: var(--ink2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background-image: none; }
.ibtn.xb { width: 40px; height: 40px; }
.xb svg { width: 18px; height: 18px; display: block; }
.vx.xb { width: 40px; height: 40px; color: #fff; background: rgba(255, 255, 255, 0.16); font-size: inherit; }
.hint .hx { display: grid; place-items: center; padding: 0; }
.hint .hx svg { width: 14px; height: 14px; }
.aprev button.xb { width: 30px; height: 30px; }
.aprev button.xb svg { width: 14px; height: 14px; }
/* профиль */
.pf { display: block; margin-top: 10px; font-size: 13px; color: var(--ink2); }
.pf input { width: 100%; margin-top: 4px; padding: 11px 13px; border: 0; border-radius: var(--r-sm); background: var(--sunk); color: var(--ink); font: inherit; font-size: 16px; outline: none; box-shadow: inset 0 1px 0 0 var(--lg-hi); }
.pfrow { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }

/* фото в чате не сплющивается */
#msgs > * { flex-shrink: 0; }
.msg.photo img, .msg.me.photo img { height: auto; max-width: 100%; object-fit: cover; }
.vbtn.wide { grid-column: 1 / -1; }

/* значки без обводок и колец везде */
.ibtn, .ibtn.glass, .bar .ibtn, .qm, .chip.qm {
  box-shadow: none !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.bar .ibtn { background: none; }
.bar .ibtn:active { background: var(--sunk); }
#pf-country { cursor: pointer; }
/* выбор страны */
.csearch { width: 100%; margin: 4px 0 8px; padding: 12px 14px; border: 0; border-radius: var(--r-pill); background: var(--sunk); color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.clist { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: none; }
.clist::-webkit-scrollbar { display: none; }
.citem { text-align: left; padding: 13px 14px; border-radius: var(--r-sm); font-weight: 600; color: var(--ink); }
.citem.on { background: var(--soft); color: var(--ac-text); }
.citem.dim { color: var(--ink2); font-weight: 500; }
.citem:active { background: var(--sunk); }

/* ═══ Кнопки: спокойное стекло с акцентом, без свечений ═══ */
:root { --btn-bg: rgba(244, 98, 140, 0.92); --btn-hi: rgba(255, 255, 255, 0.6); --btn-dr: rgba(200, 60, 100, 0.30); }
[data-theme="dark"] { --btn-bg: rgba(200, 40, 62, 0.80); --btn-hi: rgba(255, 205, 212, 0.38); --btn-dr: rgba(0, 0, 0, 0.55); }
[data-theme="gray"] { --btn-bg: rgba(184, 192, 208, 0.66); --btn-hi: rgba(255, 255, 255, 0.45); --btn-dr: rgba(0, 0, 0, 0.5); }
.btn:not(.ghost):not(.danger), .send, .cbp, .vbtn.main, .modepill.on, .chip.on, #chip-spicy.on, .tab.on, .retry, .gobtn, .pack .pb button:not(.alt) {
  background-color: var(--btn-bg) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 55%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 0 var(--btn-hi), 0 3px 8px -3px var(--btn-dr) !important;
  filter: none !important; border: 0 !important;
}
.btn:active, .btn:disabled { filter: none !important; }
.pack .pb button { padding: 9px 14px; font-weight: 650; }
.pack .pb button.alt { background-color: var(--sunk) !important; background-image: none !important; color: var(--ink) !important; box-shadow: inset 0 1px 0 0 var(--lg-hi) !important; display: inline-flex; align-items: center; gap: 4px; }
.ico { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; flex: none; }
.chipbal .ico, .cbi .ico { width: 20px; height: 20px; }
.cbi .ico { width: 30px; height: 30px; }

/* ═══ Сообщения: ответы, свайп, меню ═══ */
.msg { animation-fill-mode: backwards !important; touch-action: pan-y; -webkit-touch-callout: none; }
.msg .quote { padding: 4px 9px; margin-bottom: 5px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); font-size: 13px; opacity: .85; border-left: 3px solid var(--ac1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .mt { white-space: pre-wrap; }

/* ═══ Просмотр как редактор: версии слева, поле правок внизу ═══ */
.viewer .vimg { position: relative; }
.vbusy { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vbusy .shim { font-weight: 700; font-size: 17px; }
.vers { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 8px; max-height: 60%; overflow-y: auto; scrollbar-width: none; }
.vers::-webkit-scrollbar { display: none; }
.vth { width: 46px; height: 46px; flex: none; padding: 0; border-radius: 12px; overflow: hidden; opacity: .55; transition: opacity var(--t-fast), transform var(--t-fast) var(--spring); }
.vth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vth.on { opacity: 1; transform: scale(1.1); }
.vform { flex: none; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 460px; margin: 0 auto; padding: 6px 6px 6px 16px; border-radius: 28px; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25); }
.vform.hidden { display: none; }
.vform input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: #fff; font: inherit; font-size: 16px; }
.vform input::placeholder { color: rgba(255, 255, 255, 0.55); }
.vform .send { width: 42px; height: 42px; flex: none; }
.vbar { max-width: 460px; }
.vbtn { height: 48px; }
.row2 .btn { white-space: nowrap; flex: none; }
.row2 input { min-width: 0; }

.lot { display: inline-block; }
.lot img, .lot svg { width: 100%; height: 100%; display: block; }

/* ═══ Пополнение: способ оплаты, пакеты, экран оплаты ═══ */
.balrow { display: flex; align-items: flex-end; justify-content: space-between; margin: 4px 0 10px; }
.balrow small { display: block; color: var(--ink2); font-size: 13px; }
.balrow b { font-size: 30px; letter-spacing: -0.02em; color: var(--ac-text); font-variant-numeric: tabular-nums; }
.linkbtn { color: var(--ac-text); font-weight: 650; font-size: 14px; padding: 8px 4px; }
#pay-methods { margin: 6px 0 12px; }
.packs { display: flex; flex-direction: column; gap: 8px; }
.pcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--sunk); text-align: left; color: var(--ink);
  box-shadow: inset 0 1px 0 0 var(--lg-hi); transition: transform var(--t-fast) var(--spring), background var(--t-med); }
.pcard:active { transform: scale(.975); background: var(--soft); }
.pcard:disabled { opacity: .6; }
.pcard .pc-l b { display: block; font-size: 17px; }
.pcard small { display: block; color: var(--ink2); font-size: 13px; margin-top: 2px; }
.pcard .pc-r { text-align: right; }
.pcard .pc-r b { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; color: var(--ac-text); }
.pcard.test { border-style: dashed; }
.payview { display: flex; flex-direction: column; gap: 10px; }
.pback { align-self: flex-start; font-weight: 650; color: var(--ink2); padding: 4px 0; font-size: 15px; }
.ptitle2 { margin: 0; font-size: 20px; }
.pamount { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: var(--r-md); background: var(--soft); font-size: 26px; font-weight: 800; color: var(--ac-text); letter-spacing: -0.01em; }
.prow { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--sunk); }
.prow .pl { color: var(--ink2); font-size: 13px; min-width: 84px; }
.prow code { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.cpy { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--ink2); background: var(--sunk); }
.pamount .cpy { background: rgba(255, 255, 255, 0.14); color: inherit; }
.cpy svg { width: 18px; height: 18px; }
.cpy:active { transform: scale(.9); }
.pnote { margin: 2px 2px 4px; font-size: 13px; color: var(--ink2); line-height: 1.4; }
.alt2 { align-self: stretch; text-align: center; margin: 0; }
.pwait { text-align: center; margin: 6px 0 2px; font-weight: 600; }
.pdone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0 4px; }
.pdone img { width: 84px; height: 84px; animation: sin 500ms var(--spring) both; }
.payview .pdone ~ b { text-align: center; font-size: 24px; }
.payview > b { text-align: center; font-size: 24px; margin-top: 6px; }
.payview > small { text-align: center; color: var(--ink2); }
/* история пополнений */
.hlist { display: flex; flex-direction: column; gap: 8px; }
.hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); }
.hrow b { display: block; font-size: 17px; }
.hrow small { display: block; color: var(--ink2); font-size: 13px; margin-top: 2px; }
.hst { padding: 5px 11px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.hst.paid { color: #1d8f5b; background: rgba(60, 207, 145, 0.18); }
.hst.pending { color: #b9831a; background: rgba(240, 180, 50, 0.20); }
.hst.failed { color: var(--err); background: rgba(255, 110, 110, 0.16); }
[data-theme="dark"] .hst.paid, [data-theme="gray"] .hst.paid { color: #5be3a6; }
[data-theme="dark"] .hst.pending, [data-theme="gray"] .hst.pending { color: #f3c969; }
/* под открытой шторкой нижнее меню скрыто */
body:has(.drawer:not(.hidden)) #nav { opacity: 0; pointer-events: none; }

/* плашка «предложить персонажа» */
.sugcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0 0 12px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); text-align: left; transition: transform var(--t-fast) var(--spring); }
.sugcard:active { transform: scale(.98); }
.sugcard .sg-t b { display: block; font-size: 16px; color: var(--ac-text); }
.sugcard .sg-t small { display: block; color: var(--ink2); font-size: 13px; margin-top: 2px; }