/* Milka Exchange — официальный светлый стиль */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    color-scheme: light dark;
}
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

img, svg, canvas {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: bicubic;
}

:root {
    --bg: #eef1f5;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --text: #1a1d21;
    --text-muted: #64748b;
    --accent: #16a34a;
    --accent-hover: #15803d;
    --accent-light: rgba(22, 163, 74, 0.08);
    --accent-rgb: 22, 163, 74;
    --border: #e5e7eb;
    --border-soft: #f3f4f6;
    --border-subtle: #e5e7eb;
    --success: #16a34a;
    --danger: #dc2626;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-pill: 9999px;
    --header-h: 48px;
    --nav-h: 64px;
    --font-display: 'Manrope', -apple-system, sans-serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
    --bg-hover: rgba(0, 0, 0, 0.04);
    --header-bg: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
    --header-bg-glass: rgba(240, 253, 244, 0.85);
    --header-border-glass: rgba(22, 163, 74, 0.12);
    --header-shadow: 0 1px 0 rgba(22, 163, 74, 0.06);
    --bg-page: linear-gradient(180deg, #eaf2ee 0%, #eef1f5 100%);
    --gold: var(--accent);
    --gold-light: var(--accent-hover);
    --header-logo-glass-bg: rgba(255, 255, 255, 0.85);
    --header-logo-glass-border: rgba(0, 0, 0, 0.08);
    --header-logo-glass-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --header-profile-glass-bg: rgba(255, 255, 255, 0.6);
    --header-profile-glass-border: rgba(22, 163, 74, 0.12);
    --bg-card-glass: rgba(255, 255, 255, 0.8);
    --exchange-select-bg: rgba(0, 0, 0, 0.03);
    --exchange-select-bg-hover: rgba(22, 163, 74, 0.04);
    --story-border: #166534;
    --story-border-hover: #14532d;
}

/* Тёмная тема (дефолт) */
[data-theme="dark"] {
    --bg: #0f1419;
    --bg-card: #1a1f26;
    --bg-elevated: #242b33;
    --text: #e7e9ea;
    --text-muted: #8b98a5;
    --accent: #2ebb5c;
    --accent-hover: #34d16a;
    --accent-light: rgba(46, 187, 92, 0.15);
    --accent-rgb: 46, 187, 92;
    --border: #2f3640;
    --border-soft: #242b33;
    --border-subtle: #2f3640;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.2);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.2), 0 12px 32px rgba(0, 0, 0, 0.25);
    --bg-hover: rgba(255, 255, 255, 0.06);
    --header-bg: linear-gradient(180deg, #1a1f26 0%, #0f1419 100%);
    --header-bg-glass: rgba(26, 31, 38, 0.75);
    --header-border-glass: rgba(46, 187, 92, 0.2);
    --header-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    --bg-page: linear-gradient(180deg, #0f1419 0%, #0e1613 50%, #0f1419 100%);
    --bg-card-glass: rgba(26, 31, 38, 0.75);
    --exchange-select-bg: rgba(255, 255, 255, 0.04);
    --exchange-select-bg-hover: rgba(46, 187, 92, 0.08);
    --story-border: #14532d;
    --story-border-hover: #0f4c26;
}

/* Тёмная тема: переопределение блоков с жёсткими цветами */
[data-theme="dark"] .profile-hero-bg {
    background: linear-gradient(165deg, #1a1f26 0%, #242b33 40%, #2f3640 100%);
    opacity: 1;
}
[data-theme="dark"] .profile-hero-bg::after {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(46, 187, 92, 0.08) 0%, transparent 55%);
}
[data-theme="dark"] .header-profile:hover,
[data-theme="dark"] .header-profile:focus-visible {
    background: rgba(46, 187, 92, 0.14);
    border-color: rgba(46, 187, 92, 0.35);
}
[data-theme="dark"] .header-notifications-btn {
    background: var(--accent-light);
    color: var(--accent);
}
[data-theme="dark"] .header-logo--glass {
    --header-logo-glass-bg: rgba(38, 44, 52, 0.8);
    --header-logo-glass-border: rgba(255, 255, 255, 0.1);
    --header-logo-glass-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .home-intro-badge {
    background: var(--accent-light);
    color: var(--accent);
}
[data-theme="dark"] .home-service-card {
    background: var(--bg-card);
    border-color: var(--border);
}
[data-theme="dark"] .home-service-card:hover {
    border-color: var(--accent);
}
[data-theme="dark"] .home-popular-card {
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .home-popular-card--accent {
    background: var(--accent-light);
    border-color: rgba(46, 187, 92, 0.3);
}
[data-theme="dark"] .bottom-nav {
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .exchange-card {
    box-shadow: var(--shadow-card);
}
[data-theme="dark"] .exchange-toggle-btn.active {
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .home-admin-card {
    box-shadow: var(--shadow-sm);
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Единый стиль эмодзи (не системные Android) */
.emoji,
.recent-deals-empty-icon,
[class*="empty-icon"] {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
    font-style: normal;
}

#app {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    max-width: 480px;
    margin: 0 auto;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Плавные кривые для анимаций */
:root {
    --ease-out-smooth: cubic-bezier(0.33, 1, 0.68, 1);
    --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Шапка — при прокрутке только скрываем (без изменения высоты, чтобы не дергался скролл) */
.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    background: var(--header-bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
    box-shadow: var(--header-shadow);
    border-bottom: 1px solid var(--header-border-glass);
    transition: background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                backdrop-filter 0.3s ease,
                opacity 0.3s var(--ease-out-smooth);
}

.app-header .header-inner {
    transition: opacity 0.25s var(--ease-out-smooth);
}

/* При прокрутке: только прозрачность, высота шапки не меняется — скролл не дергается */
.app-header.app-header--scrolled {
    opacity: 0;
    pointer-events: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-bottom-color: transparent;
}

.app-header.app-header--scrolled .header-inner {
    opacity: 0;
    pointer-events: none;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 12px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Блок профиля в шапке — glass, кликабельный, ведёт в профиль */
.header-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    margin: -6px -10px -6px -6px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--header-profile-glass-bg);
    border: 1px solid var(--header-profile-glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    font-family: inherit;
    text-align: left;
    width: 100%;
    max-width: 220px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .header-profile {
    --header-profile-glass-bg: rgba(26, 31, 38, 0.5);
    --header-profile-glass-border: rgba(46, 187, 92, 0.2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.header-profile:hover,
.header-profile:focus-visible {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.22);
}
[data-theme="dark"] .header-profile:hover,
[data-theme="dark"] .header-profile:focus-visible {
    background: rgba(46, 187, 92, 0.12);
    border-color: rgba(46, 187, 92, 0.35);
}

.header-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(145deg, #6b7280 0%, #4b5563 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(75, 85, 99, 0.25);
    overflow: hidden;
}

.header-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.header-avatar-inner {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.header-profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.header-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.header-balance {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.02em;
}

/* Логотип на остальных экранах — лого M + текст, премиальный вид */
.header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px 10px 14px;
    border-radius: 9999px;
    background: var(--header-logo-glass-bg);
    border: 1px solid var(--header-logo-glass-border);
    box-shadow: var(--header-logo-glass-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-logo--glass {
    background: var(--header-logo-glass-bg);
    border: 1px solid var(--header-logo-glass-border);
    box-shadow: var(--header-logo-glass-shadow);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .header-logo--glass {
    background: linear-gradient(145deg, rgba(38, 44, 52, 0.95) 0%, rgba(30, 35, 42, 0.9) 100%);
    border-color: rgba(46, 187, 92, 0.2);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.header-logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent) 0%, #15803d 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.4);
}

.header-logo-svg {
    width: 18px;
    height: 18px;
    color: inherit;
}

.header-logo-icon,
.header-logo-sep {
    display: none;
}

.header-logo-text {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.header-icon-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.header-icon-btn:hover,
.header-icon-btn:focus-visible {
    background: rgba(22, 163, 74, 0.18);
}
[data-theme="dark"] .header-icon-btn:hover,
[data-theme="dark"] .header-icon-btn:focus-visible {
    background: rgba(46, 187, 92, 0.25);
}

.header-lang-icon {
    width: 22px;
    height: 22px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 01 4 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10'/%3E%3C/svg%3E") center/22px no-repeat;
    mask-size: 22px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 01 4 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10'/%3E%3C/svg%3E") center/22px no-repeat;
    -webkit-mask-size: 22px;
}

.header-theme-icon {
    width: 22px;
    height: 22px;
    background: currentColor;
    mask-size: 22px;
    -webkit-mask-size: 22px;
}
.header-theme-icon--dark {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E") center/22px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E") center/22px no-repeat;
}
.header-theme-icon--light {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E") center/22px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42'/%3E%3C/svg%3E") center/22px no-repeat;
}

.header-notifications-wrap {
    position: relative;
}

.header-notifications-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    color: var(--accent);
    transition: background 0.2s, transform 0.15s;
}

.header-notifications-btn:hover,
.header-notifications-btn:focus-visible {
    background: rgba(22, 163, 74, 0.18);
}
[data-theme="dark"] .header-notifications-btn:hover,
[data-theme="dark"] .header-notifications-btn:focus-visible {
    background: rgba(46, 187, 92, 0.25);
}

.header-bell-icon {
    width: 22px;
    height: 22px;
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 01-3.46 0'/%3E%3C/svg%3E") center/22px no-repeat;
    mask-size: 22px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 01-3.46 0'/%3E%3C/svg%3E") center/22px no-repeat;
    -webkit-mask-size: 22px;
}

.header-notifications-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-notifications-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(320px, calc(100vw - 32px));
    max-height: 70vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 200;
    flex-direction: column;
}

.header-notifications-dropdown.is-open {
    display: flex;
}

.header-notifications-header {
    padding: 12px 14px;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border);
}

.header-notifications-list {
    overflow: auto;
    padding: 8px 0;
}

.header-notifications-empty {
    padding: 20px 14px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.header-notification-item {
    padding: 10px 14px;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-subtle);
    cursor: default;
}

.header-notification-item:last-child {
    border-bottom: none;
}

.header-notification-item.unread {
    background: var(--bg-hover);
}

.header-notification-item .notification-title {
    font-weight: 500;
    color: var(--text);
}

.header-notification-item .notification-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* На экранах не-главной: по центру логотип, справа уведомления */
.app-header.has-brand-header .header-inner {
    justify-content: center;
    position: relative;
}
.app-header.has-brand-header .header-left {
    flex: 1;
    justify-content: center;
    min-width: 0;
}
.app-header.has-brand-header .header-right {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.app-header.has-brand-header #header-lang-btn,
.app-header.has-brand-header #header-theme-btn {
    display: none;
}

.vip-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--accent);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

/* Контент — глубина фона (dvh для fullscreen на Android) */
.app-main {
    min-height: calc(100vh - var(--header-h) - var(--nav-h));
    min-height: calc(100dvh - var(--header-h) - var(--nav-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    padding: 16px 16px 28px;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
}
.app-main:has(#user-menu.active) {
    background: var(--bg-page);
}

.screen {
    display: none;
    animation: screenFadeIn 0.4s var(--ease-out-smooth) both;
}

.screen.active {
    display: block;
}

/* Экран-блокировка: подписка на каналы обязательна */
.subscription-gate {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    overflow-y: auto;
}
.subscription-gate-inner {
    max-width: 360px;
    width: 100%;
    text-align: center;
}
.subscription-gate-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
    line-height: 1.3;
}
.subscription-gate-text {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 24px;
}
.subscription-gate-channels {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.subscription-gate-channels a {
    display: block;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.subscription-gate-channels a:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.1);
}
.subscription-gate-channels .subscription-gate-channel-no-link {
    display: block;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text-muted, #888);
    font-weight: 600;
    cursor: default;
}
.subscription-gate-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
    transition: transform 0.15s, box-shadow 0.2s;
}
.subscription-gate-btn:hover {
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
    transform: translateY(-1px);
}
.subscription-gate-btn:active {
    transform: translateY(0);
}
body.subscription-gate-active .bottom-nav {
    display: none;
}

/* Только opacity: если задать transform в keyframes, fill-mode «both» оставляет transform
   на .screen и ломает position:fixed у модалок (они центрируются по высоте всей страницы, а не окна). */
@keyframes screenFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-loading {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-elevated) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.container {
    padding: 0 4px;
}

.page-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text);
    margin-bottom: 6px;
}

.page-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 22px;
    letter-spacing: 0.02em;
}

.form-screen .page-subtitle {
    margin-bottom: 20px;
}

.form-step {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}

.amount-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.amount-chip {
    padding: 10px 16px;
    border-radius: 24px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.amount-chip:hover {
    border-color: var(--accent);
    background: var(--accent-light);
}

.amount-chip.active {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent);
}

/* Страница обмена — премиум, лёгкое оформление */
.exchange-screen {
    background: var(--bg);
    min-height: 100vh;
}

.exchange-container {
    padding: 16px 20px 32px;
    max-width: 100%;
    box-sizing: border-box;
}

.exchange-header--premium {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 14px 0 24px;
    gap: 12px;
}

.exchange-header--premium .exchange-back {
    justify-self: start;
}

.exchange-header--premium .exchange-title {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

.exchange-header--premium .exchange-header-spacer {
    justify-self: end;
}

.exchange-back {
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-card-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.exchange-back:hover {
    border-color: rgba(22, 163, 74, 0.25);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] .exchange-back:hover {
    border-color: rgba(46, 187, 92, 0.3);
}

.exchange-back-icon {
    font-weight: 300;
    font-size: 18px;
}

.exchange-back-text {
    letter-spacing: 0.02em;
}

/* Единый вид кнопки «← Назад» во всех экранах */
.btn-back-unified {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.btn-back-wrap .btn-back-unified {
    padding: 8px 0;
}

.profile-back-btn.btn-back-unified {
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--bg-card-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
}

.profile-back-btn.btn-back-unified .profile-back-arrow {
    margin-right: 4px;
}

.exchange-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: 0.01em;
}

.exchange-header-spacer {
    width: 44px;
    height: 44px;
}

.exchange-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.exchange-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.25s var(--ease-out-smooth), border-color 0.2s, transform 0.2s var(--ease-out-smooth);
}
.exchange-card:focus-within {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: var(--shadow-card), 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}

.exchange-card-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.exchange-select-wrap {
    position: relative;
    min-height: 56px;
    display: flex;
    align-items: center;
    padding: 0 48px 0 16px;
    cursor: pointer;
    background: var(--exchange-select-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.exchange-select-wrap:hover {
    border-color: rgba(22, 163, 74, 0.35);
    background: var(--exchange-select-bg-hover);
}
[data-theme="dark"] .exchange-select-wrap:hover {
    border-color: rgba(46, 187, 92, 0.4);
}

.exchange-select-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
    outline: none;
}

.exchange-select-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
}

.exchange-select-wrap:not(.has-value) .exchange-select-value {
    font-weight: 500;
    color: var(--text-muted);
}

.exchange-select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--border-soft);
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}

.exchange-select-wrap:hover .exchange-select-arrow {
    color: var(--accent);
    background: var(--accent-light);
}

.exchange-crypto-select {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
}

.exchange-amount-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.exchange-amount-toggle {
    display: flex;
    background: var(--border-soft);
    border-radius: 10px;
    padding: 3px;
}

.exchange-toggle-btn {
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.exchange-toggle-btn.active {
    background: var(--bg-card);
    color: var(--accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.exchange-amount-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.exchange-amount-input {
    flex: 1;
    min-width: 0;
    padding: 12px 0;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    font-family: inherit;
}

.exchange-amount-input::placeholder {
    color: var(--border);
}

.exchange-amount-input::-webkit-outer-spin-button,
.exchange-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.exchange-amount-input[type=number] {
    -moz-appearance: textfield;
}

.exchange-amount-unit {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted);
}

.exchange-amount-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 0 0;
}

.exchange-free-hint {
    font-size: 12px;
    color: var(--accent, #38bdf8);
    margin: 8px 0 0;
    line-height: 1.35;
}

.exchange-result {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exchange-result-label {
    font-size: 12px;
    color: var(--text-muted);
}

.exchange-result-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
}

.exchange-wallet-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    font-size: 15px;
    color: var(--text);
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.exchange-wallet-input::placeholder {
    color: var(--text-muted);
}

.exchange-wallet-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08);
}

.exchange-wallet-hint {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.exchange-section {
    margin: 0;
}

.exchange-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 14px;
}

.exchange-method-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.exchange-method-grid.exchange-method-grid--single {
    grid-template-columns: 1fr;
}

.exchange-method-grid .payment-method-chip,
.exchange-method-grid .exchange-method-btn {
    margin: 0;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    min-height: 52px;
    min-width: 0;
    transition: border-color 0.2s, background 0.2s, transform 0.15s var(--ease-out-smooth), box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.exchange-method-grid .payment-method-chip:active,
.exchange-method-grid .exchange-method-btn:active {
    transform: scale(0.96);
}

.exchange-method-grid .payment-method-chip-icon {
    font-size: 1.35em;
}

.exchange-method-grid .payment-method-chip--card { border-left: 4px solid #3b82f6; }
.exchange-method-grid .payment-method-chip--sbp { border-left: 4px solid #22c55e; }
.exchange-method-grid .payment-method-chip--sbp-qr { border-left: 4px solid #06b6d4; }
.exchange-method-grid .payment-method-chip--cryptobot { border-left: 4px solid #a855f7; }
.exchange-method-grid .payment-method-chip--card.active { border-color: #3b82f6; background: rgba(59, 130, 246, 0.12); color: #60a5fa; }
.exchange-method-grid .payment-method-chip--sbp.active { border-color: #22c55e; background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.exchange-method-grid .payment-method-chip--sbp-qr.active { border-color: #06b6d4; background: rgba(6, 182, 212, 0.12); color: #22d3ee; }
.exchange-method-grid .payment-method-chip--cryptobot.active { border-color: #a855f7; background: rgba(168, 85, 247, 0.12); color: #c084fc; }

.exchange-method-grid .payment-method-chip:hover,
.exchange-method-grid .exchange-method-btn:hover {
    border-color: var(--accent);
    background: var(--accent-light);
}

.exchange-method-grid .payment-method-chip.active,
.exchange-method-grid .exchange-method-btn.active {
    border-color: var(--accent);
    background: var(--accent-light);
    color: var(--accent);
}

.exchange-no-methods {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    padding: 16px 0;
}

.exchange-submit-btn {
    width: 100%;
    height: 56px;
    padding: 0 24px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    margin: 8px 0 0;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
    transition: box-shadow 0.25s var(--ease-out-smooth), transform 0.2s var(--ease-out-smooth);
    -webkit-tap-highlight-color: transparent;
}

.exchange-submit-btn:hover {
    box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.45);
    transform: translateY(-2px);
}

.exchange-submit-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.3);
}

.exchange-rates-details {
    margin-top: 24px;
    padding: 16px 0 0;
    border-top: 1px solid var(--border);
}

.exchange-rates-summary {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    padding: 8px 0;
    transition: color 0.2s;
}
.exchange-rates-summary:hover {
    color: var(--text);
}
.exchange-rates-summary::after {
    transition: transform 0.25s var(--ease-out-smooth);
}
.exchange-rates-details[open] > .exchange-rates-summary::after {
    transform: rotate(180deg);
}

.exchange-rates-summary::-webkit-details-marker {
    display: none;
}

.exchange-rates-summary::after {
    content: ' ▼';
    font-size: 11px;
    color: var(--text-muted);
}

.exchange-rates-details[open] .exchange-rates-summary::after {
    content: ' ▲';
}

.exchange-rates-table {
    margin-top: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
}

.exchange-rates-header {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 0 12px;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--border-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.exchange-rates-header span:first-child {
    text-align: left;
}
.exchange-rates-header span:nth-child(2),
.exchange-rates-header span:nth-child(3),
.exchange-rates-header span:nth-child(4) {
    text-align: right;
}

.exchange-rates-body {
    font-size: 14px;
    color: var(--text);
}

.exchange-rates-body .exchange-rates-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 0 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    align-items: center;
}

.exchange-rates-row .exchange-rates-currency {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    min-width: 0;
}
.exchange-rates-row span:nth-child(2),
.exchange-rates-row span:nth-child(3),
.exchange-rates-row span:nth-child(4) {
    text-align: right;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 480px) {
    .exchange-rates-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
    }
    .exchange-rates-header,
    .exchange-rates-body .exchange-rates-row {
        grid-template-columns: minmax(64px, 1fr) minmax(58px, 1fr) minmax(52px, 1fr) minmax(52px, 1fr);
        padding: 12px 10px;
        gap: 0 6px;
    }
    .exchange-rates-header {
        font-size: 11px;
    }
    .exchange-rates-body .exchange-rates-row {
        font-size: 13px;
    }
    .exchange-rates-row span:nth-child(2),
    .exchange-rates-row span:nth-child(3),
    .exchange-rates-row span:nth-child(4) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Обёртка кнопки «Назад» — glass, единый стиль на всех страницах */
.btn-back-wrap {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-back-wrap:hover {
    border-color: rgba(22, 163, 74, 0.25);
}
[data-theme="dark"] .btn-back-wrap:hover {
    border-color: rgba(46, 187, 92, 0.3);
}

.btn-back-wrap .btn-back-top {
    display: inline-block;
    width: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

/* Экран Инфо — без шапки, баннер вместо неё; без кнопки «Назад» */
#app:has(#info.active) .app-header {
    display: none;
}

.info-screen {
    padding-bottom: 24px;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-page) 100%);
}
.info-screen.active .info-page {
    padding-top: 0;
}
.info-page {
    min-height: 100%;
    padding: 0 16px 80px;
    max-width: 480px;
    margin: 0 auto;
}
.info-hero {
    text-align: center;
    padding: calc(env(safe-area-inset-top, 12px) + 24px) 20px 32px;
    margin: 0 -16px 28px;
    background: linear-gradient(160deg, #1a4035 0%, #153528 45%, #0f2822 100%);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.info-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    pointer-events: none;
}
[data-theme="light"] .info-hero {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.35), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.info-hero-title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin: 0 0 12px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    position: relative;
}
.info-hero-tagline {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    opacity: 0.96;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    letter-spacing: 0.01em;
}
.info-blocks {
    margin-bottom: 28px;
}
.info-blocks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.info-block-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    min-height: 124px;
    position: relative;
    overflow: hidden;
}
.info-block-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: 18px 0 0 18px;
}
.info-block-card:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.1);
    transform: translateY(-3px);
}
.info-block-card:hover::before {
    opacity: 1;
}
.info-block-card:active {
    transform: translateY(-1px);
}
.info-block-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.info-block-card:hover .info-block-icon {
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
    transform: scale(1.05);
}
.info-block-icon--news {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 22h16a2 2 0 002-2V4a2 2 0 00-2-2H8a2 2 0 00-2 2v16a2 2 0 01-2 2z'/%3E%3Cpath d='M15 2h6v6M9 10h6'/%3E%3C/svg%3E") center/24px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 22h16a2 2 0 002-2V4a2 2 0 00-2-2H8a2 2 0 00-2 2v16a2 2 0 01-2 2z'/%3E%3Cpath d='M15 2h6v6M9 10h6'/%3E%3C/svg%3E") center/24px no-repeat;
    background-color: var(--accent);
    background-image: none;
}
.info-block-icon--support {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E") center/24px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E") center/24px no-repeat;
    background-color: var(--accent);
    background-image: none;
}
.info-block-icon--chat {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3C/svg%3E") center/24px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z'/%3E%3C/svg%3E") center/24px no-repeat;
    background-color: var(--accent);
    background-image: none;
}
.info-block-icon--help {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E") center/24px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3M12 17h.01'/%3E%3C/svg%3E") center/24px no-repeat;
    background-color: var(--accent);
    background-image: none;
}
.info-block-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
    line-height: 1.3;
    letter-spacing: 0.01em;
}
.info-block-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
    flex: 1;
}
.info-block-arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--text-muted);
    font-size: 1.05rem;
    transition: transform 0.25s ease, color 0.25s ease;
}
.info-block-card:hover .info-block-arrow {
    color: var(--accent);
    transform: translateX(4px);
}
[data-theme="dark"] .info-block-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    background: linear-gradient(165deg, var(--bg-card) 0%, rgba(var(--accent-rgb), 0.03) 100%);
}
[data-theme="dark"] .info-block-card:hover {
    box-shadow: 0 8px 28px rgba(var(--accent-rgb), 0.15);
}
.info-cta {
    padding: 22px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    position: relative;
}
[data-theme="dark"] .info-cta {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(var(--accent-rgb), 0.06);
}
.info-cta-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.info-cta-text {
    font-size: 14px;
    color: var(--text);
    margin: 0;
    line-height: 1.5;
}
.info-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 22px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border-radius: 14px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.4), 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    transition: transform 0.2s, box-shadow 0.25s;
}
.info-cta-btn:hover {
    box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.45), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
    transform: translateY(-2px);
}
.info-cta-btn:active {
    transform: translateY(0);
}
.info-cta-btn-icon {
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.69 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.53 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z'/%3E%3C/svg%3E") center/22px no-repeat;
}
@media (max-width: 380px) {
    .info-blocks-grid { gap: 12px; }
    .info-block-card { padding: 16px 14px; min-height: 114px; }
    .info-hero { padding: 28px 16px 32px; border-radius: 0 0 20px 20px; }
    .info-hero-title { font-size: 1.35rem; letter-spacing: 0.1em; }
    .info-hero-tagline { font-size: 12px; }
}

