/* ============================================================
UMBA — дизайн-система приложения
Перенесено с маркетингового сайта umba_website
============================================================ */
/* Главная рабочая панель. Селекторы ограничены .home-dashboard, поэтому
оформление не меняет кабинет, биржу и остальные разделы SPA. */
.home-dashboard { padding-block: 34px 56px; }
.home-dashboard h2,.home-dashboard p { margin: 0; }
.home-workspace { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 318px; gap: 24px; align-items: start; }
.home-workspace::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(100% - 318px); width: 1px; background: var(--line); pointer-events: none; }
.home-main-column { min-width: 0; }
.home-balance-card { display: flex; align-items: center; gap: 34px; padding: 25px 28px; margin: 20px 0 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.home-balance-intro>p,.home-platform-note p,.home-market-watch p { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 1px; margin-bottom: 6px; }
.home-balance-intro h2 { font-size: 31px; letter-spacing: -1.4px; }.home-balance-intro h2 small { font-size: 15px; letter-spacing: 0; }
.home-balance-breakdown { display: flex; gap: 28px; margin: 0; padding-left: 30px; border-left: 1px solid var(--line); }.home-balance-breakdown div { display: grid; gap: 4px; }.home-balance-breakdown dt { font-size: 10px; color: var(--muted); }.home-balance-breakdown dd { margin: 0; font-size: 13px; font-weight: 700; }
.home-wallet-link { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-size: 11px; font-weight: 700; text-decoration: none; }.home-wallet-link:hover { background: var(--accent-10); border-color: var(--lime); color: var(--lime); }
.home-section-heading,.home-side-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }.home-section-heading h2,.home-side h2 { font-size: 17px; }.home-section-heading p { font-size: 11px; color: var(--muted); margin-top: 4px; }.home-section-heading>a,.home-side-heading>a { color: var(--lime); font-size: 11px; font-weight: 700; text-decoration: none; }.home-assets-swipe-hint { display: none; }
.home-asset-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-bottom: 30px; }.home-asset { min-height: 195px; display: flex; flex-direction: column; overflow: hidden; padding: 17px; border: 1px solid var(--line); border-radius: 17px; background: var(--panel); }.home-asset-umba,.home-asset-gold,.home-asset-silver { background: var(--panel); border-color: var(--line); }
.home-asset-head { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; }.home-asset-action { margin-left: auto; color: var(--muted); font-size: 12px; padding: 4px; }.home-asset-action:hover { color: var(--text); }.home-coin { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: var(--accent-10); color: var(--lime); font-size: 12px; }.home-asset-gold .home-coin,.home-market-symbol.gold { background: var(--accent-10); color: var(--lime); }.home-asset-silver .home-coin,.home-market-symbol.silver { background: var(--accent-10); color: var(--lime); }
.home-asset>strong { display: block; margin-top: 20px; font-size: 27px; letter-spacing: -.8px; }.home-asset>small { color: var(--muted); font-size: 11px; margin-top: 2px; }.home-meter { height: 4px; margin: auto 0 11px; border-radius: 3px; background: var(--line); }.home-meter b { display: block; height: 100%; border-radius: inherit; background: var(--lime); width: 0; }.home-asset-gold .home-meter b,.home-asset-silver .home-meter b { background: var(--lime); }.home-asset footer { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }.home-asset footer b { color: var(--text); }
.home-activity,.home-side>section { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 20px; }.home-activity-list { border-top: 1px solid var(--line); }.home-operation { display: flex; align-items: center; gap: 11px; padding: 15px 0; border-bottom: 1px solid var(--line); }.home-operation:last-child { border-bottom: 0; }.home-operation>i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent-10); color: var(--lime); }.home-operation>div { min-width: 0; flex: 1; display: grid; gap: 3px; }.home-operation b { font-size: 12px; }.home-operation span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.home-operation strong { font-size: 12px; white-space: nowrap; }.home-operation strong.is-positive { color: var(--lime); }
.home-side { position: sticky; top: 24px; display: grid; gap: 15px; padding-inline: 20px; }.home-side-heading { margin-bottom: 12px; }.home-quick-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.home-quick-grid>a,.home-quick-grid>button { display: grid; gap: 7px; justify-items: center; padding: 13px 7px; border: 0; border-radius: 12px; background: var(--card-bg-hover); color: var(--text); font: inherit; font-size: 10px; text-decoration: none; }.home-quick-grid>a:hover,.home-quick-grid>button:hover { background: var(--accent-10); color: var(--lime); }.home-quick-grid i { color: var(--lime); font-size: 17px; }
.home-platform-note { display: flex; gap: 11px; background: var(--panel)!important; border-color: var(--line)!important; }.home-platform-note>i { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 11px; background: var(--accent-10); color: var(--lime); }.home-platform-note h2 { margin: 0 0 5px; }.home-platform-note span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.home-market-watch { display: grid; gap: 9px; }.home-market-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); text-decoration: none; }.home-market-row:hover { border-color: var(--lime); background: var(--card-bg-hover); }.home-market-symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-10); color: var(--lime); font-size: 12px; font-weight: 800; }.home-market-data { display: grid; gap: 3px; min-width: 0; }.home-market-data b { font-size: 11px; }.home-market-data b small,.home-market-data small { color: var(--muted); font-size: 9px; font-weight: 500; }.home-market-data strong { font-size: 14px; }.home-market-row>i { color: var(--muted); font-size: 10px; }
/* Планшет: навигация остаётся слева, а правый rail уходит под рабочую область. */
@media(max-width:1100px) { .home-workspace { grid-template-columns: 1fr; }.home-workspace::after { display: none; }.home-side { position: static; grid-template-columns: 1fr 1fr; padding-inline: 0; }.home-market-watch { grid-column: 1 / -1; }.home-balance-card { gap: 22px; } }
@media(max-width:700px) { .home-dashboard { padding: 8px 0 calc(85px + env(safe-area-inset-bottom)); }.home-balance-card { display: grid; gap: 16px; margin-top: 16px; padding: 20px; }.home-balance-breakdown { padding-left: 0; border-left: 0; }.home-wallet-link { margin-left: 0; width: fit-content; }.home-assets-swipe-hint { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: -4px 0 8px; color: var(--muted); font-size: 10px; }.home-assets-swipe-hint span { font-variant-numeric: tabular-nums; }.home-assets-swipe-hint i { color: var(--lime); }.home-asset-grid { display: flex; overflow-x: auto; margin-right: -16px; padding-right: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }.home-asset-grid::-webkit-scrollbar { display: none; }.home-asset { flex: 0 0 78%; scroll-snap-align: start; }.home-side { grid-template-columns: 1fr; }.home-market-watch { grid-column: auto; } }
:root {
color-scheme: dark;
/* Surfaces */
--bg: #10131b;
--bg-main: var(--bg);
--bg-color: var(--bg);
--panel: #191d28;
--bg-elevated: var(--panel);
--card-bg: var(--panel);
--card-bg-hover: #222736;
/* Accent and readable foregrounds */
--lime: #d3f778;
--gold: var(--lime);
--gold-hover: #e2ff99;
--accent: var(--lime);
--on-accent: #18210e;
--text: #f6f7fa;
--text-main: var(--text);
--muted: #959bac;
--text-muted: var(--muted);
--line: #2b303e;
--border: var(--line);
--border-color: var(--border);
--green: var(--lime);
--red: #f6465d;
--red-hover: #ff7082;
--on-danger: var(--on-accent);
/* Compatibility aliases */
--primary-color: var(--lime);
--primary-dark: var(--gold-hover);
--secondary-color: var(--lime);
--accent-color: var(--lime);
--success-color: var(--lime);
--warning-color: var(--lime);
--danger-color: var(--red);
--dark-color: var(--text);
--light-color: var(--panel);
--gray-color: var(--muted);
--light-gray: var(--border);
--white: var(--panel);
/* Shared translucent colors (also consumed by canvas charts) */
--accent-10: rgba(211, 247, 120, 0.1);
--accent-12: rgba(211, 247, 120, 0.12);
--accent-14: rgba(211, 247, 120, 0.14);
--accent-15: rgba(211, 247, 120, 0.15);
--accent-16: rgba(211, 247, 120, 0.16);
--accent-18: rgba(211, 247, 120, 0.18);
--accent-20: rgba(211, 247, 120, 0.2);
--accent-25: rgba(211, 247, 120, 0.25);
--accent-30: rgba(211, 247, 120, 0.3);
--accent-35: rgba(211, 247, 120, 0.35);
--accent-40: rgba(211, 247, 120, 0.4);
--accent-55: rgba(211, 247, 120, 0.55);
--accent-60: rgba(211, 247, 120, 0.6);
--accent-80: rgba(211, 247, 120, 0.8);
--danger-12: rgba(246, 70, 93, 0.12);
--danger-25: rgba(246, 70, 93, 0.25);
--danger-35: rgba(246, 70, 93, 0.35);
--danger-8: rgba(246, 70, 93, 0.08);
--danger-80: rgba(246, 70, 93, 0.8);
--grid-65: rgba(43, 48, 62, 0.65);
--muted-35: rgba(149, 155, 172, 0.35);
--overlay-10: rgba(0, 0, 0, 0.1);
--overlay-15: rgba(0, 0, 0, 0.15);
--overlay-18: rgba(0, 0, 0, 0.18);
--overlay-20: rgba(0, 0, 0, 0.2);
--overlay-25: rgba(0, 0, 0, 0.25);
--overlay-28: rgba(0, 0, 0, 0.28);
--overlay-30: rgba(0, 0, 0, 0.3);
--overlay-35: rgba(0, 0, 0, 0.35);
--overlay-38: rgba(0, 0, 0, 0.38);
--overlay-45: rgba(0, 0, 0, 0.45);
--overlay-50: rgba(0, 0, 0, 0.5);
--overlay-55: rgba(0, 0, 0, 0.55);
--overlay-6: rgba(0, 0, 0, 0.06);
--overlay-60: rgba(0, 0, 0, 0.6);
--overlay-62: rgba(0, 0, 0, 0.62);
--overlay-72: rgba(0, 0, 0, 0.72);
--overlay-8: rgba(0, 0, 0, 0.08);
--overlay-90: rgba(0, 0, 0, 0.9);
--surface-55: rgba(25, 29, 40, 0.55);
--surface-80: rgba(25, 29, 40, 0.8);
--surface-96: rgba(25, 29, 40, 0.96);
--text-10: rgba(246, 247, 250, 0.1);
--text-14: rgba(246, 247, 250, 0.14);
--text-15: rgba(246, 247, 250, 0.15);
--text-18: rgba(246, 247, 250, 0.18);
--text-20: rgba(246, 247, 250, 0.2);
--text-40: rgba(246, 247, 250, 0.4);
--text-5: rgba(246, 247, 250, 0.05);
--text-6: rgba(246, 247, 250, 0.06);
--text-65: rgba(246, 247, 250, 0.65);
--text-70: rgba(246, 247, 250, 0.7);
--text-9: rgba(246, 247, 250, 0.09);
--text-90: rgba(246, 247, 250, 0.9);
--text-95: rgba(246, 247, 250, 0.95);
--border-radius: 12px;
--border-radius-lg: 20px;
--box-shadow: 0 10px 30px var(--overlay-45);
--box-shadow-sm: 0 4px 15px var(--overlay-35);
--transition: all 0.3s ease;
--gradient-primary: linear-gradient(135deg, var(--lime), var(--gold-hover));
--gradient-success: var(--gradient-primary);
--sidebar-width: 72px;
--nav-height-mobile: 62px;
}
/* Экран первой загрузки находится прямо в HTML, поэтому пользователь получает
отклик ещё до загрузки необязательных разделов SPA. */
.app-boot {
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
place-items: center;
background: radial-gradient(ellipse at 50% 38%, #1c2a20 0, #10151a 45%, #0b1015 100%);
color: #f6f7fa;
transition: opacity .18s ease, visibility .18s ease;
}
.app-boot[hidden] { display: none; }
.app-boot.is-ready { opacity: 0; visibility: hidden; pointer-events: none; }
.app-boot-content { display: grid; justify-items: center; gap: 14px; padding: 24px; font: 600 15px/1.2 Manrope, sans-serif; }
.app-boot-emblem { object-fit: contain; }
.app-boot-message { color: #b8c4ba; font-size: 13px; }
.app-boot-stats { color: #9baaa0; font-size: 12px; text-align: center; }
.app-boot-stats:empty { display: none; }
.workspace-emblem { width: 38px; height: 38px; margin-right: 9px; object-fit: contain; vertical-align: middle; }
.app-boot-logo { font: 800 32px/1 Manrope, sans-serif; letter-spacing: -.08em; }
.app-boot-logo span { display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: #d3f778; }
.app-boot-spinner { width: 28px; height: 28px; border: 3px solid rgba(211,247,120,.22); border-top-color: #d3f778; border-radius: 50%; animation: app-boot-spin .75s linear infinite; }
@keyframes app-boot-spin { to { transform: rotate(360deg); } }
@keyframes app-boot-glow { to { box-shadow: 0 0 70px rgba(169,244,0,.3); } }
@media (prefers-reduced-motion: reduce) { .app-boot-emblem, .app-boot-spinner { animation: none; } }
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Native text selection must not compete with the chat long-press menu. */
.support-page [hidden] { display: none !important; }
#supportBadge[hidden] { display:none !important; }
.support-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:20px 0; }
.support-page { max-width:1000px; padding-bottom:32px; overflow-wrap:anywhere; }
.support-row>div { min-width:0; max-width:100%; }
.support-page .card { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; }
.support-form { display:grid; gap:16px; margin:16px 0; }
.support-form label { display:grid; gap:8px; }
.support-form textarea { width:100%; resize:vertical; min-height:100px; }
.support-group { margin:16px 0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel); }
.support-group>summary { display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; padding:16px 20px; font:600 15px Manrope,sans-serif; color:var(--text); list-style:none; }
.support-group>summary::-webkit-details-marker { display:none; }
.support-group>summary::after { content:'+'; color:var(--lime); font-size:20px; font-weight:400; flex:none; }
.support-group[open]>summary::after { content:'−'; }
.support-group>summary:focus-visible { outline:2px solid var(--lime); outline-offset:-3px; }
.support-group[open]>summary { border-bottom:1px solid var(--line); }
.support-group-body { padding:4px 20px 16px; }
.support-count { min-width:26px; padding:2px 9px; border-radius:999px; background:var(--card-bg-hover); color:var(--lime); font-size:13px; text-align:center; }
.support-row { display:flex; justify-content:space-between; align-items:center; gap:16px; text-decoration:none; color:var(--text); margin:12px 0; }
.support-status { color:var(--lime); font-size:13px; }
.support-text { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:12px; }
.support-events .card, #supportDetail>.card { margin:12px 0; }
.support-actions { display:flex; flex-wrap:wrap; gap:10px; }
.support-error { color:var(--red); padding:12px 0; }
.support-files { display:flex; gap:12px; flex-wrap:wrap; }
.support-files a { display:grid; gap:6px; max-width:180px; overflow-wrap:anywhere; }
.support-files img { max-width:100%; max-height:140px; object-fit:contain; border-radius:8px; }
@media(max-width:600px) { .support-row { align-items:flex-start; flex-direction:column; } .support-actions .btn { width:100%; } }
* {
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* Keep caret placement, selection and paste available while editing. */
input, textarea,
[contenteditable]:not([contenteditable="false"]),
[contenteditable]:not([contenteditable="false"]) * {
-webkit-user-select: text;
user-select: text;
-webkit-touch-callout: default;
}
html { scroll-behavior: smooth; }
body {
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: var(--text-main);
background-color: var(--bg-color);
/* --app-vh задаётся из JS по visualViewport.height (учитывает экранную клавиатуру) */
height: var(--app-vh, 100dvh);
overflow: hidden;
}
/* ================= EДИНЫЙ КАРКАС SPA (CROWDWIZ) ================= */
/* Слева фиксированная навигация, справа — прокручиваемый контент.
Каркас «прибит к потолку» (position:fixed): при появлении экранной клавиатуры
visual-viewport браузера панорамируется, но fixed-оболочка с top:var(--vv-top)
остаётся на месте — шапка чата не «уезжает» вверх. */
.global-layout {
display: flex;
height: var(--app-vh, 100dvh);
width: 100%;
overflow: hidden;
position: fixed;
top: var(--vv-top, 0px);
left: 0;
right: 0;
}
.global-content {
flex: 1;
min-width: 0;
height: var(--app-vh, 100dvh);
overflow-y: auto;
overflow-x: hidden;
background: var(--bg-color);
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.global-content::-webkit-scrollbar { width: 10px; }
.global-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.global-content::-webkit-scrollbar-track { background: transparent; }
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ---------------- Навигация (левосторонний сайдбар CROWDWIZ) ---------------- */
.global-nav {
flex: 0 0 var(--sidebar-width);
width: var(--sidebar-width);
height: 100dvh;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 18px 8px;
background: var(--bg-elevated);
border-right: 1px solid var(--border);
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
}
.global-nav::-webkit-scrollbar { display: none; }
.global-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
color: var(--gold);
margin-bottom: 12px;
flex: 0 0 auto;
}
.global-logo i {
font-size: 26px;
color: var(--gold);
}
/* Эмблема бренда (заменяет иконку fa-coins в логотипах) */
.brand-emblem {
display: block;
object-fit: cover;
border-radius: 50%;
background: var(--bg-elevated);
box-shadow: 0 0 0 2px var(--gold);
}
.global-logo .brand-emblem {
width: 34px;
height: 34px;
}
.app-header .brand-emblem {
width: 26px;
height: 26px;
box-shadow: none;
}
.global-links {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
flex: 1 1 auto;
min-height: 0;
}
/* Пункт меню: иконка сверху, подпись снизу */
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
text-decoration: none;
color: var(--text-muted);
font-weight: 500;
font-size: 10px;
line-height: 1.15;
text-align: center;
padding: 9px 4px;
border-radius: 12px;
transition: var(--transition);
position: relative;
white-space: nowrap;
}
.nav-item i { font-size: 18px; }
.nav-item span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.nav-item:hover { color: var(--text-main); background: var(--card-bg-hover); }
/* Подчёркивание-индикатор больше не нужно в иконочном сайдбаре */
.nav-item::after { display: none; }
.auth-buttons { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.nav-user {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.nav-user-name {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 600;
font-size: 11px;
color: var(--text-main);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-user-name i { color: var(--gold); }
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 22px;
color: var(--text-main);
cursor: pointer;
}
/* ---------------- Кнопки ---------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 22px;
border: none;
border-radius: var(--border-radius);
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--gradient-primary); color: var(--on-accent); box-shadow: 0 6px 18px var(--accent-25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px var(--accent-35); }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--gold); color: var(--on-accent); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--text-main); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-success { background: var(--gradient-success); color: var(--on-accent); box-shadow: 0 6px 18px var(--accent-30); }
.btn-success:hover { transform: translateY(-2px); }
.btn-danger { background: transparent; color: var(--danger-color); border: 2px solid var(--danger-color); }
.btn-danger:hover { background: var(--danger-color); color: var(--on-danger); }
.btn-warning { background: var(--warning-color); color: var(--on-accent); }
.btn-warning:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-premium { background: linear-gradient(135deg, var(--lime) 0%, var(--lime) 100%); color: var(--on-accent); width: 100%; box-shadow: 0 6px 18px var(--accent-30); }
.btn-premium:hover { transform: translateY(-2px); }
.btn-large { padding: 15px 32px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
/* ---------------- Welcome / Hero ---------------- */
.welcome-screen { padding: 0 0 60px; }
.hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 50px;
padding: 70px 0 40px;
}
.hero-content { flex: 1; max-width: 580px; }
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--accent-12);
color: var(--gold);
padding: 7px 16px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
margin-bottom: 22px;
}
.hero-title {
font-size: 52px;
line-height: 1.1;
font-weight: 800;
letter-spacing: -1.5px;
margin-bottom: 22px;
}
.highlight {
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-subtitle {
font-size: 18px;
color: var(--gray-color);
margin-bottom: 32px;
max-width: 520px;
}
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 45px; }
.hero-stats { display: flex; gap: 44px; }
.hero-stats .stat { display: flex; flex-direction: column; }
.stat-number { font-size: 30px; font-weight: 800; color: var(--dark-color); letter-spacing: -1px; }
.stat-label { font-size: 14px; color: var(--gray-color); }
/* Phone mockup */
.hero-image { flex: 0 0 320px; display: flex; justify-content: center; }
.phone-mockup {
width: 280px;
height: 560px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 40px;
padding: 12px;
box-shadow: 0 30px 60px var(--overlay-55);
position: relative;
animation: float 6s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
.phone-screen { width: 100%; height: 100%; background: var(--light-color); border-radius: 30px; overflow: hidden; }
.app-screen { height: 100%; display: flex; flex-direction: column; }
.app-header {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 22px; font-weight: 700; color: var(--primary-color);
border-bottom: 1px solid var(--light-gray);
background: var(--panel); }
.app-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; }
.earth-animation { font-size: 70px; color: var(--primary-color); animation: rotate 12s linear infinite; }
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.app-balance { text-align: center; color: var(--gray-color); font-size: 13px; }
.balance-amount { display: block; font-size: 28px; font-weight: 800; color: var(--dark-color); margin-top: 6px; }
.balance-amount i { color: var(--warning-color); font-size: 20px; }
.app-btn {
background: var(--gradient-primary); color: var(--on-accent); border: none; border-radius: 14px;
padding: 14px 28px; font-weight: 600; font-family: inherit; cursor: pointer;
display: flex; align-items: center; gap: 8px;
}
/* ---------------- Features ---------------- */
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
margin-top: 60px;
}
.feature-card {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: 32px 26px;
box-shadow: var(--box-shadow-sm);
transition: var(--transition);
border: 1px solid transparent;
}
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--box-shadow); border-color: var(--accent-15); }
.feature-icon {
width: 58px; height: 58px; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; color: var(--on-accent); background: var(--gradient-primary); margin-bottom: 20px;
}
.feature-card h3 { font-size: 19px; margin-bottom: 10px; font-weight: 700; }
.feature-card p { color: var(--gray-color); font-size: 14.5px; }
/* ---------------- Панель пользователя ---------------- */
.user-panel { padding: 40px 0 70px; }
.profile-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-radius: var(--border-radius-lg);
padding: 28px 32px;
margin-bottom: 30px;
flex-wrap: wrap;
background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--lime); box-shadow: var(--box-shadow-sm); }
.profile-main { display: flex; align-items: center; gap: 20px; }
.user-avatar {
width: 74px; height: 74px; border-radius: 50%;
background: var(--text-20);
display: flex; align-items: center; justify-content: center; font-size: 40px;
backdrop-filter: blur(4px);
}
.user-details h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.user-stats { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.stat-pill {
display: inline-flex; align-items: center; gap: 7px;
background: var(--text-18); padding: 6px 14px;
border-radius: 50px; font-size: 14px; font-weight: 600;
}
.stat-pill i { color: var(--lime); }
.premium-until {
display: inline-flex; align-items: center; gap: 8px; margin-top: 8px;
padding: 6px 14px; border-radius: 50px; font-size: 13px; font-weight: 600;
color: var(--text); background: var(--accent-16);
border: 1px solid var(--accent-35);
}
.premium-until i { color: var(--lime); }
.profile-header .btn-danger { background: transparent; }
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 24px;
align-items: start;
}
.action-card {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: 26px;
box-shadow: var(--box-shadow-sm);
border: 1px solid var(--light-gray);
}
.card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.card-icon {
width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px;
display: flex; align-items: center; justify-content: center;
background: var(--accent-10); color: var(--primary-color); font-size: 19px;
}
.card-head h3 { font-size: 18px; font-weight: 700; }
.card-desc { color: var(--gray-color); font-size: 14px; margin: 6px 0 16px; }
/* Таймер рекламы */
.ad-card { display: flex; flex-direction: column; }
.ad-timer { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: auto; }
.timer-circle { position: relative; width: 120px; height: 120px; }
.timer-circle svg { transform: none; }
.timer-text {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-size: 34px; font-weight: 800; color: var(--dark-color);
}
.timer-text small { font-size: 16px; margin-left: 2px; color: var(--gray-color); }
/* Реферальная система */
.code-input { display: flex; gap: 8px; margin-bottom: 20px; }
.code-input input {
flex: 1; min-width: 0; padding: 11px 14px; border: 2px solid var(--light-gray);
border-radius: var(--border-radius); font-family: inherit; font-size: 13px; color: var(--gray-color);
background: var(--light-color);
}
.code-input input:focus { outline: none; border-color: var(--primary-color); }
.referral-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.stat-box {
background: linear-gradient(135deg, var(--panel) 0%, var(--panel) 100%);
border-radius: var(--border-radius); padding: 16px; text-align: center;
}
.stat-box-value { display: block; font-size: 24px; font-weight: 800; color: var(--primary-color); }
.stat-box h4 { font-size: 12.5px; color: var(--gray-color); font-weight: 500; margin-top: 2px; }
.referral-list h4, .switch-referrer h4, .lottery-section h4 {
font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--dark-color);
}
.list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.list-item {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 14px; background: var(--light-color); border-radius: 10px;
}
.list-item strong { font-size: 14px; }
.small-text { font-size: 12px; color: var(--gray-color); }
.status { display: flex; align-items: center; gap: 6px; }
.online-dot, .offline-dot { width: 9px; height: 9px; border-radius: 50%; }
.online-dot { background: var(--success-color); box-shadow: 0 0 0 3px var(--accent-18); }
.offline-dot { background: var(--gray-color); }
.empty-list { color: var(--gray-color); font-size: 13.5px; padding: 8px 0; }
.switch-referrer { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--light-gray); }
.switch-row { display: flex; gap: 10px; }
.form-select {
flex: 1; min-width: 0; padding: 11px 14px; border: 2px solid var(--light-gray);
border-radius: var(--border-radius); font-family: inherit; font-size: 14px; background: var(--white);
color: var(--dark-color); cursor: pointer;
}
.form-select:focus { outline: none; border-color: var(--primary-color); }
/* Розыгрыши */
.lottery-section { margin-bottom: 20px; }
.lottery-list { display: flex; flex-direction: column; gap: 12px; }
.lottery-item { background: var(--light-color); border-radius: var(--border-radius); padding: 14px 16px; }
.lottery-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lottery-info strong { font-size: 14.5px; }
.lottery-info > div:last-child { font-size: 13px; color: var(--gray-color); white-space: nowrap; }
.lottery-progress { height: 8px; background: var(--light-gray); border-radius: 50px; overflow: hidden; margin-bottom: 10px; }
.progress-bar { height: 100%; background: var(--gradient-primary); border-radius: 50px; transition: width 0.6s ease; }
.progress-info { margin-top: 8px; }
.badge { display: inline-block; padding: 6px 14px; border-radius: 50px; font-size: 12.5px; font-weight: 600; }
.badge-success { background: var(--accent-12); color: var(--success-color); }
.buy-ticket-btn { margin-top: 10px; }
.create-lottery { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--light-gray); }
.create-lottery h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
/* Премиум */
.premium-card { color: var(--text); background: var(--panel); border: 1px solid var(--border); }
.premium-card .card-icon { background: var(--accent-20); color: var(--lime); }
.premium-card .card-desc { color: var(--text-70); }
.premium-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.premium-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-90); }
.premium-list li i { color: var(--success-color); margin-top: 4px; font-size: 12px; }
.premium-price { display: flex; flex-direction: column; gap: 14px; }
.price-tag { font-size: 30px; font-weight: 800; text-align: center; }
.price-tag i { color: var(--lime); font-size: 22px; }
/* ---------------- Формы ---------------- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; color: var(--text-main); }
.form-input {
width: 100%; padding: 12px 15px; border: 2px solid var(--border);
border-radius: var(--border-radius); font-family: inherit; font-size: 15px;
transition: var(--transition); background: var(--card-bg); color: var(--text-main);
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px var(--accent-12); }
/* ---------------- Модальные окна ---------------- */
.modal {
display: none;
position: fixed;
inset: 0;
background: var(--surface-55);
backdrop-filter: blur(4px);
z-index: 2000;
padding: 20px;
overflow-y: auto;
}
.modal-content {
background: var(--white);
border-radius: var(--border-radius-lg);
padding: 36px;
max-width: 440px;
margin: 60px auto;
position: relative;
box-shadow: 0 30px 70px var(--overlay-30);
animation: modalIn 0.3s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.modal-content h2 { font-size: 24px; font-weight: 800; margin-bottom: 24px; letter-spacing: -0.5px; }
.close {
border: 0; background: transparent; padding: 0;
position: absolute; top: 18px; right: 22px; font-size: 28px; line-height: 1;
color: var(--gray-color); cursor: pointer; transition: var(--transition);
}
.close:hover { color: var(--danger-color); transform: rotate(90deg); }
.modal-switch { text-align: center; margin-top: 18px; font-size: 14px; color: var(--gray-color); }
.modal-switch a { color: var(--primary-color); font-weight: 600; text-decoration: none; }
.modal-switch a:hover { text-decoration: underline; }
/* ---------------- Футер ---------------- */
.footer { background: var(--bg-elevated); border-top: 1px solid var(--border); color: var(--text-muted); padding: 34px 0; margin-top: 40px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer .logo { color: var(--gold); display: flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.5px; }
.footer .logo .brand-emblem { width: 28px; height: 28px; }
.footer-copy { font-size: 14px; }
/* ---------------- Адаптив ---------------- */
@media (max-width: 1024px) {
.hero { flex-direction: column; text-align: center; padding-top: 50px; }
.hero-content { max-width: 100%; }
.hero-buttons, .hero-stats { justify-content: center; }
.hero-image { order: -1; }
}
@media (max-width: 768px) {
/* Навигация переезжает в нижнюю панель — см. блок «Мобильный нижний нав-бар» */
.hero-title { font-size: 38px; letter-spacing: -1px; }
.hero-stats { gap: 26px; }
.stat-number { font-size: 24px; }
.dashboard-grid { grid-template-columns: 1fr; }
.profile-header { padding: 22px; background: var(--panel); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--lime); box-shadow: var(--box-shadow-sm); }
.user-avatar { width: 60px; height: 60px; font-size: 32px; }
.user-details h2 { font-size: 22px; }
}
@media (max-width: 480px) {
.container { padding: 0 16px; }
.hero-title { font-size: 30px; }
.hero-subtitle { font-size: 16px; }
.hero-buttons .btn { width: 100%; }
.hero-stats { flex-wrap: wrap; gap: 18px; }
.phone-mockup { width: 230px; height: 460px; }
.referral-stats { grid-template-columns: 1fr; }
.switch-row { flex-direction: column; }
.modal-content { padding: 26px 22px; margin: 30px auto; }
.footer-inner { flex-direction: column; text-align: center; }
}
/* ============================================================
UMBA — страницы SPA (hash-роутинг) и новые разделы
============================================================ */
.app-page { animation: fadeInPage 0.35s ease; }
@keyframes fadeInPage { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.highlight {
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.nav-item { position: relative; }
.nav-item.active {
color: var(--gold);
background: var(--accent-12);
}
.nav-item.active::after {
content: '';
position: absolute;
left: 0; top: 12%; bottom: 12%;
width: 3px;
border-radius: 3px;
background: var(--gold);
}
.section-head { text-align: center; margin: 70px 0 34px; }
.section-title { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; }
.section-title .highlight { display: inline; }
/* Заголовок внутренней страницы */
.page-header {
background: radial-gradient(1200px 400px at 50% -50%, var(--accent-14), transparent), var(--bg-elevated);
color: var(--text);
padding: 70px 0 60px;
text-align: center;
border-bottom: 1px solid var(--border);
}
.page-header h1 { font-size: 42px; font-weight: 800; letter-spacing: -1px; margin-bottom: 12px; }
.page-header p { color: var(--text-muted); font-size: 18px; }
.page-body { padding: 50px 20px 80px; }
/* ---------------- Плашка демо-режима ---------------- */
.demo-banner {
display: flex;
align-items: center;
gap: 12px;
background: var(--accent-12);
border: 1px solid var(--accent-40);
color: var(--lime);
padding: 14px 18px;
border-radius: var(--border-radius);
font-weight: 500;
margin-bottom: 28px;
}
/* ---------------- Маркетинговый премиум-блок ---------------- */
.premium-section {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: center;
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--box-shadow);
padding: 44px;
margin: 70px 0;
}
.premium-section h2 { font-size: 32px; font-weight: 800; margin-bottom: 14px; }
.premium-section p { color: var(--gray-color); margin-bottom: 20px; }
.premium-section .premium-list { list-style: none; margin-bottom: 26px; }
.premium-section .premium-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--dark-color); }
.premium-section .premium-list i { color: var(--success-color); }
.premium-image { display: flex; justify-content: center; }
.badge-premium {
width: 220px; height: 220px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
border-radius: 50%;
background: var(--gradient-primary);
color: var(--on-accent);
font-size: 26px; font-weight: 800;
box-shadow: 0 20px 50px var(--accent-40);
}
.badge-premium i { font-size: 60px; }
/* ---------------- Отзывы ---------------- */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--box-shadow-sm);
padding: 26px;
transition: var(--transition);
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--box-shadow); }
.testimonial-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.testimonial-header .user-avatar {
width: 52px; height: 52px; font-size: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--gradient-primary); color: var(--on-accent);
}
.testimonial-header h4 { font-size: 17px; }
.user-role { font-size: 13px; color: var(--primary-color); font-weight: 500; }
.testimonial-text { color: var(--gray-color); font-size: 15px; margin-bottom: 18px; }
.testimonial-card .user-stats { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--dark-color); }
.testimonial-card .user-stats i { color: var(--warning-color); margin-right: 6px; }
/* ---------------- CTA ---------------- */
.cta {
text-align: center;
border-radius: var(--border-radius-lg);
padding: 60px 30px;
margin: 70px 0 20px;
background: var(--panel); color: var(--text); border: 1px solid var(--border); }
.cta h2 { font-size: 34px; font-weight: 800; margin-bottom: 14px; }
.cta h2 .highlight { -webkit-text-fill-color: var(--lime); }
.cta p { opacity: 0.9; margin-bottom: 26px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.cta .btn-primary { background: var(--lime); color: var(--on-accent); }
.cta .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.cta .disclaimer {
background: var(--overlay-15);
border-radius: var(--border-radius);
padding: 16px 20px;
font-size: 14px;
max-width: 720px;
margin: 0 auto;
}
/* ---------------- О платформе ---------------- */
.about-section { margin-bottom: 54px; }
.about-section h2 { font-size: 28px; font-weight: 800; margin-bottom: 22px; }
.philosophy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.philosophy-card {
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--box-shadow-sm);
padding: 30px 24px;
text-align: center;
transition: var(--transition);
}
.philosophy-card:hover { transform: translateY(-6px); box-shadow: var(--box-shadow); }
.philosophy-card i {
font-size: 40px;
margin-bottom: 16px;
background: var(--gradient-primary);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.philosophy-card h3 { margin-bottom: 10px; }
.philosophy-card p { color: var(--gray-color); font-size: 15px; }
.tech-stack { display: flex; gap: 20px; flex-wrap: wrap; }
.tech-item {
display: flex; align-items: center; gap: 12px;
background: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow-sm);
padding: 18px 26px;
font-weight: 600;
}
.tech-item i { font-size: 24px; color: var(--primary-color); }
.economy-model { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.economy-step {
display: flex; gap: 16px;
background: var(--white);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow-sm);
padding: 24px;
}
.economy-step .step-num {
flex-shrink: 0;
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--gradient-primary);
color: var(--on-accent); font-weight: 700;
}
.economy-step h4 { margin-bottom: 6px; }
.economy-step p { color: var(--gray-color); font-size: 14px; }
.disclaimer-box {
display: flex; gap: 16px; align-items: flex-start;
background: var(--accent-10);
border-left: 4px solid var(--warning-color);
border-radius: var(--border-radius);
padding: 20px 24px;
}
.disclaimer-box i { color: var(--warning-color); font-size: 22px; }
/* ---------------- Возможности (feature blocks) ---------------- */
.feature-block {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 40px;
align-items: center;
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--box-shadow-sm);
padding: 40px;
margin-bottom: 30px;
}
.feature-block.reverse .feature-visual { order: -1; }
.feature-badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(--accent-12);
color: var(--primary-color);
font-weight: 600; font-size: 14px;
padding: 7px 14px; border-radius: 30px;
margin-bottom: 16px;
}
.feature-block h2 { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.feature-block p { color: var(--gray-color); margin-bottom: 18px; }
.feature-visual {
display: flex; align-items: center; justify-content: center;
font-size: 110px;
color: var(--accent-18);
min-height: 180px;
}
.check-list { list-style: none; }
.check-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.check-list i { color: var(--success-color); }
.commission-levels { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.commission-level {
display: flex; justify-content: space-between; align-items: center;
background: var(--light-color);
border-radius: var(--border-radius);
padding: 12px 18px;
}
.commission-level strong { color: var(--primary-color); font-size: 18px; }
/* ---------------- Как начать ---------------- */
.step-tracker {
display: flex; justify-content: space-between; gap: 12px;
margin-bottom: 44px;
flex-wrap: wrap;
}
.tracker-step {
display: flex; align-items: center; gap: 10px;
flex: 1; min-width: 150px;
color: var(--gray-color); font-weight: 600;
}
.tracker-step span {
width: 38px; height: 38px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--light-gray); color: var(--gray-color);
font-weight: 700;
}
.tracker-step.active { color: var(--primary-color); }
.tracker-step.active span { background: var(--gradient-primary); color: var(--on-accent); }
.guide-step {
display: flex; gap: 22px;
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--box-shadow-sm);
padding: 30px;
margin-bottom: 22px;
}
.guide-step:not(.active) { display: none; }
.guide-num {
flex-shrink: 0;
width: 54px; height: 54px;
display: flex; align-items: center; justify-content: center;
border-radius: 16px;
background: var(--gradient-primary);
color: var(--on-accent); font-size: 24px; font-weight: 800;
}
.guide-content h2 { font-size: 22px; margin-bottom: 8px; }
.guide-content p { color: var(--gray-color); margin-bottom: 14px; }
.warning-box {
display: flex; gap: 16px; align-items: flex-start;
background: var(--danger-8);
border-left: 4px solid var(--danger-color);
border-radius: var(--border-radius);
padding: 20px 24px;
}
.warning-box i { color: var(--danger-color); font-size: 24px; }
.warning-box strong { display: block; margin-bottom: 4px; }
.warning-box p { color: var(--gray-color); }
/* ---------------- Табы ---------------- */
.tabs { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
.tab {
border: none; cursor: pointer;
background: var(--white);
color: var(--gray-color);
font-family: inherit; font-weight: 600; font-size: 15px;
padding: 12px 22px;
border-radius: 30px;
box-shadow: var(--box-shadow-sm);
transition: var(--transition);
}
.tab.active { background: var(--gradient-primary); color: var(--on-accent); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeInPage 0.3s ease; }
.transactions-list { display: flex; flex-direction: column; gap: 14px; }
/* ---------------- Биржа: торговый терминал (B03) ---------------- */
.tv-terminal { display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.tv-col { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--border-radius); overflow: hidden; }
.tv-panel { border-bottom: 1px solid var(--border); }
.tv-panel:last-child { border-bottom: none; }
.tv-panel-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding: 12px 14px 8px; }
/* Левая колонка — список рынков */
.tv-markets { display: flex; flex-direction: column; }
.tv-market-row {
display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
width: 100%; padding: 10px 14px; background: transparent; border: none;
border-left: 2px solid transparent; cursor: pointer; text-align: left;
color: var(--text-main); font-family: inherit; transition: background .2s;
}
.tv-market-row:hover { background: var(--card-bg-hover); }
.tv-market-row.is-active { background: var(--card-bg-hover); border-left-color: var(--gold); }
.tv-market-sym { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.tv-market-price { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 14px; text-align: right; }
.tv-market-chg { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 12px; text-align: right; color: var(--text-muted); }
.tv-market-chg.up { color: var(--success-color); }
.tv-market-chg.down { color: var(--danger-color); }
.tv-wallet { border-top: 1px solid var(--border); padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.tv-wallet-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); }
.tv-wallet-row strong { color: var(--text-main); font-family: 'JetBrains Mono', 'Consolas', monospace; }
/* ЗАМОРОЗКА СРЕДСТВ (B10): доступно / в ордерах (заблокировано) */
.tv-wallet-sub { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); padding-left: 10px; }
.tv-wallet-sub b { color: var(--text-main); font-family: 'JetBrains Mono', 'Consolas', monospace; font-weight: 500; }
.tv-wallet-sub:last-child b { color: var(--lime); }
/* Центральная колонка — график и форма */
.tv-col-center { display: flex; flex-direction: column; }
.tv-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tv-head-pair { font-weight: 800; font-size: 18px; letter-spacing: .02em; }
.tv-head-price { font-family: 'JetBrains Mono', 'Consolas', monospace; font-weight: 700; font-size: 22px; color: var(--gold); }
.tv-head-chg { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 13px; color: var(--text-muted); }
.tv-head-chg.up { color: var(--success-color); }
.tv-head-chg.down { color: var(--danger-color); }
.tv-intervals { display: flex; gap: 4px; margin-left: auto; }
.tv-iv {
background: transparent; border: 1px solid var(--border); color: var(--text-muted);
border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
font-family: inherit; transition: var(--transition);
}
.tv-iv:hover { color: var(--text-main); }
.tv-iv.is-active { background: var(--gold); border-color: var(--gold); color: var(--on-accent); font-weight: 700; }
.tv-chart { height: 420px; width: 100%; position: relative; }
/* B07: собственный canvas-график свечей */
.tv-candle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.tv-candle-legend { position: absolute; top: 8px; left: 12px; display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); pointer-events: none; z-index: 2; }
.tv-candle-legend .tv-leg-c.up { color: var(--lime); }
.tv-candle-legend .tv-leg-c.down { color: var(--red); }
.tv-candle-tip { position: absolute; display: none; pointer-events: none; background: var(--surface-96); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 11px; line-height: 1.5; color: var(--text); z-index: 4; white-space: nowrap; box-shadow: 0 6px 18px var(--overlay-35); }
.tv-candle-tip .tv-tip-time { color: var(--text-muted); margin-bottom: 2px; }
.tv-candle-empty { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--text-muted); font-size: 13px; z-index: 1; }
/* Форма торговли */
.tv-trade { border-top: 1px solid var(--border); }
.tv-trade-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); }
.tv-side[hidden] { display: none; }
.tv-trade-tabs { display: flex; border-bottom: 1px solid var(--border); }
.tv-trade-tabs button { flex: 1; padding: 14px; border: 0; border-bottom: 2px solid transparent; background: var(--panel); color: var(--muted); cursor: pointer; font: inherit; }
.tv-trade-tabs button.is-active { color: var(--text); border-bottom-color: var(--lime); }
.tv-book-row { cursor: pointer; }
.tv-book-row.is-mine { box-shadow: inset 3px 0 var(--danger, #e85b65); outline: 1px solid var(--danger, #e85b65); outline-offset: -1px; }
.tv-book-row.is-mine span:first-child { color: var(--danger, #e85b65); }
.cabinet-tabs { display: flex; gap: 12px; margin: 0 0 24px; }
.profile-assets { display: flex; flex-wrap: wrap; gap: 24px; }
.coinflip-game-card small { display: block; color: var(--muted); margin-top: 6px; }
.activity-new { animation: activity-arrive 600ms ease-out; }
@keyframes activity-arrive { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .activity-new { animation: none; } }
.tv-side { background: var(--card-bg); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.tv-side-title { font-weight: 700; font-size: 14px; }
.tv-side-buy .tv-side-title { color: var(--success-color); }
.tv-side-sell .tv-side-title { color: var(--danger-color); }
.tv-field { display: flex; flex-direction: column; gap: 4px; }
.tv-field span { font-size: 12px; color: var(--text-muted); }
.tv-field input {
background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
padding: 8px 10px; color: var(--text-main); font-size: 14px;
font-family: 'JetBrains Mono', 'Consolas', monospace; width: 100%;
}
.tv-field input:focus { outline: none; border-color: var(--gold); }
.tv-field input:disabled { opacity: .5; cursor: not-allowed; }
.tv-total { font-size: 13px; color: var(--text-muted); }
.tv-total strong { color: var(--text-main); font-family: 'JetBrains Mono', 'Consolas', monospace; }
/* Подсветка нехватки свободных средств у «Итого» (B10) */
.tv-total strong.tv-total-warn { color: var(--danger-color); }
.tv-btn { border: none; border-radius: 8px; padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; transition: var(--transition); color: var(--text); }
.tv-btn-buy { background: var(--success-color); color: var(--on-accent); }
.tv-btn-buy:hover { background: var(--gold-hover); }
.tv-btn-sell { background: var(--danger-color); color: var(--on-danger); }
.tv-btn-sell:hover { background: var(--red-hover); }
/* Правая колонка — стакан и диаграмма глубины */
.tv-book-head {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px 14px;
font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em;
}
.tv-book-asks, .tv-book-bids { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; overscroll-behavior-y: contain; }
.tv-book-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px 14px;
font-size: 12px; font-family: 'JetBrains Mono', 'Consolas', monospace;
background: transparent;
}
.tv-book-row.bid { --book-volume: var(--accent-12); }
.tv-book-row.ask { --book-volume: var(--danger-12); }
.tv-book-row span:last-child { text-align: right; color: var(--text-muted); }
.tv-book-asks .tv-book-row span:first-child,
.tv-book-bids .tv-book-row span:first-child { color: var(--text); }
.tv-book-spread {
text-align: center; padding: 6px 0; font-weight: 700; font-size: 15px;
font-family: 'JetBrains Mono', 'Consolas', monospace; color: var(--gold);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
background: var(--bg-elevated); margin: 4px 0;
}
.tv-depth-canvas { display: block; width: 100%; height: 150px; padding: 0 6px 6px; box-sizing: border-box; }
.tv-empty { padding: 16px 14px; color: var(--text-muted); font-size: 12px; text-align: center; }
/* Мои заявки (активные ордера) + отмена (B10) */
.tv-orders-count { color: var(--gold); font-weight: 700; }
.tv-orders { display: flex; flex-direction: column; max-height: 220px; overflow-y: auto; }
.tv-my-order { padding: 7px 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.tv-my-order:last-child { border-bottom: none; }
.tv-my-order-main { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.tv-my-order-side { font-weight: 700; }
.tv-my-order.buy .tv-my-order-side { color: var(--success-color); }
.tv-my-order.sell .tv-my-order-side { color: var(--danger-color); }
.tv-my-order-price { font-family: 'JetBrains Mono', 'Consolas', monospace; color: var(--text-main); }
.tv-my-order-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.tv-my-order-frozen { font-family: 'JetBrains Mono', 'Consolas', monospace; color: var(--lime); }
.tv-my-order-cancel {
border: 1px solid var(--danger-color); background: transparent; color: var(--danger-color);
border-radius: 6px; padding: 3px 10px; font-size: 11px; cursor: pointer; font-family: inherit;
transition: var(--transition);
}
.tv-my-order-cancel:hover { background: var(--danger-color); color: var(--on-danger); }
.tv-my-order-cancel:disabled { opacity: .5; cursor: default; }
/* ---------------- Игры ---------------- */
.game-panel {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
background: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--box-shadow);
padding: 46px;
}
.coin-flip { display: flex; justify-content: center; perspective: 800px; }
.coin {
width: 180px; height: 180px;
position: relative;
transform-style: preserve-3d;
transition: transform 1.6s ease;
}
.coin-face {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
font-size: 64px; color: var(--text);
backface-visibility: hidden;
box-shadow: 0 16px 40px var(--accent-40);
}
.coin-front { background: linear-gradient(135deg, var(--lime), var(--lime)); }
.coin-back { background: var(--gradient-primary); transform: rotateY(180deg); }
.coin.flipping { animation: coin-flip 1.6s ease; }
@keyframes coin-flip {
0% { transform: rotateY(0) translateY(0); }
50% { transform: rotateY(900deg) translateY(-60px); }
100% { transform: rotateY(1800deg) translateY(0); }
}
.bet-controls { display: flex; flex-direction: column; gap: 16px; }
.bet-controls label { font-weight: 600; }
.bet-choice { display: flex; gap: 12px; }
.choice-btn { flex: 1; }
.choice-btn.active { background: var(--gradient-primary); color: var(--on-accent); border-color: transparent; }
.game-result {
text-align: center;
font-weight: 600;
padding: 16px;
border-radius: var(--border-radius);
background: var(--light-color);
}
.game-result.win { background: var(--accent-12); color: var(--success-color); }
.game-result.lose { background: var(--danger-12); color: var(--danger-color); }
/* PvP «Орёл или решка» */
.coinflip-layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr); gap: 24px; align-items: start; }
.coinflip-create { display: block; padding: 30px; }
.coinflip-lists { display: grid; gap: 18px; }
.coinflip-list-card { background: var(--white); border-radius: var(--border-radius-lg); box-shadow: var(--box-shadow); padding: 24px; }
.game-panel-heading { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.game-panel-heading > i { color: var(--warning-color, var(--lime)); font-size: 22px; margin-top: 3px; }
.game-panel-heading h2 { font-size: 19px; margin: 0 0 5px; }
.game-panel-heading p { margin: 0; color: var(--gray-color); font-size: 13px; line-height: 1.45; }
.coinflip-game-list { display: grid; gap: 10px; }
.coinflip-game-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--border-color, var(--border)); border-radius: 12px; padding: 12px 14px; background: var(--light-color); }
.coinflip-game-card strong, .coinflip-game-card span { display: block; }
.coinflip-game-card span { color: var(--warning-color, var(--lime)); font-size: 13px; font-weight: 700; margin-top: 3px; }
.coinflip-game-card .btn { white-space: nowrap; padding: 8px 12px; font-size: 13px; }
.coinflip-overlay { display: none; position: fixed; z-index: 3000; inset: 0; padding: 20px; background: var(--surface-80); align-items: center; justify-content: center; }
.coinflip-overlay.visible { display: flex; }
.coinflip-result-modal { width: min(420px, 100%); text-align: center; background: var(--white); border-radius: var(--border-radius-lg); box-shadow: 0 25px 70px var(--overlay-35); padding: 36px; }
.coinflip-result-modal .coin-flip { margin-bottom: 25px; }
.coinflip-result-modal h2 { margin: 0 0 14px; }
.coinflip-result-modal .game-result { margin-bottom: 20px; }
@media (max-width: 1024px) {
.coinflip-layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.coinflip-game-card { align-items: stretch; flex-direction: column; }
.coinflip-game-card .btn { width: 100%; }
.coinflip-result-modal { padding: 26px 18px; }
}
/* ---------------- Биржа: баланс токенов ---------------- */
.token-balance {
font-size: 13px;
color: var(--gray-color);
margin: 6px 0;
}
.token-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.token-actions .market-amount { width: 90px; }
/* ---------------- Игры: баланс ---------------- */
.game-balance {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--light-color);
padding: 12px 20px;
border-radius: var(--border-radius);
font-size: 16px;
margin-bottom: 20px;
}
.game-balance i { color: var(--warning-color, var(--lime)); }
.empty-note {
text-align: center;
color: var(--gray-color);
padding: 24px;
}
/* ---------------- Адаптив новых страниц ---------------- */
@media (max-width: 1024px) {
.premium-section { grid-template-columns: 1fr; text-align: center; }
.premium-section .premium-list li { justify-content: center; }
.testimonials-grid { grid-template-columns: 1fr; }
.philosophy-grid, .economy-model { grid-template-columns: 1fr; }
.feature-block, .feature-block.reverse { grid-template-columns: 1fr; }
.feature-block.reverse .feature-visual { order: 0; }
.game-panel { grid-template-columns: 1fr; }
.page-header h1 { font-size: 34px; }
/* Терминал: рынки сверху, центр, справа стакан вниз */
.tv-terminal { grid-template-columns: 1fr; }
.tv-markets { display: grid; grid-template-columns: repeat(3, 1fr); }
}
/* ---------------- Адаптив торгового терминала (B03) ---------------- */
@media (max-width: 768px) {
.tv-terminal { grid-template-columns: 1fr; }
.tv-markets { display: flex; flex-direction: column; }
.tv-trade-grid { grid-template-columns: 1fr; }
.tv-chart { height: 300px; }
}
/* ================= РЕКЛАМА: оверлей и запуск ================= */
/* Карточка запуска в личном кабинете */
.ra-launch {
display: flex; flex-direction: column; gap: 12px;
margin-top: 8px;
}
.ra-launch-badge {
align-self: flex-start;
font-size: 12px; font-weight: 600;
color: var(--success-color);
background: var(--accent-12);
border-radius: 999px; padding: 4px 12px;
}
.ra-launch-reward {
display: flex; align-items: center; justify-content: space-between;
background: var(--light-color);
border-radius: var(--border-radius);
padding: 12px 16px;
}
.ra-launch-reward span { color: var(--gray-color); font-size: 14px; }
.ra-launch-reward b { font-size: 20px; color: var(--primary-color); }
.ra-launch-note { font-size: 12px; color: var(--gray-color); }
/* Оверлей с плеером. --ra-gap — отступ окна от краёв экрана;
он же участвует в расчёте ширины диалога по высоте viewport
(см. .ra-modal), поэтому меняется только вместе с padding. */
.ra-overlay {
--ra-gap: 16px;
position: fixed; inset: 0; z-index: 10000;
display: none; align-items: center; justify-content: center;
background: var(--overlay-72);
padding: var(--ra-gap); overflow: hidden;
}
.ra-overlay.is-open { display: flex; }
/* Диалог всегда внутри viewport и БЕЗ внутренней прокрутки.
Плеер строго 16:9, поэтому полная высота композиции =
ширина × 9/16 + постоянная «обвязка» (шапка, рекламодатель,
статус, подвал, примечание). Чтобы всё помещалось на низком
экране, ограничивается ширина — вместе с ней пропорционально
уменьшается высота плеера: диалог не обрезается и не даёт скролл.
--ra-chrome — наибольшая ИЗМЕРЕННАЯ (tmp/measure_ra_chrome.py)
высота обвязки в трёх штатных состояниях («до просмотра»,
«идёт просмотр», «можно получить награду») + запас 16px:
720×1080 / 834×1194 / 1912×1080 ... 258.58 / 224.19 → 315px
390×844 (худший: статус в 2 строки) ... 298.77 → 315px
Ниже — компактные режимы с их собственными замерами. */
.ra-modal {
--ra-chrome: 315px;
width: min(720px, 100%, calc((100dvh - var(--ra-gap) * 2 - var(--ra-chrome)) * 16 / 9));
max-width: 100%;
max-height: calc(100dvh - var(--ra-gap) * 2);
overflow: hidden;
overscroll-behavior: contain;
background: var(--bg); color: var(--text);
border-radius: 14px;
box-shadow: 0 24px 70px var(--overlay-60);
display: flex; flex-direction: column;
}
.ra-modal > * { flex: 0 0 auto; }
/* Контентная секция (рекламодатель, статус, проверка, апелляция).
В штатных состояниях она не прокручивается и не клипуется:
ширина диалога подобрана так, чтобы всё помещалось целиком. */
.ra-modal > .ra-body {
flex: 0 1 auto;
min-height: 0;
display: flex; flex-direction: column;
overflow: hidden;
}
.ra-body > * { flex: 0 0 auto; }
/* Исключительные объёмные состояния (CAPTCHA и форма апелляции):
прокручивается только контентная секция. Шапка с кнопкой закрытия,
плеер, подвал с действиями и примечание остаются закреплёнными.
.ra-modal--overflow — аварийный случай (очень длинный текст ошибки
на низком экране): тоже прокручивается лишь контентная секция,
поэтому контент никогда не обрезается и не вылезает за окно. */
.ra-modal--captcha > .ra-body,
.ra-modal--appeal > .ra-body,
.ra-modal--overflow > .ra-body {
overflow-y: auto;
overscroll-behavior: contain;
}
.ra-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; background: var(--panel);
}
.ra-header h2 { font-size: 16px; margin: 0; }
.ra-close {
background: transparent; border: 0; color: var(--muted);
font-size: 26px; line-height: 1; cursor: pointer;
display: inline-grid; place-items: center;
min-width: 44px; min-height: 44px; margin: -8px -8px -8px 0;
border-radius: 10px; transition: color 0.16s ease, background-color 0.16s ease;
}
.ra-close:hover { color: var(--text); background: var(--card-bg-hover); }
.ra-video-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bg);
}
/* Материал заполняет окно без искажения: пропорции сохраняются, лишние края
обрезаются, чёрных полос нет. Лица и текст не растягиваются по ширине.
Видео вне normal flow: иначе intrinsic-размер вертикального MP4 (720×1280)
растягивает контейнер и aspect-ratio родителя визуально не срабатывает. */
.ra-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
background: var(--bg);
}
.ra-progress {
position: absolute; left: 0; right: 0; bottom: 0;
height: 5px; background: var(--text-18);
}
.ra-progress-bar {
height: 100%; width: 0%;
background: var(--lime);
transition: width 0.25s linear;
}
/* Подготовка креатива: видна, пока видео грузится или буферизуется.
Время просмотра в это время не идёт — об этом же говорит текст. */
.ra-prep {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 16px; text-align: center;
background: rgba(7, 8, 11, 0.55); color: var(--text);
font-size: 13px; line-height: 18px;
pointer-events: none;
}
.ra-prep[hidden] { display: none; }
.ra-prep-text { max-width: 30ch; overflow-wrap: anywhere; }
.ra-prep-spinner {
width: 28px; height: 28px; border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.18);
border-top-color: var(--lime);
animation: ra-prep-spin 0.9s linear infinite;
}
@keyframes ra-prep-spin { to { transform: rotate(360deg); } }
.ra-status {
background: var(--panel); color: var(--text);
padding: 10px 16px; min-height: 40px;
font-size: 14px; line-height: 1.5;
overflow-wrap: anywhere; word-break: break-word; min-width: 0;
}
/* Отказ загрузки: текст читается как ошибка, но остаётся в палитре токенов. */
.ra-status[data-tone="error"] { color: var(--red); }
.ra-footer {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 12px 16px; background: var(--panel); flex-wrap: wrap;
}
.ra-reward { font-size: 14px; color: var(--text); }
.ra-reward b { color: var(--lime); }
/* Кнопки переносятся, а не вылезают за ширину диалога; зона нажатия
не меньше 44px по высоте на любом устройстве. */
.ra-actions {
display: flex; gap: 8px; flex-wrap: wrap;
min-width: 0; max-width: 100%;
}
.ra-actions .ra-btn { min-width: 0; }
.ra-btn {
border: 0; border-radius: 10px; padding: 10px 16px;
min-height: 44px;
font-size: 14px; font-weight: 600; line-height: 20px;
cursor: pointer;
transition: background-color 0.16s ease, color 0.16s ease;
}
.ra-btn[hidden] { display: none; }
.ra-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ra-btn-primary { background: var(--lime); color: var(--on-accent); }
.ra-btn-primary:hover:not(:disabled) { background: var(--gold-hover); }
.ra-btn-success { background: var(--lime); color: var(--on-accent); }
.ra-btn-success:hover:not(:disabled) { background: var(--lime); }
/* Вторичное действие (повтор после отказа): тихая поверхность панели. */
.ra-btn-secondary {
background: var(--card-bg-hover); color: var(--text);
border: 1px solid var(--line);
}
.ra-btn-secondary:hover:not(:disabled) {
background: var(--accent-10); border-color: var(--lime); color: var(--lime);
}
.ra-note {
padding: 10px 16px 14px; font-size: 12px; color: var(--muted);
background: var(--panel);
}
/* Креатив кампании: слайды, рекламодатель, проверка и ограничение доступа.
Маркировка для зрителя — только «Реклама»: никаких внутренних пометок. */
.ra-slides { position: absolute; inset: 0; background: var(--bg); }
.ra-slide {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; background: var(--bg);
}
.ra-advertiser {
margin: 0; padding: 0 16px;
background: var(--panel); color: var(--muted);
font-size: 12px; line-height: 20px;
overflow-wrap: anywhere;
}
.ra-advertiser:empty { display: none; }
.ra-captcha,
.ra-restricted {
display: grid; gap: 12px;
padding: 16px; background: var(--panel); color: var(--text);
border-top: 1px solid var(--text-18);
}
.ra-captcha[hidden],
.ra-restricted[hidden] { display: none; }
.ra-captcha p,
.ra-restricted-note { margin: 0; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
/* Контейнер виджета Cloudflare Turnstile: фиксированная высота, чтобы
оверлей не прыгал, пока скрипт проверки загружается. */
.ra-turnstile { display: flex; justify-content: center; min-height: 65px; align-items: center; }
.ra-turnstile:empty { display: none; }
/* Кнопка звука: нужна, только если браузер не дал автозапуск со звуком. */
.ra-sound { display: inline-flex; align-items: center; gap: 8px; }
.ra-sound[hidden] { display: none; }
.ra-appeal-label { font-size: 13px; color: var(--muted); }
.ra-appeal-text {
width: 100%; min-height: 84px; resize: vertical;
padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--text-18); background: var(--bg); color: var(--text);
font: inherit; font-size: 14px; line-height: 20px;
}
.ra-appeal-text:focus-visible {
outline: 2px solid var(--lime); outline-offset: 2px;
}
.ra-appeal-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ra-appeal-note { font-size: 13px; color: var(--muted); }
.ra-btn:focus-visible,
.ra-btn:focus-visible,
.ra-close:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
/* Короткий экран (телефон в альбоме, ноутбук 768×480) обрабатывается
ограничением ширины диалога по высоте viewport (см. .ra-modal выше):
высота плеера уменьшается вместе с шириной, 16:9 сохраняется. Обрезка
плеера по max-height запрещена — она ломает пропорции.
На таких экранах обвязка уплотняется, иначе фиксированная высота
шапки, статуса, подвала и примечания не оставляет места 16:9-плееру.
--ra-chrome берётся из замера уплотнённого режима, по каждому
брейкпоинту отдельно (tmp/measure_ra_chrome.py):
compact (470 < h <= 620): 220.39 -> 236px
short (h <= 470): 205–223 -> 239px (без примечания)
Иначе обвязка больше константы, и окно обрезало бы низ. */
@media (max-height: 620px) {
.ra-modal { --ra-chrome: 236px; }
.ra-header { padding: 6px 12px; }
.ra-advertiser { padding: 0 12px; font-size: 11px; line-height: 16px; }
.ra-status {
padding: 6px 12px; min-height: 0;
font-size: 13px; line-height: 18px;
}
.ra-footer { padding: 8px 12px; gap: 8px; }
.ra-note { padding: 6px 12px 8px; font-size: 11px; line-height: 15px; }
.ra-btn { padding: 8px 12px; font-size: 13px; }
}
/* Совсем низкий экран (ландшафт телефона: 390–470px высоты).
Место дороже подписей: строка «Награда: …» и примечание скрываются
(примечание дублирует правило, статус и кнопки остаются), кнопки
идут в один ряд и не переносятся. Без этого перенос длинных текстов
на узкой ширине разрастался бы быстрее, чем уменьшался плеер, —
и окно пришлось бы обрезать. Замер: chrome = 146px -> 162px. */
@media (max-height: 470px) {
.ra-modal { --ra-chrome: 162px; }
.ra-reward, .ra-note { display: none; }
.ra-footer { flex-wrap: nowrap; }
.ra-actions { flex-wrap: nowrap; }
}
@media (max-width: 768px) {
/* Ширина остаётся ограниченной высотой viewport (из базового правила):
width:100% здесь перебил бы расчёт и вернул обрезанный плеер. */
.ra-modal { padding-bottom: env(safe-area-inset-bottom); }
/* Пропорции рекламной области едины на всех устройствах (16:9 из базового
правила выше). На мобильном адаптируется только ширина окна, поэтому
переопределения aspect-ratio здесь нет и быть не должно. */
.ra-footer { align-items: stretch; }
.ra-actions { width: 100%; }
.ra-actions .ra-btn { flex: 1 1 auto; min-height: 44px; }
.ra-appeal-actions .ra-btn { min-height: 44px; }
/* Длинный статус и форма обращения не должны распирать диалог по ширине. */
.ra-status, .ra-note, .ra-advertiser, .ra-captcha, .ra-restricted { min-width: 0; }
.ra-turnstile { min-height: 0; padding-block: 4px; }
}
@media (prefers-reduced-motion: reduce) {
.ra-progress-bar { transition: none; }
.ra-prep-spinner { animation: none; border-top-color: rgba(255, 255, 255, 0.18); }
}
/* Витрина тарифов «наставника» (Старт / Про / Эксперт) */
.premium-tiers {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 18px;
}
.tier-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
border-radius: 14px;
border: 1px solid var(--text-14);
background: var(--text-6);
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.tier-card:hover {
border-color: var(--accent-55);
background: var(--text-9);
box-shadow: 0 8px 22px var(--overlay-28);
}
.tier-card-current {
border-color: var(--lime);
background: var(--accent-12);
box-shadow: 0 0 0 1px var(--accent-35) inset;
}
.tier-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tier-head { font-size: 16px; font-weight: 700; }
.tier-price {
font-size: 20px;
font-weight: 700;
color: var(--lime);
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.tier-price i { font-size: 15px; }
.tier-desc { font-size: 13px; color: var(--text-70); line-height: 1.4; }
.tier-buy-btn { flex: 0 0 auto; width: auto; white-space: nowrap; }
.tier-buy-btn:disabled { cursor: default; }
.tier-btn-current { background: var(--gradient-success); color: var(--on-accent); box-shadow: none; }
.tier-btn-active {
background: var(--text-10);
color: var(--text-65);
border: 1px solid var(--text-18);
box-shadow: none;
cursor: default;
}
.tier-btn-active:hover { transform: none; }
@media (max-width: 560px) {
.tier-card { flex-direction: column; align-items: stretch; gap: 12px; }
.tier-buy-btn { width: 100%; }
}
/* ================= ПУБЛИЧНЫЙ РЕЕСТР (T15) ================= */
.registry-toolbar {
display: flex; flex-wrap: wrap; gap: 14px;
align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.registry-search {
position: relative; flex: 1 1 260px; max-width: 420px;
}
.registry-search > i {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: var(--gray-color); pointer-events: none;
}
.registry-search .form-input { padding-left: 40px; width: 100%; }
.registry-suggest {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
background: var(--white); border-radius: var(--border-radius);
box-shadow: var(--box-shadow); overflow: hidden;
}
.suggest-item {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; cursor: pointer; font-size: 14px;
border-bottom: 1px solid var(--light-color);
}
.suggest-item:last-child { border-bottom: none; }
.suggest-item:hover { background: var(--light-color); }
.suggest-item span { color: var(--gray-color); font-size: 13px; }
.suggest-item.muted { color: var(--gray-color); cursor: default; justify-content: center; }
.registry-hint {
color: var(--gray-color); font-size: 13px; font-style: italic;
margin-left: auto;
}
.registry-range {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin-bottom: 24px;
}
.registry-range label { color: var(--gray-color); font-size: 14px; }
.registry-range .form-input { width: auto; padding: 8px 12px; }
/* Строка ленты активности */
.activity-row {
display: flex; align-items: center; gap: 14px;
background: var(--white); border-radius: var(--border-radius);
box-shadow: var(--box-shadow-sm); padding: 14px 18px;
border-left: 4px solid var(--primary-color);
}
.act-icon {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--light-color); color: var(--primary-color); font-size: 16px;
}
.act-body { flex: 1; min-width: 0; }
.act-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.act-user { font-weight: 600; color: var(--primary-color); text-decoration: none; }
.act-user:hover { text-decoration: underline; }
.act-label { color: var(--text-color); font-size: 14px; }
.act-meta { font-size: 12px; color: var(--gray-color); margin-top: 3px; }
.act-amount { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.act-positive { color: var(--success-color); }
.act-negative { color: var(--danger-color, var(--red)); }
.act-neutral { color: var(--gray-color); }
.act-state { color: var(--gray-color); font-size: 11px; white-space: nowrap; }
/* Публичный профиль пользователя */
.profile-card {
display: flex; gap: 20px; align-items: center;
background: var(--white); border-radius: var(--border-radius);
box-shadow: var(--box-shadow); padding: 24px; margin-bottom: 24px;
}
.profile-avatar {
flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
background: var(--gradient-primary); color: var(--on-accent);
display: flex; align-items: center; justify-content: center; font-size: 30px;
}
.profile-head { flex: 1; min-width: 0; }
.profile-head h2 {
font-size: 22px; display: flex; align-items: center; gap: 10px;
flex-wrap: wrap; margin-bottom: 14px;
}
.profile-badge {
font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
background: var(--light-color); color: var(--gray-color);
}
.profile-badge.premium { background: var(--accent-15); color: var(--lime); }
.profile-stats { display: flex; flex-wrap: wrap; gap: 24px; }
.pstat { display: flex; flex-direction: column; }
.pstat span { font-size: 20px; font-weight: 700; color: var(--primary-color); }
.pstat small { color: var(--gray-color); font-size: 12px; }
.profile-dates { color: var(--gray-color); font-size: 13px; margin-top: 12px; }
.profile-section { margin-bottom: 26px; }
.profile-section > h3 {
font-size: 18px; margin-bottom: 14px;
display: flex; align-items: center; gap: 8px;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--white); box-shadow: var(--box-shadow-sm);
border-radius: 999px; padding: 8px 16px; font-size: 14px;
color: var(--text-color); text-decoration: none; transition: all .2s;
}
.chip:hover { color: var(--primary-color); transform: translateY(-2px); }
@media (max-width: 560px) {
.registry-toolbar { flex-direction: column; align-items: stretch; }
.registry-search { flex: 0 0 auto; width: 100%; max-width: none; min-width: 0; }
.activity-row { align-items: flex-start; }
.profile-card { flex-direction: column; text-align: center; }
.profile-stats { justify-content: center; }
}
/* ================= МЕССЕНДЖЕР (наставник ↔ подписчики) ================= */
.nav-badge {
display: inline-block; margin-left: 6px;
background: var(--accent-color); color: var(--on-accent);
font-size: 11px; font-weight: 700; line-height: 1;
padding: 3px 7px; border-radius: 999px;
vertical-align: middle;
}
/* ============================================================
МЕССЕНДЖЕР (VK Teams / Telegram Web)
Жёсткий каркас на весь экран: список чатов и лента сообщений
скроллятся НЕЗАВИСИМО; шапка и поле ввода всегда зафиксированы.
============================================================ */
/* --- режим мессенджера: убираем хром сайта, занимаем весь экран --- */
body.chat-mode {
height: var(--app-vh, 100dvh);
overflow: hidden;
overscroll-behavior: none;
}
/* В режиме чата общий сайдбар остаётся — чат единое целое с сайтом */
body.chat-mode .footer { display: none; }
body.chat-mode .global-content {
display: flex;
flex-direction: column;
height: var(--app-vh, 100dvh);
overflow: hidden;
}
/* inline display:block от showPage перебиваем только здесь */
body.chat-mode #page-chat.app-page {
flex: 1;
min-height: 0;
display: flex !important;
animation: none;
}
/* --- корневой контейнер приложения --- */
.chat-wrap { flex: 1; min-height: 0; width: 100%; display: flex; }
.chat-shell {
/* Единая тёмная палитра CROWDWIZ (чат — часть общего SPA) */
--chat-bg: var(--bg);
--chat-sidebar-bg: var(--panel);
--chat-conv-bg: var(--bg);
--chat-border: var(--border);
--chat-hover: var(--card-bg-hover);
--chat-active: var(--accent-12);
--chat-bubble: var(--panel);
--chat-text: var(--text);
--chat-subtext: var(--muted);
--chat-accent: var(--lime);
--chat-link: var(--lime);
position: relative;
display: flex;
width: 100%;
height: 100%;
min-height: 0;
background: var(--chat-bg);
overflow: hidden;
color: var(--chat-text);
font-size: 14px;
font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--chat-bubble-out: var(--accent-10); --chat-out-text: var(--text); --chat-tick: var(--lime); }
/* Скроллбары в стиле Telegram Web */
.chat-shell ::-webkit-scrollbar { width: 6px; height: 6px; }
.chat-shell ::-webkit-scrollbar-track { background: transparent; }
.chat-shell ::-webkit-scrollbar-thumb { background: var(--text-10); border-radius: 3px; }
.chat-shell ::-webkit-scrollbar-thumb:hover { background: var(--text-20); }
.chat-shell.chat-light ::-webkit-scrollbar-thumb { background: var(--text-10); }
.chat-shell.chat-light ::-webkit-scrollbar-thumb:hover { background: var(--text-20); }
/* Единая палитра CROWDWIZ: независимо от сохранённого класса темы чат выглядит одинаково */
/* --- аватары (54px, фон var(--card-bg-hover) — как в шаблоне) --- */
.chat-avatar {
flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--card-bg-hover); color: var(--text);
font-weight: 500; font-size: 20px; text-transform: uppercase;
}
.chat-avatar-group { background: var(--card-bg-hover); }
/* Обёртка аватара: держит онлайн-точку в правом нижнем углу.
Габариты совпадают с .chat-avatar, чтобы не менять раскладку списка/шапки. */
.chat-avatar-wrap {
position: relative; flex: 0 0 auto;
display: inline-flex; width: 54px; height: 54px;
}
.chat-avatar-wrap .chat-avatar { width: 100%; height: 100%; }
/* Динамический индикатор присутствия (обновляется опросом /api/chat/presence) */
.chat-online-dot {
position: absolute; right: 1px; bottom: 1px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--lime);
border: 2px solid var(--chat-sidebar-bg, var(--panel));
box-shadow: 0 0 0 1px var(--overlay-25);
transition: background .2s ease;
}
.chat-online-dot.chat-online-off { background: var(--muted); }
/* В шапке диалога фон темнее — точка с обводкой под фон шапки */
.chat-conv-head .chat-online-dot { border-color: var(--chat-bg, var(--bg)); }
/* Подпись «в сети» под именем собеседника */
.chat-conv-sub.chat-other-online { color: var(--lime); }
/* Что собеседник открыл этот же диалог, показывает полоса под полем ввода
(«Andrey в чате»), а не подпись шапки — см. .chat-typing. */
/* Бейдж непрочитанных в общем сайдбаре (на пункте «Чат») */
.nav-item .nav-badge {
position: absolute; top: 4px; right: 8px; margin: 0; padding: 2px 5px;
background: var(--gold); color: var(--on-accent); font-size: 10px; font-weight: 800;
line-height: 1; border-radius: 10px; border: 2px solid var(--bg-elevated);
min-width: 0;
}
/* --- список чатов 420px --- */
.chat-sidebar {
flex: 0 0 420px; width: 420px; height: 100%;
display: flex; flex-direction: column; min-width: 0; min-height: 0;
background: var(--chat-sidebar-bg); border-right: 1px solid var(--chat-border);
}
/* шапка списка: заголовок + лупа */
.chat-list-header {
flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
height: 60px; padding: 10px 15px;
}
.chat-list-title { flex: 1; font-weight: 500; font-size: 17px; color: var(--chat-text); }
.chat-search-btn {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
border: 0; background: transparent; color: var(--chat-subtext);
cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
font-size: 18px;
}
.chat-search-btn:hover { background: var(--text-5); color: var(--chat-text); }
/* поле поиска (открывается лупой) */
.chat-search { flex: 0 0 auto; position: relative; padding: 0 15px 10px; }
.chat-search i {
position: absolute; left: 27px; top: 50%; transform: translateY(calc(-50% - 5px));
color: var(--chat-subtext); font-size: 14px; pointer-events: none;
}
.chat-search input {
width: 100%; border: 0; outline: none; border-radius: 20px;
background: var(--chat-bg); color: var(--chat-text);
padding: 9px 14px 9px 40px; font-size: 14px; font-family: inherit;
}
/* папки */
.chat-folders {
flex: 0 0 auto; display: flex; gap: 20px; padding: 0 15px;
border-bottom: 1px solid var(--text-5); margin-bottom: 10px;
}
.chat-shell.chat-light .chat-folders { border-bottom-color: var(--overlay-6); }
.chat-folder { position: relative; padding: 8px 0; color: var(--chat-subtext); cursor: pointer; font: inherit; font-size: 14px; background: transparent; border: 0; }
.chat-folder.active { color: var(--chat-accent); }
.chat-folder.active::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
height: 3px; background: var(--chat-accent); border-radius: 3px 3px 0 0;
}
.chat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px; }
.chat-empty { display:flex; min-height:180px; padding:28px 16px; align-items:center; justify-content:center; flex-direction:column; gap:10px; text-align:center; color:var(--chat-subtext); }
.chat-empty p { margin:0; color:var(--chat-text); font-weight:600; }
.chat-empty span { max-width:270px; font-size:13px; line-height:1.5; }
.chat-item {
display: flex; gap: 12px; align-items: center;
padding: 10px; margin: 0 0 2px; border-radius: 10px; cursor: pointer;
transition: background .15s; width: 100%; border: 0; color: inherit; text-align: left;
font: inherit; background: transparent;
}
.chat-item:focus-visible,.chat-folder:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; }
.chat-item:hover { background: var(--chat-hover); }
.chat-item.active { background: var(--chat-active); }
.chat-item-body { flex: 1; min-width: 0; }
.chat-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-item-name { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-time { flex: 0 0 auto; font-size: 12px; color: var(--chat-subtext); }
.chat-item.active .chat-item-time { color: var(--muted); }
.chat-kind-tag { font-size: 11px; color: var(--chat-subtext); }
.chat-kind-tag i { margin-right: 3px; }
.chat-item-sub { margin: 3px 0; display: flex; gap: 6px; align-items: center; }
.chat-item-preview { font-size: 14px; color: var(--chat-subtext); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.active .chat-item-preview { color: var(--text); }
.chat-muted { opacity: .7; font-style: italic; }
.chat-unread {
flex: 0 0 auto; background: var(--chat-accent);
font-size: 12px; font-weight: 700; min-width: 20px; height: 20px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 6px; border-radius: 10px;
color: var(--on-accent); }
.chat-hand-tag { color: var(--lime); font-size: 12px; }
/* --- основная область --- */
.chat-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: var(--chat-bg); }
.chat-placeholder {
flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
color: var(--chat-subtext); gap: 10px; padding: 30px; text-align: center;
}
.chat-placeholder i { font-size: 54px; opacity: .3; }
.chat-empty-hint { font-size: 13px; opacity: .85; max-width: 340px; }
/* Контейнер переписки: шапка сверху, лента скроллится, ввод снизу.
overflow:hidden + min-height:0 не дают содержимому «распирать» окно. */
.chat-conv { flex: 1; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
/* Шапка жёстко зафиксирована сверху и никогда не сжимается */
.chat-conv-head {
flex: 0 0 auto; flex-shrink: 0; display: flex; align-items: center; gap: 12px;
position: sticky; top: 0; z-index: 10;
height: 60px; padding: 0 20px; border-bottom: 1px solid var(--chat-border);
background: var(--chat-bg);
}
.chat-back-btn {
display: none; border: 0; background: transparent; color: var(--chat-accent);
font-size: 18px; cursor: pointer; padding: 6px 8px; border-radius: 50%;
}
.chat-back-btn:hover { background: var(--chat-hover); }
.chat-conv-avatar { flex: 0 0 auto; }
/* В шапке диалога — аватар 40px (как в шаблоне) */
.chat-conv-head .chat-avatar { width: 40px; height: 40px; font-size: 16px; }
.chat-conv-head .chat-avatar-wrap { width: 40px; height: 40px; }
.chat-conv-head .chat-online-dot { width: 10px; height: 10px; }
.chat-conv-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-conv-name { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-sub { font-size: 13px; color: var(--chat-accent); }
.chat-conv-actions { display: flex; align-items: center; gap: 4px; }
.chat-action-btn {
width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent;
color: var(--chat-subtext); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
}
.chat-action-btn:hover { color: var(--chat-text); }
.chat-perm-banner {
flex: 0 0 auto;
background: var(--accent-14); color: var(--chat-accent);
font-size: 13px; padding: 9px 20px;
}
.chat-perm-banner i { margin-right: 6px; }
/* --- лента сообщений (padding 20px, gap 10px — как в шаблоне) ---
flex:1 + min-height:0 — критично: только лента скроллится внутри Flexbox,
шапка (.chat-conv-head) и ввод (.chat-compose) остаются на месте. --- */
.chat-messages-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
/* Лента заходит под поле ввода на величину --chat-bleed (высота поля плюс полоса
под ним). Без этого под стеклянной полосой лежит пустой фон и backdrop-filter
нечего размывать — он работает, но визуально не виден. Величину считает
updateComposeBleed(): константой она быть не может, потому что textarea
растёт при вводе, а строку ответа и ошибку видно не всегда.
Отступ вешается на саму прокручиваемую ленту, НЕ на обёртку: кнопка «вниз»
позиционируется от обёртки, и на обёртке она уехала бы вместе с лентой. */
.chat-messages {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding: 20px; display: flex; flex-direction: column; gap: 10px;
background: var(--chat-bg);
/* паддинг компенсирует заход под стекло: прижатое к дну сообщение
остаётся видно целиком, а не тонет под полем ввода */
margin-bottom: calc(-1 * var(--chat-bleed, 0px));
padding-bottom: calc(var(--chat-bleed, 0px) + 20px);
}
/* сообщение: строка во всю ширину ленты. width:100% + display:flex нужны,
чтобы обёртка НЕ сжимала пузырь — выравнивание делаем через justify-content.
НИКАКИХ height:100% / flex:1 / min-height у пузыря — иначе он тянется. */
.chat-msg { width: 100%; display: flex; }
.chat-msg:not(.chat-msg-mine) { justify-content: flex-start; }
.chat-msg-mine { justify-content: flex-end; }
.chat-msg-author { font-size: 12.5px; font-weight: 700; color: var(--chat-accent); margin-bottom: 2px; padding-left: 6px; }
.chat-msg-mine .chat-msg-author { color: var(--chat-accent); }
/* пузырь: ширина по тексту, но не шире 75% экрана (радиус 12px, 15px/1.4) */
.chat-msg-bubble {
position: relative; background: var(--chat-bubble); padding: 6px 12px; border-radius: 12px;
font-size: 15px; line-height: 1.4; color: var(--chat-text);
max-width: 75%; width: fit-content;
word-wrap: break-word; overflow-wrap: break-word; word-break: break-word;
cursor: pointer;
}
/* «хвостик» — ВЕРХНИЙ угол (как в шаблоне) */
.chat-msg:not(.chat-msg-mine) .chat-msg-bubble { border-top-left-radius: 4px; }
.chat-msg-mine .chat-msg-bubble { background: var(--chat-bubble-out); color: var(--chat-out-text); border-top-right-radius: 4px; }
.chat-msg-text { white-space: pre-wrap; word-break: break-word; margin-bottom: 2px; }
/* мета (время/галочки) прижата к правому нижнему углу текста */
.chat-msg-meta {
display: flex; align-items: center; gap: 4px;
justify-content: flex-end; margin-top: 2px;
font-size: 12px; color: var(--chat-subtext);
}
.chat-msg-mine .chat-msg-meta { color: var(--lime); }
.chat-msg-time { font-size: 12px; color: var(--chat-subtext); }
/* Время и галочки исходящих сообщений используют лаймовый акцент */
.chat-msg-mine .chat-msg-time { color: var(--lime); }
.chat-msg-tick { font-size: 12px; color: var(--chat-subtext); }
.chat-msg-mine .chat-msg-tick { color: var(--chat-tick); }
/* «Прочитано» — двойная галочка голубого цвета (как в Telegram) */
.chat-msg-mine .chat-tick-read { color: var(--lime); }
/* Статусы доставки (Optimistic UI): часики «sending», ошибка «error» + повтор */
.chat-msg:not(.chat-msg-mine) .chat-msg-tick { color: var(--chat-subtext); }
.chat-tick-sending { animation: chatSpin 1.1s linear infinite; }
@keyframes chatSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.chat-msg-retry {
display: inline-flex; align-items: center; gap: 4px; border: 0; cursor: pointer;
background: transparent; color: var(--red-hover); font-size: 12px; font-weight: 600; padding: 0 2px;
}
.chat-msg-retry:hover { color: var(--text); text-decoration: underline; }
.chat-msg-retry i { font-size: 13px; }
.chat-edited { opacity: .8; }
/* --- вложения в сообщении (фото/видео/аудио/файл) --- */
.chat-attach { margin-bottom: 4px; max-width: 100%; position: relative; }
/* Кнопка «скачать» поверх медиа-вложения */
.chat-attach > .chat-dl-btn {
position: absolute; right: 8px; bottom: 8px; z-index: 3;
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%;
color: var(--lime); background: var(--overlay-60); text-decoration: none;
opacity: .85; transition: opacity .15s ease, transform .15s ease;
}
.chat-attach > .chat-dl-btn:hover,
.chat-attach > .chat-dl-btn:focus-visible { opacity: 1; transform: scale(1.06); outline: none; }
.chat-attach > .chat-dl-btn:active { transform: scale(.95); }
.chat-attach-audio > .chat-dl-btn { right: 0; bottom: 8px; }
.chat-upload-progress {
height: 6px; width: 200px; max-width: 100%; border-radius: 4px;
background: var(--overlay-25); overflow: hidden;
}
.chat-upload-progress > span { display: block; height: 100%; width: 0; background: var(--chat-accent); transition: width .15s ease; }
.chat-attach-img img {
display: block; max-width: 100%; max-height: 320px; border-radius: 10px;
cursor: zoom-in; background: var(--overlay-15);
}
.chat-attach-video video {
display: block; max-width: 100%; max-height: 320px; border-radius: 10px;
background: var(--bg);
}
.chat-attach-audio audio { display: block; width: 260px; max-width: 100%; }
.chat-attach-file {
display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
background: var(--overlay-18); border-radius: 10px; padding: 8px 12px;
color: inherit; max-width: 100%;
}
.chat-msg-mine .chat-attach-file { background: var(--overlay-10); }
.chat-attach-file i { font-size: 18px; }
.chat-attach-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.chat-attach-missing {
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-style: italic;
color: var(--chat-subtext); background: var(--overlay-15); border-radius: 10px; padding: 8px 12px;
}
/* --- лайтбокс для просмотра изображений --- */
.chat-lightbox {
position: fixed; inset: 0; z-index: 2000; background: var(--overlay-90);
display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.chat-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 10px 50px var(--overlay-60); }
/* Кнопка «скачать» в лайтбоксе — не закрывает просмотр */
.chat-lightbox .chat-dl-btn-lightbox {
position: absolute; top: 16px; right: 16px; z-index: 2001;
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
color: var(--lime); background: var(--overlay-60); text-decoration: none;
transition: transform .15s ease, background .15s ease;
}
.chat-lightbox .chat-dl-btn-lightbox:hover,
.chat-lightbox .chat-dl-btn-lightbox:focus-visible { transform: scale(1.06); outline: none; }
.chat-lightbox .chat-dl-btn-lightbox:active { transform: scale(.95); }
/* Цитата ответа внутри пузыря */
.chat-msg-quote {
border-left: 3px solid var(--chat-accent); background: var(--accent-16);
border-radius: 4px; padding: 4px 8px; margin-bottom: 5px; cursor: pointer;
}
.chat-msg-mine .chat-msg-quote { border-left-color: var(--lime); background: var(--accent-10); }
.chat-quote-name { display: block; font-size: 12px; font-weight: 700; color: var(--chat-accent); }
.chat-msg-mine .chat-quote-name { color: var(--text); }
.chat-quote-text { display: block; font-size: 12px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Удалённое сообщение — ОДИН пузырь с рамкой, без вложенности */
.chat-msg-deleted .chat-msg-bubble {
background: transparent !important; border: 1px solid var(--chat-border);
color: var(--chat-subtext); font-style: italic; padding: 6px 12px; border-radius: 12px;
}
.chat-msg-deleted .chat-msg-text { font-style: italic; }
.chat-msg-deleted .chat-msg-author,
.chat-msg-deleted .chat-msg-quote,
.chat-msg-deleted .chat-msg-retry { display: none !important; }
/* Подсветка сообщения, к которому перешли по цитате */
.chat-msg-highlight .chat-msg-bubble { box-shadow: 0 0 0 3px var(--accent-60); transition: box-shadow .2s; }
/* --- разделитель дат (как в шаблоне) --- */
.chat-date-sep { display: flex; justify-content: center; }
.chat-date-sep span {
background: var(--text-10); color: var(--chat-subtext);
font-size: 12px; padding: 4px 12px; border-radius: 12px;
}
.chat-shell.chat-light .chat-date-sep span { background: var(--overlay-8); }
/* --- кнопка «вниз» --- */
/* Появляется не сразу: пока пользователь не отлистал примерно десять сообщений
вверх (порог считает updateScrollBtn), кнопка остаётся скрытой. Скрытие и
показ — через opacity/visibility, а не display, чтобы переход мог сыграть:
display не анимируется и кнопка возникала рывком. */
.chat-scroll-bottom {
/* bottom считается от обёртки ленты, а под поле ленты смещена сама
прокручиваемая лента — обёртка не двигается, значит и кнопка стоит
ровно в 38px над полем ввода. */
position: absolute; right: 20px; bottom: 38px; z-index: 5;
width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .13); cursor: pointer;
color: var(--chat-accent);
/* тёмное стекло: заливка полупрозрачная, иначе backdrop-filter не виден */
background-color: rgba(10, 12, 16, .34);
background-image: linear-gradient(165deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .01) 45%, rgba(0, 0, 0, .14) 100%);
backdrop-filter: blur(22px) saturate(135%) brightness(.86);
-webkit-backdrop-filter: blur(22px) saturate(135%) brightness(.86);
box-shadow: 0 10px 26px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4),
inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(0, 0, 0, .3);
display: inline-flex; align-items: center; justify-content: center; font-size: 16px;
opacity: 0; visibility: hidden; transform: translateY(6px) scale(.94);
transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s,
background-color .16s ease, box-shadow .16s ease;
}
.chat-scroll-bottom.show {
opacity: 1; visibility: visible; transform: none;
transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s,
background-color .16s ease, box-shadow .16s ease;
}
.chat-scroll-bottom:hover { background-color: rgba(16, 19, 24, .46); }
.chat-scroll-bottom:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
.chat-scroll-bottom, .chat-scroll-bottom.show { transition: none; transform: none; }
}
/* --- строка ответа / редактирования --- */
.chat-reply-bar {
flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
padding: 8px 20px; background: var(--chat-bg); border-top: 1px solid var(--chat-border);
}
.chat-reply-icon { color: var(--chat-accent); font-size: 16px; }
.chat-reply-body { flex: 1; min-width: 0; border-left: 3px solid var(--chat-accent); padding-left: 8px; }
.chat-reply-name { font-size: 12.5px; font-weight: 700; color: var(--chat-accent); }
.chat-reply-text { font-size: 12.5px; color: var(--chat-subtext); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-close { border: 0; background: transparent; color: var(--chat-subtext); cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 50%; }
.chat-reply-close:hover { background: var(--chat-hover); }
/* --- эмодзи-панель --- */
.chat-emoji {
flex: 0 0 auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
max-height: 220px; overflow-y: auto; padding: 10px 15px;
background: var(--chat-sidebar-bg); border-top: 1px solid var(--chat-border);
}
.chat-emoji button {
border: 0; background: transparent; cursor: pointer; font-size: 22px;
line-height: 1; padding: 4px; border-radius: 8px;
}
.chat-emoji button:hover { background: var(--chat-hover); }
/* --- поле ввода (padding 10px 20px, gap 15px — как в шаблоне) --- */
.chat-compose-error { color: var(--danger, #e85b66); padding: 4px 20px 10px; font-size: 13px; }
/* Поле ввода жёстко снизу, не сжимается и рисуется поверх ленты.
Приподнято на 32px: под ним остаётся полоса, закрытая тёмным стеклом той же
материи, что кнопка «вниз». Лента сообщений заходит под эту полосу
(--chat-bleed), поэтому backdrop-filter размывает текст, а не пустой фон. */
.chat-compose {
flex: 0 0 auto; flex-shrink: 0; display: flex; align-items: center; gap: 15px;
position: relative; z-index: 10;
padding: 10px 20px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
border-top: 1px solid var(--chat-border); background: var(--chat-bg);
margin-bottom: 32px;
/* Горизонтальный отступ поля — одной переменной: по нему же
выравнивается индикатор «печатает…» в полосе под полем. */
--chat-compose-pad-x: 20px;
}
/* Строка в полосе под полем ввода: «Andrey в чате · печатает •••»
(текст собирает _paintTypingLine в app.js; та же стеклянная материя,
что ::after). Позиционируем абсолютно: появление и исчезновение
строки НЕ меняет высоту поля ввода и не дёргает ленту сообщений.
z-index:1 обязателен — ::after полосы рисуется после обычных детей. */
.chat-typing {
position: absolute; left: 0; right: 0; bottom: -32px; height: 32px;
z-index: 1; pointer-events: none;
display: flex; align-items: center; gap: 6px;
padding: 0 var(--chat-compose-pad-x);
font-size: 12px; line-height: 20px; color: var(--chat-subtext);
white-space: nowrap; overflow: hidden;
}
.chat-typing[hidden] { display: none; }
/* Точки идут ПОСЛЕ текста («печатает •••») и видны только во время набора.
[hidden] нужен явно: display:inline-flex перебивает браузерное скрытие. */
.chat-typing-dots { display: inline-flex; gap: 3px; flex: 0 0 auto; order: 1; }
.chat-typing-dots[hidden] { display: none; }
.chat-typing-dots i {
width: 3px; height: 3px; border-radius: 50%; display: block;
background: currentColor; opacity: .4;
animation: chatTypingPulse 1.2s infinite ease-in-out;
}
.chat-typing-dots i:nth-child(2) { animation-delay: .15s; }
.chat-typing-dots i:nth-child(3) { animation-delay: .3s; }
/* Дыхание точек: заметно, но не мигает в глаза при долгом наборе. */
@keyframes chatTypingPulse {
0%, 60%, 100% { opacity: .25; transform: translateY(0); }
30% { opacity: .95; transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
.chat-typing-dots i { animation: none; opacity: .55; }
}
.chat-typing-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Полоса 32px под полем ввода — то же тёмное стекло, что у .chat-scroll-bottom
(полупрозрачная заливка + backdrop-filter; плотная заливка перекрыла бы
размываемое и блюр стал бы невидим). */
.chat-compose::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -32px; height: 32px;
pointer-events: none;
background-color: rgba(10, 12, 16, .34);
background-image: linear-gradient(165deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .01) 45%, rgba(0, 0, 0, .14) 100%);
backdrop-filter: blur(22px) saturate(135%) brightness(.86);
-webkit-backdrop-filter: blur(22px) saturate(135%) brightness(.86);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.chat-compose.chat-compose-drop {
background: var(--accent-10); outline: 2px dashed var(--chat-accent); outline-offset: -5px;
}
.chat-textarea {
flex: 1; margin: 0; border: 0; outline: none; resize: none; overflow-y: auto;
background: transparent; color: var(--chat-text);
padding: 0; font-size: 15px; line-height: 24px; font-family: inherit;
max-height: 120px; min-height: 24px;
}
.chat-textarea::placeholder { color: var(--chat-subtext); }
.chat-attach-btn, .chat-emoji-btn {
flex: 0 0 auto; border: 0; background: transparent; color: var(--chat-subtext); font-size: 22px;
cursor: pointer; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.chat-attach-btn:hover, .chat-emoji-btn:hover { color: var(--chat-text); }
.chat-attach-btn:disabled { opacity: .4; cursor: not-allowed; }
.chat-send-btn {
flex: 0 0 auto; border: 0; background: transparent; color: var(--chat-accent); font-size: 24px;
cursor: pointer; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
transition: transform .15s, opacity .2s;
}
.chat-send-btn:hover { transform: scale(1.06); }
.chat-send-btn:active { transform: scale(.96); }
.chat-locked {
flex: 0 0 auto; padding: 16px 20px; text-align: center; border-top: 1px solid var(--chat-border);
background: var(--chat-hover); color: var(--chat-text);
}
.chat-locked p { color: var(--chat-subtext); font-size: 13px; margin-bottom: 10px; }
.chat-locked i { color: var(--lime); }
/* --- контекстное меню сообщения (тёмное, как в Telegram) --- */
.chat-msg-menu {
position: fixed; z-index: 1000; display: flex; flex-direction: column; min-width: 184px;
background: var(--panel); border-radius: 10px; box-shadow: 0 8px 28px var(--overlay-50);
padding: 6px; gap: 2px;
}
.chat-menu-item {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
border: 0; background: transparent; cursor: pointer; font-size: 14px;
padding: 9px 12px; border-radius: 8px; color: var(--text);
}
.chat-menu-item:hover { background: var(--card-bg-hover); }
.chat-menu-item i { width: 16px; text-align: center; color: var(--muted); }
.chat-menu-item.danger, .chat-menu-item.danger i { color: var(--red); }
/* --- правая панель «Информация» (380px). По умолчанию СКРЫТА,
открывается кнопкой «⋮» (класс chat-info-open на .chat-shell). --- */
.chat-members {
flex: 0 0 380px; width: 380px; min-height: 0;
border-left: 1px solid var(--chat-border);
display: none; flex-direction: column; background: var(--chat-sidebar-bg);
}
.chat-shell.chat-info-open .chat-members { display: flex; }
.chat-members-head {
height: 60px; display: flex; align-items: center; padding: 0 20px; gap: 8px;
font-weight: 500; font-size: 15px;
color: var(--chat-text); border-bottom: 1px solid var(--chat-border);
}
.chat-members-head i { color: var(--chat-accent); margin-right: 8px; }
.chat-members-head > span { flex: 1; }
.chat-info-close {
flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
color: var(--chat-subtext); font-size: 16px; padding: 4px 6px; border-radius: 6px;
}
.chat-info-close:hover { background: var(--chat-hover); color: var(--chat-text); }
.chat-members-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 0; }
.member-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 10px 20px; border-bottom: 1px solid var(--chat-border);
}
.member-name { font-size: 14px; font-weight: 500; flex: 1; min-width: 90px; color: var(--chat-text); }
.member-state { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.member-can { background: var(--accent-20); color: var(--lime); }
.member-cant { background: var(--chat-hover); color: var(--chat-subtext); }
.member-hand { background: var(--accent-20); color: var(--lime); }
.btn-mini {
font-size: 11px; font-weight: 600; border: 0; border-radius: 10px;
padding: 5px 12px; cursor: pointer; transition: opacity .2s;
}
.btn-mini:hover { opacity: .82; }
.btn-grant { background: var(--lime); color: var(--on-accent); }
.btn-revoke { background: var(--red); color: var(--on-danger); }
/* --- блок «Информация» внизу правой панели --- */
.chat-info-menu {
flex: 0 0 auto; display: flex; flex-direction: column;
border-top: 1px solid var(--chat-border); padding: 6px 0;
}
.chat-info-btn {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
border: 0; background: transparent; cursor: pointer; font-size: 14px;
padding: 12px 20px; color: var(--chat-text); font-family: inherit;
}
.chat-info-btn:hover { background: var(--chat-hover); }
.chat-info-btn i { width: 18px; text-align: center; }
.chat-info-btn.danger-text, .chat-info-btn.danger-text i { color: var(--red); }
/* --- карточка собеседника в правой панели «Информация» --- */
.chat-peer-card {
padding: 14px 18px; border-bottom: 1px solid var(--chat-border);
display: flex; flex-direction: column; gap: 8px;
}
.chat-peer-title {
display: flex; align-items: center; gap: 8px;
font-weight: 700; font-size: 15px; color: var(--chat-text);
}
.chat-peer-title i { color: var(--primary-color); }
.chat-peer-row {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; font-size: 13px;
}
.chat-peer-label { color: var(--chat-subtext); }
.chat-peer-value { color: var(--chat-text); font-weight: 600; text-align: right; }
.chat-peer-link {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 4px; font-size: 13px; font-weight: 600;
color: var(--primary-color); text-decoration: none;
}
.chat-peer-link:hover { text-decoration: underline; }
@media (max-width: 900px) {
/* На мобильных показываем ЛИБО список, ЛИБО диалог на всю ширину */
.chat-sidebar { flex: 1 1 auto; width: auto; border-right: 0; }
.chat-main { display: none; }
.chat-main.chat-open { display: flex; }
/* Прячем список чатов, когда открыт диалог */
.chat-shell.chat-mobile-open .chat-sidebar { display: none; }
.chat-back-btn { display: inline-flex; }
/* Панель «Информация» на мобильных — выезжает ПОВЕРХ чата справа */
.chat-members {
position: absolute; top: 0; right: 0; bottom: 0; z-index: 20;
flex: 0 0 auto; width: min(320px, 86vw);
box-shadow: -10px 0 28px var(--overlay-45);
}
.chat-shell.chat-info-open .chat-members { display: flex; }
.chat-msg-bubble { max-width: 82%; }
.chat-conv-head { padding: 0 12px; gap: 8px; }
.chat-compose { padding: 10px 12px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
/* 16px предотвращает принудительный зум при фокусе на iOS */
.chat-textarea, .chat-search input { font-size: 16px; }
body.chat-mode, body.chat-mode .global-content { height: var(--app-vh, 100dvh); }
}
/* Запас под фиксированный нижний нав-бар, чтобы контент не «уезжал» под него
(в т.ч. в режиме чата — нав теперь единый для всего SPA) */
@media (max-width: 768px) {
.global-content { padding-bottom: var(--nav-height-mobile); }
}
/* Клавиатура открыта: экран стал низким (<=500px по высоте) — прячем нижнее
меню навигации и снимаем отступ снизу, чтобы поле ввода не перекрывалось. */
@media (max-width: 768px) and (max-height: 500px) {
.global-nav,
.bottom-nav { display: none !important; }
.global-content { padding-bottom: 0; }
/* В режиме чата лента и ввод занимают весь освободившийся экран */
body.chat-mode, body.chat-mode .global-content { height: var(--app-vh, 100dvh); }
}
/* Телефоны: показываем ЛИБО список чатов, ЛИБО диалог, и всегда есть кнопка «Назад». */
@media (max-width: 768px) {
/* По умолчанию — только список чатов на всю ширину */
.chat-sidebar { flex: 1 1 100%; width: 100%; border-right: 0; }
.chat-main { display: none; }
.chat-main.chat-open { display: flex; }
/* Когда открыт диалог — прячем список чатов */
.chat-shell.chat-mobile-open .chat-sidebar { display: none; }
/* Кнопка «Назад» в шапке диалога обязательно видима */
.chat-back-btn { display: flex !important; align-items: center; justify-content: center; }
/* Поле ввода строго 16px, чтобы телефон не зумил страницу */
.chat-textarea, .chat-search input { font-size: 16px; }
}
/* ============================================================
МОБИЛЬНЫЙ НИЖНИЙ НАВ-БАР (CROWDWIZ)
На экранах <=768px левосторонний сайдбар превращается в
горизонтальную панель, зафиксированную у нижнего края.
============================================================ */
@media (max-width: 768px) {
.global-layout { flex-direction: column; }
.global-nav {
order: 2;
flex: 0 0 var(--nav-height-mobile);
width: 100%;
height: var(--nav-height-mobile);
flex-direction: row;
align-items: center;
gap: 2px;
padding: 6px 8px;
border-right: none;
border-top: 1px solid var(--border);
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 1100;
overflow-x: auto;
overflow-y: hidden;
}
/* Логотип в нижней панели не нужен */
.global-logo { display: none; }
.global-links {
flex-direction: row;
align-items: center;
gap: 2px;
flex: 1 1 auto;
overflow: visible;
}
.nav-item {
flex: 0 0 auto;
padding: 6px 10px;
min-width: 58px;
font-size: 9px;
}
.nav-item i { font-size: 17px; }
.nav-item.active::after {
left: 20%; right: 20%; top: auto; bottom: 2px;
width: auto; height: 2px; border-radius: 3px;
}
/* Пользовательские действия — компактной группой справа */
.global-user {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.auth-buttons, .nav-user { flex-direction: row; gap: 6px; }
.auth-buttons .btn, .nav-user .btn { padding: 8px 12px; font-size: 12px; }
.nav-user-name { max-width: 90px; font-size: 11px; }
.menu-toggle { display: none; }
}
/* ============================================================
ВЕРХНЯЯ ПОЛОСА: ник · баланс · сообщения (melkie)
Узкая полоска сверху контента, видна и на десктопе, и на мобильных.
Гость — «Вход/Регистрация»; авторизованный — ник (→кабинет),
баланс монет и иконка сообщений (→чат).
============================================================ */
.top-bar {
position: sticky;
top: 0;
z-index: 900;
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
min-height: 46px;
padding: 6px 16px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border);
}
.top-bar-user {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--text-main);
font-weight: 600;
font-size: 14px;
padding: 4px 6px;
border-radius: 10px;
transition: var(--transition);
min-width: 0;
}
.top-bar-user:hover { background: var(--card-bg-hover); }
.top-bar-user i { color: var(--gold); }
.top-bar-name {
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top-bar-coins {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 700;
font-family: 'JetBrains Mono', 'Consolas', monospace;
color: var(--text-muted);
}
.top-bar-coins i { color: var(--gold); font-size: 13px; }
.top-bar-chat {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
width: 38px;
height: 38px;
border-radius: 10px;
color: var(--text-muted);
font-size: 18px;
transition: var(--transition);
}
.top-bar-chat:hover { background: var(--card-bg-hover); color: var(--text-main); }
/* Бейдж непрочитанных в верхней полоске — в правом верхнем углу иконки */
.top-bar-chat .nav-badge {
position: absolute;
top: -2px;
right: -2px;
margin-left: 0;
}
.top-bar-guest {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.top-bar-guest .btn { padding: 8px 14px; font-size: 13px; }
/* В режиме мессенджера полоса не нужна — чат занимает весь экран */
body.chat-mode .top-bar { display: none; }
/* ============================================================
БИРЖА: отдельные вкладки токенов (GOLD / SILVER)
============================================================ */
.tv-tabs {
display: flex;
gap: 10px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.tv-tabs .tv-market-row {
display: flex;
align-items: center;
gap: 14px;
width: auto;
padding: 10px 18px;
border-radius: var(--border-radius);
background: var(--card-bg);
border: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.tv-tabs .tv-market-row:hover { background: var(--card-bg-hover); }
.tv-tabs .tv-market-row.is-active {
background: var(--card-bg-hover);
border-color: var(--gold);
border-left-color: var(--gold);
}
/* ============================================================
ЛИЧНЫЙ КАБИНЕТ: активы (GOLD/SILVER) — количество и стоимость
============================================================ */
.assets-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 6px;
}
.asset-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: var(--light-color);
border-radius: var(--border-radius);
}
.asset-sym { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.asset-qty { color: var(--text-muted); font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 13px; }
.asset-val { font-weight: 600; font-family: 'JetBrains Mono', 'Consolas', monospace; }
.hint-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
@media (max-width: 768px) {
.top-bar { padding: 6px 12px; gap: 8px; }
.top-bar-name { max-width: 120px; font-size: 13px; }
.top-bar-coins { font-size: 12px; }
}
/* Единые поверхности карточек во всех разделах. */
.action-card, .stat-box, .token-card, .feature-card, .testimonial-card,
.premium-section, .lottery-card, .game-card {
background: var(--panel);
border: 1px solid var(--border);
}
.tv-book-row span, .tv-market-price { color: var(--text); }
.tv-book-row .tv-book-price { color: var(--text); }
.notification-success, .notification-info { color: var(--on-accent); }
.notification-error { color: var(--on-danger); }
/* ============================================================
UMBA Workspace — shared layout, typography and component system
============================================================ */
:root {
--sidebar-width: 200px;
--nav-height-mobile: calc(66px + env(safe-area-inset-bottom));
--border-radius: 12px;
--border-radius-lg: 16px;
--gradient-primary: linear-gradient(var(--lime), var(--lime));
--gradient-success: var(--gradient-primary);
--box-shadow: none;
--box-shadow-sm: none;
}
body,button,input,select,textarea,.chat-shell { font-family: 'Manrope', sans-serif; }
.container { max-width: 1176px; padding-inline: 48px; }
.global-nav { flex-basis: var(--sidebar-width); padding: 32px 17px 22px; gap: 0; background: var(--panel); }
.global-logo { display: block; margin: 0 14px 35px; text-align: left; }
.workspace-wordmark { display: inline-flex; align-items: baseline; font-size: 36px; font-weight: 800; letter-spacing: -2.7px; line-height: 1; color: #fff; }
.workspace-wordmark>span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-left: 5px; }
.global-links { gap: 5px; overflow-y: auto; scrollbar-width: none; }
.nav-section { display: grid; gap: 2px; }
.nav-section-label {
margin: 14px 14px 5px;
color: var(--muted);
font-size: 9px;
font-weight: 700;
letter-spacing: .1em;
line-height: 1.2;
text-transform: uppercase;
}
.nav-section:first-child .nav-section-label { margin-top: 0; }
.nav-section-label-secondary { margin-top: 14px; }
.global-links .nav-item { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 13px; padding: 12px 14px; min-height: 44px; border-radius: 8px; font-size: 12px; font-weight: 550; }
.global-links .nav-item i { width: 19px; font-size: 16px; }
.nav-item.active { background: var(--accent-10); color: var(--lime); }
.nav-item.active::after { display: none; }
.nav-drawer-close,.workspace-bottom-nav,.workspace-nav-backdrop { display: none; }
.top-bar { min-height: 80px; padding: 14px max(48px, calc((100% - 1176px) / 2 + 48px)); gap: 22px; }
.workspace-breadcrumb { display: flex; align-items: center; gap: 16px; margin-right: auto; font-size: 11px; }
.workspace-breadcrumb>span:first-child { color: var(--muted); }
.workspace-breadcrumb>b { color: var(--muted); opacity: .6; font-weight: 400; }
.top-bar-user { font-size: 12px; font-weight: 550; gap: 9px; }
.top-bar-user>i { font-size: 18px; color: var(--muted); }
.top-bar-coins { font-size: 11px; margin-left: 5px; }
.top-bar-chat { margin-left: 0; font-size: 17px; width: 32px; }
.btn { border-radius: 7px; font-size: 13px; font-weight: 650; padding: 12px 19px; min-height: 43px; box-shadow: none; }
.btn:hover,.btn-primary:hover,.btn-success:hover,.btn-premium:hover { box-shadow: none; transform: translateY(-1px); }
.btn-primary,.btn-success,.btn-premium { background: var(--lime); color: var(--on-accent); }
.btn-primary:hover,.btn-success:hover,.btn-premium:hover { background: var(--gold-hover); }
.btn-secondary,.btn-outline { border: 1px solid var(--border); background: transparent; }
.btn-danger { border-width: 1px; }
.btn-sm { padding: 8px 13px; min-height: 34px; font-size: 11px; }
.btn-large { padding: 14px 22px; font-size: 14px; }
.page-header { background: transparent; text-align: left; padding: 35px 0 28px; border-bottom: 0; }
.page-header h1 { font-size: 34px; font-weight: 550; letter-spacing: -1.6px; line-height: 1.2; }
.page-header p { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 660px; margin: 11px 0 0; }
.page-body { padding-top: 0; padding-bottom: 40px; }
.section-head { text-align: left; margin: 32px 0 23px; }
.section-title { font-size: 25px; letter-spacing: -.9px; font-weight: 600; }
.app-page { animation: none; }
.action-card,.feature-card,.philosophy-card,.testimonial-card,.token-card,.game-panel,.premium-card,.lottery-card,.guide-step,.economy-step,.premium-section {
border: 1px solid var(--border); border-radius: 12px; background: var(--panel); box-shadow: none;
}
.feature-card:hover,.philosophy-card:hover,.testimonial-card:hover,.action-card:hover { transform: none; box-shadow: none; border-color: var(--border); }
.action-card,.feature-card,.philosophy-card,.testimonial-card,.game-panel { padding: 25px; }
.card-icon,.feature-icon { background: var(--accent-10); color: var(--lime); border-radius: 9px; width: 39px; height: 39px; font-size: 19px; }
.feature-icon { margin-bottom: 22px; }
.feature-card h3,.card-head h3 { font-size: 18px; font-weight: 650; letter-spacing: -.4px; }
.feature-card p,.card-desc,.philosophy-card p,.testimonial-text { font-size: 13px; line-height: 1.85; }
.philosophy-card>i { font-size: 25px; margin-bottom: 18px; }
.features-grid { gap: 17px; }
.philosophy-grid,.economy-model,.testimonials-grid { gap: 17px; }
.tech-stack { gap: 12px; }
.tech-item { border: 1px solid var(--border); padding: 14px 20px; border-radius: 9px; font-size: 13px; }
.tech-item i { font-size: 18px; }
.about-section { margin-bottom: 32px; }
.about-section>h2 { font-size: 20px; font-weight: 600; margin-bottom: 20px; letter-spacing: -.6px; }
.disclaimer-box,.warning-box { border-left-width: 2px; padding: 17px 20px; border-radius: 8px; font-size: 12px; }
.user-panel { padding-top: 32px; padding-bottom: 40px; }
.profile-header { padding: 26px 28px; margin-bottom: 24px; border-radius: 13px; box-shadow: none; }
.user-details h2 { font-size: 26px; font-weight: 650; letter-spacing: -.9px; }
.user-avatar { width: 58px; height: 58px; font-size: 29px; flex-shrink: 0; background: var(--card-bg-hover); }
.stat-pill { background: var(--card-bg-hover); font-size: 12px; padding: 5px 11px; }
.premium-until { font-size: 11px; padding: 5px 11px; }
.dashboard-grid { gap: 20px; grid-template-columns: repeat(auto-fit,minmax(min(100%,310px),1fr)); align-items: start; }
.form-input,.amount-input input { border-radius: 8px; padding: 12px 14px; border: 1px solid var(--border); background: var(--bg); font-size: 14px; }
.form-input:focus { box-shadow: 0 0 0 3px var(--accent-10); }
.form-label { font-size: 12px; font-weight: 550; }
.modal { padding: 20px; background: var(--overlay-60); backdrop-filter: blur(7px); }
.modal-content { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 60px var(--overlay-30); max-height: calc(100dvh - 40px); overflow-y: auto; }
.modal-content h2 { font-size: 23px; font-weight: 600; letter-spacing: -.7px; }
.tabs { gap: 8px; margin-bottom: 22px; }
.tab { border-radius: 7px; border: 1px solid var(--border); padding: 10px 17px; font-size: 12px; font-weight: 600; box-shadow: none; }
.tab.active { border-color: var(--lime); }
.step-tracker { gap: 12px; }
.guide-step { padding: 26px; }
.guide-content h2 { font-size: 21px; font-weight: 600; }
.guide-content p { font-size: 13px; line-height: 1.85; }
.guide-num { border-radius: 9px; width: 42px; height: 42px; font-size: 20px; }
.economy-step .step-num { width: 33px; height: 33px; font-size: 13px; }
.tv-layout { gap: 16px; }
.tv-tabs { gap: 8px; }
.tv-tabs .tv-market-row { padding: 10px 15px; border-radius: 8px; }
.tv-panel,.tv-main,.tv-wallet { border-radius: 10px; box-shadow: none; }
.tv-main { min-width: 0; }
.tv-chart-top { padding: 14px 16px; }
.tv-chart-sym { font-size: 17px; }
.tv-field input { min-height: 39px; border-radius: 6px; background: var(--bg); font-size: 13px; }
.tv-btn { border-radius: 7px; font-size: 13px; }
.tv-book-row { padding-top: 5px; padding-bottom: 5px; }
.game-panels { gap: 20px; }
.game-panel h3 { font-size: 19px; font-weight: 600; }
.game-panel-heading>i { font-size: 20px; }
.game-balance { font-size: 14px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 17px; }
.choice-btn { border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.coinflip-game-card { border-radius: 8px; padding: 14px; gap: 12px; }
.coinflip-game-card strong { font-size: 13px; }
.coinflip-game-card span { font-size: 12px; }
.registry-table,.mentors-table { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); box-shadow: none; }
.registry-table th,.mentors-table th { background: var(--panel); font-size: 11px; font-weight: 550; color: var(--muted); }
.registry-table td,.mentors-table td { font-size: 13px; }
.activity-item { padding: 15px 0; }
.activity-icon { border-radius: 9px; width: 36px; height: 36px; font-size: 16px; }
.profile-card { border: 1px solid var(--border); border-radius: 12px; box-shadow: none; }
.profile-badge { border-radius: 6px; }
.footer { margin-top: 12px; padding: 22px 0; background: transparent; }
.footer-inner { gap: 20px; }
.footer .logo { font-size: 16px; }
.footer .brand-emblem { width: 22px; height: 22px; box-shadow: none; }
.footer-copy { font-size: 10px; }
.chat-shell { font-family: 'Manrope',sans-serif; }
.chat-sidebar { flex-basis: 320px; }
.chat-list-head,.chat-conv-head,.chat-members-head { height: 68px; }
.chat-list-title { font-size: 17px; font-weight: 600; }
.chat-avatar { width: 44px; height: 44px; font-size: 18px; background: var(--card-bg-hover); }
.chat-avatar-group { background: var(--accent-10); color: var(--lime); }
.chat-item { gap: 12px; padding: 14px 18px; border-radius: 0; }
.chat-item-name { font-size: 13px; font-weight: 600; }
.chat-item-preview { font-size: 12px; }
.chat-item-time { font-size: 10px; }
.chat-search { border-radius: 8px; }
.chat-search input { font-size: 13px; }
.chat-folder { font-size: 12px; }
.chat-msg-bubble { border-radius: 12px; font-size: 14px; line-height: 1.65; padding: 8px 13px; }
.chat-msg-meta,.chat-msg-time { font-size: 10px; }
.chat-members { flex-basis: 280px; }
.chat-conv-title { font-size: 14px; font-weight: 600; }
.chat-conv-sub { font-size: 11px; }
.chat-compose { padding: 15px 20px; }
.chat-action-btn { font-size: 17px; }
/* Minimal functional home. */
.workspace-hero { min-height: 358px; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 12px; border-bottom: 1px solid var(--border); padding-block: 35px; }
.workspace-eyebrow { font-size: 8px; letter-spacing: .16em; color: var(--muted); font-weight: 600; display: block; margin-bottom: 18px; }
.workspace-hero h1 { font-size: clamp(36px,3.5vw,52px); letter-spacing: -2.5px; line-height: 1.15; font-weight: 550; margin: 0; }
.workspace-hero em { font-style: normal; color: var(--lime); }
.workspace-hero-copy>p { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 17px 0 24px; }
.workspace-hero .btn { display: inline-flex; gap: 35px; min-height: 45px; font-size: 11px; }
.workspace-hero .btn>span { font-size: 19px; line-height: 1; font-weight: 400; }
.workspace-hero-art { position: relative; align-self: stretch; overflow: hidden; min-width: 0; }
.workspace-hero-art>img { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 350px; max-width: 112%; height: auto; mix-blend-mode: lighten; mask-image: radial-gradient(ellipse 64% 62% at 50% 50%,var(--on-accent) 50%,transparent 91%); filter: saturate(.8); }
.workspace-home .tools { padding-top: 31px; }
.workspace-home .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.workspace-home h2 { margin: 0; font-size: 17px; letter-spacing: -.45px; font-weight: 650; }
.workspace-home .section-heading>span { font-size: 10px; color: var(--muted); }
.tool-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.tool-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 21px 19px 18px; display: flex; flex-direction: column; gap: 25px; min-height: 218px; transition: background .2s,border-color .2s,transform .2s; }
.tool-card:hover { background: var(--card-bg-hover); border-color: var(--muted); transform: translateY(-2px); }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.tool-icon { height: 37px; width: 37px; border-radius: 9px; background: var(--accent-10); color: var(--lime); display: grid; place-items: center; font-size: 17px; }
.card-arrow { font-size: 17px; color: var(--muted); }
.tool-card h3 { margin: 0 0 9px; font-size: 17px; letter-spacing: -.4px; font-weight: 650; }
.tool-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.8; min-height: 36px; }
.card-link { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; font-size: 10px; color: var(--text); }
.card-link>i { font-size: 11px; color: var(--muted); }
.workspace-home .start { padding-top: 34px; padding-bottom: 31px; }
.workspace-home .start .section-heading { margin-bottom: 23px; }
.workspace-home .start .section-heading>a { font-size: 10px; color: var(--muted); display: flex; gap: 12px; align-items: center; }
.workspace-home .start .section-heading>a>span { color: var(--lime); font-size: 17px; }
.workspace-home .steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; }
.workspace-home .steps>div { display: flex; align-items: flex-start; gap: 14px; }
.workspace-home .steps>div>span { font-size: 10px; color: var(--lime); padding-top: 3px; }
.workspace-home .steps p { font-size: 11px; color: var(--muted); line-height: 1.8; margin: 0; }
@media(max-width:1200px) {
:root { --sidebar-width: 180px; }
.global-nav { padding-inline: 12px; }
.container { padding-inline: 32px; }
.top-bar { padding-inline: max(32px, calc((100% - 1176px) / 2 + 32px)); }
.tool-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.tool-card { min-height: 188px; gap: 20px; }
.workspace-hero { min-height: 340px; }
.workspace-hero h1 { font-size: 43px; }
.workspace-hero-art>img { max-width: 120%; }
.features-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:1000px) and (min-width:769px) {
:root { --sidebar-width: 83px; }
.global-nav { padding: 26px 9px 20px; }
.global-logo { margin: 0 2px 28px; }
.workspace-wordmark { font-size: 23px; letter-spacing: -1.8px; }
.workspace-wordmark>span { width: 5px; height: 5px; margin-left: 2px; }
.global-links .nav-item { flex-direction: column; gap: 7px; padding: 10px 0; font-size: 8px; }
.nav-section-label { display: none; }
.nav-section { gap: 4px; }
.container { padding-inline: 28px; }
.top-bar { padding-inline: max(28px, calc((100% - 1176px) / 2 + 28px)); min-height: 71px; }
.workspace-hero h1 { font-size: 35px; letter-spacing: -1.7px; }
.workspace-hero { min-height: 320px; }
.workspace-hero-art>img { max-width: 130%; }
.philosophy-grid,.economy-model { grid-template-columns: 1fr; }
}
@media(max-width:768px) {
.global-layout { flex-direction: row; }
.global-content { padding-bottom: var(--nav-height-mobile); }
.global-nav { position: fixed; inset: 0 auto 0 0; width: 228px; height: var(--app-vh,100dvh); transform: translateX(-100%); display: flex; flex-direction: column; padding: 29px 17px 20px; z-index: 1300; overflow-y: auto; transition: transform .2s; border-right: 1px solid var(--border); }
body.nav-open .global-nav { transform: translateX(0); }
.global-logo { display: block; margin: 0 14px 30px; }
.workspace-wordmark { font-size: 34px; }
.global-links { flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 0; gap: 4px; }
.global-links .nav-item { flex-direction: row; gap: 13px; font-size: 12px; min-width: 0; width: 100%; padding: 11px 14px; min-height: 43px; }
.global-links .nav-item span { font-size: inherit; }
.nav-section-label { margin-top: 16px; }
.nav-section:first-child .nav-section-label { margin-top: 0; }
.nav-drawer-close { display: grid; place-items: center; position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; background: transparent; color: var(--muted); }
.workspace-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1200; background: var(--overlay-60); backdrop-filter: blur(5px); }
.workspace-bottom-nav { display: flex; position: fixed; inset: auto 0 0; z-index: 1100; height: var(--nav-height-mobile); padding: 7px 12px calc(7px + env(safe-area-inset-bottom)); gap: 5px; background: var(--panel); border-top: 1px solid var(--border); }
.workspace-bottom-nav>.nav-item,.workspace-bottom-nav>button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; font: 500 9px 'Manrope',sans-serif; color: var(--muted); padding: 5px 0; min-height: 49px; min-width: 0; background: transparent; border: 0; }
.workspace-bottom-nav .nav-item i,.workspace-bottom-nav>button i { font-size: 17px; }
.workspace-bottom-nav .nav-item span { font-size: 9px; }
.workspace-bottom-nav .active { color: var(--lime); background: var(--accent-10); }
.top-bar { min-height: 64px; padding: 10px max(22px, calc((100% - 1176px) / 2 + 22px)); gap: 13px; }
.workspace-breadcrumb { gap: 10px; font-size: 10px; }
.workspace-breadcrumb>span:first-child { color: var(--text); font-weight: 700; }
.top-bar-user { gap: 7px; padding: 0; }
.top-bar-name { max-width: 90px; font-size: 11px; }
.top-bar-coins { font-size: 10px; }
.top-bar-chat { width: 27px; font-size: 16px; }
.top-bar-guest { gap: 7px; }
.top-bar-guest .btn { font-size: 10px; padding: 9px 11px; min-height: 35px; }
.container { padding-inline: 22px; }
.page-header { padding: 28px 0 23px; }
.page-header h1 { font-size: 29px; letter-spacing: -1.2px; }
.page-header p { font-size: 12px; margin-top: 10px; }
.page-body { padding-bottom: 28px; }
.section-title { font-size: 22px; }
.section-head { margin-block: 26px 19px; }
.user-panel { padding-top: 24px; }
.profile-header { padding: 23px; gap: 19px; }
.profile-main { gap: 14px; min-width: 0; }
.user-avatar { width: 48px; height: 48px; font-size: 25px; }
.user-details h2 { font-size: 23px; }
.stat-pill { font-size: 11px; }
.premium-until { font-size: 10px; }
.dashboard-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
.action-card,.feature-card,.philosophy-card,.testimonial-card,.game-panel { padding: 22px; }
.feature-card p,.card-desc { font-size: 13px; }
.philosophy-grid,.economy-model,.testimonials-grid { grid-template-columns: minmax(0,1fr); }
.economy-step { padding: 21px; }
.game-panels { grid-template-columns: minmax(0,1fr); gap: 16px; }
.form-input,.amount-input input,.tv-field input { font-size: 16px; }
.modal { padding: 16px; }
.modal-content { padding: 26px 22px; max-height: calc(var(--app-vh,100dvh) - 32px); }
.tabs { gap: 7px; }
.tab { font-size: 11px; padding: 9px 13px; }
.guide-step { padding: 22px; gap: 15px; }
.guide-content h2 { font-size: 19px; }
.guide-num { width: 33px; height: 33px; font-size: 16px; border-radius: 8px; }
.footer { margin-top: 0; padding-block: 18px; }
.footer-inner { align-items: flex-start; gap: 12px; }
.footer-copy { font-size: 9px; line-height: 1.8; }
.workspace-hero { display: block; min-height: 0; padding-block: 34px 30px; }
.workspace-eyebrow { font-size: 7px; margin-bottom: 17px; }
.workspace-hero h1 { font-size: 35px; letter-spacing: -1.8px; }
.workspace-hero-copy>p { font-size: 11px; margin: 15px 0 22px; }
.workspace-hero-art { display: none; }
.workspace-hero .btn { min-height: 45px; gap: 30px; }
.workspace-home .tools { padding-top: 25px; }
.workspace-home h2 { font-size: 15px; letter-spacing: -.3px; }
.workspace-home .section-heading { margin-bottom: 17px; gap: 12px; }
.workspace-home .section-heading>span { font-size: 8px; }
.tool-grid { gap: 11px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.tool-card { padding: 17px 14px 15px; min-height: 201px; border-radius: 10px; gap: 18px; }
.tool-icon { width: 33px; height: 33px; border-radius: 8px; font-size: 16px; }
.card-arrow { font-size: 16px; }
.tool-card h3 { font-size: 17px; margin-bottom: 8px; }
.tool-card p { font-size: 10px; line-height: 1.7; min-height: 34px; }
.card-link { font-size: 8px; gap: 4px; line-height: 1.6; }
.workspace-home .start { padding-top: 27px; padding-bottom: 27px; }
.workspace-home .start .section-heading { margin-bottom: 21px; }
.workspace-home .start .section-heading>a { font-size: 9px; gap: 6px; }
.workspace-home .steps { grid-template-columns: 1fr; gap: 16px; }
.workspace-home .steps>div { gap: 16px; align-items: center; }
.workspace-home .steps p { font-size: 11px; }
.workspace-home .steps br { display: none; }
.workspace-home .steps>div>span { font-size: 10px; padding: 0; }
.chat-sidebar { flex: 1 1 100%; }
.chat-list-head,.chat-conv-head { height: 61px; }
.chat-avatar { width: 43px; height: 43px; }
.chat-item { padding: 13px 18px; }
.chat-search input,.chat-textarea { font-size: 16px; }
/* Нижний отступ обязательно пересобираем вместе с safe-area: сокращённая
запись padding затёрла бы его, и поле ввода прилипало к полосе свайпа. */
.chat-compose { padding: 13px 15px max(20px, calc(13px + env(safe-area-inset-bottom))); }
/* Открытый диалог на телефоне: нижний таб-бар здесь лишний — он
перекрывает последние сообщения и поле ввода. В списке чатов бар остаётся.
!important обязателен: ниже есть .workspace-bottom-nav{display:flex!important}. */
body.chat-mode:has(.chat-shell.chat-mobile-open) nav.workspace-bottom-nav { display: none !important; }
body.chat-mode:has(.chat-shell.chat-mobile-open) .global-content { padding-bottom: 0 !important; }
/* Длинные вложения не должны растягивать пузырь шире экрана. */
.chat-attach-media { max-width: 100%; }
.chat-attach > .chat-dl-btn { width: 40px; height: 40px; }
}
@media(max-width:420px) {
.workspace-breadcrumb>span:first-child,.workspace-breadcrumb>b { display: none; }
.top-bar { gap: 9px; }
.top-bar-user { font-size: 11px; }
.top-bar-coins { margin-left: 0; }
.features-grid { grid-template-columns: minmax(0,1fr); }
.coinflip-game-card { flex-wrap: wrap; }
.guide-step { flex-direction: column; }
.workspace-hero h1 { font-size: 32px; }
}
@media(max-width:768px) and (max-height:500px) {
.workspace-bottom-nav { display: none; }
.global-content { padding-bottom: 0; }
}
/* ===== Аудит главной 2026-11-06: тап-таргеты, гостевые состояния, доступность ===== */
/* Иконки-«внешняя ссылка» были 20x27 px, стрелка рынка — 11x18 px.
Доводим до 44x44 зоны касания, не увеличивая сам значок. */
.home-asset-action { display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px -10px auto; padding: 0; }
.home-market-watch .home-side-heading>a { display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: -12px -12px -12px 0; }
.home-section-heading>a, .home-side-heading>a { padding-block: 13px; }
.home-quick-grid>a, .home-quick-grid>button { min-height: 64px; }
.home-market-row { min-height: 56px; }
/* Скрытая подпись для экранных читалок (на главной не было ни одного h1). */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Гостевые подписи вместо прочерков. */
.empty-note a { display: inline-block; padding: 11px 2px; color: var(--lime); font-weight: 650; text-decoration: none; }
.empty-note a:hover { text-decoration: underline; }
/* Пустые секции меню (все пункты скрыты у гостя) не должны оставлять заголовок без ссылок. */
.nav-section.is-empty { display: none; }
/* Кегль на мобильном: 9px нечитаемо, поднимаем до 11px без потери плотности. */
@media(max-width:768px) {
.workspace-bottom-nav>.nav-item, .workspace-bottom-nav>button { font-size: 10px; }
.workspace-bottom-nav .nav-item span { font-size: 10px; }
.footer-copy { font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) {
*,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* Home links use the same neutral typography as the approved preview. */
.workspace-home a { color: inherit; text-decoration: none; }
.workspace-home .btn-primary { color: var(--on-accent); }
.tv-terminal { gap: 16px; }
.tv-col { border-radius: 10px; box-shadow: none; }
.tv-head { gap: 12px; padding: 15px 16px; }
.tv-head-pair { font-size: 18px; font-weight: 650; }
.coinflip-layout { gap: 20px; }
.game-panel-heading h2 { font-size: 20px; font-weight: 600; letter-spacing: -.4px; }
@media(max-width:768px) {
.coinflip-layout { grid-template-columns: minmax(0,1fr); gap: 16px; }
.tv-head-pair { font-size: 16px; }
}
@media(max-width:768px) { body.nav-open .global-layout { z-index: 1250; } }
/* Readable rankings and activity rows, using existing API values. */
#mentorsList { gap: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.mentor-list-heading { display: grid; grid-template-columns: minmax(0,1fr) 100px 140px; gap: 25px; padding: 17px 54px 17px 25px; font-size: 10px; color: var(--muted); background: var(--panel); }
.mentor-list-heading>span:not(:first-child) { text-align: right; }
.mentor-row { display: grid; grid-template-columns: 24px 38px minmax(0,1fr) 100px 140px 13px; align-items: center; gap: 16px; min-height: 86px; padding: 18px 24px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.mentor-row:hover { background: var(--panel); }
.mentor-rank { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mentor-avatar { width: 36px; height: 36px; background: var(--card-bg-hover); color: var(--lime); display: grid; place-items: center; border-radius: 50%; font-size: 13px; }
.mentor-name { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.mentor-subs,.mentor-coins { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.mentor-subs b { font-weight: 550; }
.mentor-row small { display: none; }
.mentor-row>i { color: var(--muted); font-size: 10px; }
.activity-row { border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; background: var(--panel); gap: 15px; }
.act-icon { width: 30px; font-size: 16px; background: transparent; }
.act-label { font-size: 13px; }
.act-meta { font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
.act-amount { font-size: 14px; font-weight: 600; }
.registry-search .form-input { background: var(--panel); }
@media(max-width:768px) {
.mentor-list-heading { display: none; }
.mentor-row { grid-template-columns: 20px 30px minmax(0,1fr) auto; gap: 10px; padding: 17px 14px; }
.mentor-row:first-child { border-top: 0; }
.mentor-avatar { height: 30px; width: 30px; font-size: 11px; }
.mentor-name { font-size: 12px; }
.mentor-subs { grid-column: 3; font-size: 11px; text-align: left; }
.mentor-coins { grid-column: 4; grid-row: 1 / span 2; font-size: 12px; }
.mentor-row small { display: block; font-size: 9px; color: var(--muted); margin-top: 3px; }
.mentor-subs small { display: inline; margin-left: 4px; }
.mentor-row>i { display: none; }
.activity-row { padding: 15px; gap: 12px; flex-wrap: wrap; }
.act-body { flex: 1; min-width: 0; }
.act-amount { margin-left: 42px; font-size: 13px; }
}
.footer-wordmark { font-size: 24px; letter-spacing: -1.8px; text-decoration: none; }
.footer-wordmark>span { width: 5px; height: 5px; margin-left: 3px; }
/* Executed trades for the currently selected market. */
.tv-recent-trades { margin-top: 24px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); }
.tv-trades-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 19px 20px; }
.tv-trades-heading h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
#tvTradesToken { color: var(--lime); margin-left: 5px; }
#tvTradesStatus { color: var(--muted); font-size: 11px; }
.tv-trades-scroll { max-height: 420px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.tv-trades-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.tv-trades-table th { position: sticky; top: 0; background: var(--panel); z-index: 1; color: var(--muted); font-size: 10px; font-weight: 500; }
.tv-trades-table th,.tv-trades-table td { text-align: right; padding: 13px 20px; border-top: 1px solid var(--border); white-space: nowrap; }
.tv-trades-table th:first-child,.tv-trades-table td:first-child { text-align: left; }
.tv-trades-table tbody tr:hover { background: var(--card-bg-hover); }
.tv-trades-table .tv-trades-empty { text-align: center; color: var(--muted); padding: 30px 20px; }
@media(max-width:768px) {
.tv-recent-trades { margin-top: 18px; }
.tv-trades-heading { padding: 17px 15px; }
.tv-trades-heading h2 { font-size: 14px; }
.tv-trades-table { font-size: 11px; }
.tv-trades-table th,.tv-trades-table td { padding: 11px 13px; }
}
/* Bid/ask backgrounds remain distinct without a frame on personal orders. */
.tv-book-bids { background:rgba(34,197,94,.10); }
.tv-book-asks { background:rgba(239,68,68,.10); }
.tv-book-row.bid { --book-volume:rgba(34,197,94,.22); }
.tv-book-row.ask { --book-volume:rgba(239,68,68,.22); }
.tv-whole-note { margin:0; padding:12px 16px; color:var(--muted); font-size:12px; line-height:1.5; }
/* Market: full-width chart, then unified wallet/trade and order book. */
.tv-terminal { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
.tv-col-chart { grid-column:1 / -1; }
.tv-col-chart .tv-chart { height:360px; min-height:0; flex:none; }
.tv-wallet-trade .tv-wallet { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.tv-wallet-trade .tv-wallet-group { min-width:0; }
.tv-wallet-trade .tv-wallet-row { flex-wrap:wrap; gap:6px; }
.tv-wallet-trade .tv-wallet-row strong { overflow-wrap:anywhere; }
.tv-wallet-trade .tv-trade { border-top:1px solid var(--border); }
.tv-wallet-trade .tv-trade-grid { display:block; background:transparent; }
.tv-wallet-trade .tv-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:18px; align-content:start; }
.tv-wallet-trade .tv-side[hidden] { display:none; }
.tv-wallet-trade .tv-side-title,.tv-wallet-trade .tv-total,.tv-wallet-trade .tv-btn { grid-column:1 / -1; }
.tv-wallet-trade .tv-btn { width:100%; min-height:46px; margin:0; }
.tv-book-row.is-mine { outline:none; box-shadow:none; }
.tv-book-row.is-mine span:first-child,.tv-book-asks .tv-book-row span:first-child,.tv-book-bids .tv-book-row span:first-child { color:var(--text); }
.tv-book-row.bid span:last-child,.tv-my-order.buy .tv-my-order-price,#tvBuyAmount { color:#4ade80; }
.tv-book-row.ask span:last-child,.tv-my-order.sell .tv-my-order-price,#tvSellAmount { color:#f87171; }
.tv-my-order-main,.tv-my-order-sub { flex-wrap:wrap; }
@media(max-width:1199px) { .tv-terminal { grid-template-columns:minmax(0,1fr); } }
@media(max-width:480px) { .tv-col-chart .tv-chart { height:280px; } .tv-wallet-trade .tv-wallet { gap:12px; padding:14px; } .tv-wallet-trade .tv-side { gap:12px; padding:14px; } }
/* Cabinet: assets first, related actions paired, advertising at the bottom. */
#page-cabinet .dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
#page-cabinet .dashboard-grid > * { min-width:0; }
#assets-card,#page-cabinet #lotteries,#page-cabinet .ad-card { grid-column:1 / -1; }
#page-cabinet .profile-header { gap:20px; flex-wrap:wrap; }
#page-cabinet .user-details { min-width:0; }
#page-cabinet .user-details h2 { overflow-wrap:anywhere; white-space:normal; }
#page-cabinet .profile-main { min-width:0; max-width:100%; }
#page-cabinet .user-avatar { flex-shrink:0; }
#page-cabinet .cabinet-tabs { flex-wrap:wrap; }
#page-cabinet .assets-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:14px; }
#page-cabinet .asset-row { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; min-width:0; gap:12px; padding:18px; border:1px solid var(--border); background:var(--panel); border-radius:10px; }
.asset-row-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; }
.asset-kind { color:var(--muted); font-size:10px; }
#page-cabinet .asset-qty { color:var(--text); font-family:inherit; font-size:clamp(22px,2.1vw,30px); font-weight:650; line-height:1.3; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.asset-qty small { color:var(--muted); font-size:12px; font-weight:400; }
.asset-availability { color:var(--muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.asset-valuations { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding-top:12px; border-top:1px solid var(--border); }
.asset-valuations > span { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:11px; }
.asset-valuations strong { color:var(--text); font-size:15px; font-weight:600; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
#page-cabinet .ad-card { margin:0; }
#page-cabinet .ad-card .ra-launch { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; }
#page-cabinet .ad-card .ra-launch-badge,#page-cabinet .ad-card .ra-launch-note { grid-column:1 / -1; }
#page-cabinet .ad-card .ra-launch-reward { margin:0; }
#page-cabinet .switch-row,#page-cabinet .code-input { min-width:0; }
#page-cabinet .switch-row select,#page-cabinet .code-input input { min-width:0; }
@media(max-width:850px) { #page-cabinet .dashboard-grid { grid-template-columns:minmax(0,1fr); gap:16px; } }
@media(max-width:480px) { #page-cabinet .ad-card .ra-launch { grid-template-columns:minmax(0,1fr); } #page-cabinet .switch-row { flex-wrap:wrap; } #page-cabinet .switch-row > * { width:100%; } }
.tv-my-order.sell .tv-my-order-frozen { color:#f87171; }
.tv-my-order.buy .tv-my-order-frozen { color:#4ade80; }
/* Chart follows the terminal; only container backgrounds tint the order book. */
.tv-col-chart { margin-top:16px; }
.tv-book-row { background:none; }
.tv-book-row.bid,.tv-book-row.ask { --book-volume:transparent; }
.tv-col-book { display:grid; gap:16px; background:transparent; border:0; overflow:visible; }
.tv-col-book .tv-panel { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--panel); }
.market-spoiler > summary { list-style:none; cursor:default; }
.market-spoiler > summary::-webkit-details-marker { display:none; }
.market-spoiler-title { padding:14px 16px; font:600 13px Manrope,sans-serif; color:var(--text); }
[data-market-spoiler="wallet"] > summary,[data-market-spoiler="chart"] > summary { display:none; }
[data-market-spoiler="trades"] > summary { display:flex; align-items:center; flex-wrap:wrap; gap:12px; justify-content:space-between; padding:19px 20px; }
[data-market-spoiler="trades"] > summary h2 { margin:0; font-size:16px; font-weight:600; }
.market-spoiler-body { min-width:0; }
@media(max-width:767px) {
.market-spoiler > summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; min-height:52px; gap:10px; }
.market-spoiler > summary::after { content:'+'; color:var(--lime); font-size:20px; font-weight:400; flex:none; }
.market-spoiler[open] > summary::after { content:'−'; }
.market-spoiler > summary:focus-visible { outline:2px solid var(--lime); outline-offset:-3px; }
.market-spoiler[open] > summary { border-bottom:1px solid var(--border); }
.market-spoiler:not([open]) > .market-spoiler-body { display:none; }
[data-market-spoiler="trades"] > summary { padding:14px 16px; }
[data-market-spoiler="trades"] > summary h2 { font-size:13px; }
}
/* Compact terminal: personal orders under the form, depth under the book. */
.tv-terminal { align-items:stretch; }
.tv-left-stack { display:flex; flex-direction:column; gap:16px; min-width:0; }
.tv-left-stack > .tv-wallet-trade { flex:none; }
.tv-left-stack > [data-market-spoiler="orders"] { flex:1; min-height:150px; background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.tv-wallet-trade .tv-wallet { padding:12px 14px; gap:14px; }
.tv-wallet-trade .tv-wallet-row { margin-bottom:4px; }
.tv-wallet-trade .tv-wallet-sub { padding-top:2px; padding-bottom:2px; }
.tv-wallet-trade .tv-trade-tabs button { padding:12px; }
.tv-wallet-trade .tv-side { padding:12px 14px 14px; gap:10px 14px; }
.tv-wallet-trade .tv-side-title { font-size:12px; }
.tv-trade-summary { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:baseline; }
.tv-available { color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.tv-available strong { color:var(--text); font-weight:600; margin-left:6px; }
#tvBookToken { color:var(--text); font-weight:500; margin-left:5px; }
[data-desktop-spoiler] > summary { display:flex; justify-content:space-between; align-items:center; gap:10px; cursor:pointer; }
[data-desktop-spoiler] > summary::after { content:''; width:9px; height:9px; border-right:2px solid var(--text); border-bottom:2px solid var(--text); transform:rotate(45deg); margin:0 3px 4px 8px; flex:none; }
[data-desktop-spoiler][open] > summary::after { transform:rotate(225deg); margin-bottom:-4px; }
[data-desktop-spoiler] > summary:focus-visible { outline:2px solid var(--lime); outline-offset:-3px; }
@media(max-width:1199px) { .tv-left-stack > [data-market-spoiler="orders"] { flex:none; } }
@media(max-width:767px) {
.tv-left-stack > [data-market-spoiler="orders"] { min-height:0; }
[data-desktop-spoiler] > summary::after { content:''; font-size:inherit; }
}
.tv-trade-summary > .tv-total { grid-column:auto; }
@media(max-width:767px) { [data-desktop-spoiler][open] > summary::after { content:''; } }
.tv-left-stack > [data-market-spoiler="orders"]:not([open]) { flex:none; min-height:0; }
.tv-col-book { align-content:start; }
.tv-book-head,.tv-book-row { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr); }
.tv-book-head > :nth-child(2),.tv-book-row > :nth-child(2) { text-align:center; }
.tv-book-head > :last-child,.tv-book-row > :last-child { text-align:right; }
.tv-book-row > span { min-width:0; overflow-wrap:anywhere; }
.tv-book-total { color:var(--text-muted); }
.tv-available .tv-total-warn { color:var(--red); }
.tv-field input[aria-invalid="true"] { border-color:var(--red); }
.tv-field .tv-field-error { color:var(--red); font-size:11px; line-height:1.5; }
.tv-field-error[hidden] { display:none; }
.tv-depth-totals { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:6px 14px 12px; }
.tv-depth-totals > div { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:11px; }
.tv-depth-totals > div:last-child { text-align:right; }
.tv-depth-totals strong { color:#4ade80; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.tv-depth-totals > div:last-child strong { color:#f87171; }
/* Market overview and dedicated token routes. */
#page-market [hidden] { display: none !important; }
.market-breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 auto 0 0; font-size:11px; color:var(--text-muted, #a3a9b9); }
.market-breadcrumbs a { color:inherit; text-decoration:none; }
.market-breadcrumbs a:hover { color:var(--lime); text-decoration:underline; }
.market-breadcrumbs [aria-current="page"] { color:var(--lime); }
.market-token-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.market-token-card { display:flex; flex-direction:column; min-width:0; padding:28px; border:1px solid #343744; border-radius:16px; background:#1a1d27; color:#f5f5f7; text-decoration:none; transition:border-color .2s, transform .2s; }
.market-token-card:hover { border-color:var(--lime); transform:translateY(-2px); }
.market-token-card:focus-visible { outline:2px solid var(--lime); outline-offset:4px; }
.market-token-heading { display:flex; align-items:center; gap:14px; }
.market-token-heading h2 { margin:0 0 4px; font-size:24px; }
.market-token-heading div > span, .market-token-holdings dt { color:#a3a9b9; font-size:13px; }
.market-token-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:12px; color:#efd07c; background:#efd07c18; font-size:24px; }
.market-token-silver .market-token-icon { color:#d4dfec; background:#d4dfec18; }
.market-token-arrow { margin-left:auto; font-size:26px; color:#a3a9b9; }
.market-token-holdings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; border-top:1px solid #343744; padding-top:20px; margin:0 0 24px; }
.market-token-holdings dd { margin:8px 0 0; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.market-token-open { margin-top:auto; color:var(--lime); font-weight:600; }
/* Карточка токена на бирже (обзор) собрана как карточка актива на главной:
сумма, «Доступно», шкала, «В ордерах». Базовые правила — чтобы карточка
читалась и до загрузки Aurora; вид задаёт блок Aurora (ниже). */
.market-token-amount { display:block; margin-top:20px; font-size:27px; letter-spacing:-.8px; font-variant-numeric:tabular-nums; }
.market-token-sub { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.market-token-meter { height:4px; margin:14px 0 11px; border-radius:3px; background:var(--line); }
.market-token-meter b { display:block; height:100%; width:0; border-radius:inherit; background:var(--lime); }
.market-token-footer { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; }
.market-token-footer b { color:var(--text); font-variant-numeric:tabular-nums; }
.market-token-market { display:grid; gap:8px; margin:16px 0 0; }
.market-token-market > div { display:flex; justify-content:space-between; gap:16px; }
.market-token-market dt { color:var(--muted); font-size:11px; }
.market-token-market dd { display:flex; align-items:baseline; gap:8px; margin:0; font-size:13px; font-variant-numeric:tabular-nums; }
.market-token-market dd small { color:var(--muted); font-size:11px; font-weight:400; }
@media(max-width:767px) { .market-token-grid { grid-template-columns:1fr; gap:16px; } .market-token-card { padding:22px; } }
.workspace-breadcrumb[hidden] { display:none !important; }
.workspace-breadcrumb > a { color:var(--muted); text-decoration:none; }
.workspace-breadcrumb > a:hover { color:var(--lime); text-decoration:underline; }
.tv-depth-quantities { margin-top:10px; padding-top:12px; border-top:1px solid var(--border, #343744); }
/* Full-width depth below candles; the book spans the form and personal orders. */
.tv-orders-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; }
.tv-orders-heading [data-market-symbol],.tv-orders-heading .tv-orders-count { color:var(--lime); }
.tv-my-order-price .tv-my-order-unit { color:var(--text); font-family:Manrope,sans-serif; }
.tv-my-order-price { overflow-wrap:anywhere; }
.tv-my-order-filled { font-size:11px; color:var(--muted); }
/* Unified compact histories and an optional UTC-backed local time range. */
.history-toolbar { display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px 14px; padding:10px 12px; color:var(--muted); font-size:11px; }
.history-hint { padding-top:4px; flex:1 1 auto; }
.history-filter { flex:0 1 auto; min-width:0; }
.history-filter > summary { cursor:pointer; color:var(--lime); font-weight:600; padding:4px 0; }
.history-filter[open] { flex-basis:100%; }
.history-range { display:flex; align-items:flex-end; flex-wrap:wrap; gap:8px; padding-top:8px; }
.history-range label { display:flex; flex-direction:column; gap:5px; flex:1 1 170px; min-width:0; font-size:11px; }
.history-range .form-input { width:100%; min-width:0; max-width:100%; padding:7px 8px; font-size:12px; }
.history-range .btn { min-height:32px; padding:6px 10px; font-size:11px; }
.transactions-list.compact-history { gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--panel); }
.compact-history .activity-row { display:grid; grid-template-columns:24px minmax(0,1fr) auto; gap:8px; padding:9px 12px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; box-shadow:none; align-items:center; }
.compact-history .activity-row:last-child { border-bottom:0; }
.compact-history .act-icon { width:24px; height:24px; font-size:12px; }
.compact-history .act-line { gap:5px 9px; font-size:12px; }
.compact-history .act-label { font-size:12px; }
.compact-history .act-meta { font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
.compact-history .act-amount { margin:0; font-size:12px; align-self:start; padding-top:2px; }
.tv-orders.compact-history { max-height:480px; }
.tv-orders.compact-history .tv-my-order { gap:3px; padding:8px 12px; }
.tv-orders.compact-history .tv-my-order-main { font-size:11px; }
.tv-orders.compact-history .tv-my-order-sub { font-size:10px; }
.tv-trades-table.compact-history th,.tv-trades-table.compact-history td { padding:8px 12px; font-size:11px; }
[data-market-spoiler="book"] > summary { display:flex; align-items:center; justify-content:space-between; padding:19px 20px; }
[data-market-spoiler="book"] > summary h2 { margin:0; font-size:16px; font-weight:600; }
.market-token-title { color:var(--lime); margin-left:5px; }
@media(max-width:767px) {
[data-market-spoiler="book"] > summary h2 { font-size:14px; }
.history-range label { flex-basis:100%; }
.compact-history .activity-row { grid-template-columns:18px minmax(0,1fr) auto; gap:6px; padding:8px; }
.compact-history .act-icon { width:18px; height:18px; font-size:10px; }
.compact-history .act-line,.compact-history .act-label,.compact-history .act-amount { font-size:11px; }
.tv-trades-table.compact-history th,.tv-trades-table.compact-history td { padding:7px 8px; font-size:10px; }
}
.tv-book-row + .tv-book-row { border-top:1px solid rgba(255,255,255,.055); }
.tv-book-copy-status { float:right; margin-left:8px; font-size:11px; font-weight:500; color:var(--lime); }
.tv-input-copied { animation:tv-input-copied 1.8s ease-out; }
.tv-book-row-copied { animation:tv-book-row-copied 6s ease-out; }
@keyframes tv-book-row-copied {
0%, 20% { background:var(--overlay-lime-20, rgba(180,220,60,.3)); box-shadow:inset 3px 0 var(--lime); }
100% { background:transparent; box-shadow:inset 3px 0 transparent; }
}
.coinflip-game-list.compact-history { gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.compact-history .coinflip-game-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:8px 10px; border:0; border-bottom:1px solid var(--border); border-radius:0; background:transparent; }
.compact-history .coinflip-game-card:last-child { border-bottom:0; }
.compact-history .coinflip-game-card > div { min-width:0; }
.compact-history .coinflip-game-card strong { font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compact-history .coinflip-game-card span { font-size:11px; margin:0; }
.compact-history .coinflip-game-card small { font-size:10px; line-height:1.35; margin:2px 0 0; }
.compact-history .coinflip-game-card .btn { width:auto; padding:5px 8px; font-size:11px; }
@media(prefers-reduced-motion:reduce) { .tv-book-row-copied { animation-duration:.01ms; } }
@keyframes tv-input-copied { from { box-shadow:inset 0 0 0 2px var(--lime); } to { box-shadow:inset 0 0 0 2px transparent; } }
@media(prefers-reduced-motion:reduce) { .tv-input-copied { animation:none; outline:1px solid var(--lime); } }
#marketTokenTerminal > [data-market-spoiler="depth"] { margin-top:16px; background:var(--panel); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
@media(min-width:1200px) {
.tv-terminal { min-height:560px; }
.tv-col-book { align-content:stretch; min-height:0; }
.tv-col-book > [data-market-spoiler="book"] { height:100%; position:relative; box-sizing:border-box; }
.tv-col-book > [data-market-spoiler="book"] > .market-spoiler-body { position:absolute; inset:46px 0 0; display:grid; grid-template-rows:auto minmax(0,1fr) auto minmax(0,1fr); }
.tv-col-book .tv-book-asks,.tv-col-book .tv-book-bids { max-height:none; min-height:0; }
.tv-col-book .tv-book-row { flex-shrink:0; }
}
#page-games [hidden] { display:none !important; }
.game-catalog-description { color:var(--muted); font-size:14px; line-height:1.7; margin:24px 0; }
.game-catalog-card .market-token-icon { color:var(--lime); background:rgba(201,245,106,.10); }
.jackpot-panel { display:block; margin-bottom:20px; }
.jackpot-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0; }
.jackpot-stats > div { color:var(--muted); font-size:13px; }
.jackpot-stats strong { display:block; color:var(--lime); font-size:24px; margin-top:8px; overflow-wrap:anywhere; }
.jackpot-panel .bet-controls { max-width:420px; margin:20px 0; }
.game-message-winner { display:flex; align-items:center; gap:10px; margin-top:10px; }
.game-message-winner .chat-avatar { width:32px; height:32px; font-size:13px; }
.game-message-winner a { color:inherit; }
@media(max-width:767px) { .jackpot-stats { grid-template-columns:1fr; gap:14px; } }
.cups-rules { color:var(--muted); line-height:1.7; margin:0 0 20px; }
.cups-choice-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:20px 0; }
.cup-choice { position:relative; min-width:0; display:flex; flex-direction:column; align-items:center; gap:20px; padding:28px 8px 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg); color:var(--text); cursor:pointer; font:inherit; }
.cup-choice:hover:not(:disabled),.cup-choice.is-selected { border-color:var(--lime); }
.cup-choice:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.cup-shape { position:relative; z-index:1; display:block; width:64px; height:72px; background:linear-gradient(100deg,#8798a7,#d1d9df 50%,#718390); clip-path:polygon(16% 0,84% 0,100% 100%,0 100%); border-radius:7px; transition:transform .65s ease; }
.cup-ball { display:none; position:absolute; top:76px; width:18px; height:18px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px rgba(201,245,106,.25); }
.cup-choice.is-selected[data-hide-cup] .cup-ball,.cup-choice.has-ball .cup-ball { display:block; }
.cup-choice.is-selected[data-hide-cup] .cup-shape,.cup-choice.is-revealed .cup-shape { transform:translateY(-24px); }
.cup-choice:disabled { cursor:default; }
/* Компактные строки списков «Три стакана» — в стиле реестра */
.cups-row { display:grid; grid-template-columns:22px minmax(0,1fr) auto auto; gap:8px; align-items:center;
padding:9px 12px; border-bottom:1px solid var(--border); background:transparent; }
.cups-row:last-child { border-bottom:0; }
.cups-row-icon { width:22px; height:22px; display:grid; place-items:center; font-size:11px; color:var(--lime); }
.cups-row-waiting .cups-row-icon, .cups-row-open .cups-row-icon { color:var(--warning-color, var(--lime)); }
.cups-row-body { min-width:0; }
.cups-row-body .act-line { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; }
.cups-row-body .act-label { font-size:12px; font-weight:700; }
.cups-row-who { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cups-row-body .act-meta { font-size:10px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.cups-row-amount .act-amount { display:inline-block; font-size:12px; margin:0; }
.cups-row-action .cups-row-btn { white-space:nowrap; padding:5px 9px; font-size:11px; min-height:0; }
.cups-row-history .cups-row-action .cups-row-btn { opacity:.75; }
@media(max-width:480px) {
.cups-row { grid-template-columns:18px minmax(0,1fr) auto; row-gap:4px; padding:8px; }
.cups-row-amount { grid-column:2; justify-self:start; }
.cups-row-action { grid-column:3; grid-row:1 / span 2; }
.cups-row-action .cups-row-btn { padding:5px 7px; font-size:10px; }
.cups-row-body .act-label, .cups-row-who { font-size:11px; }
}
.cups-play-panel { margin-top:24px; }
#cupsGamePage .game-panel { display:block; }
#cupsGamePage .game-panel-heading { margin-bottom:20px; }
.cups-play-panel .cups-choice-row { max-width:640px; margin-inline:auto; }
#cupsResult { min-height:24px; line-height:1.7; color:var(--lime); }
@media(max-width:480px) { .cups-choice-row { gap:6px; }.cup-choice { padding-left:2px; padding-right:2px; font-size:11px; }.cup-shape { width:48px; height:64px; }.cup-ball { top:68px; } }
@media(prefers-reduced-motion:reduce) { .cup-shape { transition:none; } }
/* Серверная настройка безопасности — отдельный modal dialog с безопасным DOM. */
#securityDialog { width: min(560px, calc(100vw - 28px)); max-height: 90dvh; overflow: auto; border: 1px solid #63728d; border-radius: 18px; padding: 24px; background: #172132; color: #f3f6fc; }
#securityDialog::backdrop { background: rgb(0 0 0 / 75%); }
#securityContent { display: grid; gap: 16px; }
#securityContent h2, #securityContent p { margin: 0; overflow-wrap: anywhere; }
#securityContent pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
#securityContent label { display: grid; gap: 8px; }
#securityContent button:disabled { opacity: .5; cursor: wait; }
#securityBanner:not(:empty) { position: fixed; top: 12px; right: 12px; max-width: min(420px, calc(100vw - 24px)); padding: 16px; background: #172132; color: #fff; border: 1px solid #63728d; border-radius: 12px; z-index: 500; }
#securityBanner:not(:empty) p { margin: 0 0 12px; overflow-wrap: anywhere; }
#securityBanner:not(:empty) button { margin: 0 6px 6px 0; }
.passkey-recommendation { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:16px; margin:16px 0; border:1px solid var(--border, #63728d); border-radius:12px; }
.passkey-recommendation[hidden] { display:none !important; }
.passkey-recommendation p { margin:6px 0 0; max-width:680px; font-size:14px; opacity:.8; }
.passkey-recommendation > div:last-child { display:flex; flex-wrap:wrap; gap:8px; }
/* ============================================================
P2P-обменник (монеты UMBA <-> фиат вне платформы, внутренний эскроу)
============================================================ */
.exchange-page { display:flex; flex-direction:column; gap:18px; }
.exchange-heading { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:14px; }
.exchange-heading h1 { margin:0 0 6px; font-size:24px; font-weight:600; }
.exchange-heading p { margin:0; }
#exchangeNotice:empty { display:none; }
#exchangeNotice { padding:10px 14px; border:1px solid var(--line); border-radius:10px; font-size:14px; }
.exchange-tabs { display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); }
.exchange-tab { appearance:none; background:transparent; border:none; border-bottom:2px solid transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:14px; padding:10px 14px; transition:color .15s ease, border-color .15s ease; }
.exchange-tab:hover { color:var(--text); }
.exchange-tab.active { color:var(--lime); border-bottom-color:var(--lime); }
/* Значок активных сделок на вкладке «Мои сделки» (тот же ритм, что у бейджа чата) */
.exchange-tab-badge {
display:inline-block; margin-left:6px; padding:2px 6px;
background:var(--gold); color:var(--on-accent);
font-size:10px; font-weight:800; line-height:1; border-radius:10px;
vertical-align:middle;
}
.exchange-tab-badge[hidden] { display:none !important; }
.exchange-tab-badge.is-attention { background:var(--lime); }
/* Значок обменника в меню: [hidden] важнее display из базового .nav-badge */
.nav-item .nav-badge[hidden] { display:none !important; }
/* Есть сделка, где ход за пользователем (оплатить / передать UMBA) — привлекаем внимание */
.nav-item .nav-badge.is-attention {
background:var(--lime);
animation:exchange-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes exchange-badge-pulse {
0%, 100% { box-shadow:0 0 0 0 rgba(180, 255, 80, .55); }
50% { box-shadow:0 0 0 4px rgba(180, 255, 80, 0); }
}
@media (prefers-reduced-motion: reduce) {
.nav-item .nav-badge.is-attention { animation:none; }
}
.exchange-panel { display:flex; flex-direction:column; gap:16px; }
.exchange-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.exchange-toolbar label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.exchange-toolbar .form-input { min-width:180px; }
.exchange-list { display:flex; flex-direction:column; gap:12px; }
.exchange-listing { display:flex; flex-direction:column; gap:8px; }
.exchange-listing-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.exchange-listing-head strong { font-size:15px; }
.exchange-price { margin:0; color:var(--lime); font-size:16px; font-weight:600; }
.exchange-terms { margin:0; padding:10px 12px; background:var(--bg); border:1px solid var(--line); border-radius:8px; font-size:13px; overflow-wrap:anywhere; }
.exchange-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.exchange-actions .form-input { max-width:160px; }
.exchange-deal-calc { flex:1 1 100%; margin:0; font-size:13px; line-height:1.4; font-variant-numeric:tabular-nums; }
.exchange-deal-calc.muted { color:var(--muted); }
.exchange-deal-calc.support-error { color:var(--red); }
/* Компактный каталог обменников: строка + раскрытие по клику (заявка #11) */
.exchange-line { display:flex; flex-direction:column; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; }
.exchange-line-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:14px; }
.exchange-line-name { flex:1 1 140px; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exchange-line-currency { color:var(--muted); font-size:13px; }
.exchange-line-price { color:var(--lime); font-weight:600; white-space:nowrap; }
.exchange-line-price small { color:var(--muted); font-weight:400; }
.exchange-line-avail { color:var(--muted); font-size:13px; white-space:nowrap; }
.exchange-line-toggle { margin-left:auto; }
.exchange-line-detail { display:flex; flex-direction:column; gap:8px; }
.exchange-message-label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.exchange-message-label textarea { resize:vertical; }
.exchange-consent { display:flex; flex-direction:row !important; align-items:flex-start; gap:10px; padding:10px 12px; background:var(--bg); border:1px solid var(--line); border-radius:8px; font-size:13px; line-height:1.45; color:var(--muted); cursor:pointer; }
.exchange-consent input[type="checkbox"] { flex:0 0 auto; margin-top:2px; width:16px; height:16px; accent-color:var(--lime); cursor:pointer; }
.exchange-consent span { flex:1 1 auto; }
.exchange-status { display:inline-flex; align-items:center; padding:3px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted); white-space:nowrap; }
.exchange-status.ok { color:var(--on-accent); background:var(--lime); border-color:var(--lime); }
.exchange-status.warn { color:var(--text); border-color:var(--red); background:rgba(246,70,93,.16); }
.exchange-status.muted { color:var(--muted); }
.exchange-deal { display:flex; flex-direction:column; gap:8px; }
.exchange-deal-detail { display:flex; flex-direction:column; gap:8px; padding:10px 12px; background:var(--bg); border:1px solid var(--line); border-radius:8px; }
/* «Мои сделки»: активные и завершённые — отдельными блоками, строки миниатюрные. */
.exchange-deals-block { display:flex; flex-direction:column; gap:8px; }
.exchange-deals-title { margin:0; font-size:14px; font-weight:600; }
.exchange-deals-title .muted { font-size:11px; font-weight:400; }
.exchange-deals.compact-history { display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel); }
.exchange-deals-empty { padding:10px 12px; font-size:12px; }
.exchange-deal-row { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:8px; align-items:start; padding:9px 12px; border-bottom:1px solid var(--line); }
.exchange-deal-row:last-child { border-bottom:0; }
.exchange-deal-icon { width:22px; height:22px; display:grid; place-items:center; font-size:11px; color:var(--lime); }
.exchange-deal-row.is-pending .exchange-deal-icon { color:var(--warning-color, var(--lime)); }
.exchange-deal-row.is-paid .exchange-deal-icon { color:var(--warning-color, var(--lime)); }
.exchange-deal-row.is-dispute .exchange-deal-icon { color:var(--red); }
.exchange-deal-row.is-refunded .exchange-deal-icon { color:var(--muted); }
.exchange-deal-body { min-width:0; }
.exchange-deal-body .act-line { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-size:12px; }
.exchange-deal-body .act-label { font-size:12px; font-weight:700; }
.exchange-deal-body .act-meta { font-size:10px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.exchange-deal-row .exchange-status { padding:1px 7px; font-size:10px; }
.exchange-deal-side { display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:0; }
.exchange-deal-total { margin:0; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.exchange-deal-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.exchange-page .exchange-deal-row .btn { padding:4px 8px; min-height:0; font-size:11px; line-height:1.4; }
.exchange-deal-row .exchange-file { display:inline-flex; align-items:center; }
.exchange-deal-row .exchange-deal-detail { grid-column:1 / -1; margin-top:2px; padding:8px 10px; font-size:11px; }
@media(max-width:640px) {
.exchange-deal-row { grid-template-columns:18px minmax(0,1fr); }
.exchange-deal-row .exchange-deal-icon { width:18px; height:18px; font-size:10px; }
.exchange-deal-side { grid-column:2; align-items:flex-start; }
.exchange-deal-actions { justify-content:flex-start; }
}
/* «Мои объявления»: активные/закрытые блоками, строки той же миниатюрной сетки. */
.exchange-listings .exchange-listing-row { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:8px; align-items:start; padding:9px 12px; border-bottom:1px solid var(--line); }
.exchange-listings .exchange-listing-row:last-child { border-bottom:0; }
.exchange-listings .exchange-listing-icon { width:22px; height:22px; display:grid; place-items:center; font-size:11px; color:var(--lime); }
.exchange-listings .exchange-listing-row.is-paused .exchange-listing-icon { color:var(--warning-color, var(--lime)); }
.exchange-listings .exchange-listing-row.is-closed .exchange-listing-icon { color:var(--muted); }
.exchange-listing-body { min-width:0; }
.exchange-listing-body .act-line { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-size:12px; }
.exchange-listing-body .act-label { font-size:12px; font-weight:700; }
.exchange-listing-body .act-meta { font-size:10px; line-height:1.5; color:var(--muted); overflow-wrap:anywhere; }
.exchange-listings .exchange-listing-row .exchange-status { padding:1px 7px; font-size:10px; }
.exchange-listing-side { display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:0; }
.exchange-listing-total { margin:0; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.exchange-listing-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.exchange-page .exchange-listing-row .btn { padding:4px 8px; min-height:0; font-size:11px; line-height:1.4; }
.exchange-listing-row.is-editing { background:var(--bg); }
.exchange-listing-edit { grid-column:1 / -1; margin-top:2px; }
.exchange-listing-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel); }
.exchange-listing-form label { display:flex; flex-direction:column; gap:4px; font-size:11px; color:var(--muted); }
.exchange-listing-form .form-input { padding:6px 8px; min-height:34px; font-size:12px; }
.exchange-listing-form-wide { grid-column:1 / -1; }
.exchange-listing-form-actions { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; }
.exchange-listing-form-status { grid-column:1 / -1; font-size:11px; }
@media(max-width:640px) {
.exchange-listings .exchange-listing-row { grid-template-columns:18px minmax(0,1fr); }
.exchange-listings .exchange-listing-icon { width:18px; height:18px; font-size:10px; }
.exchange-listing-side { grid-column:2; align-items:flex-start; }
.exchange-listing-actions { justify-content:flex-start; }
}
.exchange-proofs { display:flex; flex-wrap:wrap; gap:10px; font-size:13px; }
.exchange-proofs a { color:var(--lime); text-decoration:none; }
.exchange-proofs a:hover { text-decoration:underline; }
.exchange-proof-draft { display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%; margin-top:8px; padding:8px; border:1px solid var(--line); border-radius:8px; }
.exchange-proof-preview { width:48px; height:48px; display:grid; place-items:center; overflow:hidden; border-radius:5px; background:var(--overlay-10); }
.exchange-proof-preview-image { width:100%; height:100%; object-fit:cover; }
.exchange-proof-name { min-width:0; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.exchange-proof-item { display:inline-flex; align-items:center; gap:6px; }
.exchange-page .exchange-proof-item .exchange-proof-delete { padding:2px 6px; font-size:10px; }
.exchange-proof-hint { color:var(--warning-color, var(--lime)); }
.exchange-deal-row .btn[disabled] { opacity:.5; cursor:not-allowed; }
/* Просмотр чека: свой слой с закрытием — на смартфоне системный просмотрщик
картинки умеет только «назад», и выйти из него неочевидно. */
.exchange-proof-viewer { position:fixed; z-index:4000; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:10px; padding:16px; background:var(--overlay-90); }
.exchange-proof-viewer-body { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:12px; min-height:0; width:100%; text-align:center; }
.exchange-proof-viewer-body img { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; }
.exchange-proof-viewer-body iframe { flex:1; width:100%; min-height:0; border:0; border-radius:8px; background:#fff; }
.exchange-proof-viewer-body .muted { color:rgba(255,255,255,.7); margin:0; font-size:12px; }
body.exchange-proof-viewer-open { overflow:hidden; }
.exchange-proof-viewer-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
max-width:100%; color:#fff; font-size:12px; }
.exchange-proof-viewer-name { max-width:min(60vw, 320px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exchange-proof-viewer-close { position:absolute; top:10px; right:10px; z-index:1;
width:44px; height:44px; min-height:0; padding:0; border:0; border-radius:50%;
background:var(--overlay-60); color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.exchange-proof-viewer-close:hover { background:var(--overlay-72); }
.exchange-proof-viewer-close:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
.exchange-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
.exchange-grid label, .exchange-panel .card label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.exchange-panel .card { display:flex; flex-direction:column; gap:12px; }
.exchange-panel .card h2 { margin:0; font-size:17px; font-weight:600; }
.exchange-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; overflow-wrap:anywhere; }
.admin-pinned-title { margin:0 0 8px; font-size:13px; color:var(--muted); }
.admin-audit-range { display:flex; flex-wrap:wrap; gap:8px; align-items:end; }
.admin-audit-range label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
/* Администрирование: планируемый модуль собственных рекламных кампаний. */
/* Рекламные кампании: кабинет администратора (T24).
Вкладки — «пилюля», карточки — стекло, числа — tabular-nums, ритм 4/8. */
.ad-admin { display:flex; flex-direction:column; gap:24px; margin-top:24px; }
.ad-admin-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.ad-admin-heading h2 { margin:0 0 8px; font-size:22px; line-height:28px; font-weight:600; letter-spacing:-.025em; color:var(--rv-text); }
.ad-admin-heading p { margin:0; max-width:64ch; font-size:14px; line-height:20px; }
.ad-admin-tabs { display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--rv-glass); box-shadow:inset 0 0 0 1px var(--rv-line); overflow-x:auto; scrollbar-width:none; }
.ad-admin-tabs::-webkit-scrollbar { display:none; }
.ad-admin-tabs button { border:0; border-radius:999px; padding:10px 16px; background:transparent; color:var(--rv-text-2); font:inherit; font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; transition:background .16s var(--rv-ease), color .16s var(--rv-ease); }
.ad-admin-tabs button:hover { background:var(--rv-glass-hover); color:var(--rv-text); }
.ad-admin-tabs button.is-active { background:rgba(var(--rv-lime-rgb),.13); color:var(--rv-lime); }
.ad-admin-notice { margin:0; padding:0 16px; max-height:0; overflow:hidden; border-radius:var(--rv-r-in); font-size:14px; line-height:20px; transition:max-height .2s var(--rv-ease), padding .2s var(--rv-ease); }
.ad-admin-notice.is-visible { max-height:120px; padding:12px 16px; background:rgba(var(--rv-lime-rgb),.08); color:var(--rv-text); box-shadow:inset 0 0 0 1px var(--rv-line-soft); }
.ad-admin-notice.is-error { background:rgba(255,107,129,.08); color:var(--rv-red); }
.ad-admin-panel { display:flex; flex-direction:column; gap:24px; }
.ad-admin-panel[hidden] { display:none; }
.ad-campaign-form { display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:var(--rv-r); background:var(--rv-surface); box-shadow:var(--rv-ring); }
.ad-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.ad-field { display:flex; flex-direction:column; gap:8px; min-width:0; }
.ad-field-wide { grid-column:span 3; }
.ad-field > span { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--rv-text-3); }
.ad-field > span small { text-transform:none; letter-spacing:0; font-weight:400; color:var(--rv-text-2); }
.ad-field input, .ad-field select, .ad-field textarea {
width:100%; min-height:44px; padding:10px 14px; border:0; border-radius:12px;
background:rgba(255,255,255,.04); color:var(--rv-text);
box-shadow:inset 0 0 0 1px var(--rv-line); font:inherit; font-size:14px;
}
.ad-field select { appearance:none; cursor:pointer; }
.ad-field input:focus-visible, .ad-field select:focus-visible, .ad-field textarea:focus-visible {
outline:none; box-shadow:inset 0 0 0 1.5px var(--rv-lime), 0 0 0 4px rgba(var(--rv-lime-rgb),.12);
}
.ad-field-price { justify-content:center; }
.ad-price { font-size:22px; line-height:28px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--rv-lime); }
.ad-field-price small { font-size:12px; color:var(--rv-text-2); }
.ad-unlimited-toggle { justify-content:center; padding:12px 16px; border-radius:var(--rv-r-in); background:var(--rv-glass); box-shadow:inset 0 0 0 1px var(--rv-line-soft); }
.ad-toggle-line { display:flex; align-items:center; gap:8px; min-height:24px; color:var(--rv-text); font-size:14px; line-height:20px; text-transform:none; letter-spacing:0; cursor:pointer; }
.ad-toggle-line input { width:20px; height:20px; min-height:20px; accent-color:var(--rv-lime); cursor:pointer; }
.ad-unlimited-toggle small { font-size:12px; line-height:16px; color:var(--rv-text-2); }
.ad-form-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ad-form-hint { font-size:13px; line-height:18px; color:var(--rv-text-2); }
.ad-btn { min-height:40px; padding:0 16px; border:0; border-radius:999px; background:var(--rv-glass-2); color:var(--rv-text); box-shadow:inset 0 0 0 1px var(--rv-line); font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .16s var(--rv-ease), transform .16s var(--rv-ease); }
.ad-btn:hover { background:var(--rv-glass-hover); transform:translateY(-1px); }
.ad-btn:active { transform:scale(.97); }
.ad-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.ad-btn-primary { background:var(--rv-lime); color:#11180a; box-shadow:0 10px 28px -10px rgba(var(--rv-lime-rgb),.6); }
.ad-btn-primary:hover { background:var(--rv-lime); }
.ad-btn-danger { background:rgba(255,107,129,.08); color:var(--rv-red); box-shadow:inset 0 0 0 1px rgba(255,107,129,.35); }
.ad-btn-quiet { background:transparent; color:var(--rv-text-2); }
.ad-campaign-list { display:flex; flex-direction:column; gap:16px; }
.ad-campaign { display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:var(--rv-r); background:var(--rv-surface); box-shadow:var(--rv-ring), var(--rv-lift); overflow-wrap:anywhere; }
.ad-campaign-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ad-campaign-title h3 { margin:0 0 4px; font-size:17px; line-height:22px; font-weight:600; letter-spacing:-.02em; color:var(--rv-text); }
.ad-campaign-title p { margin:0; font-size:13px; line-height:18px; }
.ad-status { align-self:flex-start; padding:4px 12px; border-radius:999px; background:var(--rv-glass-2); color:var(--rv-text-2); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.ad-status-active { background:rgba(var(--rv-lime-rgb),.13); color:var(--rv-lime); }
.ad-status-finished, .ad-status-archived { color:var(--rv-text-3); }
.ad-status-ad_banned { background:rgba(255,107,129,.12); color:var(--rv-red); }
.ad-status-captcha_required, .ad-status-suspected { background:rgba(226,186,110,.14); color:var(--rv-gold-text, #e2ba6e); }
.ad-stats, .ad-counts { display:grid; gap:12px; margin:0; }
.ad-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ad-counts { grid-template-columns:repeat(5,minmax(0,1fr)); }
.ad-stats > div, .ad-counts > div { display:flex; flex-direction:column; gap:4px; padding:12px 16px; border-radius:var(--rv-r-in); background:var(--rv-glass); box-shadow:inset 0 0 0 1px var(--rv-line-soft); }
.ad-stats dt, .ad-counts dt { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--rv-text-3); }
.ad-stats dd, .ad-counts dd { margin:0; font-size:17px; line-height:22px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--rv-text); }
.ad-progress { height:6px; border-radius:999px; background:var(--rv-glass-2); overflow:hidden; }
.ad-progress b { display:block; height:100%; border-radius:999px; background:var(--rv-lime); transition:width .4s var(--rv-ease); }
.ad-campaign-meta { margin:0; font-size:13px; line-height:18px; color:var(--rv-text-2); font-variant-numeric:tabular-nums; }
.ad-media-list { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.ad-media-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center; padding:10px 16px; border-radius:12px; background:var(--rv-glass); font-size:13px; }
.ad-media-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--rv-text); }
.ad-media-meta { color:var(--rv-text-2); font-variant-numeric:tabular-nums; }
.ad-media-empty { display:block; color:var(--rv-text-3); }
/* Статус обработки ролика: «загружено» → «обрабатывается» → «готово»/«ошибка».
Цвет несёт смысл: лайм — готово, текст-2 — в работе, красный — ошибка. */
.ad-media-item { align-items:start; }
.ad-media-main { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ad-media-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.ad-media-state { align-self:start; padding:4px 12px; border-radius:999px; background:var(--rv-glass-2); color:var(--rv-text-2); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.ad-media-state.is-ready { background:rgba(var(--rv-lime-rgb),.13); color:var(--rv-lime); }
.ad-media-state.is-processing,
.ad-media-state.is-queued { background:var(--rv-glass-2); color:var(--rv-text-2); }
.ad-media-state.is-failed { background:rgba(255,107,129,.12); color:var(--rv-red); }
.ad-media-note { grid-column:1 / -1; margin:0; font-size:12px; line-height:18px; color:var(--rv-text-2); overflow-wrap:anywhere; }
.ad-media-note.is-error { color:var(--rv-red); }
.ad-upload { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px; border-radius:var(--rv-r-in); background:var(--rv-glass); box-shadow:inset 0 0 0 1px var(--rv-line-soft); }
.ad-upload input[type="file"] { max-width:100%; color:var(--rv-text-2); font:inherit; font-size:13px; }
.ad-upload-status { font-size:13px; color:var(--rv-text-2); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ad-upload-progress { flex:1 1 100%; height:6px; border-radius:999px; background:var(--rv-glass-2); overflow:hidden; }
.ad-upload-progress[hidden] { display:none; }
.ad-upload-progress b { display:block; height:100%; width:0; border-radius:999px; background:var(--rv-lime); transition:width .2s linear; }
.ad-campaign-actions { display:flex; gap:8px; flex-wrap:wrap; }
/* Подозрения и баны */
.ad-fraud-controls { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; padding:16px; border-radius:var(--rv-r-in); background:var(--rv-glass); box-shadow:inset 0 0 0 1px var(--rv-line-soft); }
.ad-fraud-controls .ad-field { flex:1 1 220px; }
.ad-fraud-list { display:flex; flex-direction:column; gap:16px; }
.ad-case { display:flex; flex-direction:column; gap:12px; padding:24px; border-radius:var(--rv-r); background:var(--rv-surface); box-shadow:var(--rv-ring), var(--rv-lift); overflow-wrap:anywhere; }
.ad-case-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ad-case-head h3 { margin:0 0 4px; font-size:17px; line-height:22px; font-weight:600; color:var(--rv-text); }
.ad-case-head p { margin:0; font-size:13px; line-height:18px; font-variant-numeric:tabular-nums; }
.ad-case-reasons { margin:0; font-size:13px; line-height:20px; color:var(--rv-text-2); }
.ad-case-reasons code { padding:2px 8px; border-radius:999px; background:var(--rv-glass-2); font-size:12px; }
.ad-case-meta { margin:0; font-size:12px; line-height:18px; }
.ad-appeal-list { display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
.ad-appeal-row { display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:var(--rv-r-in); background:var(--rv-glass); box-shadow:inset 0 0 0 1px var(--rv-line-soft); }
.ad-appeal-state { align-self:flex-start; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--rv-text-3); }
.ad-appeal-row p { margin:0; font-size:14px; line-height:20px; color:var(--rv-text); }
.ad-appeal-actions, .ad-case-actions { display:flex; gap:8px; flex-wrap:wrap; }
/* Защита от ботов */
.ad-protection { display:flex; flex-direction:column; gap:16px; padding:24px; border-radius:var(--rv-r); background:var(--rv-surface); box-shadow:var(--rv-ring); }
.ad-segments { display:flex; gap:4px; padding:4px; border-radius:999px; background:var(--rv-glass); box-shadow:inset 0 0 0 1px var(--rv-line); overflow-x:auto; scrollbar-width:none; }
.ad-segments::-webkit-scrollbar { display:none; }
.ad-segments button { border:0; border-radius:999px; padding:10px 16px; background:transparent; color:var(--rv-text-2); font:inherit; font-size:14px; font-weight:600; white-space:nowrap; cursor:pointer; }
.ad-segments button:hover { background:var(--rv-glass-hover); color:var(--rv-text); }
.ad-segments button.is-active { background:rgba(var(--rv-lime-rgb),.13); color:var(--rv-lime); }
.ad-protection-note { margin:0; font-size:14px; line-height:20px; color:var(--rv-text-2); }
/* Честный статус защиты: администратор обязан видеть, что реально работает. */
.ad-security { display:flex; flex-direction:column; gap:8px; }
.ad-security-row { display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start; padding:16px; border-radius:var(--rv-r-in); background:var(--rv-glass); box-shadow:inset 0 0 0 1px var(--rv-line-soft); }
.ad-security-row i { margin-top:2px; color:var(--rv-text-3); }
.ad-security-row.is-ok i { color:var(--rv-lime); }
.ad-security-row.is-warn i { color:var(--rv-red); }
.ad-security-row span { display:flex; flex-direction:column; gap:4px; min-width:0; }
.ad-security-row b { font-size:14px; line-height:20px; font-weight:600; color:var(--rv-text); }
.ad-security-row small { font-size:13px; line-height:18px; color:var(--rv-text-2); overflow-wrap:anywhere; }
.ad-security-note { margin:0; padding:12px 16px; border-radius:var(--rv-r-in); background:rgba(255,107,129,.08); color:var(--rv-red); font-size:13px; line-height:18px; overflow-wrap:anywhere; }
.ad-protection-journal { display:flex; flex-direction:column; gap:8px; }
.ad-journal-row { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:10px 16px; border-radius:12px; background:var(--rv-glass); font-size:13px; line-height:18px; }
.ad-journal-row b { color:var(--rv-text); font-weight:600; }
@media (max-width:1100px) {
.ad-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ad-field-wide { grid-column:span 2; }
.ad-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ad-counts { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:768px) {
.ad-admin { gap:16px; margin-top:16px; }
.ad-campaign-form, .ad-campaign, .ad-case, .ad-protection { padding:20px; }
.ad-form-grid { grid-template-columns:minmax(0,1fr); }
.ad-field-wide { grid-column:span 1; }
.ad-stats, .ad-counts { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ad-media-row { grid-template-columns:minmax(0,1fr) auto; }
.ad-media-meta { grid-column:1 / -1; }
.ad-admin-tabs button, .ad-segments button, .ad-btn { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
.ad-admin-notice, .ad-btn, .ad-progress b { transition:none; }
.ad-btn:hover { transform:none; }
}
.exchange-file { position:relative; overflow:hidden; cursor:pointer; }
.exchange-file input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.exchange-ok { color:var(--lime); }
.exchange-warn { color:var(--red); }
/* One merchant task at a time; explicit boundaries and compact controls. */
.exchange-page [hidden] { display:none !important; }
.exchange-page .exchange-panel > .card,.exchange-page .exchange-panel .exchange-listing { padding:18px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.exchange-page .form-input { padding:9px 11px; min-height:40px; font-size:13px; }
.exchange-page .btn { padding:9px 13px; min-height:38px; font-size:12px; }
.exchange-page p { margin:0; line-height:1.6; }
.exchange-page #exchangeNotice:empty { display:none; }
.exchange-merchant-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:14px; }
.exchange-workspace-tabs { display:flex; flex-wrap:wrap; gap:6px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.exchange-workspace-tabs button { border:1px solid var(--line); border-radius:7px; padding:9px 12px; background:transparent; color:var(--text); font:inherit; font-size:12px; cursor:pointer; }
.exchange-workspace-tabs button[aria-pressed="true"] { background:var(--accent-10); border-color:var(--lime); color:var(--lime); }
.exchange-create,.exchange-settings { width:100%; max-width:640px; align-self:flex-start; }
.exchange-limits { border:1px solid var(--line); border-radius:8px; padding:12px; min-width:0; }
.exchange-limits legend { padding:0 5px; color:var(--muted); font-size:12px; }
.exchange-summary { padding:14px; background:var(--bg); border-radius:8px; font-size:20px; font-weight:650; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.exchange-listing-metrics { display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; padding:10px 0; }
.exchange-listing-metrics > strong { font-size:20px; }
.exchange-listing-metrics small,.exchange-listing-metrics span { display:block; font-size:12px; color:var(--muted); font-weight:400; }
.exchange-listing-metrics b { display:block; color:var(--text); font-size:13px; margin-top:3px; }
.exchange-listing-head small { color:var(--muted); font-weight:400; }
.exchange-listing .exchange-actions { border-top:1px solid var(--line); padding-top:10px; }
.exchange-page .exchange-line-detail { border-top:1px solid var(--line); padding-top:12px; }
.exchange-page .exchange-status.ok { background:var(--accent-10); color:var(--lime); border-color:var(--accent-35); }
.exchange-page button:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
@media(max-width:640px) {
.exchange-heading h1 { font-size:20px; }
.exchange-actions { width:100%; }
.exchange-actions .btn, .exchange-actions .form-input { flex:1 1 auto; }
.exchange-toolbar .form-input { min-width:0; width:100%; }
}
/* ===== Безопасность: список устройств (заявка владельца) ===== */
.device-list { display:flex; flex-direction:column; gap:10px; margin:10px 0 14px; }
.device-row { display:flex; flex-direction:column; gap:8px; padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:10px; }
.device-row.current { border-color:var(--lime); }
.device-row-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.device-row-head strong { font-size:15px; }
.device-badges { display:inline-flex; flex-wrap:wrap; gap:6px; }
.device-badge { display:inline-flex; align-items:center; padding:2px 9px; border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted); white-space:nowrap; }
.device-badge.ok { color:var(--on-accent); background:var(--lime); border-color:var(--lime); }
.device-badge.warn { color:var(--text); border-color:var(--red); background:rgba(246,70,93,.16); }
.device-meta { margin:0; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.device-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
/* ===== Админ: переключатель службы биржевых ботов ===== */
.agents-panel { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 12px; flex-wrap:wrap; }
.agents-status { display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.agents-status i { font-size:11px; }
.agents-status.is-on { color:var(--lime); }
.agents-status.is-off { color:var(--muted); }
.agents-checked { font-size:12px; color:var(--muted); }
.agents-actions { display:flex; gap:10px; flex-wrap:wrap; }
.agents-actions .btn { flex:1 1 auto; }
.agents-note { margin:8px 0 0; font-size:12px; color:var(--muted); min-height:1em; }
.home-statistics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:24px 0; }
.home-statistics dt { font-size:13px; color:var(--gray-color); }
.home-statistics dd { margin:6px 0 0; font-size:24px; font-weight:600; overflow-wrap:anywhere; }
/* ============================================================
Aurora Glass — дизайн, утверждённый владельцем 2026-11-07.
1) слой примерки (каркас десктопа, планшет/мобильный, цвета, графики);
2) Aurora Glass: html.rv-app — все страницы, html.rv-home — главная.
Классы ставит блок «Aurora Glass» в конце app.js.
============================================================ */
/* --- примерка: preview-balanced-bars --- */
@media(min-width:1101px){.home-dashboard{padding:0!important}.home-workspace{grid-template-columns:minmax(0,1fr) 280px!important;gap:0!important;min-height:calc(100vh - 72px)}.home-main-column{padding:28px 36px 48px;min-width:0}.home-side{position:relative!important;top:auto!important;align-content:start;gap:20px!important;padding:28px 16px 32px!important;background:var(--panel);border-left:1px solid var(--line);min-height:calc(100vh - 72px)}.home-workspace::after{display:none!important}.global-nav{padding:28px 16px 32px!important;background:var(--panel);border-right:1px solid var(--line)}.home-side>section{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important}.home-side>section+section{padding-top:20px!important;border-top:1px solid var(--line)!important}.home-side-heading h2{font-size:15px!important;letter-spacing:-.01em}.home-quick-grid{gap:8px}.home-quick-grid>a,.home-quick-grid>button{min-height:76px;border-radius:12px;font-size:12px!important}.home-platform-note{display:none!important}.home-market-row{padding-block:12px}.home-side-heading{margin-bottom:14px!important}}
/* --- примерка: design-preview --- */
@media(min-width:1101px){.global-layout{background:#101218!important;color:#f6f7fa;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}.global-layout>.top-bar{background:#191c24!important;border-bottom:1px solid rgba(255,255,255,.075)!important}.global-nav,.home-side{background:#191c24!important;border-color:rgba(255,255,255,.075)!important}.global-nav{padding:28px 16px!important}.nav-section-label{font-size:11px!important;letter-spacing:.07em!important;color:#9299a8!important;margin:16px 10px 8px!important}.nav-item{min-height:43px!important;border-radius:11px!important;font-size:14px!important;gap:14px!important}.nav-item i{width:20px!important;text-align:center!important;font-size:15px!important}.nav-item.active{background:rgba(188,239,90,.13)!important;color:#d3f58b!important}.global-content{background:#101218!important}.home-main-column{padding:36px 40px 56px!important}.home-balance-card{background:linear-gradient(135deg,#262d31,#1c2227)!important;border:1px solid rgba(208,244,157,.14)!important;border-radius:24px!important;padding:30px!important;min-height:156px!important;box-shadow:0 16px 40px rgba(0,0,0,.12)!important}.home-balance-intro p{font-size:12px!important;letter-spacing:.08em!important;color:#aeb8aa!important}.home-balance-intro h2{font-size:clamp(29px,3vw,42px)!important;letter-spacing:-.04em!important;line-height:1.1!important}.home-balance-breakdown dt{font-size:13px!important;color:#aab2b8!important}.home-balance-breakdown dd{font-size:15px!important}.home-wallet-link{border-radius:12px!important;padding:12px 16px!important;font-size:13px!important}.home-assets-section{margin-top:38px!important}.home-section-heading{margin-bottom:18px!important}.home-section-heading h2{font-size:22px!important;letter-spacing:-.025em!important}.home-section-heading p{font-size:13px!important;line-height:1.45!important}.home-section-heading>a{font-size:13px!important}.home-asset-grid{gap:12px!important}.home-asset{background:#1c1f27!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:18px!important;padding:18px!important;min-height:188px!important;box-shadow:none!important}.home-asset-head{font-size:13px!important}.home-coin{width:36px!important;height:36px!important;border-radius:12px!important}.home-asset>strong{font-size:25px!important;letter-spacing:-.03em!important}.home-asset>small,.home-asset footer{font-size:12px!important}.home-activity{margin-top:36px!important;background:#191c24!important;border:1px solid rgba(255,255,255,.06)!important;border-radius:20px!important;padding:24px!important}.home-activity .home-section-heading p{display:none!important}.home-operation{padding:16px 0!important;gap:14px!important}.home-operation b,.home-operation strong{font-size:14px!important}.home-operation span{font-size:12px!important}.home-side{padding:36px 20px!important;gap:26px!important}.home-side h2{font-size:16px!important;letter-spacing:-.02em!important}.home-side-heading p{font-size:11px!important}.home-quick-grid{gap:8px!important}.home-quick-grid>a,.home-quick-grid>button{background:#252932!important;border:1px solid rgba(255,255,255,.035)!important;border-radius:14px!important;min-height:88px!important;font-size:13px!important}.home-quick-grid i{font-size:18px!important}.home-market-row{border-radius:12px!important;padding:13px 8px!important}.home-market-data b{font-size:13px!important}.home-market-data strong{font-size:15px!important}.home-market-data small{font-size:11px!important}.home-market-symbol{width:36px!important;height:36px!important;border-radius:12px!important}.workspace-breadcrumb{font-size:13px!important}.top-bar-user{font-size:13px!important}}
/* --- примерка: доводка цветов и графиков --- */
.preview-chart{display:flex;align-items:end;gap:3px;height:40px;margin:9px 0 4px;border-bottom:1px solid rgba(255,255,255,.1)}.preview-chart i{flex:1;min-width:3px;max-width:12px;border-radius:3px 3px 0 0;background:#bedb81;opacity:.8}.preview-chart-caption{display:block;color:#aab1bc;font-size:11px;margin:4px 0 8px}.home-market-row{display:flex!important;flex-wrap:wrap}.home-market-row .preview-graph{flex:0 0 100%;width:100%;padding-left:44px}
/* --- примерка: доводка цветов и графиков --- */
.home-market-row .preview-graph{padding-left:0!important;width:100%!important;flex-basis:100%!important}.preview-chart i{max-width:none!important}
/* --- примерка: доводка цветов и графиков --- */
.home-market-row[href$='/GOLD']{background:linear-gradient(135deg,rgba(184,143,59,.16),rgba(184,143,59,.045))!important;border:1px solid rgba(208,170,90,.20)!important;border-radius:14px!important;padding:13px!important;margin-bottom:10px}.home-market-row[href$='/SILVER']{background:linear-gradient(135deg,rgba(155,166,181,.16),rgba(155,166,181,.045))!important;border:1px solid rgba(184,195,209,.18)!important;border-radius:14px!important;padding:13px!important}.home-market-row[href$='/GOLD'] .preview-chart i{background:#caa75e}.home-market-row[href$='/SILVER'] .preview-chart i{background:#aebbc9}.home-market-row .preview-chart i[style*='opacity: 0.35']{background:#818796!important}
/* --- примерка: доводка цветов и графиков --- */
.home-asset-gold,.market-card-gold,.market-token-card.gold,.market-card.gold{background:linear-gradient(135deg,#373024,#24221f)!important;border-color:rgba(208,170,90,.24)!important}.home-asset-silver,.market-card-silver,.market-token-card.silver,.market-card.silver{background:linear-gradient(135deg,#32363d,#24272d)!important;border-color:rgba(184,195,209,.22)!important}
/* --- примерка: доводка цветов и графиков --- */
.market-token-gold{background:linear-gradient(135deg,#373024,#24221f)!important;border-color:rgba(208,170,90,.24)!important}.market-token-silver{background:linear-gradient(135deg,#32363d,#24272d)!important;border-color:rgba(184,195,209,.22)!important}
/* --- примерка: доводка цветов и графиков --- */
.home-asset-umba{background:linear-gradient(135deg,#293528,#1c2723)!important;border-color:rgba(174,210,122,.25)!important}.home-asset-umba .home-coin{background:rgba(173,212,108,.18)!important;color:#d0ec9b!important}
/* --- примерка: desk-system --- */
/* ============================================================
UMBA — desktop design system (>= 1101px)
Верхняя панель — во всю ширину, отдельная поверхность.
Под ней: [ левый бар 220 | контент | правая панель (fixed) ]
Левый бар и правая панель приклеены к верхней панели и к краям
окна — без зазоров и скруглений, как единое целое с каркасом.
============================================================ */
@media (min-width:1101px){
:root{
--s0:8px; --s1:16px; --s2:24px; --s3:32px; --s4:48px;
--gutter:32px;
--topbar-h:72px;
--side-w:clamp(280px,23vw,320px);
--r-card:20px;
--r-inner:14px;
--app-sidebar:220px;
/* ширина вертикального скроллбара .global-content (style.css:255) —
компенсируем, чтобы зазор карточки до панели совпал с левым */
--sb-w:10px;
}
/* ---- 1. КАРКАС ---- */
.global-layout{
display:grid!important;
grid-template-columns:var(--app-sidebar) minmax(0,1fr)!important;
grid-template-rows:var(--topbar-h) minmax(0,1fr)!important;
grid-template-areas:"top top" "nav content"!important;
gap:0!important;
align-items:stretch!important;
}
#topBar{grid-area:top!important}
.global-nav{grid-area:nav!important;height:100%!important;margin:0!important}
.global-content{grid-area:content!important;height:100%!important;overflow-x:hidden!important}
#navBackdrop{display:none!important}
/* ---- 2. ВЕРХНЯЯ ПАНЕЛЬ: отдельная, во всю ширину ---- */
.top-bar{
display:flex!important;
align-items:center!important;
gap:0!important;
height:var(--topbar-h)!important;
min-height:0!important;
padding:0 var(--gutter) 0 0!important;
border-bottom:1px solid var(--border)!important;
}
.top-bar > .global-logo{
flex:0 0 var(--app-sidebar)!important;
width:var(--app-sidebar)!important;
max-width:var(--app-sidebar)!important;
margin:0!important;
padding-inline:30px!important;
display:flex!important;
align-items:center!important;
}
.top-bar > .workspace-breadcrumb{
margin:0!important;
padding-left:var(--gutter)!important;
}
.top-bar > .top-bar-user{margin-left:auto!important}
.top-bar > .top-bar-chat{margin-left:var(--s0)!important}
.top-bar > .top-bar-guest{margin-left:auto!important}
/* ---- 3. ПРАВАЯ ПАНЕЛЬ: fixed, приклеена к шапке и к правому краю ---- */
.home-side{
position:fixed!important;
top:var(--topbar-h)!important;
right:0!important;
bottom:0!important;
left:auto!important;
width:var(--side-w)!important;
max-width:var(--side-w)!important;
margin:0!important;
padding:var(--s3) var(--s2)!important;
display:grid!important;
grid-auto-rows:min-content!important;
align-content:start!important;
gap:var(--s3)!important;
overflow-y:auto!important;
background:var(--panel)!important;
border-left:1px solid var(--border)!important;
border-top:0!important;
border-right:0!important;
border-bottom:0!important;
border-radius:0!important;
box-sizing:border-box!important;
z-index:21;
scrollbar-width:thin;
}
/* карточки внутри панели — плоские группы на её поверхности */
.home-side>section{
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
position:static!important;
}
.home-side>section+section{
padding-top:var(--s3)!important;
border-top:1px solid var(--border)!important;
}
.home-quick-grid{gap:var(--s0)!important}
.home-quick-grid>a,.home-quick-grid>button{
border-radius:var(--r-inner)!important;
min-height:72px;
}
.home-market-row{border-radius:var(--r-inner)!important}
/* ---- 4. КОНТЕНТ: одна колонка, освобождает место панели ---- */
.home-dashboard{
max-width:none!important;
margin-inline:0!important;
padding:var(--s3)
calc(var(--side-w) + var(--gutter) - var(--sb-w))
var(--s4)
var(--gutter)!important;
}
.home-workspace{
display:block!important;
}
.home-workspace::after{display:none!important}
.home-main-column{padding:0!important}
/* ---- 5. Верхняя ось ---- */
.home-balance-card{margin-top:0!important}
/* ---- 6. Ритм и радиусы контентной колонки ---- */
.home-balance-card{
padding:var(--s2)!important;
border-radius:var(--r-card)!important;
margin-bottom:0!important;
}
.home-assets-section{margin-top:var(--s3)!important}
.home-activity{
margin-top:var(--s3)!important;
padding:var(--s2)!important;
border-radius:var(--r-card)!important;
}
.home-section-heading{margin-bottom:var(--s1)!important}
.home-asset-grid{gap:var(--s1)!important}
.home-asset{
padding:var(--s1)!important;
border-radius:var(--r-inner)!important;
}
/* ---- 7. Единая типографическая шкала ---- */
.home-section-heading h2,
.home-side-heading h2{
font-size:20px!important;
line-height:1.3!important;
letter-spacing:-0.015em!important;
font-weight:650!important;
}
.home-section-heading p,
.home-side-heading p{
font-size:12px!important;
line-height:1.45!important;
}
}
/* --- примерка: adapt-preview --- */
/* ============ ПЛАНШЕТ 769–1100px: левый бар остаётся, правая колонка уходит вниз ============ */
@media (min-width:769px) and (max-width:1100px){
/* бар 83px: wordmark не влезает — оставляем только эмблему, по центру */
.global-nav > .global-logo{
display:flex!important;
justify-content:center!important;
width:100%!important;
margin:0!important;
padding:0!important;
}
.global-logo .workspace-wordmark{display:none!important}
.global-logo .workspace-emblem{margin:0!important}
/* отступы центральной колонки — как у верхнего бара на этой ширине (28px) */
.home-dashboard{padding-inline:28px!important;max-width:100%!important}
.home-workspace{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
.home-workspace::after{display:none!important}
.home-main-column{padding:0}
.home-side{
position:static!important;top:auto!important;
display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px!important;padding:0 0 8px!important;
align-content:start;border:0
}
.home-side>section{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:16px!important;padding:18px!important}
/* «Быстрые действия» и «Рабочая панель» — в одной строке, «Токены» — во всю ширину */
.home-quick{align-self:start}
.home-platform-note{align-self:start}
.home-market-watch{grid-column:1/-1}
.home-quick-grid>a,.home-quick-grid>button{min-height:66px}
.home-balance-card{min-height:0}
.home-asset-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* ============ МОБИЛЬНЫЙ <=768px: только нижний бар, правая колонка вниз ============ */
@media (max-width:768px){
/* отступы как у верхнего бара на мобильном (22px) */
.home-dashboard{padding-inline:22px!important;max-width:100%!important}
.home-workspace{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
.home-workspace::after{display:none!important}
.home-main-column{padding:0}
.home-side{position:static!important;top:auto!important;display:grid!important;
grid-template-columns:minmax(0,1fr)!important;gap:14px!important;padding:0 0 4px!important;border:0}
.home-side>section{background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:16px!important;padding:16px!important}
.home-balance-card{border-radius:18px}
.home-balance-intro h2{font-size:clamp(26px,8vw,34px)!important}
/* нижняя навигация — единственное меню */
.workspace-bottom-nav{display:flex!important}
.global-nav{z-index:1300}
}
/* --- примерка: frame-fix --- */
@media (min-width:1101px){.top-bar>.global-logo{flex-direction:row!important;align-items:center!important;gap:10px!important;height:100%!important;padding-inline:0 0!important}.top-bar>.global-logo .workspace-emblem{flex:0 0 auto!important}.top-bar>.global-logo .workspace-wordmark{display:flex!important;align-items:center!important;line-height:1!important}.global-layout>.global-nav{width:220px!important;min-width:220px!important;max-width:220px!important}}@media (max-width:1100px){.global-nav>.global-logo{flex-direction:row!important;align-items:center!important;gap:10px!important}}
.global-logo .workspace-wordmark { transform: translateY(3px); }
/* --- Aurora Glass --- */
/* ===== Общая структура для всех трёх вариантов + переключатель 1·2·3 ===== */
html.rv-home .global-layout .home-workspace{display:block!important;min-height:0!important}
html.rv-home .global-layout .home-side{display:none!important}
html.rv-home .global-layout .home-main-column{padding:0!important;margin:0 auto!important;display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch;min-width:0}
html.rv-home .global-layout .home-main-column>*{min-width:0}
html.rv-home .global-layout .home-balance-card,html.rv-home .global-layout .home-assets-section{grid-column:1/-1}
html.rv-home .global-layout .home-balance-intro{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important;padding:0!important}
html.rv-home .global-layout .home-section-heading p{display:none!important}
html.rv-home .rv-amount{display:flex;align-items:baseline;max-width:100%}
html.rv-home .global-layout .rv-actions>*{text-decoration:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.rv-home .global-layout .rv-actions>* span{white-space:nowrap}
html.rv-home .global-layout .home-asset-action::after{content:"";position:absolute;inset:0}
html.rv-home .global-layout .home-asset{position:relative;cursor:pointer}
html.rv-home .global-layout .home-asset:has(.home-asset-action:focus-visible){outline:2px solid currentColor;outline-offset:3px}
html.rv-home .global-layout .home-asset-action:focus-visible{outline:0!important}
html.rv-home .global-layout .home-activity-list{border-top:0!important}
html.rv-home .global-layout .home-operation{position:relative}
html.rv-home .global-layout .home-market-row .preview-graph{flex:0 0 100%!important;width:100%!important;padding:0!important}
@media (min-width:1101px){
html.rv-home .global-layout .home-activity{grid-column:span 8}
html.rv-home .global-layout .home-market-watch{grid-column:span 4}
}
@media (max-width:1100px){
html.rv-home .global-layout .home-activity,html.rv-home .global-layout .home-market-watch{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){html.rv-home *{animation:none!important;transition:none!important}}
/* ===== Вариант 1 · Aurora Glass: каркас (rv-app) + главная (rv-home) ===== */
@keyframes rvIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rvPulse{0%,100%{box-shadow:0 0 0 0 rgba(211,247,120,.5)}50%{box-shadow:0 0 0 6px rgba(211,247,120,0)}}
html.rv-app.rv-d1{--rv-bg:#07080b;
--rv-glass:rgba(255,255,255,.04);
--rv-glass-2:rgba(255,255,255,.065);
--rv-glass-hover:rgba(255,255,255,.10);
--rv-line:rgba(255,255,255,.085);
--rv-line-soft:rgba(255,255,255,.055);
--rv-text:#f7f8fa;
--rv-text-2:rgba(236,239,245,.64);
--rv-text-3:rgba(236,239,245,.40);
--rv-lime:#d3f778; --rv-lime-rgb:211,247,120;
--rv-gold-rgb:226,186,110; --rv-silver-rgb:184,194,210;
--rv-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
--rv-ease:cubic-bezier(.22,1,.36,1);
--rv-r:24px; --rv-r-in:18px;
--rv-blur:saturate(160%) blur(24px);
--rv-surface:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
--rv-chrome:rgba(20,22,27,.58);
--rv-ring:inset 0 0 0 1px var(--rv-line),inset 0 1px 0 rgba(255,255,255,.06);
--rv-lift:0 24px 48px -16px rgba(0,0,0,.55);
--rv-lift-hover:0 36px 64px -20px rgba(0,0,0,.65);}
html.rv-app.rv-d1 .global-layout{background:var(--rv-bg)!important;font-family:var(--rv-font)!important;font-feature-settings:"cv11","calt";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--rv-text)}
html.rv-app.rv-d1 .global-layout::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(42% 38% at 56% -8%,rgba(var(--rv-lime-rgb),.17),transparent 70%),
radial-gradient(70% 55% at 50% 120%,rgba(255,255,255,.04),transparent 70%)}
html.rv-app.rv-d1 .global-layout::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,")}
html.rv-app.rv-d1 .global-layout .global-content{background:transparent!important}
html.rv-app.rv-d1 .global-layout .top-bar,
html.rv-app.rv-d1 .global-layout .global-nav,
html.rv-app.rv-d1 .workspace-bottom-nav{background:var(--rv-chrome)!important;backdrop-filter:var(--rv-blur);-webkit-backdrop-filter:var(--rv-blur);border:0!important;box-shadow:var(--rv-ring),0 16px 40px -16px rgba(0,0,0,.7)!important}
html.rv-app.rv-d1 .global-layout .workspace-breadcrumb a,html.rv-app.rv-d1 .global-layout .workspace-breadcrumb b{color:var(--rv-text-3)!important}
html.rv-app.rv-d1 .global-layout #workspacePageTitle{font-weight:600;color:var(--rv-text)!important}
html.rv-app.rv-d1 .global-layout #topBarUser{gap:8px!important;padding:6px 12px 6px 8px!important;border-radius:999px!important;background:var(--rv-glass);box-shadow:inset 0 0 0 1px var(--rv-line-soft);transition:background .2s var(--rv-ease)}
html.rv-app.rv-d1 .global-layout #topBarUser:hover{background:var(--rv-glass-hover)!important}
html.rv-app.rv-d1 .global-layout #topBarUser i{color:var(--rv-text-2)!important}
html.rv-app.rv-d1 .global-layout .top-bar-coins{font-family:var(--rv-font)!important;font-weight:600!important;color:var(--rv-text)!important;gap:6px!important;margin-left:2px!important;padding-left:10px;border-left:1px solid var(--rv-line)}
html.rv-app.rv-d1 .global-layout .top-bar-coins i{color:var(--rv-lime)!important}
html.rv-app.rv-d1 .global-layout #topBarCoins{font-weight:600!important;color:var(--rv-text)!important;font-variant-numeric:tabular-nums}
html.rv-app.rv-d1 .global-layout #topBarChat{border-radius:50%!important;background:var(--rv-glass);box-shadow:inset 0 0 0 1px var(--rv-line-soft);color:var(--rv-text-2)!important;transition:background .2s var(--rv-ease)}
html.rv-app.rv-d1 .global-layout #topBarChat:hover{background:var(--rv-glass-hover)!important;color:var(--rv-text)!important}
html.rv-app.rv-d1 .global-layout .nav-badge{background:var(--rv-lime)!important;color:#11180a!important;border:0!important;box-shadow:0 0 0 2px rgba(10,11,14,.9)}
html.rv-app.rv-d1 .global-layout .nav-item{transition:background .2s var(--rv-ease),color .2s var(--rv-ease)}
html.rv-app.rv-d1 .global-layout .global-nav .nav-item:not(.active){color:var(--rv-text-2)!important;background:transparent!important}
html.rv-app.rv-d1 .global-layout .global-nav .nav-item:not(.active):hover{background:var(--rv-glass-hover)!important;color:var(--rv-text)!important}
html.rv-app.rv-d1 .global-layout .nav-item.active{background:rgba(var(--rv-lime-rgb),.13)!important;color:var(--rv-lime)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-lime-rgb),.16)}
html.rv-app.rv-d1 .global-layout .nav-section-label{color:var(--rv-text-3)!important}
html.rv-home.rv-d1 .global-layout .home-workspace{display:block!important;min-height:0!important}
html.rv-home.rv-d1 .global-layout .home-side{display:none!important}
html.rv-home.rv-d1 .global-layout .home-main-column{max-width:1200px;margin:0 auto!important;padding:0!important;display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch}
html.rv-home.rv-d1 .global-layout .home-balance-card,
html.rv-home.rv-d1 .global-layout .home-assets-section{grid-column:1/-1}
html.rv-home.rv-d1 .global-layout .home-assets-section{margin:16px 0 0!important}
html.rv-home.rv-d1 .global-layout .home-balance-card{position:relative;isolation:isolate;display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:0!important;
min-height:0!important;margin:0!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
html.rv-home.rv-d1 .global-layout .home-balance-card::before{content:"";position:absolute;left:50%;top:24px;width:min(760px,100%);height:300px;transform:translateX(-50%);z-index:-1;pointer-events:none;
background:radial-gradient(50% 50% at 50% 50%,rgba(var(--rv-lime-rgb),.13),transparent 72%);filter:blur(24px);border:0;opacity:1}
html.rv-home.rv-d1 .global-layout .home-balance-card::after{display:none!important}
html.rv-home.rv-d1 .global-layout .home-balance-intro{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important;padding:0!important}
html.rv-home.rv-d1 .rv-greet{display:inline-flex;align-items:center;gap:10px;margin:0 0 12px;font-size:15px;line-height:20px;font-weight:500;color:var(--rv-text-2)}
html.rv-home.rv-d1 .rv-greet::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rv-lime);animation:rvPulse 2.4s ease-in-out infinite}
html.rv-home.rv-d1 .rv-amount{display:flex;align-items:baseline;justify-content:center;gap:.12em;line-height:1;max-width:100%}
html.rv-home.rv-d1 .rv-num{font-size:112px;font-weight:600;letter-spacing:-.055em;line-height:1.04;font-variant-numeric:tabular-nums;
background:linear-gradient(180deg,#ffffff 35%,rgba(255,255,255,.58));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .04em 4px 0}
html.rv-home.rv-d1 .rv-unit{font-size:32px;font-weight:600;letter-spacing:-.02em;color:var(--rv-text-3)}
html.rv-home.rv-d1 .global-layout .home-balance-breakdown{display:flex!important;flex-wrap:wrap;justify-content:center;gap:8px!important;margin:24px 0 0!important;padding:0!important;border:0!important}
html.rv-home.rv-d1 .global-layout .home-balance-breakdown>div{display:flex!important;align-items:center;gap:8px!important;padding:8px 16px;border-radius:999px;background:var(--rv-glass);box-shadow:inset 0 0 0 1px var(--rv-line);backdrop-filter:var(--rv-blur);-webkit-backdrop-filter:var(--rv-blur)}
html.rv-home.rv-d1 .global-layout .home-balance-breakdown dt{font-size:13px!important;line-height:18px!important;color:var(--rv-text-2)!important}
html.rv-home.rv-d1 .global-layout .home-balance-breakdown dd{font-size:13px!important;line-height:18px!important;font-weight:600!important;color:var(--rv-text)!important;font-variant-numeric:tabular-nums}
html.rv-home.rv-d1 .rv-actions{display:flex;justify-content:center;gap:28px;margin-top:40px}
html.rv-home.rv-d1 .global-layout .rv-actions>*{display:grid!important;justify-items:center;align-content:start;gap:10px!important;width:76px;min-width:0!important;min-height:0!important;height:auto!important;
padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
color:var(--rv-text-2)!important;font:500 13px/18px var(--rv-font)!important;letter-spacing:0!important;text-decoration:none!important;cursor:pointer;transform:none!important;transition:color .2s var(--rv-ease);-webkit-tap-highlight-color:transparent}
html.rv-home.rv-d1 .global-layout .rv-actions>* i{display:grid!important;place-items:center;width:60px!important;height:60px!important;margin:0!important;border-radius:50%;font-size:19px!important;line-height:1!important;
color:var(--rv-text)!important;background:var(--rv-glass-2);box-shadow:var(--rv-ring),0 10px 24px -8px rgba(0,0,0,.55);
backdrop-filter:var(--rv-blur);-webkit-backdrop-filter:var(--rv-blur);transition:transform .3s var(--rv-ease),background .2s var(--rv-ease)}
html.rv-home.rv-d1 .global-layout .rv-actions>* span{white-space:nowrap;line-height:inherit!important}
html.rv-home.rv-d1 .global-layout .rv-actions>*:hover{color:var(--rv-text)!important}
html.rv-home.rv-d1 .global-layout .rv-actions>*:hover i{transform:translateY(-3px);background:var(--rv-glass-hover)}
html.rv-home.rv-d1 .global-layout .rv-actions>*:active i{transform:scale(.92);transition-duration:.08s}
html.rv-home.rv-d1 .global-layout .rv-actions>.home-wallet-link{color:var(--rv-text)!important}
html.rv-home.rv-d1 .global-layout .rv-actions>.home-wallet-link i{background:var(--rv-lime);color:#11180a!important;box-shadow:0 12px 32px -8px rgba(var(--rv-lime-rgb),.5),inset 0 1px 0 rgba(255,255,255,.55)}
html.rv-home.rv-d1 .global-layout .rv-actions>.home-wallet-link:hover i{background:#e1fa98}
html.rv-home.rv-d1 .global-layout .home-section-heading{margin:0 0 16px!important;min-height:0}
html.rv-home.rv-d1 .global-layout .home-section-heading p{display:none!important}
html.rv-home.rv-d1 .global-layout .home-section-heading h2,html.rv-home.rv-d1 .global-layout .home-side-heading h2{font-size:20px!important;line-height:28px!important;font-weight:600!important;letter-spacing:-.025em!important;color:var(--rv-text)!important}
html.rv-home.rv-d1 .global-layout .home-assets-swipe-hint{color:var(--rv-text-3)!important}
html.rv-home.rv-d1 .global-layout .home-assets-swipe-hint i,html.rv-home.rv-d1 .global-layout .home-assets-swipe-hint span{color:var(--rv-text-2)!important}
html.rv-home.rv-d1 .global-layout .home-asset,
html.rv-home.rv-d1 .global-layout .home-activity,
html.rv-home.rv-d1 .global-layout .home-market-watch{position:relative;border:0!important;border-radius:var(--rv-r)!important;
background:radial-gradient(420px circle at var(--mx,-600px) var(--my,-600px),rgba(255,255,255,.06),transparent 42%),var(--rv-surface)!important;
box-shadow:var(--rv-ring),var(--rv-lift)!important;backdrop-filter:var(--rv-blur);-webkit-backdrop-filter:var(--rv-blur)}
html.rv-home.rv-d1 .global-layout .home-asset-grid{margin:0!important}
html.rv-home.rv-d1 .global-layout .home-asset{--tint:var(--rv-lime-rgb);display:flex!important;flex-direction:column;padding:24px!important;overflow:hidden;cursor:pointer;
background:radial-gradient(420px circle at var(--mx,-600px) var(--my,-600px),rgba(255,255,255,.06),transparent 42%),
radial-gradient(90% 70% at 100% 0%,rgba(var(--tint),.09),transparent 60%),var(--rv-surface)!important;
transition:transform .4s var(--rv-ease),box-shadow .4s var(--rv-ease)}
html.rv-home.rv-d1 .global-layout .home-asset-gold{--tint:var(--rv-gold-rgb)}
html.rv-home.rv-d1 .global-layout .home-asset-silver{--tint:var(--rv-silver-rgb)}
html.rv-home.rv-d1 .global-layout .home-asset:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.08),var(--rv-lift-hover)!important}
html.rv-home.rv-d1 .global-layout .home-asset:active{transform:translateY(-1px) scale(.995)}
html.rv-home.rv-d1 .global-layout .home-asset-head{display:flex!important;align-items:center;gap:12px!important;min-height:44px;font-size:16px!important;font-weight:600!important;letter-spacing:-.01em;color:var(--rv-text)!important}
html.rv-home.rv-d1 .global-layout .home-coin{flex:0 0 44px!important;width:44px!important;height:44px!important;border-radius:50%!important;background:transparent!important;box-shadow:0 8px 20px -6px rgba(0,0,0,.6)}
html.rv-home.rv-d1 .global-layout .home-coin svg{width:100%;height:100%}
html.rv-home.rv-d1 .global-layout .home-asset-action{position:static!important;display:grid!important;place-items:center;width:36px!important;height:36px!important;min-width:0!important;min-height:0!important;margin:0 0 0 auto!important;border-radius:50%!important;
background:var(--rv-glass-2);color:var(--rv-text-2)!important;font-size:12px!important;transition:background .2s var(--rv-ease),color .2s,transform .3s var(--rv-ease)}
html.rv-home.rv-d1 .global-layout .home-asset-action::after{content:"";position:absolute;inset:0;border-radius:var(--rv-r)}
html.rv-home.rv-d1 .global-layout .home-asset:hover .home-asset-action{background:var(--rv-glass-hover);color:var(--rv-text)!important;transform:translate(1px,-1px)}
html.rv-home.rv-d1 .global-layout .home-asset:has(.home-asset-action:focus-visible){outline:2px solid var(--rv-lime);outline-offset:3px}
html.rv-home.rv-d1 .global-layout .home-asset-action:focus-visible{outline:0!important}
html.rv-home.rv-d1 .global-layout .home-asset>strong{margin:32px 0 0!important;font-size:44px!important;line-height:48px!important;font-weight:600!important;letter-spacing:-.045em!important;color:var(--rv-text)!important;font-variant-numeric:tabular-nums}
html.rv-home.rv-d1 .global-layout .home-asset>small{margin:6px 0 16px!important;font-size:14px!important;line-height:20px!important;color:var(--rv-text-2)!important}
html.rv-home.rv-d1 .global-layout .home-meter{height:6px!important;margin:auto 0 0!important;border-radius:3px!important;background:rgba(255,255,255,.08)!important;overflow:visible!important}
html.rv-home.rv-d1 .global-layout .home-meter>b{height:100%;border-radius:3px!important;background:linear-gradient(90deg,rgba(var(--tint),.55),rgb(var(--tint)))!important;box-shadow:0 0 12px rgba(var(--tint),.35)}
html.rv-home.rv-d1 .global-layout .home-asset>footer{margin-top:14px!important;display:flex!important;justify-content:space-between;gap:12px;font-size:13px!important;line-height:18px!important;color:var(--rv-text-2)!important}
html.rv-home.rv-d1 .global-layout .home-asset>footer b{font-weight:600!important;color:var(--rv-text)!important;font-variant-numeric:tabular-nums}
html.rv-home.rv-d1 .global-layout .home-activity{display:flex!important;flex-direction:column;padding:24px 24px 10px!important;margin:0!important}
html.rv-home.rv-d1 .global-layout .home-activity .home-section-heading{display:flex!important;align-items:center;justify-content:space-between;min-height:36px;margin:0 0 8px!important}
html.rv-app.rv-d1 .global-layout #homeHistoryLink{display:inline-flex!important;align-items:center;gap:6px;padding:8px 14px!important;border-radius:999px;background:var(--rv-glass-2);box-shadow:inset 0 0 0 1px var(--rv-line-soft);
color:var(--rv-text)!important;font-size:13px!important;line-height:20px!important;font-weight:500!important;transition:background .2s var(--rv-ease)}
html.rv-app.rv-d1 .global-layout #homeHistoryLink::after{content:"\2192";transition:transform .25s var(--rv-ease)}
html.rv-app.rv-d1 .global-layout #homeHistoryLink:hover{background:var(--rv-glass-hover)}
html.rv-app.rv-d1 .global-layout #homeHistoryLink:hover::after{transform:translateX(3px)}
html.rv-home.rv-d1 .global-layout .home-activity-list{flex:1 1 auto;display:flex!important;flex-direction:column;border-top:0!important}
html.rv-home.rv-d1 .global-layout .home-activity-list>.home-operation{flex:1 1 auto}
html.rv-home.rv-d1 .global-layout .home-operation{position:relative;padding:14px 0!important;gap:16px!important;border:0!important;align-items:center}
html.rv-home.rv-d1 .global-layout .home-operation+.home-operation::before{content:"";position:absolute;top:0;left:60px;right:0;height:1px;background:var(--rv-line-soft)}
html.rv-home.rv-d1 .global-layout .home-operation>i{flex:0 0 44px;width:44px!important;height:44px!important;border-radius:50%!important;font-size:16px!important;
background:var(--rv-glass-2)!important;color:var(--rv-text)!important;box-shadow:var(--rv-ring)}
html.rv-home.rv-d1 .global-layout .home-operation>div{gap:2px!important;min-width:0}
html.rv-home.rv-d1 .global-layout .home-operation b{font-size:15px!important;line-height:20px!important;font-weight:600!important;letter-spacing:-.01em;color:var(--rv-text)!important}
html.rv-home.rv-d1 .global-layout .home-operation span{font-size:13px!important;line-height:18px!important;color:var(--rv-text-2)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.rv-home.rv-d1 .global-layout .home-operation>strong{font-size:15px!important;line-height:20px!important;font-weight:600!important;white-space:nowrap;color:var(--rv-text)!important;font-variant-numeric:tabular-nums}
html.rv-home.rv-d1 .global-layout .home-market-watch{display:flex!important;flex-direction:column;gap:12px!important;padding:24px!important;margin:0!important}
html.rv-home.rv-d1 .global-layout .home-market-watch .home-side-heading{display:flex!important;align-items:center;justify-content:space-between;min-height:36px;margin:0 0 4px!important}
html.rv-home.rv-d1 .global-layout .home-market-watch .home-side-heading>a{display:grid!important;place-items:center;width:36px!important;height:36px!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border-radius:50%;
background:var(--rv-glass-2);box-shadow:inset 0 0 0 1px var(--rv-line-soft);color:var(--rv-text-2)!important;font-size:13px!important;transition:background .2s var(--rv-ease)}
html.rv-home.rv-d1 .global-layout .home-market-watch .home-side-heading>a:hover{background:var(--rv-glass-hover);color:var(--rv-text)!important}
html.rv-home.rv-d1 .global-layout .home-market-row{--tint:var(--rv-lime-rgb);position:relative!important;flex:1 1 auto;display:flex!important;flex-wrap:wrap;align-items:center;align-content:space-between;gap:8px 12px!important;
padding:16px!important;margin:0!important;border:0!important;border-radius:var(--rv-r-in)!important;
background:var(--rv-glass)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important;
transition:transform .35s var(--rv-ease),box-shadow .35s var(--rv-ease),background .2s}
html.rv-home.rv-d1 .global-layout .home-market-row[href$='/GOLD']{--tint:var(--rv-gold-rgb)}
html.rv-home.rv-d1 .global-layout .home-market-row[href$='/SILVER']{--tint:var(--rv-silver-rgb)}
html.rv-home.rv-d1 .global-layout .home-market-row:hover{transform:translateY(-2px);background:var(--rv-glass-2)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 40px -18px rgba(0,0,0,.7)!important}
html.rv-home.rv-d1 .global-layout .home-market-symbol{flex:0 0 40px!important;width:40px!important;height:40px!important;border-radius:50%!important;background:transparent!important}
html.rv-home.rv-d1 .global-layout .home-market-symbol svg{width:100%;height:100%}
html.rv-home.rv-d1 .global-layout .home-market-data{flex:1 1 0!important;min-width:0;gap:2px!important}
html.rv-home.rv-d1 .global-layout .home-market-data b{font-size:13px!important;line-height:18px!important;font-weight:600!important;color:var(--rv-text)!important}
html.rv-home.rv-d1 .global-layout .home-market-data b small{color:var(--rv-text-3)!important}
html.rv-home.rv-d1 .global-layout .home-market-data strong{font-size:20px!important;line-height:24px!important;font-weight:600!important;letter-spacing:-.025em;color:var(--rv-text)!important;font-variant-numeric:tabular-nums}
html.rv-home.rv-d1 .global-layout .home-market-data>small{font-size:12px!important;line-height:16px!important;color:var(--rv-text-2)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.rv-home.rv-d1 .global-layout .home-market-row>.fa-chevron-right{flex:0 0 auto;color:var(--rv-text-3)!important;transition:transform .3s var(--rv-ease),color .2s}
html.rv-home.rv-d1 .global-layout .home-market-row:hover>.fa-chevron-right{transform:translateX(3px);color:var(--rv-text)!important}
html.rv-home.rv-d1 .global-layout .home-market-row .preview-graph{flex:0 0 100%!important;width:100%!important;padding:0!important}
html.rv-home.rv-d1 .global-layout .home-market-row .preview-chart{height:40px!important;margin:0!important;gap:3px!important;border-bottom:1px solid var(--rv-line-soft)!important}
html.rv-home.rv-d1 .global-layout .home-market-row .preview-chart i{border-radius:3px 3px 0 0!important;opacity:1!important;background:linear-gradient(180deg,rgba(var(--tint),.9),rgba(var(--tint),.3))!important}
html.rv-home.rv-d1 .global-layout .home-market-row .preview-chart i[style*='opacity: 0.35']{background:rgba(255,255,255,.12)!important}
html.rv-home.rv-d1 .global-layout .home-market-row .preview-chart-caption{color:var(--rv-text-3)!important}
html.rv-app.rv-d1 .global-layout .footer{margin:0!important;border-top:0!important;background:transparent!important}
html.rv-app.rv-d1 .global-layout .footer>.footer-inner{max-width:1200px!important;margin:0 auto!important;padding:24px 0 0!important;border-top:1px solid var(--rv-line-soft)!important}
html.rv-app.rv-d1 .global-layout .footer-wordmark{font-size:22px!important}
html.rv-app.rv-d1 .global-layout .footer-wordmark .workspace-emblem{width:28px!important;height:28px!important;margin-right:8px!important}
html.rv-app.rv-d1 .global-layout .footer-copy{font-size:12px!important;line-height:16px!important;color:var(--rv-text-3)!important}
html.rv-app.rv-d1 .global-layout a:focus-visible,html.rv-app.rv-d1 .global-layout button:focus-visible{outline:2px solid var(--rv-lime)!important;outline-offset:3px}
html.rv-home.rv-d1.rv-intro .rv-greet{animation:rvIn .8s var(--rv-ease) .00s backwards}
html.rv-home.rv-d1.rv-intro .rv-amount{animation:rvIn .8s var(--rv-ease) .06s backwards}
html.rv-home.rv-d1.rv-intro .home-balance-breakdown{animation:rvIn .8s var(--rv-ease) .12s backwards}
html.rv-home.rv-d1.rv-intro .rv-actions{animation:rvIn .8s var(--rv-ease) .18s backwards}
html.rv-home.rv-d1.rv-intro .home-assets-section{animation:rvIn .9s var(--rv-ease) .26s backwards}
html.rv-home.rv-d1.rv-intro .home-activity{animation:rvIn .9s var(--rv-ease) .34s backwards}
html.rv-home.rv-d1.rv-intro .home-market-watch{animation:rvIn .9s var(--rv-ease) .40s backwards}
@media (min-width:1101px){
html.rv-app.rv-d1 .global-layout>.top-bar{margin:12px 12px 0!important;width:auto!important;height:60px!important;padding:0 12px 0 0!important;border-radius:20px!important}
html.rv-app.rv-d1 .global-layout>.top-bar>.global-logo{flex:0 0 208px!important;width:208px!important;max-width:208px!important;padding-inline:30px!important}
html.rv-app.rv-d1 .global-layout>.top-bar>.workspace-breadcrumb{gap:12px!important;font-size:13px!important}
html.rv-app.rv-d1 .global-layout #topBarChat{width:40px!important;height:40px!important}
html.rv-app.rv-d1 .global-layout .top-bar-coins{font-size:13px!important}
html.rv-app.rv-d1 .global-layout>.global-nav{margin:12px 0 12px 12px!important;width:auto!important;height:auto!important;padding:16px!important;border-radius:var(--rv-r)!important;overflow-y:auto;scrollbar-width:none}
html.rv-app.rv-d1 .global-layout .global-links{gap:0!important}
html.rv-app.rv-d1 .global-layout .nav-section{gap:2px!important}
html.rv-app.rv-d1 .global-layout .nav-section-label{margin:18px 14px 6px!important;font-size:11px!important;line-height:14px!important;font-weight:600!important;letter-spacing:.08em!important}
html.rv-app.rv-d1 .global-layout .nav-section:first-child>.nav-section-label:first-child{margin-top:2px!important}
html.rv-app.rv-d1 .global-layout .nav-section-label-secondary{margin-top:16px!important}
html.rv-app.rv-d1 .global-layout .global-nav .nav-item{min-height:40px!important;padding:0 14px!important;gap:12px!important;border-radius:12px!important;font-size:14px!important;font-weight:500!important}
html.rv-app.rv-d1 .global-layout .global-nav .nav-item.active{font-weight:600!important}
html.rv-app.rv-d1 .global-layout .global-nav .nav-item i{width:20px!important;font-size:15px!important;text-align:center}
html.rv-app.rv-d1 .global-layout #navChatBadge{position:static!important;margin-left:auto!important;min-width:20px;height:20px;padding:0 6px!important;border-radius:10px!important;font-size:11px!important;line-height:20px!important;text-align:center;box-shadow:none}
html.rv-home.rv-d1 .global-layout .home-dashboard{padding:0 40px 32px!important;max-width:none!important;margin:0!important}
html.rv-home.rv-d1 .global-layout .home-activity{grid-column:span 8}
html.rv-home.rv-d1 .global-layout .home-market-watch{grid-column:span 4}
html.rv-home.rv-d1 .global-layout .home-balance-card{padding:56px 0 32px!important}
html.rv-home.rv-d1 .rv-num{font-size:clamp(72px,6vw,112px)}
html.rv-home.rv-d1 .global-layout .home-asset-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important}
html.rv-home.rv-d1 .global-layout .home-asset{min-height:248px!important}
html.rv-app.rv-d1 .global-layout .footer{padding:40px!important}
}
@media (min-width:769px) and (max-width:1100px){
html.rv-app.rv-d1 .global-layout>.global-nav{margin:12px 0 12px 12px!important;flex:0 0 76px!important;width:76px!important;min-width:76px!important;height:auto!important;padding:16px 6px!important;border-radius:var(--rv-r)!important;align-self:stretch}
html.rv-app.rv-d1 .global-layout .global-nav .nav-item{border-radius:14px!important}
html.rv-app.rv-d1 .global-layout .top-bar{margin:12px 12px 0 16px!important;border-radius:20px!important;padding:12px 12px 12px 20px!important;min-height:0!important;height:auto!important;top:12px!important}
html.rv-app.rv-d1 .global-layout #topBarChat{width:38px!important;height:38px!important}
html.rv-home.rv-d1 .global-layout .home-dashboard{padding:0 24px 24px 28px!important;max-width:none!important}
html.rv-home.rv-d1 .global-layout .home-main-column{gap:16px}
html.rv-home.rv-d1 .global-layout .home-balance-card{padding:48px 0 24px!important}
html.rv-home.rv-d1 .rv-num{font-size:clamp(56px,9.5vw,96px)}
html.rv-home.rv-d1 .rv-unit{font-size:26px}
html.rv-home.rv-d1 .rv-actions{gap:20px;margin-top:32px}
html.rv-home.rv-d1 .global-layout .home-assets-section{margin:8px 0 0!important}
html.rv-home.rv-d1 .global-layout .home-asset-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;overflow:visible!important;padding:0!important}
html.rv-home.rv-d1 .global-layout .home-asset{min-height:212px!important;padding:20px!important}
html.rv-home.rv-d1 .global-layout .home-coin{flex-basis:36px!important;width:36px!important;height:36px!important}
html.rv-home.rv-d1 .global-layout .home-asset-head{min-height:36px;font-size:15px!important;gap:10px!important}
html.rv-home.rv-d1 .global-layout .home-asset-action{width:32px!important;height:32px!important}
html.rv-home.rv-d1 .global-layout .home-asset>strong{margin-top:24px!important;font-size:34px!important;line-height:40px!important}
html.rv-home.rv-d1 .global-layout .home-asset>small{font-size:12px!important;line-height:16px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.rv-home.rv-d1 .global-layout .home-asset>footer{font-size:12px!important}
html.rv-home.rv-d1 .global-layout .home-activity,html.rv-home.rv-d1 .global-layout .home-market-watch{grid-column:1/-1}
html.rv-home.rv-d1 .global-layout .home-market-watch{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
html.rv-home.rv-d1 .global-layout .home-market-watch .home-side-heading{grid-column:1/-1}
html.rv-app.rv-d1 .global-layout .footer{padding:32px 24px 32px 28px!important}
}
@media (max-width:768px){
html.rv-app.rv-d1 .global-layout .top-bar{margin:8px 12px 0!important;border-radius:20px!important;padding:8px 8px 8px 16px!important;min-height:0!important;height:auto!important;top:8px!important}
html.rv-app.rv-d1 .global-layout #topBarUser{padding:5px 10px 5px 6px!important}
html.rv-app.rv-d1 .global-layout #topBarChat{width:36px!important;height:36px!important}
html.rv-app.rv-d1 .workspace-bottom-nav{left:12px!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;width:auto!important;padding:6px!important;gap:2px!important;border-radius:28px!important;background:rgba(20,22,27,.72)!important}
html.rv-app.rv-d1 .workspace-bottom-nav>*{border-radius:22px!important;color:var(--rv-text-2)!important;background:transparent!important;font-family:var(--rv-font)!important;font-weight:500!important}
html.rv-app.rv-d1 .workspace-bottom-nav>.active{background:rgba(var(--rv-lime-rgb),.14)!important;color:var(--rv-lime)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-lime-rgb),.16)}
html.rv-app.rv-d1 .global-layout .global-nav{background:rgba(14,16,20,.9)!important;border-radius:0 24px 24px 0!important}
html.rv-home.rv-d1 .global-layout .home-dashboard{padding:0 16px 16px!important;max-width:none!important}
html.rv-home.rv-d1 .global-layout .home-main-column{gap:16px}
html.rv-home.rv-d1 .global-layout .home-balance-card{padding:32px 0 8px!important}
html.rv-home.rv-d1 .rv-greet{font-size:14px;margin-bottom:8px}
html.rv-home.rv-d1 .rv-num{font-size:clamp(46px,15vw,64px)}
html.rv-home.rv-d1 .rv-unit{font-size:20px}
html.rv-home.rv-d1 .global-layout .home-balance-breakdown{margin-top:16px!important;gap:6px!important}
html.rv-home.rv-d1 .global-layout .home-balance-breakdown>div{padding:6px 12px;gap:6px!important}
html.rv-home.rv-d1 .global-layout .home-balance-breakdown dt,html.rv-home.rv-d1 .global-layout .home-balance-breakdown dd{font-size:12px!important;line-height:16px!important}
html.rv-home.rv-d1 .rv-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;margin-top:28px}
html.rv-home.rv-d1 .global-layout .rv-actions>*{width:auto;gap:8px!important;font-size:11.5px!important;line-height:14px!important}
html.rv-home.rv-d1 .global-layout .rv-actions>* i{width:52px!important;height:52px!important;font-size:17px!important}
html.rv-home.rv-d1 .global-layout .home-assets-section{margin:8px 0 0!important;min-width:0}
html.rv-home.rv-d1 .global-layout .home-assets-section .home-section-heading{margin-bottom:8px!important}
html.rv-home.rv-d1 .global-layout .home-asset-grid{display:flex!important;gap:12px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;margin:0 -16px!important;padding:4px 16px 20px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.rv-home.rv-d1 .global-layout .home-asset-grid::-webkit-scrollbar{display:none}
html.rv-home.rv-d1 .global-layout .home-asset{flex:0 0 80%!important;min-height:200px!important;padding:20px!important;scroll-snap-align:center;backdrop-filter:none;-webkit-backdrop-filter:none}
html.rv-home.rv-d1 .global-layout .home-asset:hover{transform:none}
html.rv-home.rv-d1 .global-layout .home-coin{flex-basis:40px!important;width:40px!important;height:40px!important}
html.rv-home.rv-d1 .global-layout .home-asset>strong{margin-top:24px!important;font-size:38px!important;line-height:44px!important}
html.rv-home.rv-d1 .global-layout .home-asset>small{font-size:13px!important;line-height:18px!important}
html.rv-home.rv-d1 .global-layout .home-activity,html.rv-home.rv-d1 .global-layout .home-market-watch{grid-column:1/-1}
html.rv-home.rv-d1 .global-layout .home-activity{padding:20px 16px 6px!important;border-radius:22px!important}
html.rv-home.rv-d1 .global-layout .home-market-watch{padding:20px 16px 16px!important;border-radius:22px!important}
html.rv-home.rv-d1 .global-layout .home-section-heading h2,html.rv-home.rv-d1 .global-layout .home-side-heading h2{font-size:18px!important;line-height:24px!important}
html.rv-home.rv-d1 .global-layout .home-operation{gap:12px!important;padding:12px 0!important}
html.rv-home.rv-d1 .global-layout .home-operation+.home-operation::before{left:52px}
html.rv-home.rv-d1 .global-layout .home-operation>i{flex-basis:40px;width:40px!important;height:40px!important;font-size:15px!important}
html.rv-home.rv-d1 .global-layout .home-operation b,html.rv-home.rv-d1 .global-layout .home-operation>strong{font-size:14px!important}
html.rv-home.rv-d1 .global-layout .home-operation span{font-size:12px!important;line-height:16px!important}
html.rv-app.rv-d1 .global-layout .footer{padding:24px 16px calc(104px + env(safe-area-inset-bottom))!important}
html.rv-app.rv-d1 .global-layout .footer>.footer-inner{gap:12px!important}
}
@media (prefers-reduced-motion:reduce){
html.rv-app.rv-d1 *{animation:none!important;transition:none!important}
}
/* =====================================================================
Aurora Glass · все страницы (html.rv-app.rv-d1)
1) переменные сайта → палитра Aurora (перекрашивает всё неучтённое);
2) материал компонентов: стеклянные карточки, кнопки-«пилюли», поля, вкладки.
===================================================================== */
html.rv-app.rv-d1{
--bg:#07080b; --bg-main:#07080b; --bg-color:#07080b;
--panel:#121419; --bg-elevated:#121419; --card-bg:#121419; --light-color:#121419; --white:#121419;
--card-bg-hover:#1a1d23;
--line:rgba(255,255,255,.085); --border:rgba(255,255,255,.085); --border-color:rgba(255,255,255,.085); --light-gray:rgba(255,255,255,.085); --grid-65:rgba(255,255,255,.055);
--muted:#9a9da6; --text-muted:#9a9da6; --gray-color:#9a9da6; --muted-35:rgba(154,157,166,.35);
--text:#f7f8fa; --text-main:#f7f8fa; --dark-color:#f7f8fa;
--surface-55:rgba(18,20,25,.55); --surface-80:rgba(18,20,25,.8); --surface-96:rgba(18,20,25,.96);
--rv-red:#ff6b81; --rv-red-rgb:255,107,129;
color-scheme:dark;
}
html.rv-app.rv-d1 body{background:#07080b!important}
html.rv-app.rv-d1 .app-page :is(button,input,select,textarea){font-family:var(--rv-font)!important}
html.rv-app.rv-d1 .app-page option{background:#121419;color:#f7f8fa}
/* ---------- ширина колонки = как на главной (1200) ---------- */
@media (min-width:1101px){
html.rv-app.rv-d1 .app-page .container:not(.home-dashboard){max-width:1280px!important;padding-left:40px!important;padding-right:40px!important}
}
@media (min-width:769px) and (max-width:1100px){
html.rv-app.rv-d1 .app-page .container:not(.home-dashboard){max-width:none!important;padding-left:28px!important;padding-right:24px!important}
}
@media (max-width:768px){
html.rv-app.rv-d1 .app-page .container:not(.home-dashboard){padding-left:16px!important;padding-right:16px!important}
}
html.rv-app.rv-d1 .app-page .page-body{padding-bottom:48px!important}
html.rv-app.rv-d1 .app-page>.page-body:first-child{padding-top:48px!important}
/* ---------- заголовки страниц ---------- */
html.rv-app.rv-d1 .app-page .page-header{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
html.rv-app.rv-d1 .app-page .page-header>.container{padding-top:48px!important;padding-bottom:32px!important}
html.rv-app.rv-d1 .app-page h1:not(.visually-hidden){font-family:var(--rv-font)!important;font-size:40px!important;line-height:48px!important;font-weight:600!important;letter-spacing:-.035em!important;color:var(--rv-text)!important;margin:0 0 8px!important}
html.rv-app.rv-d1 .app-page :is(.page-header p,.exchange-heading p,.support-page>p){font-size:15px!important;line-height:22px!important;color:var(--rv-text-2)!important;margin:0!important;max-width:680px}
html.rv-app.rv-d1 .app-page .highlight{background:linear-gradient(180deg,#f2ffc9 0%,var(--rv-lime) 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;color:transparent!important;padding:0!important;box-shadow:none!important}
html.rv-app.rv-d1 .app-page :is(h2,h3){font-family:var(--rv-font)!important;letter-spacing:-.022em!important;color:var(--rv-text)!important}
html.rv-app.rv-d1 .app-page .exchange-heading{margin-bottom:24px!important}
html.rv-app.rv-d1 .app-page .support-page>.btn{margin-top:24px}
/* ---------- материал: большие стеклянные карточки ---------- */
html.rv-app.rv-d1 .app-page :is(.profile-header,.action-card,.passkey-recommendation,.market-token-card,.transactions-list,.exchange-line,.philosophy-card,.economy-step,.feature-block,.guide-step,details.market-spoiler,aside.tv-col-book){
border:0!important;border-radius:var(--rv-r)!important;color:var(--rv-text)!important;
background:radial-gradient(520px circle at var(--mx,-800px) var(--my,-800px),rgba(255,255,255,.05),transparent 42%),var(--rv-surface)!important;
box-shadow:var(--rv-ring),var(--rv-lift)!important;-webkit-backdrop-filter:var(--rv-blur);backdrop-filter:var(--rv-blur)}
html.rv-app.rv-d1 .app-page :is(.exchange-line,.transactions-list,details.market-spoiler,aside.tv-col-book){overflow:hidden}
html.rv-app.rv-d1 .app-page .exchange-line{border-radius:var(--rv-r-in)!important;box-shadow:var(--rv-ring)!important}
html.rv-app.rv-d1 .app-page :is(.action-card,.philosophy-card,.economy-step,.guide-step){padding:28px!important}
/* вложенные поверхности */
html.rv-app.rv-d1 .app-page :is(.stat-box,.tier-card,.tech-item,.tv-wallet){border:0!important;border-radius:var(--rv-r-in)!important;background:var(--rv-glass)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important;color:var(--rv-text)!important}
html.rv-app.rv-d1 .app-page .tier-card{transition:box-shadow .3s var(--rv-ease),background .3s}
html.rv-app.rv-d1 .app-page .tier-card.tier-card-current{background:linear-gradient(135deg,rgba(var(--rv-lime-rgb),.10),rgba(var(--rv-lime-rgb),.03))!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-lime-rgb),.38),0 0 40px -18px rgba(var(--rv-lime-rgb),.55)!important}
html.rv-app.rv-d1 .app-page .stat-box strong,html.rv-app.rv-d1 .app-page .stat-box .stat-value{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
/* ---------- кабинет ---------- */
html.rv-app.rv-d1 #page-cabinet .profile-header{position:relative;isolation:isolate;overflow:hidden;
background:radial-gradient(520px circle at var(--mx,-800px) var(--my,-800px),rgba(255,255,255,.05),transparent 42%),
radial-gradient(70% 140% at 0% 0%,rgba(var(--rv-lime-rgb),.10),transparent 60%),var(--rv-surface)!important}
html.rv-app.rv-d1 #page-cabinet .user-avatar{box-shadow:var(--rv-ring),0 0 0 4px rgba(var(--rv-lime-rgb),.10)!important}
html.rv-app.rv-d1 .app-page .stat-pill{background:var(--rv-glass-2)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important;border:0!important;color:var(--rv-text)!important}
html.rv-app.rv-d1 .app-page .premium-until{background:rgba(var(--rv-lime-rgb),.10)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-lime-rgb),.22)!important;border:0!important;color:var(--rv-lime)!important}
html.rv-app.rv-d1 #page-cabinet .cabinet-tabs{gap:8px!important;flex-wrap:wrap}
html.rv-app.rv-d1 #page-cabinet .passkey-recommendation{padding:20px 24px!important}
/* ---------- иконки и аватары: стеклянные круги ---------- */
html.rv-app.rv-d1 .app-page :is(.card-icon,.act-icon,.market-token-icon,.mentor-avatar,.user-avatar,.chat-avatar){border:0!important;border-radius:50%!important;background:var(--rv-glass-2)!important;box-shadow:var(--rv-ring)!important;color:var(--rv-text)!important}
html.rv-app.rv-d1 .app-page .card-icon{width:44px!important;height:44px!important;display:grid!important;place-items:center}
html.rv-app.rv-d1 .app-page :is(.card-icon,.market-token-icon) i{color:var(--rv-lime)!important}
html.rv-app.rv-d1 .app-page .market-token-gold .market-token-icon{background:rgba(var(--rv-gold-rgb),.13)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-gold-rgb),.22)!important}
html.rv-app.rv-d1 .app-page .market-token-gold .market-token-icon i{color:#f0cf87!important}
html.rv-app.rv-d1 .app-page .market-token-silver .market-token-icon{background:rgba(var(--rv-silver-rgb),.12)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-silver-rgb),.22)!important}
html.rv-app.rv-d1 .app-page .market-token-silver .market-token-icon i{color:#dfe5ee!important}
html.rv-app.rv-d1 .app-page .chat-avatar-group{background:rgba(var(--rv-lime-rgb),.10)!important;color:var(--rv-lime)!important}
/* ---------- кнопки ---------- */
html.rv-app.rv-d1 .app-page .btn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px!important;border:0!important;border-radius:999px!important;
font:600 14px/20px var(--rv-font)!important;letter-spacing:0!important;text-decoration:none!important;cursor:pointer;
background:var(--rv-glass-2)!important;color:var(--rv-text)!important;box-shadow:inset 0 0 0 1px var(--rv-line)!important;
transition:background .2s var(--rv-ease),box-shadow .2s var(--rv-ease),transform .2s var(--rv-ease),color .2s}
html.rv-app.rv-d1 .app-page .btn:hover{background:var(--rv-glass-hover)!important;transform:translateY(-1px)}
html.rv-app.rv-d1 .app-page .btn:active{transform:scale(.97);transition-duration:.08s}
html.rv-app.rv-d1 .app-page :is(.btn-primary,.btn-warning,.tier-btn-current,.tv-btn-buy){background:var(--rv-lime)!important;color:#11180a!important;box-shadow:0 10px 28px -10px rgba(var(--rv-lime-rgb),.6),inset 0 1px 0 rgba(255,255,255,.5)!important}
html.rv-app.rv-d1 .app-page :is(.btn-primary,.btn-warning,.tier-btn-current,.tv-btn-buy):hover{background:#e1fa98!important}
html.rv-app.rv-d1 .app-page :is(.btn-danger,.tv-btn-sell){background:rgba(var(--rv-red-rgb),.08)!important;color:var(--rv-red)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-red-rgb),.35)!important}
html.rv-app.rv-d1 .app-page :is(.btn-danger,.tv-btn-sell):hover{background:rgba(var(--rv-red-rgb),.16)!important}
html.rv-app.rv-d1 .app-page .tier-btn-active{background:var(--rv-glass)!important;color:var(--rv-text-2)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important}
html.rv-app.rv-d1 .app-page .btn-block{width:100%!important}
html.rv-app.rv-d1 .app-page :is(.btn,.tv-btn):disabled{opacity:.5;cursor:default;transform:none!important}
html.rv-app.rv-d1 .app-page .tv-btn{border:0!important;border-radius:999px!important;font-weight:700!important;transition:background .2s var(--rv-ease),transform .2s var(--rv-ease)}
html.rv-app.rv-d1 .app-page .tv-btn:active{transform:scale(.98)}
/* компактные кнопки внутри терминала и таблиц */
html.rv-app.rv-d1 .app-page :is(.market-spoiler,.tv-terminal) .btn{min-height:32px;padding:0 14px!important;font-size:13px!important}
html.rv-app.rv-d1 .app-page .tv-my-order-cancel{border:0!important;border-radius:999px!important;background:rgba(var(--rv-red-rgb),.08)!important;color:var(--rv-red)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-red-rgb),.3)!important}
/* ---------- поля ввода ---------- */
html.rv-app.rv-d1 .app-page:not(#page-chat) :is(.form-input,.form-select,select,textarea,input:is([type=text],[type=number],[type=search],[type=email],[type=password],[type=tel],[type=url],[type=datetime-local],[type=date],:not([type]))){
background:rgba(255,255,255,.04)!important;border:0!important;border-radius:12px!important;box-shadow:inset 0 0 0 1px var(--rv-line)!important;color:var(--rv-text)!important;
transition:box-shadow .2s var(--rv-ease),background .2s}
html.rv-app.rv-d1 .app-page:not(#page-chat) :is(.form-input,.form-select,select,textarea,input):hover{background:rgba(255,255,255,.055)!important}
html.rv-app.rv-d1 .app-page:not(#page-chat) :is(.form-input,.form-select,select,textarea,input):focus{outline:0!important;background:rgba(255,255,255,.06)!important;box-shadow:inset 0 0 0 1.5px var(--rv-lime),0 0 0 4px rgba(var(--rv-lime-rgb),.12)!important}
html.rv-app.rv-d1 .app-page ::placeholder{color:var(--rv-text-3)!important;opacity:1}
html.rv-app.rv-d1 .app-page label{color:var(--rv-text-2)}
/* ---------- вкладки ---------- */
html.rv-app.rv-d1 .app-page .exchange-tabs{display:inline-flex!important;width:auto!important;gap:4px!important;padding:4px!important;margin-bottom:24px!important;border:0!important;border-radius:999px!important;background:var(--rv-glass)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important}
html.rv-app.rv-d1 .app-page .exchange-tab{min-height:40px;padding:0 18px!important;border:0!important;border-radius:999px!important;background:transparent!important;color:var(--rv-text-2)!important;font:600 14px/20px var(--rv-font)!important;box-shadow:none!important;cursor:pointer;transition:background .2s,color .2s}
html.rv-app.rv-d1 .app-page .exchange-tab::after,html.rv-app.rv-d1 .app-page .exchange-tab::before{display:none!important}
html.rv-app.rv-d1 .app-page .exchange-tab:hover{color:var(--rv-text)!important;background:var(--rv-glass)!important}
html.rv-app.rv-d1 .app-page .exchange-tab.active{background:rgba(var(--rv-lime-rgb),.13)!important;color:var(--rv-lime)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-lime-rgb),.18)!important}
html.rv-app.rv-d1 .app-page .exchange-toolbar{align-items:flex-end;gap:12px!important}
/* ---------- списки (наставники, реестр) ---------- */
html.rv-app.rv-d1 .app-page .transactions-list{padding:0!important}
html.rv-app.rv-d1 .app-page :is(.activity-row,.mentor-row){border:0!important;border-top:1px solid var(--rv-line-soft)!important;background:transparent!important;color:var(--rv-text)!important;transition:background .2s var(--rv-ease)}
html.rv-app.rv-d1 .app-page .transactions-list>:first-child{border-top:0!important}
html.rv-app.rv-d1 .app-page :is(.activity-row,.mentor-row):hover{background:rgba(255,255,255,.03)!important}
html.rv-app.rv-d1 .app-page .mentor-row:hover .fa-arrow-up-right-from-square{color:var(--rv-lime)!important}
html.rv-app.rv-d1 .app-page .mentor-list-heading{background:transparent!important;border-bottom:1px solid var(--rv-line-soft)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.08em;text-transform:uppercase;color:var(--rv-text-3)!important}
html.rv-app.rv-d1 .app-page .mentor-list-heading *{color:inherit!important;font:inherit!important}
html.rv-app.rv-d1 .app-page .mentor-rank{color:var(--rv-text-3)!important;font-variant-numeric:tabular-nums}
html.rv-app.rv-d1 .app-page .act-amount{font-variant-numeric:tabular-nums;font-weight:600!important}
html.rv-app.rv-d1 .app-page .act-amount.act-positive{color:var(--rv-lime)!important}
html.rv-app.rv-d1 .app-page .act-amount:is(.act-negative,.act-neutral){color:var(--rv-text)!important}
html.rv-app.rv-d1 .app-page .registry-search i{color:var(--rv-text-3)!important}
html.rv-app.rv-d1 .app-page .history-hint{color:var(--rv-text-3)!important}
/* ---------- биржа и игры: карточки токенов/игр как на главной ---------- */
html.rv-app.rv-d1 .app-page .market-token-card{--tint:var(--rv-lime-rgb);position:relative;overflow:hidden;text-decoration:none!important;
background:radial-gradient(420px circle at var(--mx,-800px) var(--my,-800px),rgba(255,255,255,.06),transparent 42%),
radial-gradient(90% 70% at 100% 0%,rgba(var(--tint),.10),transparent 60%),var(--rv-surface)!important;
transition:transform .4s var(--rv-ease),box-shadow .4s var(--rv-ease)}
html.rv-app.rv-d1 .app-page .market-token-gold{--tint:var(--rv-gold-rgb)}
html.rv-app.rv-d1 .app-page .market-token-silver{--tint:var(--rv-silver-rgb)}
html.rv-app.rv-d1 .app-page .market-token-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.08),var(--rv-lift-hover)!important}
html.rv-app.rv-d1 .app-page .market-token-card:active{transform:translateY(-1px) scale(.995)}
html.rv-app.rv-d1 .app-page .market-token-holdings{border-color:var(--rv-line-soft)!important}
html.rv-app.rv-d1 .app-page .market-token-open{color:var(--rv-lime)!important;font-weight:600!important;transition:letter-spacing .3s var(--rv-ease)}
html.rv-app.rv-d1 .app-page .market-token-card:hover .market-token-open{letter-spacing:.01em}
/* Прежняя круглая иконка была «своей» у карточки токена; теперь медальон —
тот же SVG-круг, что на главной, поэтому фон под ним не нужен. */
html.rv-app.rv-d1 .app-page #marketOverview .market-token-icon{flex:0 0 44px!important;width:44px!important;height:44px!important;border-radius:50%!important;
background:transparent!important;box-shadow:0 8px 20px -6px rgba(0,0,0,.6)!important;font-size:0!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-icon svg{width:100%;height:100%}
/* Карточка токена на бирже — та же анатомия, что у карточки актива на главной:
медальон и название, крупная сумма, «Доступно», шкала, «В ордерах».
Рыночные показатели (цена, изменение, оборот) уходят во вторичный блок —
они остаются, но больше не спорят с суммой за внимание.
Область действия — только #marketOverview: карточки игр используют
общий класс .market-token-card и не должны поменять вид. */
html.rv-app.rv-d1 .app-page #marketOverview .market-token-card{--tint:var(--rv-lime-rgb);position:relative;overflow:hidden;text-decoration:none!important;
display:flex!important;flex-direction:column;padding:24px!important;min-height:188px;
background:radial-gradient(420px circle at var(--mx,-800px) var(--my,-800px),rgba(255,255,255,.06),transparent 42%),
radial-gradient(90% 70% at 100% 0%,rgba(var(--tint),.09),transparent 60%),var(--rv-surface)!important}
/* Цвет монеты задаётся здесь же: правило выше несёт id и перебивает
общие `--tint` из блока биржи — без этих двух строк GOLD и SILVER
получили бы лаймовую шкалу. */
html.rv-app.rv-d1 .app-page #marketOverview .market-token-gold{--tint:var(--rv-gold-rgb)}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-silver{--tint:var(--rv-silver-rgb)}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-heading{display:flex!important;align-items:center;gap:12px!important;min-height:44px}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-heading>div{min-width:0}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-heading h2{margin:0!important;font-size:16px!important;line-height:20px!important;font-weight:600!important;letter-spacing:-.01em!important;color:var(--rv-text)!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-heading div>span{display:block;margin-top:2px;font-size:12px!important;line-height:16px!important;color:var(--rv-text-2)!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-arrow{flex:0 0 auto;display:grid!important;place-items:center;width:36px!important;height:36px!important;margin:0 0 0 auto!important;
border-radius:50%!important;background:var(--rv-glass-2);box-shadow:inset 0 0 0 1px var(--rv-line-soft);color:var(--rv-text-2)!important;font-size:12px!important;
transition:background .2s var(--rv-ease),color .2s,transform .3s var(--rv-ease)}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-card:hover .market-token-arrow{background:var(--rv-glass-hover);color:var(--rv-text)!important;transform:translate(1px,-1px)}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-amount{margin:32px 0 0!important;font-size:38px!important;line-height:44px!important;font-weight:600!important;
letter-spacing:-.045em!important;color:var(--rv-text)!important;font-variant-numeric:tabular-nums}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-sub{margin:6px 0 0!important;font-size:14px!important;line-height:20px!important;color:var(--rv-text-2)!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-market{display:grid!important;gap:10px!important;margin:24px 0 16px!important;padding:0!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-market>div{display:flex!important;align-items:baseline;justify-content:space-between;gap:16px!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-market dt{color:var(--rv-text-3)!important;font-size:11px!important;line-height:14px!important;font-weight:600!important;letter-spacing:.08em;text-transform:uppercase}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-market dd{display:flex!important;align-items:baseline;gap:8px!important;margin:0!important;
font-size:14px!important;line-height:18px!important;color:var(--rv-text)!important;font-variant-numeric:tabular-nums}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-market dd strong{font-weight:600!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-market dd strong small{font-size:12px!important;font-weight:400!important;color:var(--rv-text-3)!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-market .tv-market-chg{font-family:var(--rv-font)!important;font-size:13px!important;line-height:18px!important;
text-align:left!important;color:var(--rv-text-3)!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-market .tv-market-chg.up{color:var(--rv-lime)!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-market .tv-market-chg.down{color:var(--rv-red)!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-meter{height:6px!important;margin:auto 0 0!important;border-radius:3px!important;background:rgba(255,255,255,.08)!important;overflow:visible!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-meter>b{display:block;height:100%;width:0;border-radius:3px!important;
background:linear-gradient(90deg,rgba(var(--tint),.55),rgb(var(--tint)))!important;box-shadow:0 0 12px rgba(var(--tint),.35)}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-footer{display:flex!important;justify-content:space-between;gap:12px;margin-top:14px!important;
font-size:13px!important;line-height:18px!important;color:var(--rv-text-2)!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-footer b{font-weight:600!important;color:var(--rv-text)!important;font-variant-numeric:tabular-nums}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-open{margin:20px 0 0!important;font-size:14px!important;line-height:20px!important;font-weight:600!important;color:var(--rv-lime)!important}
@media (max-width:768px){
html.rv-app.rv-d1 .app-page #marketOverview .market-token-card{padding:20px!important}
html.rv-app.rv-d1 .app-page #marketOverview .market-token-amount{margin-top:24px!important;font-size:34px!important;line-height:40px!important}
}
/* ---------- торговый терминал ---------- */
html.rv-app.rv-d1 .app-page .market-spoiler-title{color:var(--rv-text)!important;font-weight:600!important}
html.rv-app.rv-d1 .app-page .tv-wallet{margin:12px!important}
html.rv-app.rv-d1 .app-page :is(.tv-trade,.tv-side,.tv-book-spread,.tv-depth-totals){background:transparent!important;border-color:var(--rv-line-soft)!important}
html.rv-app.rv-d1 .app-page .tv-trade>button{background:transparent!important;border:0!important;color:var(--rv-text-2)!important;box-shadow:inset 0 -1px 0 var(--rv-line-soft)!important;font-weight:600!important;transition:color .2s,box-shadow .2s}
html.rv-app.rv-d1 .app-page .tv-trade>button.is-active{color:var(--rv-text)!important;box-shadow:inset 0 -2px 0 var(--rv-lime)!important}
html.rv-app.rv-d1 .app-page .tv-book-asks{background:rgba(var(--rv-red-rgb),.045)!important}
html.rv-app.rv-d1 .app-page .tv-book-bids{background:rgba(var(--rv-lime-rgb),.045)!important}
html.rv-app.rv-d1 .app-page .tv-book-row{border-color:rgba(255,255,255,.04)!important}
html.rv-app.rv-d1 .app-page .tv-iv{border:0!important;border-radius:999px!important;background:var(--rv-glass)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important;color:var(--rv-text-2)!important;transition:background .2s,color .2s}
html.rv-app.rv-d1 .app-page .tv-iv:hover{color:var(--rv-text)!important;background:var(--rv-glass-2)!important}
html.rv-app.rv-d1 .app-page .tv-iv.is-active{background:var(--rv-lime)!important;color:#11180a!important;box-shadow:none!important}
html.rv-app.rv-d1 .app-page table th{background:transparent!important;color:var(--rv-text-3)!important;font-size:11px!important;font-weight:600!important;letter-spacing:.06em;text-transform:uppercase;border-color:var(--rv-line-soft)!important}
html.rv-app.rv-d1 .app-page table td{border-color:var(--rv-line-soft)!important;font-variant-numeric:tabular-nums}
html.rv-app.rv-d1 .app-page table tr:hover td{background:rgba(255,255,255,.02)!important}
/* ---------- о платформе / возможности / как начать / поддержка ---------- */
html.rv-app.rv-d1 .app-page .feature-visual{background:radial-gradient(60% 70% at 50% 45%,rgba(var(--rv-lime-rgb),.10),transparent 70%)!important;border:0!important;border-radius:var(--rv-r-in)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important}
html.rv-app.rv-d1 .app-page .feature-visual i{color:var(--rv-lime)!important;opacity:.85}
html.rv-app.rv-d1 .app-page .feature-badge{background:rgba(var(--rv-lime-rgb),.10)!important;color:var(--rv-lime)!important;border:0!important;border-radius:999px!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-lime-rgb),.2)!important}
html.rv-app.rv-d1 .app-page .check-list li::before,html.rv-app.rv-d1 .app-page .check-list i{color:var(--rv-lime)!important}
html.rv-app.rv-d1 .app-page :is(.warning-box,.disclaimer-box){border:0!important;border-radius:var(--rv-r-in)!important;background:var(--rv-glass)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important;color:var(--rv-text-2)!important}
html.rv-app.rv-d1 .app-page :is(.warning-box,.disclaimer-box)>i{color:#f5c86b!important}
html.rv-app.rv-d1 .app-page :is(.warning-box,.disclaimer-box) strong{color:var(--rv-text)!important}
html.rv-app.rv-d1 .app-page .tracker-step>span{background:var(--rv-glass-2)!important;box-shadow:var(--rv-ring)!important;color:var(--rv-text-2)!important;border:0!important}
html.rv-app.rv-d1 .app-page .tracker-step.active>span{background:var(--rv-lime)!important;color:#11180a!important;box-shadow:0 0 0 4px rgba(var(--rv-lime-rgb),.14)!important}
html.rv-app.rv-d1 .app-page .guide-num{background:var(--rv-lime)!important;color:#11180a!important;border:0!important;border-radius:14px!important;box-shadow:0 10px 24px -10px rgba(var(--rv-lime-rgb),.6)!important}
html.rv-app.rv-d1 .app-page .guide-step.active{box-shadow:inset 0 0 0 1px rgba(var(--rv-lime-rgb),.22),var(--rv-lift)!important}
/* ---------- чат: единая стеклянная панель ---------- */
/* Стекло даёт только .chat-shell. Внутренние слои прозрачные: раньше
.chat-main/шапка/лента/поле заливались var(--chat-bg) = #07080b, и открытый
диалог выглядел чёрной дырой посреди стеклянной панели. */
html.rv-app.rv-d1 #page-chat .chat-shell{background:var(--rv-chrome)!important;-webkit-backdrop-filter:var(--rv-blur);backdrop-filter:var(--rv-blur);border:0!important;box-shadow:var(--rv-ring),0 16px 40px -16px rgba(0,0,0,.7)!important;overflow:hidden}
html.rv-app.rv-d1 #page-chat :is(.chat-main,.chat-conv,.chat-conv-head,.chat-messages),
html.rv-app.rv-d1 #page-chat .chat-compose:not(.chat-compose-drop){background:transparent!important}
html.rv-app.rv-d1 #page-chat .chat-sidebar{background:var(--rv-glass)!important;border:0!important;border-right:1px solid var(--rv-line-soft)!important;overflow:hidden!important}
html.rv-app.rv-d1 #page-chat .chat-conv-head{border-bottom:1px solid var(--rv-line-soft)!important}
html.rv-app.rv-d1 #page-chat .chat-compose{border-top:1px solid var(--rv-line-soft)!important}
/* Поле ввода — стекло. Размытие на ::before, а не на самом блоке: блок с
backdrop-filter стал бы корнем размытия, и полоса ::after под ним
перестала бы размывать ленту. z-index:-1 держит слой под кнопками
(у .chat-compose свой контекст наложения — z-index:10). При перетаскивании
файла слой снимаем, иначе он приглушил бы лаймовую подсветку поля. */
html.rv-app.rv-d1 #page-chat .chat-compose:not(.chat-compose-drop)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--rv-chrome);-webkit-backdrop-filter:var(--rv-blur);backdrop-filter:var(--rv-blur)}
/* вкладки «Все / Личные / …» — сегмент-«пилюля» (DESIGN §5); при нехватке
ширины прокручиваются, а не переносятся */
html.rv-app.rv-d1 #page-chat .chat-folders{border-bottom:0!important;margin-bottom:0!important;gap:2px!important;padding:0 12px 12px 15px!important;flex-wrap:nowrap!important;white-space:nowrap!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important}
html.rv-app.rv-d1 #page-chat .chat-folders::-webkit-scrollbar{display:none!important}
html.rv-app.rv-d1 #page-chat .chat-folder{flex:0 0 auto!important;white-space:nowrap!important;padding:7px!important;border-radius:999px!important;font-size:12px!important;font-weight:600!important;letter-spacing:0!important;color:var(--rv-text-2)!important;transition:background .16s var(--rv-ease),color .16s var(--rv-ease)}
html.rv-app.rv-d1 #page-chat .chat-folder:hover{background:var(--rv-glass-hover)!important;color:var(--rv-text)!important}
html.rv-app.rv-d1 #page-chat .chat-folder.active{background:rgba(var(--rv-lime-rgb),.13)!important;color:var(--rv-lime)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-lime-rgb),.16)}
html.rv-app.rv-d1 #page-chat .chat-folder.active::after{display:none!important}
/* строка диалога: на всю ширину списка; активная — как активный пункт меню */
html.rv-app.rv-d1 #page-chat .chat-item{width:100%!important;margin:0 0 2px!important;padding:12px 14px!important;border-radius:var(--rv-r-in)!important;transition:background .2s var(--rv-ease)}
html.rv-app.rv-d1 #page-chat .chat-item:hover{background:var(--rv-glass)!important}
html.rv-app.rv-d1 #page-chat .chat-item.active{background:rgba(var(--rv-lime-rgb),.13)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-lime-rgb),.16)!important}
html.rv-app.rv-d1 #page-chat .chat-avatar{background:var(--rv-glass-2)!important;box-shadow:inset 0 0 0 1px var(--rv-line)!important;color:var(--rv-text)!important;font-weight:600!important}
/* шапка диалога */
html.rv-app.rv-d1 #page-chat .chat-conv-name{font-size:15px!important;font-weight:600!important;color:var(--rv-text)!important}
html.rv-app.rv-d1 #page-chat .chat-conv-sub{font-size:12px!important;color:var(--rv-text-2)!important}
html.rv-app.rv-d1 #page-chat .chat-conv-sub.chat-other-online{color:var(--lime)!important}
html.rv-app.rv-d1 #page-chat :is(.chat-action-btn,.chat-search-btn){width:40px!important;height:40px!important;border-radius:50%!important;background:var(--rv-glass)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important;color:var(--rv-text-2)!important;font-size:15px!important}
html.rv-app.rv-d1 #page-chat :is(.chat-action-btn,.chat-search-btn):hover{background:var(--rv-glass-hover)!important;color:var(--rv-text)!important}
/* пузыри: входящие — стекло, исходящие — лаймовая тонировка (один акцент).
Удалённые не трогаем — у них своя прозрачная рамка. */
html.rv-app.rv-d1 #page-chat .chat-msg-bubble{border-radius:16px!important;padding:9px 13px!important}
html.rv-app.rv-d1 #page-chat .chat-msg:not(.chat-msg-deleted) .chat-msg-bubble{background:var(--rv-glass)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important}
html.rv-app.rv-d1 #page-chat .chat-msg-mine:not(.chat-msg-deleted) .chat-msg-bubble{background:rgba(var(--rv-lime-rgb),.10)!important;box-shadow:inset 0 0 0 1px rgba(var(--rv-lime-rgb),.16)!important}
html.rv-app.rv-d1 #page-chat .chat-msg:not(.chat-msg-mine) .chat-msg-bubble{border-top-left-radius:6px!important}
html.rv-app.rv-d1 #page-chat .chat-msg-mine .chat-msg-bubble{border-top-right-radius:6px!important}
/* подсветка сообщения при переходе к ответу — поверх кольца пузыря
(селектор нарочно тяжелее правил пузыря выше: оба с !important) */
html.rv-app.rv-d1 #page-chat .chat-msg.chat-msg-highlight:not(.chat-msg-deleted) .chat-msg-bubble{box-shadow:0 0 0 3px var(--accent-60)!important}
html.rv-app.rv-d1 #page-chat .chat-msg-mine :is(.chat-msg-time,.chat-msg-meta){color:rgba(var(--rv-lime-rgb),.72)!important}
html.rv-app.rv-d1 #page-chat .chat-date-sep span{background:var(--rv-glass)!important;box-shadow:inset 0 0 0 1px var(--rv-line-soft)!important;color:var(--rv-text-2)!important;border-radius:999px!important;font-size:12px!important;font-weight:600!important}
/* поле ввода: скрепка, плейсхолдер, кнопка «отправить» — главная кнопка-круг */
html.rv-app.rv-d1 #page-chat .chat-textarea::placeholder{color:var(--rv-text-3)!important}
html.rv-app.rv-d1 #page-chat .chat-attach-btn{color:var(--rv-text-2)!important;font-size:20px!important}
html.rv-app.rv-d1 #page-chat .chat-attach-btn:hover{color:var(--rv-text)!important}
html.rv-app.rv-d1 #page-chat .chat-send-btn{width:40px!important;height:40px!important;border-radius:50%!important;font-size:17px!important;background:var(--rv-lime)!important;color:#11180a!important;box-shadow:0 10px 28px -10px rgba(var(--rv-lime-rgb),.6)!important;transition:transform .16s var(--rv-ease),filter .16s var(--rv-ease)}
html.rv-app.rv-d1 #page-chat .chat-send-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
html.rv-app.rv-d1 #page-chat .chat-send-btn:active{transform:scale(.97)}
/* пустое состояние «Выберите чат» */
html.rv-app.rv-d1 #page-chat .chat-placeholder{color:var(--rv-text-2)!important}
html.rv-app.rv-d1 #page-chat .chat-placeholder i{color:var(--rv-text-3)!important;opacity:.5}
/* В чате прокрутки страницы нет (overflow:hidden), а stable-жёлоб ниже
оставлял справа пустые 10px: панель кончалась на 10px раньше шапки. */
html.rv-app.rv-d1 body.chat-mode .global-content{scrollbar-gutter:auto}
@media (min-width:1101px){
html.rv-app.rv-d1 #page-chat .chat-wrap{padding:12px!important;box-sizing:border-box!important}
html.rv-app.rv-d1 #page-chat .chat-shell{border-radius:var(--rv-r)!important;height:100%!important}
}
/* ---------- мобильный ---------- */
@media (max-width:768px){
html.rv-app.rv-d1 .app-page h1:not(.visually-hidden){font-size:30px!important;line-height:36px!important}
html.rv-app.rv-d1 .app-page .page-header>.container{padding-top:28px!important;padding-bottom:20px!important}
html.rv-app.rv-d1 .app-page>.page-body:first-child{padding-top:28px!important}
html.rv-app.rv-d1 .app-page :is(.action-card,.philosophy-card,.economy-step,.guide-step){padding:20px!important}
html.rv-app.rv-d1 .app-page :is(.profile-header,.action-card,.market-token-card,.transactions-list,.philosophy-card,.economy-step,.feature-block,.guide-step,details.market-spoiler,aside.tv-col-book){border-radius:22px!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html.rv-app.rv-d1 .app-page .exchange-tabs{display:flex!important;overflow-x:auto;scrollbar-width:none;max-width:100%}
html.rv-app.rv-d1 .app-page .exchange-tab{white-space:nowrap}
}
/* ---------- правки после обхода страниц ---------- */
/* frame-fix задаёт меню min-width:220px — с отступом 12px оно вылезает из колонки */
@media (min-width:1101px){
html.rv-app.rv-d1 .global-layout>.global-nav{min-width:0!important;max-width:none!important}
}
/* одинаковая колонка на страницах с прокруткой и без */
html.rv-app.rv-d1 .global-content{scrollbar-gutter:stable}
/* вкладки обменника — компактная «пилюля», а не полоса во всю ширину */
html.rv-app.rv-d1 .app-page .exchange-tabs{width:max-content!important;max-width:100%;align-self:flex-start;justify-self:start}
@media (max-width:768px){
html.rv-app.rv-d1 .app-page .exchange-tabs{flex-wrap:nowrap!important;overflow-x:auto!important}
html.rv-app.rv-d1 .app-page .exchange-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px!important;align-items:end}
html.rv-app.rv-d1 .app-page .exchange-toolbar>label{min-width:0;width:auto!important}
html.rv-app.rv-d1 .app-page .exchange-toolbar select{width:100%!important}
html.rv-app.rv-d1 .app-page .exchange-toolbar>.btn{grid-column:1/-1;width:100%}
}
@media (min-width:769px) and (max-width:1100px){
html.rv-app.rv-d1 #page-chat .chat-wrap{padding:12px 12px 12px 16px!important;box-sizing:border-box!important}
html.rv-app.rv-d1 #page-chat .chat-shell{border-radius:var(--rv-r)!important;height:100%!important}
}
/* ============================================================
UMBAY · Гостевой экран входа (Guest gate)
Принят владельцем 2026-11-08 (примерка через CDP: tmp/guest-gate.js).
Архитектура из одного узла: эмблема и логотип создаются ОДИН раз и не
двигаются — меняется только содержимое слота #ggSlot под ними
(загрузка → выбор входа → форма). Поэтому при смене фаз логотип
физически не может «прыгнуть»: у него нет второго DOM-узла.
Палитра — Aurora Glass (--rv-bg #07080b + лаймовый ореол), а не зелёная
заставка #appBoot: при входе в аккаунт фон не меняется вовсе.
============================================================ */
#guestGate {
--gg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--gg-lime: #d3f778;
--gg-lime-rgb: 211, 247, 120;
--gg-text: #f6f7fa;
--gg-text-2: rgba(236, 239, 245, .64);
--gg-text-3: rgba(236, 239, 245, .40);
--gg-glass: rgba(255, 255, 255, .04);
--gg-glass-2: rgba(255, 255, 255, .065);
--gg-glass-hover: rgba(255, 255, 255, .10);
--gg-line: rgba(255, 255, 255, .085);
--gg-line-soft: rgba(255, 255, 255, .055);
--gg-ease: cubic-bezier(.22, 1, .36, 1);
position: fixed;
inset: 0;
z-index: 30000;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
overflow-x: hidden;
background: #07080b;
color: var(--gg-text);
font-family: var(--gg-font);
font-feature-settings: "cv11", "calt";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* бренд начинается на трети высоты — как в принятой примерке */
padding: 33.33vh 20px calc(24px + env(safe-area-inset-bottom));
}
/* ореол Aurora: тот же приём, что .global-layout::before/::after */
#guestGate::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(42% 38% at 56% -8%, rgba(var(--gg-lime-rgb), .17), transparent 70%),
radial-gradient(70% 55% at 50% 120%, rgba(255, 255, 255, .04), transparent 70%);
}
#guestGate::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
#guestGate[hidden] { display: none !important; }
#guestGate [hidden] { display: none !important; }
#guestGate * { box-sizing: border-box; }
/* --- бренд: постоянный, не пересоздаётся --- */
#guestGate .gg-brand {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 14px;
text-align: center;
width: 100%;
flex: 0 0 auto;
}
#guestGate .gg-emblem { flex: 0 0 112px; width: 112px; height: 112px; display: block; object-fit: contain; }
#guestGate .gg-wordmark {
display: flex;
align-items: baseline;
height: 32px;
line-height: 32px;
font-family: Manrope, var(--gg-font);
font-weight: 800;
font-size: 32px;
letter-spacing: -.08em;
}
#guestGate .gg-wordmark i {
flex: 0 0 8px;
align-self: center;
width: 8px;
height: 8px;
margin-left: 4px;
border-radius: 50%;
background: var(--gg-lime);
}
/* --- слот: единственное, что меняется между фазами --- */
#guestGate .gg-slot {
position: relative;
z-index: 1;
width: 100%;
max-width: 352px;
display: grid;
justify-items: stretch;
margin-top: 14px;
flex: 0 0 auto;
animation: ggFade .28s ease both;
}
@keyframes ggFade { from { opacity: 0; } to { opacity: 1; } }
#guestGate .gg-line {
margin: 0;
color: #b8c4ba;
font-size: 13px;
line-height: 1.35;
font-weight: 600;
text-align: center;
}
/* --- фаза загрузки: свечение из-под логотипа + кольцо звёзд --- */
#guestGate .gg-boot { display: grid; justify-items: center; gap: 14px; }
#guestGate .gg-spinner { display: none; }
@keyframes ggSpin { to { transform: rotate(360deg); } }
/* внешнее гало; появление мягкое, чтобы не щёлкнуло при монтировании */
#guestGate .gg-brand::before {
content: "";
position: absolute;
left: 50%;
top: 56px;
width: 420px;
height: 420px;
margin: -210px 0 0 -210px;
border-radius: 50%;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at 50% 50%,
rgba(211, 247, 120, .13) 0%,
rgba(211, 247, 120, .075) 30%,
rgba(211, 247, 120, .028) 50%,
rgba(211, 247, 120, 0) 72%);
filter: blur(14px);
animation: ggLogoGlow 3200ms ease-in-out infinite;
}
/* плотное ядро — держится под эмблемой */
#guestGate .gg-brand::after {
content: "";
position: absolute;
left: 50%;
top: 56px;
width: 128px;
height: 128px;
margin: -64px 0 0 -64px;
border-radius: 50%;
pointer-events: none;
z-index: -1;
background: radial-gradient(circle at 50% 50%,
rgba(211, 247, 120, .16) 0%,
rgba(211, 247, 120, .05) 46%,
rgba(211, 247, 120, 0) 74%);
filter: blur(9px);
animation: ggLogoGlowCore 3200ms ease-in-out infinite;
}
@keyframes ggLogoGlow {
0%, 100% { opacity: .5; transform: scale(.95); }
50% { opacity: 1; transform: scale(1.05); }
}
@keyframes ggLogoGlowCore {
0%, 100% { opacity: .45; transform: scale(.98); }
50% { opacity: 1; transform: scale(1.04); }
}
/* Кольцо звёзд. Центр смещён на 59px ВЫШЕ центра эмблемы — приёмка
владельца: звёзды обходят логотип эксцентрично, не по кругу. */
#guestGate .gg-dots {
position: absolute;
left: 50%;
top: 56px;
width: 118px;
height: 118px;
margin: -59px 0 0 -59px;
pointer-events: none;
z-index: 2;
filter: blur(1px);
animation: ggSpin 2600ms linear infinite;
}
/* Ядро звезды. Не гасим родителя через opacity: погасит и лучи. */
#guestGate .gg-dots i {
position: absolute;
left: 50%;
top: 0;
width: 26px;
height: 26px;
margin: -13px 0 0 -13px;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%,
rgba(248, 255, 232, .95) 0%,
rgba(232, 253, 165, .62) 24%,
rgba(211, 247, 120, .22) 50%,
rgba(211, 247, 120, .06) 72%,
rgba(211, 247, 120, 0) 88%);
filter: blur(4px);
transform: rotate(var(--a)) translateY(-59px);
animation: ggStarCore 2600ms cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes ggStarCore {
0%, 100% { opacity: .38; }
14% { opacity: 1; }
55% { opacity: .46; }
}
/* Лучи: два псевдоэлемента дают крест из четырёх. Длина следует за
яркостью — scale(.18) в затухании, scale(1) на пике. */
#guestGate .gg-dots i::before,
#guestGate .gg-dots i::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
pointer-events: none;
filter: blur(3.5px);
animation: ggStarRay 2600ms cubic-bezier(.5, 0, .5, 1) infinite;
}
#guestGate .gg-dots i::before {
width: var(--len, 74px);
height: 5px;
margin: -2.5px 0 0 calc(var(--len, 74px) / -2);
background: linear-gradient(90deg,
rgba(211, 247, 120, 0) 0%,
rgba(211, 247, 120, .22) 18%,
rgba(236, 255, 200, .80) 42%,
rgba(248, 255, 232, .92) 50%,
rgba(236, 255, 200, .80) 58%,
rgba(211, 247, 120, .22) 82%,
rgba(211, 247, 120, 0) 100%);
}
#guestGate .gg-dots i::after {
width: 5px;
height: var(--len, 74px);
margin: calc(var(--len, 74px) / -2) 0 0 -2.5px;
background: linear-gradient(180deg,
rgba(211, 247, 120, 0) 0%,
rgba(211, 247, 120, .22) 18%,
rgba(236, 255, 200, .80) 42%,
rgba(248, 255, 232, .92) 50%,
rgba(236, 255, 200, .80) 58%,
rgba(211, 247, 120, .22) 82%,
rgba(211, 247, 120, 0) 100%);
}
@keyframes ggStarRay {
0%, 100% { opacity: 0; transform: scale(.18); }
14% { opacity: 1; transform: scale(1); }
55% { opacity: .12; transform: scale(.34); }
}
/* Фазы: волна бежит по кругу, длина лучей у звёзд разная */
#guestGate .gg-dots i:nth-child(1) { --a: 0deg; animation-delay: 0ms; --len: 74px; }
#guestGate .gg-dots i:nth-child(2) { --a: 72deg; animation-delay: -520ms; --len: 88px; }
#guestGate .gg-dots i:nth-child(3) { --a: 144deg; animation-delay: -1040ms; --len: 102px; }
#guestGate .gg-dots i:nth-child(4) { --a: 216deg; animation-delay: -1560ms; --len: 74px; }
#guestGate .gg-dots i:nth-child(5) { --a: 288deg; animation-delay: -2080ms; --len: 88px; }
#guestGate .gg-dots i::before { animation-delay: inherit; }
#guestGate .gg-dots i::after { animation-delay: inherit; }
/* На формах входа и регистрации свет и звёзды не нужны: они отвлекают
и мешают читать поля. Классы ставит show() в блоке Guest gate. */
#guestGate.gg-ready .gg-dots,
#guestGate.gg-ready .gg-brand::before,
#guestGate.gg-ready .gg-brand::after {
opacity: 0;
animation: none;
transition: opacity .3s var(--gg-ease);
}
#guestGate.gg-ready .gg-dots { visibility: hidden; }
#guestGate.gg-ready .gg-brand::before,
#guestGate.gg-ready .gg-brand::after { transition: opacity .3s var(--gg-ease); }
@media (prefers-reduced-motion: reduce) {
#guestGate .gg-brand::before,
#guestGate .gg-brand::after { animation: none; opacity: .7; }
#guestGate .gg-dots { animation-duration: 9000ms; }
#guestGate .gg-dots i::before,
#guestGate .gg-dots i::after { animation: none; opacity: .55; transform: scale(.6); }
}
/* --- фаза выбора входа --- */
#guestGate .gg-login { display: grid; gap: 0; }
#guestGate .gg-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 9px; margin-top: 16px; }
#guestGate .gg-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 52px;
padding: 0 18px;
border: 0;
border-radius: 14px;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: -.01em;
transition: background .2s var(--gg-ease), box-shadow .2s var(--gg-ease), color .2s var(--gg-ease), transform .2s var(--gg-ease);
-webkit-tap-highlight-color: transparent;
}
#guestGate .gg-btn:active { transform: scale(.985); }
#guestGate .gg-btn:focus-visible { outline: 2px solid var(--gg-lime); outline-offset: 3px; }
#guestGate .gg-btn-passkey {
width: 52px;
padding: 0;
background: var(--gg-lime);
color: #11180a;
box-shadow: 0 12px 30px -14px rgba(var(--gg-lime-rgb), .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
#guestGate .gg-btn-passkey:hover { background: #e2ff99; }
#guestGate .gg-btn-passkey svg {
width: 22px;
height: 22px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
#guestGate .gg-btn-main { background: var(--gg-glass-2); color: var(--gg-text); box-shadow: inset 0 0 0 1px var(--gg-line); }
#guestGate .gg-btn-main:hover { background: var(--gg-glass-hover); }
#guestGate .gg-btn-quiet { margin-top: 9px; background: var(--gg-glass); color: var(--gg-text-2); box-shadow: inset 0 0 0 1px var(--gg-line); }
#guestGate .gg-btn-quiet:hover { background: var(--gg-glass-hover); color: var(--gg-text); }
#guestGate .gg-links { display: flex; justify-content: center; margin-top: 8px; }
#guestGate .gg-link {
padding: 7px 10px;
border: 0;
border-radius: 8px;
background: none;
cursor: pointer;
color: var(--gg-text-3);
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
transition: color .18s var(--gg-ease), background .18s var(--gg-ease);
}
#guestGate .gg-link:hover { color: var(--gg-text-2); background: var(--gg-glass); }
#guestGate .gg-link:focus-visible { outline: 2px solid var(--gg-lime); outline-offset: 2px; }
/* --- формы --- */
#guestGate .gg-form { display: grid; gap: 9px; width: 100%; }
#guestGate .gg-back {
display: inline-flex;
align-items: center;
gap: 7px;
justify-self: start;
margin-top: 12px;
padding: 6px 10px 6px 6px;
border: 0;
border-radius: 9px;
background: none;
cursor: pointer;
color: var(--gg-text-3);
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
transition: color .18s var(--gg-ease), background .18s var(--gg-ease);
}
#guestGate .gg-back:hover { color: var(--gg-text-2); background: var(--gg-glass); }
#guestGate .gg-back:focus-visible { outline: 2px solid var(--gg-lime); outline-offset: 2px; }
#guestGate .gg-back i { font-size: 11px; }
#guestGate .gg-field { display: grid; gap: 6px; width: 100%; }
#guestGate .gg-field > span {
color: var(--gg-text-3);
font-size: 10.5px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
}
#guestGate .gg-field input {
width: 100%;
height: 46px;
padding: 0 14px;
border: 0;
border-radius: 12px;
background: var(--gg-glass);
color: var(--gg-text);
font-family: inherit;
font-size: 14px;
letter-spacing: -.01em;
box-shadow: inset 0 0 0 1px var(--gg-line);
outline: none;
transition: box-shadow .2s var(--gg-ease), background .2s var(--gg-ease);
}
#guestGate .gg-field input::placeholder { color: rgba(236, 239, 245, .28); }
#guestGate .gg-field input:focus {
background: var(--gg-glass-2);
box-shadow: inset 0 0 0 1px rgba(var(--gg-lime-rgb), .55), 0 0 0 3px rgba(var(--gg-lime-rgb), .10);
}
#guestGate .gg-hint { margin: 0; color: var(--gg-text-3); font-size: 10.5px; line-height: 1.45; }
#guestGate .gg-error { margin: 0; color: #ff8a95; font-size: 11.5px; line-height: 1.45; }
#guestGate .gg-error:empty { display: none; }
/* Код наставника: читается как код, а не как текст — моноширинный и с
увеличенным трекингом. Поле предзаполняется из ссылки ?ref=CODE. */
#guestGate .gg-field-code input {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 13px;
letter-spacing: .04em;
}
/* Подпись «Вас пригласил наставник: Имя» — меняет цвет по результату
проверки кода (см. lookupMentor в app.js). */
#guestGate .gg-line.gg-mentor-ok { color: var(--gg-lime); }
#guestGate .gg-line.gg-mentor-bad { color: #ff8a95; }
#guestGate .gg-submit {
height: 46px;
margin-top: 3px;
border: 0;
border-radius: 14px;
cursor: pointer;
background: var(--gg-lime);
color: #11180a;
font-family: inherit;
font-size: 13.5px;
font-weight: 650;
box-shadow: 0 12px 30px -14px rgba(var(--gg-lime-rgb), .6);
transition: background .2s var(--gg-ease);
}
#guestGate .gg-submit:hover { background: #e2ff99; }
#guestGate .gg-submit:focus-visible { outline: 2px solid var(--gg-lime); outline-offset: 3px; }
#guestGate .gg-submit:disabled { opacity: .55; cursor: default; }
/* Гость не должен видеть каркас SPA под экраном: шапка, навигация и
страницы прячутся целиком, а не перекрываются. */
html.gg-guest .global-layout { display: none !important; }
html.gg-guest, html.gg-guest body { overflow: hidden; }
@media (max-height: 700px) { #guestGate { padding-top: 22vh; } }
@media (prefers-reduced-motion: reduce) {
#guestGate *, #guestGate { animation: none !important; transition: none !important; }
}
/* ==========================================================================
Кабинет: единая сетка 4/8, три уровня текста, симметричные карточки
------------------------------------------------------------------------
Панель профиля собрана в .ph-actions (История · Безопасность · Выйти),
таб-бар .cabinet-tabs удалён — разделы доступны из сайдбара.
Правила идут после Aurora-блока, поэтому перебивают его с !important.
========================================================================== */
#page-cabinet {
--u-1: 4px; --u-2: 8px; --u-3: 12px; --u-4: 16px;
--u-5: 20px; --u-6: 24px; --u-7: 32px; --u-8: 40px;
--u-t1: #f7f8fa;
--u-t2: rgba(247, 248, 250, .64);
--u-t3: rgba(247, 248, 250, .42);
--u-accent: #d3f778;
--u-accent-ink: #11180a;
--u-danger: #ff7d90;
--u-line: rgba(255, 255, 255, .07);
--u-fill: rgba(255, 255, 255, .045);
--u-fill-2: rgba(255, 255, 255, .075);
--u-r-card: 20px;
--u-r-inner: 14px;
--u-ease: cubic-bezier(.4, 0, .2, 1);
}
/* ---------- Панель профиля ---------- */
#page-cabinet .profile-header {
padding: var(--u-6);
border-radius: var(--u-r-card);
gap: var(--u-6);
align-items: center;
}
#page-cabinet .profile-main { gap: var(--u-4); }
#page-cabinet .user-avatar {
width: 56px; height: 56px;
background: var(--u-fill);
box-shadow: inset 0 0 0 1px var(--u-line);
}
#page-cabinet .user-details { gap: var(--u-2); }
#page-cabinet .user-details h2 {
font-size: 24px; font-weight: 700; line-height: 1.25;
letter-spacing: -.02em; margin: 0;
}
#page-cabinet .user-stats { gap: var(--u-2); }
#page-cabinet .stat-pill {
font-size: 12px; line-height: 1.3; padding: 6px 12px;
background: var(--u-fill); color: var(--u-t1);
}
#page-cabinet .premium-pill { background: rgba(211, 247, 120, .10); color: var(--u-accent); }
#page-cabinet .premium-until {
font-size: 11px; line-height: 1.35;
color: var(--u-t2); margin-top: var(--u-1);
}
#page-cabinet .ph-actions {
display: flex; align-items: center; gap: var(--u-2);
flex-wrap: wrap; margin-left: auto;
}
#page-cabinet .ph-actions .btn { white-space: nowrap; }
/* ---------- Кнопки: один отклик на всю страницу ---------- */
#page-cabinet .btn {
height: 44px; padding: 0 20px;
font-size: 14px; font-weight: 600; line-height: 1;
border-radius: 999px;
transition: background .18s var(--u-ease), box-shadow .18s var(--u-ease),
color .18s var(--u-ease), transform .18s var(--u-ease);
}
#page-cabinet .btn-outline { background: var(--u-fill) !important; color: var(--u-t1) !important; }
#page-cabinet .btn-outline:hover {
background: var(--u-fill-2) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10) !important;
}
#page-cabinet .btn-danger { color: var(--u-danger) !important; background: rgba(255, 125, 144, .09) !important; }
#page-cabinet .btn-danger:hover { background: rgba(255, 125, 144, .17) !important; }
/* Лаймовые кнопки: мягкая тень вместо ореола (Aurora задаёт её с !important) */
html.rv-app.rv-d1 #page-cabinet .btn-warning,
html.rv-app.rv-d1 #page-cabinet .btn-primary,
html.rv-app.rv-d1 #page-cabinet .btn-premium,
html.rv-app.rv-d1 #page-cabinet .tier-btn-current {
background: var(--u-accent) !important;
color: var(--u-accent-ink) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38),
0 6px 16px -8px rgba(211, 247, 120, .42) !important;
}
html.rv-app.rv-d1 #page-cabinet .btn-warning:hover,
html.rv-app.rv-d1 #page-cabinet .btn-primary:hover,
html.rv-app.rv-d1 #page-cabinet .btn-premium:hover,
html.rv-app.rv-d1 #page-cabinet .tier-btn-current:hover {
background: #ddf98a !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5),
0 8px 20px -8px rgba(211, 247, 120, .55) !important;
}
html.rv-app.rv-d1 #page-cabinet .tier-btn-active {
background: transparent !important;
color: var(--u-t3) !important;
box-shadow: inset 0 0 0 1px var(--u-line) !important;
}
html.rv-app.rv-d1 #page-cabinet .tier-btn-active:hover { background: var(--u-fill) !important; }
/* ---------- Сетка: первый ряд строго симметричен ---------- */
#page-cabinet .dashboard-grid {
gap: var(--u-4);
/* auto-fit: 2 колонки, только если реально влезают; иначе одна */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
align-items: stretch;
}
#page-cabinet .dashboard-grid > .action-card[id="lotteries"] { grid-column: 1 / -1; }
#page-cabinet .action-card {
padding: var(--u-6);
border-radius: var(--u-r-card);
display: flex; flex-direction: column;
gap: var(--u-4);
box-shadow: inset 0 0 0 1px var(--u-line) !important;
transition: box-shadow .2s var(--u-ease);
}
#page-cabinet .action-card:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13) !important; }
#page-cabinet #referral .switch-referrer { margin-top: auto; }
/* ---------- Заголовки карточек ---------- */
#page-cabinet .card-head { gap: var(--u-3); margin: 0; }
#page-cabinet .card-head h3,
#page-cabinet .card-head > span {
font-size: 17px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em;
}
#page-cabinet .card-icon {
width: 40px; height: 40px; border-radius: 12px;
background: var(--u-fill); color: var(--u-accent);
box-shadow: inset 0 0 0 1px var(--u-line);
}
/* ---------- Три уровня текста, ничего кроме ---------- */
#page-cabinet .card-desc,
#page-cabinet .premium-info p,
#page-cabinet .referral-list p,
#page-cabinet .empty-list,
#page-cabinet .premium-info li {
font-size: 13px; line-height: 1.5; color: var(--u-t2) !important; margin: 0;
}
#page-cabinet .switch-referrer h4,
#page-cabinet .referral-list strong,
#page-cabinet .referral-code label,
#page-cabinet #createLotteryForm label {
font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--u-t1) !important;
}
#page-cabinet .referral-stats h4 {
font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--u-t3) !important;
}
/* ---------- Реферальная ссылка ---------- */
#page-cabinet .referral-code { gap: var(--u-2); }
#page-cabinet .referral-code input {
height: 44px; padding: 0 var(--u-4);
border-radius: var(--u-r-inner);
background: var(--u-fill); color: var(--u-t1);
font-size: 13px;
box-shadow: inset 0 0 0 1px var(--u-line);
}
#page-cabinet .referral-code button {
width: 44px; height: 44px;
border-radius: var(--u-r-inner);
background: var(--u-fill) !important;
}
#page-cabinet .referral-code button:hover { background: var(--u-fill-2) !important; }
/* ---------- Статистика ---------- */
#page-cabinet .referral-stats { gap: var(--u-3); }
#page-cabinet .referral-stats > div {
padding: var(--u-4);
border-radius: var(--u-r-inner);
background: var(--u-fill);
box-shadow: inset 0 0 0 1px var(--u-line);
}
#page-cabinet .referral-stats .stat-box-value,
#page-cabinet .referral-stats [class*="num"] {
font-size: 24px; font-weight: 700; line-height: 1.2;
font-variant-numeric: tabular-nums;
}
/* ---------- Тарифы: одна шкала поверхностей ---------- */
#page-cabinet .premium-tiers { gap: var(--u-3); }
#page-cabinet .tier-card {
padding: var(--u-4) var(--u-5);
border-radius: var(--u-r-inner);
background: var(--u-fill);
box-shadow: inset 0 0 0 1px var(--u-line);
align-items: center;
transition: background .18s var(--u-ease), box-shadow .18s var(--u-ease);
}
#page-cabinet .tier-card:hover { background: var(--u-fill-2); }
html.rv-app.rv-d1 #page-cabinet .tier-card.tier-card-current {
background: rgba(211, 247, 120, .07) !important;
box-shadow: inset 0 0 0 1px rgba(211, 247, 120, .34) !important;
}
#page-cabinet .tier-head { font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--u-t1); }
#page-cabinet .tier-desc { font-size: 12px; line-height: 1.45; color: var(--u-t3); }
#page-cabinet .tier-price {
font-size: 16px; font-weight: 700; line-height: 1.2;
color: var(--u-accent) !important;
font-variant-numeric: tabular-nums;
}
#page-cabinet .tier-buy-btn { height: 36px; padding: 0 16px; font-size: 13px; }
/* ---------- Розыгрыши ---------- */
#page-cabinet .lottery-section { gap: var(--u-2); }
#page-cabinet .lottery-section + .lottery-section { margin-top: var(--u-4); }
#page-cabinet #createLotteryForm { gap: var(--u-3); }
#page-cabinet #createLotteryForm input,
#page-cabinet #createLotteryForm select {
height: 44px; padding: 0 var(--u-4);
border-radius: var(--u-r-inner);
background: var(--u-fill); color: var(--u-t1);
font-size: 13px;
box-shadow: inset 0 0 0 1px var(--u-line);
}
/* Планшет и мобильный: строго одна карточка в ряд */
@media (max-width: 1100px) {
#page-cabinet .dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; }
#page-cabinet .dashboard-grid > .action-card[id="lotteries"] { grid-column: auto !important; }
#page-cabinet .profile-header { padding: var(--u-5); }
#page-cabinet .action-card { padding: var(--u-5); }
#page-cabinet .ph-actions { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
#page-cabinet .profile-header {
padding: var(--u-4);
gap: var(--u-4);
flex-direction: column;
align-items: stretch;
}
#page-cabinet .profile-main { align-items: center; }
#page-cabinet .user-details h2 { font-size: 20px; }
#page-cabinet .user-stats { flex-wrap: wrap; }
#page-cabinet .ph-actions {
gap: var(--u-2);
flex-direction: column;
align-items: stretch;
}
#page-cabinet .ph-actions .btn { width: 100%; justify-content: center; }
#page-cabinet .action-card { padding: var(--u-4); gap: var(--u-3); }
#page-cabinet .referral-stats { grid-template-columns: minmax(0, 1fr); }
#page-cabinet .referral-stats > div { padding: var(--u-3); }
/* тариф: цена и кнопка уходят на свою строку */
#page-cabinet .tier-card { flex-wrap: wrap; row-gap: var(--u-3); }
#page-cabinet .tier-info { flex: 1 1 100%; }
#page-cabinet .tier-price { flex: 1 1 auto; }
#page-cabinet .tier-buy-btn { flex: 0 0 auto; }
}
/* ============================================================
UMBAY · Автоширина денежных значений (2026-11-10).
Поручение владельца: «цифры всегда помещаются на экране, авто ширина,
как в Excel» и «высота блока не сужается при маленькой сумме».
Подбор кегля — в app.js (`fitMoney`), здесь только геометрия:
строка суммы не сжимается по содержимому и не «дышит» по высоте.
Почему нельзя решить одним CSS: `clamp()` смотрит на ширину окна,
а не на ширину строки в ней. На 400px сумма `100 002 905,00` при
60px занимает 430px, и `justify-content:center` срезает края —
видно `00 002 905,00`. Поэтому кегль подбирается в JS по фактической
ширине текста (Range), а не по ширине вьюпорта.
Высота строки фиксирована по максимальному кеглю, иначе карточка
прыгает на 2-4px при каждой смене суммы.
============================================================ */
html.rv-home.rv-d1 .rv-amount {
justify-content: center;
/* GEM на одной базовой линии с цифрами. При align-items:center низ
«GEM» оказывался на 12-15px выше низа цифр — выглядело как
оторванная единица измерения. */
align-items: baseline;
}
/* «Доступно» и «В резерве» — всегда одна строка.
Сумма ширин таблеток 369px при доступных 343px сидит ровно на границе
переноса, а ширина меняется по ходу загрузки (padding карточки и
подмена шрифта на Inter). Отсюда «моргание»: сначала две строки,
через секунду одна. Перенос отключаем, кегль значений подбирает
fitPills() в app.js — так же, как у сумм. */
html.rv-home.rv-d1 .global-layout .home-balance-breakdown {
flex-wrap: nowrap !important;
}
html.rv-home.rv-d1 .global-layout .home-balance-breakdown > div {
white-space: nowrap;
flex: 0 1 auto;
min-width: 0;
}
html.rv-home.rv-d1 .global-layout .home-balance-breakdown dt,
html.rv-home.rv-d1 .global-layout .home-balance-breakdown dd {
white-space: nowrap;
}
html.rv-home.rv-d1 .rv-num,
html.rv-home.rv-d1 .global-layout .home-asset > strong,
html.rv-home.rv-d1 .global-layout .home-market-data > strong {
/* подгонка меняет только размер шрифта: строка всегда в одну линию */
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* Сумма на карточке актива: центрируем, чтобы не прилипала к левому краю
при уменьшении кегля. Высота та же, что у строки при 38px. */
html.rv-home.rv-d1 .global-layout .home-asset > strong {
display: flex;
align-items: flex-end;
justify-content: flex-start;
min-height: 42px;
max-width: 100%;
}
/* Цены в списке токенов: одна строка, без переноса на вторую строку */
html.rv-home.rv-d1 .global-layout .home-market-data > strong {
display: flex;
align-items: center;
min-height: 24px;
}
/* Баланс в шапке уступает место имени: сжимается он, а не пользователь */
html.rv-app.rv-d1 .global-layout .top-bar-coins {
min-width: 0;
flex: 0 1 auto;
}
/* Дело о подозрении: раскрывающаяся история сигналов (T24). */
.ad-history { border-radius:12px; background:var(--rv-glass); box-shadow:inset 0 0 0 1px var(--rv-line-soft); }
.ad-history summary { padding:10px 16px; cursor:pointer; font-size:13px; color:var(--rv-text-2); list-style:none; }
.ad-history summary::-webkit-details-marker { display:none; }
.ad-history summary::before { content:'▸'; margin-right:8px; color:var(--rv-text-3); }
.ad-history[open] summary::before { content:'▾'; }
.ad-history summary:hover { color:var(--rv-text); }
.ad-history-list { display:flex; flex-direction:column; gap:4px; margin:0; padding:0 16px 12px; list-style:none; }
.ad-history-row { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:12px; line-height:18px; }
.ad-history-row code { padding:1px 8px; border-radius:999px; background:var(--rv-glass-2); color:var(--rv-text-2); }