/* ========================================================================== VARIABLES & GLOBALS ========================================================================== */
:root { --accent: #1FF27C; --accent-grad-end: #23EABA; --bg: #000000; --white: #FFFFFF; --text-70: rgba(255, 255, 255, 0.7); --text-50: rgba(255, 255, 255, 0.5); --text-30: rgba(255, 255, 255, 0.3); --text-20: rgba(255, 255, 255, 0.2); --glass: rgba(255, 255, 255, 0.1); --shadow-title: 0px 0px 32px rgba(150, 147, 163, 0.16); --dark-icon: #1E1E1E; --error: #FF0D0D; --error-glass: rgba(255, 13, 13, 0.1); --waiting: #E7D83C; --waiting-glass: rgba(231, 216, 60, 0.1); }
* { box-sizing: border-box; margin: 0; padding: 0; }

/* FIX ДЛЯ IOS: Запрет горизонтального скролла от блюр-пятен */
html { scroll-behavior: smooth; overflow-x: hidden; width: 100vw; }
body { position: relative; background: var(--bg); color: var(--white); font-family: 'Golos Text', sans-serif; -webkit-font-smoothing: antialiased; margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; width: 100%; }

a { color: inherit; text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--white); }
img { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; padding: 0; color: inherit; cursor: pointer; transition: all 0.3s ease; }
button:focus { outline: none; }
.mobile-note { display: none; }
.hide-mobile { display: inline; }

/* ========================================================================== BACKGROUNDS & SPOTS ========================================================================== */
/* clip-path жестко обрезает размытие на границе экрана для Safari */
.page-bg { position: absolute; width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; z-index: 0; overflow: hidden; clip-path: inset(0 0 0 0); transform: translateZ(0); }
.bg-hero { position: absolute; width: 100%; height: 20%; left: 0; top: 0; background: url("images/bg.png") center/cover no-repeat; }
.bg-spot { position: absolute; background-image: url("images/bgspot.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: rgba(31, 242, 124, 0.1); filter: blur(200px); -webkit-filter: blur(200px); border-radius: 500px; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* SPOTS 1920 (Base) */
.spot-1 { width: 950px; height: 550px; left: 1286px; top: 1424px; display: block; }
.spot-2 { width: 950px; height: 550px; left: 1072px; top: 2323px; display: block; }
.spot-3 { width: 950px; height: 550px; left: -246px; top: 3699px; display: block; }
.spot-4 { width: 950px; height: 550px; left: -345px; top: 1638px; display: block; }

.profile-bg .bg-hero { display: none; }
.profile-bg .spot-1 { left: 965px; top: 925px; }
.profile-bg .spot-2 { left: -335px; top: 1280px; }
.profile-bg .spot-3 { left: -420px; top: 411px; }
.profile-bg .spot-4 { left: 1027px; top: -32px; }

.friends-bg .bg-hero { display: none; }
.friends-bg .spot-1 { left: 1005px; top: -106px; }
.friends-bg .spot-2 { left: -254px; top: 561px; }
.friends-bg .spot-3 { display: none; }
.friends-bg .spot-4 { display: none; }

.finance-bg .bg-hero { display: none; }
.finance-bg .spot-1 { left: 1117px; top: 46px; }
.finance-bg .spot-2 { left: 900px; top: 1018px; }
.finance-bg .spot-3 { left: -431px; top: 566px; }
.finance-bg .spot-4 { display: none; }

/* ========================================================================== UI KIT COMPONENTS ========================================================================== */
.status-badge { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 12px 0 8px; height: 32px; border-radius: 80px; flex: none; }
.status-badge-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; }
.status-badge-icon img, .status-badge-icon svg { width: 16px; height: 16px; object-fit: contain; display: block; }
.status-badge.success { background: rgba(31, 242, 124, 0.1); }
.status-badge.success .status-badge-text { color: var(--accent); font-weight: 500; font-size: 16px; line-height: 16px; }
.status-badge.waiting { background: rgba(231, 216, 60, 0.1); }
.status-badge.waiting .status-badge-text { color: var(--waiting); font-weight: 500; font-size: 16px; line-height: 16px; }
.status-badge.error { background: rgba(255, 13, 13, 0.1); }
.status-badge.error .status-badge-text { color: var(--error); font-weight: 500; font-size: 16px; line-height: 16px; }
.status-badge-small { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 12px; background: rgba(31, 242, 124, 0.1); border-radius: 20px; color: #1FF27C; font-size: 14px; font-weight: 500; line-height: 14px; }

.primary-pill-btn, .partner-btn { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 28px; height: 56px; background: var(--glass); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 80px; border: 1px solid transparent; flex: none; }
.primary-pill-btn { width: 250px; }
.primary-pill-btn:hover, .partner-btn:hover { border-color: rgba(255, 255, 255, 0.4); }
.primary-pill-btn:active, .partner-btn:active { background: #000000; }
.primary-pill-btn-wide { width: 100%; max-width: 360px; margin: 0 auto; }
.primary-pill-btn-text, .partner-btn-text { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 18px; line-height: 18px; color: var(--white); letter-spacing: 0.08px; flex: none; }
.primary-pill-btn-icon, .partner-btn-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--accent); border-radius: 50%; flex: none; }
.primary-pill-btn-icon svg, .partner-btn-icon svg { width: 24px; height: 24px; transform: scaleX(-1); display: block; }

/* Подсветка кнопки при наведении на всю карточку партнера */
.partner-card:hover .partner-btn { border-color: rgba(255, 255, 255, 0.4); }

/* ========================================================================== LAYOUT & HEADER (FLUID) ========================================================================== */
.main, .finance-main, .profile-main, .ref-main { display: flex; flex-direction: column; align-items: center; padding: 40px 20px 80px; position: relative; width: 100%; max-width: 1160px; margin: 0 auto; z-index: 1; flex-grow: 1; }
.main { gap: 200px; }
.finance-main, .profile-main, .ref-main { gap: 56px; justify-content: flex-start; }

.finance-top-wrap, .ref-top-wrap, .hero-block { display: flex; flex-direction: column; width: 100%; gap: 40px; align-items: center; margin: 0; padding: 0; }

.menu-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 80px; gap: 20px; }
.brand { font-family: 'Golos Text', sans-serif; font-weight: 700; font-size: 20px; line-height: 20px; color: var(--white); text-shadow: var(--shadow-title); white-space: nowrap; }
.brand span { color: var(--accent); }

.menu-nav { display: flex; align-items: center; gap: 24px; }
.menu-nav a { font-family: 'Golos Text', sans-serif; font-size: 16px; line-height: 24px; color: var(--text-70); white-space: nowrap; }
.menu-nav a.active, .menu-nav a:hover { color: var(--white); }

.header-buttons, .header-right-auth { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; background: transparent; border: none; width: auto; justify-content: flex-end; }

.menu-login-btn { display: flex; align-items: center; padding: 0 16px 0 20px; gap: 8px; height: 40px; background: var(--glass); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 80px; border: 1px solid transparent; cursor: pointer; flex: none; }
.menu-login-btn:hover { border-color: rgba(255, 255, 255, 0.2); }
.menu-login-btn:active { background: #000; border-color: rgba(255, 255, 255, 0.2); }
.menu-login-btn span { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.05px; color: var(--white); white-space: nowrap; flex: none; }
.menu-login-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; }
.menu-login-icon img, .menu-login-icon svg { width: 24px; height: 24px; object-fit: contain; }

.menu-burger-btn, .auth-burger { display: none; width: 40px; height: 40px; background: var(--glass); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 80px; border: 1px solid transparent; align-items: center; justify-content: center; cursor: pointer; flex: none; }

.cashback-counter { display: flex; align-items: center; padding: 0 20px; gap: 12px; height: 40px; background: var(--glass); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 40px; flex: none; }
.counter-label { font-family: 'Golos Text', sans-serif; font-size: 14px; color: var(--text-50); white-space: nowrap; flex: none; }
.counter-divider { width: 1px; height: 24px; background: var(--text-20); flex: none; }
.counter-value { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 16px; color: var(--accent); white-space: nowrap; flex: none; }

.logout-btn { width: 40px; height: 40px; background: var(--glass); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 80px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; cursor: pointer; flex: none; }

/* ========================================================================== HOME PAGE COMPONENTS ========================================================================== */
.hero-title { display: flex; flex-direction: column; align-items: center; gap: 48px; max-width: 752px; text-align: center; }
.hero-title-text h1 { font-weight: 600; font-size: 72px; line-height: 80px; margin: 0; text-shadow: var(--shadow-title); }
.hero-accent { color: var(--accent); }
.hero-title-text p { font-size: 18px; line-height: 28px; color: var(--text-70); margin-top: 20px; }
.hero-stats { display: flex; align-items: center; justify-content: space-between; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto; }
.hero-stat { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; }
.hero-stat strong { font-size: 20px; display: block; margin-bottom: 8px; font-weight: 600; }
.hero-stat span { font-size: 14px; color: var(--text-50); line-height: 20px; text-align: center; }
.hero-divider { width: 1px; height: 71px; background: var(--text-20); flex: none; }

/* АНИМАЦИЯ БЛОКА ВЫПЛАТ (TICKER) */
.payouts-block { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; max-width: 930px; margin: 0 auto; }
.payouts-block h2 { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 32px; line-height: 40px; margin: 0; text-align: center; letter-spacing: 0.14px; color: var(--white); }
.payouts-table { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 930px; }
.payouts-head { display: block; position: relative; width: 100%; height: 42px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; }

.col-exchange { position: absolute; left: 0px; top: 0px; font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 18px; color: var(--text-70); text-align: left; }
.col-uid { position: absolute; left: 285px; top: 0px; font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 18px; color: var(--text-70); text-align: left; }
.col-amount { position: absolute; left: 512px; top: 0px; font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 18px; color: var(--text-70); text-align: left; }
.col-status { position: absolute; left: 812px; width: 118px; top: 0px; font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 18px; color: var(--text-70); text-align: center; }

.payouts-content-wrapper { position: relative; width: 100%; height: 260px; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); }
.payouts-content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.payouts-content:hover { animation-play-state: paused; }