/* Страница Рулетка / Акции: Купоны, Акции, Рулетка, Лотерейный билет */
.roulette-screen {
    padding: 0 16px 80px;
    max-width: 480px;
    margin: 0 auto;
}
.roulette-hero {
    text-align: center;
    padding: calc(env(safe-area-inset-top, 12px) + 24px) 20px 32px;
    margin: 0 -16px 28px;
    background: linear-gradient(160deg, #1a4035 0%, #153528 45%, #0f2822 100%);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    color: #fff;
    position: relative;
}
[data-theme="light"] .roulette-hero {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    box-shadow: 0 6px 24px rgba(var(--accent-rgb), 0.35), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}
.roulette-hero-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 8px;
}
.roulette-hero-tagline {
    font-size: 13px;
    opacity: 0.95;
    margin: 0;
}
.roulette-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
}
.roulette-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-family: inherit;
    text-align: center;
    min-height: 120px;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    position: relative;
    overflow: hidden;
}
.roulette-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: 18px 0 0 18px;
}
.roulette-card:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.1);
    transform: translateY(-2px);
}
.roulette-card:hover::before {
    opacity: 1;
}
.roulette-card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    background: var(--accent);
    border-radius: 12px;
    flex-shrink: 0;
}
.roulette-card-icon--coupons {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h16v3l-8 5-8-5V4z'/%3E%3Cpath d='M4 13v7h16v-7'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E") center/24px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 4h16v3l-8 5-8-5V4z'/%3E%3Cpath d='M4 13v7h16v-7'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E") center/24px no-repeat;
}
.roulette-card-icon--promo {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E") center/24px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E") center/24px no-repeat;
}
.roulette-card-icon--roulette {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/24px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center/24px no-repeat;
}
.roulette-card-icon--lottery {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M7 8V6a2 2 0 012-2h6a2 2 0 012 2v2'/%3E%3Cpath d='M12 12v4M10 14h4'/%3E%3C/svg%3E") center/24px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='8' width='18' height='12' rx='2'/%3E%3Cpath d='M7 8V6a2 2 0 012-2h6a2 2 0 012 2v2'/%3E%3Cpath d='M12 12v4M10 14h4'/%3E%3C/svg%3E") center/24px no-repeat;
}
.roulette-card-icon--vpn {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/24px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center/24px no-repeat;
}
.roulette-cards--vpn {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.roulette-cards--vpn .roulette-card {
    max-width: 200px;
    flex: 1;
}
.roulette-card-label {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 4px;
}
.roulette-card-cta {
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
}
.roulette-cards--three {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.roulette-cards--three .roulette-card {
    padding: 16px 8px;
    min-height: 110px;
}
.roulette-cards--three .roulette-card-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 8px;
}
.roulette-cards--three .roulette-card-label {
    font-size: 0.85rem;
}
.roulette-cards--three .roulette-card-cta {
    font-size: 11px;
}
.weekly-lottery-view {
    padding: 16px 0 32px;
}
.weekly-lottery-hero {
    text-align: center;
    margin: 12px 0 18px;
    padding: 0 4px;
}
.weekly-lottery-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 6px;
}
.weekly-lottery-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--text);
}
.weekly-lottery-sub {
    font-size: 13px;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.5;
}
.weekly-lottery-mute {
    font-size: 11px;
    color: var(--text-soft);
    margin: 0;
    letter-spacing: 0.04em;
}
.weekly-lottery-bank-card {
    background: var(--bg-card);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-card);
}
.weekly-lottery-bank-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}
@media (min-width: 600px) {
    .weekly-lottery-bank-row {
        grid-template-columns: 1fr minmax(280px, 38%);
    }
}
.weekly-lottery-bank-amount {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    margin: 4px 0 4px;
    color: var(--accent);
}
.weekly-lottery-countdown {
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px;
    width: 100%;
    box-sizing: border-box;
}
@media (min-width: 600px) {
    .weekly-lottery-countdown {
        text-align: right;
    }
}
.weekly-lottery-countdown-value {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    font-weight: 800;
    margin: 6px 0;
    color: var(--text);
    letter-spacing: 0.02em;
}
.weekly-lottery-shares {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}
.weekly-lottery-share {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 8px;
    text-align: center;
}
.weekly-lottery-share-place {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin: 0;
}
.weekly-lottery-share-percent {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--accent);
    margin: 4px 0 2px;
}
.weekly-lottery-share-amount {
    font-size: 11px;
    color: var(--text-soft);
    margin: 0;
}
.weekly-lottery-buy-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-card);
}
.weekly-lottery-buy-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.weekly-lottery-buy-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}
.weekly-lottery-balance {
    margin: 0;
    font-weight: 700;
    color: var(--accent);
    font-size: 14px;
}
.weekly-lottery-counter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.weekly-lottery-counter-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}
.weekly-lottery-counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.weekly-lottery-counter-input {
    width: 70px;
    height: 38px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-weight: 700;
    font-size: 16px;
    -moz-appearance: textfield;
}
.weekly-lottery-counter-input::-webkit-outer-spin-button,
.weekly-lottery-counter-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.weekly-lottery-total {
    margin-left: auto;
    text-align: right;
}
.weekly-lottery-total-amount {
    display: block;
    font-weight: 800;
    color: var(--accent);
    font-size: 1.05rem;
}
.weekly-lottery-quick {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.weekly-lottery-quick-btn {
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.weekly-lottery-quick-btn.is-active {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
}
.weekly-lottery-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.weekly-lottery-action-btn {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 999px;
}
.weekly-lottery-msg {
    margin: 12px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--text-soft);
}
.weekly-lottery-msg.is-success {
    color: #34d399;
}
.weekly-lottery-msg.is-error {
    color: #f87171;
}
.weekly-lottery-msg.is-info {
    color: var(--accent);
}
.weekly-lottery-tickets-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.weekly-lottery-tickets-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    max-height: 160px;
    overflow-y: auto;
}
.weekly-lottery-ticket {
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
    border-radius: 999px;
    padding: 4px 10px;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 700;
}
.weekly-lottery-history {
    margin-top: 8px;
}
.weekly-lottery-history-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 10px;
}
.weekly-lottery-history-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-soft);
}
.weekly-lottery-history-head strong {
    color: var(--text);
}
.weekly-lottery-history-winners {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}
.weekly-lottery-history-winner {
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.05);
    border-radius: 12px;
    padding: 8px 10px;
}
.weekly-lottery-history-winner-place {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
}
.weekly-lottery-history-winner-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin: 4px 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.weekly-lottery-history-winner-meta {
    font-size: 11px;
    color: var(--text-soft);
    margin: 0;
}
.weekly-lottery-legal {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-soft);
    text-align: center;
    margin: 16px 4px 0;
    opacity: 0.75;
}

/* ========== VPN View ========== */
.vpn-view {
    padding: 16px 0 32px;
}
.vpn-hero {
    text-align: center;
    margin: 12px 0 18px;
    padding: 0 4px;
}
.vpn-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 6px;
}
.vpn-title {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--text);
}
.vpn-sub {
    font-size: 13px;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.5;
}
.vpn-mute {
    font-size: 11px;
    color: var(--text-soft);
    margin: 0 0 4px;
    letter-spacing: 0.04em;
}
.vpn-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-card);
}
.vpn-card--inactive {
    border-color: rgba(var(--accent-rgb), 0.25);
}
.vpn-status-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.vpn-status-badge--active {
    background: rgba(52, 211, 153, 0.15);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.35);
}
.vpn-status-badge--inactive {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, 0.35);
}
.vpn-expiry {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 16px;
}
.vpn-link-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin: 8px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vpn-link-box code {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 11px;
    color: var(--accent);
    word-break: break-all;
    background: transparent;
    padding: 0;
}
.vpn-copy-btn {
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
}
.vpn-instructions-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin: 16px 0 8px;
}
.vpn-instructions {
    font-size: 12px;
    color: var(--text-soft);
    margin: 0;
    padding-left: 16px;
    line-height: 1.6;
}
.vpn-instructions li {
    margin-bottom: 8px;
}
.vpn-instructions ul {
    margin: 6px 0;
    padding-left: 16px;
}
.vpn-instructions ul li {
    margin-bottom: 4px;
}
.vpn-hint {
    font-size: 11px;
    color: var(--accent);
    text-align: center;
    margin: 16px 0 0;
    opacity: 0.85;
}
.vpn-promo-text {
    font-size: 14px;
    color: var(--text);
    margin: 0 0 14px;
    text-align: center;
}
.vpn-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}
.vpn-benefits li {
    font-size: 12px;
    color: var(--text-soft);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.vpn-benefits li:last-child {
    border-bottom: none;
}
.vpn-history {
    margin-top: 8px;
}
.vpn-history-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
    padding: 0 4px;
}
.vpn-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vpn-history-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
}
.vpn-history-month {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}
.vpn-history-status {
    font-size: 11px;
    margin: 0;
}
.vpn-history-status--active {
    color: #34d399;
}
.vpn-history-status--expired {
    color: var(--text-soft);
}
.vpn-link-box--alt {
    margin-top: 10px;
    border-style: dashed;
    opacity: 0.95;
}

.vpn-guide-toggle {
    margin-top: 14px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
}

.vpn-install-guide-panel {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.92rem;
    line-height: 1.45;
}

.vpn-install-guide-panel .vpn-instructions-title {
    margin-top: 8px;
}
.vpn-history-link {
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 10px;
    color: var(--accent);
    word-break: break-all;
    margin: 6px 0 0;
    display: block;
}

