/* ================================================== */
/* 1. ОБЩИЕ НАСТРОЙКИ И УТИЛИТЫ */
/* ================================================== */
.sidebar .widget:nth-child(6) { display: none; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 20px; }
.section-title { font-size: 2rem; font-weight: 800; margin: 0; color: var(--text-dark); }
.section-actions .hint { font-size: 0.9rem; color: var(--text-medium); }
.tabs { display: flex; gap: 8px; }
.tab-btn { padding: 8px 14px; background: #f3f4f6; border-radius: 10px; color: #374151; font-weight: 600; transition: all .2s ease; border: 1px solid #e5e7eb; cursor: pointer; }
.tab-btn:hover { background: #e5e7eb; }
.tab-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.section { margin-bottom: 40px; }

/* ================================================== */
/* 2. HERO SECTION */
/* ================================================== */
.crypto-hero { background: linear-gradient(135deg, #673ab7 0%, #2196f3 100%); color: #fff; padding: 50px 0 40px; }
.crypto-hero .breadcrumbs { margin-bottom: 20px; font-size: 0.9rem; }
.crypto-hero .breadcrumbs a { color: rgba(255,255,255,0.85); }
.crypto-hero .breadcrumbs a:hover { color: #fff; }
.crypto-hero .separator, .crypto-hero .current { color: rgba(255,255,255,0.95); }
.crypto-hero .hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.crypto-hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 15px; }
.crypto-hero p { font-size: 1.1rem; line-height: 1.6; opacity: 0.95; margin-bottom: 20px; }
.crypto-hero .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.crypto-hero .btn { min-width: 220px; }
.crypto-hero .hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; padding: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.crypto-hero .stat { background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 14px; }
.crypto-hero .stat .label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; margin-bottom: 6px; }
.crypto-hero .stat .value { font-size: 1.3rem; font-weight: 800; }
.crypto-hero .stat .delta { font-size: 0.9rem; font-weight: 700; margin-top: 6px; }
.crypto-hero .stat .delta.pos { color: #22c55e; }
.crypto-hero .stat .delta.neg { color: #ef4444; }

/* ================================================== */
/* 3. ТЕПЛОВАЯ КАРТА (Heatmap) */
/* ================================================== */
.heatmap-container { display: flex; flex-wrap: wrap; gap: 4px; min-height: 400px; padding: 10px; background: #f9fafb; border-radius: 14px; }
.heatmap-item { display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 8px; transition: all .2s ease; cursor: pointer; min-width: 80px; min-height: 60px; flex-grow: 1; }
.heatmap-item.positive { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.heatmap-item.negative { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }
.heatmap-item.neutral { background: #e5e7eb; color: #374151; }
.heatmap-item:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 10; }
.heatmap-content { text-align: center; }
.heatmap-item .symbol { font-weight: 800; font-size: 0.85rem; }
.heatmap-item .change { font-size: 0.75rem; font-weight: 700; }

/* ================================================== */
/* 4. ДВИЖЕНИЯ РЫНКА (Movers) */
/* ================================================== */
.movers-content { margin-top: 10px; }
.movers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.coin-card { background: var(--card-bg); border: 1px solid #e9ecef; border-radius: 14px; padding: 14px; box-shadow: var(--shadow-sm); }
.coin-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coin-left { display: flex; align-items: center; gap: 10px; }
.rank { font-weight: 700; color: #6b7280; width: 26px; text-align: right; }
.icon { width: 28px; height: 28px; border-radius: 50%; }
.info .name { font-weight: 700; color: var(--text-dark); line-height: 1.1; }
.info .sym { font-size: 0.75rem; color: #9ca3af; text-transform: uppercase; }
.coin-right { text-align: right; }
.price { font-weight: 800; }
.change { font-size: 0.85rem; font-weight: 700; }
.change.pos { color: #16a34a; }
.change.neg { color: #dc2626; }
.muted { color: #9ca3af; }

/* ================================================== */
/* 5. ТРЕНДОВЫЕ МОНЕТЫ (Trending) */
/* ================================================== */
.trending-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.trending-card { background: var(--card-bg); border: 1px solid #e9ecef; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: all .2s ease; }
.trending-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.trending-rank { font-weight: 700; color: #fb923c; font-size: 0.85rem; }
.trending-icon { width: 40px; height: 40px; border-radius: 50%; }
.trending-name { font-weight: 700; color: var(--text-dark); }
.trending-symbol { font-size: 0.75rem; color: #9ca3af; text-transform: uppercase; }
.trending-score { color: #f59e0b; font-weight: 700; font-size: 0.9rem; }

/* ================================================== */
/* 6. ЛИКВИДАЦИИ (Liquidations) */
/* ================================================== */
.liquidations-content { background: var(--card-bg); border: 1px solid #e9ecef; border-radius: 14px; padding: 20px; }
.liquidations-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 25px; }
.liq-stat { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 12px; padding: 20px; text-align: center; transition: all .2s ease; }
.liq-stat:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.liq-stat.long { border-left: 4px solid #22c55e; }
.liq-stat.short { border-left: 4px solid #ef4444; }
.liq-stat.total { border-left: 4px solid #3b82f6; }
.liq-stat .label { font-size: 0.85rem; color: var(--text-medium); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.liq-stat .value { font-size: 1.6rem; font-weight: 800; color: var(--text-dark); margin-bottom: 5px; }
.liq-stat .percent { font-size: 0.9rem; font-weight: 600; color: #6b7280; }
.liquidations-list { display: flex; flex-direction: column; gap: 10px; }
.liq-item { display: grid; grid-template-columns: 60px 1fr 120px; gap: 15px; align-items: center; padding: 12px; background: #f9fafb; border-radius: 10px; transition: all .2s ease; }
.liq-item:hover { background: #f3f4f6; }
.liq-time { font-weight: 700; color: #6b7280; font-size: 0.9rem; }
.liq-bars { display: flex; height: 24px; border-radius: 12px; overflow: hidden; background: #e5e7eb; }
.bar-long { background: linear-gradient(90deg, #22c55e, #16a34a); transition: width 0.3s ease; }
.bar-short { background: linear-gradient(90deg, #f59e0b, #ef4444); transition: width 0.3s ease; }
.liq-total { font-weight: 800; color: var(--text-dark); text-align: right; }

/* ================================================== */
/* 7. СООТНОШЕНИЕ ЛОНГ/ШОРТ */
/* ================================================== */
.long-short-section .toggle-btn { padding: 8px 16px; background: #f3f4f6; border-radius: 10px; color: #374151; font-weight: 600; transition: all .2s ease; border: 1px solid #e5e7eb; cursor: pointer; }
.long-short-section .toggle-btn:hover { background: #e5e7eb; }
.long-short-section .toggle-btn.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.ratio-gauge { background: var(--card-bg); border: 1px solid #e9ecef; border-radius: 20px; padding: 25px; }
.gauge-bar { display: flex; height: 30px; border-radius: 25px; overflow: hidden; margin-bottom: 20px; box-shadow: inset 0 2px 8px rgba(0,0,0,0.1); }
.gauge-long { background: linear-gradient(90deg, #22c55e, #16a34a); transition: width 0.5s ease; }
.gauge-short { background: linear-gradient(90deg, #f59e0b, #ef4444); transition: width 0.5s ease; }
.gauge-labels { display: flex; justify-content: space-between; align-items: center; }
.gauge-label { font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.gauge-label.long { color: #16a34a; }
.gauge-label.short { color: #ef4444; }

/* ================================================== */
/* 8. ОТКРЫТЫЙ ИНТЕРЕС (Open Interest) */
/* ================================================== */
.open-interest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.oi-summary-card { background: linear-gradient(135deg, #f8fafc 0%, #e9ecef 100%); border: 1px solid #e9ecef; border-top: 4px solid #3b82f6; border-radius: 16px; padding: 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: all .3s ease; height: 100%; }
.oi-summary-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.oi-label { font-size: 1rem; font-weight: 600; color: var(--text-medium); margin-bottom: 15px; }
.oi-value-large { font-size: 2.8rem; font-weight: 800; color: #3b82f6; margin-bottom: 10px; line-height: 1.2; }
.oi-change-large { font-size: 1.2rem; font-weight: 700; }
.oi-change-large.pos { color: #16a34a; }
.oi-change-large.neg { color: #dc2626; }
.oi-change-large span { font-size: 0.9rem; color: #9ca3af; font-weight: 500; margin-left: 5px; }
.oi-explanation { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border: 2px solid #cbd5e1; border-radius: 16px; padding: 25px; display: flex; flex-direction: column; }
.explanation-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.explanation-header i { font-size: 1.5rem; color: #f59e0b; }
.explanation-header h4 { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin: 0; }
.oi-explanation p { color: var(--text-medium); line-height: 1.7; margin-bottom: 15px; flex-grow: 1; }
.oi-tips { list-style: none; padding: 0; margin: 0; }
.oi-tips li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; color: var(--text-dark); font-size: 0.95rem; }
.oi-tips li i { font-size: 0.9rem; margin-top: 5px; }

/* ================================================== */
/* 9. СТАВКИ ФИНАНСИРОВАНИЯ (Funding Rate) */
/* ================================================== */
.funding-rate-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.funding-card { background: var(--card-bg); border: 1px solid #e9ecef; border-radius: 16px; padding: 25px; transition: all .3s ease; }
.funding-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); }
.funding-card.current { border-top: 4px solid #3b82f6; }
.funding-card.predicted { border-top: 4px solid #8b5cf6; }
.funding-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.funding-header i { font-size: 1.5rem; color: #3b82f6; }
.funding-card.predicted .funding-header i { color: #8b5cf6; }
.funding-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); margin: 0; }
.funding-value { font-size: 2.5rem; font-weight: 800; text-align: center; margin: 20px 0; padding: 20px; border-radius: 12px; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); }
.funding-value.positive { color: #16a34a; background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); }
.funding-value.negative { color: #dc2626; background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); }
.funding-details { margin-top: 15px; }
.detail-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.detail-item:last-child { border-bottom: none; }
.detail-item .label { color: var(--text-medium); font-size: 0.9rem; }
.detail-item .value { font-weight: 700; color: var(--text-dark); }
.funding-info { margin-top: 15px; padding: 12px; background: #f8fafc; border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: #64748b; }
.funding-info i { color: #3b82f6; }
.funding-trend { margin-top: 15px; text-align: center; }
.trend-indicator { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 1.1rem; }
.trend-indicator.up { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #16a34a; }
.trend-indicator.down { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); color: #dc2626; }
.funding-explanation { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border: 2px solid #cbd5e1; border-radius: 16px; padding: 25px; }
.funding-explanation p { color: var(--text-medium); line-height: 1.7; margin-bottom: 15px; }

/* ================================================== */
/* 10. DEFI СВОДКА (DeFi) */
/* ================================================== */
.defi-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.defi-stat-main { background: linear-gradient(135deg, var(--primary-color), #7451c5); color: white; padding: 30px; border-radius: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.defi-stat-main .label { font-size: 0.9rem; opacity: 0.9; margin-bottom: 10px; }
.defi-stat-main .value { font-size: 2.1rem; font-weight: 800; }
.defi-list { background: var(--card-bg); border: 1px solid #e9ecef; border-radius: 14px; padding: 18px; }
.defi-list h3 { margin-bottom: 14px; font-size: 1rem; }
.defi-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.defi-item:last-child { border-bottom: none; }
.defi-item .name { font-weight: 600; }
.defi-item .tvl { color: #0ea5e9; font-weight: 700; }

/* ================================================== */
/* 11. ОНЧЕЙН ДАННЫЕ (OnChain) */
/* ================================================== */
.onchain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.onchain-item { background: var(--card-bg); border: 1px solid #e9ecef; border-radius: 14px; padding: 20px; text-align: center; transition: all .2s ease; }
.onchain-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.onchain-item .icon { font-size: 2rem; color: var(--primary-color); margin-bottom: 10px; }
.onchain-item .value { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); margin-bottom: 6px; }
.onchain-item .label { font-size: 0.85rem; color: var(--text-medium); }

/* ================================================== */
/* 12. СОБЫТИЯ (Events) */
/* ================================================== */
.events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.event-card { background: var(--card-bg); border: 1px solid #e9ecef; border-radius: 14px; padding: 16px; display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.event-date { text-align: center; color: #fb923c; font-weight: 800; }
.event-date .m { font-size: 0.8rem; line-height: 1; }
.event-date .d { font-size: 1.2rem; }
.event-info .event-title { font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.event-info .event-description { color: var(--text-medium); font-size: 0.95rem; }
.event-impact { width: 10px; height: 10px; border-radius: 50%; }
.event-impact.low { background: #22c55e; }
.event-impact.medium { background: #f59e0b; }
.event-impact.high { background: #ef4444; }

/* ================================================== */
/* 13. АДАПТИВНОСТЬ (Media Queries) */
/* ================================================== */
@media (max-width: 1200px) {
.crypto-hero .hero-inner { grid-template-columns: 1fr; }
.movers-grid, .events-grid, .trending-grid, .onchain-grid { grid-template-columns: repeat(2, 1fr); }
.liquidations-summary { grid-template-columns: 1fr; }
.funding-rate-grid { grid-template-columns: 1fr 1fr; }
.funding-explanation { grid-column: 1 / -1; }
.open-interest-grid { grid-template-columns: 1fr; }
.defi-stats { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
.crypto-hero h1 { font-size: 1.5rem; text-align: center; }
.crypto-hero p { font-size: 1rem; text-align: center; }
.section-title { font-size: 1.5rem; }
.crypto-hero .hero-stats { grid-template-columns: 1fr 1fr; order: 2; }
.crypto-hero .hero-inner { gap: 0px; }
.movers-grid, .events-grid, .trending-grid, .onchain-grid, .funding-rate-grid, .liquidations-summary, .oi-grid { grid-template-columns: 1fr; }
.heatmap-container { min-height: 300px; justify-content: center !important; }
.liq-item { grid-template-columns: 1fr; text-align: center; }
.liq-bars { margin: 10px 0; }
.funding-value { font-size: 2rem; }
}

@media (max-width: 576px) {
.trending-grid { grid-template-columns: 1fr; }
}