@keyframes scrollPayouts {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.payout-row { display: block; position: relative; width: 100%; height: 32px; }
.payout-exchange { position: absolute; left: 0px; top: 2px; display: flex; align-items: center; gap: 12px; }
.payout-exchange img { width: 28px; height: 28px; border-radius: 80px; background: #fff; }
.payout-exchange .exchange-name { font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 18px; color: var(--text-70); text-align: left; }
.payout-uid { position: absolute; left: 285px; top: 7px; font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 18px; color: var(--text-70); }
.payout-amount { position: absolute; left: 512px; top: 7px; font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 18px; line-height: 18px; letter-spacing: 0.08px; color: var(--white); }
.payout-row .status-badge { position: absolute; left: 812px; top: 0px; display: flex; align-items: center; justify-content: center; padding: 0 12px 0 8px; width: 118px; height: 32px; background: rgba(31, 242, 124, 0.1); border-radius: 80px; }
.payout-row .status-badge.waiting { background: rgba(231, 216, 60, 0.1); }

.how-block { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; max-width: 1120px; margin: 0 auto; }
.how-block h2 { font-size: 32px; font-weight: 600; line-height: 40px; margin: 0; text-align: center; letter-spacing: 0.14px; }
.how-cards { display: flex; gap: 20px; width: 100%; justify-content: center; }

/* УПРАВЛЕНИЕ SVG ФИГУРАМИ ДЛЯ КАРТОЧЕК */
.how-card { position: relative; width: 360px; height: 276px; isolation: isolate; }
.shape-desktop { display: block; width: 100%; height: 100%; }
.shape-laptop, .shape-tablet, .shape-mobile { display: none; }
.how-card-shape { position: absolute; top: 0; left: 0; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); width: 100%; height: 100%; }
.how-card-shape path { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

.how-card-content { position: absolute; left: 56px; top: 64px; z-index: 2; display: flex; flex-direction: column; gap: 16px; width: 248px; }
.how-card-content h3 { font-family: 'Golos Text', sans-serif; font-size: 20px; line-height: 24px; font-weight: 600; margin: 0; letter-spacing: 0.1px; }
.how-card-content p { font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 28px; color: var(--text-70); margin: 0; }
.how-card-step { position: absolute; right: -1px; top: 0; width: 56px; height: 56px; background: var(--glass); border-radius: 80px; display: flex; align-items: center; justify-content: center; font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 18px; line-height: 18px; letter-spacing: 0.08px; z-index: 3; }

.calculator-block { display: flex; flex-direction: column; align-items: center; gap: 80px; width: 100%; max-width: 930px; margin: 0 auto; }
.calculator-layout { display: flex; flex-direction: row; justify-content: space-between; width: 100%; gap: 169px; }
.calculator-text-side { display: flex; flex-direction: column; gap: 125px; max-width: 401px; }
.calculator-title-group h2 { font-family: 'Golos Text', sans-serif; font-size: 32px; font-weight: 600; margin: 0 0 20px 0; line-height: 40px; }
.calculator-title-group p { font-family: 'Golos Text', sans-serif; font-size: 18px; color: var(--text-70); line-height: 28px; margin: 0; }
.calculator-bottom-meta { display: flex; flex-direction: column; gap: 24px; }
.calculator-note { font-family: 'Golos Text', sans-serif; font-size: 12px; color: var(--text-50); margin: 0; }
.calculator-card { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 360px; }
.calculator-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.1); height: 32px; margin-bottom: 32px; }
.calculator-tab { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 8px; text-align: center; color: rgba(255, 255, 255, 0.5); cursor: pointer; position: relative; font-weight: 500; font-size: 16px; line-height: 16px; transition: color 0.3s; }
.calculator-tab-active { color: var(--accent); }
.calculator-tab-active::after { content: ""; width: 100%; height: 2px; background: var(--accent); border-radius: 4px; display: block; position: absolute; bottom: -1px; left: 0; }

/* ==========================================================================
   КАСТОМНЫЙ ВЫПАДАЮЩИЙ СПИСОК И ЛОГОТИПЫ КАЛЬКУЛЯТОРА (FIGMA)
   ========================================================================== */

/* Внешний блок с логотипами */
.calculator-exchanges { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; max-width: 365px; }
.calculator-exchange-active { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid var(--accent); border-radius: 50%; }
.calculator-exchange-active img, .calculator-exchange { width: 48px; height: 48px; border-radius: 50%; transition: opacity 0.3s; cursor: pointer; }
.calculator-exchange:hover { opacity: 0.8; }

/* Выпадающий список */
.calculator-select { position: relative; width: 100%; }
.calculator-select-field { box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0px 24px 0px 16px; width: 100%; height: 64px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; cursor: pointer; transition: border-color 0.3s; background: transparent; }
.calculator-select-field:hover { border-color: rgba(255, 255, 255, 0.4); }
.calculator-select.open .calculator-select-field { border-color: #1FF27C; }
.calculator-select.open .calculator-select-arrow { transform: rotate(180deg); }
.calculator-select-label { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.exch-logo { width: 40px; height: 40px; border-radius: 80px; object-fit: cover; }
.exch-name { font-family: 'Golos Text', sans-serif; font-style: normal; font-weight: 400; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.9); }
.calculator-select-arrow { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; transition: transform 0.3s; }

/* Контейнер с опциями и прокруткой */
.exchange-options { box-sizing: border-box; display: none; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 16px; gap: 12px; position: absolute; width: 100%; top: 100%; margin-top: 8px; left: 0; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 16px; z-index: 100; max-height: 320px; overflow-y: auto; background: rgba(0, 0, 0, 0.9); }
.exchange-options::-webkit-scrollbar { width: 4px; }
.exchange-options::-webkit-scrollbar-track { background: transparent; }
.exchange-options::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 4px; }
.exchange-options[style*="display: block"], .exchange-options[style*="display: flex"] { display: flex !important; }

/* Опция внутри списка */
.exchange-option { box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 0px; width: 100%; height: 56px; cursor: pointer; transition: opacity 0.3s; flex: none; }
.exchange-option:hover { opacity: 0.8; }
.exchange-option-label { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.exchange-option .exch-name { color: rgba(255, 255, 255, 0.7); transition: color 0.3s; }
.exchange-option.active .exch-name { color: rgba(255, 255, 255, 0.9); }
.exchange-option-check { display: none; width: 24px; height: 24px; }
.exchange-option.active .exchange-option-check { display: flex; }

.calculator-slider-block { display: flex; flex-direction: column; gap: 16px; }
.calculator-summary { display: flex; justify-content: space-between; align-items: center; font-size: 16px; font-family: 'Golos Text', sans-serif; }
.calculator-summary-label { color: var(--text-50); }
.calculator-summary-value { font-size: 20px; color: var(--white); font-weight: 600; }
.calculator-slider { position: relative; height: 24px; display: flex; align-items: center; cursor: pointer; }
.calculator-slider::before { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: #fff; border-radius: 80px; }
.calculator-slider-fill { position: relative; width: 50%; height: 12px; background: linear-gradient(90deg, #1FF27C 14.57%, #23EABA 84%); border-radius: 80px 0 0 80px; z-index: 1; pointer-events: none; }
.calculator-slider-knob { position: absolute; left: 50%; width: 24px; height: 24px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.25); z-index: 2; transform: translateX(-50%); cursor: grab; }
.calculator-slider-knob:active { cursor: grabbing; }
.calculator-divider { height: 1px; background: rgba(255,255,255,0.2); }
.calculator-income-row { height: 24px; }
.calculator-income-value { font-size: 20px; font-weight: 600; color: var(--accent); }
.desktop-note { display: block; }

.partners-block { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; max-width: 1120px; margin: 0 auto; }
.partners-text { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.partners-text h2 { margin: 0; font-family: 'Golos Text', sans-serif; font-size: 32px; font-weight: 600; line-height: 40px; }
.partners-text p { margin: 0; font-family: 'Golos Text', sans-serif; font-size: 18px; color: var(--text-70); }
.partners-tabs { display: flex; width: 360px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.partners-tab { flex: 1; text-align: center; color: var(--text-50); font-family: 'Golos Text', sans-serif; font-weight: 500; display: flex; flex-direction: column; justify-content: center; padding-bottom: 8px; cursor: pointer; position: relative; }
.partners-tab-active { color: var(--accent); }
.partners-tab-active::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--accent); border-radius: 4px; }
.partners-cards { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; width: 100%; }
.partner-card { width: 360px; padding: 56px; background: var(--glass); border-radius: 32px; display: flex; flex-direction: column; gap: 32px; transition: all 0.3s; }
.partner-card:hover { border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 0 30px rgba(0,0,0,0.25); }
.partner-card-content { display: flex; flex-direction: column; gap: 32px; }
.partner-card-top { display: flex; align-items: center; gap: 24px; }
.partner-logo { width: 68px; height: 68px; border-radius: 50%; flex: none; background: transparent; }
.partner-card-text h3 { margin: 0 0 8px; font-family: 'Golos Text', sans-serif; font-size: 20px; font-weight: 600; }
.partner-card-text p { margin: 0; font-family: 'Golos Text', sans-serif; font-size: 18px; color: var(--text-70); }

.faq-block { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; max-width: 930px; margin: 0 auto; }
.faq-block h2 { margin: 0; font-family: 'Golos Text', sans-serif; font-size: 32px; font-weight: 600; text-align: center; }
.faq-accordion { width: 100%; display: flex; flex-direction: column; }
.faq-item { padding: 20px 24px; border-bottom: 1px solid var(--text-20); transition: all 0.3s ease; }
.faq-item:hover { filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.25)); z-index: 10; position: relative; }
.faq-item-content { display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 16px; }
.faq-item-title { font-family: 'Golos Text', sans-serif; font-size: 18px; font-weight: 600; flex: 1; }
.faq-item-btn { width: 40px; height: 40px; background: var(--glass); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; transition: background 0.3s; }
.faq-item-btn img { width: 24px; height: 24px; transition: transform 0.3s ease; }
.faq-item:hover .faq-item-btn { background: var(--accent); }
.faq-item:hover .faq-item-btn img { filter: invert(1); }
.faq-item-body { display: none; padding-top: 20px; color: var(--text-70); font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 28px; }
.faq-item.opened { filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.25)); border-color: transparent; border-bottom: 1px solid var(--text-20); }
.faq-item.opened .faq-item-body { display: block; }
.faq-item.opened .faq-item-btn img { transform: rotate(180deg); }

/* FOOTER */
.footer-block { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 80px; margin-top: auto; max-width: 1120px; flex: none; }
.footer-menu { display: none; }
.footer-copy { font-family: 'Golos Text', sans-serif; font-size: 16px; color: var(--text-70); white-space: nowrap; margin: 0; }
.footer-links { display: flex; gap: 20px; align-items: center; margin: 0; }
.footer-links a { font-family: 'Golos Text', sans-serif; font-size: 16px; color: var(--text-70); white-space: nowrap; }

/* ========================================================================== PROFILE PAGE COMPONENTS ========================================================================== */
.trc-block { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 550px; margin: 0 auto; padding-top: 20px; }
.trc-text { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; width: 100%; }
.trc-text h2 { font-family: 'Golos Text', sans-serif; font-size: 32px; font-weight: 600; line-height: 40px; margin: 0; color: rgba(255,255,255,0.9); }
.trc-text p { font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 28px; color: rgba(255,255,255,0.7); margin: 0; width: 100%; max-width: 464px; text-align: center; word-wrap: break-word; }
.trc-inputs-group { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 550px; }
.trc-input-wrapper { width: 100%; height: 64px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 0 24px; display: flex; align-items: center; background: transparent; box-sizing: border-box; }
.trc-input { width: 100%; height: 100%; background: transparent; border: none; outline: none; font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.9); }
.trc-notification { display: flex; align-items: flex-start; padding: 12px 20px; gap: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 8px; width: 100%; box-sizing: border-box; text-align: left; }
.trc-notification svg { flex: none; margin-top: 0px; }
.trc-notification span { font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.9); flex: 1; display: block; text-align: left; }
.trc-save-btn-new { margin-top: 16px; width: 193px; }