.roulette-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-card);
}
.roulette-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.roulette-block-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}
.roulette-block-back {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}
.roulette-active-info {
    margin-bottom: 16px;
}
.roulette-dates, .roulette-limits, .roulette-prizes, .roulette-no-active {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 8px;
    line-height: 1.45;
}
.roulette-join-wrap {
    margin-bottom: 16px;
}
.roulette-join-btn {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35);
    transition: transform 0.2s, box-shadow 0.25s;
}
.roulette-join-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.45);
}
.roulette-join-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.roulette-already-msg {
    font-size: 14px;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 16px;
}
.roulette-participants-wrap {
    margin-top: 8px;
}
.roulette-participants-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 10px;
}
.roulette-participants-count {
    color: var(--accent);
    font-weight: 600;
}
.roulette-participants-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.roulette-participant-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* Ежедневная промо-рулетка */
.daily-roulette-view {
    padding: 0 0 24px;
    max-width: 420px;
    margin: 0 auto;
}
.daily-roulette-hero {
    text-align: center;
    margin-bottom: 20px;
}
.daily-roulette-kicker {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin: 0 0 6px;
}
.daily-roulette-title {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0 0 8px;
    background: linear-gradient(120deg, #22d3ee, #a78bfa, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.daily-roulette-sub {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.45;
}
.daily-roulette-wheel-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 20px;
    min-height: 280px;
}
.daily-roulette-wheel-stage--casino {
    padding-top: 8px;
    padding-bottom: 12px;
}
.daily-roulette-glow {
    position: absolute;
    width: min(92vw, 320px);
    height: min(92vw, 320px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.35) 0%, transparent 62%);
    filter: blur(18px);
    animation: daily-roulette-pulse 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes daily-roulette-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.04); }
}
.daily-roulette-pointer {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 26px solid #fcd34a;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 12px rgba(250, 204, 21, 0.45));
    z-index: 4;
}
.daily-roulette-wheel-outer {
    position: relative;
    overflow: visible;
    width: min(78vw, 280px);
    height: min(78vw, 280px);
    border-radius: 50%;
    padding: 10px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 20px 50px rgba(0, 0, 0, 0.45),
        inset 0 0 40px rgba(34, 211, 238, 0.06);
    z-index: 1;
}
/* Колесо: Canvas (см. _drawDailyPromoCanvas) — вращается только #daily-roulette-wheel-rotate */
.daily-roulette-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.45),
        inset 0 2px 0 rgba(255, 255, 255, 0.12);
}
.daily-roulette-wheel-rotate {
    width: 100%;
    height: 100%;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    will-change: transform;
    border-radius: 50%;
}
.daily-roulette-canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    vertical-align: top;
}
.daily-roulette-hub-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 5;
}
.daily-roulette-wheel-hub {
    width: 18%;
    min-width: 44px;
    max-width: 78px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(160deg, #1e293b, #0f172a);
    border: 2px solid rgba(250, 204, 21, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.daily-roulette-wheel-hub-text {
    font-size: 1rem;
    font-weight: 800;
    color: #f8fafc;
}
.daily-roulette-spin-btn {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 16px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 800;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: #0f172a;
    background: linear-gradient(100deg, #facc15, #f97316);
    box-shadow: 0 10px 28px rgba(249, 115, 22, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.daily-roulette-spin-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(249, 115, 22, 0.45);
}
.daily-roulette-spin-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.daily-roulette-result {
    margin: 0 auto 12px;
    max-width: 340px;
    border-radius: 16px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    animation: daily-roulette-result-in 0.5s ease both;
}
@keyframes daily-roulette-result-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.daily-roulette-result-inner {
    text-align: center;
}
.daily-roulette-result-title {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 6px;
}
.daily-roulette-result-prize {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--text);
}
.daily-roulette-result-code {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
    word-break: break-all;
}
.daily-roulette-result-code code {
    color: var(--accent);
    font-weight: 700;
}
.daily-roulette-legal {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--muted);
    text-align: center;
    margin: 0 12px;
    opacity: 0.9;
}

/* Экран помощи/жалобы — карточка формы */
#complaint .form-group {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--border);
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
}

#complaint .input-text {
    border-radius: 12px;
}

#complaint .btn-gold {
    border-radius: 12px;
    padding: 16px 24px;
}

.btn-back-wrap .btn-back-top:hover,
.btn-back-wrap .btn-back-unified:hover {
    color: var(--text);
}

.btn-back-top {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 16px;
    padding: 0;
    cursor: pointer;
}

/* Главная — премиум: отступ, анимации появления */
@keyframes homeFadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes homeScaleIn {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.home-screen .main-page-container {
    padding-top: 16px;
}
.home-screen .main-page-container > .home-intro {
    animation: homeFadeInUp 0.5s var(--ease-out-smooth) both;
}
.home-screen .main-page-container > .home-exchange-cta {
    animation: homeFadeInUp 0.5s var(--ease-out-smooth) 0.06s both;
}
.home-screen .main-page-container > .home-trust {
    animation: homeFadeInUp 0.5s var(--ease-out-smooth) 0.12s both;
}
.home-screen .main-page-container > .home-popular {
    animation: homeFadeInUp 0.5s var(--ease-out-smooth) 0.18s both;
}
.home-screen .main-page-container > .home-banner {
    animation: homeScaleIn 0.45s var(--ease-out-smooth) 0.24s both;
}
.home-screen .main-page-container > .home-articles {
    animation: homeFadeInUp 0.5s var(--ease-out-smooth) 0.3s both;
}
.home-screen .main-page-container > .home-admin-entry {
    animation: homeFadeInUp 0.5s var(--ease-out-smooth) 0.36s both;
}

/* Блок «о нас» — glass, раскрывается по клику */
.home-intro {
    margin-bottom: 20px;
    padding: 16px 18px;
    background: var(--home-intro-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
:root { --home-intro-bg: rgba(255, 255, 255, 0.85); }
[data-theme="dark"] .home-intro { --home-intro-bg: rgba(26, 31, 38, 0.7); }
.home-intro:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
[data-theme="dark"] .home-intro:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(46, 187, 92, 0.1);
}

.home-intro-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    padding-right: 28px;
}
.home-intro-toggle .home-intro-text {
    margin-bottom: 0;
}

.home-intro-chevron {
    position: absolute;
    right: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    background: currentColor;
    color: var(--text-muted);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/20px no-repeat;
    mask-size: 20px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/20px no-repeat;
    -webkit-mask-size: 20px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.home-intro.is-expanded .home-intro-chevron {
    transform: rotate(180deg);
}

.home-intro-body {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    opacity: 0;
    transition: grid-template-rows 0.35s var(--ease-out-smooth), opacity 0.3s var(--ease-out-smooth), margin-top 0.3s, padding-top 0.3s, border-color 0.3s;
    overflow: hidden;
}
.home-intro-body-inner {
    min-height: 0;
    overflow: hidden;
}
.home-intro.is-expanded .home-intro-body {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 12px;
    padding-top: 12px;
    border-top-color: var(--border);
}

.home-intro-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin: 0 0 8px;
    line-height: 1.2;
}

.home-intro-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
    margin: 0 0 10px;
}

.home-intro-desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 10px;
}

.home-intro-cta {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    line-height: 1.4;
    margin: 0 0 14px;
}

.home-intro-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.home-intro-badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    border-radius: var(--radius-pill);
}

/* Доверие — три пункта */
.home-trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 8px;
    margin-bottom: 24px;
    padding: 14px 0;
}

.home-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 0;
}

.home-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(22, 163, 74, 0.12);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}

/* Сторис — скруглённые карточки как в референсе (пастельные градиенты, тени) */
.home-stories {
    margin-bottom: 24px;
    padding: 4px 0 8px;
}

.home-stories-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 10px;
    margin: 0 -4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.home-stories-track::-webkit-scrollbar {
    display: none;
}

.home-story-card {
    flex: 0 0 auto;
    width: 96px;
    min-width: 96px;
    height: 132px;
    border-radius: 14px;
    border: 2px solid var(--story-border);
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background: var(--bg-card);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.home-story-card--viewed {
    border-color: var(--border);
}

.home-story-card:active {
    transform: scale(0.98);
}

.home-story-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.home-story-card:not(.home-story-card--viewed):hover {
    border-color: var(--story-border-hover);
}

.home-story-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Пастельные градиенты по референсу */
.home-story-card--1 .home-story-card-bg {
    background: linear-gradient(135deg, #e9d5ff 0%, #c7d2fe 50%, #a5b4fc 100%);
}

.home-story-card--2 .home-story-card-bg {
    background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 50%, #93c5fd 100%);
}

.home-story-card--3 .home-story-card-bg {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 40%, #e2e8f0 100%);
}

.home-story-card--4 .home-story-card-bg {
    background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 60%, #bae6fd 100%);
}

.home-story-card-icon {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    min-height: 0;
}

.home-story-card-label {
    display: none;
}

/* Статьи — такой же стиль как сторис */
.home-articles {
    margin-bottom: 24px;
    padding: 4px 0 8px;
}

.home-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.home-section-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.home-articles-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 10px;
    margin: 0 -4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.home-articles-track::-webkit-scrollbar {
    display: none;
}

.home-article-card {
    flex: 0 0 auto;
    width: 96px;
    min-width: 96px;
    height: 132px;
    border-radius: 14px;
    border: 2px solid var(--accent);
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background: var(--bg-card);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.home-article-card:active {
    transform: scale(0.98);
}

.home-article-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border-color: var(--accent);
}

.home-article-card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.home-article-card--1 .home-article-card-bg {
    background: linear-gradient(135deg, #e9d5ff 0%, #c7d2fe 50%, #a5b4fc 100%);
}

.home-article-card--2 .home-article-card-bg {
    background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 50%, #93c5fd 100%);
}

.home-article-card--3 .home-article-card-bg {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 40%, #e2e8f0 100%);
}

.home-article-card-label {
    position: relative;
    z-index: 1;
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    padding: 6px 6px 8px;
    text-align: center;
    width: 100%;
    line-height: 1.25;
    background: transparent;
}

/* Story viewer overlay */
.story-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    background: rgba(0, 0, 0, 0.92);
    box-sizing: border-box;
}
.story-viewer-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px 10px;
    background: rgba(0, 0, 0, 0.5);
    min-height: 48px;
}
.story-viewer-close {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
}
.story-viewer-close:hover {
    opacity: 0.9;
}
.story-viewer-close-x {
    font-size: 20px;
    line-height: 1;
}
.story-viewer-progress {
    flex: 1;
    display: flex;
    gap: 4px;
    max-width: 240px;
}
.story-viewer-progress-seg {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.3);
    transition: background 0.2s;
}
.story-viewer-progress-seg.filled {
    background: #fff;
}
.story-viewer-body {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.story-viewer-tap {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25%;
    max-width: 80px;
    z-index: 5;
    border: none;
    background: transparent;
    cursor: pointer;
}
.story-viewer-tap--prev {
    left: 0;
}
.story-viewer-tap--next {
    right: 0;
}

/* Стрелки для листания сторис на ПК */
.story-viewer-arrow {
    display: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: background 0.2s, border-color 0.2s;
}
.story-viewer-tap:hover .story-viewer-arrow {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 768px) {
    .story-viewer-arrow {
        display: flex;
    }
    .story-viewer-arrow--prev::before {
        content: '‹';
        margin-left: -2px;
    }
    .story-viewer-arrow--next::before {
        content: '›';
        margin-right: -2px;
    }
    .story-viewer-tap {
        width: 80px;
        max-width: 120px;
    }
}
.story-viewer-content {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
    max-width: 100%;
}
.story-viewer-media {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.home-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.home-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    background: linear-gradient(165deg, rgba(22, 163, 74, 0.06) 0%, rgba(22, 163, 74, 0.02) 100%);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.home-service-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.12);
}

.home-service-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--accent-light);
    flex-shrink: 0;
}

.home-service-icon--exchange {
    background: var(--accent-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 16V4M7 4L3 8M7 4L11 8M17 8v12M17 20l4-4M17 20l-4-4'/%3E%3C/svg%3E") center/22px no-repeat;
}

.home-service-icon--history {
    background: var(--accent-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18M9 4v6'/%3E%3C/svg%3E") center/22px no-repeat;
}

.home-service-icon--profile {
    background: var(--accent-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='3'/%3E%3Cpath d='M5 20a7 7 0 0114 0'/%3E%3C/svg%3E") center/22px no-repeat;
}

.home-service-icon--help {
    background: var(--accent-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E") center/22px no-repeat;
}

.home-service-icon--link {
    background: var(--accent-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center/22px no-repeat;
}

.home-service-icon--settings {
    background: var(--accent-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E") center/22px no-repeat;
}

.home-service-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    line-height: 1.2;
}

.home-exchange-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 18px 24px;
    margin-bottom: 24px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s var(--ease-out-smooth), box-shadow 0.25s var(--ease-out-smooth);
    -webkit-tap-highlight-color: transparent;
}

.home-exchange-cta:hover {
    box-shadow: 0 6px 24px rgba(22, 163, 74, 0.45);
    transform: translateY(-2px);
}

.home-exchange-cta:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}

.home-exchange-cta-icon {
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M7 16V4M7 4L3 8M7 4L11 8M17 8v12M17 20l4-4M17 20l-4-4'/%3E%3C/svg%3E") center/20px no-repeat;
}

.home-exchange-cta-text {
    flex: 1;
    text-align: left;
}

.home-exchange-cta-arrow {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.home-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 14px;
    letter-spacing: 0.01em;
}

.home-popular {
    margin-bottom: 28px;
}

.home-popular-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.home-popular-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s, box-shadow 0.25s var(--ease-out-smooth), transform 0.2s var(--ease-out-smooth);
    -webkit-tap-highlight-color: transparent;
}

.home-popular-card:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: var(--shadow-card), 0 2px 8px rgba(var(--accent-rgb), 0.08);
    transform: translateY(-2px);
}
.home-popular-card:active {
    transform: translateY(0) scale(0.97);
}

.home-popular-card--accent {
    background: linear-gradient(165deg, rgba(22, 163, 74, 0.06) 0%, rgba(22, 163, 74, 0.02) 100%);
    border-color: rgba(22, 163, 74, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(22, 163, 74, 0.08);
}

.home-popular-card--accent:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06), 0 3px 10px rgba(22, 163, 74, 0.12);
}

.home-popular-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.home-popular-text {
    line-height: 1.25;
}

/* Баннер «Зарабатывайте с Milka» — в светлой теме как кнопка «Обменять валюту», в тёмной — тёмно-зелёный градиент */
.home-banner {
    position: relative;
    display: block;
    margin-bottom: 20px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.home-banner--closed {
    display: none;
}
.home-banner:hover {
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
    transform: translateY(-2px);
}
.home-banner:active {
    transform: translateY(0);
}
.home-banner__close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s;
}
.home-banner__close:hover {
    background: rgba(0, 0, 0, 0.4);
}
.home-banner__link {
    display: block;
    padding: 14px 40px 14px 18px;
    text-decoration: none;
    color: inherit;
}
.home-banner__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}
.home-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.home-banner__title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
}
.home-banner__desc {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.95;
    line-height: 1.3;
}
.home-banner__brand {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    flex-shrink: 0;
    opacity: 0.9;
}
[data-theme="dark"] .home-banner {
    background: linear-gradient(135deg, #166534 0%, #14532d 50%, #0f4c26 100%);
    border-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .home-banner:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.home-admin-entry {
    margin-bottom: 24px;
}

.home-admin-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 16px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.home-admin-card:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06), 0 3px 10px rgba(22, 163, 74, 0.1);
    transform: translateY(-1px);
}

.home-admin-card .home-service-icon {
    width: 44px;
    height: 44px;
}

.home-admin-card-text {
    flex: 1;
    min-width: 0;
}

.home-admin-card-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}

.home-admin-card-desc {
    font-size: 12px;
    color: var(--text-muted);
}

.home-admin-card-arrow {
    font-size: 18px;
    color: var(--text-muted);
}

.main-footer {
    text-align: center;
    padding: 28px 20px 20px;
}

.main-footer-logo {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.main-footer-m {
    color: var(--accent);
    font-weight: 700;
    margin-right: 2px;
}

/* Карточки меню (используются в других экранах) */
.menu-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: left;
    width: 100%;
}

.menu-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-card);
}

.menu-card-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    border-radius: 12px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.menu-card-text {
    flex: 1;
    min-width: 0;
}

.menu-card-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    display: block;
    margin-bottom: 2px;
}

.menu-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
}

