/* Тематическая адаптация индикатора доходов для светлых тем */ body[data-theme="sunrise"] .admin-net-label, body[data-theme="mint"] .admin-net-label { color: rgba(248,250,252,0.92); } /* --- iOS-like settings rows and switches (used in Notifications/Password) --- */ .settings-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .settings-row-left{min-width:0;} .settings-title{font-weight:800; font-size:1rem;} .settings-subtitle{font-size:0.88rem; opacity:0.85;} .settings-note{margin-top:8px; font-size:0.85rem; opacity:0.85;} .ios-switch{ position:relative; display:inline-block; width:52px; height:31px; flex:0 0 auto; } .ios-switch input{ opacity:0; width:0; height:0; } .ios-switch-slider{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.22); transition: background .18s ease, box-shadow .18s ease; border-radius:999px; border:1px solid rgba(255,255,255,0.26); } .ios-switch-slider:before{ content:""; position:absolute; height:27px; width:27px; left:2px; top:1.5px; background:rgba(255,255,255,0.95); transition: transform .18s ease; border-radius:999px; box-shadow:0 2px 10px rgba(0,0,0,0.22); } .ios-switch input:checked + .ios-switch-slider{ background:rgba(52,199,89,0.95); /* iOS green */ border-color:rgba(52,199,89,0.95); } .ios-switch input:checked + .ios-switch-slider:before{ transform: translateX(21px); } .ios-switch input:disabled + .ios-switch-slider{ opacity:0.55; cursor:not-allowed; } body[data-theme="sunrise"] .admin-net-value, body[data-theme="mint"] .admin-net-value { background: rgba(15,23,42,0.55); padding: 2px 10px; border-radius: 999px; backdrop-filter: blur(10px); } body[data-theme="sunrise"] .admin-net-income, body[data-theme="mint"] .admin-net-income { color: #fefce8; } body[data-theme="sunrise"] .admin-net-in { color: #bbf7d0; } body[data-theme="sunrise"] .admin-net-out { color: #fed7aa; } body[data-theme="sunrise"] .admin-net-available { color: #e0f2fe; } body[data-theme="mint"] .admin-net-in { color: #a7f3d0; } body[data-theme="mint"] .admin-net-out { color: #fed7aa; } body[data-theme="mint"] .admin-net-available { color: #e0f2fe; } :root { --color-bg: #0f172a; --color-bg-soft: #111827; --color-accent: #3b82f6; --color-accent-soft: rgba(59, 130, 246, 0.15); --color-text: #e5e7eb; --color-muted: #9ca3af; --color-danger: #ef4444; --radius-lg: 18px; --radius-md: 12px; --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.5); --color-divider: rgba(148,163,184,0.22); /* Opaque surface for floating panels (friends bubble, sheets, etc.) */ --bubble-bg: #111827; --bubble-item-bg: rgba(15, 23, 42, 0.96); --bubble-item-border: rgba(148,163,184,0.18); } /* Светлая тема */ body[data-theme="light"] { --color-bg: #f3f4f6; --color-bg-soft: #ffffff; --color-accent: #2563eb; --color-accent-soft: rgba(37, 99, 235, 0.15); --color-text: #111827; --color-muted: #4b5563; --color-divider: rgba(0,0,0,0.12); --bubble-bg: #ffffff; --bubble-item-bg: rgba(255,255,255,0.98); --bubble-item-border: rgba(0,0,0,0.08); } /* Тема Aurora (стеклянный тёмный стиль с подсветкой) */ body[data-theme="aurora"] { --color-bg: #050816; --color-bg-soft: rgba(15, 23, 42, 0.92); --color-accent: #ff7a1a; --color-accent-soft: rgba(255, 122, 26, 0.20); --color-text: #f9fafb; --color-muted: #9ca3af; --bubble-bg: #0b1020; --bubble-item-bg: rgba(15, 23, 42, 0.92); --bubble-item-border: rgba(148,163,184,0.18); background: radial-gradient(circle at top left, rgba(59,130,246,0.20), transparent 55%), radial-gradient(circle at bottom right, rgba(236,72,153,0.20), transparent 55%), #020617; color: var(--color-text); } /* Неоновая тема */ body[data-theme="neon"] { --color-bg: #020617; --color-bg-soft: #020617; --color-accent: #22c55e; --color-accent-soft: rgba(34, 197, 94, 0.18); --color-text: #e5e7eb; --color-muted: #6b7280; --bubble-bg: #020617; --bubble-item-bg: rgba(2, 6, 23, 0.92); --bubble-item-border: rgba(34,197,94,0.20); } /* Тёплая светлая тема Sunrise (оранжево-жёлтая) */ body[data-theme="sunrise"] { --color-bg: #fff7ed; /* тёплый кремовый */ --color-bg-soft: rgba(255, 255, 255, 0.95); --color-accent: #f97316; /* яркий оранжевый */ --color-accent-soft: rgba(249, 115, 22, 0.18); --color-text: #1f2937; --color-muted: #475569; --color-divider: rgba(0,0,0,0.10); /* Bubble panel surface should be distinct from the page background and cards inside */ --bubble-bg: rgba(255, 255, 255, 0.88); --bubble-item-bg: rgba(255,255,255,0.98); --bubble-item-border: rgba(0,0,0,0.08); background: radial-gradient(circle at 10% 0, rgba(251, 191, 36, 0.45), transparent 60%), radial-gradient(circle at 100% 100%, rgba(248, 113, 113, 0.40), transparent 55%), linear-gradient(to bottom, #fff7ed, #fef3c7); color: var(--color-text); } /* Светлая свежая тема Mint (зелёно-салатовая) */ body[data-theme="mint"] { --color-bg: #ecfdf3; /* мягкий мятный фон */ --color-bg-soft: rgba(255, 255, 255, 0.96); --color-accent: #16a34a; /* насыщенный зелёный */ --color-accent-soft: rgba(22, 163, 74, 0.18); --color-text: #052e16; --color-muted: #475569; --color-divider: rgba(0,0,0,0.10); /* Bubble panel surface should be distinct from the page background and cards inside */ --bubble-bg: rgba(255, 255, 255, 0.88); --bubble-item-bg: rgba(255,255,255,0.98); --bubble-item-border: rgba(0,0,0,0.08); background: radial-gradient(circle at 0 0, rgba(45, 212, 191, 0.40), transparent 60%), radial-gradient(circle at 100% 100%, rgba(132, 204, 22, 0.40), transparent 55%), linear-gradient(to bottom, #ecfdf3, #e0f2fe); color: var(--color-text); } /* Обогащённые шапка и нижнее меню для светлых тем */ body[data-theme="sunrise"] .app-header, body[data-theme="sunrise"] .app-bottom-nav { background: linear-gradient(to bottom, rgba(249, 115, 22, 0.98), rgba(234, 179, 8, 0.96)); border-color: rgba(249, 115, 22, 0.65); box-shadow: 0 14px 35px rgba(245, 158, 11, 0.45); } body[data-theme="mint"] .app-header, body[data-theme="mint"] .app-bottom-nav { background: linear-gradient(to bottom, rgba(34, 197, 94, 0.96), rgba(16, 185, 129, 0.94)); border-color: rgba(34, 197, 94, 0.70); box-shadow: 0 14px 35px rgba(13, 148, 136, 0.45); } body[data-theme="sunrise"] .app-bottom-nav .nav-item-active::before, body[data-theme="mint"] .app-bottom-nav .nav-item-active::before { background: radial-gradient(circle at center, rgba(255,255,255,0.95), rgba(255,255,255,0)); opacity: 0.9; } body[data-theme="sunrise"] .app-bottom-nav .nav-item-active .nav-item-icon, body[data-theme="mint"] .app-bottom-nav .nav-item-active .nav-item-icon { transform: translateY(-3px) scale(1.05); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } /* Safe area variables (iOS notch / Telegram WebView / standalone). Use env(..., 0px) so it works even when @supports() behaves inconsistently. */ :root{ /* env() for modern iOS; constant() fallback for older iOS webviews */ --safe-top: env(safe-area-inset-top, constant(safe-area-inset-top, 0px)); --safe-bottom: env(safe-area-inset-bottom, constant(safe-area-inset-bottom, 0px)); --app-header-h: 62px; --app-nav-h: 60px; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top, rgba(59,130,246,0.15), transparent 55%), var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } /* Оболочка приложения */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; background: transparent; position: relative; overflow-x: hidden; } .app-header { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--app-header-h) + var(--safe-top)); padding: var(--safe-top) 12px 0; display: flex; align-items: center; justify-content: flex-start; background: linear-gradient(to bottom, rgba(15,23,42,0.99), rgba(15,23,42,0.97)); backdrop-filter: blur(14px); box-shadow: 0 10px 25px rgba(0,0,0,0.6); border-bottom: 1px solid rgba(148,163,184,0.35); z-index: 40; } .header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .header-left .logo-image { flex: 1; min-width: 0; } .header-left .logo { font-weight: 800; letter-spacing: 0.14em; font-size: 14px; color: var(--color-text); text-transform: uppercase; } .header-right { display: flex; align-items: center; gap: 5px; margin-left: auto; } /* User tools (icons row + balance under icons) */ .header-user-tools{display:flex;flex-direction:column;align-items:flex-end;gap:2px;} .header-icons-row{display:flex;align-items:center;gap:8px;} .header-balance-corner{font-size:13px;font-weight:900;line-height:1;color:var(--color-accent);text-shadow:0 0 12px rgba(59,130,246,.22);font-variant-numeric:tabular-nums;} .header-balance-corner .header-balance-unit{font-size:11px;font-weight:800;margin-left:6px;color:var(--color-text);opacity:.88;} .header-balance-corner.is-animating{filter:drop-shadow(0 0 10px rgba(255,214,10,0.20));} /* Highlighted header wallet badge (distinct from normal buttons; readable on all themes) */ /* Wallet badge + gift icon wrap (keeps icons aligned on one line) */ .header-balance-wrap{ display:inline-flex; align-items:center; gap:8px; } .wallet-badge{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:linear-gradient(135deg, rgba(2,6,23,0.78), rgba(2,6,23,0.38)); color:#f8fafc; text-decoration:none; box-shadow:0 12px 26px rgba(0,0,0,0.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transform:translateZ(0); } .wallet-badge::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(90deg, var(--color-accent), rgba(255,255,255,0.35), var(--color-accent)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0.95; pointer-events:none; } .wallet-badge #headerBalanceAmount{color:#f8fafc;text-shadow:0 0 14px rgba(255,255,255,0.08), 0 0 18px rgba(59,130,246,0.18);} .wallet-badge .header-balance-unit{color:rgba(248,250,252,0.86);opacity:1;} .wallet-badge:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(0,0,0,0.42);} .wallet-badge:active{transform:translateY(0px);box-shadow:0 12px 26px rgba(0,0,0,0.35);} .wallet-badge.is-animating{animation:walletBadgePulse 900ms ease-in-out 0ms 1;} @keyframes walletBadgePulse{0%{filter:drop-shadow(0 0 0 rgba(255,214,10,0.00));}50%{filter:drop-shadow(0 0 14px rgba(255,214,10,0.20));}100%{filter:drop-shadow(0 0 0 rgba(255,214,10,0.00));}} /* Extra contrast for bright header themes */ body[data-theme="sunrise"] .wallet-badge, body[data-theme="mint"] .wallet-badge{ background:linear-gradient(135deg, rgba(15,23,42,0.72), rgba(15,23,42,0.38)); } .admin-net-indicator { display: flex; flex-direction: column; align-items: flex-end; margin-right: 4px; } .admin-net-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(148,163,184,0.9); margin-bottom: 2px; } .admin-net-value { font-size: 18px; font-weight: 700; line-height: 1; } .admin-net-extra { font-size: 12px; font-weight: 600; margin-left: 4px; } .admin-net-bracket, .admin-net-sep { color: var(--color-text); } .admin-net-in { color: #22c55e; /* зелёный для внесений */ } .admin-net-out { color: #fb923c; /* оранжевый для обязательств по выплатам */ } .header-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: rgba(15, 23, 42, 0.8); color: var(--color-text); text-decoration: none; font-size: 16px; cursor: pointer; transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; } .header-gift-near-balance{transform:none;margin-right:8px;} .promo-hidden{display:none !important;} .header-icon:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,0.35); background: rgba(30, 64, 175, 0.85); } .notification-icon .badge { position: absolute; top: -4px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #f9fafb; font-size: 8px; display: inline-flex; align-items: center; justify-content: center; } /* Языковое меню */ .lang-switcher { position: relative; } .lang-menu, .theme-menu { position: absolute; right: 0; top: 110%; min-width: 140px; padding: 6px; border-radius: 12px; background: rgba(15,23,42,0.98); color: #f9fafb; box-shadow: 0 18px 40px rgba(0,0,0,0.6); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease; z-index: 5000; } .lang-menu { min-width: 190px; max-height: min(520px, calc(100dvh - var(--app-header-h, 62px) - 28px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.62) transparent; } .lang-menu::-webkit-scrollbar { width: 7px; } .lang-menu::-webkit-scrollbar-track { background: transparent; } .lang-menu::-webkit-scrollbar-thumb { background: rgba(148,163,184,.55); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; } .lang-switcher.open .lang-menu, .theme-switcher.open .theme-menu { opacity: 1; pointer-events: auto; transform: translateY(0); } .lang-menu a { display: block; padding: 6px 9px; border-radius: 8px; color: #f9fafb; text-shadow: 0 1px 1px rgba(0,0,0,0.35); font-size: 13px; text-decoration: none; } .theme-menu a { display: block; padding: 6px 9px; border-radius: 8px; color: #f9fafb; text-shadow: 0 1px 1px rgba(0,0,0,0.35); font-size: 13px; text-decoration: none; } .theme-menu a:hover { background: rgba(55,65,81,0.8); } .lang-menu a:hover { background: rgba(55,65,81,0.8); } /* Основной контент */ .app-main { flex: 1 1 auto; /* 62px header + small breathing room; keep bottom space for fixed nav */ padding: calc(var(--app-header-h) + var(--safe-top) + 16px) 16px calc(var(--app-nav-h) + var(--safe-bottom) + 60px); width: 100%; max-width: 1080px; margin: 0 auto; } /* Guest pages (no bottom nav): avoid large empty padding that creates scroll */ body.guest-layout .app-main{ padding-bottom: calc(var(--safe-bottom) + 28px); } .screen { background: linear-gradient(145deg, rgba(15,23,42,0.96), rgba(17,24,39,0.96)); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); padding: 16px 14px 18px; /* Единая ширина основного блока на всех страницах */ max-width: 716px; margin: 0 auto 16px; border: 1px solid rgba(148,163,184,0.24); animation: screenIn 0.25s ease-out; } /* Center page titles in user area */ body:not(.admin-layout) .screen h1{ text-align:center; } /* Page header row with back button: keep title centered visually */ .page-header-row{ display:grid; grid-template-columns:40px 1fr 40px; align-items:center; column-gap:10px; margin:0 0 12px 0; } .page-header-row:after{content:'';} .page-header-row .back-btn{justify-self:start;} /* When back button is removed (nested screens dismissed by swipe), h1 becomes the first child. Force it to the middle grid column so titles stay centered on all pages. */ .page-header-row h1{justify-self:center; grid-column:2;} .screen.screen-auth { max-width: 420px; margin-top: 13vh; margin-bottom: 24px; padding: 20px 18px 22px; } .screen.screen-auth h1 { text-align: center; font-size: 1.3rem; margin-bottom: 18px; } .screen.screen-auth .form { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; } .screen.screen-auth label { display: flex; flex-direction: column; gap: 4px; font-size: 0.94rem; } .screen.screen-auth button[type="submit"] { width: 100%; margin-top: 16px; } .screen.screen-auth p { text-align: center; margin-top: 14px; } body[data-theme="light"] .screen { background: #ffffff; border-color: rgba(148,163,184,0.4); } body[data-theme="aurora"] .screen { background: radial-gradient(circle at top left, rgba(59,130,246,0.18), transparent 55%), radial-gradient(circle at bottom right, rgba(236,72,153,0.16), transparent 55%), #020617; border-color: rgba(148,163,184,0.28); } body[data-theme="neon"] .screen { background: radial-gradient(circle at top left, rgba(56,189,248,0.12), transparent 55%), #020617; border-color: rgba(56,189,248,0.25); } body[data-theme="sunrise"] .screen { background: radial-gradient(circle at top left, rgba(251,191,36,0.35), transparent 60%), radial-gradient(circle at bottom right, rgba(248,113,113,0.30), transparent 60%), rgba(255,255,255,0.96); border-color: rgba(251,191,36,0.55); box-shadow: 0 22px 50px rgba(245,158,11,0.38); } body[data-theme="mint"] .screen { background: radial-gradient(circle at top left, rgba(45,212,191,0.30), transparent 60%), radial-gradient(circle at bottom right, rgba(132,204,22,0.30), transparent 60%), rgba(255,255,255,0.97); border-color: rgba(34,197,94,0.45); box-shadow: 0 22px 50px rgba(13,148,136,0.36); } .screen h1, .screen h2 { margin: 0 0 10px; font-size: 18px; } .screen p { margin: 4px 0; color: var(--color-muted); font-size: 14px; } /* Карточки */ /* Унифицированные списки карточек (жетоны, друзья, резерв и т.п.) */ .card-list, .cards-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .card-list .card, .cards-list .card { width: 100%; } .card { background: rgba(15,23,42,0.85); border-radius: var(--radius-md); padding: 10px 12px; margin: 10px 0; border: 1px solid rgba(148,163,184,0.35); } /* Profile: compact action cards (avoid duplicated title + single button) */ .action-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; color: inherit; padding: 14px 16px; } .action-card__title { font-weight: 600; font-size: 15px; line-height: 1.2; } .action-card__chev { font-size: 15px; opacity: 0.65; transform: translateY(-1px); } .action-card--danger .action-card__title { color: #f87171; } body[data-theme="aurora"] .card { background: rgba(15,23,42,0.78); border-radius: 18px; padding: 7px 8px; border: 1px solid rgba(148,163,184,0.35); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px); } body[data-theme="light"] .card { background: #f9fafb; } body[data-theme="sunrise"] .card { background: rgba(255,255,255,0.97); border-radius: 20px; border: 1px solid rgba(251,191,36,0.55); box-shadow: 0 16px 40px rgba(245,158,11,0.30); } body[data-theme="mint"] .card { background: rgba(255,255,255,0.98); border-radius: 20px; border: 1px solid rgba(45,212,191,0.55); box-shadow: 0 16px 40px rgba(13,148,136,0.28); } /* Формы и кнопк /* Notifications layout */ .card { overflow: hidden; } .notification-body { margin-top: 4px; font-size: 14px; line-height: 1.45; word-wrap: break-word; word-break: break-word; } .notification-body img { max-width: 100%; height: auto; display: block; border-radius: 0.75rem; margin: 6px 0; } /* Unread notifications (user-owned) */ .notif-unread { border-color: rgba(251, 146, 60, 0.75) !important; box-shadow: 0 12px 28px rgba(251, 146, 60, 0.18); } и */ .form, .form-inline { margin-top: 10px; } .form-inline { display: flex; gap: 5px; } .form label { display: block; font-size: 13px; color: var(--color-muted); margin-bottom: 6px; } /* Поле выбора даты (дата рождения и т.п.) в стиле остальных инпутов */ input[type="date"] { width: 100%; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(148,163,184,0.5); /* iOS Safari иногда рисует date-инпут слишком низким. Фиксируем высоту и отступы, чтобы было как у остальных полей. */ padding: 10px 12px; min-height: 40px; height: 40px; line-height: 1.2; background: rgba(15,23,42,0.8); color: var(--color-text); font-size: 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; -webkit-appearance: none; } body[data-theme="light"] input[type="date"] { background: #ffffff; } body[data-theme="sunrise"] input[type="date"] { background: rgba(255,255,255,0.96); border-color: rgba(249,115,22,0.55); color: #7c2d12; box-shadow: 0 10px 24px rgba(245,158,11,0.25); } body[data-theme="mint"] input[type="date"] { background: rgba(255,255,255,0.97); border-color: rgba(34,197,94,0.55); color: #064e3b; box-shadow: 0 10px 24px rgba(16,185,129,0.22); } /* Акцент при фокусе */ input[type="date"]:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px rgba(59,130,246,0.4); background: var(--color-bg-soft); } /* Иконка календаря под тёмную тему (WebKit-браузеры) */ input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(80%); cursor: pointer; } body[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator, body[data-theme="sunrise"] input[type="date"]::-webkit-calendar-picker-indicator, body[data-theme="mint"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0%); opacity: 0.75; } /* Убираем жёсткий внутренний фон в Chrome */ input[type="date"]::-webkit-datetime-edit { color: inherit; padding: 0; } /* Mobile tweak for date input */ @media (max-width: 420px) { input[type="date"] { min-height: 44px; height: 44px; padding: 12px 12px; } } input[type="text"], input[type="password"], input[type="number"], input[type="tel"] { width: 100%; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(148,163,184,0.5); padding: 8px 12px; min-height: 34px; line-height: 1.2; background: rgba(15,23,42,0.8); color: var(--color-text); font-size: 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } /* Телефон: префикс "+" вынесен за поле ввода */ .phone-field { display: flex; gap: 10px; align-items: center; width: 100%; } .phone-prefix { flex: 0 0 auto; min-height: 34px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.5); background: rgba(15,23,42,0.8); color: var(--color-text); font-size: 14px; line-height: 1.2; display: flex; align-items: center; justify-content: center; } body[data-theme="light"] .phone-prefix { background: #ffffff; } body[data-theme="sunrise"] .phone-prefix { background: rgba(255,255,255,0.96); border-color: rgba(249,115,22,0.55); color: #7c2d12; box-shadow: 0 10px 24px rgba(245,158,11,0.25); } body[data-theme="mint"] .phone-prefix { background: rgba(255,255,255,0.97); border-color: rgba(34,197,94,0.55); color: #064e3b; box-shadow: 0 10px 24px rgba(16,185,129,0.22); } body[data-theme="light"] input[type="text"], body[data-theme="light"] input[type="password"], body[data-theme="light"] input[type="number"], body[data-theme="light"] input[type="tel"] { background: #ffffff; } body[data-theme="sunrise"] input[type="text"], body[data-theme="sunrise"] input[type="password"], body[data-theme="sunrise"] input[type="number"], body[data-theme="sunrise"] input[type="tel"] { background: rgba(255,255,255,0.96); border-color: rgba(249,115,22,0.55); color: #7c2d12; box-shadow: 0 10px 24px rgba(245,158,11,0.25); } body[data-theme="mint"] input[type="text"], body[data-theme="mint"] input[type="password"], body[data-theme="mint"] input[type="number"], body[data-theme="mint"] input[type="tel"] { background: rgba(255,255,255,0.97); border-color: rgba(34,197,94,0.55); color: #064e3b; box-shadow: 0 10px 24px rgba(16,185,129,0.22); } input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px rgba(59,130,246,0.5); } body[data-theme="sunrise"] input:focus { border-color: rgba(249,115,22,0.95); box-shadow: 0 0 0 1px rgba(249,115,22,0.55); } body[data-theme="mint"] input:focus { border-color: rgba(34,197,94,0.95); box-shadow: 0 0 0 1px rgba(16,185,129,0.55); } input::placeholder { color: var(--color-muted); opacity: 0.85; } .btn-primary, .btn-secondary, .btn-danger { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 8px 16px; font-size: 14px; border: none; cursor: pointer; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, opacity 0.12s ease; white-space: nowrap; } .btn-primary { background: linear-gradient(to right, var(--color-accent), #60a5fa); color: #f9fafb; box-shadow: 0 12px 30px rgba(37,99,235,0.6); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(37,99,235,0.7); } .btn-secondary { background: rgba(31,41,55,0.9); color: var(--color-text); } .btn-secondary:hover { background: rgba(55,65,81,0.95); } .btn-danger { background: #b91c1c; color: #fee2e2; } .btn-danger:hover { background: #dc2626; } /* Светлая тема: повышенная контрастность кнопок и админ-навигации */ body[data-theme="light"] .btn-primary { background: linear-gradient(to right, #2563eb, #3b82f6); color: #f9fafb; box-shadow: 0 10px 22px rgba(37,99,235,0.35); } body[data-theme="light"] .btn-secondary { background: #e5e7eb; color: #111827; border: 1px solid #cbd5e1; box-shadow: none; } body[data-theme="light"] .btn-secondary:hover { background: #dbe2eb; } body[data-theme="light"] .btn-danger { background: #b91c1c; color: #fee2e2; } /* Админ-навигация в светлой теме */ body[data-theme="light"] .admin-nav-link { background: #e5e7eb; color: #111827; border-color: rgba(148,163,184,0.9); } body[data-theme="light"] .admin-nav-link:hover { background: #dbe2eb; } body[data-theme="light"] .admin-nav-active { background: var(--color-accent); border-color: rgba(37,99,235,0.8); color: #0b1120; } /* Темы Sunrise и Mint: кнопки и админ-навигация */ body[data-theme="sunrise"] .btn-primary { background: linear-gradient(to right, #f97316, #fbbf24); color: #1f2937; box-shadow: 0 12px 26px rgba(248, 163, 25, 0.55); } body[data-theme="sunrise"] .btn-secondary { background: rgba(255, 255, 255, 0.9); color: #92400e; border: 1px solid rgba(249, 115, 22, 0.45); box-shadow: none; } body[data-theme="mint"] .btn-primary { background: linear-gradient(to right, #22c55e, #14b8a6); color: #ecfdf3; box-shadow: 0 12px 26px rgba(16, 185, 129, 0.55); } body[data-theme="mint"] .btn-secondary { background: rgba(255, 255, 255, 0.9); color: #064e3b; border: 1px solid rgba(34, 197, 94, 0.45); box-shadow: none; } /* Админ-навигация для Sunrise и Mint */ body[data-theme="sunrise"] .admin-nav-link { background: rgba(255,255,255,0.75); color: #7c2d12; border-color: rgba(251,191,36,0.95); box-shadow: 0 10px 26px rgba(180, 83, 9, 0.55); } body[data-theme="sunrise"] .admin-nav-active { background: rgba(251,191,36,0.96); border-color: rgba(245,158,11,0.95); color: #1f2933; } body[data-theme="mint"] .admin-nav-link { background: rgba(255,255,255,0.80); color: #064e3b; border-color: rgba(34,197,94,0.95); box-shadow: 0 10px 26px rgba(15,118,110,0.40); } body[data-theme="mint"] .admin-nav-active { background: rgba(34,197,94,0.96); border-color: rgba(16,185,129,0.95); color: #022c22; } /* Выпадающие меню языка/темы в светлой теме */ body[data-theme="light"] .lang-menu, body[data-theme="light"] .theme-menu { background: rgba(255,255,255,0.98); border: 1px solid rgba(148,163,184,0.45); box-shadow: 0 18px 40px rgba(15,23,42,0.16); } body[data-theme="light"] .lang-menu a { color: #111827; } .btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: translateY(1px); box-shadow: none; opacity: 0.9; } /* Сообщения */ .success { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(22,163,74,0.12); color: #bbf7d0; font-size: 13px; } .error { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(239,68,68,0.12); color: #fecaca; font-size: 13px; } /* Таблицы */ .table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; } .table th, .table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid rgba(55,65,81,0.6); white-space: normal; word-wrap: break-word; word-break: break-word; } .table th { font-weight: 600; color: var(--color-muted); } /* Нижняя навигация */ .app-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--app-nav-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); display: flex; justify-content: space-around; align-items: stretch; background: linear-gradient(to top, rgba(15,23,42,0.99), rgba(15,23,42,0.97)); backdrop-filter: blur(14px); box-shadow: 0 -10px 25px rgba(0,0,0,0.7); border-top: 1px solid rgba(15,23,42,0.9); z-index: 45; } .nav-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 8px; color: var(--color-muted); text-decoration: none; } .nav-item-icon { font-size: 18px; } .nav-item-label { font-size: 8px; } /* Плавающая кнопка установки PWA */ .install-app-btn { cursor: pointer; text-decoration: none; position: fixed; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding: 8px 12px; border-radius: 999px; border: none; background: var(--color-accent, #3b82f6); color: #ffffff; font-size: 12px; box-shadow: 0 10px 20px rgba(15,23,42,0.4); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 60; } .install-app-btn.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Hide install button inside installed PWA (no flash) */ @media (display-mode: standalone) { .install-app-btn, [data-install-app] { display: none !important; } } /* Эффекты */ .effect-layer { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 35; } /* Generic small fade used by partial diff removals */ .fade-out-remove{ opacity:0; transform: translateY(4px) scale(0.995); transition: opacity .18s ease, transform .18s ease; } .effect-particle { position: absolute; top: -10%; animation-name: effect-fall; animation-timing-function: linear; animation-iteration-count: 1; will-change: transform, opacity; } @keyframes effect-fall { 0% { transform: translate3d(0, -10%, 0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(var(--drift-x, 20px), 110vh, 0) rotate(360deg); opacity: 0; } } @keyframes effect-fall-no-rotate { 0% { transform: translate3d(0, -10%, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(var(--drift-x, 20px), 110vh, 0); opacity: 0; } } /* Админ-панель */ .admin-wrapper { display: flex; flex-direction: column; gap: 12px; } .admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .admin-nav a { flex: 1 1 auto; min-width: 90px; text-align: center; border-radius: 999px; padding: 6px 10px; background: rgba(15,23,42,0.9); color: var(--color-text); font-size: 12px; text-decoration: none; } .admin-nav a:hover { background: rgba(255,255,255,0.10); } /* Hover-состоитния для админ-навигации в темах Sunrise и Mint */ body[data-theme="sunrise"] .admin-nav-link:hover { background: rgba(251,191,36,0.24); color: #7c2d12; } body[data-theme="mint"] .admin-nav-link:hover { background: rgba(45,212,191,0.20); color: #022c22; } /* Анимации */ @keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Небольшой твик под большие экраны */ @media (min-width: 768px) { .app-main { padding-top: 72px; padding-bottom: 84px; } } .app-bottom-nav .nav-item { position: relative; padding-top: 6px; padding-bottom: 6px; } .nav-item-active { color: var(--color-accent); } .nav-item-active .nav-item-icon { transform: translateY(-1px) scale(1.05); } .nav-item-active .nav-item-label { font-weight: 700; } /* Тематическая раскраска нижней навигации для Sunrise и Mint */ body[data-theme="sunrise"] .app-bottom-nav .nav-item { color: rgba(255,255,255,0.92); text-shadow: 0 0 6px rgba(0,0,0,0.35); font-weight: 500; } body[data-theme="sunrise"] .app-bottom-nav .nav-item-active { color: #7c2d12; text-shadow: none; } body[data-theme="mint"] .app-bottom-nav .nav-item { color: rgba(241,245,249,0.95); text-shadow: 0 0 6px rgba(0,0,0,0.35); font-weight: 500; } body[data-theme="mint"] .app-bottom-nav .nav-item-active { color: #022c22; text-shadow: none; } /* Подсветка активного пункта нижней навигации */ .app-bottom-nav .nav-item-active::before { content: ''; position: absolute; inset: 6px 18%; border-radius: 999px; background: rgba(59,130,246,0.18); box-shadow: 0 0 0 1px rgba(59,130,246,0.55); z-index: -1; } .theme-menu button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 2px; border-radius: 999px; border: none; background: rgba(31,41,55,0.9); color: #f9fafb; cursor: pointer; font-size: 14px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .theme-menu button:hover { background: rgba(59,130,246,0.9); } .admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .admin-nav-link { flex: 1 1 auto; min-width: 90px; text-align: center; border-radius: 999px; padding: 6px 10px; background: rgba(15,23,42,0.9); color: var(--color-text); font-size: 12px; text-decoration: none; border: 1px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .admin-nav-link:hover { background: rgba(37,99,235,0.85); transform: translateY(-1px); } .admin-nav-active { background: var(--color-accent); border-color: rgba(191,219,254,0.9); color: #0b1120; box-shadow: 0 10px 25px rgba(37,99,235,0.6); } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 14px; } .cards .card h3 { margin-top: 0; margin-bottom: 6px; font-size: 15px; } .cards .card p { margin: 2px 0; font-size: 13px; } .badge-status { display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; font-size: 8px; font-weight: 500; } .badge-status-pending { background: rgba(234,179,8,0.18); color: #facc15; } .badge-status-approved { background: rgba(22,163,74,0.18); color: #4ade80; } .badge-status-rejected { background: rgba(239,68,68,0.18); color: #fca5a5; } .table tr:hover { background: rgba(15,23,42,0.6); } .dropzone { margin-top: 8px; padding: 16px; border-radius: 16px; border: 1px dashed rgba(148,163,184,0.8); text-align: center; font-size: 13px; cursor: pointer; background: rgba(15,23,42,0.6); transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; position: relative; } .dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dropzone:hover { border-color: rgba(96,165,250,0.9); background: rgba(15,23,42,0.9); transform: translateY(-1px); } .dropzone.dragover { border-color: rgba(56,189,248,1); background: rgba(15,23,42,1); } .content-image-preview img { max-width: 180px; max-height: 100px; object-fit: contain; border-radius: 16px; border: 1px solid rgba(148,163,184,0.6); background: rgba(15,23,42,0.8); } .logo-preview img { max-width: 160px; max-height: 80px; object-fit: contain; } .icon-preview { max-width: 80px; max-height: 80px; object-fit: contain; border-radius: 16px; border: 1px solid rgba(148,163,184,0.6); background: rgba(15,23,42,0.8); display: inline-block; } .logo-image img { width: auto; max-width: 100%; object-fit: contain; } /* Header logo should use full available header height (without affecting admin previews) */ .app-header .header-left .logo-image{ height: calc(var(--app-header-h) - 8px); display:flex; align-items:center; } .app-header .header-left .logo-image img{ height: 100%; max-height: 100%; } .token-icon-preview img { max-width: 48px; max-height: 48px; object-fit: contain; } .token-workgif-preview { margin-top: 8px; } .token-workgif-preview img { max-width: 72px; max-height: 72px; object-fit: contain; } @keyframes cardFadeIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } } .card { animation: cardFadeIn 0.25s ease-out; } .icon-svg { width: 20px; height: 20px; display: inline-block; vertical-align: middle; } .theme-icon { width: 21px; height: 21px; display: inline-block; vertical-align: middle; } .app-bottom-nav .nav-item-icon img { width: 22px; height: 22px; } /* Bottom nav: promo dot on "Моё" when there are active promotions */ .nav-item-icon-with-dot{position:relative; display:inline-flex; align-items:center; justify-content:center;} .nav-promo-dot{ position:absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 999px; background: #ef4444; box-shadow: 0 0 0 2px rgba(15,23,42,0.85), 0 0 14px rgba(239,68,68,0.55); opacity: 0; transform: scale(0.7); pointer-events:none; } .nav-promo-dot.is-on{opacity:1; transform: scale(1); animation: promoDotPulse 1.35s infinite;} @keyframes promoDotPulse{ 0%{ transform: scale(0.9); opacity: 0.9; } 50%{ transform: scale(1.2); opacity: 1; } 100%{ transform: scale(0.9); opacity: 0.9; } } .nav-item { transition: color 0.15s ease-out, background 0.15s ease-out; } .nav-item-icon { transition: transform 0.15s ease-out, opacity 0.15s ease-out; } .token-card { display: flex; flex-direction: column; align-items: flex-start; } .token-image-wrap { width: calc(64px * var(--token-image-scale, 1)); height: calc(64px * var(--token-image-scale, 1)); border-radius: 18px; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body[data-theme="sunrise"] .token-image-wrap { background: radial-gradient(circle at 30% 0, rgba(251,191,36,0.70), rgba(249,115,22,0.85)); box-shadow: 0 12px 28px rgba(245,158,11,0.45); } body[data-theme="mint"] .token-image-wrap { background: radial-gradient(circle at 30% 0, rgba(45,212,191,0.75), rgba(16,185,129,0.90)); box-shadow: 0 12px 28px rgba(13,148,136,0.45); } .token-image-wrap img { max-width: calc(52px * var(--token-image-scale, 1)); max-height: calc(52px * var(--token-image-scale, 1)); object-fit: contain; } /* Переходы между экранами в духе мобильных приложений */ .app-main { position: relative; will-change: transform, opacity; transition: transform 0.18s ease-out, opacity 0.18s ease-out; } .app-main.screen-slide-out { transform: translateX(-12px); opacity: 0.4; } .app-main.spa-exit-left { transform: translateX(-12px); opacity: 0.4; } .app-main.spa-exit-right { transform: translateX(12px); opacity: 0.4; } /* iOS-like swipe exit for main pages */ .app-main.spa-exit-ios-left { transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.36s cubic-bezier(0.22, 0.61, 0.36, 1); transform: translateX(-52vw) scale(0.985); opacity: 0.6; } .app-main.spa-exit-ios-right { transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.36s cubic-bezier(0.22, 0.61, 0.36, 1); transform: translateX(52vw) scale(0.985); opacity: 0.6; } .friend-card { display: flex; flex-direction: column; gap: 5px; } .friend-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .friend-avatar { width: 28px; height: 28px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(96,165,250,1), rgba(15,23,42,1)); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; } .friend-meta { flex: 1; display: flex; flex-direction: column; } .friend-name { font-size: 15px; font-weight: 600; } .friend-sub { font-size: 12px; opacity: 0.7; } /* Realtime: highlight newly appeared cards (friends/notifications/etc.) */ .realtime-new { will-change: transform, opacity; animation: realtimePopIn 0.42s ease-out; } @keyframes realtimePopIn { from { transform: translateY(8px) scale(0.985); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Realtime: highlight newly prepended table rows (history, etc.) */ tr.realtime-row-new { animation: realtimeRowFlash 1.6s ease-out; } @keyframes realtimeRowFlash { 0% { background-color: rgba(34, 197, 94, 0.22); } 70% { background-color: rgba(34, 197, 94, 0.10); } 100% { background-color: transparent; } } .friend-status { font-size: 12px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.5); } .friend-status.online { border-color: rgba(52,211,153,0.9); color: rgba(52,211,153,1); } .friend-status.offline { opacity: 0.7; } .friend-footer { font-size: 8px; opacity: 0.7; } /* Friends 2.0: bubble panel (friends-of-a-friend) */ .friend-bubble-overlay{ /* Mounted inside #app-main (see friends_page.js), so it must be absolute, otherwise iOS Safari may misplace the panel when SPA applies transforms. */ position: absolute; inset: 0; z-index: 60; pointer-events: auto; } .friend-bubble-overlay .fbo-backdrop{ position: absolute; inset: 0; /* IMPORTANT: do not dim the page behind the bubble. The user requested that only the bubble itself is opaque, while the underlying screen stays visually unchanged. We keep the backdrop as a transparent click-catcher. */ background: transparent; opacity: 1; transition: none; } .friend-bubble-overlay.open .fbo-backdrop{ opacity: 1; } .friend-bubble-panel{ position: absolute; top: var(--fbo-top, 60px); right: var(--fbo-right, 0px); width: min(70vw, 420px); max-width: 70vw; /* The bubble must be opaque; otherwise underlying screen bleeds through. Use theme variables so the panel matches all themes. */ background: var(--bubble-bg, var(--color-bg-soft)); color: var(--color-text); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--color-divider); border-radius: 22px; box-shadow: 0 18px 50px rgba(0,0,0,0.22); overflow: hidden; transform: translate(var(--fbo-from-x, 0px), var(--fbo-from-y, 0px)) scale(0.22); transform-origin: 0 0; opacity: 0; transition: transform 640ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 220ms ease, border-radius 640ms cubic-bezier(0.2, 0.9, 0.2, 1); } .friend-bubble-overlay.open .friend-bubble-panel{ transform: translate(0px, 0px) scale(1); opacity: 1; border-radius: 18px; } .friend-bubble-inner{ padding: 14px 14px 12px; } .friend-bubble-header{ margin-bottom: 10px; } .friend-bubble-title{ font-weight: 800; font-size: 14px; } .friend-bubble-sub{ font-size: 12px; opacity: 0.75; } .friend-bubble-empty{ font-size: 13px; opacity: 0.8; padding: 10px 0; } .friend-bubble-list{ display: flex; flex-direction: column; gap: 5px; max-height: min(70vh, 420px); overflow: auto; padding-right: 4px; } .friend-bubble-item{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; /* Items inside the bubble must follow theme colors */ background: var(--bubble-item-bg, var(--color-bg-soft)); border: 1px solid var(--bubble-item-border, var(--color-divider)); cursor: pointer; -webkit-tap-highlight-color: transparent; } .friend-bubble-item:active{ transform: scale(0.99); } .friend-bubble-avatar{ position: relative; width: 38px; height: 38px; flex: 0 0 38px; } .friend-bubble-avatar-circle{ width: 38px; height: 38px; border-radius: 999px; background: rgba(148,163,184,0.22); display: flex; align-items: center; justify-content: center; overflow: hidden; } .friend-bubble-avatar-circle img{ width: 100%; height: 100%; object-fit: cover; } .friend-bubble-avatar-circle span{ font-weight: 800; } /* v6.7.42: вложенные друзья используют такую же цветную обводку аватара, как основной список друзей. */ .friend-bubble-avatar-circle{ border: 2px solid var(--color-accent, #f59e0b); box-sizing: border-box; box-shadow: 0 0 0 2px rgba(255,255,255,.72), 0 6px 16px rgba(15,23,42,.14); } .friend-bubble-meta{ min-width: 0; } .friend-bubble-name{ font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .friend-bubble-phone{ font-size: 12px; opacity: 0.75; } .friend-bubble-panel .avatar-team-level{ position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; font-size: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.18); } .friend-card{ cursor: pointer; } .rating-filters { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 13px; } .rating-actions { margin-top: 8px; font-size: 12px; } .chip { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.6); text-decoration: none; font-size: 12px; } .chip-active { background: radial-gradient(circle at 10% 0, rgba(56,189,248,0.9), rgba(15,23,42,1)); border-color: transparent; } .rating-card { display: flex; flex-direction: column; gap: 6px; } .rating-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rating-rank { font-weight: 700; font-size: 16px; } .rating-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; } .rating-name { font-size: 14px; font-weight: 600; } .rating-id { font-size: 8px; opacity: 0.7; } .rating-sub { font-size: 12px; opacity: 0.7; } .rating-badge { min-width: 72px; text-align: right; font-size: 8px; } .rating-value { display: block; font-size: 14px; font-weight: 600; } .rating-label { opacity: 0.7; } .rating-stats { display: flex; flex-wrap: wrap; gap: 5px; font-size: 8px; opacity: 0.8; } .profile-header-card { display: flex; flex-direction: column; gap: 10px; position: relative; } /* Profile promotions gift icon (moved from header) */ .profile-promo-gift{ position:absolute; right: 14px; top: 14px; /* Bigger tap target, but visually no frame/background */ width: 58px; height: 58px; border-radius: 18px; display:flex; align-items:center; justify-content:center; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; z-index: 2; } .profile-promo-gift .icon-svg{ width: 60px; height: 60px; /* give some presence without a frame */ filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35)); } .profile-promo-gift:active{ transform: scale(0.96); } /* Attention animation: frequent short bursts (wiggle + pulse + shake) */ .promo-attention{ animation: promoAttention 9s infinite; transform-origin: 50% 55%; } @keyframes promoAttention { /* default rest */ 0%, 6%, 20%, 30%, 44%, 54%, 68%, 78%, 100% { transform: translate(0,0) rotate(0deg) scale(1); } /* Burst #1: wiggle */ 1% { transform: rotate(-14deg) scale(1.03); } 2% { transform: rotate(14deg) scale(1.03); } 3% { transform: rotate(-12deg) scale(1.04); } 4% { transform: rotate(12deg) scale(1.04); } 5% { transform: rotate(0deg) scale(1.02); } /* Burst #1: quick pulse */ 8% { transform: scale(1.18); } 10% { transform: scale(0.97); } 12% { transform: scale(1.22); } 14% { transform: scale(1.02); } /* Burst #1: shake */ 22% { transform: translate(-4px,0) rotate(-2deg) scale(1.05); } 23% { transform: translate(4px,0) rotate(2deg) scale(1.05); } 24% { transform: translate(-4px,0) rotate(-2deg) scale(1.05); } 25% { transform: translate(4px,0) rotate(2deg) scale(1.05); } 26% { transform: translate(-2px,0) rotate(-1deg) scale(1.03); } 27% { transform: translate(2px,0) rotate(1deg) scale(1.03); } /* Burst #2 */ 32% { transform: rotate(-12deg) scale(1.03); } 33% { transform: rotate(12deg) scale(1.03); } 34% { transform: rotate(-10deg) scale(1.04); } 35% { transform: rotate(10deg) scale(1.04); } 36% { transform: rotate(0deg) scale(1.02); } 38% { transform: scale(1.16); } 40% { transform: scale(0.98); } 42% { transform: scale(1.2); } 46% { transform: translate(-3px,0) rotate(-2deg) scale(1.04); } 47% { transform: translate(3px,0) rotate(2deg) scale(1.04); } 48% { transform: translate(-3px,0) rotate(-2deg) scale(1.04); } 49% { transform: translate(3px,0) rotate(2deg) scale(1.04); } 50% { transform: translate(0,0) rotate(0deg) scale(1.02); } /* Burst #3 */ 58% { transform: rotate(-12deg) scale(1.03); } 59% { transform: rotate(12deg) scale(1.03); } 60% { transform: rotate(-10deg) scale(1.04); } 61% { transform: rotate(10deg) scale(1.04); } 62% { transform: rotate(0deg) scale(1.02); } 64% { transform: scale(1.18); } 66% { transform: scale(0.98); } 70% { transform: translate(-4px,0) rotate(-2deg) scale(1.05); } 71% { transform: translate(4px,0) rotate(2deg) scale(1.05); } 72% { transform: translate(-4px,0) rotate(-2deg) scale(1.05); } 73% { transform: translate(4px,0) rotate(2deg) scale(1.05); } 74% { transform: translate(-2px,0) rotate(-1deg) scale(1.03); } 75% { transform: translate(2px,0) rotate(1deg) scale(1.03); } } .profile-coupon-widget { width: 100%; max-width: 100%; overflow: hidden; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; } .profile-coupon-widget--full { border-top: 1px solid rgba(148,163,184,0.14); padding-top: 12px; } .profile-coupon-widget__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .profile-coupon-widget__title { font-size: 14px; font-weight: 750; } .profile-coupon-widget__meta { font-size: 12px; opacity: 0.78; text-align: right; } .profile-bonus-stats { display: flex; flex-direction: column; gap: 4px; } .profile-bonus-stats p { margin: 0; } .coupon-stack { position: relative; width: 100%; max-width: 100%; overflow: hidden; padding-bottom: 8px; } .coupon-stack__viewport { position: relative; width: 100%; height: clamp(128px, 42vw, 190px); min-height: 128px; max-height: 190px; padding: 0; overflow: hidden; border-radius: 18px; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .coupon-card { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; height: 100%; min-height: 0; border: none; border-radius: 18px; padding: 0; display: block; text-align: left; color: #fff; background: transparent; box-shadow: 0 18px 34px rgba(15, 23, 42, 0.20); opacity: 0; pointer-events: none; transform: translate3d(0, 18px, 0) scale(0.92); transition: transform 260ms ease, opacity 220ms ease, box-shadow 260ms ease, filter 260ms ease; overflow: hidden; } .coupon-card__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; display: block; } .coupon-card__shade { position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(180deg, rgba(15,23,42,0.03) 0%, rgba(15,23,42,0.13) 100%); pointer-events: none; } .coupon-card__shine { position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(118deg, transparent 18%, rgba(255,255,255,0.20) 42%, transparent 58%); transform: translateX(-120%); animation: couponCardShine 4.8s ease-in-out infinite; pointer-events: none; } @keyframes couponCardShine { 0%, 18% { transform: translateX(-120%); } 32% { transform: translateX(130%); } 100% { transform: translateX(130%); } } .coupon-card__content { position: relative; z-index: 2; width: 100%; height: 100%; min-height: 0; padding: clamp(12px, 3.5vw, 18px) clamp(16px, 4.6vw, 24px); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .coupon-card__label { font-size: clamp(10px, 2.8vw, 13px); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.92; text-shadow: 0 2px 12px rgba(15, 23, 42, 0.25); } .coupon-card__amount { display: block; font-size: clamp(28px, 8vw, 42px); line-height: 1; font-weight: 900; letter-spacing: -0.04em; margin-top: 6px; text-shadow: 0 4px 18px rgba(15, 23, 42, 0.38); } .coupon-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: clamp(9px, 2.5vw, 12px); } .coupon-card__chip { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.20); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-weight: 800; letter-spacing: 0.04em; } .coupon-card__date { opacity: 0.96; text-shadow: 0 2px 12px rgba(15, 23, 42, 0.25); } .coupon-card.is-current { opacity: 1; pointer-events: auto; z-index: 5; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); box-shadow: 0 22px 38px rgba(15, 23, 42, 0.22); } .coupon-card.is-peek-1, .coupon-card.is-peek-2, .coupon-card.is-peek-3 { opacity: 1; pointer-events: auto; filter: saturate(0.96) brightness(0.94); } .coupon-card.is-peek-1 { z-index: 4; transform: translate3d(0, 8px, 0) rotate(1.2deg) scale(0.965); } .coupon-card.is-peek-2 { z-index: 3; transform: translate3d(0, 16px, 0) rotate(2.4deg) scale(0.93); } .coupon-card.is-peek-3 { z-index: 2; transform: translate3d(0, 24px, 0) rotate(3.6deg) scale(0.895); } .coupon-card.is-before { opacity: 0; z-index: 1; transform: translate3d(-22px, 8px, 0) rotate(-3deg) scale(0.9); } .coupon-card.is-after, .coupon-card.is-hidden { opacity: 0; z-index: 1; transform: translate3d(22px, 18px, 0) rotate(3deg) scale(0.9); } .coupon-stack__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; } .coupon-stack__nav { width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.24); background: rgba(15,23,42,0.18); color: var(--color-text, #fff); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .coupon-stack__nav:disabled { opacity: 0.35; cursor: default; } .coupon-stack__status { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; } .coupon-stack__pager { font-size: 11px; font-weight: 800; opacity: 0.86; } .coupon-stack__dots { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; } .coupon-stack__dot { width: 8px; height: 8px; border-radius: 999px; border: none; padding: 0; background: rgba(148,163,184,0.32); cursor: pointer; transition: transform 160ms ease, background 160ms ease; } .coupon-stack__dot.is-active { transform: scale(1.35); background: linear-gradient(135deg, #3b82f6, #a855f7); } .profile-coupon-history { margin-top: 14px; border-top: 1px solid rgba(148,163,184,0.14); padding-top: 12px; } .profile-coupon-history__title { font-size: 13px; font-weight: 800; margin-bottom: 8px; } .profile-coupon-history__list { display: flex; flex-direction: column; gap: 7px; max-height: 238px; overflow: auto; padding-right: 2px; } .profile-coupon-history__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid rgba(148,163,184,0.14); background: rgba(15,23,42,0.08); border-radius: 14px; padding: 9px 10px; } .profile-coupon-history__main, .profile-coupon-history__side { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .profile-coupon-history__side { align-items: flex-end; flex-shrink: 0; } .profile-coupon-history__event, .profile-coupon-history__amount { font-size: 12px; font-weight: 800; } .profile-coupon-history__date, .profile-coupon-history__status { font-size: 10px; opacity: 0.72; } @media (max-width: 420px) { .coupon-stack__viewport { height: clamp(122px, 44vw, 166px); min-height: 122px; max-height: 166px; border-radius: 16px; } .coupon-card, .coupon-card__bg, .coupon-card__shade, .coupon-card__shine { border-radius: 16px; } .coupon-card.is-peek-1 { transform: translate3d(0, 7px, 0) rotate(1deg) scale(0.965); } .coupon-card.is-peek-2 { transform: translate3d(0, 14px, 0) rotate(2deg) scale(0.93); } .coupon-card.is-peek-3 { transform: translate3d(0, 21px, 0) rotate(3deg) scale(0.895); } } .profile-header-main { display: flex; align-items: center; gap: 12px; } .profile-avatar-wrap { position: relative; width: 64px; height: 64px; } .avatar-circle { width: 100%; height: 100%; border-radius: 999px; border: 3px solid rgba(148,163,184,0.8); background: radial-gradient(circle at 30% 30%, rgba(148,163,184,0.9), rgba(15,23,42,1)); display: flex; align-items: center; justify-content: center; overflow: hidden; } .avatar-circle img { width: 100%; height: 100%; object-fit: cover; } .avatar-circle span { font-size: 24px; font-weight: 600; } .avatar-level { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--color-bg-soft); border: 2px solid rgba(148,163,184,0.9); font-size: 10px; display: flex; align-items: center; justify-content: center; } /* === Team level badge (0..10) shown on user avatars (v5.0.3) === */ :root { --team-level-0: #94a3b8; --team-level-1: #38bdf8; --team-level-2: #22c55e; --team-level-3: #84cc16; --team-level-4: #eab308; --team-level-5: #f97316; --team-level-6: #ef4444; --team-level-7: #ec4899; --team-level-8: #a855f7; --team-level-9: #6366f1; } .avatar-team-level { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.92); box-shadow: 0 2px 10px rgba(0,0,0,0.22); user-select: none; -webkit-user-select: none; } .team-lvl-0 { background: var(--team-level-0); } .team-lvl-1 { background: var(--team-level-1); } .team-lvl-2 { background: var(--team-level-2); } .team-lvl-3 { background: var(--team-level-3); } .team-lvl-4 { background: var(--team-level-4); } .team-lvl-5 { background: var(--team-level-5); } .team-lvl-6 { background: var(--team-level-6); } .team-lvl-7 { background: var(--team-level-7); } .team-lvl-8 { background: var(--team-level-8); } .team-lvl-9 { background: var(--team-level-9); } .team-lvl-10 { background-image: linear-gradient(135deg, #f59e0b, #fde68a, #f59e0b); color: #111827; border-color: rgba(255,255,255,0.85); text-shadow: 0 1px 0 rgba(255,255,255,0.35); } .friend-avatar .avatar-team-level { right: -4px; top: -4px; min-width: 18px; height: 18px; font-size: 8px; padding: 0 5px; } .profile-header-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; } .profile-name { font-size: 16px; font-weight: 600; } .profile-sub { font-size: 12px; opacity: 0.8; } .avatar-form { margin-top: 8px; gap: 5px; flex-wrap: wrap; } .profile-invite, .profile-invite-link { font-size: 12px; opacity: 0.85; } /* Друзья: используем те же аватарки, только меньше */ .friend-avatar-wrap { position: relative; width: 40px; height: 40px; } .friend-avatar .avatar-circle { border-width: 2px; } .friend-avatar .avatar-circle span { font-size: 16px; } .friend-avatar .avatar-level { min-width: 14px; height: 14px; font-size: 9px; border-width: 1px; } .avatar-form { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; } .avatar-dropzone { border-radius: 16px; border: 1px dashed rgba(148,163,184,0.7); padding: 8px; display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative; } .avatar-dropzone p { font-size: 12px; opacity: 0.8; margin: 0; min-width: 80px; } .avatar-dropzone input[type="file"] { /* iOS/PWA: file picker may be blocked if input is display:none. Keep it in DOM, but invisible and covering the whole dropzone. */ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; display: block; z-index: 2; } .avatar-preview { width: 48px; height: 48px; border-radius: 999px; overflow: hidden; border: 2px solid rgba(148,163,184,0.9); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, rgba(148,163,184,0.9), rgba(15,23,42,1)); } .avatar-preview img { width: 100%; height: 100%; object-fit: cover; } .avatar-preview span { font-size: 18px; font-weight: 600; } .avatar-dropzone::after { content: '↕'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: 0.3; } .admin-avatar-wrap { position: relative; width: 32px; height: 32px; } .admin-avatar-wrap .avatar-circle { width: 32px; height: 32px; border-width: 2px; } .admin-avatar-wrap .avatar-circle span { font-size: 14px; } .admin-avatar-wrap .avatar-level { min-width: 14px; height: 14px; font-size: 9px; } /* Микровзаимодействия и плавные hover-эффекты */ button, .btn-primary, .btn-secondary { transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out; } button:active, .btn-primary:active, .btn-secondary:active { transform: translateY(1px) scale(0.98); box-shadow: 0 0 0 rgba(0,0,0,0); } .card { transition: transform 0.14s ease-out, box-shadow 0.14s ease-out, border-color 0.14s ease-out; } .card:hover { transform: translateY(-1px); } .app-bottom-nav .nav-item-icon img { transition: transform 0.12s ease-out, opacity 0.12s ease-out; } .nav-item:active .nav-item-icon img { transform: scale(0.9); opacity: 0.8; } .profile-invite-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .profile-invite-link-text { font-weight: 600; word-break: break-all; } .btn-copy-link { font-size: 8px; padding: 4px 10px; border-radius: 999px; } .copy-link-status { font-size: 8px; color: #22c55e; opacity: 0; transition: opacity 0.15s ease; } .copy-link-status.is-visible { opacity: 1; } /* --- Token payment screen (TRC20) --- */ .token-payment-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:12px; } .token-payment-title{font-weight:700;font-size:16px;line-height:1.2} .token-payment-sub{opacity:.8;font-size:13px} .token-payment-status{margin:6px 0 14px 0} .token-payment-status-sub{opacity:.8;font-size:12px;margin-top:4px;word-break:break-all} .token-payment-grid{display:flex;flex-direction:column;gap:12px} .token-payment-row{display:flex;flex-direction:column;gap:6px} .token-payment-k{font-size:12px;opacity:.85} .token-payment-v{font-size:14px} .token-payment-hint{opacity:.85;font-size:12px;margin-top:6px} .token-payment-hint.warn{opacity:1} .token-payment-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .token-payment-footnote{opacity:.75;font-size:12px;margin-top:12px} .token-payment-alert{margin:10px 0 14px 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)} .token-payment-alert-title{font-weight:700;font-size:13px;margin-bottom:6px} .token-payment-alert-body{font-size:12px;opacity:.9;line-height:1.35} .token-payment-alert-body.warn{opacity:1} .token-payment-alert-metrics{margin-top:8px;font-size:12px;opacity:.85;word-break:break-word} /* Яркое предупреждение о дедлайне оплаты */ .token-payment-deadline{margin:12px 0 14px 0;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg, rgba(255,82,82,.35), rgba(255,152,0,.28));box-shadow:0 10px 24px rgba(0,0,0,.18)} .token-payment-deadline-title{font-weight:800;font-size:14px;margin-bottom:6px;letter-spacing:.2px} .token-payment-deadline-body{font-size:12.5px;line-height:1.35;opacity:.96} .token-payment-deadline-timer{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.22);font-weight:800;font-variant-numeric:tabular-nums;margin:0 4px} .token-payment-deadline.is-expired{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.35)} .token-payment-req-list{display:flex;flex-direction:column;gap:10px;margin-top:10px} .token-payment-req-item{display:flex;justify-content:space-between;gap:10px;padding:12px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);text-decoration:none;color:inherit} .token-payment-req-item.active{border-color:rgba(0,200,255,.35);box-shadow:0 0 0 1px rgba(0,200,255,.25) inset} .token-payment-req-title{font-weight:700;font-size:13px;line-height:1.2} .token-payment-req-sub{opacity:.75;font-size:12px;margin-top:4px} .token-payment-req-right{text-align:right;min-width:120px} .token-payment-req-status{font-size:12px;font-weight:700} .token-payment-req-amt{opacity:.75;font-size:12px;margin-top:4px;word-break:break-word} .token-payment-req-row{display:flex;gap:10px;align-items:stretch} .tp-cancel-form{display:flex;align-items:center} .tp-cancel-btn{padding:8px 10px;font-size:12px;white-space:nowrap;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,0,0,.08);color:inherit} .tp-cancel-btn:active{transform:scale(.98)} .copy-link-status.is-error { color: #ef4444; } .vertical-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .vertical-form label span { display: block; font-size: 13px; color: var(--color-muted); margin-bottom: 3px; } .vertical-form input[type="password"] { width: 100%; } .profile-logout-row { margin-top: 10px; display: flex; justify-content: flex-end; } .profile-logout-btn { font-size: 12px; } /* Админ-раздел: база данных */ .db-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; } .db-column h2 { margin-top: 0; margin-bottom: 4px; } .db-column p { margin-top: 0; margin-bottom: 10px; font-size: 13px; opacity: 0.9; } .db-reset-card { border: 1px solid rgba(248,113,113,0.55); background: linear-gradient(135deg, rgba(248,250,252,0.98), rgba(254,242,242,0.96)); } .danger-text { color: #b91c1c; } .checkbox-field { display: flex; align-items: flex-start; gap: 5px; font-size: 13px; margin: 8px 0 12px; } .checkbox-field input[type="checkbox"] { margin-top: 2px; } .form-hint { font-size: 12px; opacity: 0.8; } .db-self-destruct-card { border-color: rgba(239,68,68,0.85); background: linear-gradient(135deg, rgba(254,242,242,0.98), rgba(254,202,202,0.98)); } .btn-danger-strong { background: linear-gradient(135deg, #b91c1c, #ef4444); color: #fee2e2; box-shadow: 0 0 0 1px rgba(127,29,29,0.85), 0 14px 32px rgba(248,113,113,0.75); } .profile-invite-link { margin-top: 8px; } .profile-invite-label { display: block; font-size: 12px; color: var(--color-muted, #9ca3af); margin-bottom: 4px; } .profile-invite-row { display: flex; gap: 5px; align-items: center; } .profile-invite-link-input { flex: 1 1 auto; font-size: 12px; padding: 6px 8px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.6); background: rgba(15, 23, 42, 0.5); color: inherit; outline: none; } body[data-theme="light"] .profile-invite-link-input { background: #ffffff; border-color: #d1d5db; color: #111827; } /* Импорт базы данных: стилизованное поле выбора файла */ .file-upload-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .file-upload-field span { opacity: 0.8; } .file-upload-input { position: relative; display: block; width: 100%; max-width: 280px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.5); padding: 8px 12px; background: rgba(15,23,42,0.9); color: var(--color-text); font-size: 14px; cursor: pointer; outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .file-upload-input:hover { border-color: var(--color-accent); background: rgba(15,23,42,1); } .file-upload-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px rgba(59,130,246,0.4); } /* Прячем слишком яркий системный текст */ .file-upload-input::file-selector-button { margin-right: 8px; border: none; border-radius: 999px; padding: 6px 10px; background: var(--color-accent); color: #0b1220; font-size: 13px; font-weight: 500; cursor: pointer; } .file-upload-input::file-selector-button:hover { filter: brightness(1.1); } .token-card { padding: 12px 12px; } .token-main { display: flex; align-items: center; gap: 12px; } .token-content { flex: 1; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .token-meta { display: flex; flex-direction: column; gap: 3px; } .token-actions { width: 100%; display: flex; justify-content: flex-end; align-items: center; } .token-actions .form-inline { width: 100%; display: flex; gap: 5px; align-items: center; justify-content: flex-end; } .token-actions .form-inline label { flex: 1; display: flex; align-items: center; gap: 6px; } .token-actions .form-inline input[type="number"] { max-width: 90px; } .token-actions .btn-primary { white-space: nowrap; } /* Payment source selector (token purchase): crypto vs internal wallet */ .pay-source{ width: 100%; display: flex; flex-direction: column; gap: 6px; margin: 6px 0 0; } .pay-source-item{ display: flex; align-items: center; gap: 5px; font-size: 12px; opacity: .95; } .pay-source-item .muted{ opacity: .7; } /* Safe area support for devices with notch / home indicator (iOS, etc.) */ @supports(padding-top: env(safe-area-inset-top)) { body { padding-top: 0; padding-bottom: 0; } } /* Горизонтальный скролл для широких таблиц в админке */ .table-scroll-x { width: 100%; overflow-x: auto; } /* Большая кнопка получения дохода в профиле */ .card.card-income-highlight { margin-top: 12px; margin-bottom: 4px; padding: 7px 8px; text-align: center; } .btn-income-large { padding: 12px 28px; font-size: 16px; font-weight: 600; } /* Таблица настроек визуальных эффектов */ .table-wrapper-horizontal { width: 100%; overflow-x: auto; padding-bottom: 8px; } .admin-effects-table { min-width: 1120px; } .admin-effects-table th, .admin-effects-table td { white-space: nowrap; } .admin-effects-table th:nth-child(5), .admin-effects-table th:nth-child(6), .admin-effects-table th:nth-child(7), .admin-effects-table th:nth-child(8), .admin-effects-table th:nth-child(9), .admin-effects-table td:nth-child(5), .admin-effects-table td:nth-child(6), .admin-effects-table td:nth-child(7), .admin-effects-table td:nth-child(8), .admin-effects-table td:nth-child(9) { text-align: center; } .admin-effects-table .dropzone { padding: 6px 8px; min-width: 200px; max-width: 230px; font-size: 8px; } .admin-effects-table .dropzone p { margin: 0 0 4px; } .admin-effects-table .dropzone-preview { max-height: 42px; display: flex; align-items: center; justify-content: center; } .admin-effects-table .dropzone-preview img { max-width: 100%; max-height: 40px; display: block; } .admin-effects-table .dropzone { white-space: normal; font-size: 10px; line-height: 1.3; } .admin-net-income { color: #22c55e; /* зелёный: доход системы */ } .admin-net-in { color: #fb923c; /* оранжевый: внесено */ } .admin-net-out { color: #facc15; /* жёлтый: выведено */ } .admin-net-available { color: #ef4444; /* красный: на руках у пользователей */ margin-left: 6px; } /* Блок ссылок установки приложения */ .install-links { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--color-divider); font-size: 13px; } .install-links-title { margin-bottom: 6px; opacity: 0.9; } .install-links-row { display: flex; flex-wrap: wrap; gap: 5px; } /* Install app: compact (single button, centered) */ .install-links--compact { margin-top: 16px; padding-top: 0; border-top: none; display: flex; justify-content: center; } .screen-auth { /* Do not force tall auth cards: it creates a huge empty area on some screens */ min-height: auto; display: block; } .screen-auth .install-links--compact { margin-top: clamp(12px, 2vh, 20px); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); } .btn-install { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.8); background: rgba(15, 23, 42, 0.88); color: #e5e7eb; font-size: 12px; font-weight: 500; text-decoration: none; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.80); letter-spacing: 0.01em; } .btn-install:hover { text-decoration: none; background: rgba(30, 64, 175, 0.95); border-color: rgba(129, 140, 248, 0.95); } .btn-install.ios::before { content: ""; font-size: 15px; line-height: 1; } .btn-install.android::before { content: "🤖"; font-size: 15px; line-height: 1; } /* Светлые темы: более лёгкий стиль кнопок установки */ body[data-theme="light"] .btn-install, body[data-theme="sunrise"] .btn-install, body[data-theme="mint"] .btn-install { background: rgba(255,255,255,0.96); color: #111827; border-color: rgba(148, 163, 184, 0.50); box-shadow: 0 12px 28px rgba(148, 163, 184, 0.35); } body[data-theme="light"] .btn-install:hover, body[data-theme="sunrise"] .btn-install:hover, body[data-theme="mint"] .btn-install:hover { background: rgba(239, 246, 255, 0.98); border-color: rgba(37, 99, 235, 0.75); } /* Мобильный отклик по касанию */ .tapable, .tapable-card { -webkit-tap-highlight-color: transparent; } .btn-primary.tapable, .btn-secondary.tapable, .btn-danger.tapable { transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, background 0.12s ease-out, opacity 0.12s ease-out; } .btn-primary.tapable.is-touched { transform: scale(0.96) translateY(0); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.85); background: linear-gradient(to right, #ff8a3a, #60a5fa); color: #ffffff; opacity: 0.98; } .btn-secondary.tapable.is-touched { transform: scale(0.96) translateY(0); box-shadow: 0 8px 26px rgba(15, 23, 42, 0.8); background: rgba(55,65,81,0.98); color: #f9fafb; opacity: 0.98; } .btn-danger.tapable.is-touched { transform: scale(0.96) translateY(0); box-shadow: 0 8px 26px rgba(127, 29, 29, 0.8); background: #dc2626; color: #fee2e2; opacity: 0.98; } .tapable-card.is-touched { transform: translateY(-2px) scale(1.01); box-shadow: 0 16px 45px rgba(0, 0, 0, 0.60); } /* Ripple-эффект для основных кнопок */ .btn-primary.tapable { position: relative; overflow: hidden; } .tap-ripple { position: absolute; border-radius: 999px; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); transform: scale(0); opacity: 0.4; animation: tap-ripple 0.35s ease-out forwards; } @keyframes tap-ripple { to { transform: scale(1.4); opacity: 0; } } /* Page builder basic styles */ .page-block { margin: 0.75rem 0; padding: 0.75rem 1rem; border-radius: 0.9rem; background: rgba(15,23,42,0.7); box-shadow: 0 12px 25px rgba(15,23,42,0.45); } /* Drag-and-drop area for images in page builder */ .pb-dropzone { margin-top: 0.35rem; padding: 0.5rem; border-radius: 0.75rem; border: 1px dashed rgba(148,163,184,0.85); font-size: 0.8rem; text-align: center; cursor: pointer; background: rgba(15,23,42,0.4); transition: background 0.15s ease, border-color 0.15s ease; } .pb-dropzone.is-dragover { border-style: solid; border-color: rgba(96,165,250,0.95); background: rgba(37,99,235,0.18); } .pb-image-wrapper { margin: 0.5rem 0; text-align: center; } .pb-image-wrapper img { max-width: 100%; height: auto; border-radius: 0.5rem; } .pb-btn { display: inline-block; padding: 0.5rem 1.25rem; border-radius: 999px; text-decoration: none; font-weight: 600; } .pb-btn-big { font-size: 1rem; } .pb-btn-small { font-size: 0.85rem; padding: 0.35rem 0.9rem; } .pb-divider { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 0.75rem 0; } .pb-spacer { height: 1rem; } /* text formatting */ .pb-bold { font-weight: 700; } .pb-italic { font-style: italic; } .pb-underline { text-decoration: underline; } /* text colors */ .pb-color-red { color: #ff4b4b; } .pb-color-orange { color: #ffa94b; } .pb-color-yellow { color: #ffd43b; } .pb-color-green { color: #40c057; } .pb-color-blue { color: #4dabf7; } .pb-color-indigo { color: #5c7cfa; } .pb-color-violet { color: #cc5de8; } .pb-color-black { color: #000000; } .pb-color-white { color: #ffffff; } .pb-color-pink { color: #ff6bcb; } /* Списки элементов конструктора страниц */ .simple-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .simple-list li { padding: 6px 8px; border-radius: 10px; background: rgba(15,23,42,0.85); border: 1px solid rgba(148,163,184,0.35); font-size: 13px; display: flex; flex-direction: column; gap: 4px; } body[data-theme="light"] .simple-list li { background: #f9fafb; } /* Детали редактирования элемента */ .pb-edit-details { border-radius: 10px; border: 1px dashed rgba(148,163,184,0.45); padding: 6px 8px; background: rgba(15,23,42,0.65); } .pb-edit-details[open] { background: rgba(15,23,42,0.9); } .pb-edit-details summary { list-style: none; } .pb-edit-details summary::-webkit-details-marker { display: none; } /* Формы внутри конструктора */ .pb-edit-details form, .pb-add-form { margin-top: 6px; } .pb-edit-details label, .pb-add-form label { display: block; font-size: 12px; color: var(--color-muted); margin-bottom: 6px; } .pb-edit-details textarea, .pb-add-form textarea { min-height: 40px; } .pb-edit-details fieldset, .pb-add-form fieldset { border: 1px solid rgba(148,163,184,0.35); border-radius: 10px; padding: 6px 8px; } .pb-edit-details legend, .pb-add-form legend { font-size: 8px; color: var(--color-muted); padding: 0 4px; } /* Drag-and-drop для конструктора страниц */ .drag-handle { cursor: grab; user-select: none; font-size: 14px; margin-right: 6px; opacity: 0.7; } .drag-handle:active { cursor: grabbing; opacity: 1; } .js-block-item.is-dragging { opacity: 0.5; } /* Header: back button + logo */ .header-left { display: flex; align-items: center; gap: 6px; } .header-back { border: none; background: transparent; padding: 4px 6px; margin-right: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; color: var(--color-text-muted); border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .header-back:active { transform: translateX(-1px); opacity: 0.85; } .header-back-icon { display: block; } /* Floating notices under header */ .floating-notice { position: fixed; top: calc(var(--app-header-h) + var(--safe-top)); left: 50%; transform: translateX(-50%) translateY(-8px); /* Must be above SPA loading blur overlay (z-index: 80) */ z-index: 120; max-width: 480px; width: calc(100% - 24px); padding: 10px 16px; border-radius: 999px; font-size: 14px; line-height: 1.4; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .floating-notice-success { background: rgba(187, 247, 208, 0.98); color: #065f46; border: 1px solid rgba(16, 185, 129, 0.5); } .floating-notice-error { background: rgba(254, 226, 226, 0.98); color: #991b1b; border: 1px solid rgba(248, 113, 113, 0.6); } .floating-notice-visible { opacity: 1; transform: translateX(-50%) translateY(8px); } /* Loading overlay (SPA) */ .app-loading-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; background: rgba(15, 23, 42, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .app-loading-overlay.is-visible { opacity: 1; pointer-events: auto; } /* Minimal top progress bar for SPA navigations (shown only after the one-time loader) */ .spa-top-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 90; opacity: 0; pointer-events: none; border-radius: 0 0 6px 0; background: rgba(59, 130, 246, 0.9); transition: width 0.18s ease, opacity 0.18s ease; } .spa-top-progress.is-visible { opacity: 1; } .loading-card { width: min(340px, calc(100% - 40px)); border-radius: 18px; padding: 18px 18px; text-align: center; box-shadow: 0 18px 40px rgba(0,0,0,0.35); border: 1px solid rgba(148,163,184,0.35); background: rgba(255,255,255,0.85); color: #0f172a; } body[data-theme="dark"] .loading-card, body[data-theme="neon"] .loading-card, body[data-theme="aurora"] .loading-card { background: rgba(2, 6, 23, 0.75); color: rgba(226, 232, 240, 0.98); border: 1px solid rgba(148,163,184,0.28); } .loading-card-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; } .loading-card-sub { font-size: 13px; opacity: 0.8; } .loading-progress { margin-top: 12px; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(148,163,184,0.28); } .loading-progress-bar { height: 100%; width: 0%; border-radius: 999px; background: rgba(59,130,246,0.85); transition: width 0.18s ease; } body[data-theme="dark"] .loading-progress-bar, body[data-theme="neon"] .loading-progress-bar, body[data-theme="aurora"] .loading-progress-bar { background: rgba(34,211,238,0.85); } .loading-progress-text { margin-top: 8px; font-size: 12px; opacity: 0.75; } .loading-spinner { width: 28px; height: 28px; margin: 10px auto 12px; border-radius: 999px; border: 3px solid rgba(148,163,184,0.4); border-top-color: rgba(59,130,246,0.9); animation: loadingSpin 0.9s linear infinite; } @keyframes loadingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Coin fly animation to header balance */ .coin-fly { position: fixed; z-index: 999; font-size: 18px; line-height: 1; pointer-events: none; will-change: transform, opacity; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35)); } .header-balance-corner.balance-pulse { animation: balancePulse 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); } @keyframes balancePulse { 0% { transform: translateZ(0) scale(1); } 40% { transform: translateZ(0) scale(1.08); } 100% { transform: translateZ(0) scale(1); } } /* /* Page transition animations with configurable duration & distance */ :root { --page-anim-duration: 0.32s; --page-anim-distance: 12px; --card-anim-duration: 0.35s; --card-anim-distance: 10px; } .app-main { will-change: transform, opacity; } .page-transition-slide-left { animation: page-slide-left var(--page-anim-duration) ease-out forwards; } .page-transition-slide-right { animation: page-slide-right var(--page-anim-duration) ease-out forwards; } .page-transition-fade { animation: page-fade var(--page-anim-duration) ease-out forwards; } .page-transition-zoom-in { animation: page-zoom-in var(--page-anim-duration) ease-out forwards; } /* iOS-style перелистывание основных страниц (свайпы как рабочие столы) */ .page-transition-ios-left { animation: page-ios-left 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .page-transition-ios-right { animation: page-ios-right 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } /* Для внутренних страниц как "sheet" (снизу вверх) */ .page-transition-sheet-up { animation: page-sheet-up var(--page-anim-duration) ease-out forwards; } .page-transition-sheet-down { animation: page-sheet-down var(--page-anim-duration) ease-out forwards; } @keyframes page-slide-left { from { opacity: 0; transform: translateX(var(--page-anim-distance)); } to { opacity: 1; transform: translateX(0); } } @keyframes page-ios-left { from { opacity: 0.82; transform: translateX(72vw) scale(0.985); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes page-ios-right { from { opacity: 0.82; transform: translateX(-72vw) scale(0.985); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes page-slide-right { from { opacity: 0; transform: translateX(calc(var(--page-anim-distance) * -1)); } to { opacity: 1; transform: translateX(0); } } @keyframes page-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes page-zoom-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes page-sheet-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes page-sheet-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } /* Card animations (modes) IMPORTANT: We scope "cards-enter-ready" to containers instead of . Home/Reserve pages may legitimately have 0 cards in MAIN, while opening a bottom-sheet (Notifications) calls initPageAnimations(). The old global body.cards-enter-ready logic could hide sheet cards (opacity:0) and make the Notifications sheet look empty. */ body.card-anim-none #app-main .screen .card, body.card-anim-none #spa-sheet-content .screen .card { opacity: 1; transform: none; transition: none; } body.card-anim-stagger #app-main .screen .card, body.card-anim-zoom #app-main .screen .card, body.card-anim-stagger #spa-sheet-content .screen .card, body.card-anim-zoom #spa-sheet-content .screen .card { opacity: 0; transition: opacity var(--card-anim-duration) ease-out, transform var(--card-anim-duration) ease-out; } body.card-anim-stagger #app-main .screen .card, body.card-anim-stagger #spa-sheet-content .screen .card { transform: translateY(var(--card-anim-distance)); } body.card-anim-stagger #app-main.cards-enter-ready .screen .card, body.card-anim-stagger #spa-sheet-content.cards-enter-ready .screen .card { opacity: 1; transform: translateY(0); } body.card-anim-zoom #app-main .screen .card, body.card-anim-zoom #spa-sheet-content .screen .card { transform: scale(0.96); } body.card-anim-zoom #app-main.cards-enter-ready .screen .card, body.card-anim-zoom #spa-sheet-content.cards-enter-ready .screen .card { opacity: 1; transform: scale(1); } /* Карточки жетонов на странице профиля (2 на ряд в мобильном виде) */ .token-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; align-items: start; /* не растягиваем карточки по высоте из-за соседей */ } /* Важно: в проекте есть общий (старый) .token-card как flex-контейнер. Для нового квадратного UI в профиле карточка должна быть блочной, иначе .token-card-inner не растягивается по ширине и выглядит "узкой". */ .token-cards-grid .token-card { /* Перебиваем старый align-items:flex-start у общего .token-card */ display: flex; flex-direction: column; align-items: stretch; width: 100%; box-sizing: border-box; align-self: start; /* Квадратные карточки (идеальный квадрат без горизонтального скролла) */ /* Единый радиус для карточки и рамки */ --token-card-radius: 18px; --token-border-outset: 2px; /* рамка чуть "выезжает" наружу */ --token-border-inset: calc(-1 * var(--token-border-outset)); will-change: transform; } /* Плавное удаление просроченного (неоплаченного) жетона + корректное перестроение сетки */ .token-cards-grid .token-card.is-removing { opacity: 0; transform: scale(0.96); transition: opacity 200ms ease, transform 200ms ease; } /* Внутри сетки: квадратная рамка (frame) + кнопка/полоса действия под рамкой */ .token-cards-grid .token-card-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; /* радиус синхронизируется с рамкой */ border-radius: var(--token-card-radius, 18px); } /* Рамка должна обрамлять только квадратный frame, а не кнопку */ .token-cards-grid .token-card-frame .token-card-border { position: absolute; inset: var(--token-border-inset, -2px); } /* Внутренности жетона заполняют квадрат */ .token-cards-grid .token-card-frame .token-card-inner { height: 100%; width: 100%; } /* Таймер внутри карточки оставляем для JS, но скрываем (таймер показываем на кнопке) */ .token-cards-grid .token-card-timer { display: none; } /* Панель действия под рамкой */ .token-cards-grid .token-card-actionbar { margin-top: 10px; width: 100%; display: block; } .token-cards-grid .token-card-actionbar .btn-primary, .token-cards-grid .token-card-actionbar .btn-secondary, .token-cards-grid .token-card-actionbar .token-action-btn { width: 100%; box-sizing: border-box; } .token-cards-grid .token-card-inner { position: relative; padding: 0; border-radius: var(--token-card-radius); border: 1px solid rgba(148, 163, 184, 0.4); background: var(--color-bg-soft, rgba(15,23,42,0.9)); box-shadow: 0 0 0 1px rgba(15,23,42,0.6), 0 10px 20px rgba(15,23,42,0.8); height: 100%; width: 100%; display: block; overflow: hidden; } .token-cards-grid .token-card-image-wrap { position: absolute; inset: 0; margin-bottom: 0; overflow: hidden; border-radius: var(--token-card-radius); display: flex; align-items: stretch; justify-content: stretch; background: rgba(15,23,42,0.96); } /* Реальные изображения жетонов — растягиваем на весь квадрат карточки */ .token-cards-grid .token-card-image-wrap .token-card-image { width: 100%; height: 100%; display: block; object-fit: fill; } /* Плейсхолдер, если нет картинки: квадратная плашка с буквой */ .token-card-image--placeholder { width: 100%; height: 100%; padding-top: 0; border-radius: var(--token-card-radius); display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(15,23,42,0.8); } .token-cards-grid .token-card-inner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(2,6,23,0.18) 16%, rgba(2,6,23,0.82) 62%, rgba(2,6,23,0.96) 100%); pointer-events: none; z-index: 3; } .token-card-qty-badge { position: absolute; top: 4px; right: 4px; min-width: 20px; padding: 2px 6px; border-radius: 999px; font-size: 8px; font-weight: 700; text-align: center; background: #e53935; color: #fff; } /* Таймер/статус поверх жетона (центр) — решает проблему "не влезает текст + таймер" */ .token-card-overlay-timer{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; padding:4px 10px; border-radius:999px; background:rgba(0,0,0,0.35); color:#fff; font-weight:900; font-size:clamp(14px, 3.6vw, 20px); line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:.4px; text-shadow:0 2px 10px rgba(0,0,0,0.55); pointer-events:none; user-select:none; } .token-card-overlay-timer.is-expired{ opacity:.9; } .token-card-title { font-weight: 700; margin: 0; font-size: 14px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 24px); text-align: center; position: absolute; left: 12px; bottom: 34px; z-index: 4; color: #f8fafc; text-shadow: 0 2px 10px rgba(0,0,0,0.7); pointer-events: none; } .token-card-sub { font-size: 8px; opacity: 0.8; line-height: 1.15; } .token-card-meta--compact { display: flex; align-items: center; gap: 10px; margin-top: 0; font-size: 12px; line-height: 1.15; opacity: 0.98; flex-wrap: nowrap; width: calc(100% - 24px); justify-content: center; position: absolute; left: 12px; bottom: 12px; z-index: 4; color: #f8fafc; text-shadow: 0 2px 10px rgba(0,0,0,0.7); pointer-events: none; } .token-card-meta--compact .tmi { display: inline-block; min-width: 1.1em; text-align: center; } .token-card-meta--compact .tmv { font-variant-numeric: tabular-nums; opacity: 0.98; } .token-card-timer { margin-top: 6px; font-family: monospace; font-size: 14px; } .token-card-actions { display: block; margin-top: clamp(16px, 3vh, 28px); /* кнопка всегда внизу квадрата */ } /* Карточки жетонов: визуальные состояния и «змейка» по периметру */ .token-card { position: relative; /* Дефолты для рамки/анимаций (нужны также для превью в админке) */ --token-card-radius: 18px; --token-border-outset: 2px; --token-border-inset: calc(-1 * var(--token-border-outset)); } .token-card-border { position: absolute; inset: var(--token-border-inset, -2px); border-radius: calc(var(--token-card-radius, 18px) + var(--token-border-outset, 2px)); pointer-events: none; z-index: 1; } /* Содержимое карточки всегда поверх рамки/змейки */ .token-card-inner { position: relative; z-index: 2; } /* Статусы периметра */ .token-card.state-not-started .token-card-border { border: 2px solid #ff9800; /* оранжевый */ } .token-card.state-ready .token-card-border { border: 2px solid #00c853; /* зелёный */ } .token-card.state-collected .token-card-border, .token-card.state-waiting .token-card-border { border: 2px solid #ff5252; /* красный / ожидание */ } .token-card.state-await-pay .token-card-border { border: 2px solid #e63b4b; box-shadow: 0 0 0 0 rgba(230,59,75,0.55); animation: await-pay-pulse 1.35s infinite; } @keyframes await-pay-pulse { 0% { box-shadow: 0 0 0 0 rgba(230,59,75,0.55); transform: translateY(0); } 70% { box-shadow: 0 0 0 14px rgba(230,59,75,0); transform: translateY(-1px); } 100% { box-shadow: 0 0 0 0 rgba(230,59,75,0); transform: translateY(0); } } /* Змейка для работающего таймера */ @keyframes token-snake-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .token-card.state-running.anim-snake .token-card-border { padding: 2px; /* толщина «змейки» */ background: conic-gradient( from 0deg, #00e5ff, #7c4dff, #ffea00, #00e5ff ); animation: token-snake-spin 4s linear infinite; /* маска, чтобы оставить только рамку по периметру */ mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; } /* Доп. анимации рамки для статуса «в работе» (выбор в админке) */ .token-card.state-running.anim-ants .token-card-border{ border-radius: calc(var(--token-card-radius) + var(--token-border-outset)); } .token-card.state-running.anim-ants .token-card-border::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 8px, rgba(0,229,255,0.85) 8px 12px, rgba(255,255,255,0.08) 12px 20px ); background-size: 240px 100%; animation: token-ants-march 1.15s linear infinite; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; } @keyframes token-ants-march{ from{ background-position: 0 0; } to { background-position: -240px 0; } } /* Вариант 2: «сияющий обод» (мягкая аура по периметру) */ .token-card.state-running.anim-aura .token-card-border::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background: linear-gradient(120deg, rgba(0,229,255,0.9), rgba(124,77,255,0.85), rgba(255,234,0,0.85), rgba(0,229,255,0.9)); background-size: 280% 280%; animation: token-aura-flow 3.2s ease-in-out infinite; filter: blur(0.2px) drop-shadow(0 0 10px rgba(0,229,255,0.18)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; -webkit-mask-composite: xor; } @keyframes token-aura-flow{ 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } /* Цвета таймера по статусам */ .token-card.state-not-started .token-card-timer { color: #ffb74d; /* мягкий оранжевый */ } .token-card.state-ready .token-card-timer { color: #00e676; font-weight: 600; } .token-card.state-collected .token-card-timer, .token-card.state-waiting .token-card-timer { color: #ff5252; font-weight: 500; } /* Перелив текста таймера, когда идёт отсчёт */ @keyframes token-timer-gradient { from { background-position: 0 0; } to { background-position: 200% 0; } } .token-card.state-running .token-card-timer { background: linear-gradient(90deg, #ffeb3b, #00e5ff, #ffeb3b); background-size: 200% 100%; -webkit-background-clip: text; color: transparent; animation: token-timer-gradient 2s linear infinite; } /* Текст/эмодзи вместо SVG-иконок на кнопках жетонов */ .token-icon-text { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; } /* Админские таблицы: читаемые заголовки и строки без разрыва слов на десктопе */ .admin-layout .admin-wrapper { overflow-x: auto; } .admin-layout .table { table-layout: auto; } .admin-layout .table th, .admin-layout .table td { white-space: nowrap; word-wrap: normal; word-break: normal; } /* Админка (десктоп): используем всю ширину страницы и избегаем обрезаний */ .admin-layout .app-main { max-width: 100%; padding: 84px 24px 32px; } .admin-layout .app-bottom-nav { display: none; } /* В админке карточки не должны обрезать содержимое (кнопки/таблицы/тени) */ .admin-layout .card { overflow: visible; } .admin-layout .screen { max-width: 100%; width: 100%; margin: 0 auto 16px; padding: 18px 18px 20px; overflow-x: auto; } /* Табличные контейнеры в админке: всегда скроллятся по горизонтали при необходимости */ .admin-layout .table-wrapper, .admin-layout .table-scroll-x, .admin-layout .table-wrapper-horizontal { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Формы в строку на десктопе: переносим элементы, чтобы не уезжали за края */ .admin-layout .form-inline { flex-wrap: wrap; align-items: center; } /* На больших экранах делаем меню админки более "компьютерным" */ @media (min-width: 1024px) { .admin-layout .admin-nav-link { min-width: 140px; font-size: 13px; padding: 8px 12px; } } /* Кнопки и элементы управления в таблицах не должны прятаться/ломаться */ .admin-layout .table td { vertical-align: middle; } .admin-layout .table td .btn, .admin-layout .table td button, .admin-layout .table td a.btn { white-space: nowrap; } /* ---- Финансовая панель (fin_moderator) ---- */ .fin-dashboard .fin-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:14px;} .fin-dashboard .fin-title{font-size:20px;margin:0;} .fin-dashboard .fin-subtitle{font-size:12px;opacity:.8;margin-top:4px;} .fin-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px;} .fin-card{display:block;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px;box-shadow:0 8px 18px rgba(0,0,0,.08);background:rgba(255,255,255,.04);} body[data-theme="light"] .fin-card{background:#fff;border-color:rgba(0,0,0,.08);} .fin-card-label{font-size:12px;opacity:.85;} .fin-card-value{font-size:26px;font-weight:700;margin-top:6px;line-height:1.1;} .fin-card-sub{font-size:11px;opacity:.8;margin-top:6px;} .fin-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px;} .fin-block-title{font-size:13px;font-weight:600;margin-bottom:8px;} .fin-chart-legend{display:flex;align-items:center;gap:10px;font-size:11px;opacity:.85;margin-bottom:10px;} .fin-dot{display:inline-block;width:10px;height:10px;border-radius:999px;vertical-align:middle;} .fin-dot-a{background:rgba(59,130,246,.9);} /* blue */ .fin-dot-b{background:rgba(245,158,11,.9);} /* amber */ .fin-bars{display:flex;gap:8px;align-items:flex-end;height:160px;padding:10px 6px 6px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);} body[data-theme="light"] .fin-bars{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06);} .fin-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;} .fin-bar-stack{position:relative;width:100%;max-width:28px;height:120px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;} .fin-bar-m,.fin-bar-e{border-radius:8px;min-height:2px;} .fin-bar-m{background:rgba(59,130,246,.85);} .fin-bar-e{background:rgba(245,158,11,.85);} .fin-bar-label{font-size:10px;opacity:.75;} .fin-quick .fin-quick-links{display:flex;flex-direction:column;gap:8px;} @media (max-width: 900px){ .fin-cards{grid-template-columns:1fr;} .fin-grid{grid-template-columns:1fr;} .fin-bars{height:150px;} } /* Мобильный UI: убираем зум при фокусе на инпутах (iOS требует шрифт >=16px) */ body:not(.admin-layout) input[type="text"], body:not(.admin-layout) input[type="password"], body:not(.admin-layout) input[type="number"], body:not(.admin-layout) input[type="tel"], body:not(.admin-layout) input[type="email"] { font-size: 16px; } /* Мобильный UI: формы-покупки и подобные в колонку (вариант B) */ body:not(.admin-layout) .form-inline { flex-direction: column; align-items: flex-start; } /* Поле количества жетонов — компактное и читаемое */ body:not(.admin-layout) .form-inline input[type="number"][name="quantity"] { max-width: 120px; width: 100%; text-align: center; } /* ---- SPA swipe: reduce iOS flicker ---- iOS Safari can "flash" blurred/backdrop-filter layers while a transformed container is being dragged. During interactive swipe we temporarily disable heavy effects to keep rendering stable. */ body.spa-is-swiping .card, body.spa-is-swiping .token-card, body.spa-is-swiping .glass, body.spa-is-swiping .app-header, body.spa-is-swiping .app-bottom-nav, body.spa-is-swiping .pin-overlay-backdrop{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.spa-is-swiping .card, body.spa-is-swiping .token-card{ box-shadow: none !important; } /* Extra iOS stabilization: kill any remaining backdrop-filter usage during swipe. NOTE: do NOT hide/disable the visual effects layer (snow/stars/particles) here. Using display:none restarts CSS keyframe animations when shown again, which the user has already fought to avoid. */ body.spa-is-swiping *{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Универсальная кнопка действия для жетона в профиле */ .token-action-btn { display: block; width: 100%; /* Внутри квадратной карточки кнопка всегда "прилипает" к низу */ margin-top: clamp(16px, 3vh, 28px); border-radius: 999px; padding: 9px 12px; font-size: 14px; font-weight: 600; text-align: center; border: none; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease; text-decoration: none; } /* Promotions page: centered action button + unified sizing */ .promo-btn-wrap{display:flex;justify-content:center;width:100%;margin-top:14px;} .promo-card .promo-action-btn{ width:280px; max-width:100%; min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; } .promo-card .promo-action-btn .pay-btn-label{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} /* Promotions: keep "До конца" label and timer on the same baseline */ .promo-card .promo-action-btn .pay-btn-label, .promo-card .promo-action-btn .pay-btn-timer{ line-height:1; display:inline-flex; align-items:center; } .promo-card .promo-action-btn .pay-btn-timer{ font-weight:900; font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.2px; } /* Promotions: progress status bar above main button */ .promo-status-wrap{display:flex;justify-content:center;width:100%;margin:6px 0 8px 0;} .promo-progressbar{position:relative;width:280px;max-width:100%;height:18px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.16);} .promo-progressbar-fill{height:100%;width:0;background:rgba(255,152,0,0.75);} .promo-progressbar--done .promo-progressbar-fill{background:rgba(0,200,83,0.75);} .promo-progressbar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.2px;} .promo-progressbar--partial .promo-progressbar-text{color:#ffb74d;} .promo-progressbar--done .promo-progressbar-text{color:#b9ffcf;} /* Promotions: link button spacing (visit_link condition) */ .promo-link-wrap{display:flex;justify-content:center;align-items:center;margin:12px 0 16px 0;} .promo-link-wrap{margin:12px 0 18px 0 !important;} .promo-card .promo-link-wrap + .promo-btn-wrap{margin-top:10px !important;} .promo-link-wrap .promo-link-btn{width:280px;max-width:100%;} /* Safety: ensure link button and main action never visually overlap on small screens */ /* (Already enforced above with !important.) */ /* Promotions: inline progress in condition line */ .promo-cond-progress{font-weight:800;} .promo-cond-progress--partial{color:#ffb74d;} .promo-cond-progress--done{color:#b9ffcf;} .token-action-btn .pay-btn-label{display:inline-block} .token-action-btn .pay-btn-timer{display:inline-block;margin-left:8px;padding:0;border-radius:0;background:transparent;font-weight:900;font-size:12px;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:.2px} .token-action-btn .pay-btn-timer.is-expired{opacity:.95} .token-action-btn:disabled { cursor: default; opacity: 0.9; } /* Emulated disabled state for buttons that still need to capture taps (prevents click "fall through") */ .token-action-btn.is-disabled{ cursor: default; opacity: 0.9; } /* Цвета кнопки по состояниям карточки */ .token-card.state-not-started .token-action-btn { display: block; background: #ff9800; color: #111827; } .token-card.state-ready .token-action-btn { display: block; background: #00c853; color: #ffffff; } .token-card.state-collected .token-action-btn, .token-card.state-waiting .token-action-btn { display: block; background: #ff5252; color: #ffffff; } /* Перелив для кнопки, когда идёт отсчёт */ .token-card.state-await-pay .token-action-btn { background-image: linear-gradient(90deg, #ff5252, #ff9800, #ff5252); background-size: 200% 100%; color: #ffffff; animation: await-pay-gradient 1.6s linear infinite; } @keyframes await-pay-gradient { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .token-card.state-running .token-action-btn { display: block; background-image: linear-gradient(90deg, #00e5ff, #7c4dff, #ffea00, #00e5ff); background-size: 200% 100%; color: #111827; animation: token-timer-gradient 2s linear infinite; } /* Скрываем отдельную строку таймера, чтобы не дублировать текст */ .token-card .token-card-timer { display: none; } /* === Диагностика интеграций === */ .status-ok { padding: 6px 10px; border-radius: 6px; background: rgba(22,163,74,0.12); color: #22c55e; font-weight: 600; } .status-warn { padding: 6px 10px; border-radius: 6px; background: rgba(234,179,8,0.15); color: #facc15; font-weight: 600; } .status-bad { padding: 6px 10px; border-radius: 6px; background: rgba(239,68,68,0.12); color: #ef4444; font-weight: 600; } .admin-diagnostics ul.diag-list { list-style: none; padding-left: 0; margin-left: 0; } .admin-diagnostics ul.diag-list li { margin-bottom: 6px; } .admin-diagnostics h3 { margin-top: 0; } /* User balance indicator (fixed in header) */ .user-balance-indicator{display:flex;flex-direction:column;align-items:flex-end;margin-right:10px;} .user-balance-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(148,163,184,.9);margin-bottom:2px;} .user-balance-value{font-size:14px;font-weight:800;line-height:1;color:var(--color-accent);text-shadow:0 0 10px rgba(59,130,246,.25);} .user-balance-unit{font-size:11px;font-weight:700;margin-left:6px;color:var(--color-text);opacity:.9;} /* Admin: preview for token running border animations */ .token-anim-preview-grid{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; } .token-anim-preview-item{ flex:0 0 auto; } .token-anim-preview-item.is-active{ filter: drop-shadow(0 0 10px rgba(0,229,255,0.18)); } .token-anim-preview-card{ width:140px; height:86px; border-radius:16px; overflow:hidden; background: rgba(255,255,255,0.04); } .token-anim-preview-card .token-card-inner{ display:flex; align-items:flex-end; height:100%; padding:10px; } .token-anim-preview-title{ font-size:12px; opacity:0.85; font-family: monospace; } /* Дополнительные анимации рамки жетона в статусе «в работе» */ /* Радар: узкий луч, который вращается вокруг рамки */ @keyframes token-radar-spin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} } .token-card.state-running.anim-radar .token-card-border{ padding: 2px; background: conic-gradient( from 0deg, rgba(0,255,170,0) 0deg, rgba(0,255,170,0) 300deg, rgba(0,255,170,0.85) 330deg, rgba(0,255,170,0) 360deg ); animation: token-radar-spin 2.2s linear infinite; filter: drop-shadow(0 0 12px rgba(0,255,170,0.16)); } .token-card.state-running.anim-radar .token-card-border::before{ content:''; position:absolute; inset:2px; border-radius: var(--token-card-radius); background: var(--card-bg, rgba(0,0,0,0.25)); } /* Прогресс: рамка “заполняется” по периметру, как индикатор */ @property --tokenProg { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes token-progress-fill{ 0% { --tokenProg: 0deg; } 100% { --tokenProg: 360deg; } } .token-card.state-running.anim-progress .token-card-border{ padding:2px; background: conic-gradient( from -90deg, rgba(0,229,255,0.95) 0deg var(--tokenProg), rgba(124,77,255,0.22) var(--tokenProg) 360deg ); animation: token-progress-fill 7.0s linear infinite; filter: drop-shadow(0 0 10px rgba(0,229,255,0.14)); } .token-card.state-running.anim-progress .token-card-border::before{ content:''; position:absolute; inset:2px; border-radius: var(--token-card-radius); background: var(--card-bg, rgba(0,0,0,0.25)); } /* Орбита: две точки бегут по периметру */ @keyframes token-orbit{ from{ offset-distance:0%; } to{ offset-distance:100%; } } .token-card.state-running.anim-orbit .token-card-border{ border: 2px solid rgba(124,77,255,0.35); box-shadow: 0 0 0 0 rgba(124,77,255,0.0); } .token-card.state-running.anim-orbit .token-card-border::before, .token-card.state-running.anim-orbit .token-card-border::after{ content:''; position:absolute; width:10px; height:10px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(0,229,255,0.75) 35%, rgba(124,77,255,0.1) 70%); offset-path: inset(0 round calc(var(--token-card-radius) + var(--token-border-outset))); offset-distance: 0%; animation: token-orbit 2.6s linear infinite; filter: drop-shadow(0 0 10px rgba(0,229,255,0.25)); } .token-card.state-running.anim-orbit .token-card-border::after{ width:8px; height:8px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.85), rgba(255,234,0,0.65) 35%, rgba(255,234,0,0.08) 70%); animation-duration: 3.4s; animation-direction: reverse; } /* Token meta icons (emoji/svg) */ .meta-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;} .meta-icon-svg svg{width:16px;height:16px;display:block;} .coin-fly-svg svg{width:18px;height:18px;display:block;} .coin-fly-img img{width:18px;height:18px;display:block;} /* === Promotions page: smooth removal when timer ends === */ .promo-card.token-card{ --token-border-outset: 0px; --token-border-inset: 0px; } .promo-card{ transition: opacity .25s ease, transform .25s ease, max-height .25s ease, margin .25s ease, padding .25s ease; overflow: hidden; max-height: 1000px; } .promo-card.is-removing{ opacity: 0; transform: translateY(-6px); max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* === Wallet: topup active request === */ .kv{display:flex;flex-direction:column;gap:8px;} .kv-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;} .kv-key{color:var(--muted-color, rgba(255,255,255,0.65));white-space:nowrap;} .kv-key::after{content:":";margin-left:0;} .kv-val{flex:1;text-align:right;word-break:break-word;} .topup-countdown{ font-size: 28px; font-weight: 900; letter-spacing: .5px; padding: 6px 12px; border-radius: 14px; background: rgba(255,255,255,0.06); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 10px 30px rgba(0,0,0,0.15); color: #3ddc84; /* initial green; JS adjusts */ } .topup-countdown.is-blink{ animation: topup-blink 1s steps(2,end) infinite; } /* Wallet topup: QR */ .topup-qr-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center} .topup-qr{width:180px;max-width:70vw} .topup-qr canvas{width:100%;height:auto;display:block;background:#fff;border-radius:18px;padding:10px;box-shadow:0 0 0 1px rgba(0,0,0,0.06) inset, 0 14px 28px rgba(0,0,0,0.18)} @keyframes topup-blink{ 0%{opacity:1;} 50%{opacity:.25;} 100%{opacity:1;} } @media (max-width: 420px){ .kv-row{flex-direction:column;align-items:flex-start;} .kv-key{white-space:normal;} .kv-val{text-align:left;width:100%;} .topup-countdown{font-size:26px;} } /* === FX: explode/remove particles === */ .fx-layer{ position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; } /* Shockwave rings */ .fx-wave{ position: fixed; width: 14px; height: 14px; border-radius: 999px; left: 0; top: 0; transform: translate(-50%, -50%) scale(0.15); border: 2px solid var(--fx-wave-color, rgba(255,255,255,0.85)); box-shadow: 0 0 12px var(--fx-wave-glow, rgba(120,200,255,0.65)), 0 0 24px rgba(0,0,0,0.18); opacity: 0.85; animation: fx-wave 520ms ease-out forwards; } @keyframes fx-wave{ 0%{ transform: translate(-50%,-50%) scale(0.15); opacity: 0.88; } 55%{ opacity: 0.45; } 100%{ transform: translate(-50%,-50%) scale(3.4); opacity: 0; } } .fx-particle{ position: fixed; border-radius: 999px; opacity: 0.95; filter: blur(0.15px) saturate(1.15); transform: translate(0,0) rotate(0deg) scale(1); animation: fx-particle-move 1100ms cubic-bezier(0.15, 0.9, 0.2, 1) forwards; box-shadow: 0 0 14px rgba(0,0,0,0.14); } @keyframes fx-particle-move{ 0%{ transform: translate(0,0) rotate(0deg) scale(1.05); opacity: .98; } 40%{ opacity: .96; } 100%{ transform: translate(var(--fx-dx), var(--fx-dy)) rotate(var(--fx-rot)) scale(0.25); opacity: 0; } } /* Bigger fragments (chunks) */ .fx-frag{ position: fixed; left: 0; top: 0; transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity: 0.95; filter: blur(0.05px) saturate(1.25); box-shadow: 0 0 18px rgba(0,0,0,0.12), 0 0 22px rgba(255,255,255,0.10); animation: fx-frag-move 1600ms cubic-bezier(0.12, 0.85, 0.2, 1) forwards; will-change: transform, opacity; } @keyframes fx-frag-move{ 0%{ transform: translate(-50%,-50%) rotate(0deg) scale(1.02); opacity: 0.98; } 45%{ opacity: 0.96; } 100%{ transform: translate(calc(-50% + var(--fx-dx)), calc(-50% + var(--fx-dy))) rotate(var(--fx-rot)) scale(0.40); opacity: 0; } } .fx-pop-vanish{ will-change: transform, opacity; } /* Fix iOS/Safari stacking: dropdown menus must not be covered by balance badge or promo icon */ body.header-popup-open .wallet-badge, body.header-popup-open .header-balance-corner.wallet-badge, body.header-popup-open #headerPromoIcon, body.header-popup-open .promo-icon.header-gift-near-balance{ opacity:0; pointer-events:none; } .avatar-dropzone.dragover{ border-color: rgba(96,165,250,0.95); box-shadow: 0 0 0 3px rgba(96,165,250,0.25); } /* --- Adaptive slider captcha (minimal UX) --- */ .captcha{ margin-top: 12px; user-select: none; } .captcha-track{ position: relative; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); overflow: hidden; } .captcha-fill{ position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgba(59,130,246,0.35); } .captcha-thumb{ position: absolute; left: 0; top: 0; width: 52px; height: 48px; border-radius: 999px; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; transform: translateX(0); transition: transform 120ms ease; will-change: transform; } .captcha-thumb:after{ content: '➜'; font-size: 18px; opacity: 0.9; } .captcha-thumb.is-done{ background: rgba(34,197,94,0.35); } .captcha-thumb.is-done:after{ content: '✓'; } .captcha-label{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0.95; pointer-events: none; } .captcha.is-done .captcha-label{ opacity: 0.9; } /* Honeypot should be invisible */ .hp-field{ position: absolute !important; left: -10000px !important; top: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } /* date-input-mobile-fix */ @media (max-width: 480px) { input[type="date"] { min-height: 44px; height: 44px; padding: 12px 14px; } } /* PIN overlay (bank-like unlock) */ .pin-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;z-index:120;} .pin-overlay.is-open{display:flex;} .pin-overlay-backdrop{ position: absolute; inset: 0; /* iOS PWA sometimes renders a black rectangle when backdrop-filter is applied to a fullscreen fixed overlay (especially on the first paint). We keep the backdrop simple (dim only), and move the glass/blur effect to the card. */ background: rgba(0,0,0,.46); -webkit-backdrop-filter: none; backdrop-filter: none; } .pin-overlay-card{ position: relative; width: 100%; max-width: 420px; border-radius: 12px; padding: 22px 18px 18px; box-shadow: 0 12px 34px rgba(0,0,0,.35); /* iOS compositing fixes */ transform: translateZ(0); isolation: isolate; will-change: transform, opacity; -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } body[data-theme="dark"] .pin-overlay-card{background:rgba(15,23,42,.92);color:#f8fafc;} body[data-theme="light"] .pin-overlay-card{background:rgba(255,255,255,.95);color:#111;} body.pin-overlay-open{overflow:hidden;} .pin-title{margin:0 0 4px 0;font-size:20px;font-weight:700;text-align:center;} .pin-subtitle{margin:0 0 16px 0;text-align:center;opacity:.7;font-size:13px;} .pin-dots{display:flex;justify-content:center;gap:12px;margin:16px 0 18px;} .pin-dot{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.18);transform:scale(1);transition:background .14s ease,transform .14s ease;} body[data-theme="light"] .pin-dot{background:rgba(0,0,0,.18);} .pin-dot.filled{background:var(--color-accent,#3b82f6);} .pin-error{margin:6px 0 8px;min-height:18px;text-align:center;color:#EB5757;font-size:14px;} .pin-keypad{width:100%;max-width:300px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .pin-key{border:0;background:transparent;color:inherit;font-size:26px;font-weight:600;padding:16px 0;border-radius:18px;line-height:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;} .pin-key:active{background:rgba(255,255,255,.10);transform:scale(.985);} body[data-theme="light"] .pin-key:active{background:rgba(0,0,0,.08);} .pin-key-secondary{opacity:.55;} .pin-links{margin-top:16px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;opacity:.8;} .pin-links a{text-decoration:none;color:inherit;} .pin-links .dot{opacity:.45;} /* --- SPA Bottom Sheet for nested pages --- */ .spa-sheet-backdrop{ position: fixed; left: 0; right: 0; top: calc(var(--app-header-h) + var(--safe-top)); bottom: calc(var(--app-nav-h) + var(--safe-bottom)); background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.55s ease; z-index: 32; } .spa-sheet-backdrop.is-visible{ opacity: 1; pointer-events: auto; } .spa-sheet{ position: fixed; left: 10px; right: 10px; top: calc(var(--app-header-h) + var(--safe-top) + 12px); bottom: calc(var(--app-nav-h) + var(--safe-bottom) + 8px); border-radius: 18px; background: rgba(15,23,42,0.98); backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0,0,0,0.55); border: 1px solid rgba(148,163,184,0.18); transform: translateY(120%); transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1); z-index: 35; overflow: hidden; display: flex; flex-direction: column; } body[data-theme="light"] .spa-sheet{ background: rgba(255,255,255,0.98); border: 1px solid rgba(15,23,42,0.12); } .spa-sheet.is-open{ transform: translateY(0); } .spa-sheet.is-dragging{ transition: none; } .spa-sheet-handle{ height: 26px; position: relative; cursor: grab; flex: 0 0 auto; } .spa-sheet-handle:before{ content: ""; position: absolute; left: 50%; top: 10px; width: 54px; height: 5px; border-radius: 10px; transform: translateX(-50%); background: rgba(148,163,184,0.55); } body[data-theme="light"] .spa-sheet-handle:before{ background: rgba(15,23,42,0.25); } .spa-sheet-content{ flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 18px; } /* Make underlying page slightly darker when sheet is open (content only) */ body.spa-sheet-open #app-main{ filter: brightness(0.86); } /* --- SPA Bottom Sheet (nested pages) --- */ .spa-sheet-backdrop{ position: fixed; left: 0; right: 0; top: calc(var(--app-header-h) + var(--safe-top)); bottom: calc(var(--app-nav-h) + var(--safe-bottom)); background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.55s ease; z-index: 35; /* below bottom nav (45), below header (40) */ } .spa-sheet-backdrop.is-visible{ opacity: 1; pointer-events: auto; } .spa-sheet{ position: fixed; left: 10px; right: 10px; top: calc(var(--app-header-h) + var(--safe-top) + 14px); bottom: calc(var(--app-nav-h) + var(--safe-bottom) + 10px); background: var(--color-card); border: 1px solid rgba(148,163,184,0.22); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.55); overflow: hidden; transform: translateY(110%); transition: transform 0.58s cubic-bezier(.22, .61, .36, 1); z-index: 38; /* below bottom nav */ display: flex; flex-direction: column; } .spa-sheet.is-open{ transform: translateY(0%); } .spa-sheet.is-dragging{ transition: none; } .spa-sheet-handle{ height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; } .spa-sheet-handle::before{ content: ""; width: 44px; height: 5px; border-radius: 99px; background: rgba(148,163,184,0.6); } .spa-sheet-content{ flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 14px 14px; } /* Prevent background scroll jump when sheet open */ body.spa-sheet-open .app-main{ overscroll-behavior: contain; } /* iOS-like interactive swipe between main pages */ .spa-swipe-has-stage{ position: relative; } .spa-swipe-has-stage > :not(.spa-swipe-stage){ visibility: hidden; } .spa-swipe-stage{ position: absolute; inset: 0; z-index: 5; overflow: hidden; will-change: transform; } .spa-swipe-pane{ position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; will-change: transform; } /* While dragging, avoid text selection/accidental highlight */ .spa-swipe-dragging{ user-select: none; -webkit-user-select: none; } /* ----------------------------- Debug helpers (query string) ----------------------------- */ .swipe-debug-hud{ position: fixed; right: 10px; bottom: 90px; z-index: 99999; width: 220px; max-width: calc(100vw - 20px); font-size: 12px; line-height: 1.25; padding: 10px; border-radius: 12px; background: rgba(0,0,0,0.72); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; } .swipe-debug-title{ font-weight: 700; margin-bottom: 6px; } .swipe-debug-lines b{ font-weight: 700; } /* Force-disable expensive effects to isolate iOS flicker causes. */ body.dbg-disable-blur *{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.dbg-disable-shadows *{ box-shadow: none !important; text-shadow: none !important; } /* Do NOT use display:none for FX, so animations won't restart. */ body.dbg-disable-fx .fx-layer, body.dbg-disable-fx canvas, body.dbg-disable-fx .snowflakes, body.dbg-disable-fx .snowflake{ opacity: 0 !important; pointer-events: none !important; } /* ------------------------------------------------------- Toast under top bar (B.5) -------------------------------------------------------- */ .app-toast{ position: fixed; left: 50%; top: 64px; /* below top bar */ transform: translateX(-50%); z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .25s ease, transform .25s ease; } @media (max-width: 420px){ .app-toast{ top: 58px; } } .app-toast.is-show{ opacity: 1; transform: translateX(-50%) translateY(0); } .app-toast__inner{ max-width: min(92vw, 520px); background: rgba(20,20,22,.92); color: #fff; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.2; box-shadow: 0 8px 20px rgba(0,0,0,.25); backdrop-filter: blur(8px); } .app-toast[data-type="error"] .app-toast__inner{ background: rgba(160,30,30,.92); } .app-toast[data-type="success"] .app-toast__inner{ background: rgba(20,120,60,.92); } .app-toast[data-type="warning"] .app-toast__inner{ background: rgba(160,110,20,.92); } /* Invisible overlay input to improve iOS/Android phone autofill on registration (keeps country code) */ .phone-field{position:relative;} .phone-autofill{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;z-index:3;} .phone-field .phone-prefix{z-index:2;position:relative;} .phone-field input[name="phone"]{position:relative;z-index:1;} /* Step 150: VoltWay token catalog visuals */ [data-tokens-catalog="1"] .token-card{ padding: 0; overflow: hidden; border-radius: 18px; } [data-tokens-catalog="1"] .token-main{ display:flex; align-items:stretch; gap:0; min-height: 152px; } [data-tokens-catalog="1"] .token-image-wrap{ width: 42%; min-width: 120px; height: auto; align-self: stretch; border-radius: 18px 0 0 18px; background: transparent; overflow: hidden; box-shadow: none; } [data-tokens-catalog="1"] .token-image-wrap img{ width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; display:block; } [data-tokens-catalog="1"] .token-content{ padding: 12px; align-items: flex-start; justify-content: space-between; min-height: 152px; } @media (max-width: 420px){ [data-tokens-catalog="1"] .token-main{ min-height: 138px; } [data-tokens-catalog="1"] .token-image-wrap{ min-width: 108px; } [data-tokens-catalog="1"] .token-content{ min-height: 138px; padding: 10px; } } /* Step 151b: bigger token icon on Tokens catalog page */ [data-tokens-catalog="1"] .token-main{ min-height: 176px; } [data-tokens-catalog="1"] .token-image-wrap{ width: 50%; min-width: 148px; height: 176px; align-self: stretch; } [data-tokens-catalog="1"] .token-image-wrap img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } [data-tokens-catalog="1"] .token-content{ min-height: 176px; } @media (max-width: 420px){ [data-tokens-catalog="1"] .token-main{ min-height: 164px; } [data-tokens-catalog="1"] .token-image-wrap{ min-width: 138px; height: 164px; } [data-tokens-catalog="1"] .token-content{ min-height: 164px; } } /* PDF-imported Home page visuals */ .page-block-home-pdf-image { margin:0.5rem 0; padding:0; border-radius:1rem; overflow:hidden; background:transparent; box-shadow:none; } .page-block-home-pdf-image .pb-image-wrapper { margin:0; } .page-block-home-pdf-image .pb-image-wrapper img { display:block; width:100%; max-width:100%; border-radius:1rem; } .page-block-home-pdf-text { margin:0.45rem 0 1rem; padding:0.85rem 0.95rem; border-radius:1rem; background:rgba(15,23,42,0.82); box-shadow:0 12px 25px rgba(15,23,42,0.35); } .page-block-home-pdf-text h2 { margin:0 0 0.55rem; font-size:1.05rem; line-height:1.25; } .page-block-home-pdf-text p { margin:0 0 0.6rem; white-space:pre-line; } html[lang="ru"] .page-block-home-pdf-text { display:none; } /* Step 182: upgraded PDF home blocks for non-RU locales */ .page-block{position:relative;overflow:hidden} .page-block-bg-overlay{position:absolute;inset:0;z-index:0} .page-block-bg-inner{position:relative;z-index:1;padding:16px} .page-block-home-pdf-text{ background-color: transparent; padding: 0; overflow: hidden; } .page-block-home-pdf-text .page-block-bg-inner{ padding: 20px 16px; } .page-block-home-pdf-text h2{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45); } .page-block-home-pdf-text p{ color:rgba(255,255,255,.96); text-shadow:0 2px 10px rgba(0,0,0,.35); } @media (max-width: 640px){ .page-block-home-pdf-text .page-block-bg-inner{ padding: 16px 14px; } } /* Step 184: first rebuilt Home sections (live content over original PDF backgrounds) */ .page-block-home-pdf-live{ background-color: transparent; padding: 0; overflow: hidden; border-radius: 22px; min-height: 360px; } .page-block-home-pdf-live .page-block-bg-inner{ padding: 22px 18px; display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; } .page-block-home-pdf-live h2{ margin: 0 0 10px; font-size: 1.18rem; line-height: 1.2; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.48); } .page-block-home-pdf-live p{ margin:0 0 10px; color:rgba(255,255,255,.98); white-space:pre-line; text-shadow:0 2px 10px rgba(0,0,0,.42); } .page-block-home-pdf-live .pb-item:last-child{margin-bottom:0;} .page-block-home-pdf-live.page-block-home-pdf-live-hero{min-height:520px;} .page-block-home-pdf-live.page-block-home-pdf-live-hero .page-block-bg-inner{justify-content:center;text-align:center;} .page-block-home-pdf-live.page-block-home-pdf-live-hero h2{font-size:1.45rem;margin-bottom:12px;} .page-block-home-pdf-live.page-block-home-pdf-live-hero p{font-size:1rem;} @media (max-width: 640px){ .page-block-home-pdf-live{ border-radius:18px; min-height:320px; } .page-block-home-pdf-live .page-block-bg-inner{ padding:18px 14px; } .page-block-home-pdf-live.page-block-home-pdf-live-hero{ min-height:420px; } .page-block-home-pdf-live.page-block-home-pdf-live-hero h2{ font-size:1.24rem; } } /* Step 186: readability tuning for longer PDF-live sections */ .page-block-home-pdf-live .page-block-bg-inner > *{ max-width: 980px; } .page-block-home-pdf-live:not(.page-block-home-pdf-live-hero) .page-block-bg-inner{ align-items: flex-start; } /* Step 187: final PDF-home live sections */ .page-block-home-pdf-live .page-block-bg-inner{ position: relative; } .page-block-home-pdf-live.page-block-home-pdf-live-final .page-block-bg-inner{ justify-content: center; text-align: center; } .page-block-home-pdf-live.page-block-home-pdf-live-final h2{ font-size: 1.34rem; } .page-block-home-pdf-live.page-block-home-pdf-live-final p{ max-width: 760px; margin-left: auto; margin-right: auto; } /* Step 188: builder content alignment controls */ .page-block-bg-inner{ width: 100%; } .page-block-bg-inner > *{ width: min(100%, var(--pb-content-max-width, 980px)); } .page-block-bg-inner.pb-align-left{ align-items: flex-start; text-align: left; } .page-block-bg-inner.pb-align-center{ align-items: center; text-align: center; } .page-block-bg-inner.pb-align-right{ align-items: flex-end; text-align: right; } .page-block-bg-inner.pb-valign-top{ justify-content: flex-start; } .page-block-bg-inner.pb-valign-center{ justify-content: center; } .page-block-bg-inner.pb-valign-bottom{ justify-content: flex-end; } /* Step 189: builder content paddings */ .page-block-bg-inner{ padding-top: var(--pb-content-padding-top, 16px); padding-bottom: var(--pb-content-padding-bottom, 16px); } /* Hotfix 5.4.49: safe fallback public pages */ .page-block .pb-item img{ max-width: 100%; height: auto; border-radius: 20px; } /* Hotfix 5.4.52: exact PDF Home, mobile-first. Слайды PDF выводятся как полноценные страницы-картинки: фон, композиция и текст сохраняются 1:1. */ .public-page-content[data-public-page="home"]{ width: 100%; } .public-page-content[data-public-page="home"] #publicPageInner{ display: flex; flex-direction: column; gap: 6px; } .page-block-home-pdf-exact, .page-block-home-pdf-force{ margin: 0; padding: 0; border-radius: 0; overflow: visible; background: #101820; box-shadow: none; } .page-block-home-pdf-exact .pb-image-wrapper, .page-block-home-pdf-force .pb-image-wrapper{ margin: 0; padding: 0; } .page-block-home-pdf-exact .pb-image-wrapper img, .page-block-home-pdf-force .pb-image-wrapper img{ display: block; width: 100%; max-width: 100%; height: auto; border-radius: 0; box-shadow: none; background: #101820; } @media (max-width: 640px){ .screen:has(.page-block-home-pdf-exact), .screen:has(.page-block-home-pdf-force){ padding-left: 0; padding-right: 0; } .page-block-home-pdf-exact, .page-block-home-pdf-force{ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .page-block-home-pdf-exact .pb-image-wrapper img, .page-block-home-pdf-force .pb-image-wrapper img{ width: 100vw; max-width: 100vw; } } /* Hotfix 5.4.55: translatable PDF-style Home blocks. Background plates stay inside the site content width; live text is overlaid and stored in DB translations. */ .page-block-home-bgtext{ margin: 0 0 10px; padding: 0; border-radius: 22px; overflow: hidden; background-color: #101820; box-shadow: none; min-height: 520px; } .page-block-home-bgtext .page-block-bg-overlay{ background: linear-gradient(90deg, rgba(0,0,0,.46), rgba(0,0,0,.20), rgba(0,0,0,.34)) !important; } .page-block-home-bgtext .page-block-bg-inner{ min-height: inherit; display: flex; flex-direction: column; gap: 10px; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); } .page-block-home-bgtext h2.pb-item{ margin: 0; font-size: clamp(1.18rem, 5.2vw, 2.15rem); line-height: 1.08; color: #fff; letter-spacing: -0.02em; text-shadow: 0 3px 16px rgba(0,0,0,.60); } .page-block-home-bgtext p.pb-item{ margin: 0; font-size: clamp(.86rem, 3.65vw, 1.02rem); line-height: 1.42; color: rgba(255,255,255,.97); white-space: pre-line; text-shadow: 0 2px 12px rgba(0,0,0,.62); } .page-block-home-bgtext .page-block-bg-inner > *{ width: min(100%, var(--pb-content-max-width, 980px)); } @media (max-width: 640px){ .public-page-content[data-public-page="home"] #publicPageInner{ gap: 5px; } .page-block-home-bgtext{ width: 100%; max-width: 100%; min-height: 500px; border-radius: 18px; } .page-block-home-bgtext .page-block-bg-inner{ padding-left: 16px; padding-right: 16px; } } @media (max-width: 380px){ .page-block-home-bgtext{ min-height: 540px; } .page-block-home-bgtext p.pb-item{ font-size: .82rem; line-height: 1.38; } } /* Hotfix 5.4.57: Home PDF as clean backgrounds + live text. First five blocks get individual positioning to match the PDF composition on mobile. */ .page-block-home-ai-clean{ background-color:#101820; background-size:cover !important; background-position:center center !important; min-height:520px; isolation:isolate; } .page-block-home-ai-clean .page-block-bg-overlay{ /* 5.4.58: slightly stronger readable veil over restored image plates. */ background: radial-gradient(circle at 50% 48%, rgba(0,0,0,.08), rgba(0,0,0,.20) 64%, rgba(0,0,0,.34)), linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.14), rgba(0,0,0,.36)) !important; } .page-block-home-ai-clean .page-block-bg-inner{ position:relative; z-index:1; min-height:inherit; padding-top:var(--pb-content-padding-top, 34px); padding-bottom:var(--pb-content-padding-bottom, 34px); } .page-block-home-ai-clean .pb-item{ max-width:var(--pb-content-max-width, 820px); } .page-block-home-ai-clean h2.pb-item{ font-weight:900; letter-spacing:-.035em; color:#fff !important; text-shadow:0 3px 4px rgba(0,0,0,.82), 0 10px 28px rgba(0,0,0,.70), 0 0 1px rgba(0,0,0,.95); } .page-block-home-ai-clean p.pb-item{ font-weight:650; color:rgba(255,255,255,.99) !important; text-shadow:0 2px 3px rgba(0,0,0,.86), 0 8px 22px rgba(0,0,0,.74), 0 0 1px rgba(0,0,0,.95); } .page-block-home-ai-clean .pb-color-black{color:#0a0f16 !important;text-shadow:0 1px 2px rgba(255,255,255,.58), 0 0 1px rgba(255,255,255,.65);} .page-block-home-ai-clean .pb-color-yellow{color:#fff2a8 !important;} .page-block-home-ai-clean .pb-color-green{color:#b8ffcc !important;} .page-block-home-ai-clean .pb-color-blue{color:#bde2ff !important;} .page-block-home-ai-clean-p01 .page-block-bg-inner{ justify-content:flex-end; align-items:center; text-align:center; padding-bottom:58px; } .page-block-home-ai-clean-p01 h2.pb-item{font-size:clamp(1.45rem,5.7vw,2.7rem)} .page-block-home-ai-clean-p01 p.pb-item{font-size:clamp(.9rem,3.4vw,1.12rem)} .page-block-home-ai-clean-p02{background-position:center center !important;} .page-block-home-ai-clean-p02 .page-block-bg-inner{ justify-content:center; align-items:flex-start; text-align:left; padding-left:9%; padding-right:45%; } .page-block-home-ai-clean-p03 .page-block-bg-inner{ justify-content:center; align-items:flex-end; text-align:left; padding-left:42%; padding-right:8%; } .page-block-home-ai-clean-p03 p.pb-item{line-height:1.48} .page-block-home-ai-clean-p04 .page-block-bg-inner{ justify-content:flex-start; align-items:center; text-align:center; padding-left:12%; padding-right:12%; padding-top:54px; } .page-block-home-ai-clean-p04 h2.pb-item{margin-bottom:12px;} .page-block-home-ai-clean-p04 p.pb-item{font-size:clamp(.78rem,2.65vw,.98rem);line-height:1.34;} .page-block-home-ai-clean-p05 .page-block-bg-inner{ justify-content:center; align-items:flex-start; text-align:left; padding-left:8%; padding-right:44%; } .page-block-home-ai-clean-p05 p.pb-item{font-size:clamp(.78rem,2.7vw,.98rem);line-height:1.34;} @media (max-width:640px){ .page-block-home-ai-clean{ min-height:560px; border-radius:18px; } .page-block-home-ai-clean .page-block-bg-overlay{ background:linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.42)) !important; } .page-block-home-ai-clean h2.pb-item{ font-size:clamp(1.2rem,6.2vw,1.75rem); line-height:1.08; } .page-block-home-ai-clean p.pb-item{ font-size:clamp(.78rem,3.65vw,.96rem); line-height:1.34; } .page-block-home-ai-clean-p01 .page-block-bg-inner{ padding-left:18px; padding-right:18px; padding-bottom:46px; } .page-block-home-ai-clean-p02 .page-block-bg-inner{ padding-left:9%; padding-right:33%; } .page-block-home-ai-clean-p03 .page-block-bg-inner{ padding-left:38%; padding-right:8%; } .page-block-home-ai-clean-p04 .page-block-bg-inner{ padding-left:7%; padding-right:7%; padding-top:44px; } .page-block-home-ai-clean-p05 .page-block-bg-inner{ padding-left:7%; padding-right:40%; } } @media (max-width:390px){ .page-block-home-ai-clean{min-height:590px;} .page-block-home-ai-clean-p04 p.pb-item, .page-block-home-ai-clean-p05 p.pb-item{font-size:.76rem;line-height:1.31;} } /* 5.4.57: Home PDF live-text layouts for all 17 mobile-first cards */ .page-block-home-ai-clean-p06 .page-block-bg-inner{justify-content:flex-end;align-items:flex-start;text-align:left;padding-left:7%;padding-right:12%;padding-bottom:8%;} .page-block-home-ai-clean-p06 h2.pb-item{font-size:clamp(1.35rem,4.8vw,2.35rem);max-width:980px;} .page-block-home-ai-clean-p06 p.pb-item{max-width:900px;font-size:clamp(.74rem,2.35vw,.95rem);line-height:1.34;} .page-block-home-ai-clean-p07 .page-block-bg-inner{justify-content:center;align-items:flex-start;text-align:left;padding-left:7%;padding-right:42%;padding-top:6%;padding-bottom:8%;} .page-block-home-ai-clean-p07 p.pb-item{font-size:clamp(.68rem,2.05vw,.88rem);line-height:1.28;} .page-block-home-ai-clean-p08 .page-block-bg-inner{justify-content:flex-start;align-items:flex-start;text-align:left;padding-left:7%;padding-right:45%;padding-top:8%;} .page-block-home-ai-clean-p08 p.pb-item{font-size:clamp(.72rem,2.25vw,.92rem);line-height:1.33;} .page-block-home-ai-clean-p09 .page-block-bg-inner{justify-content:center;align-items:flex-start;text-align:left;padding-left:14%;padding-right:34%;} .page-block-home-ai-clean-p09 h2.pb-item{font-size:clamp(1.15rem,4.2vw,2.15rem);} .page-block-home-ai-clean-p09 p.pb-item{font-size:clamp(.72rem,2.25vw,.94rem);line-height:1.34;} .page-block-home-ai-clean-p10 .page-block-bg-inner{justify-content:center;align-items:flex-end;text-align:left;padding-left:48%;padding-right:8%;} .page-block-home-ai-clean-p10 h2.pb-item{font-size:clamp(1.3rem,4.8vw,2.45rem);} .page-block-home-ai-clean-p10 p.pb-item{font-size:clamp(.72rem,2.25vw,.94rem);line-height:1.34;} .page-block-home-ai-clean-p11 .page-block-bg-inner{justify-content:flex-end;align-items:flex-start;text-align:left;padding-left:6%;padding-right:14%;padding-bottom:9%;} .page-block-home-ai-clean-p11 p.pb-item{font-size:clamp(.72rem,2.3vw,.94rem);line-height:1.35;} .page-block-home-ai-clean-p12 .page-block-bg-inner{justify-content:center;align-items:flex-start;text-align:left;padding-left:6%;padding-right:51%;padding-top:8%;} .page-block-home-ai-clean-p12 p.pb-item{font-size:clamp(.72rem,2.2vw,.92rem);line-height:1.35;} .page-block-home-ai-clean-p13 .page-block-bg-inner{justify-content:center;align-items:flex-start;text-align:left;padding-left:6%;padding-right:48%;padding-top:7%;} .page-block-home-ai-clean-p13 p.pb-item{font-size:clamp(.66rem,1.95vw,.86rem);line-height:1.26;} .page-block-home-ai-clean-p14 .page-block-bg-inner{justify-content:center;align-items:flex-start;text-align:left;padding-left:6%;padding-right:51%;padding-top:7%;} .page-block-home-ai-clean-p14 p.pb-item{font-size:clamp(.67rem,2vw,.86rem);line-height:1.27;} .page-block-home-ai-clean-p15 .page-block-bg-inner{justify-content:center;align-items:flex-start;text-align:left;padding-left:6%;padding-right:50%;padding-top:7%;} .page-block-home-ai-clean-p15 p.pb-item{font-size:clamp(.67rem,2vw,.86rem);line-height:1.28;} .page-block-home-ai-clean-p16 .page-block-bg-inner{justify-content:center;align-items:flex-start;text-align:left;padding-left:7%;padding-right:20%;padding-top:6%;} .page-block-home-ai-clean-p16 p.pb-item{font-size:clamp(.68rem,2.05vw,.88rem);line-height:1.28;} .page-block-home-ai-clean-p17 .page-block-bg-inner{justify-content:center;align-items:center;text-align:center;padding-left:10%;padding-right:10%;} .page-block-home-ai-clean-p17 h2.pb-item{font-size:clamp(2rem,8vw,4.2rem);} .page-block-home-ai-clean-p17 p.pb-item{font-size:clamp(.95rem,3.8vw,1.35rem);} @media (max-width: 640px){ .page-block-home-ai-clean{min-height: min(135vw, 590px); background-size:cover;} .page-block-home-ai-clean .page-block-bg-inner{padding-top:18px;padding-bottom:18px;} .page-block-home-ai-clean h2.pb-item{margin-bottom:8px;} .page-block-home-ai-clean p.pb-item{line-height:1.28;} .page-block-home-ai-clean-p06 .page-block-bg-inner{padding-left:7%;padding-right:9%;padding-bottom:8%;} .page-block-home-ai-clean-p07 .page-block-bg-inner{padding-left:7%;padding-right:39%;padding-top:6%;} .page-block-home-ai-clean-p08 .page-block-bg-inner{padding-left:7%;padding-right:43%;padding-top:8%;} .page-block-home-ai-clean-p09 .page-block-bg-inner{padding-left:12%;padding-right:30%;} .page-block-home-ai-clean-p10 .page-block-bg-inner{padding-left:45%;padding-right:7%;} .page-block-home-ai-clean-p11 .page-block-bg-inner{padding-left:6%;padding-right:10%;padding-bottom:8%;} .page-block-home-ai-clean-p12 .page-block-bg-inner{padding-left:6%;padding-right:49%;} .page-block-home-ai-clean-p13 .page-block-bg-inner{padding-left:6%;padding-right:45%;} .page-block-home-ai-clean-p14 .page-block-bg-inner{padding-left:6%;padding-right:49%;} .page-block-home-ai-clean-p15 .page-block-bg-inner{padding-left:6%;padding-right:48%;} .page-block-home-ai-clean-p16 .page-block-bg-inner{padding-left:7%;padding-right:16%;} } /* 5.4.58: page builder block preview foundation */ .pb-live-preview{ position:relative; min-height:240px; border-radius:18px; overflow:hidden; background:#101820 center/cover no-repeat; border:1px solid rgba(148,163,184,.28); margin:.65rem 0 0; } .pb-live-preview::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.38)); } .pb-live-preview-inner{ position:relative; z-index:1; min-height:240px; display:flex; flex-direction:column; justify-content:center; padding:18px; color:#fff; text-shadow:0 2px 3px rgba(0,0,0,.82), 0 8px 22px rgba(0,0,0,.70); } .pb-live-preview-inner h4{margin:0 0 8px;font-size:1.05rem;line-height:1.12;font-weight:900;} .pb-live-preview-inner p{margin:0;font-size:.82rem;line-height:1.35;font-weight:650;white-space:pre-line;} .pb-builder-note{font-size:.82rem;color:#94a3b8;margin:.35rem 0 .65rem;} /* 5.4.59: admin-adjustable live text position/color over page-builder backgrounds */ .page-block-bg-inner{ transform: translate(var(--pb-content-offset-x, 0px), var(--pb-content-offset-y, 0px)); color: var(--pb-content-text-color, #fff); } .page-block-bg-inner h2.pb-item, .page-block-bg-inner p.pb-item, .page-block-bg-inner a.pb-item{ color: inherit; } .pb-position-controls{ margin-top:.65rem; border:1px solid rgba(148,163,184,.28); border-radius:14px; padding:.75rem; } .pb-position-controls legend{font-weight:800;font-size:.88rem;padding:0 .35rem;} .pb-position-controls label{display:grid;grid-template-columns:minmax(180px, 1fr) minmax(180px, 2fr) 92px;gap:.55rem;align-items:center;margin:.55rem 0;} .pb-position-controls input[type="range"]{width:100%;} .pb-position-controls input[type="number"], .pb-position-controls input[type="text"]{max-width:92px;} .pb-position-controls input[type="color"]{width:58px;height:38px;padding:2px;border-radius:10px;} .pb-live-preview-inner{ transform: translate(var(--pb-preview-x, 0px), var(--pb-preview-y, 0px)); color: var(--pb-preview-color, #fff); transition: transform .08s linear, color .12s ease; } @media (max-width: 720px){ .pb-position-controls label{grid-template-columns:1fr;gap:.35rem;} .pb-position-controls input[type="number"], .pb-position-controls input[type="text"]{max-width:160px;} } /* 5.4.62: page builder preview tuner: Y slider left, X slider bottom */ .pb-preview-tuner{ margin:.75rem 0 .35rem; border:1px solid rgba(148,163,184,.28); border-radius:18px; padding:.75rem; background:rgba(15,23,42,.36); } .pb-preview-grid{ display:grid; grid-template-columns:56px minmax(0, 1fr); gap:.65rem; align-items:stretch; } .pb-preview-main{min-width:0;} .pb-preview-tuner .pb-live-preview{margin:0;} .pb-axis-y, .pb-axis-x, .pb-color-row{ display:flex; align-items:center; gap:.5rem; color:#cbd5e1; font-size:.84rem; font-weight:800; } .pb-axis-y{ flex-direction:column; justify-content:center; min-height:240px; padding:.25rem .1rem; } .pb-axis-y input[type="range"]{ width:220px; max-width:220px; writing-mode:vertical-lr; direction:rtl; accent-color:#60a5fa; } .pb-axis-y input[type="number"]{width:54px;text-align:center;} .pb-axis-x{margin:.55rem 0 0;} .pb-axis-x input[type="range"]{flex:1;min-width:120px;accent-color:#60a5fa;} .pb-axis-x input[type="number"]{width:76px;text-align:center;} .pb-color-row{margin:.55rem 0 0;flex-wrap:wrap;} .pb-color-row input[type="color"]{width:58px;height:38px;padding:2px;border-radius:10px;} .pb-color-row input[type="text"]{width:96px;} @media (max-width: 720px){ .pb-preview-grid{grid-template-columns:42px minmax(0,1fr);gap:.45rem;} .pb-axis-y{min-height:190px;} .pb-axis-y input[type="range"]{width:175px;max-width:175px;} .pb-axis-x{display:grid;grid-template-columns:auto 1fr 72px;} .pb-axis-x input[type="number"]{width:72px;} } /* 5.4.64 Reserve page: income/partner program blocks use the same visual language as Home. */ .page-block-reserve-income{ position:relative; overflow:hidden; border-radius:18px; min-height:520px; background-color:#101820; box-shadow:0 18px 46px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08); isolation:isolate; } .page-block-reserve-income::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,12,20,.12),rgba(6,12,20,.34)); pointer-events:none; z-index:0; } .page-block-reserve-income .page-block-bg-overlay{z-index:1;} .page-block-reserve-income .page-block-bg-inner{ position:relative; z-index:2; min-height:inherit; color:var(--pb-content-text-color,#fff); transform:translate(var(--pb-content-offset-x,0px),var(--pb-content-offset-y,0px)); text-shadow:0 3px 12px rgba(0,0,0,.72), 0 1px 2px rgba(0,0,0,.92); } .page-block-reserve-income h2.pb-item{ font-size:clamp(1.35rem,5.2vw,2.7rem); line-height:1.04; margin:0 0 .55rem; letter-spacing:.01em; } .page-block-reserve-income p.pb-item{ max-width:980px; font-size:clamp(.86rem,3.15vw,1.08rem); line-height:1.42; margin:.35rem 0 0; } .page-block-reserve-income .pb-btn{ display:inline-flex; align-items:center; justify-content:center; margin-top:.9rem; border-radius:999px; background:linear-gradient(135deg,#1b6bff,#18c56e); color:#fff!important; padding:.72rem 1.05rem; box-shadow:0 10px 22px rgba(0,0,0,.25); } .page-block-reserve-income-p01{background-position:center center!important;} .page-block-reserve-income-p01 .page-block-bg-inner{justify-content:flex-end;align-items:flex-start;text-align:left;padding:7% 8% 9%;} .page-block-reserve-income-p02 .page-block-bg-inner{justify-content:flex-start;align-items:flex-start;text-align:left;padding:7% 8%;} .page-block-reserve-income-p03 .page-block-bg-inner{justify-content:flex-end;align-items:center;text-align:center;padding:7% 8%;} .page-block-reserve-income-p04 .page-block-bg-inner{justify-content:flex-end;align-items:flex-start;text-align:left;padding:7% 8%;} .page-block-reserve-income-p05 .page-block-bg-inner{justify-content:flex-start;align-items:flex-start;text-align:left;padding:7% 8%;} .page-block-reserve-income-p06 .page-block-bg-inner{justify-content:flex-end;align-items:flex-start;text-align:left;padding:7% 8% 10%;} .page-block-reserve-income-p07 .page-block-bg-inner{justify-content:center;align-items:center;text-align:center;padding:7% 8%;} .page-block-reserve-income-p08 .page-block-bg-inner{justify-content:flex-end;align-items:center;text-align:center;padding:7% 8%;} .page-block-reserve-income-p02 h2.pb-item, .page-block-reserve-income-p03 h2.pb-item, .page-block-reserve-income-p04 h2.pb-item, .page-block-reserve-income-p05 h2.pb-item{font-size:clamp(1.1rem,4.2vw,2.2rem);} .page-block-reserve-income-p02 p.pb-item, .page-block-reserve-income-p03 p.pb-item, .page-block-reserve-income-p04 p.pb-item, .page-block-reserve-income-p05 p.pb-item{font-size:clamp(.78rem,2.7vw,.98rem);} .page-block-reserve-income-p07 .pb-image-wrapper, .page-block-reserve-income-p08 .pb-image-wrapper{display:none;} @media (max-width:640px){ .page-block-reserve-income{min-height:min(132vw,590px);border-radius:16px;background-size:cover!important;} .page-block-reserve-income .page-block-bg-inner{padding:22px!important;} .page-block-reserve-income p.pb-item{font-size:.82rem;line-height:1.34;} .page-block-reserve-income-p02 .page-block-bg-inner, .page-block-reserve-income-p05 .page-block-bg-inner{justify-content:flex-end;} } /* 5.4.65 reserve: text above fully visible media, no overlay over important tables/images. */ .page-block-reserve-income{ background-image:none!important; background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,14,28,.98))!important; border:1px solid rgba(148,163,184,.22); border-radius:18px; box-shadow:0 18px 44px rgba(0,0,0,.28); overflow:hidden; min-height:0!important; padding:14px; margin:0 0 18px; } .page-block-reserve-income::after, .page-block-reserve-income .page-block-bg-overlay, .page-block-reserve-income .page-block-bg-inner{display:none!important;} .page-block-reserve-income > h2.pb-item, .page-block-reserve-income > p.pb-item{ position:relative; z-index:2; color:var(--pb-content-text-color,#fff); text-shadow:0 2px 10px rgba(0,0,0,.72); max-width:1080px; } .page-block-reserve-income > h2.pb-item{ font-size:clamp(1.22rem,4.7vw,2.1rem); line-height:1.08; margin:.15rem .2rem .45rem; } .page-block-reserve-income > p.pb-item{ font-size:clamp(.88rem,3.1vw,1.04rem); line-height:1.45; margin:0 .2rem .85rem; color:rgba(241,245,249,.95); } .page-block-reserve-income .pb-image-wrapper{ width:100%; display:flex; align-items:center; justify-content:center; margin:0; background:rgba(2,6,23,.26); border-radius:14px; overflow:hidden; } .page-block-reserve-income .pb-image-wrapper img{ display:block; width:100%; height:auto; max-height:min(74vh,720px); object-fit:contain; border-radius:14px; box-shadow:none; } .page-block-reserve-income-p04 .pb-image-wrapper img, .page-block-reserve-income-p07 .pb-image-wrapper img{ width:auto; max-width:100%; max-height:min(78vh,760px); } .page-block-reserve-income-p07{padding:10px;background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(8,14,28,.96))!important;} .page-block-reserve-income-p07 > h2.pb-item, .page-block-reserve-income-p07 > p.pb-item{display:none!important;} @media (max-width:640px){ .page-block-reserve-income{padding:10px;border-radius:16px;margin-bottom:14px;} .page-block-reserve-income > h2.pb-item{font-size:1.12rem;margin:.05rem .1rem .4rem;} .page-block-reserve-income > p.pb-item{font-size:.84rem;line-height:1.38;margin:0 .1rem .65rem;} .page-block-reserve-income .pb-image-wrapper{border-radius:12px;} .page-block-reserve-income .pb-image-wrapper img{border-radius:12px;max-height:70vh;} } /* 5.4.66: reserve render fix + sharper header logo */ .app-header .header-left .logo-image{ flex:0 0 auto; width:min(220px,38vw); max-width:220px; height:calc(var(--app-header-h) - 12px); display:flex; align-items:center; overflow:visible; } .app-header .header-left .logo-image img{ width:100%; height:auto; max-height:100%; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); } @media (max-width:420px){ .app-header .header-left .logo-image{width:min(178px,44vw);} } /* Reserve must not hide content inside background wrapper; v3 stores media as image items only. */ .page-block-reserve-income{ background-image:none!important; background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(8,14,28,.985))!important; border:1px solid rgba(148,163,184,.22); border-radius:18px; box-shadow:0 18px 44px rgba(0,0,0,.28); overflow:hidden; min-height:0!important; padding:14px; margin:0 0 18px; } .page-block-reserve-income::after, .page-block-reserve-income .page-block-bg-overlay{display:none!important;} .page-block-reserve-income .page-block-bg-inner{ display:block!important; position:static!important; padding:0!important; width:100%!important; } .page-block-reserve-income h2.pb-item, .page-block-reserve-income p.pb-item{ position:relative; z-index:2; width:100%!important; max-width:1080px; color:var(--pb-content-text-color,#fff); text-shadow:0 2px 10px rgba(0,0,0,.72); } .page-block-reserve-income h2.pb-item{ font-size:clamp(1.22rem,4.7vw,2.1rem); line-height:1.08; margin:.15rem .2rem .45rem; } .page-block-reserve-income p.pb-item{ font-size:clamp(.88rem,3.1vw,1.04rem); line-height:1.45; margin:0 .2rem .85rem; color:rgba(241,245,249,.95); } .page-block-reserve-income .pb-image-wrapper{ width:100%!important; display:flex!important; align-items:center; justify-content:center; margin:0!important; background:rgba(2,6,23,.26); border-radius:14px; overflow:hidden; } .page-block-reserve-income .pb-image-wrapper img{ display:block; width:100%; height:auto; max-width:100%; max-height:min(74vh,720px); object-fit:contain; border-radius:14px; box-shadow:none; } .page-block-reserve-income-p04 .pb-image-wrapper img, .page-block-reserve-income-p07 .pb-image-wrapper img{ width:auto; max-width:100%; max-height:min(78vh,760px); } .page-block-reserve-income-p07{padding:10px;background:linear-gradient(180deg, rgba(15,23,42,.9), rgba(8,14,28,.96))!important;} .page-block-reserve-income-p07 h2.pb-item, .page-block-reserve-income-p07 p.pb-item{display:none!important;} @media (max-width:640px){ .page-block-reserve-income{padding:10px;border-radius:16px;margin-bottom:14px;} .page-block-reserve-income h2.pb-item{font-size:1.12rem;margin:.05rem .1rem .4rem;} .page-block-reserve-income p.pb-item{font-size:.84rem;line-height:1.38;margin:0 .1rem .65rem;} .page-block-reserve-income .pb-image-wrapper{border-radius:12px;} .page-block-reserve-income .pb-image-wrapper img{border-radius:12px;max-height:70vh;} } /* Hotfix 5.4.68: token catalog images must have a stable equal size. */ [data-tokens-catalog="1"] .token-card{ min-height: 176px; } [data-tokens-catalog="1"] .token-main{ min-height: 176px; align-items: stretch; } [data-tokens-catalog="1"] .token-image-wrap{ flex:0 0 170px; width:170px; min-width:170px; height:176px; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.55); } [data-tokens-catalog="1"] .token-image-wrap img{ width:100%; height:100%; object-fit:contain; object-position:center; } @media (max-width:420px){ [data-tokens-catalog="1"] .token-image-wrap{ flex-basis:150px; width:150px; min-width:150px; height:164px; } [data-tokens-catalog="1"] .token-card, [data-tokens-catalog="1"] .token-main{ min-height:164px; } } /* 7.2.51: Public Home must match the page-builder preview. Revert the 16:9 compression from 5.4.70: it made long translated text overlap and look duplicated on the real mobile Home page while the admin preview stayed clean. */ .public-page-content[data-public-page="home"] .page-block-home-ai-clean{ min-height: min(135vw, 590px) !important; aspect-ratio:auto !important; background-size:cover !important; background-repeat:no-repeat !important; background-position:center center !important; overflow:hidden; } .public-page-content[data-public-page="home"] .page-block-home-ai-clean .page-block-bg-inner{ min-height:inherit; height:auto; } .public-page-content[data-public-page="home"] .page-block-home-ai-clean .page-block-bg-overlay{ opacity:.72; } @media (max-width:640px){ .public-page-content[data-public-page="home"] #publicPageInner{gap:16px;} .public-page-content[data-public-page="home"] .page-block-home-ai-clean{ width:100%; max-width:100%; border-radius:18px; } } .pb-text-reveal .page-block-bg-inner{ opacity:0; will-change:transform, opacity; transition:transform .78s cubic-bezier(.22,1,.36,1), opacity .58s ease; } .pb-text-reveal-left .page-block-bg-inner{transform:translateX(-105%);} .pb-text-reveal-right .page-block-bg-inner{transform:translateX(105%);} .pb-text-reveal-top .page-block-bg-inner{transform:translateY(-105%);} .pb-text-reveal-bottom .page-block-bg-inner{transform:translateY(105%);} .pb-text-reveal.pb-text-reveal-visible .page-block-bg-inner{ opacity:1; transform:translate(var(--pb-content-offset-x, 0px), var(--pb-content-offset-y, 0px)); } .pb-text-reveal:not(.pb-text-reveal-visible) .page-block-bg-inner{ pointer-events:none; } @media (prefers-reduced-motion: reduce){ .pb-text-reveal .page-block-bg-inner{transition:none;opacity:1;transform:translate(var(--pb-content-offset-x, 0px), var(--pb-content-offset-y, 0px));} } .pb-reveal-row{ display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; margin:.7rem 0 0; padding:.65rem; border:1px dashed rgba(148,163,184,.32); border-radius:14px; background:rgba(15,23,42,.36); } .pb-reveal-row label{display:flex;align-items:center;gap:.4rem;font-size:.86rem;color:#cbd5e1;font-weight:700;} .pb-reveal-row select{min-width:120px;} /* 5.4.76: Page-builder card text color comes from block settings only. */ .page-block-reserve-income{ color:var(--pb-content-text-color,#ffffff); } .page-block-reserve-income .page-block-bg-inner{ color:var(--pb-content-text-color,#ffffff); } .page-block-reserve-income h2.pb-item, .page-block-reserve-income p.pb-item, .page-block-reserve-income .pb-item[class*="pb-color-"]{ color:inherit; } /* 5.4.77: Reserve/Income text color is controlled by the page-builder block color. The explicit -webkit-text-fill-color fixes iOS cases where old color classes made text gray. */ .page-block-reserve-income h2.pb-item, .page-block-reserve-income p.pb-item, .page-block-reserve-income a.pb-item, .page-block-reserve-income .pb-item[class*="pb-color-"]{ color:var(--pb-content-text-color,#ffffff); -webkit-text-fill-color:var(--pb-content-text-color,#ffffff); } body.coupon-bubble-open { overflow: hidden; } .token-coupon-picker { position: fixed; inset: 0; z-index: 9000; display: none; align-items: flex-end; justify-content: center; padding: 14px; } .token-coupon-picker.is-open { display: flex; } .token-coupon-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.48); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .token-coupon-bubble { position: relative; z-index: 1; width: min(420px, 100%); max-height: min(76vh, 560px); padding: 14px; border-radius: 24px 24px 20px 20px; background: rgba(15, 23, 42, 0.94); border: 1px solid rgba(148, 163, 184, 0.24); box-shadow: 0 24px 70px rgba(0,0,0,0.48); display: flex; flex-direction: column; gap: 10px; animation: tokenCouponBubbleIn 180ms ease-out; } @keyframes tokenCouponBubbleIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .token-coupon-bubble__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .token-coupon-bubble__head strong { display: block; font-size: 15px; line-height: 1.2; } .token-coupon-bubble__head span { display: block; margin-top: 3px; font-size: 11px; opacity: 0.72; } .token-coupon-close { width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.24); background: rgba(255,255,255,0.06); color: var(--color-text, #fff); font-size: 20px; line-height: 1; cursor: pointer; } .token-coupon-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 2px 4px; -webkit-overflow-scrolling: touch; } .token-coupon-item { margin: 0; display: block; min-width: 0; } .token-coupon-item input { position: absolute; opacity: 0; pointer-events: none; } .token-coupon-ticket { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 64px; border-radius: 12px; cursor: pointer; overflow: hidden; transform: translateZ(0); border: 2px solid transparent; box-shadow: 0 10px 22px rgba(15,23,42,.22); transition: border-color 160ms ease, filter 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .token-coupon-ticket img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .token-coupon-ticket__overlay { position: absolute; inset: 0; z-index: 1; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: #fff; text-shadow: 0 2px 8px rgba(15,23,42,0.55); } .token-coupon-ticket__name { font-size: 8px; text-transform: uppercase; letter-spacing: .08em; opacity: .88; font-weight: 800; } .token-coupon-ticket__amount { margin-top: 2px; font-size: 18px; line-height: 1; font-weight: 900; letter-spacing: -.04em; } .token-coupon-item input:checked + .token-coupon-ticket { border-color: #22c55e; filter: brightness(1.08) saturate(1.06); transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(34,197,94,0.25), 0 14px 26px rgba(15,23,42,.30); } .token-coupon-item input:checked + .token-coupon-ticket::after { content: '✓'; position: absolute; right: 7px; top: 7px; z-index: 2; width: 21px; height: 21px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #22c55e; color: #fff; font-size: 12px; font-weight: 900; box-shadow: 0 4px 12px rgba(15,23,42,0.35); } .token-coupon-result { font-size: 12px; opacity: .88; text-align: center; } .token-coupon-submit { width: 100%; } @media (max-width: 420px) { .token-coupon-picker { padding: 10px; } .token-coupon-bubble { max-height: 78vh; border-radius: 22px; padding: 12px; } .token-coupon-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 46vh; } .token-coupon-ticket { min-height: 58px; border-radius: 10px; } .token-coupon-ticket__overlay { padding: 7px 8px; } .token-coupon-ticket__amount { font-size: 16px; } } @media (max-width: 340px) { .token-coupon-list { grid-template-columns: 1fr; } .token-coupon-ticket { max-width: 170px; margin: 0 auto; } } .coupon-admin-box { display: flex; flex-direction: column; gap: 4px; min-width: 120px; } .coupon-admin-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .coupon-admin-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; font-size: 8px; line-height: 1.2; border: 1px solid rgba(148,163,184,0.28); background: rgba(59,130,246,0.12); white-space: nowrap; } /* Flying coupon animation after trial/L0 collect (v6.7.8) */ .coupon-fly { position: fixed; left: 0; top: 0; width: 86px; height: 48px; z-index: 9999; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(15,23,42,0.35)); transform-origin: 50% 50%; } .coupon-fly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; } .coupon-fly__amount { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); color: #fff; font-size: 13px; line-height: 1; font-weight: 900; text-align: center; text-shadow: 0 2px 8px rgba(15,23,42,0.65); } .coupon-fly__spark { position: absolute; right: -5px; top: -7px; width: 21px; height: 21px; border-radius: 999px; background: rgba(255,255,255,0.72); box-shadow: 0 0 22px rgba(255,255,255,0.9); } .admin-coupon-status-active { color: #22c55e; font-weight: 700; } .admin-coupon-status-reserved { color: #f59e0b; font-weight: 700; } .admin-coupon-status-used { color: #60a5fa; font-weight: 700; } .admin-coupon-status-cancelled, .admin-coupon-status-expired { color: #ef4444; font-weight: 700; } .admin-coupon-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .admin-coupon-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; } /* v6.7.13 coupon fixes: centered номинал, stable mobile sizes, stronger fly animation */ .coupon-card__content{ align-items:center !important; justify-content:center !important; text-align:center !important; padding:10px 14px !important; } .coupon-card__label{display:none !important;} .coupon-card__amount{ margin:0 !important; font-size:clamp(28px, 8vw, 46px) !important; text-align:center !important; width:100% !important; line-height:.95 !important; } .coupon-card__meta{display:none !important;} .token-coupon-ticket__overlay{align-items:center !important; text-align:center !important; justify-content:center !important;} .token-coupon-ticket__name{display:none !important;} .token-coupon-ticket__amount{margin:0 !important; font-size:clamp(18px, 6vw, 30px) !important; text-align:center !important; width:100% !important;} .token-coupon-picker.is-open{display:flex !important;} .token-coupon-bubble{max-width:calc(100vw - 20px);} .coupon-fly--inflate .coupon-fly__spark{ animation: couponSparkBurst 1480ms ease-out forwards; } @keyframes couponSparkBurst{ 0%, 22% { opacity:0; transform:scale(.2); box-shadow:0 0 0 rgba(255,255,255,0); } 35% { opacity:1; transform:scale(1.8); box-shadow:0 0 0 8px rgba(255,255,255,.28), 0 0 26px rgba(250,204,21,.95), 0 0 44px rgba(255,255,255,.86); } 48% { opacity:.95; transform:scale(.9); box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 0 22px rgba(250,204,21,.75); } 100% { opacity:0; transform:scale(.15); box-shadow:0 0 0 rgba(255,255,255,0); } } .admin-coupon-preview{ position:relative; width:min(360px,100%); aspect-ratio:16/9; border-radius:18px; overflow:hidden; box-shadow:0 16px 34px rgba(15,23,42,.22); } .admin-coupon-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;} .admin-coupon-preview__amount{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(34px,9vw,62px);font-weight:900;color:#fff;text-shadow:0 3px 14px rgba(15,23,42,.55);} /* v6.7.14: detached token purchase coupon bubble and corrected coupon fly scenario */ .token-coupon-picker { position: fixed !important; inset: 0 !important; z-index: 10020 !important; display: none !important; align-items: stretch !important; justify-content: stretch !important; padding: 0 !important; pointer-events: none !important; } .token-coupon-picker.is-open { display: block !important; pointer-events: auto !important; } .token-coupon-backdrop { position: fixed !important; inset: 0 !important; background: rgba(2, 6, 23, 0.44) !important; backdrop-filter: blur(7px) !important; -webkit-backdrop-filter: blur(7px) !important; } .token-coupon-bubble { position: fixed !important; z-index: 10021 !important; max-height: min(76vh, 560px) !important; max-width: calc(100vw - 28px) !important; overflow: hidden !important; animation: tokenCouponBubbleDetachedIn 210ms cubic-bezier(.18,.9,.2,1.1) !important; transform-origin: 50% 100% !important; } @keyframes tokenCouponBubbleDetachedIn { from { opacity: 0; transform: translateX(calc(-50% + 12px)) translateY(24px) scale(0.86); } 65% { opacity: 1; transform: translateX(calc(-50% + 12px)) translateY(-4px) scale(1.03); } to { opacity: 1; transform: translateX(calc(-50% + 12px)) translateY(0) scale(1); } } @media (min-width: 521px) { @keyframes tokenCouponBubbleDetachedIn { from { opacity: 0; transform: translateY(24px) scale(0.86); } 65% { opacity: 1; transform: translateY(-4px) scale(1.03); } to { opacity: 1; transform: translateY(0) scale(1); } } } .token-coupon-list { max-height: min(42vh, 320px) !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } .token-coupon-ticket__amount { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: 100% !important; text-align: center !important; font-weight: 900 !important; } .coupon-fly { width: 180px !important; height: 101px !important; z-index: 12000 !important; filter: drop-shadow(0 18px 26px rgba(15,23,42,0.42)) !important; } .coupon-fly img { border-radius: 14px !important; } .coupon-fly__amount { font-size: 28px !important; font-weight: 950 !important; color: #fff !important; text-align: center !important; text-shadow: 0 3px 12px rgba(15,23,42,0.72), 0 0 18px rgba(255,255,255,0.35) !important; } .coupon-fly__spark { display: none !important; } .coupon-fly__sparklet { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin-left: -3.5px; margin-top: -3.5px; border-radius: 999px; background: rgba(255,255,255,0.96); box-shadow: 0 0 16px rgba(255,255,255,0.98), 0 0 28px rgba(250,204,21,0.95), 0 0 42px rgba(255,255,255,0.55); opacity: 0; transform: translate(-50%, -50%) scale(0.25); animation: couponSparkBurst 900ms ease-out 620ms 2; pointer-events: none; } @keyframes couponSparkBurst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1.05); } } .coupon-fly--merge { transition: opacity 220ms ease, filter 220ms ease; opacity: 0; filter: brightness(1.3) drop-shadow(0 0 22px rgba(255,255,255,0.55)) !important; } /* v6.7.17 mobile text/coupon/admin fixes */ .coupon-card__amount, .token-coupon-ticket__amount, .coupon-fly__amount{ white-space: nowrap; letter-spacing: -0.035em; } .coupon-card__amount{font-size:clamp(24px, 7vw, 44px) !important;} .token-coupon-ticket__amount{font-size:clamp(16px, 5vw, 26px) !important;} @media (max-width: 520px){ .token-sub{font-size:13px; line-height:1.25;} .token-actions .btn-secondary[disabled]{font-size:13px; padding-left:12px; padding-right:12px; max-width:100%; white-space:nowrap;} } @media (max-width: 900px){ body.admin2-layout .admin2-sidebar{ background: rgba(255,255,255,0.97) !important; color: #111827 !important; border-color: rgba(15,23,42,0.14) !important; box-shadow: 0 20px 60px rgba(15,23,42,0.28) !important; } body.admin2-layout .admin2-sidebar .admin2-link, body.admin2-layout .admin2-sidebar .admin2-brand-title, body.admin2-layout .admin2-sidebar .admin2-group-title{ color: #111827 !important; } body.admin2-layout .admin2-sidebar .admin2-link:hover, body.admin2-layout .admin2-sidebar .admin2-link-active{ background: rgba(249,115,22,0.12) !important; border-color: rgba(249,115,22,0.35) !important; } } /* v6.7.18 fixes: coupon fly must pass under fixed header/bottom nav, not above them. */ .coupon-fly{z-index:39 !important;} /* Step 6.7.42: numeric attention badges for new coupons/promotions */ .attention-badge, .nav-promo-dot{ min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; line-height: 18px; font-weight: 900; text-align: center; box-shadow: 0 0 0 2px rgba(15,23,42,0.85), 0 0 14px rgba(239,68,68,0.55); pointer-events: none; } .nav-promo-dot{ width:auto; top:-8px; right:-10px; opacity:0; transform:scale(.72); } .nav-promo-dot.is-on, .attention-badge.is-on{ opacity:1; transform:scale(1); animation: promoDotPulse 1.35s infinite; } .attention-badge{ position:absolute; display:none; opacity:0; transform:scale(.72); } .attention-badge.is-on, .attention-badge:not(:empty){ display:inline-block; opacity:1; transform:scale(1); } .attention-badge--gift{ top:2px; right:0; z-index:4; } .profile-coupon-widget__head{ position:relative; min-height:22px; } .attention-badge--coupon-stack{ top:-5px; right:0; z-index:8; } .attention-pop{ animation: attentionPop .62s cubic-bezier(.2,1.25,.35,1) 1 !important; } @keyframes attentionPop{ 0%{ transform:scale(.55); opacity:.25; } 45%{ transform:scale(1.45); opacity:1; } 100%{ transform:scale(1); opacity:1; } } /* Step 6.7.42: trial token buy button and coupon attention polish */ [data-tokens-catalog="1"] .token-buy-btn, [data-tokens-catalog="1"] .token-buy-btn--trial{ font-family: inherit; font-weight: 800; letter-spacing: 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0; } .coupon-stack.has-unseen-coupons .coupon-card.is-current{ animation: couponUnseenNudge 2.6s ease-in-out infinite; transform-origin: 50% 50%; } @keyframes couponUnseenNudge{ 0%, 72%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 78% { transform: translate3d(-3px, 0, 0) rotate(-0.8deg) scale(1.006); } 84% { transform: translate3d(3px, 0, 0) rotate(0.8deg) scale(1.006); } 90% { transform: translate3d(-2px, 0, 0) rotate(-0.45deg) scale(1.003); } 96% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } } /* A viewed promo gift stays as a link but stops shaking. */ .profile-promo-gift:not(.promo-attention){ animation: none !important; } /* Step 6.7.42: independent promotion action button layout */ .promo-card .promo-btn-wrap{ display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important; margin-top:12px; text-align:center; } .promo-card .promo-action-button{ appearance:none; -webkit-appearance:none; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:min(260px, 76%) !important; min-height:44px; margin:0 auto !important; padding:10px 18px; border:0; border-radius:999px; background:linear-gradient(90deg,#ff7a18,#ffb300); color:#1f2937; font-weight:800; font-family:inherit; text-align:center; cursor:pointer; box-shadow:0 8px 18px rgba(245,158,11,.22); touch-action:manipulation; } .promo-card .promo-action-button .pay-btn-label{ display:inline-flex; align-items:center; justify-content:center; width:100%; text-align:center; } .promo-card .promo-action-button.is-disabled{ opacity:.64; cursor:default; pointer-events:auto; } /* Step 6.7.42: promotion reward buttons */ .promo-card .promo-action-button.is-claim-action, .promo-card.state-ready .promo-action-button, .promo-card .promo-action-button[data-action="claim"]{ background:linear-gradient(90deg,#16a34a,#22c55e) !important; color:#fff !important; box-shadow:0 8px 18px rgba(34,197,94,.28) !important; } .promo-card .promo-action-button.is-join-action, .promo-card.state-not-started .promo-action-button, .promo-card .promo-action-button[data-action="join"]{ background:linear-gradient(90deg,#ff7a18,#ffb300) !important; color:#1f2937 !important; } .promo-prize-line{ margin-left:0; line-height:1.28; } .promo-card .promo-btn-wrap{ display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important; text-align:center !important; } .promo-card .promo-action-button{ margin-left:auto !important; margin-right:auto !important; } /* Step 6.7.42: final promotion action alignment and claim state */ .promo-card .promo-btn-wrap{ display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important; margin:12px auto 0 !important; text-align:center !important; } .promo-card .promo-action-button, .promo-card .promo-action-btn{ position:relative; left:auto !important; right:auto !important; float:none !important; display:flex !important; align-items:center !important; justify-content:center !important; width:220px !important; max-width:76% !important; min-width:160px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; transform:none; } .promo-card.state-ready .promo-action-button, .promo-card .promo-action-button[data-action="claim"], .promo-card .promo-action-button.is-claim-action{ background:linear-gradient(90deg,#16a34a,#22c55e) !important; color:#fff !important; } .promo-card .promo-action-button.is-busy{ opacity:.82; pointer-events:none; } /* Step 6.7.42: stable promotion card footer */ .promo-card .token-card-inner{ display:flex; flex-direction:column; min-height:100%; } .promo-card-footer{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; width:100%; margin-top:auto; padding-top:8px; } .promo-card-footer .promo-status-wrap{ width:min(260px, 82%); margin:0 auto !important; } .promo-card-footer .promo-btn-wrap{ margin:0 auto !important; } .promo-card-footer .promo-action-button, .promo-card-footer .promo-action-btn{ width:220px !important; max-width:78% !important; min-width:170px !important; } @media (max-width: 480px){ .promo-card-footer .promo-status-wrap{ width:min(240px, 88%); } .promo-card-footer .promo-action-button, .promo-card-footer .promo-action-btn{ width:210px !important; max-width:86% !important; } } /* Step 6.7.42: independent promotions layout; no token-card geometry inheritance */ .promo-card{ position:relative !important; display:block !important; overflow:hidden !important; border:1px solid #f59e0b !important; border-radius:16px !important; padding:0 !important; } .promo-card.state-ready{ border-color:#22c55e !important; } .promo-card .promo-card-inner{ position:relative !important; z-index:1 !important; display:flex !important; flex-direction:column !important; width:100% !important; box-sizing:border-box !important; padding:14px 16px !important; min-height:0 !important; } .promo-card .promo-card-footer{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; width:100% !important; gap:8px !important; margin:10px auto 0 !important; padding:0 !important; } .promo-card .promo-status-wrap{ display:flex !important; justify-content:center !important; width:100% !important; margin:0 auto !important; } .promo-card .promo-progressbar{ width:220px !important; max-width:82% !important; } .promo-card .promo-btn-wrap{ display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important; margin:0 auto !important; padding:0 !important; text-align:center !important; } .promo-card .promo-action-button, .promo-card .promo-action-btn{ position:static !important; left:auto !important; right:auto !important; float:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:220px !important; min-width:170px !important; max-width:82% !important; margin:0 auto !important; transform:none !important; text-align:center !important; } .promo-card .promo-action-button[data-action="join"], .promo-card .promo-action-button.is-join-action{ background:linear-gradient(90deg,#ff7a18,#ffb300) !important; color:#1f2937 !important; } .promo-card .promo-action-button[data-action="claim"], .promo-card .promo-action-button.is-claim-action, .promo-card.state-ready .promo-action-button[data-action="claim"]{ background:linear-gradient(90deg,#16a34a,#22c55e) !important; color:#fff !important; } .promo-card .promo-action-button[data-action="running"], .promo-card .promo-action-button[data-action="blocked"], .promo-card .promo-action-button[data-action="claimed"]{ background:rgba(148,163,184,.35) !important; color:rgba(255,255,255,.8) !important; } @media (max-width:480px){ .promo-card .promo-progressbar,.promo-card .promo-action-button,.promo-card .promo-action-btn{ width:210px !important; max-width:86% !important; } } /* Step 6.7.42: restore active promotion running visualization */ .promo-card{ position:relative; } .promo-card.state-running{ border-color: transparent !important; } .promo-card.state-running::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; z-index:0; background:conic-gradient(from 0deg, #00e5ff, #7c4dff, #ffea00, #00e5ff); animation: promo-running-border-spin 4s linear infinite; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .promo-card.state-running.anim-ants::before{ background:repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 8px, rgba(0,229,255,0.85) 8px 12px, rgba(255,255,255,0.08) 12px 20px ); background-size:240px 100%; animation:token-ants-march 1.15s linear infinite; } .promo-card.state-running.anim-aura::before{ background:linear-gradient(120deg, rgba(0,229,255,0.9), rgba(124,77,255,0.85), rgba(255,234,0,0.85), rgba(0,229,255,0.9)); background-size:280% 280%; animation:token-aura-flow 3.2s ease-in-out infinite; filter:blur(0.2px) drop-shadow(0 0 10px rgba(0,229,255,0.18)); } .promo-card.state-running > .promo-card-inner{ position:relative; z-index:1; } @keyframes promo-running-border-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } .promo-card.state-running .promo-action-button[data-action="running"], .promo-card.state-running .promo-action-btn[data-action="running"]{ background-image:linear-gradient(90deg, #00e5ff, #7c4dff, #ffea00, #00e5ff) !important; background-size:200% 100% !important; color:#fff !important; animation:token-timer-gradient 2s linear infinite !important; opacity:1 !important; } .promo-card.state-running .promo-action-button[data-action="running"] .pay-btn-label, .promo-card.state-running .promo-action-button[data-action="running"] .pay-btn-timer, .promo-card.state-running .promo-action-btn[data-action="running"] .pay-btn-label, .promo-card.state-running .promo-action-btn[data-action="running"] .pay-btn-timer{ color:#fff !important; } /* 6.7.103 CLEAN promotions visual layer. Based on the working reference: promo card uses token-card-border and token-action-btn, but keeps the promotion card as a normal vertical content card. */ #promotionsList{ display:flex; flex-direction:column; gap:12px; width:100%; } #promotionsList .promo-card.token-card{ position:relative; display:block; width:100%; margin:0 0 12px 0; padding:14px 16px 16px; box-sizing:border-box; border:0; border-radius:18px; overflow:visible; background:rgba(15,23,42,.88); color:#e5e7eb; --token-card-radius:18px; --token-border-outset:2px; --token-border-inset:-2px; } #promotionsList .promo-card.token-card .token-card-border{ position:absolute; inset:var(--token-border-inset); border-radius:calc(var(--token-card-radius) + var(--token-border-outset)); pointer-events:none; z-index:1; box-sizing:border-box; } #promotionsList .promo-card.token-card .token-card-inner{ position:relative; z-index:2; display:block; width:100%; height:auto; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; } #promotionsList .promo-card.token-card h2{ margin:0 0 6px 0; font-size:16px; line-height:1.25; color:#f8fafc; } #promotionsList .promo-card.token-card .muted{color:#cbd5e1;} #promotionsList .promo-card.token-card strong{color:#f8fafc;} #promotionsList .promo-card.token-card.state-not-started .token-card-border{border:2px solid #ff9800;} #promotionsList .promo-card.token-card.state-ready .token-card-border{border:2px solid #00c853;} #promotionsList .promo-card.token-card.state-collected .token-card-border{border:2px solid #ff5252;} /* Running frame: exact token ants mechanism on token-card-border */ #promotionsList .promo-card.token-card.state-running.anim-ants .token-card-border{ border-radius:calc(var(--token-card-radius) + var(--token-border-outset)); } #promotionsList .promo-card.token-card.state-running.anim-ants .token-card-border::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 8px, rgba(0,229,255,0.85) 8px 12px, rgba(255,255,255,0.08) 12px 20px ); background-size:240px 100%; animation:token-ants-march 1.15s linear infinite; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask-composite:xor; } #promotionsList .promo-card.token-card.state-running.anim-snake .token-card-border{ padding:2px; background:conic-gradient(from 0deg,#00e5ff,#7c4dff,#ffea00,#00e5ff); animation:token-snake-spin 4s linear infinite; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask-composite:xor; } #promotionsList .promo-card.token-card.state-running.anim-aura .token-card-border::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(120deg,rgba(0,229,255,.9),rgba(124,77,255,.85),rgba(255,234,0,.85),rgba(0,229,255,.9)); background-size:280% 280%; animation:token-aura-flow 3.2s ease-in-out infinite; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask-composite:xor; } #promotionsList .promo-card.token-card.state-running.anim-radar .token-card-border::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:conic-gradient(from 0deg,rgba(0,229,255,0) 0 72deg,rgba(16,185,129,.95) 74deg 92deg,rgba(0,229,255,0) 104deg 360deg); animation:promo-running-border-spin 2.1s linear infinite; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask-composite:xor; } #promotionsList .promo-card.token-card.state-running.anim-progress .token-card-border::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:conic-gradient(from -90deg,#06b6d4 0 82deg,rgba(148,163,184,.38) 82deg 360deg); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask-composite:xor; } #promotionsList .promo-card.token-card.state-running.anim-orbit .token-card-border::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; background:conic-gradient(from 0deg,rgba(255,255,255,0) 0 70deg,rgba(255,234,0,.92) 76deg 88deg,rgba(0,229,255,.78) 92deg 104deg,rgba(255,255,255,0) 110deg 360deg); animation:promo-running-border-spin 3.2s linear infinite; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask-composite:xor; } #promotionsList .promo-btn-wrap{ display:block; width:100%; margin:10px 0 0 0; padding:0; text-align:center; } #promotionsList .promo-card.token-card .token-action-btn.promo-action-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:220px; max-width:88%; min-height:38px; margin:0 auto; padding:9px 16px; border:0; border-radius:999px; font-weight:900; text-align:center; box-sizing:border-box; text-decoration:none; } #promotionsList .promo-card.token-card.state-running .token-action-btn.promo-action-btn{ background-image:linear-gradient(90deg,#00e5ff,#7c4dff,#ffea00,#00e5ff); background-size:200% 100%; color:#111827; animation:token-timer-gradient 2s linear infinite; } #promotionsList .promo-card.token-card.state-running .token-action-btn.promo-action-btn .pay-btn-label, #promotionsList .promo-card.token-card.state-running .token-action-btn.promo-action-btn .pay-btn-timer{ color:#111827; font-weight:900; } #promotionsList .promo-card.token-card.state-not-started .token-action-btn.promo-action-btn{ background:#ff9800; color:#111827; } #promotionsList .promo-card.token-card.state-ready .token-action-btn.promo-action-btn{ background:#00c853; color:#fff; } #promotionsList .promo-card.token-card.state-collected .token-action-btn.promo-action-btn{ background:#ff5252; color:#fff; } #promotionsList .promo-status-wrap{ display:flex; justify-content:center; width:100%; margin:6px 0 8px 0; } #promotionsList .promo-progressbar{ position:relative; width:280px; max-width:100%; height:18px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.16); } #promotionsList .promo-new-badge{ display:inline-flex; align-items:center; justify-content:center; margin-left:8px; padding:2px 8px; border-radius:999px; background:#ef4444; color:#fff; font-size:11px; font-weight:900; line-height:1.25; } /* 6.7.103 final promotion spacing and paid-state border polish */ #promotionsList .promo-card.token-card{ padding:18px 20px 20px !important; } @media (max-width: 520px){ #promotionsList .promo-card.token-card{ padding:16px 16px 18px !important; } } /* Content breathing room inside the visual frame. */ #promotionsList .promo-card.token-card .token-card-inner{ padding:0 !important; } #promotionsList .promo-card.token-card h2{ margin:0 0 10px 0 !important; } #promotionsList .promo-card.token-card .muted{ line-height:1.38 !important; } /* Cleaner rhythm between link/progress/button. */ #promotionsList .promo-link-wrap{ margin:14px 0 14px 0 !important; display:flex !important; justify-content:center !important; } #promotionsList .promo-status-wrap{ margin:14px 0 14px 0 !important; } #promotionsList .promo-status-wrap + .promo-btn-wrap{ margin-top:16px !important; } #promotionsList .promo-btn-wrap{ margin:14px 0 0 0 !important; } #promotionsList .promo-progressbar{ width:260px !important; max-width:86% !important; } /* Centered button with more balanced proportions. */ #promotionsList .promo-card.token-card .token-action-btn.promo-action-btn{ width:220px !important; max-width:86% !important; min-height:40px !important; padding:10px 18px !important; } /* Claimed/paid state: red frame like collected token. */ #promotionsList .promo-card.token-card.state-collected .token-card-border{ border:2px solid #ff5252 !important; } #promotionsList .promo-card.token-card.state-collected .token-action-btn.promo-action-btn[data-action="claimed"]{ background:#ff5252 !important; color:#ffffff !important; } #promotionsList .promo-card.token-card.state-collected .token-action-btn.promo-action-btn[data-action="blocked"]{ background:rgba(148,163,184,.35) !important; color:rgba(255,255,255,.82) !important; } /* Soft finish for paid cards without visual noise. */ #promotionsList .promo-card.token-card.state-collected{ box-shadow:0 8px 20px rgba(255,82,82,.08) !important; } #promotionsList .promo-new-badge{ margin-left:8px !important; vertical-align:middle !important; } /* 6.7.103 coupon stack interaction polish */ .coupon-card.is-current.is-tapped{ animation:coupon-card-tap-lift .38s ease-out both; } @keyframes coupon-card-tap-lift{ 0%{transform:translateY(0) scale(1);} 45%{transform:translateY(-8px) scale(1.015);} 100%{transform:translateY(0) scale(1);} } /* 6.7.103 coupon per-card seen state */ .coupon-card[data-coupon-unseen="1"].is-current{ animation:coupon-unseen-soft-wiggle 2.4s ease-in-out infinite; } @keyframes coupon-unseen-soft-wiggle{ 0%,100%{transform:translateY(0) rotate(0deg) scale(1);} 35%{transform:translateY(-2px) rotate(-0.35deg) scale(1.003);} 70%{transform:translateY(-1px) rotate(0.35deg) scale(1.002);} } /* 6.7.103 coupon flight visibility restore */ .coupon-fly, .coupon-fly.coupon-fly--to-stack{ z-index:12000 !important; display:block !important; opacity:1; } /* 6.7.103 big coupon animation on Profile/"Моё" */ .coupon-fly.coupon-fly--big{ width:230px !important; height:129px !important; z-index:12000 !important; display:block !important; opacity:1; filter:drop-shadow(0 22px 34px rgba(15,23,42,.50)) !important; } .coupon-fly.coupon-fly--big img{ border-radius:18px !important; } .coupon-fly__amount--big{ font-size:34px !important; font-weight:950 !important; letter-spacing:-0.035em !important; text-shadow:0 4px 16px rgba(15,23,42,.78), 0 0 22px rgba(255,255,255,.34) !important; } /* 6.7.103 guaranteed big coupon on Profile/"Моё" */ .coupon-fly.coupon-fly--big, .coupon-fly.coupon-fly--to-stack{ z-index:12000 !important; display:block !important; visibility:visible !important; opacity:1; } /* 6.7.103 hard visibility guard for big coupon on Profile/"Моё" */ body[data-big-coupon-flight] .coupon-fly--big, .coupon-fly.coupon-fly--big, .coupon-fly.coupon-fly--to-stack{ z-index:2147483000 !important; display:block !important; visibility:visible !important; pointer-events:none !important; } /* 6.7.103 restore old big-coupon flyCoupon visibility */ .coupon-fly{ z-index:12000 !important; display:block !important; visibility:visible !important; pointer-events:none !important; } /* 6.7.103 coupon flight diagnostics/visibility */ .coupon-fly{ z-index:12000 !important; display:block !important; visibility:visible !important; pointer-events:none !important; } /* 6.7.103: stack/big coupon must pass under the fixed bottom nav; small nav coupon stays above */ .coupon-fly.coupon-fly--stack{ z-index:39 !important; /* bottom nav is 45 */ } .coupon-fly.coupon-fly--nav{ z-index:12000 !important; } #promotionsList .promo-card.token-card.state-collected .token-card-border{ border:2px solid #ff5252 !important; } #promotionsList .promo-card.token-card.state-collected .token-action-btn.promo-action-btn, #promotionsList .promo-card.token-card.state-collected .token-action-btn.promo-action-btn[data-action="claimed"]{ background:#ff5252 !important; color:#fff !important; } /* 6.7.103 token profile highest-only mode */ .token-cards-grid.token-cards-grid--single{ grid-template-columns:1fr !important; } .token-cards-grid.token-cards-grid--single .token-card{ width:100% !important; max-width:none !important; } /* 6.7.103 unified PIN overlay: bottom opaque sheet, no translucent centered card */ .pin-overlay{ align-items:flex-end !important; justify-content:center !important; padding:0 12px calc(env(safe-area-inset-bottom, 0px) + 14px) !important; z-index:100000 !important; } .pin-overlay-backdrop{ background:rgba(0,0,0,.34) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } .pin-overlay-card{ width:min(420px, calc(100vw - 24px)) !important; max-width:420px !important; border-radius:24px !important; padding:20px 18px 18px !important; background:var(--bubble-bg, #111827) !important; color:var(--color-text, #f8fafc) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:0 18px 44px rgba(0,0,0,.42) !important; transform:translateY(0) translateZ(0) !important; } body[data-theme="light"] .pin-overlay-card, body[data-theme="sunrise"] .pin-overlay-card, body[data-theme="mint"] .pin-overlay-card{ background:#fff !important; color:#111827 !important; } body[data-theme="dark"] .pin-overlay-card, body[data-theme="neon"] .pin-overlay-card{ background:#0f172a !important; color:#f8fafc !important; } /* 7.1.17: closing friends bubble must never intercept the next tap. */ .friend-bubble-overlay.is-closing{ pointer-events:none !important; } .friend-bubble-overlay.is-closing .fbo-backdrop, .friend-bubble-overlay.is-closing .friend-bubble-panel{ pointer-events:none !important; } /* v7.1.20 tap reliability: do not animate purchase cards/buttons while realtime may refresh catalog. */ [data-tokens-catalog="1"] .card, [data-tokens-catalog="1"] .token-card, [data-tokens-catalog="1"] [data-buy-button="1"], [data-tokens-catalog="1"] [data-coupon-open="1"] { animation-duration: 1ms !important; transition-duration: 60ms !important; } /* 7.1.26 tap reliability: let mobile browsers route taps immediately to nav/action buttons. */ .app-bottom-nav .nav-item, .promo-card .promo-action-button, .promo-card .promo-action-btn{ touch-action: manipulation; -webkit-tap-highlight-color: rgba(96,165,250,.18); } /* 7.1.26 home reveal is one-way; ready blocks keep their text after first reveal. */ .pb-text-reveal.pb-text-reveal-visible .page-block-bg-inner{ pointer-events:auto; } /* 7.2.4: realtime removal of admin-deleted user token cards */ .token-card.token-card-removing{opacity:0;transform:scale(.96);transition:opacity .14s ease,transform .14s ease;pointer-events:none;} /* 7.2.10: compact token upgrade UI + unified purchase/coupon sheet. */ .token-purchase-pill{ display:inline-flex; align-items:center; max-width:100%; margin:6px 0 2px; padding:5px 9px; border-radius:999px; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.24); color:var(--color-text,#e5e7eb); font-size:11px; line-height:1.25; font-weight:800; letter-spacing:-.01em; white-space:normal; } .token-purchase-pill--upgrade{ background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.28); } .token-purchase-bubble{ gap:12px !important; max-height:min(84vh,680px) !important; } .token-purchase-summary{ display:flex; flex-direction:column; gap:7px; padding:10px; border-radius:18px; background:rgba(255,255,255,.055); border:1px solid rgba(148,163,184,.18); } .token-purchase-route{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:2px; font-size:13px; font-weight:900; } .token-purchase-route span{ padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(148,163,184,.18); } .token-purchase-route b{opacity:.72;} .token-purchase-row, .token-purchase-total{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; line-height:1.25; } .token-purchase-row span{opacity:.76;} .token-purchase-row strong, .token-purchase-total strong{ text-align:right; white-space:nowrap; } .token-purchase-row--accent{ padding-top:4px; border-top:1px solid rgba(148,163,184,.14); } .token-purchase-row--accent span, .token-purchase-row--accent strong{opacity:1;} .token-purchase-total{ margin-top:3px; padding:9px 10px; border-radius:14px; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.20); font-size:13px; font-weight:900; } .token-coupon-section{ display:flex; flex-direction:column; gap:8px; } .token-coupon-section__title{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:0 2px; } .token-coupon-section__title strong{ font-size:13px; line-height:1.2; } .token-coupon-section__title span{ font-size:11px; line-height:1.2; opacity:.68; text-align:right; } .token-purchase-sheet .token-coupon-result{ padding:8px 10px; border-radius:14px; background:rgba(15,23,42,.44); border:1px solid rgba(148,163,184,.14); opacity:1; font-weight:800; } .token-purchase-submit{min-height:44px;} @media (max-width:420px){ .token-purchase-pill{font-size:10.5px;padding:5px 8px;} .token-purchase-summary{padding:9px;border-radius:16px;} .token-purchase-row,.token-purchase-total{font-size:11.5px;} .token-purchase-route{font-size:12px;} .token-coupon-section__title{align-items:flex-start;flex-direction:column;gap:2px;} .token-coupon-section__title span{text-align:left;} } /* 7.2.11: token purchase UI hotfixes. - no card-level payment pill (details only inside the purchase sheet) - fixed bottom controls inside the sheet; only coupons scroll - theme-aligned glass surfaces instead of a foreign modal look */ .token-purchase-pill{display:none !important;} .token-purchase-sheet.token-coupon-picker{ padding: max(10px, env(safe-area-inset-top, 0px)) 10px max(14px, env(safe-area-inset-bottom, 0px)); } .token-purchase-sheet .token-coupon-backdrop{ background: color-mix(in srgb, var(--color-bg, #020617) 68%, transparent); backdrop-filter: blur(11px) saturate(1.06); -webkit-backdrop-filter: blur(11px) saturate(1.06); } .token-purchase-sheet .token-purchase-bubble{ width:min(430px, calc(100vw - 22px)) !important; max-height: min(88dvh, 690px) !important; height: min(88dvh, 690px); padding: 14px 14px max(14px, env(safe-area-inset-bottom, 0px)) !important; overflow:hidden; display:flex; flex-direction:column; gap:11px !important; background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--color-accent, #3b82f6) 26%, transparent), transparent 42%), color-mix(in srgb, var(--color-bg-soft, #111827) 92%, transparent); border-color: color-mix(in srgb, var(--color-accent, #3b82f6) 26%, rgba(148,163,184,.22)); box-shadow:0 24px 72px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.035) inset; } .token-purchase-sheet .token-coupon-bubble__head, .token-purchase-sheet .token-purchase-summary, .token-purchase-sheet .token-coupon-result, .token-purchase-sheet .token-purchase-submit{ flex:0 0 auto; } .token-purchase-sheet .token-purchase-summary{ background: color-mix(in srgb, var(--color-bg-soft, #111827) 72%, transparent); border-color: color-mix(in srgb, var(--color-accent, #3b82f6) 22%, rgba(148,163,184,.16)); } .token-purchase-sheet .token-coupon-section{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; } .token-purchase-sheet .token-coupon-section__title{flex:0 0 auto;} .token-purchase-sheet .token-coupon-list{ flex:1 1 auto; min-height:118px; max-height:none !important; overflow-y:auto; overscroll-behavior:contain; padding:3px 3px 9px; } .token-purchase-sheet .token-coupon-result{ margin-top:0; background: color-mix(in srgb, var(--color-bg, #020617) 54%, transparent); border-color: color-mix(in srgb, var(--color-accent, #3b82f6) 24%, rgba(148,163,184,.20)); } .token-purchase-sheet .token-purchase-submit{ min-height:48px; margin-bottom: max(0px, env(safe-area-inset-bottom, 0px)); box-shadow:0 10px 26px color-mix(in srgb, var(--color-accent, #3b82f6) 30%, transparent); } @media (max-width:420px){ .token-purchase-sheet .token-purchase-bubble{ width:calc(100vw - 18px) !important; height:min(89dvh, 690px); max-height:min(89dvh, 690px) !important; padding:12px 12px max(12px, env(safe-area-inset-bottom, 0px)) !important; gap:10px !important; } .token-purchase-sheet .token-coupon-list{min-height:105px;gap:8px;} .token-purchase-sheet .token-purchase-submit{min-height:50px;} } /* 7.2.13: eco points realtime statusbar + polished token purchase close button */ .profile-eco-bar{ margin:8px 0 8px; padding:8px 0 2px; border-top:1px solid color-mix(in srgb, var(--color-accent,#22c55e) 42%, transparent); border-bottom:1px solid color-mix(in srgb, var(--color-accent,#22c55e) 28%, transparent); } .profile-eco-bar__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:7px; font-size:12px; line-height:1.2; color:color-mix(in srgb, var(--color-text,#e5e7eb) 76%, transparent); } .profile-eco-bar__top span{ font-weight:800; letter-spacing:.01em; } .profile-eco-bar__top strong{ font-size:12px; color:var(--color-text,#e5e7eb); white-space:nowrap; } .profile-eco-bar__track{ position:relative; height:7px; overflow:hidden; border-radius:999px; background:color-mix(in srgb, var(--color-bg,#020617) 56%, transparent); border:1px solid color-mix(in srgb, var(--color-accent,#22c55e) 24%, rgba(148,163,184,.20)); box-shadow:inset 0 1px 4px rgba(0,0,0,.22); } .profile-eco-bar__fill{ position:absolute; inset:0 auto 0 0; width:25%; min-width:10px; border-radius:999px; background:linear-gradient(90deg, color-mix(in srgb, var(--color-accent,#22c55e) 70%, #facc15), color-mix(in srgb, var(--color-accent,#22c55e) 62%, #38bdf8), color-mix(in srgb, var(--color-accent,#22c55e) 82%, #facc15)); background-size:220% 100%; box-shadow:0 0 12px color-mix(in srgb, var(--color-accent,#22c55e) 42%, transparent); animation:ecoPointsFlow 1.85s linear infinite; transition:width .36s cubic-bezier(.2,.9,.2,1); } .profile-eco-bar__fill::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent); transform:translateX(-100%); animation:ecoPointsShimmer 2.25s ease-in-out infinite; } @keyframes ecoPointsFlow{0%{background-position:0% 50%;}100%{background-position:220% 50%;}} @keyframes ecoPointsShimmer{0%,35%{transform:translateX(-110%);}75%,100%{transform:translateX(110%);}} .token-purchase-sheet .token-coupon-close, .token-purchase-sheet [data-coupon-close="1"]{ width:48px !important; height:48px !important; min-width:48px !important; border-radius:50% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; font-size:0 !important; line-height:1 !important; color:var(--color-text,#e5e7eb) !important; background: radial-gradient(circle at 32% 18%, rgba(255,255,255,.34), transparent 40%), color-mix(in srgb, var(--color-bg-soft,#111827) 76%, transparent) !important; border:1px solid color-mix(in srgb, var(--color-accent,#3b82f6) 24%, rgba(148,163,184,.42)) !important; box-shadow:0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14) !important; backdrop-filter:blur(14px) saturate(1.08); -webkit-backdrop-filter:blur(14px) saturate(1.08); transition:transform .14s ease, box-shadow .14s ease, background .14s ease; position:relative; flex:0 0 auto; } .token-purchase-sheet .token-coupon-close::before, .token-purchase-sheet .token-coupon-close::after, .token-purchase-sheet [data-coupon-close="1"]::before, .token-purchase-sheet [data-coupon-close="1"]::after{ content:""; position:absolute; width:18px; height:2.4px; border-radius:999px; background:currentColor; opacity:.9; } .token-purchase-sheet .token-coupon-close::before, .token-purchase-sheet [data-coupon-close="1"]::before{transform:rotate(45deg);} .token-purchase-sheet .token-coupon-close::after, .token-purchase-sheet [data-coupon-close="1"]::after{transform:rotate(-45deg);} .token-purchase-sheet .token-coupon-close:active, .token-purchase-sheet [data-coupon-close="1"]:active{transform:scale(.94);} body[data-theme="light"] .token-purchase-sheet .token-coupon-close, body[data-theme="sunrise"] .token-purchase-sheet .token-coupon-close, body[data-theme="mint"] .token-purchase-sheet .token-coupon-close, body[data-theme="light"] .token-purchase-sheet [data-coupon-close="1"], body[data-theme="sunrise"] .token-purchase-sheet [data-coupon-close="1"], body[data-theme="mint"] .token-purchase-sheet [data-coupon-close="1"]{ background:rgba(255,255,255,.72) !important; color:#1f2937 !important; border-color:rgba(148,163,184,.34) !important; box-shadow:0 14px 34px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.7) !important; } /* 7.2.14: token purchase sheet opacity + centered adaptive eco points bar */ .token-purchase-sheet .token-coupon-backdrop{ background: color-mix(in srgb, var(--color-bg, #020617) 78%, rgba(0,0,0,.18)) !important; backdrop-filter: blur(12px) saturate(1.04) !important; -webkit-backdrop-filter: blur(12px) saturate(1.04) !important; } .token-purchase-sheet .token-purchase-bubble{ background: radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--color-accent, #3b82f6) 22%, transparent), transparent 40%), color-mix(in srgb, var(--color-bg-soft, #111827) 98%, var(--color-bg, #020617)) !important; border-color: color-mix(in srgb, var(--color-accent, #3b82f6) 28%, rgba(148,163,184,.30)) !important; box-shadow:0 26px 76px rgba(0,0,0,.54), 0 0 0 1px rgba(255,255,255,.045) inset !important; } .token-purchase-sheet .token-purchase-summary, .token-purchase-sheet .token-coupon-result{ background: color-mix(in srgb, var(--color-bg-soft, #111827) 92%, var(--color-bg, #020617)) !important; } body[data-theme="light"] .token-purchase-sheet .token-purchase-bubble, body[data-theme="sunrise"] .token-purchase-sheet .token-purchase-bubble, body[data-theme="mint"] .token-purchase-sheet .token-purchase-bubble{ background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--color-accent, #fb923c) 16%, transparent), transparent 42%), color-mix(in srgb, var(--color-card, #fffaf0) 96%, #ffffff) !important; box-shadow:0 28px 78px rgba(80,45,12,.28), 0 0 0 1px rgba(255,255,255,.68) inset !important; } body[data-theme="light"] .token-purchase-sheet .token-purchase-summary, body[data-theme="sunrise"] .token-purchase-sheet .token-purchase-summary, body[data-theme="mint"] .token-purchase-sheet .token-purchase-summary, body[data-theme="light"] .token-purchase-sheet .token-coupon-result, body[data-theme="sunrise"] .token-purchase-sheet .token-coupon-result, body[data-theme="mint"] .token-purchase-sheet .token-coupon-result{ background: color-mix(in srgb, var(--color-card, #ffffff) 94%, var(--color-accent, #fb923c)) !important; } .profile-eco-bar{ margin:9px auto 9px; padding:8px 0 3px; width:min(100%, 560px); border-top:1px solid color-mix(in srgb, var(--color-accent,#22c55e) 36%, transparent); border-bottom:1px solid color-mix(in srgb, var(--color-accent,#22c55e) 26%, transparent); } .profile-eco-bar__top{ display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; text-align:center !important; margin-bottom:8px !important; font-size:13px !important; color:color-mix(in srgb, var(--color-text,#e5e7eb) 86%, transparent) !important; } .profile-eco-bar__top span[data-eco-label="1"]{ text-transform:none; font-weight:900 !important; } .profile-eco-bar__top strong{ font-size:13px !important; font-weight:900 !important; color:var(--color-text,#e5e7eb) !important; } .profile-eco-bar__track{ height:9px !important; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08)), color-mix(in srgb, var(--color-bg,#020617) 62%, rgba(148,163,184,.14)) !important; border-color:color-mix(in srgb, var(--color-accent,#22c55e) 30%, rgba(148,163,184,.28)) !important; box-shadow:inset 0 1px 5px rgba(0,0,0,.24), 0 1px 0 rgba(255,255,255,.08) !important; } .profile-eco-bar__fill{ background:linear-gradient(90deg, #22c55e 0%, #84cc16 18%, #facc15 38%, #38bdf8 58%, #a78bfa 78%, #22c55e 100%) !important; background-size:260% 100% !important; box-shadow: 0 0 10px color-mix(in srgb, var(--color-accent,#22c55e) 36%, transparent), 0 0 18px rgba(56,189,248,.22) !important; } body[data-theme="light"] .profile-eco-bar__fill, body[data-theme="sunrise"] .profile-eco-bar__fill, body[data-theme="mint"] .profile-eco-bar__fill{ background:linear-gradient(90deg, #16a34a 0%, #65a30d 20%, #f59e0b 42%, #06b6d4 64%, #8b5cf6 82%, #16a34a 100%) !important; background-size:260% 100% !important; box-shadow:0 0 10px rgba(245,158,11,.25), 0 0 18px rgba(22,163,74,.20) !important; } /* v7.2.18: explicit warning when selected coupons exceed the purchase amount. */ .token-purchase-sheet .token-coupon-burn-warning{ display:none; margin:0 0 8px; padding:9px 11px; border-radius:14px; font-size:12px; line-height:1.32; font-weight:750; color:rgba(255,255,255,.96); background:linear-gradient(135deg, rgba(255,154,60,.28), rgba(255,78,78,.22)); border:1px solid rgba(255,180,90,.34); box-shadow:0 10px 26px rgba(0,0,0,.18); } .token-purchase-sheet .token-coupon-burn-warning.is-visible{display:block;} body[data-theme="light"] .token-purchase-sheet .token-coupon-burn-warning, body[data-theme="sunrise"] .token-purchase-sheet .token-coupon-burn-warning, body[data-theme="mint"] .token-purchase-sheet .token-coupon-burn-warning{ color:rgba(82,45,12,.96); background:linear-gradient(135deg, rgba(255,214,123,.72), rgba(255,143,92,.42)); border-color:rgba(211,122,35,.28); } /* v7.2.19: eco points shimmer is clipped strictly inside the filled part. */ .profile-eco-bar__fill{ overflow:hidden !important; isolation:isolate; } .profile-eco-bar__fill::after{ inset:0 auto 0 0 !important; width:42% !important; min-width:22px; border-radius:inherit; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.56) 48%, transparent 100%) !important; transform:translateX(-120%) skewX(-14deg); animation:ecoPointsFillOnlyShimmer 1.75s ease-in-out infinite !important; pointer-events:none; } @keyframes ecoPointsFillOnlyShimmer{ 0%{transform:translateX(-120%) skewX(-14deg);opacity:0;} 12%{opacity:.88;} 78%{opacity:.88;} 100%{transform:translateX(260%) skewX(-14deg);opacity:0;} } /* 7.2.23: compact premium inline password eye + iOS strong-password suppression */ .password-toggle-field { position: relative; } .password-toggle-wrap { position: relative; display: block; width: 100%; } .password-toggle-wrap input[type="password"], .password-toggle-wrap input[type="text"] { width: 100%; padding-right: 58px !important; } .password-secure-input.is-masked { -webkit-text-security: disc !important; text-security: disc !important; } .password-secure-input:not(.is-masked) { -webkit-text-security: none !important; text-security: none !important; } .password-eye-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; min-height: 42px; max-height: 42px; border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: rgba(148,163,184,.78); -webkit-tap-highlight-color: transparent; transition: color .16s ease, opacity .16s ease, transform .12s ease; opacity: .86; z-index: 5; touch-action: manipulation; } .password-eye-btn svg { position: relative; width: 21px; height: 21px; display: block; fill: currentColor; } .password-eye-btn .eye-open { opacity: 1; transition: opacity .14s ease; } .password-eye-btn .eye-closed { opacity: 0; transition: opacity .14s ease; } .password-eye-btn.is-visible .eye-open { opacity: 0; } .password-eye-btn.is-visible .eye-closed { opacity: 1; } .password-eye-btn:active { transform: translateY(-50%) scale(.94); opacity: 1; } .password-eye-btn.is-visible { color: color-mix(in srgb, var(--accent, #2563eb) 76%, #64748b); background: transparent !important; box-shadow: none !important; } body[data-theme="dark"] .password-eye-btn, body[data-theme="black"] .password-eye-btn { color: rgba(226,232,240,.70); } body[data-theme="dark"] .password-eye-btn.is-visible, body[data-theme="black"] .password-eye-btn.is-visible { color: color-mix(in srgb, var(--accent, #60a5fa) 80%, #fff); } .checkbox-field { gap: 12px; align-items: center; } .checkbox-field input[type="checkbox"] { width: 26px; height: 26px; min-width: 26px; margin-top: 0; accent-color: var(--accent, #22c55e); cursor: pointer; } .phone-verify-edit-form { margin: 0 0 12px; text-align: center; } .phone-verify-edit-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-radius: 999px; font-weight: 800; } #telegramBrowserFallbackWrap .btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 16px; border-radius: 999px; font-weight: 800; } /* 7.2.24: realtime password confirmation hint + restart registration tap safety */ .password-match-hint { display: block; min-height: 0; margin-top: 6px; padding: 0 4px; font-size: 12px; line-height: 1.35; color: #f87171; opacity: 0; transform: translateY(-2px); transition: opacity .16s ease, transform .16s ease, min-height .16s ease; } .password-match-hint.is-visible { min-height: 18px; opacity: 1; transform: translateY(0); } .password-toggle-wrap input.field-error { border-color: rgba(248, 113, 113, .88) !important; box-shadow: 0 0 0 1px rgba(248,113,113,.42), 0 0 18px rgba(248,113,113,.16) !important; } .phone-verify-edit-form { position: relative; z-index: 5; } .phone-verify-edit-btn { pointer-events: auto !important; touch-action: manipulation; } .phone-verify-edit-btn.is-loading { opacity: .72; } /* 7.2.25: premium country code picker for registration phone field */ .phone-prefix-btn { appearance: none; border: 1px solid rgba(148,163,184,0.5); cursor: pointer; gap: 6px; min-width: 52px; font-weight: 800; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .14s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease; } .phone-prefix-btn:active { transform: scale(.97); } .phone-prefix-btn:focus-visible { border-color: color-mix(in srgb, var(--accent, #2563eb) 72%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 24%, transparent); } .phone-prefix-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .72; } .phone-field .phone-prefix-btn { z-index: 6; position: relative; } .phone-field .phone-autofill { z-index: 3; } .country-picker-backdrop[hidden] { display: none !important; } .country-picker-backdrop { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: flex-end; justify-content: center; padding: 18px 14px max(18px, env(safe-area-inset-bottom)); background: rgba(2,6,23,.54); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .country-picker-sheet { width: min(520px, 100%); max-height: min(76vh, 680px); display: flex; flex-direction: column; border-radius: 30px; border: 1px solid color-mix(in srgb, var(--card-border, rgba(148,163,184,.34)) 76%, transparent); background: color-mix(in srgb, var(--color-card, #0f172a) 92%, transparent); color: var(--color-text); box-shadow: 0 28px 80px rgba(0,0,0,.42); overflow: hidden; } .country-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 20px 12px; } .country-picker-title { font-size: 20px; font-weight: 900; line-height: 1.15; } .country-picker-subtitle { margin-top: 4px; color: var(--color-muted, #94a3b8); font-size: 13px; line-height: 1.25; } .country-picker-close { width: 42px; height: 42px; border: 1px solid rgba(148,163,184,.34); border-radius: 999px; background: color-mix(in srgb, var(--color-card, #0f172a) 78%, #fff 12%); color: var(--color-text); font-size: 25px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .country-picker-search { width: calc(100% - 40px) !important; margin: 0 20px 14px; min-height: 44px !important; border-radius: 999px !important; padding: 10px 16px !important; } .country-picker-list { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 16px; } .country-picker-item { width: 100%; min-height: 54px; border: 0; border-radius: 18px; background: transparent; color: var(--color-text); display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .country-picker-item:active, .country-picker-item:hover { background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent); } .country-picker-flag { font-size: 24px; line-height: 1; } .country-picker-name { font-weight: 750; } .country-picker-code { font-weight: 900; color: color-mix(in srgb, var(--accent, #2563eb) 72%, var(--color-text)); padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent, #2563eb) 12%, transparent); } body[data-theme="light"] .country-picker-backdrop, body[data-theme="sunrise"] .country-picker-backdrop, body[data-theme="mint"] .country-picker-backdrop { background: rgba(15,23,42,.28); } body[data-theme="light"] .country-picker-sheet, body[data-theme="sunrise"] .country-picker-sheet, body[data-theme="mint"] .country-picker-sheet { background: rgba(255,255,255,.96); } @media (min-width: 700px) { .country-picker-backdrop { align-items: center; } } /* 7.2.26 — premium phone country input: code selector + local number field */ .phone-field-v2{ display:flex; align-items:center; gap:8px; width:100%; position:relative; } .phone-field-v2 .phone-prefix-btn{ min-width:74px; min-height:42px; padding:9px 12px; border-radius:999px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; font-weight:800; letter-spacing:.01em; background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border:1px solid rgba(148,163,184,.42); box-shadow:0 10px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.12); } .phone-field-v2 .phone-prefix-btn:active{transform:translateY(1px) scale(.99);} .phone-field-v2 .phone-prefix-caret{ width:0;height:0;margin-left:5px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid currentColor; opacity:.68; } .phone-field-v2 .phone-local-input{ flex:1 1 auto; min-width:0; min-height:42px; padding-left:14px; font-weight:650; letter-spacing:.02em; } .phone-field-v2 input[data-phone-full]{display:none!important;} body[data-theme="light"] .phone-field-v2 .phone-prefix-btn, body[data-theme="sunrise"] .phone-field-v2 .phone-prefix-btn, body[data-theme="mint"] .phone-field-v2 .phone-prefix-btn{ background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.9)); color:#111827; border-color:rgba(148,163,184,.36); box-shadow:0 10px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8); } .country-picker-item.is-selected{ border-color:rgba(34,197,94,.52); background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(59,130,246,.12)); } /* 7.2.27 — auth phone input hardening: independent layout, no legacy phone-field conflicts */ .screen-auth .phone-control-v2, .phone-control-v2{ display:grid !important; grid-template-columns:auto minmax(0, 1fr); align-items:center; column-gap:10px; width:100%; min-height:50px; position:relative; margin-top:6px; } .screen-auth .phone-control-v2 .phone-prefix-btn, .phone-control-v2 .phone-prefix-btn{ height:48px; min-width:82px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:999px; border:1px solid rgba(148,163,184,.52); background:color-mix(in srgb, var(--color-card, #0f172a) 84%, #fff 8%); color:var(--color-text, #f8fafc); box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.16); font-weight:900; line-height:1; cursor:pointer; -webkit-tap-highlight-color:transparent; } .screen-auth .phone-control-v2 .phone-local-input, .phone-control-v2 .phone-local-input{ display:block !important; width:100% !important; height:48px !important; min-height:48px !important; margin:0 !important; padding:0 16px !important; border-radius:999px !important; border:1px solid rgba(148,163,184,.52) !important; background:rgba(15,23,42,.74) !important; color:var(--color-text, #f8fafc) !important; font-size:16px !important; font-weight:650; line-height:48px !important; opacity:1 !important; visibility:visible !important; box-sizing:border-box !important; -webkit-text-fill-color:var(--color-text, #f8fafc); } .screen-auth .phone-control-v2 input[data-phone-full], .phone-control-v2 input[data-phone-full]{ display:none !important; width:0 !important; height:0 !important; min-height:0 !important; padding:0 !important; border:0 !important; opacity:0 !important; pointer-events:none !important; } body[data-theme="light"] .phone-control-v2 .phone-local-input, body[data-theme="sunrise"] .phone-control-v2 .phone-local-input, body[data-theme="mint"] .phone-control-v2 .phone-local-input{ background:rgba(255,255,255,.94) !important; color:#111827 !important; -webkit-text-fill-color:#111827; } body[data-theme="light"] .phone-control-v2 .phone-prefix-btn, body[data-theme="sunrise"] .phone-control-v2 .phone-prefix-btn, body[data-theme="mint"] .phone-control-v2 .phone-prefix-btn{ background:rgba(255,255,255,.94); color:#111827; border-color:rgba(148,163,184,.40); } @media (max-width: 420px){ .screen-auth .phone-control-v2, .phone-control-v2{ grid-template-columns:auto minmax(0, 1fr); column-gap:8px; } .screen-auth .phone-control-v2 .phone-prefix-btn, .phone-control-v2 .phone-prefix-btn{ min-width:74px; padding:0 12px; } } /* 7.2.28 — auth phone row final fix: no interactive controls inside