.support-link { color: rgba(255, 255, 255, 0.9); text-decoration: underline; transition: color 0.3s ease; }
.support-link:hover { color: var(--accent); text-decoration: none; }

.prof-exchanges { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; max-width: 1120px; margin: 0 auto; }
.prof-cards { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; width: 100%; }
.prof-card { width: 360px; height: 260px; padding: 56px 8px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s; box-sizing: border-box; }
.prof-card.not-connected { cursor: pointer; }
.prof-card.not-connected:hover { border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); }
.prof-card-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 248px; height: 148px; }
.prof-card-top { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px; width: 248px; height: 68px; }
.prof-logo { width: 68px; height: 68px; border-radius: 50%; flex: none; background: transparent;}
.prof-card-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; flex: 1; }
.prof-card-info h3 { font-family: 'Golos Text', sans-serif; font-size: 20px; font-weight: 600; line-height: 24px; color: rgba(255,255,255,0.9); margin: 0; text-align: left; }
.prof-card-info p { font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 28px; color: rgba(255,255,255,0.7); margin: 0; text-align: left; }
.prof-input-wrap, .prof-connect-btn { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 0 20px; height: 48px; background: rgba(255, 255, 255, 0.06); border-radius: 80px; width: 248px; border: 1px solid transparent; transition: all 0.3s; box-sizing: border-box; }
.prof-card.not-connected:hover .prof-connect-btn { border-color: rgba(255,255,255,0.2); }
.prof-input-wrap input { background: transparent; border: none; outline: none; color: rgba(255,255,255,0.9); font-family: 'Golos Text', sans-serif; font-size: 16px; width: 100%; }
.prof-input-wrap input::placeholder { color: var(--text-30); }
.prof-connect-btn-text { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.05px; flex: 1; text-align: left; color: rgba(255, 255, 255, 0.9); }
.prof-connect-btn-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent); border-radius: 50%; flex: none; }
.prof-connect-btn-icon svg { width: 24px; height: 24px; transform: scaleX(-1); display: block; }
.prof-input-wrap.connected { padding: 0 20px; border-radius: 40px; }
.prof-input-wrap.connected input { color: var(--text-30); }
.prof-check-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; opacity: 0.3; }

/* ========================================================================== FINANCE PAGE COMPONENTS ========================================================================== */
.dashboard-row { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 1120px; gap: 115px; margin: 0 auto; }
.current-period-info { display: flex; flex-direction: column; gap: 32px; width: 455px; }
.current-period-title { font-family: 'Golos Text', sans-serif; font-size: 32px; font-weight: 600; line-height: 40px; letter-spacing: 0.14px; margin: 48px 0 0 0; color: rgba(255, 255, 255, 0.9); }
.current-period-title .period-sum { color: #1FF27C; }
.current-period-title .period-text { color: rgba(255, 255, 255, 0.9); }
.wallet-details { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.wallet-desc { font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.7); margin: 0; }
.wallet-input-field { display: flex; flex-direction: row; align-items: center; width: 100%; height: 56px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 0 20px; background: transparent; gap: 8px; box-sizing: border-box; }
.wallet-label { font-family: 'Golos Text', sans-serif; font-size: 16px; line-height: 16px; color: rgba(255, 255, 255, 0.3); }
.wallet-input-field input { width: 100%; background: transparent; border: none; outline: none; font-family: 'Golos Text', sans-serif; font-size: 16px; line-height: 16px; color: rgba(255, 255, 255, 0.3); padding: 0; margin: 0; }

.history-btn { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 28px; width: 284px; height: 56px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 80px; border: 1px solid transparent; cursor: pointer; transition: opacity 0.3s; margin-top: 13px; }
.history-btn:hover { border-color: rgba(255, 255, 255, 0.2); }
.history-btn-text { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 18px; line-height: 18px; letter-spacing: 0.08px; color: rgba(255, 255, 255, 0.9); }
.history-btn-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--accent); border-radius: 50%; flex: none; }
.history-btn-icon svg { width: 24px; height: 24px; display: block; transform: matrix(1, 0, 0, -1, 0, 0); }