.menu-card-arrow {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Панель управления (админ / оператор / процессер) — премиум стиль */
#admin-panel.active ~ *,
#admin-panel.active {
    --admin-bg: linear-gradient(165deg, #1a1f26 0%, #242b33 40%, #2f3640 100%);
    --admin-card-bg: rgba(255, 255, 255, 0.04);
    --admin-card-border: rgba(20, 184, 166, 0.15);
    --admin-text: #e2e8f0;
    --admin-text-muted: #94a3b8;
}

.app-main:has(#admin-panel.active),
.app-main:has(#operator-app.active),
.app-main:has(#operator-order-detail.active) {
    background: #020617;
    background-attachment: fixed;
}

.app-main:has(#admin-dashboard.active) {
    background: radial-gradient(circle at top left, rgba(129, 140, 248, 0.14), transparent 55%), #020617;
    background-attachment: fixed;
}

.app-main:has(#operator-order-detail.active) .btn-back-wrap {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(20, 184, 166, 0.2);
}

.app-main:has(#operator-order-detail.active) .btn-back-unified {
    color: #cbd5e1 !important;
}

.app-main:has(#admin-panel.active) .btn-back-wrap,
.app-main:has(#admin-dashboard.active) .btn-back-wrap,
.app-main:has(#operator-app.active) .btn-back-wrap {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(20, 184, 166, 0.2);
}

.app-main:has(#admin-panel.active) .btn-back-unified,
.app-main:has(#admin-dashboard.active) .btn-back-unified,
.app-main:has(#operator-app.active) .btn-back-unified {
    color: #cbd5e1 !important;
}

.app-main:has(#admin-panel.active) .btn-back-unified:hover,
.app-main:has(#admin-dashboard.active) .btn-back-unified:hover,
.app-main:has(#operator-app.active) .btn-back-unified:hover {
    color: #f1f5f9 !important;
}

.admin-panel-container {
    max-width: 480px;
    margin: 0 auto;
    padding-top: 8px;
}

.admin-panel-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(30, 64, 175, 0.7);
    color: #f9fafb;
}

.admin-panel-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    color: #f1f5f9;
}

.admin-panel-subtitle {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 0;
    letter-spacing: 0.02em;
}

.admin-panel-section {
    animation: fadeIn 0.3s ease-out;
}

.admin-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

/* Три карточки процессера — равные колонки без наложения */
#admin-panel-processor .admin-stats-row {
    grid-template-columns: 1fr 1fr 1fr;
    min-width: 0;
}

.admin-stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 14px;
    padding: 18px 14px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    min-width: 0;
    overflow: hidden;
}

.app-main:has(#admin-panel.active) .admin-stat-value,
.app-main:has(#operator-app.active) .operator-app-stat-value {
    color: #f1f5f9;
}

.app-main:has(#admin-panel.active) .admin-stat-label,
.app-main:has(#operator-app.active) .operator-app-stat-label {
    color: #94a3b8;
}

.admin-stat-card--highlight {
    border-color: rgba(20, 184, 166, 0.4);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.12) 0%, rgba(20, 184, 166, 0.04) 100%);
}

.admin-stat-card--clickable {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.admin-stat-card--clickable:hover {
    border-color: rgba(20, 184, 166, 0.4);
    background: rgba(20, 184, 166, 0.06);
}
.admin-stat-card--clickable:active {
    transform: scale(0.98);
}

.admin-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.admin-stat-value--gold {
    color: var(--gold);
}

/* Карточки процессора: равные колонки и компактный шрифт для длинных сумм */
#admin-panel-processor .admin-stat-value {
    font-size: clamp(0.85rem, 3.2vw, 1.2rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-toggle-btn {
    margin-bottom: 24px;
}

.admin-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
}

.admin-section-divider::before,
.admin-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.admin-section-divider-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.app-main:has(#admin-panel.active) .admin-section-divider-text,
.app-main:has(#operator-app.active) .operator-app-divider-text {
    color: #94a3b8;
}

.app-main:has(#admin-panel.active) .admin-section-divider::before,
.app-main:has(#admin-panel.active) .admin-section-divider::after,
.app-main:has(#operator-app.active) .operator-app-divider::before,
.app-main:has(#operator-app.active) .operator-app-divider::after {
    background: linear-gradient(90deg, transparent, rgba(20, 184, 166, 0.3), transparent);
}

/* Админ-дашборд: управление проектом (только для администраторов) — премиум */
.admin-dashboard-container {
    max-width: 100%;
    margin: 0;
    min-width: 0;
    overflow: hidden;
    padding: 0;
}

.admin-dashboard-header {
    display: none;
}

.admin-dashboard-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
    color: #f1f5f9;
}

.admin-dashboard-subtitle {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 0;
    letter-spacing: 0.02em;
}

.admin-dashboard-stats {
    margin-bottom: 16px;
}

.admin-dashboard-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    min-width: 0;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .admin-dashboard-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.admin-dashboard-stat-card {
    background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(55, 65, 81, 0.9);
    border-radius: 14px;
    padding: 12px 10px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.7);
    min-width: 0;
    overflow: hidden;
}

.app-main:has(#admin-dashboard.active) .admin-dashboard-stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(20, 184, 166, 0.2);
}

.app-main:has(#admin-dashboard.active) .admin-dashboard-stat-value {
    color: #f1f5f9;
}

.app-main:has(#admin-dashboard.active) .admin-dashboard-stat-label {
    color: #94a3b8;
}

.admin-dashboard-stat-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-dashboard-stat-value--gold {
    color: var(--gold);
}

.admin-dashboard-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-dashboard-stats-btn-wrap {
    margin-bottom: 18px;
}

.btn-stats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--bg);
    background: linear-gradient(135deg, var(--gold) 0%, #0d9488 100%);
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(20, 184, 166, 0.35);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-stats:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.45);
}

/* Блок управления: значение в рамке + Редактировать */
.setting-frame {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.setting-frame:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.setting-frame-view {
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.setting-frame-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.setting-frame-value-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.setting-frame-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.setting-frame-edit-btn {
    flex-shrink: 0;
}

.setting-frame-edit .admin-dashboard-setting-label {
    margin-bottom: 6px;
}

.setting-frame-edit-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
    flex-wrap: wrap;
}

.admin-dashboard-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    min-width: 0;
}

@media (min-width: 640px) {
    .admin-dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Новый каркас админ-панели: единый вид без боковой шторки */
.admin-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100vh - 56px);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
    color: #f9fafb;
    overflow-x: hidden;
    max-width: 100vw;
}

.admin-layout .admin-shell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-sidebar {
    border-right: 1px solid rgba(148, 163, 184, 0.16);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    backdrop-filter: blur(16px);
    background: radial-gradient(circle at top, rgba(129, 140, 248, 0.18), rgba(15, 23, 42, 0.98));
}

.admin-sidebar-header {
    padding-inline: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-sidebar-collapse {
    display: none;
}

.admin-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    color: inherit;
    padding: 4px 0;
    cursor: pointer;
}

.admin-sidebar-logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 12px;
    background: radial-gradient(circle at 20% 0%, #facc15, #f97316);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #0f172a;
}

.admin-sidebar-logo-text {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #e5e7eb;
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1 1 auto;
    overflow: auto;
}

.admin-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-sidebar-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #64748b;
    padding: 0 6px;
}

.admin-sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 8px 10px;
    background: transparent;
    color: #e5e7eb;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.08s ease;
}

.admin-sidebar-link:hover {
    background: rgba(148, 163, 184, 0.10);
}

.admin-sidebar-link--active {
    background: radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.2), rgba(79, 70, 229, 0.7));
    border-color: rgba(129, 140, 248, 0.9);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.8);
    transform: translateY(-1px);
}

.admin-sidebar-link-icon {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.7);
    color: #c4b5fd;
    font-size: 12px;
}

.admin-sidebar-link-icon::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid currentColor;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
}

.admin-sidebar-link-icon--dashboard::before {
    border-radius: 4px;
    border-width: 1.5px;
}

.admin-sidebar-link-icon--transactions::before {
    border-radius: 2px;
}

.admin-sidebar-link-icon--tickets::before {
    border-radius: 999px;
}

.admin-sidebar-link-icon--finance::before,
.admin-sidebar-link-icon--reports::before,
.admin-sidebar-link-icon--users::before,
.admin-sidebar-link-icon--settings::before,
.admin-sidebar-link-icon--logs::before {
    border-radius: 4px;
}

.admin-sidebar-footer {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(30, 64, 175, 0.7);
}

.admin-sidebar-role {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    padding: 8px 10px;
    background: radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.12), rgba(15, 23, 42, 0.9));
    color: #e5e7eb;
    font-size: 12px;
    cursor: pointer;
}

.admin-sidebar-role-pill {
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    background: rgba(79, 70, 229, 0.25);
    color: #c4b5fd;
}

.admin-shell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-x: hidden;
    max-width: 100%;
}

.admin-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(20px);
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.9));
    position: sticky;
    top: 0;
    z-index: 8;
}

/* Кнопка «Назад» в главное меню */
.admin-topbar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 4px 0 0;
    border: none;
    border-radius: var(--admin-radius, 12px);
    background: transparent;
    color: var(--admin-text, #f1f5f9);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
}
.admin-topbar-back:hover,
.admin-topbar-back:active {
    background: rgba(148, 163, 184, 0.15);
}
.admin-topbar-back-icon {
    font-size: 20px;
    line-height: 1;
}

.admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-topbar-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: rgba(15, 23, 42, 0.6);
    padding: 0 7px;
    cursor: pointer;
}

.admin-topbar-burger span {
    height: 2px;
    border-radius: 999px;
    background: #e5e7eb;
}

.admin-topbar-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-topbar-title {
    font-size: 16px;
    font-weight: 600;
    color: #f9fafb;
}

.admin-topbar-subtitle {
    font-size: 12px;
    color: #9ca3af;
}

.admin-topbar-center {
    min-width: 0;
}

.admin-global-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
}

.admin-global-search-icon {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.9);
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
}

.admin-global-search-input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    color: #e5e7eb;
    font-size: 13px;
    outline: none;
    min-width: 0;
}

.admin-global-search-input::placeholder {
    color: #6b7280;
}

.admin-global-search-shortcut {
    border-radius: 999px;
    border: 1px solid rgba(55, 65, 81, 0.9);
    background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
    color: #9ca3af;
    font-size: 11px;
    padding: 2px 8px;
    cursor: default;
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.admin-notif-wrap,
.admin-profile-wrap {
    position: relative;
}

.admin-search-sections-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-search-item {
    padding: 10px 12px;
    border-radius: var(--admin-radius);
    background: var(--admin-bg-elevated);
    border: 1px solid var(--admin-border);
    font-size: 14px;
    color: var(--admin-text);
    cursor: pointer;
}

.admin-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(55, 65, 81, 0.9);
    background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #e5e7eb;
    position: relative;
}

.admin-icon-bell::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 7px 7px 2px 2px;
    border: 1.4px solid currentColor;
    box-sizing: border-box;
}

.admin-icon-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #ef4444;
    color: #f9fafb;
    font-size: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-icon-theme::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: radial-gradient(circle at 0 0, #f97316, #facc15 40%, #0f172a 55%, #020617);
}

.admin-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    border: 1px solid rgba(55, 65, 81, 0.9);
    background: radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.92));
    padding: 4px 10px 4px 4px;
    cursor: pointer;
}

.admin-profile-avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: linear-gradient(145deg, #4f46e5, #a855f7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.admin-profile-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.admin-profile-name {
    font-size: 12px;
    color: #f9fafb;
}

.admin-profile-role {
    font-size: 11px;
    color: #9ca3af;
}

.admin-content {
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    overflow-x: hidden;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.admin-role-switcher {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-role-chip {
    border-radius: 999px;
    border: 1px solid rgba(55, 65, 81, 0.9);
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
}

.admin-role-chip--active {
    border-color: rgba(129, 140, 248, 0.9);
    background: radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.2), rgba(79, 70, 229, 0.8));
    color: #f9fafb;
}

.admin-section {
    border-radius: 14px;
    border: 1px solid var(--admin-border);
    background: var(--admin-bg-elevated);
    padding: 16px 18px;
    min-width: 0;
}

.admin-section--kpi {
    padding-bottom: 6px;
}

.admin-section--cards {
    padding-top: 10px;
}

.admin-section--hidden {
    display: none;
}

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.admin-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #e5e7eb;
}

.admin-section-subtitle {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

.admin-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.admin-section-btn {
    border-radius: 999px;
    border: 1px solid rgba(55, 65, 81, 0.9);
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
}

.admin-section-btn--primary {
    border-color: rgba(129, 140, 248, 0.9);
    background: radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.16), rgba(79, 70, 229, 0.95));
}

.admin-section-search {
    min-width: 160px;
    border-radius: 999px;
    border: 1px solid rgba(55, 65, 81, 0.9);
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    font-size: 12px;
    padding: 6px 10px;
}

.admin-table-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-table-filters-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-chip {
    border-radius: 999px;
    border: 1px solid rgba(55, 65, 81, 0.9);
    background: rgba(15, 23, 42, 0.9);
    color: #e5e7eb;
    font-size: 11px;
    padding: 4px 9px;
    cursor: pointer;
}

.admin-chip--active {
    border-color: rgba(129, 140, 248, 0.9);
    background: radial-gradient(circle at 0 0, rgba(248, 250, 252, 0.16), rgba(79, 70, 229, 0.95));
}

.admin-chip--outline {
    background: transparent;
}

.admin-table-placeholder {
    border-radius: 12px;
    border: 1px dashed rgba(55, 65, 81, 0.9);
    padding: 16px;
    font-size: 13px;
    color: #9ca3af;
}

/* Финансы — премиум блоки */
.admin-section--finance .admin-section-header--premium {
    margin-bottom: 20px;
}

.admin-finance-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.admin-finance-loading {
    font-size: 14px;
    color: var(--text-muted);
    padding: 24px;
    text-align: center;
}

.admin-finance-block-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    padding-left: 2px;
}

.admin-finance-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .admin-finance-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

.admin-finance-card {
    min-width: 0;
}

.admin-finance-card--premium {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s, border-color 0.2s;
}

[data-theme="dark"] .admin-finance-card--premium {
    background: var(--admin-bg-elevated);
    border-color: rgba(55, 65, 81, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.admin-finance-card--premium:hover {
    box-shadow: var(--shadow-lg);
}

.admin-finance-card--highlight {
    border-color: rgba(var(--accent-rgb), 0.35);
}

[data-theme="dark"] .admin-finance-card--highlight {
    border-color: rgba(46, 187, 92, 0.35);
}

.admin-finance-card-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-finance-card-value--gold {
    color: var(--accent);
}

.admin-finance-card-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-search-user-referral,
.admin-search-user-coupons {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.admin-user-coupons-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-user-coupon-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.admin-user-coupon-code {
    font-weight: 600;
    font-family: ui-monospace, monospace;
}

.admin-user-coupon-desc {
    font-size: 12px;
    color: var(--text-muted);
}

.admin-user-coupon-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

.admin-btn-danger {
    color: var(--danger, #dc2626);
    border-color: var(--danger, #dc2626);
}

.admin-btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .admin-finance-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 960px) {
    .admin-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-sidebar {
        position: fixed;
        inset-block: 0;
        left: 0;
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        z-index: 20;
    }

    .admin-sidebar--open {
        transform: translateX(0);
    }

    .admin-topbar {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding-inline: 10px;
    }

    .admin-topbar-center {
        display: none;
    }

    .admin-topbar-search-btn {
        display: inline-flex !important;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        border: none;
        background: var(--admin-bg-elevated);
        color: var(--admin-text);
        cursor: pointer;
    }

    .admin-content {
        padding-inline: 12px;
        padding-top: 12px;
        padding-bottom: 24px;
    }

    .admin-dashboard-stats-row {
        grid-template-columns: 1fr;
    }

    .admin-role-switcher {
        display: none;
    }

    .admin-topbar {
        padding-inline: 10px;
    }
    .admin-profile-chip .admin-profile-meta {
        display: none;
    }
}

/* ========== Admin Panel: темы и брейкпоинты (mobile-first) ========== */
.admin-layout {
    --admin-bg: #0f172a;
    --admin-bg-elevated: #1e293b;
    --admin-border: rgba(148, 163, 184, 0.2);
    --admin-text: #f1f5f9;
    --admin-text-muted: #94a3b8;
    --admin-accent: #3b82f6;
    --admin-accent-hover: #60a5fa;
    --admin-radius: 12px;
    --admin-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    --admin-shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
    --admin-touch: 40px;
    font-size: 15px;
}

.admin-layout[data-theme="dark"],
.admin-layout[data-theme="light"] {
    --admin-bg: #0f172a;
    --admin-bg-elevated: #1e293b;
    --admin-border: rgba(148, 163, 184, 0.2);
    --admin-text: #f1f5f9;
    --admin-text-muted: #94a3b8;
    --admin-accent: #3b82f6;
    --admin-accent-hover: #60a5fa;
    --admin-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --admin-shadow-lg: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
}

.admin-layout .admin-sidebar,
.admin-layout .admin-shell {
    background: var(--admin-bg);
}

.admin-layout .admin-topbar {
    background: var(--admin-bg-elevated);
    border-color: var(--admin-border);
}

.admin-layout .admin-topbar-title,
.admin-layout .admin-sidebar-link,
.admin-layout .admin-sidebar-logo-text {
    color: var(--admin-text);
}

.admin-layout .admin-topbar-subtitle,
.admin-layout .admin-sidebar-section-label {
    color: var(--admin-text-muted);
}

.admin-layout .admin-sidebar-link--active {
    background: var(--admin-accent);
    border-color: var(--admin-accent);
    color: #fff;
}

/* Сворачиваемый сайдбар: 80px в свернутом виде (desktop 1024+) */
@media (min-width: 1024px) {
    .admin-layout {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .admin-layout:has(.admin-sidebar--collapsed) {
        grid-template-columns: 80px minmax(0, 1fr);
    }

    .admin-sidebar {
        width: 260px;
        transition: width 0.2s ease;
    }

    .admin-sidebar--collapsed {
        width: 80px;
    }

    .admin-sidebar-collapse {
        display: inline-flex;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border: none;
        background: var(--admin-border);
        color: var(--admin-text-muted);
        border-radius: 8px;
        cursor: pointer;
        margin-left: auto;
    }

    .admin-sidebar-collapse::after {
        content: '‹';
        font-size: 18px;
    }

    .admin-sidebar--collapsed .admin-sidebar-collapse::after {
        content: '›';
    }

    .admin-sidebar--collapsed .admin-sidebar-logo-text,
    .admin-sidebar--collapsed .admin-sidebar-section-label,
    .admin-sidebar--collapsed .admin-sidebar-link-label,
    .admin-sidebar--collapsed .admin-sidebar-role-label,
    .admin-sidebar--collapsed .admin-sidebar-role-pill {
        opacity: 0;
        visibility: hidden;
        width: 0;
        overflow: hidden;
    }

    .admin-sidebar--collapsed .admin-sidebar-header,
    .admin-sidebar--collapsed .admin-sidebar-nav,
    .admin-sidebar--collapsed .admin-sidebar-footer {
        align-items: center;
    }

    .admin-sidebar--collapsed .admin-sidebar-link {
        justify-content: center;
        padding: 10px;
    }

    .admin-layout.admin-sidebar-collapsed {
        grid-template-columns: 80px minmax(0, 1fr);
    }
}

/* Backdrop сайдбара (мобильный) */
.admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 18;
    opacity: 0;
    transition: opacity 0.2s;
}

.admin-sidebar-backdrop[style*="display: block"] {
    opacity: 1;
}

/* Глобальный поиск: overlay */
.admin-search-overlay {
    position: fixed;
    inset: 0;
    background: var(--admin-bg);
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    overflow: auto;
}

.admin-search-overlay-inner {
    width: 100%;
    max-width: 640px;
    padding-top: min(40px, 10vw);
}

.admin-search-overlay-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--admin-radius);
    background: var(--admin-bg-elevated);
    box-shadow: var(--admin-shadow);
    border: 1px solid var(--admin-border);
    margin-bottom: 16px;
}

.admin-search-overlay-icon {
    width: 20px;
    height: 20px;
    border: 2px solid var(--admin-text-muted);
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
    flex-shrink: 0;
}

.admin-search-overlay-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    color: var(--admin-text);
    outline: none;
}

.admin-search-overlay-input::placeholder {
    color: var(--admin-text-muted);
}

.admin-search-overlay-close {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--admin-text-muted);
    font-size: 24px;
    cursor: pointer;
    border-radius: var(--admin-radius);
}

.admin-search-overlay-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.admin-search-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--admin-border);
    background: var(--admin-bg-elevated);
    color: var(--admin-text-muted);
    font-size: 13px;
    cursor: pointer;
}

.admin-search-chip--active {
    background: var(--admin-accent);
    color: #fff;
    border-color: var(--admin-accent);
}

.admin-search-overlay-results {
    min-height: 120px;
}

.admin-search-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-search-skeleton-line {
    height: 16px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--admin-border) 25%, var(--admin-bg-elevated) 50%, var(--admin-border) 75%);
    background-size: 200% 100%;
    animation: admin-shimmer 1s infinite;
}

@keyframes admin-shimmer {
    to { background-position: 200% 0; }
}

.admin-search-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-search-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--admin-text-muted);
    margin-bottom: 8px;
}

