/* index.css — вынесено из index.html. Стили приложения-гаранта. */
/* Адаптивный базовый размер: контент приложения плавно масштабируется
под ширину экрана. Узкие — мельче, широкие — крупнее, комфортно глазу. */
html { font-size: clamp(13px, 11.5px + 0.42vw, 17px); }
/* ===== РАЗМЕР ИКОНКИ КАТЕГОРИИ — меняй это число (например 28px, 36px, 44px) ===== */
:root { --cat-icon-size: 36px; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
font-family: "Orbitron", "Manrope", "Geist", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background:
radial-gradient(900px 480px at 50% -8%, rgba(77,171,247,.12), transparent 60%),
radial-gradient(700px 380px at 50% 108%, rgba(255,212,59,.084), transparent 60%),
#0a0a0f;
color: #e8e8ed;
position: relative;
padding: 16px;
padding-bottom: calc(5.625rem + env(safe-area-inset-bottom, 0px));
padding-top: 1rem;
font-size: 0.9375rem;
position: relative;
min-height: 100vh;
}
body::before {
content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
background-image:
linear-gradient(rgba(77,171,247,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(77,171,247,.05) 1px, transparent 1px);
background-size: 26px 26px;
}
body::after {
content: ""; position: fixed; left: 50%; bottom: 0; z-index: -1;
width: 220%; height: 42vh; pointer-events: none;
transform: translateX(-50%) perspective(280px) rotateX(62deg);
transform-origin: bottom center;
background-image:
linear-gradient(rgba(255,212,59,.16) 2px, transparent 2px),
linear-gradient(90deg, rgba(255,212,59,.10) 2px, transparent 2px);
background-size: 42px 42px;
-webkit-mask-image: linear-gradient(to top, #000, transparent 85%);
mask-image: linear-gradient(to top, #000, transparent 85%);
animation: gridmove 3.5s linear infinite;
}
@keyframes gridmove { from { background-position: 0 0; } to { background-position: 0 42px; } }
.card {
background: #1a1a22;
border: 1px solid #2a2a35;
border-radius: 16px;
padding: 16px;
margin-bottom: 0.75rem;
box-shadow: 0 8px 24px rgba(0,0,0,.28);
animation: cardIn .28s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Ограничение ширины: на десктопе контент — «телефонной» колонкой по центру.
На мобиле без эффекта (экран уже ≤480px). Меняй 480px, если нужна другая ширина. */
#app, .nav, #toast { max-width: 100%; margin-left: auto; margin-right: auto; }
/* Мобильный: отступ сверху под иконки (кубок/колокол/шестерёнка).
ВАЖНО: без safe-area! В fullscreen системную зону (вырез/часы) уже
отрабатывает body.fs ниже. Если добавить safe-area и сюда — она
прибавляется дважды и сверху появляется огромная пустота. */
#app { padding-top: 0.5rem; }
#device { display: contents; }
#chatpanel { display: none; }
#cpRail { width: 82px; flex: none; background: transparent; padding: 0.625rem 0; display: flex; flex-direction: column; gap: 0.25rem; overflow: hidden; pointer-events: none; box-shadow: inset -1px 0 0 rgba(168,85,247,.10); }
.cp-rail-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.4375rem 0.25rem 0.375rem; border-radius: 12px; margin: 0 0.4375rem; }
.cp-rail-item.active { background: linear-gradient(180deg, rgba(25,224,255,.14), rgba(168,85,247,.12)); box-shadow: inset 0 0 0 1px rgba(25,224,255,.22); }
.cp-rail-ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; color: #c4cfda; overflow: hidden; }
.cp-rail-ic img { width: 100%; height: 100%; object-fit: cover; }
.cp-rail-nm { font-size: 0.625rem; color: #8a8a96; line-height: 1.15; text-align: center; max-height: 24px; overflow: hidden; }
.cp-rail-item.active .cp-rail-nm { color: #19e0ff; }
#cpMain { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
#chatpanel .cp-head { padding: 0.8125rem 0.9375rem; color: #e8e8ed; font-weight: 600; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 1px 0 rgba(168,85,247,.12); }
#chatpanel .cp-head .cp-htitle { background: linear-gradient(90deg,#19e0ff,#a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; letter-spacing: .02em; }
#chatpanel .cp-members { margin-left: auto; font-size: 0.6875rem; color: #8a8a96; font-weight: 500; white-space: nowrap; }
#chatpanel .cp-dot { width: 8px; height: 8px; border-radius: 50%; background: #51cf66; box-shadow: 0 0 8px rgba(81,207,102,.6); flex: none; }
.cp-pin { display: flex; gap: 0.5625rem; align-items: center; padding: 0.5625rem 0.9375rem; background: linear-gradient(90deg, rgba(25,224,255,.06), transparent); position: relative; cursor: pointer; user-select: none; }
.cp-pin-bar { width: 3px; align-self: stretch; border-radius: 2px; background: linear-gradient(180deg,#19e0ff,#a855f7); flex: none; }
.cp-pin-t { font-size: 0.75rem; color: #b9bcc6; line-height: 1.3; flex: 1; min-width: 0; }
.cp-pin-t b { color: #19e0ff; font-weight: 600; display: block; font-size: 0.75rem; }
#cpPinPreview { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pin-count { flex: none; font-size: 0.6875rem; font-weight: 700; color: #19e0ff; background: rgba(25,224,255,.12); border: 1px solid rgba(25,224,255,.25); border-radius: 10px; padding: 0.125rem 0.5rem; white-space: nowrap; }
.cp-pin-caret { flex: none; color: #7a7a86; font-size: 0.6875rem; transition: transform .2s ease; }
.cp-pinlist { position: absolute; top: 100%; left: 0; right: 0; max-height: 320px; overflow-y: auto; background: rgba(12,12,18,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(168,85,247,.18); box-shadow: 0 14px 36px rgba(0,0,0,.5); z-index: 6; padding: 0.25rem 0; display: none; cursor: default; scrollbar-width: none; }
.cp-pinlist.open { display: block; }
.cp-pinlist::-webkit-scrollbar { width: 6px; }
.cp-pinlist::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(25,224,255,.45), rgba(168,85,247,.45)); border-radius: 4px; }
.cp-pinitem { display: flex; gap: 0.5rem; align-items: stretch; padding: 0.5rem 0.875rem; cursor: pointer; transition: background .15s ease; }
.cp-pinitem:hover { background: rgba(25,224,255,.06); }
.cp-pinitem + .cp-pinitem { border-top: 1px solid rgba(255,255,255,.04); }
.cp-pinitem-c { min-width: 0; }
.cp-pinitem-a { display: block; color: #19e0ff; font-size: 0.6875rem; font-weight: 600; }
.cp-pinitem-t { display: block; color: #cdd0d8; font-size: 0.75rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
#chatpanel .cp-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0; scrollbar-width: none; }
#chatpanel .cp-body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.cp-pinlist::-webkit-scrollbar { width: 0; height: 0; display: none; }
#chatpanel .cp-body::-webkit-scrollbar { width: 6px; }
#chatpanel .cp-body::-webkit-scrollbar-track { background: transparent; }
#chatpanel .cp-body::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 4px; transition: background-color .4s ease; }
#chatpanel .cp-body.cp-scrolling { scrollbar-color: rgba(138,116,232,.62) transparent; }
#chatpanel .cp-body.cp-scrolling::-webkit-scrollbar-thumb { background-color: rgba(138,116,232,.62); }
.cp-empty { margin: auto; color: #6f6f7a; font-size: 0.75rem; text-align: center; padding: 1.25rem; }
.cp-date { align-self: center; background: rgba(255,255,255,.06); color: #9a9aa6; font-size: 0.6875rem; padding: 0.1875rem 0.6875rem; border-radius: 11px; }
.cp-msg { display: flex; gap: 0.625rem; align-items: flex-start; margin-top: 0.625rem; }
.cp-msg.cp-grp { margin-top: 0.125rem; }
.cp-av-sp { width: 33px; flex: none; }
.cp-body > *:first-child { margin-top: 0; }
.cp-msg.cp-grp .cp-bubble { border-top-left-radius: 15px; }
.cp-msg.cp-in { animation: cpIn .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes cpIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.cp-av { width: 33px; height: 33px; border-radius: 50%; flex: none; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(25,224,255,.22), 0 2px 6px rgba(0,0,0,.35); }
.cp-av-ph { background: linear-gradient(135deg, rgba(25,224,255,.28), rgba(168,85,247,.28)); color: #eef1f6; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 600; }
.cp-bubble { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 44px); width: fit-content; background: rgba(28,28,38,.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.05); border-radius: 5px 15px 15px 15px; padding: 0.375rem 0.6875rem 0.3125rem; box-shadow: 0 2px 10px rgba(0,0,0,.28); transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.cp-msg:hover .cp-bubble { background: rgba(36,36,48,.9); border-color: rgba(25,224,255,.20); transform: translateY(-1px); }
.cp-msg .cp-author { color: #19e0ff; font-size: 0.75rem; font-weight: 600; }
.cp-msg .cp-author-row { display: flex; align-items: center; gap: 0.4375rem; }
.cp-msg .cp-author-link { cursor: pointer; }
.cp-msg .cp-author-link:hover { text-decoration: underline; }
.cp-msg .cp-karma { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 0.1875rem; font-size: 0.6875rem; font-weight: 700; color: #9fe9ff; background: rgba(25,224,255,.08); border: 1px solid rgba(25,224,255,.22); border-radius: 8px; padding: 1px 0.375rem 1px 0.3125rem; }
.cp-msg .cp-text { color: #e9e9ef; font-size: 0.8125rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; margin-top: 1px; }
.cp-msg img.cp-media + .cp-text, .cp-msg .cp-vidwrap + .cp-text, .cp-msg .cp-album + .cp-text, .cp-msg .cp-voice + .cp-text { margin-top: 0.3125rem; }
.cp-time { display: block; text-align: right; color: #7a7a86; font-size: 0.625rem; margin-top: 0.125rem; line-height: 1.1; }
.cp-msg img.cp-media { max-width: 100%; max-height: 240px; border-radius: 11px; margin-top: 0.375rem; display: block; border: 1px solid rgba(255,255,255,.07); }
.cp-reply { display: flex; gap: 0.5rem; background: rgba(25,224,255,.10); border-radius: 8px; padding: 0.3125rem 0.5625rem; margin: 0.25rem 0 0.125rem; align-items: stretch; }
.cp-reply-bar { width: 3px; border-radius: 2px; background: linear-gradient(180deg,#19e0ff,#a855f7); flex: none; }
.cp-reply-c { min-width: 0; }
.cp-reply-a { display: block; color: #19e0ff; font-size: 0.6875rem; font-weight: 600; }
.cp-reply-t { display: block; color: #a7a7b2; font-size: 0.6875rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-date { align-self: center; margin: 0.875rem auto 0.375rem; padding: 0.1875rem 0.75rem; border-radius: 12px; background: rgba(16,16,24,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(168,85,247,.16); color: #aab0be; font-size: 0.6875rem; font-weight: 600; letter-spacing: .02em; }
.cp-mention { color: #19e0ff; font-weight: 600; }
.cp-link { color: #5cb3f9; text-decoration: underline; cursor: pointer; word-break: break-all; }
.cp-reacts { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3125rem; }
.cp-react { display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(25,224,255,.10); border: 1px solid rgba(25,224,255,.22); border-radius: 11px; padding: 1px 0.4375rem; font-size: 0.6875rem; line-height: 1.5; }
.cp-react-e { font-size: 0.75rem; }
.cp-react-n { color: #9fe9ff; font-weight: 600; }
.cp-msg.cp-in .cp-react { animation: cpReactPulse .45s ease; }
@keyframes cpReactPulse { 0% { transform: scale(.7); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.cp-text.cp-bigemoji { font-size: 2.125rem; line-height: 1.25; }
.cp-voice { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.625rem; background: rgba(25,224,255,.08); border: 1px solid rgba(25,224,255,.18); border-radius: 13px; font-size: 0.75rem; color: #cdd0d8; }
.cp-voice .cp-play { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg,#19e0ff,#a855f7); color: #0b0b12; display: inline-flex; align-items: center; justify-content: center; font-size: 0.5625rem; flex: none; }
.cp-voice .cp-dur { color: #9fe9ff; font-weight: 600; }
.cp-voice-pl { cursor: pointer; margin-top: 0.375rem; transition: background .15s; }
.cp-voice-pl:hover { background: rgba(25,224,255,.14); }
.cp-voice-pl .cp-wave { flex: 1; min-width: 54px; height: 14px; background:
repeating-linear-gradient(90deg, rgba(25,224,255,.5) 0 2px, transparent 2px 5px); border-radius: 3px; opacity: .55; }
.cp-poll { margin-top: 0.375rem; padding: 0.625rem 0.75rem; background: rgba(168,85,247,.07); border: 1px solid rgba(168,85,247,.2); border-radius: 13px; max-width: 340px; }
.cp-poll-q { font-weight: 600; font-size: 0.8125rem; color: #ecedf2; line-height: 1.35; margin-bottom: 0.5625rem; }
.cp-poll-opts { display: flex; flex-direction: column; gap: 0.375rem; }
.cp-poll-opt { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5625rem; border-radius: 9px; background: rgba(255,255,255,.05); overflow: hidden; }
.cp-poll-bar { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(25,224,255,.28), rgba(168,85,247,.28)); border-radius: 9px; transition: width .4s ease; z-index: 0; }
.cp-poll-t { position: relative; z-index: 1; flex: 1; font-size: 0.7812rem; color: #dfe1e8; }
.cp-poll-pct { position: relative; z-index: 1; font-size: 0.7188rem; font-weight: 600; color: #9fe9ff; flex: none; }
.cp-poll-foot { margin-top: 0.5rem; font-size: 0.6875rem; color: #8a8a96; }
.cp-album { margin-top: 0.375rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.1875rem; max-width: 280px; border-radius: 11px; overflow: hidden; }
.cp-album img.cp-album-img { width: 100%; height: 100%; max-height: 138px; min-height: 92px; object-fit: cover; border-radius: 0; margin: 0; border: none; aspect-ratio: 1/1; }
.cp-album img.cp-album-img:only-child { aspect-ratio: auto; max-height: 240px; }
.cp-vidwrap { position: relative; display: inline-block; }
.cp-vbadge { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.4375rem; border-radius: 11px; background: rgba(8,8,12,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-size: 0.6875rem; font-weight: 600; }
.cp-bubble.cp-hl { border-color: rgba(25,224,255,.55) !important; box-shadow: 0 0 0 1px rgba(25,224,255,.35), 0 6px 20px rgba(25,224,255,.12) !important; }
@keyframes cpFlash { 0% { background: rgba(25,224,255,.22); } 100% { background: transparent; } }
.cp-msg.cp-flash .cp-bubble { animation: cpFlash 1.3s ease; }
.cp-reply { cursor: pointer; }
.cp-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; padding: 1.5rem; cursor: zoom-out; }
.cp-lightbox.open { display: flex; }
.cp-lightbox img { max-width: 96%; max-height: 96%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.cp-prev { display: flex; gap: 0.5625rem; align-items: flex-start; margin-top: 0.375rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 0.5rem 0.625rem; cursor: pointer; max-width: 320px; transition: background .15s ease; }
.cp-prev:hover { background: rgba(25,224,255,.06); }
.cp-prev-bar { width: 3px; align-self: stretch; border-radius: 2px; background: linear-gradient(180deg,#19e0ff,#a855f7); flex: none; }
.cp-prev-thumb { width: 50px; height: 50px; border-radius: 8px; overflow: hidden; flex: none; }
.cp-prev-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-prev-c { min-width: 0; }
.cp-prev-dom { color: #19e0ff; font-size: 0.6875rem; font-weight: 600; margin-bottom: 1px; }
.cp-prev-title { color: #e8e8ed; font-size: 0.7812rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-prev-desc { color: #b9bcc6; font-size: 0.7188rem; line-height: 1.35; margin-top: 0.125rem; max-height: 32px; overflow: hidden; }
.cp-prev-big { flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.cp-prev-big .cp-prev-img { width: 100%; max-height: 170px; overflow: hidden; }
.cp-prev-big .cp-prev-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-prev-big .cp-prev-body { display: flex; gap: 0.5rem; padding: 0.5rem 0.625rem; }
.cp-prev-big .cp-prev-title { white-space: normal; }
.cp-prev-big .cp-prev-desc { max-height: 48px; }
.cp-fwd { font-size: 0.7188rem; color: #8a8a96; margin-bottom: 0.1875rem; }
.cp-fwd b { color: #a9b6c6; font-weight: 600; }
.cp-edited { color: #6e6e78; font-size: 0.6562rem; font-style: italic; margin-right: 0.1875rem; }
.cp-jump { position: absolute; right: 14px; bottom: 64px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(168,85,247,.22); background: rgba(20,20,28,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #19e0ff; font-size: 1.125rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.4); opacity: 0; transform: translateY(8px) scale(.9); pointer-events: none; transition: opacity .2s ease, transform .2s ease; display: flex; align-items: center; justify-content: center; z-index: 3; }
.cp-jump.show { opacity: 1; transform: none; pointer-events: auto; }
.cp-jump-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 0.25rem; border-radius: 9px; background: linear-gradient(135deg,#19e0ff,#a855f7); color: #06121a; font-size: 0.625rem; font-weight: 800; line-height: 17px; text-align: center; }
#chatpanel .cp-foot { padding: 0.75rem 0.875rem 0.875rem; }
#chatpanel .cp-open { width: 100%; background: linear-gradient(135deg,#5cb3f9,#a855f7); color: #0a0612; border: none; border-radius: 13px; padding: 0.8125rem; font-weight: 800; font-size: 0.9375rem; letter-spacing: .2px; cursor: pointer; box-shadow: 0 6px 22px rgba(124,92,255,.34); transition: filter .15s ease; }
#chatpanel .cp-open:hover { filter: brightness(1.06); }
@media (min-width: 1024px) {
/* Базовый размер на десктопе — нормальный (16px), чтобы чат слева
воспринимался нормально. Сам телефон-колонка уменьшается отдельно
через zoom на #app и .nav (см. ниже), чтобы не трогать чат. */
html { background: #0a0a0f; font-size: 16px; }
body {
min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 0; padding: 3vh 0;
background:
radial-gradient(1200px 700px at 50% -5%, rgba(124,92,255,.20), transparent 60%),
radial-gradient(900px 520px at 88% 6%, rgba(25,224,255,.13), transparent 60%),
radial-gradient(900px 520px at 10% 6%, rgba(255,46,154,.10), transparent 60%),
linear-gradient(rgba(77,171,247,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(77,171,247,.06) 1px, transparent 1px),
#0a0a0f;
background-size: auto, auto, auto, 30px 30px, 30px 30px, auto;
background-attachment: fixed;
}
#device {
display: flex; flex-direction: column; align-items: stretch; position: relative;
width: clamp(340px, 26vw, 470px); max-width: 94vw; height: min(90vh, 900px); min-height: 0; max-height: 1000px;
background:
radial-gradient(700px 420px at 50% -4%, rgba(124,92,255,.10), transparent 60%),
#0c0c12;
border: 12px solid #14141a; border-radius: 44px;
overflow: hidden; transform: translateZ(0);
box-shadow: 0 40px 100px rgba(0,0,0,.65), 0 0 60px rgba(124,92,255,.10);
}
#device::-webkit-scrollbar { width: 0; height: 0; }
#app, .nav, #toast, #topactions { max-width: 100%; margin-left: 0; margin-right: 0; }
/* Уменьшаем ТОЛЬКО контент телефона (не чат). zoom пропорционально
ужимает всё внутри телефона (шрифты, отступы, иконки). Меняй 0.8:
меньше = телефон мельче (напр. 0.75), больше = крупнее (напр. 0.9). */
#app { zoom: 0.8; }
#device .nav { zoom: 0.8; }
#app { flex: 1 1 auto; width: 100%; align-self: stretch; overflow-y: auto; overflow-x: hidden; padding: 3.75rem 1rem 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#app::-webkit-scrollbar { width: 0; height: 0; }
#device .nav { position: static; flex: none; border-radius: 0 0 32px 32px; }
}
@media (min-width: 1024px) {
#chatpanel {
display: flex; flex-direction: row; order: -1;
width: 0; opacity: 0; height: min(90vh, 900px); max-height: 1000px;
background: transparent; border: none; overflow: hidden;
transition: width .55s cubic-bezier(.2,.8,.2,1), opacity .5s ease, margin-right .55s ease;
}
#chatpanel.cp-show { width: clamp(260px, 26vw, 460px); opacity: 1; margin-right: 1rem; }
}
.title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.25rem; }
#createScroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.muted { color: #8a8a96; font-size: 0.8125rem; }
.row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; }
.row + .row { border-top: 1px solid #23232d; }
.label { color: #8a8a96; font-size: 0.875rem; }
.value { font-weight: 600; }
.big { font-size: 1.5rem; font-weight: 700; }
.accent { color: #4dabf7; }
.dl-ok { color: #51cf66; }
.dl-over { color: #ff6b6b; font-weight: 600; }
.green { color: #51cf66; }
.amber { color: #ffd43b; }
button { font-family: inherit; }
.btn {
display: block; width: 100%; padding: 0.875rem;
background: linear-gradient(180deg, #5cb3f9, #3f97e6);
color: #07111c;
border: none; border-radius: 13px;
font-size: 1rem; font-weight: 700; cursor: pointer;
margin-top: 0.5rem; letter-spacing: .2px;
box-shadow: 0 6px 18px rgba(77,171,247,.28);
transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: 0 3px 10px rgba(77,171,247,.22); filter: brightness(.97); }
.btn-secondary { background: #262630; color: #e8e8ed; box-shadow: none; }
.btn-secondary:active { background: #30303c; }
.btn-ghost { background: transparent; border: 1px solid #34343f; color: #e8e8ed; box-shadow: none; font-weight: 600; }
.btn-ghost:active { background: rgba(255,255,255,.04); }
input, select, textarea {
width: 100%; padding: 0.75rem; margin-top: 0.375rem;
background: #101016; border: 1px solid #2a2a35;
border-radius: 11px; color: #e8e8ed; font-size: 0.9375rem;
font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: #4dabf7;
box-shadow: 0 0 0 3px rgba(77,171,247,.16);
}
.field { margin-bottom: 0.875rem; }
.field label { font-size: 0.8125rem; color: #8a8a96; }
/* Выбор валюты оплаты */
.coinlist { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.375rem; }
.coinopt {
display: flex; align-items: center; gap: 12px;
background: #101016; border: 1px solid #2a2a35; border-radius: 13px;
padding: 0.625rem 0.8125rem; cursor: pointer;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.coinopt:active { background: #15151c; }
.coinopt.sel { border-color: #19e0ff; box-shadow: inset 0 0 0 1px #19e0ff, 0 0 14px rgba(25,224,255,.16); }
/* Раскрывающийся выбор валюты (оверлей поверх контента) */
.coindd { position: relative; margin-top: 0.375rem; }
.coindd.open { z-index: 60; }
.coindd .coinopt { width: 100%; }
.coindd .caret { color: #8a8a96; flex: none; margin-left: 0.375rem; transition: transform .18s ease; }
.coindd.open .caret { transform: rotate(180deg); }
.coinmenu {
position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 61;
display: flex; flex-direction: column; gap: 0.5rem;
background: rgba(16,16,22,.98); border: 1px solid #2a2a35; border-radius: 14px;
padding: 0.5rem; box-shadow: 0 18px 44px rgba(0,0,0,.6);
max-height: 60vh; overflow-y: auto;
opacity: 0; transform: translateY(-6px); pointer-events: none;
transition: opacity .16s ease, transform .16s ease;
}
.coindd.open .coinmenu { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* при открытом списке поднимаем карточку выше соседних, чтобы меню не уходило под них */
.card.coin-open { position: relative; z-index: 60; overflow: visible; }
#coinBackdrop {
position: fixed; inset: 0; z-index: 55;
background: rgba(0,0,0,.35);
animation: fadeIn .16s ease;
}
/* на десктопе (телефон в рамке) затемнение накрывало весь экран — убираем,
оставляем прозрачный клик-ловитель для закрытия списка */
@media (min-width: 1024px) { #coinBackdrop { background: transparent; animation: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Ненавязчивый баннер «вступить в сообщество» */
#communityBanner {
position: fixed; left: 12px; right: 12px;
bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 45;
display: flex; align-items: center; gap: 0.625rem;
background: rgba(26,26,34,.98); border: 1px solid #2a2a35; border-radius: 14px;
padding: 0.625rem 0.75rem; box-shadow: 0 10px 30px rgba(0,0,0,.45);
animation: cbIn .25s ease;
}
@keyframes cbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#communityBanner .cb-text { font-size: 0.8125rem; color: #e8e8ed; line-height: 1.3; flex: 1; }
#communityBanner .cb-btn { background: #4dabf7; color: #06121f; border: none; border-radius: 10px; padding: 0.5rem 0.8125rem; font-weight: 700; font-size: 0.8125rem; white-space: nowrap; }
#communityBanner .cb-close { background: transparent; border: none; color: #8a8a96; font-size: 1.25rem; line-height: 1; padding: 0 0.125rem; flex: none; }
.coinico { width: 34px; height: 34px; flex: none; }
.coinopt .cname { font-weight: 600; font-size: 0.9062rem; color: #e8e8ed; line-height: 1.2; }
.coinopt .cnet { color: #8a8a96; font-size: 0.75rem; margin-top: 0.125rem; }
.coinopt .cright { margin-left: auto; text-align: right; }
.coinopt .csend { font-weight: 700; font-size: 0.875rem; color: #e8e8ed; white-space: nowrap; }
.coinopt .crate { color: #8a8a96; font-size: 0.7188rem; margin-top: 0.125rem; white-space: nowrap; }
.coinopt .cchk { color: #19e0ff; flex: none; margin-left: 0.375rem; opacity: 0; transform: scale(.7); transition: opacity .15s ease, transform .15s ease; }
.coinopt.sel .cchk { opacity: 1; transform: scale(1); }
.deal-item {
display: flex; justify-content: space-between; align-items: center;
padding: 0.875rem; background: #1a1a22; border: 1px solid #2a2a35;
border-radius: 13px; margin-bottom: 0.5rem; cursor: pointer;
transition: transform .1s ease, border-color .2s ease, background .2s ease;
animation: cardIn .28s cubic-bezier(.2,.7,.3,1) both;
}
.deal-item:active { background: #20202a; transform: scale(.99); }
.deal-item:hover { border-color: #3a3a47; }
.badge { font-size: 0.6875rem; padding: 0.1875rem 0.5rem; border-radius: 20px; background: #2a2a35; }
.status-pill {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 1.0625rem; font-weight: 700; padding: 0.6875rem 1.125rem; border-radius: 13px;
margin-bottom: 0.875rem; border: 1px solid;
}
.status-pill .pdot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.deal-head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 0.875rem; }
.deal-head .title { margin: 0; }
.deal-head .status-pill { margin-bottom: 0; }
.st-green { background: rgba(81,207,102,.12); color: #51cf66; border-color: rgba(81,207,102,.45); }
.st-amber { background: rgba(255,212,59,.12); color: #ffd43b; border-color: rgba(255,212,59,.45); }
.st-blue { background: rgba(77,171,247,.12); color: #4dabf7; border-color: rgba(77,171,247,.45); }
.st-red { background: rgba(255,107,107,.12); color: #ff6b6b; border-color: rgba(255,107,107,.45); }
.st-gray { background: #20202a; color: #9a9aa6; border-color: #2a2a35; }
.nav {
position: fixed; bottom: 0; left: 0; right: 0;
display: flex; background: rgba(18,18,24,.82);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-top: 1px solid #2a2a35;
padding: 0.5rem calc(0.5rem + env(safe-area-inset-right, 0px)) calc(0.875rem + env(safe-area-inset-bottom, 0px)) calc(0.5rem + env(safe-area-inset-left, 0px));
}
.nav button {
flex: 1; min-width: 0; background: none; border: none; color: #8a8a96;
font-size: 0.6875rem; padding: 0.375rem 0.25rem; cursor: pointer; white-space: nowrap;
transition: color .2s ease, transform .1s ease;
}
.nav button:active { transform: scale(.92); }
.nav button.active { color: #19e0ff; }
.nav .icon { display: block; margin-bottom: 0.1875rem; line-height: 0; }
.nav .icon svg { width: 23px; height: 23px; display: block; margin: 0 auto; transition: filter .2s ease, transform .2s ease; }
.nav button.active .icon svg { transform: translateY(-1px) scale(1.1); filter: drop-shadow(0 0 5px rgba(25,224,255,.9)); }
.stars { color: #ffd43b; font-size: 1rem; }
.hidden { display: none; }
.loader { text-align: center; padding: 3rem 2.5rem; color: #8a8a96; }
.loader::before {
content: ""; display: block; width: 30px; height: 30px; margin: 0 auto 0.875rem;
border: 3px solid #2a2a35; border-top-color: #4dabf7; border-radius: 50%;
animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.seg { display: flex; gap: 0.5rem; margin-bottom: 0.875rem; }
.seg button {
flex: 1; padding: 0.625rem; background: #1a1a22; border: 1px solid #2a2a35;
border-radius: 10px; color: #e8e8ed; font-size: 0.875rem; cursor: pointer;
}
.seg button { transition: background .15s ease, border-color .15s ease, color .15s ease; }
.seg button.active { background: linear-gradient(180deg,#5cb3f9,#3f97e6); color: #07111c; border-color: #4dabf7; font-weight: 700; }
h2 { font-size: 1.0625rem; margin-bottom: 0.75rem; }
#toast {
position: fixed; top: calc(10px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%) translateY(-80px);
background: #2a2a35; color: #e8e8ed; padding: 0.75rem 1.25rem; border-radius: 12px;
font-size: 0.875rem; z-index: 1000; opacity: 0; transition: all 0.3s ease;
max-width: 90%; text-align: center; border: 1px solid #3a3a45;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast.ok { border-color: #51cf66; }
#toast.err { border-color: #ff6b6b; }
.confirm-box { background: #1a1a22; border: 1px solid #2a2a35; border-radius: 14px; padding: 1.25rem; text-align: center; }
.confirm-box .msg { margin-bottom: 1rem; font-size: 0.9375rem; }
.pin-screen { position: fixed; inset: 0; z-index: 50; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4vh 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)); background:
radial-gradient(900px 480px at 50% -8%, rgba(77,171,247,.12), transparent 60%),
radial-gradient(700px 380px at 50% 108%, rgba(255,212,59,.084), transparent 60%),
#0a0a0f; }
body.pin-active { padding: 0; min-height: 0; overflow: hidden; }
.pin-rain-full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 64%);
mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 64%); }
.pin-logo { position: relative; z-index: 1; width: 360px; max-width: 100%; height: 168px; margin: 0 auto 0.875rem; display: flex; align-items: center; justify-content: center; }
.pin-logo img { max-width: 120px; max-height: 120px; display: block; }
.pin-logo svg { position: relative; z-index: 1; width: 100%; max-width: 340px; height: auto; display: block; }
@keyframes teDraw { from { stroke-dashoffset: 540; } to { stroke-dashoffset: 0; } }
@keyframes teFill { to { fill: rgba(25,224,255,0.14); } }
@keyframes teFillM { to { fill: rgba(255,43,214,0.10); } }
.te-l1c { stroke-dasharray: 540; stroke-dashoffset: 540; fill: transparent; animation: teDraw 4.6s ease forwards, teFill 1.1s ease 4.5s forwards; }
.te-l1m { stroke-dasharray: 540; stroke-dashoffset: 540; fill: transparent; animation: teDraw 4.6s ease 0.22s forwards; }
.te-l2c { stroke-dasharray: 540; stroke-dashoffset: 540; fill: transparent; animation: teDraw 4.6s ease 1.15s forwards, teFill 1.1s ease 5.75s forwards; }
.te-l2m { stroke-dasharray: 540; stroke-dashoffset: 540; fill: transparent; animation: teDraw 4.6s ease 1.37s forwards; }
.pin-box { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: 100%; }
.pin-dots { display: flex; gap: 1rem; margin: 1.5rem 0; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #4dabf7; }
.pin-dot.filled { background: #4dabf7; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; max-width: 280px; width: 100%; }
.pin-key {
aspect-ratio: 1; background: #1a1a22; border: 1px solid #2a2a35;
border-radius: 50%; color: #e8e8ed; font-size: 1.625rem; font-weight: 500;
cursor: pointer; display: flex; align-items: center; justify-content: center;
user-select: none;
}
.pin-key:active { background: #2a2a35; }
.pin-key.empty { background: transparent; border: none; cursor: default; }
.pin-error { color: #ff6b6b; min-height: 20px; margin-top: 0.75rem; font-size: 0.875rem; }
.pin-note { color: #8a8a96; text-align: center; font-size: 0.75rem; line-height: 1.5; margin-top: 0.5rem; }
.cd { font-variant-numeric: tabular-nums; font-weight: 600; }
.cd-done { opacity: .6; }
.pin-key { transition: transform .1s ease, background .15s ease; }
.pin-key:active { transform: scale(.94); }
.pin-dot { transition: background .15s ease, transform .15s ease; }
.pin-dot.filled { transform: scale(1.12); }
.profile-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.125rem; }
.avatar {
width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none;
border: 2px solid #4dabf7; box-shadow: 0 0 0 4px rgba(77,171,247,.12);
}
.avatar-fallback {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #4dabf7, #7b61ff);
color: #07111c; font-weight: 700; font-size: 1.5rem;
}
/* Аватар с индикатором онлайна в углу */
.avatar-wrap { position: relative; flex: none; }
.avatar-wrap .av-dot {
position: absolute; right: 1px; bottom: 1px;
width: 14px; height: 14px; border-radius: 50%;
background: #51cf66; border: 2.5px solid #0a0a0f;
}
/* Плитки статистики (карточка контрагента) */
.stat-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin-bottom: 0.75rem; }
.stat-tile { background: #15151c; border: 1px solid #2a2a35; border-radius: 13px; padding: 0.6875rem 0.625rem; text-align: center; }
.stat-tile .st-val { font-size: 1rem; font-weight: 700; line-height: 1.15; }
.stat-tile .st-sub { font-size: 0.6875rem; color: #8a8a96; margin-top: 0.1875rem; }
.stat-tile .st-label { font-size: 0.6875rem; color: #8a8a96; margin: 0 0 0.3125rem; }
.awd-card.open .awd-detail { display: block !important; }
.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex: none; }
.switch input { display: none; }
.switch .track {
position: absolute; inset: 0; background: #2a2a35; border-radius: 999px;
transition: background .2s ease;
}
.switch .thumb {
position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
background: #e8e8ed; border-radius: 50%; transition: transform .2s ease;
}
.switch input:checked + .track { background: linear-gradient(180deg,#5cb3f9,#3f97e6); }
.switch input:checked + .track + .thumb { transform: translateX(20px); }
.key-box {
background: #101016; border: 1px dashed #4dabf7; border-radius: 12px;
padding: 0.875rem; font-family: ui-monospace, Menlo, Consolas, monospace;
font-size: 1rem; letter-spacing: 1px; word-break: break-all; text-align: center;
color: #ffd43b;
}
.lnk { color: #4dabf7; cursor: pointer; }
.ucard {
display: flex; align-items: center; gap: 12px;
padding: 0.625rem 0.75rem; background: #1a1a22; border: 1px solid #2a2a35;
border-radius: 12px; margin-bottom: 0.5rem; cursor: pointer;
transition: transform .1s ease, border-color .2s ease;
animation: cardIn .25s cubic-bezier(.2,.7,.3,1) both;
}
.ucard:active { transform: scale(.99); }
.ucard:hover { border-color: #3a3a47; }
.uavatar {
width: 44px; height: 44px; border-radius: 50%; flex: none; object-fit: cover;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #4dabf7, #7b61ff);
color: #07111c; font-weight: 700; font-size: 1.125rem;
}
.uinfo { flex: 1; min-width: 0; }
.uinfo .uname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.375rem; }
.uinfo .usub { color: #8a8a96; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uright { text-align: right; flex: none; }
.uright .ustat { font-size: 0.8125rem; font-variant-numeric: tabular-nums; line-height: 1.5; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #51cf66; flex: none; box-shadow: 0 0 0 2px rgba(81,207,102,.25); }
.pager { display: flex; align-items: center; justify-content: center; gap: 0.875rem; margin: 0.875rem 0 0.25rem; }
.pager button { width: auto; padding: 0.5rem 1.125rem; margin: 0; }
.pager .pinfo { color: #8a8a96; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
button[disabled] { opacity: .4; pointer-events: none; }
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000;
display: flex; align-items: flex-end; animation: fadein .2s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.ob-ov { position: fixed; inset: 0; z-index: 100000; background: radial-gradient(700px 380px at 50% -8%, rgba(77,171,247,.14), transparent 60%), #0a0a0f; display: flex; flex-direction: column; padding: calc(2.125rem + var(--tg-safe-area-inset-top,0px)) 1.5rem calc(1.375rem + var(--tg-safe-area-inset-bottom,0px)); animation: fadein .25s ease; }
.ob-ov::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(77,171,247,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(77,171,247,.05) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; }
.ob-ic { height: 130px; display: flex; align-items: center; justify-content: center; color: #19e0ff; position: relative; margin-top: 0.625rem; }
.ob-t { color: #eafdff; font-size: 1.4375rem; font-weight: 800; text-align: center; position: relative; margin-top: 0.25rem; }
.ob-x { color: #aab6c2; font-size: 0.9375rem; line-height: 1.6; text-align: center; margin-top: 0.875rem; position: relative; }
.ob-dots { display: flex; gap: 0.5rem; justify-content: center; margin: 1.125rem 0; position: relative; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: #33404e; transition: all .2s ease; }
.ob-dot.on { background: #19e0ff; box-shadow: 0 0 6px rgba(25,224,255,.9); }
.ob-row { display: flex; gap: 0.625rem; position: relative; }
.ob-next { flex: 2; background: #19e0ff; border: none; color: #04222a; padding: 0.875rem; border-radius: 12px; font-size: 0.9375rem; font-weight: 700; cursor: pointer; }
.ob-back { flex: 1; background: transparent; border: 1px solid #2f3a48; color: #cfd6df; padding: 0.875rem; border-radius: 12px; font-size: 0.9375rem; cursor: pointer; }
.ob-skip { display: block; text-align: center; margin-top: 0.75rem; color: #7d8794; font-size: 0.875rem; cursor: pointer; position: relative; }
.modal-sheet {
background: #15151c; width: 100%; max-height: 86vh; overflow: auto;
border-top-left-radius: 22px; border-top-right-radius: 22px;
border: 1px solid #2a2a35; padding: 1.25rem 1rem 1.75rem;
animation: slideup .25s cubic-bezier(.2,.7,.3,1);
}
@keyframes slideup { from { transform: translateY(60px); } to { transform: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.chip {
padding: 0.5rem 0.875rem; border-radius: 999px; border: 1px solid #2a2a35;
background: #1a1a22; color: #e8e8ed; font-size: 0.8125rem; cursor: pointer;
transition: transform .1s ease;
}
.chip:active { transform: scale(.95); }
.chip.active { background: linear-gradient(180deg,#5cb3f9,#3f97e6); color: #07111c; border-color: #4dabf7; font-weight: 600; }
.dropdown {
display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
padding: 0.75rem 0.875rem; background: #101016; border: 1px solid #2a2a35; border-radius: 11px;
color: #e8e8ed; font-size: 0.9375rem; cursor: pointer; margin-bottom: 0.875rem;
transition: border-color .15s ease;
}
.dropdown:active { border-color: #4dabf7; }
.dropdown .chev { color: #4dabf7; font-size: 0.75rem; }
.menu-item {
display: flex; align-items: center; justify-content: space-between;
padding: 0.875rem 0.375rem; border-bottom: 1px solid #20202a; cursor: pointer; font-size: 0.9375rem;
}
.menu-item:last-child { border-bottom: none; }
.menu-item.active { color: #4dabf7; font-weight: 600; }
.menu-item:active { background: #1a1a22; }
.catgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-bottom: 0.875rem; }
.catcard {
position: relative; overflow: hidden; min-height: 86px;
padding: 0.875rem; border-radius: 16px; cursor: pointer;
background: linear-gradient(150deg, rgba(77,171,247,.10), rgba(255,212,59,.045) 75%), #15151c;
border: 1px solid #2a2a35; color: #e8e8ed;
display: flex; flex-direction: column; gap: 0.625rem;
transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.catcard::before {
content: ""; position: absolute; top: -28px; right: -28px; width: 84px; height: 84px;
border-radius: 50%; opacity: .18;
background: radial-gradient(circle, var(--c, #4dabf7), transparent 70%);
pointer-events: none;
}
.catcard:active { transform: scale(.97); }
.catcard:hover { border-color: var(--c, #4dabf7); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.catcard.active { border-color: var(--c, #4dabf7); box-shadow: 0 0 0 1px var(--c, #4dabf7) inset; }
.catcard .cat-ic {
width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
color: var(--c, #4dabf7); border: 1px solid var(--c, #4dabf7);
background: rgba(255,255,255,.03);
}
.catcard .cat-ic svg { width: 22px; height: 22px; display: block; }
.catcard .cat-ic .cat-img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; display: block; }
.catcard .cat-imgwrap { width: var(--cat-icon-size, 36px); height: var(--cat-icon-size, 36px); align-self: flex-start; display: flex; align-items: center; justify-content: center; flex: none; }
.catcard .cat-imgwrap .cat-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.catcard .cat-name { font-weight: 700; font-size: 0.875rem; line-height: 1.2; }
.catcard .cat-count { position: absolute; top: 12px; right: 13px; z-index: 1; font-size: 0.6875rem; color: #8a8a96; }
.catcolors { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.875rem; }
.catcolors .sw { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; }
.catcolors .sw.on { border-color: #fff; box-shadow: 0 0 0 2px #15151c, 0 0 0 3px #fff; }
.catcolors .sw-auto { display: flex; align-items: center; justify-content: center; background: #2a2a35; color: #e8e8ed; font-size: 0.75rem; font-weight: 700; }
.svc-banner { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; display: block; background: #1a1a22; cursor: pointer; }
.svc-banner-sm { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; display: block; background: #1a1a22; margin-bottom: 0.5rem; }
.img-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.img-overlay img { max-width: 100%; max-height: 100%; border-radius: 8px; }
/* Встроенный форум (iframe поверх мини-приложения) */
#forumOverlay { position: fixed; inset: 0; z-index: 1200; background: #0a0612; display: none; flex-direction: column; }
#forumOverlay.show { display: flex; }
#forumOverlay .fo-bar { height: 46px; flex: none; display: flex; align-items: center; gap: 0.625rem; padding: 0 0.75rem; background: rgba(10,6,18,.96); box-shadow: 0 1px 0 rgba(168,85,247,.16); }
#forumOverlay .fo-title { font-weight: 700; font-size: 0.875rem; background: linear-gradient(90deg,#19e0ff,#a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .02em; }
#forumOverlay .fo-close { margin-left: auto; width: 32px; height: 32px; border: none; border-radius: 9px; background: rgba(255,255,255,.06); color: #e8e8ed; font-size: 1.25rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#forumOverlay .fo-close:hover { background: rgba(255,255,255,.12); }
#forumOverlay iframe { flex: 1; width: 100%; border: none; background: #0a0612; }
/* Десктоп: форум — боковая панель СПРАВА от телефона,
зеркально чату слева. На мобильном остаётся полноэкранным (выше). */
@media (min-width: 1024px) {
/* На десктопе форум справа от телефона. Скрыт до входа,
появляется после ввода PIN (body.forum-ready). */
#forumOverlay {
position: static; inset: auto; z-index: auto; order: 1;
width: 0; opacity: 0; margin-left: 0;
height: min(90vh, 900px); max-height: 1000px;
background: transparent; overflow: hidden; flex-direction: column;
display: flex;
transition: width .55s cubic-bezier(.2,.8,.2,1), opacity .5s ease, margin-left .55s ease;
border-radius: 24px;
}
body.forum-ready #forumOverlay {
width: clamp(260px, 26vw, 460px); opacity: 1; margin-left: 1rem;
}
#forumOverlay .fo-bar { border-radius: 16px 16px 0 0; }
/* Крестик не нужен — панель постоянная. */
#forumOverlay .fo-close { display: none; }
}
.help-body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .32s ease, opacity .25s ease; }
#topactions { position: absolute; top: 12px; right: 14px; z-index: 50; display: flex; gap: 0.875rem; align-items: center; }
#bell, #gear, #medal { position: relative; width: 26px; height: 26px; border: none; background: transparent; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#bell svg, #gear svg, #medal svg { width: 23px; height: 23px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
#bellDot { position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; border: 1.5px solid #0a0a0f; box-sizing: border-box; }
#medalDot { position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; border: 1.5px solid #0a0a0f; box-sizing: border-box; }
/* Тур по интерфейсу */
.tour-ov { position: fixed; inset: 0; z-index: 78; }
.tour-hole { position: fixed; border-radius: 13px; border: 2px solid #19e0ff; box-shadow: 0 0 0 9999px rgba(4,4,8,.8), 0 0 16px 3px rgba(25,224,255,.5); pointer-events: none; z-index: 79; transition: all .18s ease; }
.tour-tip { position: fixed; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 528px; background: #15151c; border: 1px solid #19e0ff; border-radius: 14px; padding: 0.875rem; z-index: 80; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.tour-title { font-size: 0.875rem; font-weight: 700; color: #19e0ff; margin-bottom: 0.3125rem; }
.tour-text { font-size: 0.8125rem; color: #cfcfd6; line-height: 1.45; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.875rem; }
.tour-prog { font-size: 0.75rem; color: #8a8a96; }
.tour-skip { background: transparent; border: none; color: #8a8a96; font-size: 0.75rem; padding: 0.5rem 0.625rem; cursor: pointer; }
.tour-next { background: #19e0ff; border: none; color: #06121f; font-weight: 700; font-size: 0.8125rem; border-radius: 10px; padding: 0.5625rem 1.125rem; cursor: pointer; }
/* Праздник при открытии новой награды */
.cele-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(6,6,10,.93); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cele-confetti { position: absolute; inset: 0; pointer-events: none; }
.cfp { position: absolute; top: -14px; width: 9px; height: 9px; border-radius: 2px; animation-name: cfFall; animation-timing-function: linear; animation-iteration-count: 1; }
@keyframes cfFall { 0% { top: -14px; opacity: 1; } 100% { top: 104%; opacity: .85; } }
.cele-card { text-align: center; animation: celePop .5s ease both; padding: 0 1.25rem; position: relative; z-index: 2; }
.cele-emblem { width: 92px; height: 92px; margin: 0 auto; border-radius: 24px; display: flex; align-items: center; justify-content: center; animation: celeGlow 1.8s ease-in-out infinite; }
@keyframes celePop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes celeGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 22px 5px rgba(255,255,255,.16); } }
.cele-kicker { font-size: 0.75rem; color: #ffd43b; letter-spacing: 2px; margin-top: 1rem; font-weight: 700; }
.cele-title { font-size: 1.3125rem; font-weight: 700; margin-top: 0.375rem; color: #e8e8ed; }
.cele-sub { font-size: 0.8125rem; color: #cfd3d8; margin-top: 0.125rem; }
.cele-btn { margin-top: 1.125rem; width: auto; display: inline-block; padding: 0.6875rem 1.875rem; }
.cele-count { font-size: 0.75rem; color: #8a8a96; margin-top: 0.625rem; }
body.fs { padding-top: calc(1rem + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
body.fs #topactions { top: calc(12px + var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
/* Маленькие ноутбуки (высота экрана ≤ 820px, напр. 14"): телефон-колонка низкая,
поэтому прижимаем иконки (кубок/колокол/шестерёнка) к самому верху телефона,
чтобы они не налезали на контент. */
@media (min-width: 1024px) and (max-height: 820px) {
#topactions { top: 4px; }
body.fs #topactions { top: 4px; }
}
.notif-card { display: flex; gap: 0.625rem; align-items: flex-start; }
.notif-card.unread { border-left: 3px solid var(--accent, #4dabf7); }
.notif-ic { font-size: 1.25rem; line-height: 1.2; }
.notif-pop {
position: fixed; z-index: 9999; width: 326px; max-width: calc(100vw - 24px);
background: rgba(20,20,28,.98); border: 1px solid #2a2a35; border-radius: 16px;
box-shadow: 0 18px 50px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
padding: 0.3125rem; opacity: 0; transform: scaleY(.55) translateY(-10px); transform-origin: top center;
pointer-events: none; transition: opacity .16s ease, transform .24s cubic-bezier(.2,.85,.3,1.05);
}
.notif-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.notif-pop-head { display:flex; align-items:center; gap:0.4375rem; font-weight: 700; font-size: 0.8125rem; padding: 0.5625rem 0.6875rem 0.4375rem; color: #fff; }
.notif-pop-body { max-height: 348px; overflow-y: auto; }
.notif-pop-item { display: flex; gap: 0.625rem; padding: 0.5625rem 0.625rem; border-radius: 11px; align-items: flex-start; transition: background .12s; }
.notif-pop-item.click { cursor: pointer; }
.notif-pop-item:hover { background: rgba(255,255,255,.05); }
.notif-pop-item.unread { background: rgba(25,224,255,.06); }
.notif-pop-item .notif-ic { font-size: 1.0625rem; }
.notif-pop-foot { padding: 0.3125rem; border-top: 1px solid #20202a; margin-top: 0.1875rem; }
.notif-pop-foot button { width: 100%; background: none; border: none; color: #19e0ff; font-size: 0.7812rem; font-weight: 600; padding: 0.5rem; cursor: pointer; border-radius: 10px; transition: background .12s; }
.notif-pop-foot button:hover { background: rgba(25,224,255,.09); }
.notif-pop-empty { padding: 1.125rem 0.75rem; color: #8a8a96; text-align: center; font-size: 0.7812rem; }
@media (max-width: 1023px) {
.notif-pop { width: calc(100vw - 16px); max-width: none; padding: 0.375rem; }
.notif-pop-body { max-height: min(70vh, 560px); }
.notif-pop-item { padding: 0.6875rem 0.6875rem; }
.notif-pop-head { font-size: 0.875rem; padding: 0.625rem 0.75rem 0.5rem; }
}
.fa-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.fa-pill { background: #1a1a22; border: 1px solid #2a2a35; color: #e8e8ed; border-radius: 999px; padding: 0.375rem 0.875rem; font-size: 0.8125rem; cursor: pointer; }
.fa-pill.on { background: rgba(25,224,255,.14); border-color: #19e0ff; color: #19e0ff; }
.fa-chart { display: flex; align-items: flex-end; gap: 0.1875rem; height: 170px; overflow-x: auto; padding: 0.5rem 0.25rem 0.25rem; background: #14141a; border: 1px solid #2a2a35; border-radius: 12px; -webkit-overflow-scrolling: touch; }
.fa-bar { flex: 1 0 14px; min-width: 14px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.25rem; }
.fa-bar-fill { width: 72%; min-height: 2px; background: linear-gradient(180deg, #19e0ff, #7c5cff); border-radius: 4px 4px 0 0; transition: height .35s ease; }
.fa-bar-fill.peak { background: linear-gradient(180deg, #ffd43b, #ff8c00); }
.fa-bar-lbl { font-size: 0.5312rem; color: #8a8a96; white-space: nowrap; height: 10px; }
.fa-author { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid #20202a; }
.fa-author:last-child { border-bottom: none; }
.fa-rank { width: 22px; height: 22px; border-radius: 50%; background: #20202a; color: #8a8a96; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex: none; }
.fa-author.top1 .fa-rank { background: rgba(255,212,59,.18); color: #ffd43b; }
.fa-name { flex: 1; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-cnt { font-weight: 700; color: #19e0ff; }
/* ===== кастомный курсор (#fcur) — было