/* =========================================
   1. ШРИФТЫ И БАЗОВЫЕ НАСТРОЙКИ
========================================= */
@font-face { font-family: 'BingXSans-Semibold'; src: url('fonts/BingXSans-Semibold.woff2') format('woff2'); }
@font-face { font-family: 'BingXSans-Medium'; src: url('fonts/BingXSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'BingXSans-Regular'; src: url('fonts/BingXSans-Regular.woff2') format('woff2'); }

body {
    margin: 0; padding: 0; background-color: #121212; color: #ffffff;
    font-family: 'BingXSans-Medium', -apple-system, sans-serif;
    display: flex; flex-direction: column; align-items: center;
}

/* =========================================
   2. ХОЛСТ КАРТОЧКИ И СРАВНЕНИЕ
========================================= */
.compare-box {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin-bottom: 20px;
}

.card-wrapper {
    width: 324px;
    height: 420px;
    position: relative;
}

.card-preview {
    width: 1080px; 
    height: 1400px; 
    background-image: url('images/bg.jpg'); 
    background-size: cover;
    position: absolute;
    top: 0; left: 0;
    transform: scale(0.3); 
    transform-origin: top left; 
}

.ideal-card {
    width: 1080px; 
    height: 1400px; 
    position: absolute;
    top: 0; left: 0;
    transform: scale(0.3); 
    transform-origin: top left;
}
.ideal-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
}

/* =========================================
   3. ГЛАВНЫЙ КОНТЕЙНЕР ДЛЯ ТЕКСТА
========================================= */
.card-content {
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%;
}

/* =========================================
   4. БАЗОВЫЕ СТИЛИ И СОСТОЯНИЕ 1 (Включено ВСЁ)
========================================= */

/* --- 4.1 Торговая пара и Бессрочные --- */
.card-header { 
    position: absolute; 
    top: 320px;  
    left: 56px;  
    display: flex; align-items: baseline; gap: 24px; 
}
.symbol { font-family: 'BingXSans-Medium'; font-size: 56px; color: #fff; }
.perpetual { font-family: 'BingXSans-Medium'; font-size: 38px; color: #fff; }

/* --- 4.2 Лонг | 20X | Позиция активна --- */
.trade-info { 
    position: absolute;
    top: 404px;  
    left: 56px;  
    display: flex; align-items: center; gap: 10px; 
    font-family: 'BingXSans-Regular'; font-size: 40px; 
}
.pipe { 
    width: 3px; 
    height: 34px; 
    background-color: #5a5a5a; 
    transform: translateY(2px);
}

/* --- 4.3 Гигантские проценты (ROI) --- */
.roi-text { 
    position: absolute;
    top: 522px;  
    left: 56px;  
    font-family: 'BingXSans-Semibold'; 
    font-size: 125px; 
    line-height: 1; 
    letter-spacing: -3px; 
}

/* --- 4.4 Прибыль USDT --- */
.profit-text { 
    position: absolute;
    top: 671px;  
    left: 56px;  
    font-family: 'BingXSans-Regular'; 
    font-size: 48px; 
    letter-spacing: -1px;
}

/* Когда ROI ВЫКЛЮЧЕН, Прибыль становится гигантской, а слово USDT — поменьше */
.profit-text.profit-giant {
    font-family: 'BingXSans-Semibold';
    font-size: 125px;
    line-height: 1;
    letter-spacing: -3px;
}
.profit-text.profit-giant .usdt-unit {
    font-family: 'BingXSans-Medium';
    font-size: 50px;
    letter-spacing: -1px;
    margin-left: 8px;
}

/* --- 4.5 Блок с ценами и длительностью --- */
.prices-container { 
    position: absolute;
    top: 802px;  
    left: 56px;  
    display: flex; 
    flex-direction: column; 
    gap: 28px;   
}

.price-row {
    display: flex;
    align-items: baseline;
    gap: 20px;   
}

.price-label { 
    font-family: 'BingXSans-Regular'; 
    font-size: 41px; 
    color: #999999; 
} 

.price-value { 
    font-family: 'BingXSans-Medium'; 
    font-size: 42px; 
    color: #fff; 
}

/* =========================================
   4.6 ВСЕ 6 КОМБИНАЦИЙ ГАЛОЧЕК (Независимая настройка)
========================================= */

/* СОСТОЯНИЕ 1: Включено ВСЁ (ROI + Прибыль + Длительность) */
.card-content.state-1-all .card-header      { top: 320px; }
.card-content.state-1-all .trade-info       { top: 404px; }
.card-content.state-1-all .roi-text         { top: 522px; }
.card-content.state-1-all .profit-text      { top: 671px; }
.card-content.state-1-all .prices-container { top: 802px; }

/* СОСТОЯНИЕ 2: ROI + Прибыль (БЕЗ Длительности) — все блоки чуть ниже */
.card-content.state-2-both-no-dur .card-header      { top: 358px; }
.card-content.state-2-both-no-dur .trade-info       { top: 442px; }
.card-content.state-2-both-no-dur .roi-text         { top: 561px; }
.card-content.state-2-both-no-dur .profit-text      { top: 710px; }
.card-content.state-2-both-no-dur .prices-container { top: 841px; }

/* СОСТОЯНИЕ 3: Только ROI (Прибыль ВЫКЛ, Длительность ВКЛ) */
.card-content.state-3-roi-dur .card-header      { top: 354px; }
.card-content.state-3-roi-dur .trade-info       { top: 438px; }
.card-content.state-3-roi-dur .roi-text         { top: 557px; }
.card-content.state-3-roi-dur .prices-container { top: 768px; }

/* СОСТОЯНИЕ 4: Только ROI (Прибыль ВЫКЛ, Длительность ВЫКЛ) */
.card-content.state-4-roi-no-dur .card-header      { top: 393px; }
.card-content.state-4-roi-no-dur .trade-info       { top: 476px; }
.card-content.state-4-roi-no-dur .roi-text         { top: 596px; }
.card-content.state-4-roi-no-dur .prices-container { top: 806px; }

/* СОСТОЯНИЕ 5: Только Прибыль гигантская (ROI ВЫКЛ, Длительность ВКЛ) */
.card-content.state-5-profit-dur .card-header      { top: 356px; }
.card-content.state-5-profit-dur .trade-info       { top: 438px; }
.card-content.state-5-profit-dur .profit-text      { top: 557px; }
.card-content.state-5-profit-dur .prices-container { top: 768px; }

/* СОСТОЯНИЕ 6: Только Прибыль гигантская (ROI ВЫКЛ, Длительность ВЫКЛ) */
.card-content.state-6-profit-no-dur .card-header      { top: 393px; }
.card-content.state-6-profit-no-dur .trade-info       { top: 477px; }
.card-content.state-6-profit-no-dur .profit-text      { top: 595px; }
.card-content.state-6-profit-no-dur .prices-container { top: 806px; }


/* =========================================
   5. ПОДВАЛ КАРТОЧКИ (Абсолютные координаты)
========================================= */
.card-footer {
    position: absolute; 
    bottom: 0px; 
    left: 0; 
    width: 100%; 
    height: 250px;
    box-sizing: border-box;
}

/* --- ЛЕВАЯ ЧАСТЬ: Аватар, Почта, Дата --- */
.user-info { 
    position: absolute;
    top: 70px;   
    left: 56px;  
    display: flex; 
    align-items: center; 
}

.avatar { 
    width: 110px; 
    height: 110px; 
    background-color: transparent; 
    border-radius: 50%; 
}

.email { 
    position: absolute;
    top: -6px;      
    left: 135px;   
    font-family: 'BingXSans-Regular'; 
    font-size: 40px; 
    color: #fff; 
    white-space: nowrap;
}

/* Стандартное положение даты (когда личная информация ВКЛЮЧЕНА) */
.date { 
    position: absolute;
    top: 130px;     
    left: 190px;   
    font-family: 'BingXSans-Regular'; 
    font-size: 36px; 
    color: #666; 
    white-space: nowrap;
    letter-spacing: -2px;
}

/* Положение даты, когда личная информация ВЫКЛЮЧЕНА */
.date.date-shifted {
    top: 102px;     
    left: 56px;    
}

/* --- ПРАВАЯ ЧАСТЬ: Код приглашения и QR --- */
.ref-info { 
    position: absolute;
    top: 70px;    
    right: 56px;  
    width: 400px; 
    height: 120px;
}

.ref-label { 
    position: absolute;
    top: 0px;     
    right: 162px; 
    font-family: 'BingXSans-Regular'; 
    font-size: 34px; 
    color: #666; 
    white-space: nowrap;
}

.ref-code { 
    position: absolute;
    top: 54px;    
    right: 162px; 
    font-family: 'BingXSans-Medium'; 
    font-size: 48px; 
    color: #fff; 
    white-space: nowrap;
}

.qr-code { 
    position: absolute;
    top: -30px;     
    right: -32px;   
    width: 170px; 
    height: 170px; 
    background-color: transparent; 
    border-radius: 10px; 
}

/* =========================================
   6. ПАНЕЛЬ УПРАВЛЕНИЯ И ЦВЕТА (Интерфейс)
========================================= */
.color-green { color: #0ED070; }
.color-red { color: #FF455A; }
.text-gray { color: #999999; }

.status-toggle { display: flex; background: #1e1e1e; border-radius: 8px; padding: 4px; margin: 20px 0; width: 100%; max-width: 500px; }
.status-toggle input { display: none; }
.status-toggle label { flex: 1; text-align: center; padding: 10px; color: #888; cursor: pointer; border-radius: 6px; font-size: 14px; transition: 0.2s; }
.status-toggle input:checked + label { background: #333; color: #fff; font-weight: bold; }

.controls { width: 100%; max-width: 500px; padding: 20px; box-sizing: border-box; background: #121212; z-index: 10; }
.input-group { margin-bottom: 15px; }
.input-group label { display: block; color: #888; font-size: 13px; margin-bottom: 5px; }
.input-group input, .input-group select { width: 100%; background: #1e1e1e; border: 1px solid #333; color: white; padding: 12px; border-radius: 8px; box-sizing: border-box; }

.checkbox-group { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; }
.checkbox-group label { display: flex; align-items: center; cursor: pointer; font-size: 14px; user-select: none; }
.checkbox-group input { margin-right: 8px; width: 18px; height: 18px; }

.card-preview {
    width: 1080px; 
    height: 1400px; 
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0; left: 0;
    transform: scale(0.3); 
    transform-origin: top left; 
}