.admin-search-hint {
    font-size: 14px;
    color: var(--admin-text-muted);
    margin: 16px 0 0;
}

/* Панель уведомлений */
.admin-topbar-right {
    position: relative;
}

.admin-notifications-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: var(--admin-bg-elevated);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow-lg);
    border: 1px solid var(--admin-border);
    z-index: 50;
    max-height: 400px;
    display: flex;
    flex-direction: column;
}

.admin-notifications-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--admin-border);
    font-weight: 600;
    font-size: 14px;
    color: var(--admin-text);
}

.admin-notifications-mark-read {
    font-size: 12px;
    color: var(--admin-accent);
    background: none;
    border: none;
    cursor: pointer;
}

.admin-notifications-list {
    overflow: auto;
    padding: 8px;
}

.admin-notifications-empty {
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--admin-text-muted);
}

/* Профиль dropdown */
.admin-profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--admin-bg-elevated);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow-lg);
    border: 1px solid var(--admin-border);
    z-index: 50;
    padding: 8px;
}

.admin-profile-dropdown-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    border: none;
    background: none;
    color: var(--admin-text);
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
}

.admin-profile-dropdown-item--danger {
    color: #dc2626;
}

/* Тосты */
.admin-toast-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.admin-toast {
    padding: 12px 20px;
    border-radius: var(--admin-radius);
    background: var(--admin-bg-elevated);
    color: var(--admin-text);
    font-size: 14px;
    box-shadow: var(--admin-shadow-lg);
    border: 1px solid var(--admin-border);
    pointer-events: auto;
}

.admin-toast--success { border-left: 4px solid #22c55e; }
.admin-toast--error { border-left: 4px solid #ef4444; }
.admin-toast--info { border-left: 4px solid var(--admin-accent); }

/* Нижняя навигация: всегда видна, удобно на мобильном */
.admin-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 60px;
    height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    padding-inline: 6px;
    background: var(--admin-bg-elevated);
    border-top: 1px solid var(--admin-border);
    z-index: 16;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
}

.admin-bottom-nav-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 6px;
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 11px;
    cursor: pointer;
    border-radius: var(--admin-radius);
    min-height: 48px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}
.admin-bottom-nav-item:hover,
.admin-bottom-nav-item:active {
    color: var(--admin-text);
    background: rgba(148, 163, 184, 0.08);
}
.admin-bottom-nav-item--active {
    color: var(--admin-accent);
    font-weight: 600;
}

.admin-bottom-nav-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: currentColor;
    opacity: 0.9;
}

.admin-more-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 24;
}

.admin-more-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--admin-bg-elevated);
    border-radius: 16px 16px 0 0;
    z-index: 25;
    padding: 12px 16px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    max-height: 70vh;
    overflow: auto;
}

.admin-more-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--admin-border);
    border-radius: 2px;
    margin: 0 auto 16px;
}

.admin-more-sheet-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--admin-text);
    margin: 0 0 12px;
}

.admin-more-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 14px 0;
    border: none;
    background: none;
    color: var(--admin-text);
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    border-radius: var(--admin-radius);
    -webkit-tap-highlight-color: transparent;
}
.admin-more-sheet-item:active {
    background: rgba(148, 163, 184, 0.1);
}

.admin-more-sheet-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--admin-text-muted);
    opacity: 0.6;
}

/* Период (быстрые фильтры) */
.admin-period-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-period-chip {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--admin-border);
    background: var(--admin-bg-elevated);
    color: var(--admin-text-muted);
    font-size: 13px;
    cursor: pointer;
}

.admin-period-chip--active {
    background: var(--admin-accent);
    color: #fff;
    border-color: var(--admin-accent);
}

.admin-period-chip--custom {
    border-style: dashed;
}

/* Таблица: массовые действия (sticky bar) */
.admin-table-bulk-bar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--admin-accent);
    color: #fff;
    font-size: 14px;
    border-radius: var(--admin-radius);
    margin-bottom: 12px;
}

.admin-table-bulk-bar-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Skeleton таблицы */
.admin-table-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-table-skeleton-row {
    height: 48px;
    border-radius: var(--admin-radius);
    background: linear-gradient(90deg, var(--admin-border) 25%, var(--admin-bg-elevated) 50%, var(--admin-border) 75%);
    background-size: 200% 100%;
    animation: admin-shimmer 1s infinite;
}

/* Пустое состояние таблицы */
.admin-table-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--admin-text-muted);
    font-size: 15px;
}

.admin-table-empty-title {
    font-weight: 600;
    color: var(--admin-text);
    margin-bottom: 8px;
}

.admin-table-wrap {
    overflow-x: auto;
    border-radius: var(--admin-radius);
    border: 1px solid var(--admin-border);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.admin-table-th {
    text-align: left;
    padding: 12px 14px;
    font-weight: 600;
    color: var(--admin-text-muted);
    background: var(--admin-bg-elevated);
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

.admin-table-th--check {
    width: 44px;
}

.admin-table-th--actions {
    width: 44px;
}

.admin-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--admin-border);
    color: var(--admin-text);
}

.admin-table tbody tr:hover {
    background: var(--admin-bg);
}

.admin-table-empty-row td {
    border-bottom: none;
}

.admin-table-empty-row--hidden {
    display: none;
}

.admin-table-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
}

.admin-table-status--pending {
    background: rgba(234, 179, 8, 0.2);
    color: #a16207;
}

.admin-table-status--completed {
    background: rgba(34, 197, 94, 0.2);
    color: #15803d;
}

.admin-table-action {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--admin-text-muted);
    font-size: 18px;
    cursor: pointer;
    border-radius: var(--admin-radius);
}

/* Filter drawer */
.admin-filter-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 100%;
    height: 100%;
    background: var(--admin-bg-elevated);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
    z-index: 30;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.admin-filter-drawer[aria-hidden="false"] {
    transform: translateX(0);
}

.admin-filter-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--admin-border);
}

.admin-filter-drawer-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--admin-text);
}

.admin-filter-drawer-close {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    font-size: 24px;
    color: var(--admin-text-muted);
    cursor: pointer;
    border-radius: var(--admin-radius);
}

.admin-filter-drawer-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: auto;
}

.admin-filter-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--admin-text);
}

.admin-filter-select,
.admin-filter-input {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--admin-radius);
    border: 1px solid var(--admin-border);
    background: var(--admin-bg);
    color: var(--admin-text);
    font-size: 14px;
}

.admin-filter-drawer-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.admin-filter-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 28;
}

/* Брейкпоинты: 0-599 (mobile), 600-1023 (tablet) */
@media (max-width: 599px) {
    .admin-search-overlay-inner {
        padding-top: 24px;
    }

    .admin-period-filters {
        display: none;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .admin-bottom-nav {
        display: flex !important;
    }

    .admin-content {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

.admin-dashboard-container .admin-dashboard-cards {
    margin-top: 4px;
}

.admin-dashboard-card {
    background: #020617;
    border: 1px solid rgba(51, 65, 85, 0.9);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.9);
    min-width: 0;
}

.app-main:has(#admin-dashboard.active) .admin-dashboard-card {
    background: #020617;
    border-color: rgba(51, 65, 85, 0.9);
}

.admin-dashboard-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(20, 184, 166, 0.15);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.08) 0%, transparent 100%);
    min-width: 0;
}

.app-main:has(#admin-dashboard.active) .admin-dashboard-card-title {
    color: #f1f5f9;
}

.app-main:has(#admin-dashboard.active) .admin-dashboard-card-desc {
    color: #94a3b8;
}

.app-main:has(#admin-dashboard.active) .admin-dashboard-card-body {
    color: #cbd5e1;
}