.all-time-card { display: flex; flex-direction: column; padding: 56px; gap: 40px; width: 550px; height: 412px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 32px; box-sizing: border-box; }
.all-time-header { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.all-time-header h3 { font-family: 'Golos Text', sans-serif; font-size: 20px; font-weight: 600; line-height: 24px; color: #1FF27C; margin: 0; letter-spacing: 0.1px; }
.all-time-header p { font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.7); margin: 0; }
.all-time-chart-wrap { width: 100%; height: 200px; position: relative; }

.daily-stats-card { display: flex; flex-direction: column; align-items: flex-end; padding: 56px; gap: 32px; width: 100%; max-width: 1120px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 32px; box-sizing: border-box; margin: 0 auto; }
.stats-header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; height: 48px; }
.stats-header h2 { font-family: 'Golos Text', sans-serif; font-size: 20px; font-weight: 600; line-height: 24px; color: rgba(255, 255, 255, 0.9); margin: 0; letter-spacing: 0.1px; }
.stats-tabs { display: flex; flex-direction: row; align-items: center; padding: 4px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 80px; box-sizing: border-box; margin: 0;}
.stats-tab { display: flex; align-items: center; justify-content: center; padding: 0 20px; height: 40px; border-radius: 40px; font-family: 'Golos Text', sans-serif; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.9); border: none; cursor: pointer; transition: all 0.3s; letter-spacing: 0.05px; background: transparent; }
.stats-tab.active { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
.stats-chart-wrap { width: 100%; height: 291px; position: relative; }

/* ==========================================================================
   ФИЛЬТРЫ ГРАФИКА (ЧЕКБОКСЫ)
   ========================================================================== */
.stats-filters { display: flex; flex-direction: row; align-items: center; gap: 17px; margin-top: 8px; flex-wrap: wrap; }
.filter-label { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; transition: opacity 0.3s; }
.filter-label input { display: none; }

/* Цвета чекбоксов для каждой биржи */
.filter-bybit   { --chk-color: #1FF27C; }
.filter-okx     { --chk-color: #CD71FE; }
.filter-bingx   { --chk-color: #4A90E2; }
.filter-bitget  { --chk-color: #00E4B1; }
.filter-gate    { --chk-color: #10D078; }
.filter-bitmex  { --chk-color: #E72A3C; }
.filter-binance { --chk-color: #F3BA2F; }
.filter-crypto  { --chk-color: #002D74; }
.filter-huobi   { --chk-color: #0050FF; }

.filter-box { width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; }
.filter-label:hover input:not(:checked) + .filter-box { background: rgba(255, 255, 255, 0.06); border-color: var(--chk-color); }
.filter-label:active input:not(:checked) + .filter-box { background: #000000; border-color: var(--chk-color); }
.filter-label input:checked + .filter-box { background: var(--chk-color); border-color: var(--chk-color); }

.filter-icon { width: 24px; height: 24px; opacity: 0; transition: opacity 0.2s; display: block; }
.filter-icon path { stroke: #1E1E1E; }
.filter-label input:checked + .filter-box .filter-icon { opacity: 1; }
.filter-text { font-family: 'Golos Text', sans-serif; font-size: 18px; font-weight: 400; line-height: 18px; color: var(--text-70); }

/* Состояние неактивного (disabled) чекбокса: полностью скрываем */
.filter-label.disabled { display: none !important; }

/* ========================================================================== FRIENDS PAGE COMPONENTS ========================================================================== */
.ref-block { display: flex; flex-direction: column; align-items: center; gap: 48px; width: 100%; max-width: 1120px; margin: 0 auto; }
.ref-text { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; text-align: center; }
.ref-text h1 { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 32px; line-height: 40px; letter-spacing: 0.14px; color: rgba(255, 255, 255, 0.9); margin: 0; }
.ref-text p { font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.7); margin: 0; max-width: 464px; }
.ref-input-group { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; max-width: 550px; }
.ref-input-wrapper { display: flex; flex-direction: row; align-items: center; padding: 0 24px; gap: 8px; width: 100%; height: 64px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; box-sizing: border-box; }
.ref-input-content { display: flex; flex-direction: column; justify-content: center; flex: 1; height: 100%; gap: 4px; }
.ref-input-label { font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 14px; line-height: 14px; color: rgba(255, 255, 255, 0.5); }
.ref-input-field { background: transparent; border: none; outline: none; font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.9); width: 100%; padding: 0; margin: 0; }
.ref-copy-btn { background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; width: 24px; height: 24px; flex: none; transition: opacity 0.3s ease; }
.ref-copy-btn:hover { opacity: 0.7; }
.ref-copy-btn img { width: 24px; height: 24px; object-fit: contain; }
.ref-socials { display: flex; flex-direction: row; gap: 16px; margin-top: 16px; justify-content: center; width: 100%; }
.social-btn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); transition: all 0.3s ease; flex: none; }
.social-btn img { width: 18px; height: 18px; object-fit: contain; }
.social-btn:hover { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); }
.social-wa:hover { background: #25D366; transform: translateY(-3px); }
.social-tg:hover { background: #2AABEE; transform: translateY(-3px); }
.social-fb:hover { background: #1877F2; transform: translateY(-3px); }
.social-vk:hover { background: #0077FF; transform: translateY(-3px); }

.ref-cards { display: flex; flex-direction: row; flex-wrap: wrap; gap: 20px; width: 100%; max-width: 550px; justify-content: center; }
.ref-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px; gap: 8px; flex: 1; min-width: 265px; height: 184px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 32px; box-sizing: border-box; }
.ref-card-value { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 20px; line-height: 24px; letter-spacing: 0.1px; color: rgba(255, 255, 255, 0.9); text-align: center; margin: 0; }
.ref-card-label { font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.5); text-align: center; margin: 0; }

/* ========================================================================== MODALS & UTILS ========================================================================== */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; overflow-y: auto; padding: 20px; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { position: relative; width: 550px; height: auto; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 32px; padding: 56px; display: flex; flex-direction: column; align-items: center; margin: auto; box-sizing: border-box; }
.modal-close-btn { position: absolute; width: 40px; height: 40px; right: 12px; top: 12px; background: transparent; border-radius: 80px; display: flex; align-items: center; justify-content: center; transition: background 0.3s; z-index: 10; cursor: pointer; border: none; }
.modal-close-btn:hover { background: rgba(255, 255, 255, 0.1); }
.modal-body { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 438px; }
.modal-header { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; text-align: center; }
.modal-header .brand { font-family: 'Golos Text', sans-serif; color: rgba(255, 255, 255, 0.9); font-weight: 700; font-size: 20px; line-height: 20px; text-shadow: 0px 0px 32px rgba(150, 147, 163, 0.16); }
.modal-header h2 { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 32px; line-height: 40px; letter-spacing: 0.14px; margin: 0; color: rgba(255, 255, 255, 0.9); }
.modal-header p { font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.7); margin: 0; }

.modal-form { display: flex; flex-direction: column; gap: 20px; width: 100%; }

.modal-options { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 24px; }
.checkbox-label { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.checkbox-label input { display: none; }
.checkbox-custom { width: 24px; height: 24px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.checkbox-label input:checked + .checkbox-custom { background: var(--accent); border-color: var(--accent); }
.checkbox-custom svg { width: 16px; height: 16px; opacity: 0; transition: opacity 0.2s; }
.checkbox-label input:checked + .checkbox-custom svg { opacity: 1; }
.checkbox-text { font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.9); }
.forgot-pass { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 18px; line-height: 18px; letter-spacing: 0.05px; color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.forgot-pass:hover { text-decoration: underline; }
.modal-submit-btn { width: 100%; height: 56px; background: rgba(255, 255, 255, 0.9); border-radius: 80px; display: flex; align-items: center; justify-content: center; font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 18px; line-height: 18px; color: #1E1E1E; letter-spacing: 0.08px; border: none; cursor: pointer; transition: opacity 0.3s; margin-top: 12px; }
.modal-submit-btn:hover { opacity: 0.9; }
.modal-footer-links { display: flex; gap: 16px; align-items: center; justify-content: center; width: 100%; height: 18px; }
.no-account { font-family: 'Golos Text', sans-serif; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.5); }
.register-link { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 18px; line-height: 18px; letter-spacing: 0.05px; color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.register-link:hover { text-decoration: underline; }

/* SUCCESS MODALS */
.success-modal-content { width: 550px; min-height: 384px; padding: 56px; justify-content: center; align-items: center; }
.success-body { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; max-width: 438px; margin: 0 auto; }
.success-icon-wrap { width: 56px; height: 56px; flex: none; display: flex; justify-content: center; align-items: center; margin: 0 auto; }
.success-text { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; text-align: center; }
.success-text h2 { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 32px; line-height: 40px; letter-spacing: 0.14px; color: rgba(255, 255, 255, 0.9); margin: 0; text-align: center; width: 100%; }
.success-text p { font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.7); margin: 0; text-align: center; width: 100%; }

/* HISTORY MODAL */
.history-modal-content { position: relative; width: 930px !important; height: 610px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 32px; padding: 56px; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; }
.history-block { width: 818px; height: 498px; display: flex; flex-direction: column; align-items: center; gap: 48px; margin: 0 auto; }
.history-title { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 32px; line-height: 40px; text-align: center; letter-spacing: 0.14px; color: rgba(255, 255, 255, 0.9); margin: 0; width: 100%; }
.history-table { width: 818px; height: 410px; display: flex; flex-direction: column; gap: 24px; position: relative; }
.history-head { width: 818px; height: 42px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: relative; box-sizing: border-box; }
.col-hist-period { position: absolute; left: 0px; top: 0px; font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.7); text-align: left; }
.col-hist-date { position: absolute; left: 230px; top: 0px; font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.7); }
.col-hist-amount { position: absolute; left: 450px; top: 0px; font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.7); }
.col-hist-status { position: absolute; left: 698px; top: 0px; width: 120px; font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.7); text-align: center; }
.history-content { width: 818px; height: 344px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; padding-right: 8px; }
.history-content::-webkit-scrollbar { width: 4px; }
.history-content::-webkit-scrollbar-track { background: transparent; }
.history-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.5); border-radius: 24px; }
.history-row { width: 100%; height: 32px; position: relative; display: block; flex: none; }
.hist-period { position: absolute; left: 0px; top: 7px; font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.7); text-align: left; }
.hist-date { position: absolute; left: 230px; top: 7px; font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.7); }
.hist-amount { position: absolute; left: 450px; top: 7px; font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 18px; line-height: 18px; letter-spacing: 0.08px; color: rgba(255, 255, 255, 0.9); }
.history-row .status-badge { position: absolute; left: 698px; top: 0px; width: 120px; height: 32px; display: flex; justify-content: center; align-items: center; padding: 0 12px; background: rgba(231, 216, 60, 0.1); border-radius: 80px; box-sizing: border-box;}
.history-row .status-badge.success { background: rgba(31, 242, 124, 0.1); }
.history-row .status-badge.error { background: rgba(255, 13, 13, 0.1); }
.history-row .status-badge-text { font-family: 'Golos Text', sans-serif; font-weight: 500; font-size: 16px; line-height: 16px; margin: 0; padding: 0; }
.history-row .status-badge-icon { margin-right: 4px; }

/* CONNECT EXCHANGE MODAL */
.connect-modal-content { position: relative; width: 550px; height: auto; min-height: 538px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 32px; padding: 56px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
.connect-body { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 438px; height: auto; min-height: 426px; margin: 0 auto; }
.connect-header { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; text-align: center; }
.connect-header h2 { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 32px; line-height: 40px; letter-spacing: 0.14px; text-align: center; color: rgba(255, 255, 255, 0.9); margin: 0; width: 100%; }
.connect-header p { font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 28px; text-align: center; color: rgba(255, 255, 255, 0.7); margin: 0; width: 100%; }
.connect-inputs { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; margin: 0; padding: 0; flex: none; }

.connect-submit-btn { display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 0px 28px; gap: 20px; width: 100%; height: 56px; background: rgba(255, 255, 255, 0.9); border-radius: 80px; font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 18px; line-height: 18px; letter-spacing: 0.08px; color: #1E1E1E; border: none; cursor: pointer; transition: opacity 0.3s; margin-top: 12px; flex: none; }
.connect-submit-btn:hover { opacity: 0.9; }
.connect-submit-btn:disabled { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.3); cursor: not-allowed; }

.connect-divider-group { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 16px; width: 100%; height: 18px; flex: none; }
.connect-divider { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.2); }
.connect-no-account { font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; color: rgba(255, 255, 255, 0.5); flex: none; }

/* Запрещаем кнопке сжиматься через flex: none; */
.connect-create-btn { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0px 8px 0px 28px; width: 100%; height: 56px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 80px; border: 1px solid transparent; cursor: pointer; transition: border-color 0.3s; box-sizing: border-box; flex: none; }
.connect-create-btn:hover { border-color: rgba(255, 255, 255, 0.2); }
.connect-create-text { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 18px; line-height: 18px; letter-spacing: 0.08px; color: rgba(255, 255, 255, 0.9); }
.connect-create-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #1FF27C; border-radius: 80px; flex: none; }
.connect-create-icon svg { width: 24px; height: 24px; transform: scaleX(-1); display: block; }

/* ========================================================================== TOAST NOTIFICATIONS & LOADER ========================================================================== */
.toast-container { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 9999; pointer-events: none; }
.toast { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 16px 24px; border-radius: 12px; font-family: 'Golos Text', sans-serif; font-size: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: toastFadeIn 0.3s ease forwards, toastFadeOut 0.3s ease 3.5s forwards; max-width: 320px; }
.toast-success { border-color: #1FF27C; color: #1FF27C; }
.toast-error { border-color: #FF0D0D; color: #FF0D0D; }
@keyframes toastFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }

.global-loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 1; transition: opacity 0.3s; }
.global-loader.hidden { opacity: 0; pointer-events: none; }
.spinner { width: 48px; height: 48px; border: 4px solid rgba(31, 242, 124, 0.2); border-top-color: #1FF27C; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* ==========================================================================
   MOBILE MENU (ИДЕАЛЬНОЕ ВЫРАВНИВАНИЕ ПО СТРАНИЦЕ)
   ========================================================================== */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Сама выезжающая панель */
.mobile-menu-content {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateX(100%); 
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow-y: auto;
}

.mobile-menu-overlay.active .mobile-menu-content {
  transform: translateX(0);
}

/* Обёртка контента (занимает 100% от доступного места внутри панели) */
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* TABLET: 768px - 1023px */
@media (max-width: 1023px) and (min-width: 768px) {
  .mobile-menu-content {
    width: 376px;
    padding: 40px 32px 80px; /* Отступы точь-в-точь как у основного <main> */
  }
  .mobile-menu-header {
    height: 80px; 
    margin-bottom: 40px;
  }
}

/* MOBILE: 360px - 767px */
@media (max-width: 767px) {
  .mobile-menu-content {
    width: 100%;
    max-width: 360px;
    padding: 40px 16px 80px; /* Отступы точь-в-точь как у основного <main> */
  }
  .mobile-menu-header {
    height: 56px; 
    margin-bottom: 40px;
  }
}

/* Шапка меню (крестик и баланс) */
.mobile-menu-header {
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /* Прижимаем всё содержимое вправо */
  align-items: center; 
  width: 100%;
  box-sizing: border-box;
  gap: 12px; /* Расстояние между суммой и крестиком */
}

.mobile-menu-header .modal-close-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  position: static;
  flex: none;
}

.mobile-cashback-counter {
  height: 40px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.mobile-cashback-counter .counter-value {
  font-family: 'Golos Text', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.05px;
  color: #1FF27C;
}

/* Навигация */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.mobile-menu-nav a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 8px;
  width: 100%;
  height: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  font-family: 'Golos Text', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.mobile-menu-nav a.active {
  color: rgba(255, 255, 255, 0.9);
}

/* Кнопки Войти/Выйти */
.mobile-menu-btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 8px 0px 20px;
  width: 100%;
  height: 48px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 80px;
  border: none;
  cursor: pointer;
  box-sizing: border-box;
  margin-top: 40px; 
  flex: none;
}

.mobile-menu-btn-text {
  font-family: 'Golos Text', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.05px;
  color: rgba(255, 255, 255, 0.9);
}

.mobile-menu-btn-icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background: #1FF27C;
  border-radius: 80px;
  box-sizing: border-box;
}

/* ========================================================================== RESPONSIVE ========================================================================== */
@media (max-width: 1440px) {
  .spot-1 { left: 950px; top: 1336px; }
  .spot-2 { left: 800px; top: 2339px; }
  .spot-3 { left: -246px; top: 3699px; }
  .spot-4 { left: -345px; top: 1638px; }
  .friends-bg .spot-1 { left: calc(50% + 285px); }
  .finance-bg .spot-1 { left: 950px; top: 1336px; }
  .finance-bg .spot-2 { left: 800px; top: 2339px; }
  .finance-bg .spot-3 { left: -246px; top: 3699px; }
  .finance-bg .spot-4 { left: -345px; top: 1638px; display: block;}
}

@media (max-width: 1280px) {
  .main { max-width: 932px; gap: 120px; }
  .spot-1 { left: 846px; top: 1360px; }
  .spot-2 { left: 696px; top: 2323px; }
  .spot-3 { left: -246px; top: 3699px; }
  .spot-4 { left: -345px; top: 1638px; }
  .friends-bg .spot-1 { left: calc(50% + 109px); }
  .profile-bg .spot-1 { left: 1045px; top: 925px; }
  .profile-bg .spot-2 { left: -415px; top: 1368px; }
  .profile-bg .spot-3 { left: -532px; top: 411px; }
  .profile-bg .spot-4 { left: 923px; top: -32px; }
  
  .payouts-block { max-width: 892px; }
  .payouts-table { max-width: 892px; }
  .col-exchange { left: 0px; text-align: left; }
  .col-uid { left: 285px; text-align: left; }
  .col-amount { left: 512px; text-align: left; }
  .col-status { left: 774px; width: 118px; text-align: center; }
  .payout-row .status-badge { left: 774px; }

  .how-block { max-width: 892px; }
  .how-block h2 { font-size: 28px; line-height: 36px; }
  .how-cards { gap: 20px; }
  .how-card { width: 284px; height: 228px; }
  .shape-desktop, .shape-tablet, .shape-mobile { display: none; }
  .shape-laptop { display: block; width: 100%; height: 100%; }
  .how-card-content { left: 32px; top: 40px; width: 220px; gap: 16px; }
  .how-card-content h3 { font-size: 18px; line-height: 22px; letter-spacing: 0.08px; }
  .how-card-content p { font-size: 16px; line-height: 24px; }
  .how-card-step { width: 56px; height: 56px; right: -1px; top: 0; font-size: 18px; line-height: 18px; }
  .finance-bg .spot-1 { left: 1045px; top: 925px; }
  .finance-bg .spot-2 { left: -415px; top: 1368px; }
  .finance-bg .spot-3 { left: -532px; top: 411px; }
  .finance-bg .spot-4 { left: 923px; top: -32px; }
  
  .dashboard-row { max-width: 892px; gap: 40px; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; }
  .current-period-info { width: calc(50% - 20px); max-width: none; }
  .current-period-title { font-size: 28px; line-height: 36px; margin-top: 34px; }
  .all-time-card { width: calc(50% - 20px); max-width: none; height: 412px; padding: 40px; gap: 32px; }
  .daily-stats-card { max-width: 892px; }

  /* History Modal overrides for 1280px */
  .history-modal-content { width: calc(100% - 40px) !important; max-width: 930px !important; margin: 0 auto; padding: 56px; }
  .history-block { width: 100%; max-width: 818px; margin: 0 auto; }
  .history-table { width: 100%; max-width: 818px; margin: 0 auto; }
  .history-head, .history-content, .history-row { width: 100%; }
  .col-hist-period, .hist-period { left: 0%; font-size: 16px; }
  .col-hist-date, .hist-date { left: 25%; font-size: 16px; }
  .col-hist-amount, .hist-amount { left: 50%; font-size: 16px; }
  .col-hist-status { left: auto; right: 0; width: 120px; font-size: 16px; text-align: center; }
  .history-row .status-badge { left: auto; right: 0; width: 120px; }
  
  /* Partners Block Adaptivity - exactly 3 per row */
  .partners-block { max-width: 892px; }
  .partners-cards { gap: 20px; justify-content: center; }
  .partner-card { width: calc((100% - 40px) / 3); padding: 32px 16px; gap: 24px; box-sizing: border-box; align-items: center; }
  .partner-card-content { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .partner-card-top { flex-direction: column; text-align: center; gap: 16px; width: 100%; }
  .partner-logo { width: 56px; height: 56px; }
  .partner-card-text { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .partner-card-text h3, .partner-card-text p { text-align: center; margin: 0; }
  .partner-btn { margin: 0 auto; width: 100%; max-width: 180px; }
  .hide-mobile { display: none !important; }
}

@media (max-width: 1023px) {
  .bg-hero { height: 20.6%; background: url("images/bg1024.png") center/cover no-repeat; }
  .main { max-width: 744px; }
  .menu-nav { display: none !important; }
  .logout-btn { display: none !important; }
  .menu-burger-btn, .auth-burger { display: flex !important; }
  .header-buttons, .header-right-auth { background: transparent !important; padding: 0 !important; width: auto !important; border: none !important; justify-content: flex-end; gap: 12px; }
  
  .spot-1 { left: 602px; top: 1127px; }
  .spot-2 { left: -394px; top: 1534px; }
  .spot-3 { left: 490px; top: 2024px; }
  .spot-4 { left: -394px; top: 3125px; }
  .friends-bg .spot-1 { left: calc(50% + 5px); }
  .friends-bg .spot-2 { left: calc(50% - 766px); }
  .ref-input-group { max-width: 436px; }
  .ref-cards { max-width: 436px; gap: 20px; }
  .ref-card { min-width: 208px; height: 134px; padding: 32px; gap: 8px; }
  .ref-card-value { font-size: 18px; line-height: 22px; }
  .profile-bg .spot-1 { left: 893px; top: 925px; }
  .profile-bg .spot-2 { left: -415px; top: 1272px; }
  .profile-bg .spot-3 { left: -700px; top: 355px; }
  .profile-bg .spot-4 { left: 707px; top: -32px; }
  .trc-block { max-width: 892px; gap: 16px; }
  .trc-input-wrapper { max-width: 550px; height: 56px; padding: 0 20px; }
  .trc-input { font-size: 16px; }
  .trc-text h2 { font-size: 28px; line-height: 36px; }
  .trc-text p { font-size: 16px; line-height: 24px; }
  .prof-exchanges { max-width: 892px; gap: 40px; }
  .prof-cards { max-width: 892px; gap: 20px; justify-content: center; }
  .prof-card { width: 284px; height: 200px; padding: 32px 8px; flex-direction: column; justify-content: flex-start; }
  .prof-card-inner { gap: 20px; width: 220px; height: 136px; }
  .prof-card-top { width: 220px; height: 68px; flex-direction: row; align-items: center; gap: 20px; }
  .prof-logo { width: 68px; height: 68px; }
  .prof-card-info { align-items: flex-start; text-align: left; gap: 8px;}
  .prof-card-info h3 { font-size: 18px; line-height: 22px; text-align: left; }
  .prof-card-info p { font-size: 16px; line-height: 24px; text-align: left; }
  .prof-input-wrap, .prof-input-wrap.connected, .prof-connect-btn { width: 220px; height: 48px; }
  
  .calculator-layout { flex-direction: column; align-items: center; gap: 48px; }
  .calculator-text-side { text-align: center; gap: 40px; max-width: 100%; }
  .calculator-title-group h2 { text-align: center; }
  
  .calculator-bottom-meta { display: none !important; }
  .mobile-note { display: block !important; margin: 16px auto 0; font-size: 12px; text-align: center; color: rgba(255, 255, 255, 0.3); line-height: 16px; max-width: 320px; width: 100%; }
  
  .payouts-block { max-width: 704px; }
  .payouts-table { max-width: 704px; }
  .col-exchange { left: 0px; text-align: left; }
  .col-uid { left: 180px; text-align: left; }
  .col-amount { left: 350px; text-align: left; }
  .col-status { left: 586px; width: 118px; text-align: center; }
  .payout-uid { left: 180px; }
  .payout-amount { left: 350px; }
  .payout-row .status-badge { left: 586px; }
  
  .how-block { max-width: 704px; }
  .how-block h2 { font-size: 28px; line-height: 36px; }
  .how-cards { gap: 16px; flex-wrap: nowrap; justify-content: center; }
  .how-card { width: 224px; height: 198px; }
  .shape-desktop, .shape-laptop, .shape-mobile { display: none; }
  .shape-tablet { display: block; width: 100%; height: 100%; }
  .how-card-content { left: 28px; top: 24px; width: 168px; gap: 12px; }
  .how-card-content h3 { font-size: 18px; line-height: 22px; letter-spacing: 0.08px; }
  .how-card-content p { font-size: 16px; line-height: 24px; }
  .how-card-step { width: 40px; height: 40px; right: 0; top: 0; font-size: 16px; line-height: 16px; letter-spacing: 0.05px; }
  
  /* Force Dashboard row layout on 1024px */
  .dashboard-row { max-width: 744px; gap: 20px; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; }
  .current-period-info { width: calc(50% - 10px); max-width: none; align-items: flex-start; text-align: left; }
  .current-period-title { text-align: left; width: 360px; font-size: 26px; line-height: 34px; }
  .wallet-details { align-items: flex-start; text-align: left; }
  .all-time-card { width: calc(50% - 10px); max-width: none; height: auto; min-height: 370px; padding: 40px 32px; gap: 32px; }
  .all-time-header h3, .all-time-header p { text-align: left; }
  
  .daily-stats-card { max-width: 744px; }
  
  /* History Modal Adaptivity */
  .history-modal-content { width: calc(100% - 40px) !important; max-width: 892px !important; height: auto; min-height: 658px; padding: 40px 32px; margin: 0 auto; }
  .history-block { width: 100%; max-width: 780px; margin: 0 auto; gap: 48px; }
  .history-title { font-size: 28px; line-height: 36px; }
  .history-table { width: 100%; max-width: 780px; margin: 0 auto; gap: 24px; }
  .history-head, .history-content, .history-row { width: 100%; }
  .col-hist-period, .hist-period { left: 0%; font-size: 16px; line-height: 16px; text-align: left; }
  .col-hist-date, .hist-date { left: 25%; font-size: 16px; line-height: 16px; text-align: left; }
  .col-hist-amount, .hist-amount { left: 50%; font-size: 16px; line-height: 16px; text-align: left; }
  .col-hist-status { left: auto; right: 0; width: 120px; font-size: 16px; line-height: 16px; text-align: center; }
  .history-row .status-badge { left: auto; right: 0; width: 120px; height: 28px; padding: 4px 12px; border-radius: 80px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; }
  .history-row .status-badge-text { font-size: 14px; line-height: 14px; }

  /* Partners Block Adaptivity - exactly 3 per row */
  .partners-block { max-width: 744px; }
  .partners-cards { gap: 16px; justify-content: center; }
  .partner-card { width: calc((100% - 32px) / 3); padding: 24px 12px; gap: 20px; border-radius: 28px; box-sizing: border-box; align-items: center; display: flex; flex-direction: column; justify-content: space-between; }
  .partner-card-content { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
  .partner-card-top { flex-direction: column; align-items: center; gap: 12px; width: 100%; text-align: center; }
  .partner-logo { width: 48px; height: 48px; }
  .partner-card-text { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
  .partner-card-text h3 { font-size: 18px; line-height: 22px; text-align: center; margin: 0; }
  .partner-card-text p { font-size: 14px; line-height: 20px; text-align: center; margin: 0; }
  .partner-btn { width: 100%; max-width: 160px; height: 44px; padding: 0 8px 0 16px; margin: 0 auto; }
  .partner-btn-text { font-size: 14px; line-height: 14px; }
  .partner-btn-icon { width: 30px; height: 30px; }
  .partner-btn-icon svg { width: 16px; height: 16px; }

  .finance-bg .spot-1 { left: 893px; top: 925px; }
  .finance-bg .spot-2 { left: -415px; top: 1272px; }
  .finance-bg .spot-3 { left: -700px; top: 355px; }
  .finance-bg .spot-4 { left: 707px; top: -32px; }
}

@media (max-width: 768px) {
  .spot-1 { left: 364px; top: 1037px; }
  .spot-2 { left: -530px; top: 1414px; }
  .spot-3 { left: 172px; top: 1951px; }
  .spot-4 { left: -354px; top: 3317px; }
  .friends-bg .spot-1 { left: calc(50% - 20px); top: -140px;}
  .friends-bg .spot-2 { left: calc(50% - 914px); top: 237px;}
  .ref-top-wrap { gap: 80px; }
  .ref-block, .trc-block, .prof-exchanges { max-width: 704px; }
  .ref-text h1 { font-size: 28px; line-height: 36px; }
  .ref-text p { font-size: 16px; line-height: 24px; }
  .ref-input-group { max-width: 464px; gap: 8px; }
  .ref-input-wrapper { height: 56px; padding: 0 20px; }
  .ref-socials { gap: 16px; width: 100%; justify-content: center; }
  .social-btn { width: 40px; height: 40px; }
  .ref-cards { max-width: 463px; gap: 16px; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ref-card { flex: none; width: 223px; height: 136px; padding: 32px; gap: 8px; min-width: unset; }
  .ref-card-value { font-size: 18px; line-height: 22px; }
  .ref-card-label { font-size: 14px; line-height: 20px; }
  .profile-bg .spot-1 { left: 673px; top: 925px; }
  .profile-bg .spot-2 { left: -311px; top: 1304px; }
  .profile-bg .spot-3 { left: -764px; top: 331px; }
  .profile-bg .spot-4 { left: 443px; top: -32px; }
  .trc-block { max-width: 704px; }
  .trc-input-wrapper { max-width: 465px; }
  .prof-exchanges { max-width: 704px; }
  .prof-cards { gap: 16px; justify-content: center; max-width: 704px; }
  .prof-card { width: 224px; height: 250px; padding: 28px 8px; justify-content: flex-start; }
  .prof-card-inner { flex-direction: column; align-items: center; gap: 16px; width: 168px; height: 194px; }
  .prof-card-top { flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; width: 168px; height: auto;}
  .prof-logo { width: 56px; height: 56px; }
  .prof-card-info { align-items: center; text-align: center; gap: 8px; }
  .prof-card-info h3 { text-align: center; font-size: 18px; line-height: 22px; }
  .prof-card-info p { text-align: center; font-size: 16px; line-height: 24px; }
  .prof-input-wrap, .prof-input-wrap.connected, .prof-connect-btn { width: 168px; height: 48px; }
  .prof-input-wrap input { font-size: 16px; }
  .auth-nav { display: none !important; }
  .header-right-auth .logout-btn { display: none !important; }
  .menu-burger-btn.auth-burger { display: flex !important; }

  .dashboard-row { max-width: 704px; gap: 16px; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; }
  .current-period-info { width: calc(50% - 8px); max-width: none; gap: 24px; align-items: flex-start; text-align: left; }
  .current-period-title { text-align: left; width: 100%; font-size: 24px; line-height: 32px; margin-top: 26px; }
  .wallet-details { align-items: flex-start; text-align: left; }
  .wallet-input-field { width: 100%; max-width: 322px; }
  
  .history-btn { margin: 0; width: 100%; max-width: 239px; height: 48px; padding: 0 8px 0 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; box-sizing: border-box; }
  .history-btn-text { font-size: 16px; line-height: 16px; flex: none; text-align: left; display: block;}
  .history-btn-icon { width: 32px; height: 32px; padding: 0; display: flex; justify-content: center; align-items: center; }
  
  .all-time-card { width: calc(50% - 8px); max-width: none; height: auto; min-height: 366px; padding: 32px 24px; gap: 24px; }
  .all-time-header h3, .all-time-header p { text-align: left; }

  .daily-stats-card { max-width: 704px; padding: 40px; gap: 32px; }
  
  .payouts-head { display: flex; align-items: center; padding-left: 0; position: relative; }
  .col-exchange, .col-status { display: none !important; }
  .col-uid { position: static; display: block !important; flex: 1; font-size: 14px; text-align: left; }
  .col-amount { position: static; display: block !important; flex: 1; font-size: 14px; text-align: left; }
  .payout-row { display: flex; align-items: center; height: auto; min-height: 32px; gap: 10px; position: relative; width: 100%; }
  .payout-exchange { position: static; display: flex !important; flex: 0 0 28px; }
  .payout-exchange .exchange-name { display: none !important; }
  .payout-uid { position: static; display: block !important; flex: 1; font-size: 14px; text-align: left; }
  .payout-amount { position: static; display: block !important; flex: 1; font-size: 14px; text-align: left; }
  
  /* Только для главной страницы: прижимаем статус вправо */
  .payout-row .status-badge { position: absolute; right: 0; top: 4px; flex: none; background: transparent !important; padding: 0; width: 24px; height: 24px; display: flex !important; left: auto;}
  .payout-row .status-badge-text { display: none !important; }

  /* History Modal Adaptivity */
  .history-modal-content { width: calc(100% - 32px) !important; max-width: 704px !important; height: auto; min-height: 542px; padding: 40px 24px; margin: 0 auto; }
  .history-block { width: 100%; max-width: 656px; margin: 0 auto; gap: 40px; }
  .history-table { width: 100%; max-width: 656px; margin: 0 auto; }
  .history-head, .history-content, .history-row { width: 100%; }
  .col-hist-period, .hist-period { left: 0%; font-size: 14px; line-height: 14px; text-align: left; display: block !important; }
  .col-hist-date, .hist-date { left: 22%; font-size: 14px; line-height: 14px; text-align: left; }
  .col-hist-amount, .hist-amount { left: 45%; font-size: 14px; line-height: 14px; text-align: left; }
  .col-hist-status { left: auto; right: 0; width: 108px; font-size: 14px; line-height: 14px; text-align: center; display: block !important; }
  .history-row .status-badge { left: auto; right: 0; width: 108px; height: 28px; padding: 4px 12px; border-radius: 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
  .history-row .status-badge-text { font-size: 14px; line-height: 14px; margin: 0; padding: 0; display: block !important; text-align: center; }
  .history-row .status-badge-icon { display: none !important; }
  
  /* Partners Block Adaptivity - exactly 3 per row */
  .partners-block { max-width: 704px; }
  .partners-cards { gap: 16px; justify-content: center; }
  .partner-card { width: calc((100% - 32px) / 3); padding: 24px 8px; gap: 16px; box-sizing: border-box; align-items: center; display: flex; flex-direction: column; justify-content: space-between; }
  .partner-card-content { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
  .partner-card-top { flex-direction: column; align-items: center; gap: 12px; width: 100%; text-align: center; }
  .partner-logo { width: 40px; height: 40px; }
  .partner-card-text { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
  .partner-card-text h3 { font-size: 16px; line-height: 20px; text-align: center; margin: 0; }
  .partner-card-text p { font-size: 12px; line-height: 18px; text-align: center; margin: 0; }
  .partner-btn { width: 100%; max-width: 130px; height: 40px; padding: 0 6px 0 12px; margin: 0 auto; }
  .partner-btn-text { font-size: 12px; line-height: 12px; }
  .partner-btn-icon { width: 28px; height: 28px; }
  .partner-btn-icon svg { width: 14px; height: 14px; }

  .finance-bg .spot-1 { left: 673px; top: 925px; }
  .finance-bg .spot-2 { left: -311px; top: 1304px; }
  .finance-bg .spot-3 { left: -764px; top: 331px; }
  .finance-bg .spot-4 { left: 443px; top: -32px; }
}

@media (max-width: 767px) {
  .bg-hero { height: 800px; background: url("images/bg_mob.png") center/cover no-repeat; }
  .bg-spot { width: 640px; height: 370px; transform: translateZ(0); }
  .spot-1 { left: -11px; top: 967px; }
  .spot-2 { left: 12px; top: 2321px; }
  .spot-3 { left: -254px; top: 1589px; }
  .spot-4 { width: 640px; height: 371px; left: 83px; top: 3774px; }
  .friends-bg .spot-1 { width: 457.25px; height: 401.16px; left: -148px; top: 385.84px;}
  .friends-bg .spot-2 { width: 457.25px; height: 401.16px; left: 51.75px; top: 0px;}
  .profile-bg .spot-1 { width: 417.58px; height: 401.16px; left: -151.99px; top: 385.84px;}
  .profile-bg .spot-2 { width: 417.58px; height: 401.16px; left: 30.42px; top: 0px;}
  .profile-bg .spot-3 { width: 417.58px; height: 401.16px; left: 159.42px; top: 1197px; display: block;}
  .profile-bg .spot-4 { width: 417.58px; height: 401.16px; left: -194px; top: 2239px; display: block;}
  .finance-bg .spot-1 { width: 338.48px; height: 401.16px; left: -187px; top: 385.84px;}
  .finance-bg .spot-2 { width: 338.48px; height: 401.16px; left: 170.52px; top: 0px;}
  .finance-bg .spot-3 { width: 338.48px; height: 401.16px; left: 199px; top: 1136px; display: block;}
  .finance-bg .spot-4 { display: none; }
  
  .main, .profile-main, .finance-main, .ref-main { padding: 40px 16px 80px !important; width: 100%; max-width: 360px; margin: 0 auto; box-sizing: border-box; }
  .main { gap: 96px; }
  .profile-main, .finance-main, .ref-main { gap: 56px; }
  
  .hero-block { max-width: 328px; gap: 56px; }
  .menu-bar { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0px; width: 100%; max-width: 328px; height: 56px; margin: 0 auto; gap: 0; }
  .brand { margin: 0; width: auto; height: 20px; font-family: 'Golos Text', sans-serif; font-style: normal; font-weight: 700; font-size: 16px; line-height: 20px; color: rgba(255, 255, 255, 0.9); text-shadow: 0px 0px 32px rgba(150, 147, 163, 0.16); }
  
  .menu-login-btn { width: 40px !important; padding: 0 !important; justify-content: center !important; }
  .menu-login-btn span:not(.menu-login-icon) { display: none !important; }
  .menu-login-icon { margin: 0 !important; padding: 0 !important; width: 24px !important; height: 24px !important; display: flex !important; }
  
  .menu-burger-btn, .auth-burger { display: flex !important; flex-direction: row; justify-content: center; align-items: center; padding: 0px; width: 40px; height: 40px; background: var(--glass); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 80px; flex: none; order: 1; }
  
  .cashback-counter { display: flex; flex-direction: row; align-items: center; padding: 0 16px; height: 40px; width: auto; min-width: 90px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 40px; justify-content: center; }
  .counter-label { display: none !important; }
  .counter-divider { display: none !important; }
  .counter-value { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 14px; line-height: 20px; color: #1FF27C; margin: 0; padding: 0; }

  .hero-title { gap: 40px; width: 100%; }
  .hero-title-text { gap: 16px; width: 100%; }
  .hero-title-text h1 { font-size: 36px; line-height: 42px; }
  .hero-stats { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; max-width: 326px; height: 71px; gap: 0; margin: 0 auto; }
  .hero-stat { flex: none; width: auto; align-items: center; gap: 8px;}
  .hero-stat strong { font-size: 18px; line-height: 22px; font-weight: 600; margin: 0;}
  .hero-stat span { font-size: 14px; line-height: 20px; }
  .hero-divider { width: 1px; height: 71px; background: rgba(255, 255, 255, 0.2); }
  .primary-pill-btn { width: 254px; height: 56px; padding: 0 8px 0 28px; justify-content: space-between; margin: 0 auto;}

  .payouts-block { width: 100%; max-width: 328px; gap: 40px; height: 430px; }
  .payouts-block h2 { width: 235px; font-size: 24px; line-height: 32px; margin: 0 auto; text-align: center; }
  .payouts-table { width: 100%; gap: 20px; }
  
  .payouts-head { display: block; position: relative; height: 36px; border-bottom: 1px solid rgba(255,255,255,0.2); padding: 0; width: 100%;}
  .col-exchange, .col-status { display: none !important; }
  .col-uid { position: absolute; left: 60px; top: 0; font-size: 16px; line-height: 16px; color: var(--text-70); text-align: left; display: block !important;}
  .col-amount { position: absolute; left: 172px; top: 0; font-size: 16px; line-height: 16px; color: var(--text-70); text-align: left; display: block !important;}
  .payouts-content { width: 100%; gap: 20px; display: flex; flex-direction: column;}
  .payout-row { display: block; width: 100%; height: 32px; position: relative; }
  .payout-exchange { position: absolute; left: 0; top: 2px; width: 28px; height: 28px; display: flex !important; }
  .payout-exchange .exchange-name { display: none !important; }
  .payout-uid { position: absolute; left: 60px; top: 8px; width: 70px; font-size: 16px; line-height: 16px; color: var(--text-70); text-align: left; display: block !important;}
  .payout-amount { position: absolute; left: 172px; top: 8px; width: 116px; font-size: 16px; line-height: 16px; font-weight: 600; letter-spacing: 0.05px; color: var(--white); text-align: left; display: block !important;}
  
  /* Только для главной страницы: прижимаем статус вправо */
  .payout-row .status-badge { position: absolute; right: 0; top: 4px; flex: none; background: transparent !important; padding: 0; width: 24px; height: 24px; display: flex !important; left: auto;}
  .payout-row .status-badge-text { display: none !important; }

  .how-block { width: 100%; max-width: 328px; gap: 40px; }
  .how-block h2 { font-size: 24px; line-height: 32px; width: 100%; text-align: center; margin: 0; }
  .how-cards { flex-direction: column; gap: 16px; width: 100%; }
  .how-card { width: 100%; height: 152px; }
  .shape-desktop, .shape-laptop, .shape-tablet { display: none; }
  .shape-mobile { display: block; width: 100%; height: 152px; object-fit: contain;}
  .how-card-content { left: 24px; top: 24px; width: 280px; gap: 12px; }
  .how-card-content h3 { font-size: 18px; line-height: 22px; width: 218px; margin: 0; }
  .how-card-content p { font-size: 16px; line-height: 24px; width: 280px; }
  .how-card-step { position: absolute; right: -1px; top: 0; width: 56px; height: 56px; }

  .calculator-block { width: 100%; max-width: 328px; gap: 56px; }
  .calculator-layout { flex-direction: column; gap: 40px; width: 100%; }
  .calculator-text-side { gap: 16px; width: 100%; }
  .calculator-title-group { display: flex; flex-direction: column; gap: 16px; width: 100%; align-items: center; }
  .calculator-title-group h2 { font-size: 24px; line-height: 32px; width: 100%; text-align: center; margin: 0;}
  .calculator-title-group p { font-size: 16px; line-height: 24px; width: 272px; margin: 0 auto; text-align: center;}
  .calculator-card { width: 100%; gap: 32px; align-items: center; padding: 0; background: transparent; }
  .calculator-tabs { width: 248px; height: 32px; margin: 0 auto 32px; justify-content: space-between; display: flex;}
  .calculator-tab { width: 124px; flex: none; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px; padding: 0;}
  .calculator-select { width: 100%; }
  .calculator-select-field { width: 100%; height: 64px; }
  .calculator-slider-block { width: 100%; gap: 16px; }
  .calculator-divider { width: 100%; }
  .calculator-summary.calculator-income-row { width: 100%; }
  .primary-pill-btn-wide { width: 248px; height: 56px; margin: 0 auto; }
  .calculator-bottom-meta { display: none; }
  .mobile-note { display: block; margin: 0 auto; font-size: 12px; text-align: center; color: rgba(255,255,255,0.3); line-height: 16px; width: 248px; }

  .partners-block { width: 100%; max-width: 328px; gap: 40px; }
  .partners-text { gap: 16px; width: 100%; }
  .partners-text h2 { font-size: 24px; line-height: 32px; width: 100%; margin: 0; }
  .partners-text p { font-size: 16px; line-height: 24px; width: 100%; margin: 0; }
  .partners-tabs { width: 100%; display: flex; justify-content: space-between; }
  .partners-tab { width: 109px; flex: none; }
  .partners-cards { gap: 16px; width: 100%; justify-content: flex-start; }
  .partner-card { width: 156px; height: 210px; padding: 16px 8px 8px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0;}
  .partner-card-content { display: contents; }
  .partner-card-top { display: flex; flex-direction: column; gap: 16px; align-items: center; width: 140px; height: 122px; }
  .partner-logo { width: 56px; height: 56px; }
  .partner-card-text { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 140px;}
  .partner-card-text h3 { font-size: 18px; line-height: 22px; text-align: center; margin: 0;}
  .partner-card-text p { font-size: 16px; line-height: 24px; display: block; text-align: center; margin: 0;} 
  .partner-btn { width: 137px; height: 48px; padding: 0 8px 0 14px; border-radius: 80px; justify-content: space-between; margin: 0 auto; flex: none;}
  .partner-btn-text { font-size: 16px; line-height: 16px; display: block; width: auto; flex: none;}
  .hide-mobile { display: none !important; }
  .partner-btn-icon { margin: 0; width: 32px; height: 32px; padding: 0; align-items: center; justify-content: center;}
  .partner-btn-icon svg { width: 16px; height: 16px; }

  .faq-block { width: 100%; max-width: 328px; gap: 20px; }
  .faq-block h2 { font-size: 24px; line-height: 32px; width: 261px; }
  .faq-accordion { width: 100%; }
  .faq-item { padding: 20px 24px; }
  .faq-item-title { font-size: 16px; line-height: 20px; }

  .footer-block { display: flex; flex-direction: column; align-items: center; padding: 0px; gap: 32px; width: 100%; max-width: 328px; height: 104px; margin: auto auto 0 auto; flex: none; justify-content: center; }
  .footer-links { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0px; gap: 12px; width: 100%; max-width: 328px; height: 52px; margin: 0; align-self: stretch; flex: none; order: 0; }
  .footer-links a { width: 220px; height: 20px; font-family: 'Golos Text', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; text-align: center; color: rgba(255, 255, 255, 0.7); flex: none; }
  .footer-copy { width: 127px; height: 20px; font-family: 'Golos Text', sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.7); flex: none; order: 1; text-align: center; margin: 0; }

  .trc-block { max-width: 328px; gap: 16px; }
  .trc-text h2 { font-size: 24px; line-height: 32px; }
  .trc-inputs-group { max-width: 328px; gap: 8px; }
  .trc-notification { padding: 12px 16px; }
  .trc-save-btn-new { width: 100%; margin-top: 12px; }
  .prof-exchanges { max-width: 328px; gap: 40px; }
  .prof-cards { gap: 16px; flex-direction: column; align-items: center; width: 100%; max-width: 328px;}
  .prof-card { width: 100%; max-width: 328px; height: 184px; padding: 24px 8px; justify-content: center; flex-direction: column; }
  .prof-card-inner { flex-direction: column; align-items: center; gap: 20px; width: 280px; height: 136px; }
  .prof-card-top { flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; width: 280px; height: 68px; }
  .prof-logo { width: 68px; height: 68px; }
  .prof-card-info { align-items: flex-start; text-align: left; gap: 8px;}
  .prof-card-info h3 { text-align: left; font-size: 18px; line-height: 22px;}
  .prof-card-info p { text-align: left; font-size: 16px; line-height: 24px;}
  .prof-input-wrap, .prof-input-wrap.connected, .prof-connect-btn { width: 280px; height: 48px; }

  .ref-top-wrap { gap: 56px; flex-grow: 1; }
  .ref-block { max-width: 328px; gap: 40px; margin-top: 0px; }
  .ref-text h1 { font-size: 24px; line-height: 32px; }
  .ref-text p { font-size: 16px; line-height: 24px; }
  .ref-input-group { max-width: 326px; }
  .ref-input-label { font-size: 12px; line-height: 12px; }
  .ref-input-field { font-size: 16px; line-height: 16px; }
  .ref-socials { gap: 16px; width: 100%; justify-content: center; }
  .ref-cards { flex-direction: column; gap: 16px; max-width: 326px; height: auto; }
  .ref-card { width: 100%; min-width: unset; height: 118px; padding: 24px; }

  /* Force Dashboard layout on 767px */
  .dashboard-row { flex-direction: column; width: 100%; max-width: 328px; gap: 56px; align-items: center; margin: 0 auto; text-align: center; }
  .current-period-info { width: 328px; align-items: center; text-align: center; gap: 28px; }
  .current-period-title { text-align: center; width: 329px; font-size: 24px; line-height: 32px; }
  .wallet-details { align-items: center; text-align: center; width: 100%; }
  .wallet-input-field { width: 328px; padding: 0 20px; align-items: center; justify-content: center; text-align: center; }
  .wallet-input-field input { text-align: center; }
  .wallet-label { display: none; }
  
  /* Restored mobile button design */
  .history-btn { margin: 4px auto 0 auto; width: 239px; height: 48px; padding: 0 8px 0 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-radius: 80px; box-sizing: border-box; }
  .history-btn-text { font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 16px; line-height: 16px; letter-spacing: 0.05px; color: rgba(255, 255, 255, 0.9); white-space: nowrap; text-align: left; flex: 1; display: block; margin: 0; padding: 0; }
  .history-btn-icon { width: 32px; height: 32px; background: #1FF27C; border-radius: 80px; display: flex; justify-content: center; align-items: center; flex: none; padding: 0; margin: 0; }
  .history-btn-icon svg { width: 16px; height: 16px; transform: matrix(1, 0, 0, -1, 0, 0); }
  
  .all-time-card { width: 100%; max-width: 360px; height: 326px; padding: 24px; gap: 28px; }
  .all-time-header h3 { font-size: 18px; line-height: 22px; text-align: center; }
  .all-time-header p { font-size: 16px; line-height: 24px; text-align: center; }
  
  .daily-stats-card { width: 100%; max-width: 328px; padding: 24px; gap: 28px; align-items: center; box-sizing: border-box;}
  
  .stats-header { display: flex; flex-direction: column; align-items: center; padding: 0px; gap: 20px; width: 280px; height: 86px; margin: 0 auto; justify-content: flex-start; }
  .stats-header h2 { width: 280px; font-weight: 600; font-size: 18px; line-height: 22px; text-align: center; letter-spacing: 0.08px; margin: 0; color: rgba(255, 255, 255, 0.9); }
  .stats-tabs { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 4px; width: 280px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 80px; box-sizing: border-box; margin: 0;}
  .stats-tab { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0px 10px; width: 136px; height: 36px; border-radius: 40px; font-size: 14px; white-space: nowrap; text-align: center; line-height: 14px; }
  .stats-tab.active { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
  /* Обновленная легенда для мобильных экранов */
  .stats-filters { width: 100%; justify-content: flex-end; flex-wrap: wrap; height: auto; gap: 16px; }
  .filter-box { width: 20px; height: 20px; }
  .filter-icon { width: 16px; height: 16px; }
  .filter-text { font-size: 16px; line-height: 16px; }

  /* History Modal Adaptivity for 360px */
  .history-modal-content { width: calc(100% - 32px) !important; max-width: 328px !important; height: auto; min-height: 606px; padding: 40px 24px 24px !important; border-radius: 32px; margin: 0 auto; }
  .history-block { width: 100%; max-width: 280px; height: auto; gap: 32px; margin: 0 auto; }
  .history-title { width: 100%; font-size: 24px; line-height: 32px; text-align: left; margin: 0; }
  .history-table { width: 100%; max-width: 280px; height: auto; gap: 20px; position: relative; }
  .history-head { width: 100%; max-width: 280px; height: 34px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); position: relative; }
  
  .col-hist-period, .hist-period { display: none !important; }
  
  .col-hist-date, .hist-date { position: absolute; left: 0px; font-size: 14px; line-height: 14px; text-align: left; white-space: nowrap; }
  .col-hist-amount, .hist-amount { position: absolute; left: 70px; font-size: 14px; line-height: 14px; text-align: left; white-space: nowrap; }
  .col-hist-status { position: absolute; left: auto; right: 0; width: 100px; font-size: 14px; line-height: 14px; text-align: center; display: block !important; }
  
  .col-hist-date, .col-hist-amount, .col-hist-status { top: 0px; }
  .hist-date, .hist-amount { top: 7px; }
  
  .history-content { width: 100%; max-width: 280px; height: 424px; gap: 16px; padding-right: 0px; display: flex; flex-direction: column; }
  .history-row { width: 100%; max-width: 280px; height: 28px; position: relative; display: block; }
  
  .history-row .status-badge { position: absolute; left: auto; right: 0; top: 0px; width: 100px; height: 28px; padding: 4px 8px; border-radius: 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; }
  .history-row .status-badge-text { font-size: 13px; line-height: 13px; margin: 0; padding: 0; display: block !important; text-align: center; white-space: nowrap; }
  .history-row .status-badge-icon { display: none !important; }
  
  .modal-close-btn { right: 4px; top: 4px; }

  /* Success Modals overrides for 360px */
  .success-modal-content { width: 328px !important; min-height: auto; padding: 40px 24px !important; }
  .success-body { max-width: 280px; gap: 24px; }
  .success-text { gap: 16px; }
  .success-text h2 { font-size: 24px; line-height: 32px; }
  .success-text p { font-size: 16px; line-height: 24px; }

  .modal-content { width: 328px; padding: 40px 24px; border-radius: 32px; }
  .modal-body { gap: 28px; width: 280px; }
  .modal-header, .modal-form, .modal-submit-btn, .modal-footer-links { width: 280px; }
  .modal-options { flex-direction: column-reverse; height: auto; gap: 20px; align-items: flex-start; width: 280px; }
  .forgot-pass { width: 100%; text-align: right; font-size: 16px; line-height: 16px; }
  .checkbox-text { font-size: 16px; line-height: 16px; }
  .modal-header h2 { font-size: 24px; line-height: 32px; }
  .modal-header p { font-size: 16px; line-height: 24px; }
  .modal-submit-btn { height: 48px; font-size: 16px; margin-top: 0; }
  .modal-footer-links { flex-direction: column; gap: 16px; }
  .no-account, .register-link { font-size: 16px; line-height: 16px; }
  .connect-submit-btn { width: 280px; height: 48px; font-size: 16px; margin-top: 0; }
}

/* ==========================================================================
   FLOATING LABEL & ERROR STATE FOR MODAL INPUT (FIGMA SYNC)
   ========================================================================== */
.connect-input-wrapper { display: flex; flex-direction: column; gap: 4px; width: 100%; }

/* State=Default, Size=Large */
.connect-input-field { 
  position: relative; display: flex; flex-direction: row; align-items: center; 
  padding: 0 24px; height: 64px; 
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; 
  background: transparent; transition: border-color 0.3s; box-sizing: border-box;
}

/* State=Focused / State=Active */
.connect-input-field:focus-within { border-color: #1FF27C; }

/* State=Error */
.connect-input-field.error { border-color: #FF0D0D !important; }

/* State=Success */
.connect-input-field.success { border-color: #1FF27C !important; }

/* State=Disabled */
.connect-input-field:has(input:disabled) { border-color: rgba(255, 255, 255, 0.2) !important; pointer-events: none; }

.connect-input-inner { position: relative; display: flex; flex-direction: column; justify-content: center; flex: 1; height: 100%; }

/* Input Base */
.floating-input { 
  width: 100%; height: 100%; background: transparent; border: none; outline: none; 
  font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px; 
  color: rgba(255, 255, 255, 0.9); padding-top: 16px; z-index: 1; 
}
.floating-input::placeholder { color: transparent; }

/* State=Disabled (Input) */
.floating-input:disabled { color: rgba(255, 255, 255, 0.3); -webkit-text-fill-color: rgba(255, 255, 255, 0.3); opacity: 1; }

/* Label Base */
.floating-label { 
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); 
  font-family: 'Golos Text', sans-serif; font-weight: 400; font-size: 18px; line-height: 18px;
  color: rgba(255, 255, 255, 0.7); transition: all 0.2s ease; pointer-events: none; z-index: 0; 
}

/* State=Focused (Label) */
.floating-input:focus ~ .floating-label { 
  top: 18px; font-size: 14px; line-height: 14px; color: #FFFFFF; 
}

/* State=Filled (Label) */
.floating-input:not(:placeholder-shown):not(:focus) ~ .floating-label { 
  top: 18px; font-size: 14px; line-height: 14px; color: rgba(255, 255, 255, 0.5); 
}

/* State=Disabled (Label) */
.floating-input:disabled ~ .floating-label { color: rgba(255, 255, 255, 0.3) !important; }

/* Icons (Eye / Close) */
.connect-error-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 12px; cursor: pointer; transition: opacity 0.3s; flex: none; }
.connect-error-icon:hover { opacity: 0.7; }
.connect-error-icon path, .eye-btn path, .eye-btn circle { stroke: rgba(255, 255, 255, 0.5); transition: stroke 0.3s; }

/* Disabled Icons */
.floating-input:disabled ~ .connect-error-icon path, 
.floating-input:disabled ~ .eye-btn path, 
.floating-input:disabled ~ .eye-btn circle { stroke: rgba(255, 255, 255, 0.3); }

/* Notification Texts */
.connect-error-text { font-family: 'Golos Text', sans-serif; font-size: 12px; line-height: 16px; color: rgba(255, 255, 255, 0.5); padding-left: 4px; display: none; }
.connect-input-field.error + .connect-error-text { color: #FF0D0D; }
.connect-input-field.success + .connect-error-text { color: #1FF27C; }

/* ==========================================================================
   ПОЛЕ КОШЕЛЬКА (СОСТОЯНИЕ ПОСЛЕ СОХРАНЕНИЯ)
   ========================================================================== */
.trc-input.floating-input:disabled ~ .floating-label { display: none; }
.trc-input.floating-input:disabled { padding-top: 0; color: rgba(255, 255, 255, 0.5); -webkit-text-fill-color: rgba(255, 255, 255, 0.5); text-align: left; }

@media (max-width: 767px) {
    .trc-input.floating-input:disabled { text-align: center; }
}

/* ==========================================================================
   MOBILE OVERRIDES FOR SIZE=REGULAR
   ========================================================================== */
@media (max-width: 767px) {
  .connect-input-field { padding: 0 20px; height: 56px; }
  .floating-input { font-size: 16px; line-height: 16px; padding-top: 14px; }
  .floating-label { font-size: 16px; line-height: 16px; }
  
  .floating-input:focus ~ .floating-label,
  .floating-input:not(:placeholder-shown):not(:focus) ~ .floating-label { 
    top: 16px; font-size: 12px; line-height: 12px; 
  }
}

/* ==========================================================================
   ИКОНКИ В БОКОВОМ МЕНЮ (ЧЕРНЫЕ)
   ========================================================================== */
@media (max-width: 1023px) {
  #mobileMenuLoginBtn .mobile-menu-btn-icon img,
  #mobileMenuLogoutBtn .mobile-menu-btn-icon img {
    filter: brightness(0); /* Делает иконку черной на планшетах и мобильных */
  }
}

/* ==========================================================================
   ТЕКСТ В FAQ (АККОРДЕОН) ДЛЯ ПЛАНШЕТОВ И МОБИЛЬНЫХ
   ========================================================================== */
@media (max-width: 1023px) {
  .faq-item-body {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Делаем только numeric value в блоке "Ваша выгода" зеленым */
.period-sum-digits {
  color: #1FF27C; /* Green color from your palette */
}

/* ==========================================================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА (БАЗОВЫЕ СТИЛИ)
   ========================================================================== */
.lang-switch-btn {
  width: 40px;
  height: 40px;
  background: var(--glass);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Golos Text', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  flex: none;
}

/* ==========================================================================
   ЕДИНЫЙ HOVER И РАМКИ ДЛЯ КНОПОК В ШАПКЕ
   (Счетчик, Язык, Выход, Бургер)
   ========================================================================== */
.cashback-counter,
.mobile-cashback-counter,
.lang-switch-btn,
.logout-btn,
.menu-burger-btn,
.auth-burger {
  border: 1px solid transparent !important;
  transition: all 0.3s ease !important;
}

.cashback-counter:hover,
.mobile-cashback-counter:hover,
.lang-switch-btn:hover,
.logout-btn:hover,
.menu-burger-btn:hover,
.auth-burger:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}