.app-main:has(#admin-dashboard.active) .setting-frame-label,
.app-main:has(#admin-dashboard.active) .vip-role-block__title {
    color: #e2e8f0;
}

.app-main:has(#admin-dashboard.active) .vip-role-block__meta,
.app-main:has(#admin-dashboard.active) .admin-dashboard-settings-hint {
    color: #94a3b8;
}

.admin-dashboard-card-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background-color: var(--gold);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.admin-dashboard-card-icon--operators {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

.admin-dashboard-card-icon--admins {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.admin-dashboard-card-icon--processors {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M6 8h.01M10 8h.01M14 8h.01M18 8h.01M8 12h.01M12 12h.01M16 12h.01'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M6 8h.01M10 8h.01M14 8h.01M18 8h.01M8 12h.01M12 12h.01M16 12h.01'/%3E%3C/svg%3E");
}

.admin-dashboard-card-icon--moderators {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

.admin-dashboard-card-icon--settings {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09a1.65 1.65 0 0 0-1.51-1 1.65 1.65 0 0 0-1.51 1v.09a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09a1.65 1.65 0 0 0-1.51-1 1.65 1.65 0 0 0-1.51 1V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09a1.65 1.65 0 0 0 1-1.51 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09a1.65 1.65 0 0 0-1.51-1 1.65 1.65 0 0 0-1.51 1v.09a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09a1.65 1.65 0 0 0-1.51-1 1.65 1.65 0 0 0-1.51 1V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09a1.65 1.65 0 0 0 1-1.51 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

.admin-dashboard-card-icon--search {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
}

.admin-dashboard-card-icon--broadcast {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
}
.admin-dashboard-card-icon--roulette {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.admin-broadcast-hint { margin-bottom: 1rem; color: var(--muted); font-size: 0.9rem; }
.admin-broadcast-textarea { resize: vertical; min-height: 100px; }
.admin-broadcast-file { margin-top: 0.25rem; }
.admin-broadcast-result { margin-top: 1rem; }

/* Управление рулеткой — модалка */
.vip-modal-card--roulette-admin .vip-modal-body { max-height: 85vh; overflow-y: auto; }
.admin-roulette-modal-body .admin-roulette-loading { padding: 1rem; text-align: center; color: var(--muted); }
.admin-roulette-empty { padding: 1rem; color: var(--muted); text-align: center; }
.admin-roulette-section { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.admin-roulette-section:last-child { border-bottom: none; }
.admin-roulette-section-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; }
.admin-roulette-toggle-wrap { display: flex; align-items: center; gap: 8px; }
.admin-roulette-toggle-wrap input { width: auto; }
.admin-roulette-participants-list { list-style: none; margin: 0 0 0.5rem; padding: 0; max-height: 160px; overflow-y: auto; }
.admin-roulette-participants-list li { padding: 4px 0; font-size: 0.9rem; }
.admin-roulette-prob-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.admin-roulette-prob-row label { min-width: 120px; font-size: 0.9rem; }
.admin-roulette-place-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.admin-roulette-place-label { min-width: 70px; font-size: 0.9rem; }
.admin-roulette-place-type { min-width: 160px; }
.admin-roulette-input-num { width: 70px; }
.admin-roulette-add-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.admin-roulette-add-row .input-text { flex: 1; min-width: 80px; }
.admin-roulette-items-list { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 120px; overflow-y: auto; }
.admin-roulette-items-list li { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 0.9rem; }
.admin-roulette-items-list .btn-small { padding: 4px 10px; font-size: 12px; }
.admin-roulette-more { color: var(--muted); }
.admin-roulette-history-list { list-style: none; margin: 0; padding: 0; max-height: 140px; overflow-y: auto; font-size: 0.85rem; }
.admin-roulette-history-list li { padding: 4px 0; border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.06)); }
.admin-roulette-empty-row { color: var(--muted); }
.admin-roulette-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-roulette-actions .btn { flex: 1; min-width: 140px; }

/* Статус в списке ролей (вкл/выкл) без эмодзи */
.vip-role-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vip-role-status--on {
    background: var(--success);
}

.vip-role-status--off {
    background: var(--text-muted);
}

.vip-add-block-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    background-color: var(--gold);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.btn-stats-icon,
.btn-list-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.btn-stats-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
}

.btn-list-icon {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

.proc-btn-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.proc-btn-icon--wallet {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M6 8h.01M10 8h.01M14 8h.01M18 8h.01'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M6 8h.01M10 8h.01M14 8h.01M18 8h.01'/%3E%3C/svg%3E");
}

.proc-btn-icon--plus {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

.processor-profile-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background-color: var(--gold);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.processor-profile-icon--doc {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E");
}

.processor-profile-stat-icon,
.processor-profile-btn-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.processor-profile-stat-icon--wallet,
.processor-profile-btn-icon--wallet {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M6 8h.01M10 8h.01M14 8h.01M18 8h.01'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M6 8h.01M10 8h.01M14 8h.01M18 8h.01'/%3E%3C/svg%3E");
}

.processor-profile-stat-icon--doc,
.processor-profile-btn-icon--list {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

.admin-dashboard-card-titles {
    min-width: 0;
    overflow: hidden;
}

.admin-dashboard-card-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 2px 0;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-dashboard-card-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

.admin-dashboard-card-body {
    padding: 12px 14px 14px;
    font-size: 13px;
    color: var(--text);
    min-width: 0;
}

/* Подсказки по username (автокомплит) */
.admin-username-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    background: rgba(10, 10, 10, 0.98);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}

.admin-username-suggest-item {
    padding: 6px 10px;
    font-size: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-primary, #fff);
}

.admin-username-suggest-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.admin-username-suggest-name {
    font-weight: 500;
}

.admin-username-suggest-id {
    font-size: 12px;
    color: var(--text-muted, #9ca3af);
}

.admin-dashboard-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-dashboard-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--admin-border, var(--border));
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.admin-dashboard-list li:last-child {
    border-bottom: none;
}

.admin-dashboard-list-sub {
    flex-shrink: 0;
    font-size: 12px;
}

.admin-dashboard-list-more {
    color: var(--text-muted);
    font-style: italic;
}

.admin-dashboard-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.admin-dashboard-settings-list {
    margin-bottom: 12px;
}

.admin-dashboard-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.admin-dashboard-setting-row:last-child {
    border-bottom: none;
}

.admin-payment-method-markups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-pm-markup-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-pm-markup-label {
    min-width: 140px;
    font-size: 13px;
    color: var(--text);
}

.admin-pm-markup-input {
    width: 72px;
    text-align: right;
}

.admin-dashboard-setting-label {
    color: var(--text-muted);
    font-weight: 500;
}

.admin-coupon-type-row {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}

.admin-coupon-type-btn {
    flex: 1;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    border: 1px solid var(--border-color, rgba(255,255,255,0.15));
    background: var(--card-bg, rgba(255,255,255,0.06));
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.admin-coupon-type-btn:hover {
    border-color: rgba(255,255,255,0.25);
    color: var(--text-primary, #fff);
}

.admin-coupon-type-btn.active {
    border-color: var(--accent-gold, #c9a227);
    background: rgba(201, 162, 39, 0.15);
    color: var(--accent-gold, #c9a227);
}

.admin-dashboard-setting-value {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-dashboard-settings-hint {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

/* Кнопка «Панель оператора» в шапке */
.admin-operator-link-topbar {
    margin-right: 8px;
}
.admin-topbar-operator-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--admin-radius, 12px);
    border: 1px solid var(--admin-accent, #3b82f6);
    background: rgba(59, 130, 246, 0.15);
    color: var(--admin-accent, #3b82f6);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-topbar-operator-btn:hover,
.admin-topbar-operator-btn:active {
    background: rgba(59, 130, 246, 0.25);
    border-color: var(--admin-accent-hover, #60a5fa);
}
.admin-topbar-operator-btn-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: currentColor;
    opacity: 0.9;
}
.admin-topbar-operator-btn-label {
    white-space: nowrap;
}
@media (max-width: 560px) {
    .admin-topbar-operator-btn-label {
        display: none;
    }
    .admin-topbar-operator-btn {
        padding: 10px;
    }
}

.admin-dashboard-operator-link {
    margin-top: 20px;
}

/* --- VIP-оформление: карточки ролей и блок добавления --- */
.vip-card {
    border: 1px solid rgba(20, 184, 166, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(20, 184, 166, 0.05);
}

.vip-card__head {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(20, 184, 166, 0.03) 100%);
    border-bottom: 1px solid rgba(20, 184, 166, 0.12);
    padding: 12px 14px;
}

.vip-card__body {
    padding: 12px 14px 14px;
}

.vip-role-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vip-role-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 0;
    flex-wrap: wrap;
}

.vip-role-block:hover {
    border-color: rgba(20, 184, 166, 0.25);
    box-shadow: 0 2px 12px rgba(20, 184, 166, 0.08);
}

.vip-role-block__main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.vip-role-block__badge {
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
}

.vip-role-block__info {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vip-role-block__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vip-role-block__meta {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vip-role-block__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.vip-role-btn {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    border: 1px solid transparent;
    white-space: nowrap;
}

.vip-role-btn--info {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.3);
    color: var(--gold-light);
}

.vip-role-btn--info:hover {
    background: rgba(20, 184, 166, 0.2);
    border-color: var(--gold);
}

.vip-role-btn--remove {
    background: rgba(200, 70, 70, 0.1);
    border-color: rgba(200, 70, 70, 0.25);
    color: #e08080;
}

.vip-role-btn--remove:hover {
    background: rgba(200, 70, 70, 0.2);
    border-color: rgba(200, 70, 70, 0.5);
}

.vip-role-empty {
    text-align: center;
    padding: 14px 12px;
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(20, 184, 166, 0.04);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

/* Блок добавления — раскрывается по клику */
.vip-add-block {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(20, 184, 166, 0.06);
    border: 1px dashed rgba(20, 184, 166, 0.3);
    border-radius: var(--radius-sm);
    min-width: 0;
}

.vip-add-block__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
}
.vip-add-block__trigger:hover {
    color: var(--text);
}

.vip-add-block__body {
    display: none;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px dashed rgba(20, 184, 166, 0.25);
}
.vip-add-block.is-expanded .vip-add-block__body {
    display: flex;
}

.vip-add-block__input {
    flex: 1;
    min-width: 100px;
    max-width: 160px;
}

.vip-add-block__btn {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
}

.vip-add-block__cancel {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 12px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
}
.vip-add-block__cancel:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

/* Модальное окно «Подробнее» */
.vip-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: vipModalFadeIn 0.2s ease-out;
}

@keyframes vipModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.vip-modal-card {
    background: var(--bg-card);
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border);
    max-width: 340px;
    width: 100%;
    overflow: hidden;
    animation: vipModalSlideIn 0.25s ease-out;
}

@keyframes vipModalSlideIn {
    from { opacity: 0; transform: scale(0.96) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.vip-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, transparent 100%);
}

.vip-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: 0.02em;
}

.vip-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.vip-modal-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
}

.vip-modal-body {
    padding: 18px 20px;
}

.vip-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.vip-modal-row:last-child {
    border-bottom: none;
}

.vip-modal-label {
    color: var(--text-muted);
    font-weight: 500;
}

.vip-modal-value {
    color: var(--text);
    font-weight: 600;
    text-align: right;
}

.vip-modal-value--gold {
    color: var(--gold);
}

/* Профиль процессора: карточка и анимации */
.processor-profile-overlay {
    animation: vipModalFadeIn 0.25s ease-out;
}

.processor-profile-card {
    background: var(--bg-card);
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: var(--radius);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border);
    max-width: 380px;
    width: 100%;
    overflow: hidden;
    animation: processorProfileSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes processorProfileSlideIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.processor-profile-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12) 0%, transparent 100%);
}

.processor-profile-icon {
    font-size: 1.25rem;
    opacity: 0.9;
}

.processor-profile-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: 0.02em;
}

.processor-profile-close {
    flex-shrink: 0;
}

.processor-profile-body {
    padding: 18px 20px;
    min-height: 120px;
}

.processor-profile-loading {
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
    padding: 24px 0;
}

.processor-profile-content {
    animation: processorContentFadeIn 0.3s ease-out 0.1s both;
}

@keyframes processorContentFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Профиль пользователя (админка) */
.user-profile-card .processor-profile-body {
    max-height: 85vh;
    overflow-y: auto;
}
.user-profile-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.user-profile-section {
    padding: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.user-profile-section-title {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.user-profile-balance-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.user-profile-balance-row .user-profile-balance-label {
    color: var(--text-muted);
    min-width: 100px;
}
.user-profile-balance-row .user-profile-balance-value {
    font-weight: 700;
    color: var(--gold, #eab308);
}
.user-profile-coupons-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.user-profile-tab {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.user-profile-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}
.user-profile-tab--active {
    background: rgba(201, 162, 39, 0.2);
    border-color: var(--accent-gold, #c9a227);
    color: var(--text);
}
.user-profile-coupons-panel {
    display: none;
}
.user-profile-coupons-panel--active {
    display: block;
}
.user-profile-coupons-panel .admin-user-coupons-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.user-profile-coupons-panel .admin-user-coupon-item {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.user-profile-coupon-checkbox {
    display: none;
    margin-right: 10px;
    vertical-align: middle;
}
.user-profile-section--coupons.user-profile-coupons-delete-mode .user-profile-coupon-checkbox {
    display: inline-block;
}
.user-profile-coupons-footer {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.user-profile-coupons-delete-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.user-profile-coupons-delete-bar #user-profile-coupons-delete-count {
    font-size: 13px;
    color: var(--text-muted);
}
.user-profile-actions {
    margin-top: 8px;
}
.admin-profile-orders-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
.admin-profile-orders-list li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.admin-profile-order-id {
    font-family: ui-monospace, monospace;
    margin-right: 8px;
}
.admin-btn-open-profile {
    margin-top: 12px;
}
.admin-search-user-profile-head {
    margin-bottom: 12px;
}

.processor-profile-info-list {
    list-style: none;
    margin: 0 0 16px 0;
    padding: 0;
    font-size: 13px;
}

.processor-profile-info-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.processor-profile-info-list li:last-of-type {
    border-bottom: none;
}

.processor-profile-info-list .label {
    color: var(--text-muted);
    font-weight: 500;
}

.processor-profile-info-list .value {
    font-weight: 600;
    text-align: right;
}

.processor-profile-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

.processor-profile-status-dot.active {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.processor-profile-status-dot.inactive {
    background: var(--text-muted);
}

.processor-profile-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}

.processor-profile-stat-block {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}

.processor-profile-stat-block:hover {
    border-color: rgba(20, 184, 166, 0.3);
    transform: translateY(-1px);
}

.processor-profile-stat-block .icon {
    font-size: 1.1rem;
    display: block;
    margin-bottom: 6px;
    opacity: 0.9;
}

.processor-profile-stat-block .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.processor-profile-stat-block .value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.processor-profile-stat-block .value--gold {
    color: var(--gold);
}

.processor-profile-stat-block--btn {
    cursor: pointer;
    width: 100%;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.processor-profile-stat-block--btn:focus {
    outline: none;
    border-color: rgba(20, 184, 166, 0.5);
}
.processor-profile-stat-block--btn[aria-expanded="true"] {
    border-color: rgba(20, 184, 166, 0.4);
    background: rgba(20, 184, 166, 0.08);
}

.processor-profile-requisites-dropdown {
    display: none;
    margin-top: 10px;
}
.processor-profile-requisites-dropdown--open {
    display: block;
}
.processor-profile-requisites-empty {
    margin-top: 10px;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
}

.processor-profile-requisites-block {
    margin-top: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.processor-profile-requisites-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.processor-profile-requisites-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.processor-profile-requisite-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
}

.processor-profile-requisite-item:last-child {
    border-bottom: none;
}

.processor-profile-requisite-item--inactive {
    opacity: 0.6;
}

.processor-profile-requisite-name {
    color: var(--text);
    font-weight: 500;
}

.processor-profile-requisite-category {
    color: var(--text-muted);
    font-size: 12px;
}

.processor-profile-requisite-sum {
    color: var(--gold);
    font-weight: 600;
    white-space: nowrap;
}

.processor-profile-percent-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 12px;
    margin-bottom: 0;
    line-height: 1.4;
}

.processor-profile-actions-prompt {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.processor-profile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.processor-profile-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.processor-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s;
    border: 1px solid transparent;
}

.processor-profile-btn:active {
    transform: scale(0.98);
}

.processor-profile-btn--primary {
    background: linear-gradient(135deg, var(--gold) 0%, #0d9488 100%);
    color: #0a0f0e;
    border-color: var(--gold);
}

.processor-profile-btn--primary:hover {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    color: #0a0f0e;
}

.processor-profile-btn--secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text);
    border-color: var(--border);
}

.processor-profile-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(20, 184, 166, 0.25);
}

.processor-profile-btn--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

.processor-profile-btn--danger:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
}

.processor-profile-btn--full {
    grid-column: 1 / -1;
}

.processor-amount-card .vip-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.processor-amount-card .input-text {
    margin: 0;
}

.processor-orders-card {
    max-width: 400px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.processor-orders-card .vip-modal-body {
    overflow-y: auto;
    max-height: 60vh;
}

/* Подтверждения оплаты процессором — премиум */
.processor-confirmations-overlay .processor-confirmations-card {
    max-width: 420px;
    width: 100%;
    background: linear-gradient(165deg, #1a1f26 0%, #242b33 100%);
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.processor-confirmations-header {
    border-bottom-color: rgba(20, 184, 166, 0.25);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.12) 0%, transparent 100%);
}

.processor-confirmations-header .vip-modal-title {
    color: #f1f5f9;
}

.processor-confirmations-body {
    max-height: 65vh;
    overflow-y: auto;
    padding: 16px 20px;
}

.processor-confirmation-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}

.processor-confirmation-item:last-child {
    margin-bottom: 0;
}

.processor-confirmation-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.processor-confirmation-deal {
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.02em;
}

.processor-confirmation-amount {
    font-weight: 700;
    color: #f1f5f9;
    font-size: 1.05rem;
}

.processor-confirmation-reqs {
    font-size: 13px;
    color: #cbd5e1;
    margin-bottom: 10px;
    padding: 10px 0;
    border-top: 1px solid rgba(20, 184, 166, 0.15);
    border-bottom: 1px solid rgba(20, 184, 166, 0.15);
}

.processor-confirm-req-name {
    font-weight: 600;
    color: #e2e8f0;
}

.processor-confirm-req-data {
    margin-top: 4px;
    word-break: break-all;
    color: #94a3b8;
}

.processor-confirm-req-fio {
    margin-top: 4px;
    color: #94a3b8;
}

.processor-confirmation-screenshot-hint {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 12px 0;
}

.processor-confirmation-btn {
    width: 100%;
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 600;
}

.proc-confirmations-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.proc-confirmations-count {
    font-weight: 700;
    color: var(--gold);
}

.proc-confirmations-sep {
    color: var(--text-muted);
}

.processor-confirmations-empty,
.processor-confirmations-loading,
.processor-confirmations-error {
    text-align: center;
    padding: 24px 20px;
    color: #94a3b8;
    font-size: 14px;
}

.proc-deals-btn {
    margin-bottom: 12px;
}

.processor-deal-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 10px;
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(20, 184, 166, 0.2);
    border-radius: 14px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.processor-deal-row:hover {
    background: rgba(20, 184, 166, 0.08);
    border-color: rgba(20, 184, 166, 0.4);
}
.proc-deal-id {
    font-weight: 700;
    color: var(--gold, #eab308);
}
.proc-deal-meta {
    color: var(--text-muted);
}
.proc-deal-proof-badge {
    font-size: 12px;
    color: var(--accent);
    margin-left: auto;
}

.processor-deal-detail {
    padding: 0 4px;
}
.btn-back-inline {
    margin-bottom: 16px;
    padding: 8px 0;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 14px;
    cursor: pointer;
}
.proc-deal-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.proc-deal-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}
.proc-deal-detail-label {
    color: var(--text-muted);
    font-size: 13px;
}
.proc-deal-detail-value {
    font-weight: 600;
}
.proc-deal-status--completed { color: var(--success); }
.proc-deal-status--active { color: var(--accent); }
.proc-deal-proof-block {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.proc-deal-proof-label {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--text-muted);
}
.proc-deal-proof-img {
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #0f1419;
}

.processor-order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.processor-order-item:last-child {
    border-bottom: none;
}

.processor-order-item .meta {
    color: var(--text-muted);
    font-size: 12px;
}

.processor-order-item .amount {
    font-weight: 600;
    color: var(--gold);
}

.processor-orders-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 24px 16px;
    font-size: 14px;
}

/* Очередь заявок оператора и управление заявкой */
.operator-queue-overlay {
    animation: vipModalFadeIn 0.2s ease-out;
}
.operator-queue-card,
.operator-order-manage-card,
.operator-requisites-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    max-width: 400px;
    width: 100%;
    overflow: hidden;
    animation: vipModalSlideIn 0.25s ease-out;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.operator-queue-header,
.operator-order-manage-header,
.operator-requisites-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, transparent 100%);
}
.operator-queue-title,
.operator-order-manage-title,
.operator-requisites-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.operator-queue-list {
    padding: 12px 16px;
    overflow-y: auto;
    max-height: 55vh;
}
.operator-queue-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.2s, background 0.2s;
}
.operator-queue-item:hover {
    border-color: rgba(20, 184, 166, 0.3);
    background: rgba(20, 184, 166, 0.04);
}
.operator-queue-item:last-child { margin-bottom: 0; }
.operator-queue-item-meta {
    flex: 1;
    min-width: 0;
}
.operator-queue-item-id {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}
.operator-queue-item-details {
    font-size: 12px;
    color: var(--text-muted);
}
.operator-queue-item-btn {
    flex-shrink: 0;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--gold) 0%, #0d9488 100%);
    color: #0a0f0e;
    transition: opacity 0.2s, transform 0.15s;
}
.operator-queue-item-btn:hover { opacity: 0.95; }
.operator-queue-item-btn:active { transform: scale(0.98); }
.operator-queue-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px 16px;
    font-size: 14px;
}
.operator-order-manage-body {
    padding: 16px 20px;
    overflow-y: auto;
    max-height: 45vh;
    font-size: 13px;
}
.operator-order-manage-body .operator-detail-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.operator-order-manage-body .operator-detail-row:last-child { border-bottom: none; }
.operator-order-chat-wrap { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.operator-order-chat-scroll {
    max-height: 180px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.operator-chat-bubble {
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
}
.operator-chat-bubble--user {
    align-self: flex-start;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.25);
}
.operator-chat-bubble--op {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
}
.operator-chat-bubble-meta { display: block; font-size: 10px; opacity: 0.65; margin-bottom: 4px; }
.operator-chat-bubble-text { white-space: pre-wrap; word-break: break-word; }
.operator-chat-input {
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
    color: inherit;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 44px;
}
.operator-order-manage-actions {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.operator-order-manage-actions .btn { flex: 1; min-width: 120px; }
.operator-requisites-list {
    padding: 12px 16px;
    overflow-y: auto;
    max-height: 55vh;
}
.operator-req-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.operator-req-option:hover {
    border-color: rgba(20, 184, 166, 0.4);
    background: rgba(20, 184, 166, 0.06);
}
.operator-req-option:last-child { margin-bottom: 0; }
.operator-req-option-name { font-weight: 600; }
.operator-req-option-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.operator-complete-hint {
    margin: 0 16px 14px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
}
.operator-complete-input {
    margin: 0 16px 16px;
    width: calc(100% - 32px);
    box-sizing: border-box;
}
.operator-complete-actions {
    display: flex;
    gap: 10px;
    padding: 0 16px 16px;
}
.operator-complete-actions .btn { flex: 1; }

/* Управление: формы и кнопки */
.admin-dashboard-setting-block {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.admin-dashboard-setting-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.admin-dashboard-setting-row-inline {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.admin-dashboard-setting-row-inline .input-text {
    flex: 1;
    min-width: 120px;
}

.admin-dashboard-input-small {
    width: 80px;
    flex: 0 0 auto;
}

.admin-dashboard-cryptos-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 10px 0 14px;
}

.admin-dashboard-crypto-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.admin-dashboard-crypto-input {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
}

.admin-dashboard-btn-clear {
    margin-top: 10px;
}

/* Список с кнопкой удаления */
.admin-dashboard-list-item-with-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.admin-dashboard-list-item-with-action:last-child {
    border-bottom: none;
}

.admin-dashboard-list-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-dashboard-btn-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(220, 80, 80, 0.15);
    color: #dc5050;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
}

.admin-dashboard-btn-remove:hover {
    background: rgba(220, 80, 80, 0.25);
    border-color: rgba(220, 80, 80, 0.5);
}

/* Форма добавления (ID + кнопка) */
.admin-dashboard-add-form {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.admin-dashboard-input-id {
    flex: 1;
    min-width: 0;
    max-width: 160px;
}

.admin-dashboard-btn-add {
    flex-shrink: 0;
}

.admin-orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-order-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    transition: border-color 0.2s ease;
}

.app-main:has(#admin-panel.active) .admin-order-item {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(20, 184, 166, 0.2);
}

.app-main:has(#admin-panel.active) .admin-order-id {
    color: #e2e8f0;
}

.admin-order-item:hover {
    border-color: rgba(20, 184, 166, 0.25);
}
.admin-order-item--clickable {
    cursor: pointer;
}

.admin-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.admin-order-id {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.admin-order-status {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.admin-order-status--pending { color: var(--text-muted); }
.admin-order-status--processing { color: var(--gold); }
.admin-order-status--waiting-payment { color: #eab308; }
.admin-order-status--verification { color: var(--gold-light); }
.admin-order-status--completed { color: var(--success); }
.admin-order-status--cancelled { color: var(--danger); }

.admin-order-details {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.admin-loading,
.admin-empty {
    text-align: center;
    padding: 24px 16px;
    font-size: 14px;
    color: var(--text-muted);
}

.admin-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin-top: 20px;
}

.admin-info-text {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 0;
}

/* Панель процессера: кнопки и реквизиты */
.proc-toggle-btn {
    margin-bottom: 12px;
}

.proc-deposit-btn {
    display: block;
    text-align: center;
    text-decoration: none;
    margin-bottom: 20px;
}

.proc-requisites-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.proc-req-empty {
    text-align: center;
    padding: 20px 16px;
    font-size: 14px;
    color: var(--text-muted);
}

.proc-req-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    transition: border-color 0.2s ease;
}

.proc-req-card--inactive {
    opacity: 0.75;
    border-color: rgba(139, 165, 162, 0.2);
}

.proc-req-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.proc-req-card-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
}

.proc-req-card-status {
    font-size: 14px;
}

.proc-req-card-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.proc-req-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.proc-req-card-fio {
    font-size: 13px;
    color: var(--text-muted);
    margin-right: 4px;
}

.proc-req-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.proc-req-btn--toggle:hover {
    border-color: var(--gold);
    background: rgba(20, 184, 166, 0.08);
}

.proc-add-req-btn {
    margin-bottom: 20px;
}

.proc-form-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 18px;
    margin-bottom: 20px;
}

.proc-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.proc-form-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.proc-form-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, color 0.2s;
}

.proc-form-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text);
}

/* Отдельное приложение для операторов */
.operator-app-container {
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 32px;
}

.operator-app-header {
    text-align: center;
    padding: 20px 16px 24px;
    margin-bottom: 20px;
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.08) 0%, transparent 60%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.operator-app-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--text);
    margin-bottom: 8px;
}

.app-main:has(#operator-app.active) .operator-app-title {
    color: #f1f5f9;
}

.app-main:has(#operator-app.active) .operator-app-subtitle {
    color: #94a3b8;
}

.operator-app-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.operator-app-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}

.operator-app-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px 16px;
    text-align: center;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}

.operator-app-stat-value {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.operator-app-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.operator-app-toggle {
    margin-bottom: 24px;
}

.operator-app-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 14px;
}

.operator-app-divider::before,
.operator-app-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.operator-app-divider-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.operator-app-orders {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.operator-app-order-card {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 44px 16px 18px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.operator-app-order-card:hover {
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.operator-app-order-card:active {
    transform: scale(0.99);
}

.operator-app-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.operator-app-order-id {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.operator-app-order-status {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 8px;
}

.operator-app-order-status--pending { color: var(--text-muted); }
.operator-app-order-status--processing { color: var(--gold); }
.operator-app-order-status--waiting-payment { color: #eab308; }
.operator-app-order-status--verification { color: var(--gold-light); }
.operator-app-order-status--completed { color: var(--success); }
.operator-app-order-status--cancelled { color: var(--danger); }

.operator-app-order-meta {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 4px;
}

.operator-app-order-date {
    font-size: 12px;
    color: var(--text-muted);
}

.operator-app-order-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-muted);
    opacity: 0.8;
}

.operator-app-loading,
.operator-app-empty {
    text-align: center;
    padding: 28px 20px;
    font-size: 14px;
    color: var(--text-muted);
}

/* Детальный просмотр заявки оператора */
.operator-detail-container {
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 32px;
}

.operator-detail-content {
    animation: fadeIn 0.25s ease-out;
}

.operator-detail-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text);
    margin-bottom: 12px;
}

.operator-detail-status-wrap {
    margin-bottom: 22px;
}

.operator-detail-status {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
}

.operator-detail-status--pending { background: rgba(139, 165, 162, 0.2); color: var(--text-muted); }
.operator-detail-status--processing { background: rgba(20, 184, 166, 0.2); color: var(--gold); }
.operator-detail-status--waiting-payment { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.operator-detail-status--verification { background: rgba(45, 212, 191, 0.2); color: var(--gold-light); }
.operator-detail-status--completed { background: rgba(34, 197, 94, 0.2); color: var(--success); }
.operator-detail-status--cancelled { background: rgba(239, 68, 68, 0.2); color: var(--danger); }

.operator-detail-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.operator-detail-block-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

.operator-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 14px;
}

.operator-detail-row:last-child {
    margin-bottom: 0;
}

.operator-detail-row--full {
    flex-direction: column;
    gap: 6px;
}

.operator-detail-label {
    color: var(--text-muted);
    flex-shrink: 0;
}

.operator-detail-value {
    color: var(--text);
    text-align: right;
    word-break: break-word;
}

.operator-detail-value--gold {
    color: var(--gold);
    font-weight: 700;
}

.operator-detail-value--mono {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    word-break: break-all;
}

/* ——— Профиль: премиум-оформление ——— */
.profile-screen.screen {
    background: var(--bg);
    min-height: 100%;
}

.profile-page {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 16px 32px;
}

.profile-back-wrap {
    margin-bottom: 20px;
}

/* Кнопка «Назад» внутри блока с именем профиля — слева сверху */
.profile-back-wrap--in-hero {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    margin: 0;
}

.profile-back-wrap--in-hero .profile-back-btn {
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--bg-card-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.profile-back-wrap--in-hero .profile-back-btn:hover,
.profile-back-wrap--in-hero .profile-back-btn:focus-visible {
    color: var(--text);
    border-color: rgba(22, 163, 74, 0.25);
}
[data-theme="dark"] .profile-back-wrap--in-hero .profile-back-btn:hover,
[data-theme="dark"] .profile-back-wrap--in-hero .profile-back-btn:focus-visible {
    border-color: rgba(46, 187, 92, 0.3);
}

.profile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
}

.profile-back-btn:hover,
.profile-back-btn:focus-visible {
    color: var(--text);
}

.profile-back-arrow {
    font-size: 1.25rem;
    line-height: 1;
}

/* Герой: аватар + имя + username */
.profile-hero {
    position: relative;
    text-align: center;
    padding: 32px 24px 40px;
    margin: 0 -16px 24px;
    border-radius: 24px;
    overflow: hidden;
}

.profile-hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, #f0fdf4 0%, #dcfce7 40%, #bbf7d0 100%);
    opacity: 0.95;
}

.profile-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(22, 163, 74, 0.12) 0%, transparent 55%);
}

.profile-hero-content {
    position: relative;
    z-index: 1;
}

.profile-hero .profile-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: linear-gradient(145deg, #6b7280 0%, #4b5563 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(75, 85, 99, 0.3);
    overflow: hidden;
}

.profile-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.profile-avatar-letter {
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.profile-display-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text);
    margin: 0 0 4px;
    line-height: 1.25;
}

.profile-username {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.01em;
}

/* Ряд карточек: реферальная ссылка, бонус, сумма обменов */
.profile-wallet-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    margin-bottom: 20px;
    background: linear-gradient(145deg, var(--bg-card) 0%, rgba(255, 255, 255, 0.03) 100%);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm), 0 0 0 1px rgba(255, 184, 0, 0.08);
}

.profile-wallet-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.2) 0%, rgba(255, 184, 0, 0.06) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.profile-wallet-body {
    flex: 1;
    min-width: 0;
}

.profile-wallet-label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
}

.profile-wallet-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.profile-wallet-hint {
    font-size: 12px;
    color: var(--muted);
    margin: 8px 0 0;
}

.profile-wallet-deposit {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 12px;
}

.profile-balance-input {
    flex: 1;
    min-width: 120px;
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text);
}

.profile-balance-deposit-btn {
    padding: 10px 16px;
    font-size: 14px;
    white-space: nowrap;
}

.profile-stats-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.profile-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--text);
    transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

a.profile-stat-card:hover,
a.profile-stat-card:focus-visible {
    box-shadow: var(--shadow-card);
    border-color: rgba(22, 163, 74, 0.2);
}

.profile-stat-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background-size: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.profile-stat-icon--link {
    background-color: rgba(22, 163, 74, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}

.profile-stat-icon--star {
    background-color: rgba(22, 163, 74, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

.profile-stat-icon--chart {
    background-color: rgba(22, 163, 74, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E");
}

.profile-stat-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.profile-stat-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.profile-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.02em;
}

.profile-stat-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.profile-stat-arrow {
    font-size: 1.25rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* Блоки: последние сделки, рефералы */
.profile-block {
    margin-bottom: 28px;
}

.profile-block-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}

/* Рефералы: карточка с табами */
.profile-block .profile-tabs {
    margin-top: 4px;
}

.profile-block .profile-tab-content {
    margin-top: 12px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-sm);
}

.profile-block-badge {
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.02em;
}

.profile-block:first-of-type .recent-deals-list {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

/* Табы Рефералы */
.profile-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.profile-tab {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--border-soft);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.profile-tab--active {
    background: var(--bg-card);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.profile-tab-content--hidden {
    display: none;
}

.referral-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
}

.referral-list-item {
    padding: 12px 14px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text);
}

.referral-list-empty {
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Действия — аккуратные кнопки */
.profile-actions-block {
    padding: 20px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.profile-actions-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.profile-actions-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.profile-actions-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

.profile-actions-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-action-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.25s var(--ease-out-smooth), transform 0.2s var(--ease-out-smooth);
    text-align: left;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

.profile-action-card:active {
    transform: scale(0.97);
}

.profile-action-card:hover {
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow: var(--shadow-card);
    transform: translateY(-1px);
}

.profile-action-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
}

.profile-action-text {
    flex: 1;
    min-width: 0;
}

.profile-action-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    display: block;
    margin-bottom: 2px;
}

.profile-action-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.35;
}

/* История последних успешных сделок (3) */
.recent-deals-block {
    padding: 22px 20px;
    background: linear-gradient(180deg, var(--bg-card) 0%, rgba(14, 22, 21, 0.98) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(20, 184, 166, 0.06);
    position: relative;
    overflow: hidden;
}

.recent-deals-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.5;
}

.recent-deals-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.recent-deals-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.recent-deals-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
}

.recent-deals-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recent-deal-item {
    display: block;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    text-align: left;
}

.recent-deal-item:hover {
    border-color: rgba(20, 184, 166, 0.35);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.recent-deal-item:active {
    transform: scale(0.99);
}

.recent-deal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.recent-deal-id {
    font-size: 13px;
    font-weight: 600;
    color: var(--gold);
}

.recent-deal-status {
    font-size: 11px;
    color: var(--text-muted);
}

.recent-deal-details {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
}

/* Пустое состояние и ошибка загрузки */
.recent-deals-empty {
    padding: 28px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

.recent-deals-empty-icon {
    display: inline-block;
    font-size: 28px;
    color: var(--gold);
    opacity: 0.8;
    margin-bottom: 12px;
    line-height: 1;
}

.recent-deals-empty--error .recent-deals-empty-icon {
    color: var(--text-muted);
}

.recent-deals-empty-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
    font-weight: 500;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.recent-deals-empty--error .recent-deals-empty-text {
    color: var(--text-muted);
    font-weight: 400;
}

/* Загрузка — оверлей поверх контента */
.loading-overlay {
    position: fixed;
    inset: 0;
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    background: var(--bg);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.loading-overlay.active {
    display: flex;
    opacity: 1;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.loading-overlay p {
    color: var(--text-muted);
    margin-top: 16px;
    font-size: 14px;
    letter-spacing: 0.02em;
}

.loader {
    width: 44px;
    height: 44px;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-right-color: rgba(20, 184, 166, 0.4);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Кнопки */
.btn {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: transform 0.2s var(--ease-out-smooth), opacity 0.15s, box-shadow 0.25s var(--ease-out-smooth);
    margin-top: 8px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.btn:active {
    transform: scale(0.97);
}

.btn-gold {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.2);
}

.btn-gold:hover {
    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.35);
    transform: translateY(-1px);
}
.btn-gold:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 4px rgba(var(--accent-rgb), 0.2);
}

/* Кнопка «Open»: белый фон, цветной текст, форма таблетки, лёгкая тень */
.btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    white-space: nowrap;
    transition: box-shadow 0.2s, transform 0.15s;
}

.btn-pill:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.btn-pill:active {
    transform: scale(0.98);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-danger-outline {
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
}

/* Формы */
.form-group {
    margin-bottom: 22px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.form-group input,
.form-group textarea,
.input-text {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    font-size: 16px;
    background: var(--bg-card);
    color: var(--text);
    font-family: var(--font-body);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.input-text:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-hint,
.form-group small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

/* Выпадающий список */
.select-wrap {
    position: relative;
    display: block;
}

.select-input {
    width: 100%;
    padding: 14px 44px 14px 18px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    font-size: 16px;
    background: var(--bg-card);
    color: var(--text);
    font-family: var(--font-body);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.select-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-muted);
    pointer-events: none;
}

.select-input:invalid,
.select-input[value=""] { color: var(--text-muted); }

.btn-block {
    width: 100%;
    margin-top: 8px;
    padding: 16px 20px;
}

.form-screen .btn-block {
    margin-bottom: 8px;
}


/* Карточка подтверждения заказа — светлая */
.order-summary-card {
    margin-bottom: 24px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    background: var(--bg-card);
}

.order-summary-card::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--accent);
    opacity: 0.5;
}

.order-summary-card-inner {
    padding: 20px 20px 24px;
}

.order-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.order-summary-crypto {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    letter-spacing: 0.02em;
}

.order-summary-amount {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--gold-light);
}

.order-summary-divider {
    height: 1px;
    background: linear-gradient(90deg, var(--border-soft), transparent);
    margin: 16px 0;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.order-summary-label {
    font-size: 14px;
    color: var(--text-muted);
}

.order-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.order-summary-row.order-summary-total {
    padding: 14px 0 4px;
    margin-top: 4px;
    border-top: 1px solid var(--border-soft);
}

.order-summary-total .order-summary-value {
    font-size: 1.15rem;
    color: var(--gold-light);
}

.order-summary-wallet {
    margin-top: 16px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid var(--border-soft);
}

.order-summary-wallet-label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.order-summary-wallet-addr {
    font-size: 12px;
    word-break: break-all;
    color: var(--text);
    line-height: 1.4;
}

.order-summary-row--coupon { color: var(--gold-light); }
.order-summary-coupon-btns { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.btn-coupon-apply { font-size: 13px; }

/* Страница «Мои купоны» */
.coupons-tabs-wrap {
    margin-bottom: 4px;
}
.coupons-tabs-wrap .user-profile-coupons-tabs {
    margin-bottom: 0;
}
.coupons-tab-count {
    opacity: 0.85;
    font-weight: 600;
}
.coupons-tab-empty {
    text-align: center;
    padding: 28px 16px 8px;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-size: 14px;
}
.coupons-list { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.coupon-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--border-soft);
    min-height: 140px;
    animation: cardSlideIn 0.4s var(--ease-out-smooth) both;
    transition: transform 0.2s var(--ease-out-smooth), box-shadow 0.2s;
}
.coupon-card:nth-child(1) { animation-delay: 0s; }
.coupon-card:nth-child(2) { animation-delay: 0.05s; }
.coupon-card:nth-child(3) { animation-delay: 0.1s; }
.coupon-card:nth-child(n+4) { animation-delay: 0.15s; }
.coupon-card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 184, 0, 0.12) 0%, rgba(255, 184, 0, 0.04) 50%, transparent 100%);
    pointer-events: none;
}
.coupon-card--used .coupon-card-bg { background: rgba(255,255,255,0.04); }
.coupon-card--expired .coupon-card-bg { background: rgba(255,120,0,0.08); }
.coupon-card-icon { font-size: 28px; margin-bottom: 8px; position: relative; }
.coupon-card-percent { font-size: 28px; font-weight: 700; color: var(--gold-light); position: relative; }
.coupon-card-code { font-family: monospace; font-size: 14px; letter-spacing: 0.08em; margin-top: 8px; position: relative; color: var(--text); }
.coupon-card-meta { font-size: 12px; color: var(--muted); margin-top: 6px; position: relative; }
.coupon-card-expires { font-size: 11px; color: var(--muted); margin-top: 4px; position: relative; }
.coupon-card-status { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 10px; position: relative; }
.coupon-card--active .coupon-card-status { color: var(--accent); }
.coupon-card-copy { margin-top: 10px; position: relative; }
.coupons-empty { text-align: center; padding: 40px 20px; }
.coupons-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.6; }
.coupons-empty-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.coupons-empty-text { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.coupons-redeem-wrap { display: flex; gap: 10px; margin-top: 20px; }
.coupons-redeem-wrap .input-text { flex: 1; }

/* Карточка заявки (детали заказа) */
.order-summary {
    background: var(--bg-card);
    padding: 20px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
    animation: cardSlideIn 0.35s var(--ease-out-smooth) both;
}

.order-summary .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.order-summary .row:last-child {
    border-bottom: none;
}

.order-summary .label {
    color: var(--text-muted);
    font-size: 14px;
}

.order-summary .value {
    font-weight: 600;
    font-size: 14px;
    text-align: right;
    color: var(--text);
}

.order-summary .value.addr {
    font-size: 12px;
    word-break: break-all;
    max-width: 60%;
}

.order-summary .row-status .value {
    display: flex;
    justify-content: flex-end;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.status-badge--pending { background: rgba(20, 184, 166, 0.2); color: var(--gold-light); }
.status-badge--processing { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.status-badge--waiting-payment { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.status-badge--verification { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
.status-badge--completed { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.status-badge--cancelled { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }

/* История обмена — премиум */
.history-screen {
    background: var(--bg);
    min-height: 100vh;
}

.history-container {
    padding: 12px 16px 32px;
    max-width: 100%;
    box-sizing: border-box;
}

.history-header {
    margin-bottom: 20px;
    padding: 0;
}

/* Кнопка «Назад» на экране истории — в том же виде, что и на остальных экранах */
.history-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.history-back:hover {
    color: var(--text);
    border-color: rgba(22, 163, 74, 0.25);
}

[data-theme="dark"] .history-back:hover {
    border-color: rgba(46, 187, 92, 0.3);
}

.history-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}

.history-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.history-orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.history-order-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.25s var(--ease-out-smooth), transform 0.2s var(--ease-out-smooth);
    animation: cardSlideIn 0.4s var(--ease-out-smooth) both;
}

.history-order-card:nth-child(1) { animation-delay: 0s; }
.history-order-card:nth-child(2) { animation-delay: 0.04s; }
.history-order-card:nth-child(3) { animation-delay: 0.08s; }
.history-order-card:nth-child(4) { animation-delay: 0.12s; }
.history-order-card:nth-child(5) { animation-delay: 0.16s; }
.history-order-card:nth-child(n+6) { animation-delay: 0.2s; }

.history-order-card:hover {
    border-color: rgba(22, 163, 74, 0.35);
    box-shadow: var(--shadow-card), 0 4px 16px rgba(22, 163, 74, 0.06);
    transform: translateY(-2px);
}

.history-order-card:active {
    transform: translateY(0) scale(0.99);
}

.history-order-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.history-order-card__id {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.02em;
}

.history-order-card__status {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.history-order-card__status--pending { background: rgba(22, 163, 74, 0.12); color: var(--accent); }
.history-order-card__status--processing { background: rgba(59, 130, 246, 0.12); color: #2563eb; }
.history-order-card__status--waiting-payment { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
.history-order-card__status--verification { background: rgba(139, 92, 246, 0.12); color: #7c3aed; }
.history-order-card__status--completed { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.history-order-card__status--cancelled { background: rgba(239, 68, 68, 0.12); color: #dc2626; }

.history-order-card__main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 8px;
}

.history-order-card__crypto {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.history-order-card__amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.history-order-card__meta {
    font-size: 13px;
    color: var(--text-muted);
}

.history-empty {
    text-align: center;
    padding: 48px 24px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    animation: cardSlideIn 0.4s var(--ease-out-smooth) both;
}

.history-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.7;
}

.history-empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.history-empty-text {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 24px;
    line-height: 1.5;
}

.history-empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.3);
    transition: box-shadow 0.25s var(--ease-out-smooth), transform 0.2s var(--ease-out-smooth);
    -webkit-tap-highlight-color: transparent;
}

.history-empty-cta:hover {
    box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.4);
    transform: translateY(-2px);
}
.history-empty-cta:active {
    transform: translateY(0) scale(0.98);
}

.history-error {
    text-align: center;
    padding: 24px 20px;
    color: var(--text-muted);
    font-size: 15px;
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border);
}

/* Список заявок (общий fallback) */
.orders-list {
    margin-bottom: 20px;
}

.order-item {
    background: var(--bg-card);
    padding: 18px 20px;
    border-radius: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-card);
}

.order-item:active {
    transform: scale(0.99);
}

.order-item:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.08);
}

.order-item .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.order-item .id {
    font-weight: 700;
    color: var(--gold);
    font-size: 15px;
}

.order-item .status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.order-item .status.pending { background: rgba(20, 184, 166, 0.2); color: var(--gold-light); }
.order-item .status.processing { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.order-item .status.waiting-payment { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.order-item .status.verification { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
.order-item .status.completed { background: rgba(34, 197, 94, 0.2); color: #86efac; }
.order-item .status.cancelled { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }

.order-item .details {
    font-size: 14px;
    color: var(--text-muted);
}

/* Действия */
.action-buttons {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Способ оплаты (шаг заявки): 4 варианта — Пополнение SIM, СБП, По номеру карты, Криптобот */
.payment-method-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.payment-method-chip {
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.payment-method-chip-icon {
    font-size: 1.25em;
    line-height: 1;
}

.payment-method-chip-label {
    letter-spacing: 0.02em;
}

.payment-method-chip:hover {
    border-color: rgba(20, 184, 166, 0.35);
    background: rgba(20, 184, 166, 0.06);
}

.payment-method-chip.active {
    border-color: var(--gold);
    background: rgba(20, 184, 166, 0.12);
    color: var(--gold-light);
}

.payment-method-chip--card { border-left: 3px solid #3b82f6; }
.payment-method-chip--sbp { border-left: 3px solid #22c55e; }
.payment-method-chip--cryptobot { border-left: 3px solid #a855f7; }
.payment-method-chip--card.active { border-color: #3b82f6; background: rgba(59, 130, 246, 0.12); color: #60a5fa; }
.payment-method-chip--sbp.active { border-color: #22c55e; background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.payment-method-chip--cryptobot.active { border-color: #a855f7; background: rgba(168, 85, 247, 0.12); color: #c084fc; }

.form-hint--warning {
    color: #f59e0b;
}

.form-hint--success {
    color: var(--success);
}

.form-hint--wallet-network {
    white-space: pre-line;
}

/* Деталь заявки: реквизиты, скриншот, сообщение оператору */
.order-detail-container {
    padding: 20px 16px;
    max-width: 100%;
}

.order-detail-summary {
    margin-bottom: 20px;
}

.order-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 20px 0 10px;
    letter-spacing: 0.02em;
}

.order-payment-deadline-hint {
    font-size: 14px;
    color: var(--text-muted);
    margin: 12px 0 16px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--radius-sm);
}

.order-requisites-block {
    padding: 16px;
    margin: 16px 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.order-requisites-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.order-requisites-name {
    font-size: 14px;
    color: var(--text);
    margin-bottom: 10px;
}

.order-requisites-data-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-requisites-data {
    font-size: 13px;
    color: var(--text-muted);
    background: var(--border-soft);
    padding: 12px;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    border: 1px solid var(--border);
}

.btn-copy-req {
    align-self: flex-start;
}

.order-payment-proof-block,
.order-message-operator-block {
    margin: 16px 0;
    padding: 16px 0;
    border-top: 1px solid var(--border-soft);
}

.order-payment-proof-block .btn,
.order-message-operator-block .btn {
    margin-top: 10px;
}

.order-review-thanks-block {
    margin: 16px 0;
    padding: 16px 20px;
    background: var(--accent-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}

.order-review-thanks-text {
    margin: 0;
    font-size: 15px;
    color: var(--text);
    font-weight: 500;
}

.order-review-display-block {
    text-align: left;
}
.order-review-display-block .order-section-title {
    margin-bottom: 10px;
}
.order-review-display-text {
    margin: 0 0 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
.review-status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.review-status-badge--approved {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}
.review-status-badge--rejected {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}
.review-status-badge--pending {
    background: rgba(20, 184, 166, 0.2);
    color: #5eead4;
}

.input-file {
    display: block;
    width: 100%;
    margin: 10px 0;
    font-size: 14px;
    color: var(--text-muted);
    font-family: var(--font-body);
}

.order-message-textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    margin-top: 8px;
}

/* Пустое состояние */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 15px;
}

/* Нижняя панель — glass, скруглённая сверху; учёт safe area */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    min-height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    background: var(--header-bg-glass);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-top: 1px solid var(--header-border-glass);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04), 0 -4px 16px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 12px calc(8px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));
    z-index: 90;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.25s, opacity 0.25s var(--ease-out-smooth), transform 0.3s var(--ease-out-smooth);
}

.bottom-nav.visible {
    visibility: visible;
    opacity: 1;
}

[data-theme="dark"] .bottom-nav {
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15), 0 -4px 16px rgba(0, 0, 0, 0.2);
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    background: none;
    border: none;
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 11px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: color 0.2s, transform 0.15s var(--ease-out-smooth), opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.nav-item:active {
    transform: scale(0.92);
    opacity: 0.7;
}

.nav-item.active {
    color: var(--accent);
}

.nav-item-center {
    flex: 1;
}

.nav-item-center .nav-icon {
    font-size: 22px;
}

.nav-item-center.active {
    color: var(--accent);
}

.nav-icon {
    width: 24px;
    height: 24px;
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center;
}

.nav-icon--home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
}

.nav-item.active .nav-icon--home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
}

.nav-icon--exchange {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M7 16V4M7 4L3 8M7 4L11 8M17 8v12M17 20l4-4M17 20l-4-4'/%3E%3C/svg%3E");
}

.nav-item.active .nav-icon--exchange {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Cpath d='M7 16V4M7 4L3 8M7 4L11 8M17 20l4-4M17 20l-4-4'/%3E%3C/svg%3E");
}

.nav-icon--history {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18M9 4v6'/%3E%3C/svg%3E");
}

.nav-item.active .nav-icon--history {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M3 10h18M9 4v6'/%3E%3C/svg%3E");
}

.nav-icon--help {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E");
}

.nav-item.active .nav-icon--help {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E");
}

.nav-icon--info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

.nav-item.active .nav-icon--info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

.nav-icon--roulette {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}
.nav-item.active .nav-icon--roulette {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

.nav-label {
    font-weight: 500;
}

/* Отступ снизу, когда навигация видима (учёт высоты панели + safe area) */
.app-main.has-nav {
    padding-bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom, 0px));
}

/* Реферальная программа — отдельная страница */
.referral-program-screen {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
}
.referral-program-container {
    padding: 0 16px 32px;
    max-width: 480px;
    margin: 0 auto;
}
.referral-program-hero {
    display: flex;
    justify-content: center;
    margin: 16px 0 20px;
}
@keyframes heroPopIn {
    0% { opacity: 0; transform: scale(0.7); }
    60% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}
.referral-hero-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
    box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: heroPopIn 0.5s var(--ease-out-smooth) both;
}
[data-theme="dark"] .referral-hero-circle {
    box-shadow: 0 8px 32px rgba(46, 187, 92, 0.2);
}
.referral-hero-icon {
    width: 48px;
    height: 48px;
    background: currentColor;
    color: #fff;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E") center/48px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E") center/48px no-repeat;
    mask-size: 48px;
    -webkit-mask-size: 48px;
}
.referral-program-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    margin: 0 0 10px;
    line-height: 1.3;
}
.referral-program-desc {
    font-size: 14px;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.45;
    padding: 0 8px;
}
.referral-program-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.referral-action-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.referral-action-btn:hover,
.referral-action-btn:active {
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.08);
}
[data-theme="dark"] .referral-action-btn:hover,
[data-theme="dark"] .referral-action-btn:active {
    box-shadow: 0 2px 12px rgba(46, 187, 92, 0.12);
}
.referral-action-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--accent-light);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
}
.referral-action-icon--link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}
[data-theme="dark"] .referral-action-icon--link {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebb5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}
.referral-action-icon--qr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='4' height='4'/%3E%3Crect x='9' y='14' width='4' height='4'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Cpath d='M17 17h3v3'/%3E%3C/svg%3E");
}
[data-theme="dark"] .referral-action-icon--qr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebb5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='4' height='4'/%3E%3Crect x='9' y='14' width='4' height='4'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Cpath d='M17 17h3v3'/%3E%3C/svg%3E");
}
.referral-action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.referral-action-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.referral-action-sublabel {
    font-size: 13px;
    color: var(--text-muted);
}
.referral-action-arrow {
    font-size: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}
/* Реферальная карточка профиля — компактная и наглядная */
.referral-profile-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
    margin-bottom: calc(24px + env(safe-area-inset-bottom, 0));
}
[data-theme="dark"] .referral-profile-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    border-color: var(--border);
}
.referral-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.referral-card-stat {
    text-align: center;
    padding: 14px 8px;
    background: var(--bg);
    border-radius: 14px;
    border: 1px solid var(--border-soft);
}
.referral-card-stat-value {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px;
    line-height: 1.2;
}
.referral-card-stat-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.referral-card-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 18px 0 14px;
}
.referral-card-section {
    margin: 0;
}
.referral-card-section-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-transform: uppercase;
    display: block;
    margin-bottom: 12px;
}
.referral-stats-content {
    min-height: 48px;
}
.referral-stats-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}
.referral-stats-empty-icon {
    width: 40px;
    height: 40px;
    background: var(--bg);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}
.referral-stats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.referral-stats-list .referral-list-item {
    padding: 10px 12px;
    background: var(--bg);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text);
    border: 1px solid var(--border-soft);
}
.referral-qr-overlay {
    z-index: 9999;
}
.referral-qr-modal-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 24px;
    max-width: 320px;
    width: calc(100% - 32px);
    margin: 0 auto;
    border: 1px solid var(--border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.referral-qr-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
    text-align: center;
}
.referral-qr-image-wrap {
    text-align: center;
    margin-bottom: 16px;
}
.referral-qr-image {
    width: 200px;
    height: 200px;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    background: #fff;
}
.referral-qr-hint {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 20px;
}

/* Реферальные подстраницы: отдельные полноэкранные страницы, поверх всего, без нижней навигации */
.screen.referral-subpage {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    flex-direction: column;
    min-height: 100%;
    min-height: 100dvh;
    background: var(--bg-page);
    padding-top: env(safe-area-inset-top, 0);
    overflow-y: auto;
}
.screen.referral-subpage.active {
    display: flex;
}
.referral-subpage-container {
    flex: 1;
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.referral-subpage-hero {
    text-align: center;
    margin-bottom: 24px;
}
.referral-subpage-hero--link .referral-subpage-icon { color: var(--accent); }
.referral-subpage-hero--qr .referral-subpage-icon { color: var(--accent); }
.referral-subpage-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(var(--accent-rgb), 0.12);
    font-size: 28px;
}
.referral-subpage-icon--link::before { content: ''; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center/contain no-repeat; }
.referral-subpage-icon--qr::before { content: ''; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E") center/contain no-repeat; }
.referral-subpage-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}
.referral-subpage-desc {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}
/* Премиум блок для реферальной ссылки */
.referral-link-premium-block {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12) 0%, rgba(var(--accent-rgb), 0.06) 100%);
    border: 1.5px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(var(--accent-rgb), 0.1) inset;
}
.referral-link-premium-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0.6;
}
.referral-link-premium-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.referral-link-premium-icon {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.5'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}
[data-theme="dark"] .referral-link-premium-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebb5c' stroke-width='2.5'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
}
.referral-link-premium-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.referral-link-premium-field-box {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    border: 1.5px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 14px;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 1px 2px rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.referral-link-premium-field-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 2px 12px rgba(var(--accent-rgb), 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.05);
}
.referral-link-premium-field {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    background: transparent;
    border: none;
    border-radius: 10px;
    -webkit-appearance: none;
    appearance: none;
    font-family: var(--font-body);
    letter-spacing: -0.01em;
}
.referral-link-premium-field:focus {
    outline: none;
}
.referral-link-premium-copy-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 4px;
    transition: background 0.2s, transform 0.15s;
}
.referral-link-premium-copy-icon:hover {
    background: rgba(var(--accent-rgb), 0.2);
    transform: scale(1.05);
}
.referral-link-premium-copy-icon:active {
    transform: scale(0.95);
}
.referral-link-copy-icon-svg {
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E") center/contain no-repeat;
}
[data-theme="dark"] .referral-link-copy-icon-svg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ebb5c' stroke-width='2'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}
.referral-link-hint {
    font-size: 13px;
    color: var(--accent);
    display: none;
    margin-top: 12px;
    text-align: center;
    font-weight: 600;
    animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Премиум кнопки действий */
.referral-link-actions-premium {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}
.referral-link-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.25);
    position: relative;
    overflow: hidden;
}
.referral-link-action-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.2s;
}
.referral-link-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.35);
}
.referral-link-action-btn:hover::before {
    opacity: 1;
}
.referral-link-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.3);
}
.referral-link-action-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.referral-link-action-icon--copy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}
.referral-link-action-icon--share {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98'/%3E%3C/svg%3E");
}
.referral-qr-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 20px;
    text-align: center;
}
.referral-qr-card-inner { margin: 0; }
.referral-qr-image-box {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: inline-block;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.referral-qr-page-image {
    display: block;
    width: 280px;
    height: 280px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8px;
}
.referral-qr-page-hint {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 20px;
    line-height: 1.4;
}
.referral-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
}
.referral-share-btn:hover { opacity: 0.95; transform: translateY(-1px); }
.referral-share-btn:active { transform: translateY(0); }
.referral-share-btn-icon {
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Блокировка прокрутки страницы во время онбординга */
body.onboarding-active {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* Онбординг при первом входе */
.onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    max-width: 480px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    box-sizing: border-box;
}
.onboarding-overlay.is-active {
    pointer-events: auto;
}
.onboarding-spotlight {
    position: fixed;
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
    transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
    pointer-events: none;
}
.onboarding-overlay.is-active .onboarding-spotlight {
    pointer-events: none;
}
.onboarding-tooltip {
    position: fixed;
    left: 16px;
    right: 16px;
    max-width: 320px;
    margin: 0 auto;
    padding: 18px 20px;
    max-height: min(70vh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    z-index: 10000;
    transition: opacity 0.2s, transform 0.2s;
    box-sizing: border-box;
}
.onboarding-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid transparent;
}
.onboarding-tooltip-arrow.arrow-top {
    bottom: 100%;
    left: 50%;
    margin-left: -10px;
    border-bottom-color: var(--bg-card);
    border-top: none;
}
.onboarding-tooltip-arrow.arrow-bottom {
    top: 100%;
    left: 50%;
    margin-left: -10px;
    border-top-color: var(--bg-card);
    border-bottom: none;
}
.onboarding-tooltip-arrow.arrow-left {
    right: 100%;
    top: 50%;
    margin-top: -10px;
    border-right-color: var(--bg-card);
    border-left: none;
}
.onboarding-tooltip-arrow.arrow-right {
    left: 100%;
    top: 50%;
    margin-top: -10px;
    border-left-color: var(--bg-card);
    border-right: none;
}
.onboarding-tooltip-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
    line-height: 1.3;
}
.onboarding-tooltip-text {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 16px;
    line-height: 1.45;
}
.onboarding-tooltip-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.onboarding-tooltip-actions .onboarding-btn--skip {
    flex-shrink: 1;
    min-width: 0;
    margin-right: auto;
}
.onboarding-tooltip-actions .onboarding-btn--primary {
    flex-shrink: 1;
    min-width: 0;
}
#onboarding-tooltip-skip {
    display: none;
}
.onboarding-btn--skip {
    background: none;
    color: var(--text-muted);
    font-weight: 500;
    padding: 10px 12px;
}
.onboarding-btn--skip:hover {
    color: var(--text);
}
.onboarding-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 64px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
}
.onboarding-btn:active {
    transform: scale(0.98);
}
.onboarding-btn--primary {
    background: var(--accent);
    color: #fff;
}
.onboarding-btn--primary:hover {
    opacity: 0.95;
}

@media (max-width: 380px) {
    .onboarding-tooltip {
        left: 10px;
        right: 10px;
        padding: 14px 12px;
        max-width: none;
    }
    .onboarding-tooltip-actions {
        gap: 6px;
    }
    .onboarding-tooltip-actions .onboarding-btn {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 40px;
    }
    .onboarding-btn--skip {
        padding: 8px 10px;
    }
}

/* Кнопка «Пропустить» только внутри блока подсказки (onboarding-tooltip-skip), скрывается после первого шага в JS */

/* Режим разработки */
.dev-banner {
    background: #b45309;
    color: #fff;
    text-align: center;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
}

/* ============================================================
   Responsive: narrow screens (320–375px)
   ============================================================ */
@media (max-width: 375px) {
    .home-popular-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .home-popular-card {
        padding: 14px 8px;
        font-size: 11px;
    }
    .home-popular-icon {
        width: 32px;
        height: 32px;
    }
    .home-exchange-cta {
        padding: 16px 18px;
        font-size: 15px;
    }
    .exchange-container {
        padding: 12px 14px 28px;
    }
    .exchange-method-grid {
        grid-template-columns: 1fr;
    }
    .exchange-method-grid .payment-method-chip,
    .exchange-method-grid .exchange-method-btn {
        padding: 14px 14px;
    }
    .history-container {
        padding: 10px 12px 28px;
    }
    .history-order-card {
        padding: 16px;
    }
    .history-order-card__top {
        flex-wrap: wrap;
        gap: 6px;
    }
    .history-order-card__main {
        flex-wrap: wrap;
    }
    .order-summary .row {
        flex-wrap: wrap;
        gap: 4px;
    }
    .order-summary .row .value {
        min-width: 0;
        word-break: break-word;
    }
    .bottom-nav {
        padding-left: 4px;
        padding-right: 4px;
    }
    .nav-item {
        padding: 6px 4px;
        font-size: 10px;
    }
    .nav-icon {
        width: 22px;
        height: 22px;
        background-size: 20px;
    }
    .app-header {
        padding-left: calc(12px + env(safe-area-inset-left, 0px));
        padding-right: calc(12px + env(safe-area-inset-right, 0px));
    }
    .header-logo-text {
        font-size: 13px;
    }
    .home-intro-title {
        font-size: 1.1rem;
        letter-spacing: 0.04em;
    }
    .home-trust {
        gap: 10px 6px;
    }
    .home-trust-item {
        font-size: 12px;
    }
    .exchange-amount-toggle {
        flex-wrap: nowrap;
        gap: 0;
    }
    .exchange-toggle-btn {
        padding: 8px 10px;
        font-size: 12px;
    }
    .referral-program-container {
        padding: 0 12px 24px;
    }
}

@media (max-width: 340px) {
    .home-popular-cards {
        grid-template-columns: 1fr 1fr;
    }
    .exchange-header--premium {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }
    .nav-label {
        font-size: 9px;
    }
}

/* ============================================================
   Performance: reduce motion for users who prefer it
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html { scroll-behavior: auto; }
}

/* ============================================================
   Focus-visible outlines for accessibility
   ============================================================ */
:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.5);
    outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
    outline: none;
}