.exchange-funds-container { max-width: 1400px; margin: 0 auto; padding: 20px;}
.exchange-funds-header { text-align: center; margin-bottom: 40px;}
.exchange-funds-header h1 { color: var(--accent-primary); margin-bottom: 10px; font-size: 2.5em;}
.exchange-funds-header p { color: var(--text-secondary); font-size: 1.1em;}
.exchange-funds-actions { display: flex; gap: 15px; margin-bottom: 30px; flex-wrap: wrap;}
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s ease;}
.btn-primary { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #000;}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3);}
.btn-secondary { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary);}
.btn-secondary:hover { background: rgba(0, 255, 255, 0.1); border-color: var(--accent-primary);}
.btn-outline { background: transparent; border: 1px solid var(--accent-primary); color: var(--accent-primary);}
.btn-outline:hover { background: rgba(0, 255, 255, 0.1);}
.btn-danger { background: linear-gradient(135deg, #ff4444, #cc0000); color: #ffffff;}
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255, 68, 68, 0.3);}
.btn-success { background: linear-gradient(135deg, #28a745, #20c997); color: #ffffff;}
.btn-success:hover { background: linear-gradient(135deg, #218838, #1aa179); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(40, 167, 69, 0.3);}
.history-container { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 15px; padding: 25px; margin-top: 30px;}
.history-container h3 { color: var(--accent-primary); margin-bottom: 20px; font-size: 1.3em; display: flex; align-items: center; gap: 10px;}
.empty-history { text-align: center; padding: 60px 20px; color: var(--text-secondary);}
.empty-history i { font-size: 4em; margin-bottom: 20px; color: var(--accent-primary); opacity: 0.5;}
.history-list { max-height: 600px; overflow-y: auto;}
.history-item { display: flex; gap: 15px; padding: 15px; border-bottom: 1px solid var(--border-color); transition: background-color 0.3s ease;}
.history-item:hover { background: rgba(0, 255, 255, 0.05);}
.history-item:last-child { border-bottom: none;}
.history-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.history-item.set .history-icon { background: rgba(0, 123, 255, 0.1); color: #007bff;}
.history-item.transfer .history-icon { background: rgba(40, 167, 69, 0.1); color: #28a745;}
.history-item.adjust .history-icon { background: rgba(108, 117, 125, 0.1); color: #6c757d;}
.history-content { flex: 1;}
.history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;}
.history-type { font-weight: 600; font-size: 0.95em;}
.history-date { font-size: 0.85em; color: var(--text-secondary);}
.history-details { font-size: 0.9em; line-height: 1.5;}
.change { font-weight: 600; margin-left: 5px;}
.change.positive { color: #28a745;}
.change.negative { color: #dc3545;}
.history-note { margin-top: 8px; padding: 8px; background: rgba(0, 0, 0, 0.05); border-radius: 4px; font-size: 0.85em; color: var(--text-secondary); display: flex; align-items: flex-start; gap: 8px;}
.history-note i { margin-top: 2px; flex-shrink: 0;}
.history-row { margin-bottom: 5px; display: flex; align-items: flex-start;}
.history-row strong { min-width: 80px; margin-right: 10px;}
.transfer-details { font-weight: 600; color: var(--accent-primary);}
.transfer-amount { font-weight: 600; font-family: monospace;}
.balance-changes { margin-top: 5px; padding-left: 15px;}
.balance-change { margin-bottom: 3px;}
.balance-change small { font-size: 0.85em; color: var(--text-secondary); margin-left: 5px;}
.fee-info { color: #ffc107; font-size: 0.85em; margin-left: 8px; font-weight: 600;}
.modal.show { display: flex !important; pointer-events: auto; opacity: 1;}
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 11000; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;}
.modal-content { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 15px; width: 90%; max-width: 550px; max-height: 90vh; overflow-y: auto; animation: modalSlideIn 0.3s ease; pointer-events: auto; transform: translateY(20px); transition: transform 0.3s ease; z-index: 11001;}
.modal.show .modal-content { transform: translateY(0);}
@keyframes modalSlideIn { from { opacity: 0; transform: translateY(-50px); }
 to { opacity: 1; transform: translateY(0); }
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid var(--border-color);}
.modal-header h3 { color: var(--accent-primary); margin: 0; font-size: 1.3em; display: flex; align-items: center; gap: 10px;}
.modal-close { background: none; border: none; color: var(--text-secondary); font-size: 1.5em; cursor: pointer; transition: color 0.3s ease;}
.modal-close:hover { color: var(--accent-primary);}
.modal-body { padding: 25px;}
.modal-footer { padding: 20px 25px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 15px;}
.form-group { margin-bottom: 20px;}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px;}
.form-group label { display: block; margin-bottom: 8px; color: var(--text-primary); font-weight: 500; display: flex; align-items: center; gap: 8px;}
.form-group select,
.form-group input,
.form-group textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 1em; transition: all 0.3s ease;}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1);}
.form-group input[readonly] { background: rgba(0, 0, 0, 0.05); cursor: not-allowed;}
.balance-info { font-size: 0.85em; color: var(--text-secondary); margin-top: 5px; padding: 5px 10px; background: rgba(0, 255, 255, 0.05); border-radius: 4px; border: 1px solid rgba(0, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center;}
.balance-text { color: var(--text-secondary);}
.balance-text strong { color: var(--text-primary); font-weight: 600;}
.alert { padding: 15px; border-radius: 8px; margin-bottom: 20px; font-weight: 500;}
.alert-success { background: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.3); color: #28a745;}
.alert-error { background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); color: #dc3545;}
.fee-input-group { display: flex; align-items: center; gap: 10px;}
.fee-input-group input { flex: 1;}
.fee-symbol { color: var(--text-secondary); font-weight: 600; min-width: 50px;}
.fee-summary { margin-top: 15px; padding: 15px; background: rgba(0, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.1); border-radius: 8px;}
.fee-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05);}
.fee-item:last-child { border-bottom: none;}
.fee-item span:first-child { color: var(--text-secondary); font-size: 0.9em;}
.fee-item span:last-child { font-weight: 600; font-family: monospace; color: var(--accent-primary);}
.text-warning { color: #ffc107 !important;}
.form-help { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 0.85em;}
.fee-warning { animation: pulse 2s infinite;}
@keyframes pulse { 0% { opacity: 1; }
 50% { opacity: 0.7; }
 100% { opacity: 1; }
}
input.error { border-color: #dc3545 !important; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2) !important;}
.deal-type-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px;}
.deal-type-option { display: block; cursor: pointer;}
.deal-type-option input[type="radio"] { display: none;}
.deal-type-content { padding: 15px; border: 2px solid var(--border-color); border-radius: 8px; text-align: center; transition: all 0.3s ease; background: var(--bg-secondary);}
.deal-type-option input[type="radio"]:checked+.deal-type-content { border-color: var(--accent-primary); background: rgba(0, 255, 255, 0.1); box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);}
.deal-type-content i { font-size: 1.5em; margin-bottom: 8px; color: var(--accent-primary);}
.deal-type-content span { display: block; font-weight: 600; margin-bottom: 4px;}
.deal-type-content small { display: block; font-size: 0.8em; color: var(--text-secondary);}
.profit-calculator { margin-top: 20px; padding: 15px; background: rgba(0, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.1); border-radius: 8px;}
.profit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}
.profit-header h4 { margin: 0; color: var(--accent-primary); font-size: 1em; display: flex; align-items: center; gap: 8px;}
.profit-details { background: rgba(0, 0, 0, 0.05); border-radius: 6px; padding: 10px;}
.profit-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-size: 0.9em;}
.profit-row:last-child { border-bottom: none;}
.profit-row.total { font-weight: 600; font-size: 1.1em; padding: 12px 0; margin-top: 5px; border-top: 1px solid rgba(0, 0, 0, 0.1);}
.profit-value { font-family: monospace; font-weight: 600;}
.profit-value.positive { color: #28a745;}
.profit-value.negative { color: #dc3545;}
.profit-value.neutral { color: var(--text-secondary);}
.profit-formula { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, 0.05); text-align: center; color: var(--text-secondary); font-size: 0.8em;}
.deal-history { margin-top: 30px; width: 100%; margin-bottom: 20px;}
.deal-history h3 { color: var(--accent-primary); margin-bottom: 20px; font-size: 1.3em; display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 255, 255, 0.1);}
.deals-list-wide { display: flex; flex-direction: column; gap: 12px; width: 100%;}
.deal-row { display: flex; align-items: stretch; background: var(--bg-card); border: 1px solid rgba(0, 255, 255, 0.1); border-radius: 10px; overflow: hidden; transition: all 0.3s ease; position: relative; min-height: 120px;}
.deal-row:hover { transform: translateY(-2px); border-color: rgba(0, 255, 255, 0.3); box-shadow: 0 5px 15px rgba(0, 255, 255, 0.1);}
.deal-row::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%;}
.deal-row.profit::before { background: linear-gradient(to bottom, #28a745, #1e7e34);}
.deal-row.loss::before { background: linear-gradient(to bottom, #dc3545, #c82333);}
.deal-main-info { flex: 3; padding: 15px; display: flex; flex-direction: column; gap: 15px; border-right: 1px solid rgba(0, 255, 255, 0.1);}
.deal-side-info { flex: 1; min-width: 250px; padding: 15px; display: flex; flex-direction: column; gap: 15px; background: rgba(0, 0, 0, 0.05);}
.deal-header-row { display: flex; justify-content: space-between; align-items: center; gap: 15px;}
.deal-type-coin { display: flex; align-items: center; gap: 12px; flex: 1;}
.deal-type-icon { font-size: 1.2em; color: var(--accent-primary); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;}
.deal-coin { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.1em;}
.deal-coin i { color: #ffc107; font-size: 1.1em;}
.coin-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;}
.deal-date { font-size: 0.9em; color: var(--text-secondary); padding: 6px 12px; background: rgba(0, 0, 0, 0.05); border-radius: 8px; border: 1px solid rgba(0, 255, 255, 0.1); white-space: nowrap;}
.exchange-flow-row { display: flex; align-items: center; gap: 20px; justify-content: space-between; padding: 10px; background: rgba(0, 0, 0, 0.05); border-radius: 10px;}
.exchange-buy,
.exchange-sell { flex: 1; display: flex; align-items: center; gap: 15px; min-width: 0;}
.exchange-icon-name { display: flex; align-items: center; gap: 10px; min-width: 150px;}
.exchange-icon { width: 48px; height: 48px; border-radius: 24px; object-fit: contain; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.1);}
.exchange-name { font-weight: 600; font-size: 1em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;}
.exchange-action { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;}
.action-label { font-size: 0.85em; color: var(--text-secondary); white-space: nowrap;}
.action-amount { font-weight: 700; font-family: monospace; font-size: 1.1em; color: var(--text-primary); white-space: nowrap;}
.exchange-buy .action-amount { color: #dc3545;}
.exchange-sell .action-amount { color: #28a745;}
.flow-arrow { color: var(--accent-primary); font-size: 1.2em; padding: 0 10px; flex-shrink: 0;}
.deal-stats { display: flex; flex-direction: column; gap: 10px;}
.stat-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.05);}
.fee-stat { background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.2);}
.fee-stat i { color: #ffc107; font-size: 1.2em; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(255, 193, 7, 0.2); border-radius: 8px;}
.profit-stat { border: 1px solid;}
.profit-stat.positive { background: rgba(40, 167, 69, 0.1); border-color: rgba(40, 167, 69, 0.2);}
.profit-stat.negative { background: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.2);}
.profit-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1em; flex-shrink: 0;}
.profit-stat.positive .profit-icon { background: #28a745; color: #fff;}
.profit-stat.negative .profit-icon { background: #dc3545; color: #fff;}
.stat-content { flex: 1; display: flex; flex-direction: column; gap: 2px;}
.stat-label { font-size: 0.85em; color: var(--text-secondary);}
.stat-value { font-weight: 700; font-family: monospace; font-size: 1.1em; color: var(--text-primary);}
.profit-stat.positive .stat-value { color: #28a745;}
.profit-stat.negative .stat-value { color: #dc3545;}
.stat-percent { font-size: 0.85em; opacity: 0.8; margin-top: 2px;}
.deal-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: rgba(0, 0, 0, 0.05); border-radius: 8px; border-left: 4px solid #ffc107; margin-top: auto;}
.deal-note.empty { opacity: 0.7; border-left-color: var(--text-secondary);}
.deal-note i { color: #ffc107; margin-top: 2px; flex-shrink: 0; font-size: 1.1em;}
.deal-note.empty i { color: var(--text-secondary);}
.deal-note span { flex: 1; font-size: 0.9em; color: var(--text-secondary); line-height: 1.4; max-height: 40px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.exchange-balance-cards-section { margin-bottom: 30px;}
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color);}
.section-header h3 { margin: 0; color: var(--accent-primary); font-size: 1.3em; display: flex; align-items: center; gap: 10px;}
.total-summary { color: var(--text-secondary); font-size: 0.9em; background: rgba(0, 255, 255, 0.1); padding: 8px 15px; border-radius: 20px; border: 1px solid rgba(0, 255, 255, 0.2); display: flex; align-items: center; gap: 8px;}
.total-summary i { font-size: 0.9em;}
.separator { opacity: 0.5; margin: 0 5px;}
.empty-balance-cards { text-align: center; padding: 40px 20px; background: var(--bg-card); border: 2px dashed var(--border-color); border-radius: 12px; color: var(--text-secondary);}
.empty-balance-cards i { font-size: 3em; margin-bottom: 15px; color: var(--accent-primary); opacity: 0.5;}
.empty-content h4 { margin-bottom: 8px; color: var(--text-primary); font-size: 1.1em;}
.empty-content p { margin-bottom: 15px; max-width: 300px; margin-left: auto; margin-right: auto; font-size: 0.9em;}
.balance-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px;}
.balance-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; transition: all 0.3s ease; position: relative; display: flex; padding: 15px; height: 120px;}
.balance-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 255, 255, 0.1); border-color: rgba(0, 255, 255, 0.3);}
.card-content { display: flex; width: 100%; gap: 15px;}
.card-main-content { flex: 1; display: flex; flex-direction: column; min-width: 0;}
.card-header-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px;}
.exchange-icon-container { flex-shrink: 0;}
.exchange-icon-card { width: 40px; height: 40px; border-radius: 20px; object-fit: contain; border: 1px solid rgba(0, 0, 0, 0.1);}
.exchange-icon-placeholder { width: 40px; height: 40px; border-radius: 20px; background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 200, 255, 0.1)); display: flex; align-items: center; justify-content: center; font-size: 1.2em; color: var(--accent-primary);}
.card-info-right { flex: 1; display: flex; flex-direction: column; gap: 4px;}
.balance-amount { line-height: 1.2;}
.amount-value { font-family: monospace; font-size: 1.5em; font-weight: 700; color: var(--accent-primary);}
.currency { font-size: 0.9em; color: var(--text-secondary); font-weight: 600; margin-left: 4px;}
.last-updated { font-size: 0.8em; color: var(--text-secondary); display: flex; align-items: center; gap: 4px;}
.last-updated i { font-size: 0.85em;}
.exchange-name { font-weight: 600; color: var(--text-primary); font-size: 0.95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; padding-top: 5px; border-top: 1px solid rgba(0, 255, 255, 0.05);}
.percentage-section { margin-top: auto;}
.percentage-track { width: 100%; height: 6px; background: rgba(0, 0, 0, 0.1); border-radius: 3px; overflow: hidden; margin-bottom: 4px;}
.percentage-fill { height: 100%; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); border-radius: 3px; transition: width 0.5s ease;}
.percentage-label { font-size: 0.75em; color: var(--text-secondary); text-align: center; font-weight: 500;}
.card-actions-column { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; width: 32px; flex-shrink: 0; margin-left: auto;}
.btn-action { width: 32px; height: 32px; border-radius: 6px; border: none; background: rgba(0, 0, 0, 0.1); color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; font-size: 1em;}
.btn-action:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.btn-transfer { background: rgba(0, 255, 255, 0.1); color: var(--accent-primary);}
.btn-transfer:hover { background: rgba(0, 255, 255, 0.2); box-shadow: 0 4px 8px rgba(0, 255, 255, 0.2);}
.btn-edit:hover { background: rgba(0, 255, 255, 0.1); color: var(--accent-primary);}
.btn-delete:hover { background: rgba(255, 68, 68, 0.1); color: #dc3545;}
.use-max-btn { display: inline-block; margin-left: 10px; padding: 4px 8px; background: rgba(0, 255, 255, 0.1); border: 1px solid var(--accent-primary); border-radius: 4px; color: var(--accent-primary); font-size: 0.8em; cursor: pointer; transition: all 0.3s ease;}
.use-max-btn:hover { background: rgba(0, 255, 255, 0.2); transform: translateY(-1px);}
@media (max-width: 768px) { .exchange-funds-container { padding: 15px; }
 .exchange-funds-actions { flex-direction: column; }
 .modal-content { width: 95%; margin: 10px; }
 .form-row { grid-template-columns: 1fr; }
 .fee-input-group { flex-direction: column; align-items: stretch; }
 .fee-symbol { text-align: center; padding: 5px; background: rgba(0, 0, 0, 0.1); border-radius: 4px; }
 .balance-cards-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
 .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
 .total-summary { align-self: flex-start; }
 .balance-card { height: 115px; }
 .card-content { gap: 12px; }
 .exchange-icon-card,
 .exchange-icon-placeholder { width: 36px; height: 36px; }
 .amount-value { font-size: 1.3em; }
}
@media (max-width: 1200px) { .balance-cards-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
 .deal-row { flex-direction: column; }
 .deal-main-info { border-right: none; border-bottom: 1px solid rgba(0, 255, 255, 0.1); }
 .deal-side-info { min-width: 100%; }
 .exchange-icon-name { min-width: 130px; }
 .exchange-name { max-width: 100px; }
}
@media (max-width: 992px) { .balance-cards-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
 .balance-card { height: 110px; padding: 12px; }
 .amount-value { font-size: 1.4em; }
}
@media (max-width: 768px) { .deal-header-row { flex-direction: column; align-items: flex-start; gap: 10px; }
 .deal-date { align-self: flex-start; }
 .exchange-flow-row { flex-direction: column; gap: 15px; }
 .flow-arrow { transform: rotate(90deg); padding: 10px 0; }
 .exchange-buy,
 .exchange-sell { width: 100%; justify-content: center; }
 .exchange-icon-name { min-width: 140px; }
 .deal-stats { flex-direction: row; flex-wrap: wrap; }
 .stat-item { flex: 1; min-width: 200px; }
}
@media (max-width: 576px) { .balance-cards-grid { grid-template-columns: 1fr; }
 .balance-card { height: 110px; }
 .exchange-name { font-size: 0.9em; }
 .amount-value { font-size: 1.4em; }
 .card-actions-column { width: 30px; }
 .btn-action { width: 30px; height: 30px; font-size: 0.9em; }
}
@media (max-width: 480px) { .deal-main-info,
 .deal-side-info { padding: 12px; }
 .deal-type-coin { gap: 8px; }
 .coin-name { max-width: 150px; }
 .exchange-icon-name { min-width: 120px; }
 .exchange-name { max-width: 80px; }
 .exchange-action { text-align: right; }
 .stat-item { min-width: 100%; }
}
@media (max-width: 400px) { .balance-card { height: 105px; padding: 10px; }
 .card-content { gap: 10px; }
 .exchange-icon-card,
 .exchange-icon-placeholder { width: 32px; height: 32px; }
 .amount-value { font-size: 1.2em; }
 .currency { font-size: 0.8em; }
 .last-updated { font-size: 0.75em; }
}
.date-filter-container { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; margin-bottom: 25px;}
.filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 255, 255, 0.1);}
.filter-header h4 { margin: 0; color: var(--accent-primary); font-size: 1.1em; display: flex; align-items: center; gap: 8px;}
.filter-stats { display: flex; gap: 10px; flex-wrap: wrap;}
.stat-badge { padding: 6px 12px; background: rgba(0, 255, 255, 0.1); border: 1px solid rgba(0, 255, 255, 0.2); border-radius: 20px; font-size: 0.85em; color: var(--text-secondary); display: flex; align-items: center; gap: 6px;}
.stat-badge.profit { font-weight: 600;}
.stat-badge.positive { background: rgba(40, 167, 69, 0.1); border-color: rgba(40, 167, 69, 0.2); color: #28a745;}
.stat-badge.negative { background: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.2); color: #dc3545;}
.filter-form { margin-bottom: 15px;}
.filter-controls { margin-bottom: 10px;}
.quick-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px;}
.filter-option { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(0, 0, 0, 0.1); border: 1px solid var(--border-color); border-radius: 20px; cursor: pointer; transition: all 0.3s ease; user-select: none;}
.filter-option:hover { background: rgba(0, 255, 255, 0.1); border-color: var(--accent-primary);}
.filter-option.active { background: rgba(0, 255, 255, 0.2); border-color: var(--accent-primary); color: var(--accent-primary); font-weight: 600;}
.filter-option input[type="radio"] { display: none;}
.filter-count { background: rgba(0, 255, 255, 0.3); color: #000; font-size: 0.8em; padding: 2px 8px; border-radius: 10px; font-weight: 600; min-width: 24px; text-align: center;}
.custom-date-filters { padding: 15px; background: rgba(0, 0, 0, 0.1); border-radius: 8px; border: 1px solid rgba(0, 255, 255, 0.1);}
.date-input-group { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;}
.input-with-icon { position: relative; flex: 1; min-width: 150px;}
.input-with-icon i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 0.9em;}
.input-with-icon input { width: 100%; padding: 10px 15px 10px 35px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 0.9em;}
.input-with-icon input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1);}
.date-separator { color: var(--text-secondary); font-weight: 600; padding: 0 5px;}
.btn-sm { padding: 8px 16px; font-size: 0.85em; background: var(--accent-primary); color: #000; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; font-weight: 600;}
.btn-sm:hover { background: var(--accent-secondary); transform: translateY(-1px);}
.btn-sm.btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary);}
.btn-sm.btn-outline:hover { background: rgba(0, 255, 255, 0.1); border-color: var(--accent-primary);}
.quick-periods { display: flex; gap: 8px; flex-wrap: wrap;}
.btn-period { padding: 6px 12px; background: rgba(0, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.1); border-radius: 6px; color: var(--text-secondary); font-size: 0.8em; cursor: pointer; transition: all 0.3s ease;}
.btn-period:hover { background: rgba(0, 255, 255, 0.1); color: var(--accent-primary); border-color: var(--accent-primary);}
.current-filter-info { padding: 10px 15px; background: rgba(0, 255, 255, 0.05); border-radius: 6px; border: 1px solid rgba(0, 255, 255, 0.1); font-size: 0.9em; color: var(--text-secondary); display: flex; align-items: center; gap: 8px;}
.current-filter-info i { color: var(--accent-primary); font-size: 1em;}
.profit-info { margin-left: auto; font-weight: 500;}
.profit-info .positive { color: #28a745;}
.profit-info .negative { color: #dc3545;}
@media (max-width: 768px) { .quick-filters { flex-direction: column; align-items: flex-start; }
 .filter-option { width: 100%; justify-content: space-between; }
 .date-input-group { flex-direction: column; align-items: stretch; }
 .input-with-icon { min-width: 100%; }
 .date-separator { display: none; }
 .quick-periods { flex-direction: column; }
 .btn-period { width: 100%; text-align: center; }
 .filter-stats { flex-direction: column; width: 100%; margin-top: 10px; }
 .stat-badge { justify-content: center; }
 .current-filter-info { flex-direction: column; align-items: flex-start; gap: 5px; }
 .profit-info { margin-left: 0; margin-top: 5px; }
}
@media (max-width: 480px) { .date-filter-container { padding: 15px; }
 .filter-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.ajax-messages { margin-bottom: 20px;}
.ajax-message { padding: 15px; border-radius: 8px; margin-bottom: 10px; font-weight: 500; animation: slideIn 0.3s ease;}
.ajax-message.success { background: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.3); color: #28a745;}
.ajax-message.error { background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.3); color: #dc3545;}
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); }
 to { opacity: 1; transform: translateY(0); }
}
.btn-loading { position: relative; color: transparent !important;}
.btn-loading:after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid rgba(0, 0, 0, 0.3); border-top-color: var(--text-primary); border-radius: 50%; animation: spin 0.8s linear infinite;}
@keyframes spin { to { transform: rotate(360deg); }
}
.deal-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, 0.05);}
.history-actions { margin-left: 10px; display: flex; align-items: flex-start;}
.btn-action { width: 32px; height: 32px; border-radius: 6px; border: none; background: rgba(0, 0, 0, 0.1); color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; font-size: 0.9em;}
.btn-action:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.btn-edit-deal:hover { background: rgba(0, 255, 255, 0.1); color: var(--accent-primary);}
.btn-delete-deal:hover { background: rgba(255, 68, 68, 0.1); color: #dc3545;}
.btn-delete-history:hover { background: rgba(255, 68, 68, 0.1); color: #dc3545;}
.modal-content { cursor: default;}
.fade-out { animation: fadeOut 0.3s ease forwards;}
@keyframes fadeOut { from { opacity: 1; transform: translateY(0); }
 to { opacity: 0; transform: translateY(-10px); }
}
.floating-panel-compact { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 1200px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); z-index: 1000; display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; animation: slideUpFade 0.3s ease; height: auto; min-height: 60px; z-index: 10000 !important;}
@keyframes slideUpFade { from { opacity: 0; transform: translate(-50%, 20px); }
 to { opacity: 1; transform: translate(-50%, 0); }
}
.floating-filters-compact { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-start;}
.filter-form-compact { width: 100%; margin: 0; padding: 0;}
.compact-stats-filters { display: flex; flex-direction: column; gap: 10px; width: 100%; min-height: 40px;}
.compact-stats { display: flex; gap: 8px; align-items: center; height: auto; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-start; width: 100%;}
.stat-badge-compact { padding: 4px 8px; background: rgba(0, 255, 255, 0.1); border: 1px solid rgba(0, 255, 255, 0.2); border-radius: 8px; font-size: 0.75em; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; white-space: nowrap; height: 24px; line-height: 1;}
.stat-badge-compact i { font-size: 0.8em; opacity: 0.8;}
.stat-badge-compact.balance { background: rgba(0, 255, 255, 0.15); border-color: rgba(0, 255, 255, 0.3); color: var(--accent-primary); font-weight: 600;}
.stat-badge-compact.profit.positive { background: rgba(40, 167, 69, 0.15); border-color: rgba(40, 167, 69, 0.3); color: #28a745; font-weight: 600;}
.stat-badge-compact.profit.negative { background: rgba(220, 53, 69, 0.15); border-color: rgba(220, 53, 69, 0.3); color: #dc3545; font-weight: 600;}
.stat-badge-compact.deals { background: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.3); color: #ffc107;}
.stat-badge-compact.history { background: rgba(153, 102, 255, 0.15); border-color: rgba(153, 102, 255, 0.3); color: #9966ff;}
.compact-quick-filters-row { flex: 1; display: flex; justify-content: flex-start; align-items: center; min-width: 0; width: 100%;}
.filter-buttons-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end;}
.filter-btn-compact { padding: 5px 10px; background: rgba(0, 0, 0, 0.1); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-secondary); font-size: 0.75em; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; height: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; border: none;}
.filter-btn-compact:hover { background: rgba(0, 255, 255, 0.1); color: var(--accent-primary); transform: translateY(-1px);}
.filter-btn-compact.active { background: rgba(0, 255, 255, 0.2); color: var(--accent-primary); font-weight: 600; box-shadow: 0 2px 5px rgba(0, 255, 255, 0.2);}
.filter-btn-compact.custom { width: 24px; padding: 0; background: rgba(0, 255, 255, 0.1); color: var(--accent-primary);}
.filter-btn-compact.custom.active { background: rgba(0, 255, 255, 0.3); color: var(--accent-primary);}
.custom-date-panel { z-index: 1001; isolation: isolate; position: absolute; bottom: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; margin-bottom: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); 
 animation: slideDownFade 0.2s ease;}
@keyframes slideDownFade { from { opacity: 0; transform: translateY(-10px); }
 to { opacity: 1; transform: translateY(0); }
}
.custom-date-content { display: flex; flex-direction: column; gap: 10px;}
.date-inputs-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
.date-input-wrapper { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 4px;}
.date-input-wrapper label { font-size: 0.8em; color: var(--text-secondary);}
.date-input-wrapper input { padding: 6px 10px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-primary); font-size: 0.85em; height: 32px;}
.date-input-wrapper input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.1);}
.date-actions { display: flex; gap: 5px; align-items: flex-end; height: 32px;}
.btn-date-apply,
.btn-date-clear { width: 32px; height: 32px; border-radius: 4px; border: none; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center;}
.btn-date-apply { background: var(--accent-primary); color: #000;}
.btn-date-apply:hover { background: var(--accent-secondary); transform: translateY(-1px);}
.btn-date-clear { background: rgba(220, 53, 69, 0.1); color: #dc3545; border: 1px solid rgba(220, 53, 69, 0.3);}
.btn-date-clear:hover { background: rgba(220, 53, 69, 0.2); transform: translateY(-1px);}
.quick-periods-row { display: flex; gap: 5px; flex-wrap: wrap;}
.period-btn { padding: 4px 8px; background: rgba(0, 255, 255, 0.05); border: 1px solid rgba(0, 255, 255, 0.1); border-radius: 4px; color: var(--text-secondary); font-size: 0.75em; cursor: pointer; transition: all 0.2s ease;}
.period-btn:hover { background: rgba(0, 255, 255, 0.1); color: var(--accent-primary);}
.floating-actions-compact { display: flex; gap: 8px; align-items: center; flex-shrink: 0; height: auto; margin-top: 0;}
.action-btn-compact { width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; font-size: 1.1em; color: white;}
.action-btn-compact:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);}
.action-btn-compact.set-balance { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));}
.action-btn-compact.add-deal { background: linear-gradient(135deg, #28a745, #20c997); min-width: 110px;}
.action-btn-compact.transfer { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary);}
.action-btn-compact.transfer:hover { background: rgba(0, 255, 255, 0.1); border-color: var(--accent-primary);}
@media (max-width: 1024px) { .floating-panel-compact { width: 80%; padding: 8px 12px; min-height: auto; }
 .compact-stats-filters { gap: 10px; }
 .compact-stats { gap: 6px; }
 .stat-badge-compact { font-size: 0.7em; padding: 3px 6px; }
}
@media (max-width: 768px) { .floating-panel-compact { bottom: 15px; flex-direction: column; gap: 12px; max-width: 95%; padding: 10px; }
 .floating-filters-compact { width: 100%; order: 1; }
 .compact-stats-filters { gap: 8px; }
 .compact-stats { justify-content: space-between; flex-wrap: wrap; }
 .compact-quick-filters-row { justify-content: flex-start; }
 .filter-buttons-row { justify-content: flex-start; flex-wrap: wrap; }
 .floating-actions-compact { width: 100%; justify-content: center; order: 2; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
 .filters-stats { justify-content: flex-end; }
}
@media (max-width: 576px) { .floating-panel-compact { padding: 8px; border-radius: 10px; bottom: 10px; gap: 10px; margin-bottom: 80px; }
 .filters-header h4 { font-size: 0.9em; }
 .filters-stats .stat-badge { padding: 3px 8px; font-size: 0.75em; }
 .compact-stats { justify-content: space-around; }
 .stat-badge-compact { flex: 1; justify-content: center; text-align: center; min-width: 60px; max-width: 80px; }
 .stat-badge-compact span { font-size: 0.8em; }
 .filter-option-compact { padding: 4px 8px; font-size: 0.75em; }
 .floating-action-btn { padding: 8px 12px; min-width: 60px; font-size: 0.85em; }
 .floating-action-btn i { font-size: 1em; }
 .action-label { font-size: 0.7em; }
 .custom-dates-row { flex-direction: column; align-items: stretch; }
 .date-input-compact { min-width: 100%; }
 .date-separator-compact { display: none; }
 .btn-compact { width: 100%; margin-top: 5px; }
 .action-btn-compact { width: 36px; height: 36px; font-size: 1em; }
}
@media (max-width: 480px) { .floating-panel-compact { width: 98%; padding: 6px 8px; gap: 8px; margin-bottom: 80px; }
 .compact-stats { justify-content: space-between; gap: 4px; }
 .stat-badge-compact { padding: 2px 4px; font-size: 0.65em; min-width: 55px; max-width: 70px; }
 .stat-badge-compact i { font-size: 0.8em; }
 .stat-badge-compact span { font-size: 0.75em; }
 .compact-quick-filters-row { overflow-x: auto; padding-bottom: 4px; }
 .filter-buttons-row { flex-wrap: nowrap; min-width: min-content; }
 .filter-btn-compact { flex-shrink: 0; padding: 4px 8px; font-size: 0.7em; height: 24px; }
 .filter-btn-compact.custom { width: 24px; }
 .floating-actions-compact { width: 100%; }
 .action-btn-compact { width: 32px; height: 32px; font-size: 0.9em; flex: 1; max-width: 40px; }
 .stat-badge-compact.history,
 .stat-badge-compact.deals { display: none; }
}
@media (max-width: 360px) { .floating-panel-compact { bottom: 8px; padding: 5px 6px; border-radius: 8px; margin-bottom: 80px; }
 .stat-badge-compact { min-width: 50px; max-width: 60px; padding: 2px 3px; font-size: 0.6em; }
 .stat-badge-compact i { font-size: 0.7em; }
 .stat-badge-compact span { font-size: 0.7em; }
 .filter-btn-compact { padding: 3px 6px; font-size: 0.65em; height: 22px; }
 .filter-btn-compact.custom { width: 22px; }
 .action-btn-compact { width: 28px; height: 28px; font-size: 0.8em; }
 .stat-badge-compact.balance { flex: 2; max-width: 80px; }
 .stat-badge-compact.profit { flex: 2; max-width: 80px; }
}
@media (max-width: 320px) { .floating-panel-compact { width: 99%; padding: 4px 5px; }
 .compact-stats { gap: 2px; }
 .stat-badge-compact { min-width: 45px; max-width: 55px; padding: 1px 2px; font-size: 0.55em; }
 .filter-btn-compact { padding: 2px 4px; font-size: 0.6em; height: 20px; margin-right: 2px; }
 .filter-btn-compact.custom { width: 20px; }
 .action-btn-compact { width: 26px; height: 26px; font-size: 0.75em; }
 .compact-quick-filters-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 .filter-btn-compact:not(.custom) { padding: 2px 4px; min-width: 30px; }
 .filter-btn-compact:not(.custom)::before { content: attr(title); font-size: 0.6em; }
 .filter-btn-compact[title="All"]::before { content: "All"; }
 .filter-btn-compact[title="Today"]::before { content: "tod"; }
 .filter-btn-compact[title="Yesterday"]::before { content: "Yest"; }
 .filter-btn-compact[title="Week"]::before { content: "Week"; }
 .filter-btn-compact[title="Month"]::before { content: "Mon"; }
}
@media (prefers-color-scheme: light) { .floating-panel-compact { background: var(--bg-card); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); border-color: var(--border-color); }
 .stat-badge-compact { background: rgba(0, 0, 0, 0.05); border-color: var(--border-color); }
 .stat-badge-compact.balance { background: rgba(0, 123, 255, 0.15); border-color: rgba(0, 123, 255, 0.3); color: var(--accent-primary); }
 .stat-badge-compact.profit.positive { background: rgba(40, 167, 69, 0.15); border-color: rgba(40, 167, 69, 0.3); color: #28a745; }
 .stat-badge-compact.profit.negative { background: rgba(220, 53, 69, 0.15); border-color: rgba(220, 53, 69, 0.3); color: #dc3545; }
 .stat-badge-compact.deals { background: rgba(255, 193, 7, 0.15); border-color: rgba(255, 193, 7, 0.3); color: #ffc107; }
 .stat-badge-compact.history { background: rgba(153, 102, 255, 0.15); border-color: rgba(153, 102, 255, 0.3); color: #663399; }
 .filter-btn-compact { background: rgba(0, 0, 0, 0.05); border-color: var(--border-color); }
 .filter-btn-compact:hover { background: rgba(0, 123, 255, 0.1); color: var(--accent-primary); }
 .filter-btn-compact.active { background: rgba(0, 123, 255, 0.2); color: var(--accent-primary); }
 .filter-btn-compact.custom { background: rgba(0, 123, 255, 0.1); color: var(--accent-primary); }
 .action-btn-compact.transfer { background: var(--bg-secondary); color: var(--text-primary); }
 .custom-date-panel { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); }
 .btn-date-clear { background: rgba(220, 53, 69, 0.1); color: #dc3545; border-color: rgba(220, 53, 69, 0.3); }
}
.deal-ultra-compact { display: none; background: var(--bg-card); border: 1px solid rgba(0, 255, 255, 0.1); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; position: relative; transition: all 0.2s ease; min-height: 60px; height: 60px; overflow: hidden;}
.deal-ultra-compact::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%;}
.deal-ultra-compact.profit::before { background: #28a745;}
.deal-ultra-compact.loss::before { background: #dc3545;}
.deal-ultra-compact:hover { border-color: rgba(0, 255, 255, 0.3); transform: translateY(-1px);}
.deal-ultra-main { flex: 1; min-width: 0; padding-right: 10px;}
.deal-ultra-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; padding-bottom: 2px; border-bottom: 1px dashed rgba(0, 0, 0, 0.05);}
.deal-ultra-coin { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 0.85em;}
.deal-ultra-coin i { color: #ffc107; font-size: 0.8em;}
.deal-ultra-coin-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.deal-ultra-date { font-size: 0.75em; color: var(--text-secondary); background: rgba(0, 0, 0, 0.05); padding: 1px 4px; border-radius: 3px; white-space: nowrap;}
.deal-ultra-middle { display: flex; justify-content: space-between; align-items: center; gap: 8px;}
.deal-ultra-exchange { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;}
.deal-ultra-exchange-icon { color: var(--accent-primary); font-size: 0.8em; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.deal-ultra-exchange-names { display: flex; align-items: center; gap: 4px; min-width: 0;}
.deal-ultra-exchange-from,
.deal-ultra-exchange-to { font-size: 0.8em; font-weight: 600; color: var(--text-primary); max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.deal-ultra-arrow { color: var(--accent-primary); font-size: 0.7em; opacity: 0.7; flex-shrink: 0;}
.deal-ultra-amounts { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; flex-shrink: 0;}
.deal-ultra-amount-row { display: flex; align-items: center; gap: 3px; font-size: 0.75em; line-height: 1;}
.deal-ultra-amount-label { color: var(--text-secondary); white-space: nowrap;}
.deal-ultra-amount-value { font-family: monospace; font-weight: 700; font-size: 0.85em; min-width: 40px; text-align: right; white-space: nowrap;}
.deal-ultra-amount-value.positive { color: #28a745;}
.deal-ultra-amount-value.negative { color: #dc3545;}
.deal-ultra-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 4px; flex-shrink: 0; height: 100%;}
.deal-ultra-profit { display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-weight: 700; font-size: 0.85em; white-space: nowrap;}
.deal-ultra-profit.positive { background: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.2); color: #28a745;}
.deal-ultra-profit.negative { background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.2); color: #dc3545;}
.deal-ultra-profit-icon { font-size: 0.7em;}
.deal-ultra-profit-value { display: flex; align-items: center; gap: 2px;}
.deal-ultra-fee { color: #ffc107; font-size: 0.7em; opacity: 0.8;}
.deal-ultra-actions { display: flex; gap: 4px; align-items: center; margin-top: auto; }
.deal-ultra-actions .btn-action { width: 24px; height: 24px; font-size: 0.8em; border-radius: 4px;}
.deal-ultra-actions .btn-action:hover { transform: translateY(-1px);}
@media (max-width: 768px) { .deal-row { display: none !important; }
 .deal-ultra-compact { display: flex !important; align-items: center; justify-content: space-between; }
 .deal-ultra-compact { height: 55px; padding: 6px 8px; }
 .deal-ultra-coin-name { max-width: 60px; }
 .deal-ultra-exchange-from,
 .deal-ultra-exchange-to { max-width: 40px; font-size: 0.75em; }
 .deal-ultra-amounts { display: none; }
 .deal-ultra-profit { font-size: 0.8em; padding: 2px 4px; }
 .deal-ultra-actions .btn-action { width: 22px; height: 22px; }
}
@media (max-width: 480px) { .deal-ultra-compact { height: 50px; padding: 5px 6px; }
 .deal-ultra-top { margin-bottom: 2px; }
 .deal-ultra-coin { font-size: 0.8em; }
 .deal-ultra-coin-name { max-width: 50px; }
 .deal-ultra-date { font-size: 0.7em; padding: 1px 3px; }
 .deal-ultra-exchange-icon { font-size: 0.7em; width: 14px; height: 14px; }
 .deal-ultra-exchange-from,
 .deal-ultra-exchange-to { max-width: 35px; font-size: 0.7em; }
 .deal-ultra-arrow { font-size: 0.6em; }
 .deal-ultra-profit { font-size: 0.75em; padding: 1px 3px; }
 .deal-ultra-actions { gap: 3px; }
 .deal-ultra-actions .btn-action { width: 20px; height: 20px; font-size: 0.75em; }
}
@media (max-width: 360px) { .deal-ultra-compact { height: 48px; padding: 4px 5px; }
 .deal-ultra-coin-name { max-width: 40px; font-size: 0.75em; }
 .deal-ultra-exchange-names { gap: 2px; }
 .deal-ultra-exchange-from,
 .deal-ultra-exchange-to { max-width: 30px; font-size: 0.65em; }
 .deal-ultra-profit { font-size: 0.7em; }
 .deal-ultra-actions .btn-action { width: 18px; height: 18px; font-size: 0.7em; }
}
@media (max-width: 320px) { .deal-ultra-compact { height: 46px; padding: 3px 4px; }
 .deal-ultra-coin { gap: 2px; }
 .deal-ultra-coin i { font-size: 0.7em; }
 .deal-ultra-coin-name { max-width: 35px; font-size: 0.7em; }
 .deal-ultra-date { font-size: 0.65em; padding: 0 2px; }
 .deal-ultra-exchange { gap: 4px; }
 .deal-ultra-exchange-icon { font-size: 0.65em; width: 12px; height: 12px; }
 .deal-ultra-exchange-names { gap: 1px; }
 .deal-ultra-exchange-from,
 .deal-ultra-exchange-to { max-width: 25px; font-size: 0.6em; }
 .deal-ultra-arrow { font-size: 0.55em; }
 .deal-ultra-profit { font-size: 0.65em; padding: 0 2px; }
 .deal-ultra-profit-icon { font-size: 0.6em; }
 .deal-ultra-actions { gap: 2px; }
 .deal-ultra-actions .btn-action { width: 16px; height: 16px; font-size: 0.65em; }
}
.zero-balance { opacity: 0.6 !important; border-style: dashed !important; border-color: var(--border-color) !important; background: rgba(0, 0, 0, 0.05) !important;}
.zero-balance:hover { transform: translateY(-1px) !important; border-color: var(--border-color) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;}
.zero-balance .exchange-icon-card { filter: grayscale(0.8);}
.zero-balance .exchange-icon-placeholder { background: rgba(128, 128, 128, 0.1) !important; color: var(--text-secondary) !important;}
.zero-balance .amount-value { color: var(--text-secondary) !important;}
.zero-balance .exchange-name { color: var(--text-secondary) !important;}
.zero-balance .last-updated { color: var(--text-secondary) !important; font-size: 0.75em;}
.zero-balance .btn-action { background: rgba(0, 0, 0, 0.05) !important; color: var(--text-secondary) !important;}
.zero-balance .btn-action:hover { background: rgba(0, 255, 255, 0.1) !important; color: var(--accent-primary) !important;}
.zero-balance .btn-delete:hover { background: rgba(255, 68, 68, 0.1) !important; color: #dc3545 !important;}
@media (max-width: 768px) { .zero-balances-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 8px !important; }
 .zero-balance { height: 100px !important; padding: 10px !important; }
}
@media (max-width: 480px) { .zero-balances-grid { grid-template-columns: 1fr !important; }
 .zero-balance { height: 95px !important; }
}
.filter-buttons-row::-webkit-scrollbar { height: 3px;}
.filter-buttons-row::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 2px;}
.filter-buttons-row::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 2px;}
.filter-buttons-row::-webkit-scrollbar-thumb:hover { background: var(--accent-secondary);}
@supports (-webkit-touch-callout: none) { .filter-buttons-row { -webkit-overflow-scrolling: touch; }
}
.filter-buttons-row:after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px; background: linear-gradient(to right, transparent, var(--bg-card)); pointer-events: none; opacity: 0; transition: opacity 0.3s ease;}
.filter-buttons-row.scrollable:after { opacity: 1;}
.deal-coin { display: flex; align-items: center; gap: 8px;}
.coin-icon-wrapper { width: 48px; height: 48px; flex-shrink: 0;}
.coin-icon { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid rgba(0, 0, 0, 0.1); transition: transform 0.2s ease;}
.coin-icon:hover { transform: scale(1.1);}
.coin-icon.fallback { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 16px;}
.coin-icon-placeholder { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; border: 2px solid rgba(0, 0, 0, 0.1);}
.coin-icon-small { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.1);}
.coin-icon-small.fallback { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 10px;}
.exchange-icon-small { width: 16px; height: 16px; border-radius: 3px; object-fit: cover;}
.exchange-icon-small.fallback { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 8px;}
.deal-ultra-coin-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;}
.deal-ultra-exchange-icons { display: flex; align-items: center; gap: 4px;}
.deal-ultra-exchange-icon { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;}
.deal-ultra-exchange-icon i { font-size: 12px; color: #666;}
.deal-ultra-arrow-icon { color: #666; font-size: 10px;}
.deal-ultra-exchange-single { color: #666; font-size: 10px; margin-left: 4px;}
@media (max-width: 768px) { .coin-icon-wrapper { width: 28px; height: 28px; }
 .coin-icon { width: 28px; height: 28px; }
 .coin-icon-placeholder { width: 28px; height: 28px; font-size: 14px; }
}
@media (max-width: 480px) { .coin-icon-wrapper { width: 24px; height: 24px; }
 .coin-icon { width: 24px; height: 24px; }
 .coin-icon-placeholder { width: 24px; height: 24px; font-size: 12px; }
}
.calculator-hint { background: white; border: 1px solid #ddd; border-radius: 6px; padding: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 300px; font-size: 12px;}
.calculator-examples { color: #666;}
.calculator-examples div { margin: 3px 0; padding: 2px 5px; background: #f8f9fa; border-radius: 3px;}
.calculator-preview { color: #28a745; font-weight: bold; font-size: 0.85em; margin-top: 2px; opacity: 0.8; transition: opacity 0.2s;}
.calculator-preview.fade-out { opacity: 0;}
@keyframes previewFadeOut { from { opacity: 0.8; }
 to { opacity: 0; }
}
@keyframes fadeInOut { 0% { opacity: 0; transform: translateY(-10px); }
 20% { opacity: 1; transform: translateY(0); }
 80% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10px); }
}
input[calculator-enabled] { background-color: #f8fff8 !important; border-left: 3px solid #28a745 !important;}
input[calculator-enabled]:focus { background-color: #f0fff0 !important; border-color: #20c997 !important;}
@keyframes calculationSuccess { 0% { opacity: 0; transform: translateY(-10px) scale(0.9); }
 20% { opacity: 1; transform: translateY(0) scale(1); }
 80% { opacity: 1; transform: translateY(0) scale(1); }
 100% { opacity: 0; transform: translateY(-5px) scale(0.95); }
}
.calculation-success,
.calculation-error { animation: calculationSuccess 1.5s ease-in-out;}

.deal-history { margin-top: 30px; width: 100%; margin-bottom: 20px;}
.deal-history h3 { color: var(--accent-primary); margin-bottom: 15px; font-size: 1.3em; display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 255, 255, 0.1);}
.deals-list-wide { display: flex; flex-direction: column; gap: 8px; width: 100%;}
.deal-row { display: flex; align-items: stretch; background: var(--bg-card); border: 1px solid rgba(0, 255, 255, 0.1); border-radius: 10px; overflow: hidden; transition: all 0.3s ease; position: relative; min-height: 100px;}
.deal-row:hover { transform: translateY(-2px); border-color: rgba(0, 255, 255, 0.3); box-shadow: 0 5px 15px rgba(0, 255, 255, 0.1);}
.deal-row::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%;}
.deal-row.profit::before { background: linear-gradient(to bottom, #28a745, #1e7e34);}
.deal-row.loss::before { background: linear-gradient(to bottom, #dc3545, #c82333);}
.deal-main-info { flex: 4; padding: 12px 15px; display: flex; flex-direction: column; gap: 8px; border-right: 1px solid rgba(0, 255, 255, 0.1); min-height: 100px;}
.deal-side-info { flex: 2; min-width: 200px; padding: 12px 15px; display: flex; flex-direction: column; gap: 8px; background: rgba(0, 0, 0, 0.05); min-height: 100px; position: relative;}
.deal-header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 2px; height: 28px; }
.deal-type-coin { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;}
.deal-type-icon { font-size: 1.1em; color: var(--accent-primary); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.deal-coin { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 1em;}
.deal-coin i { color: #ffc107; font-size: 1em;}
.coin-icon-wrapper { width: 28px; height: 28px; flex-shrink: 0;}
.coin-icon { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.1);}
.coin-icon.fallback { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 14px;}
.coin-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; font-size: 0.95em;}
.deal-date { font-size: 0.8em; color: var(--text-secondary); padding: 4px 8px; background: rgba(0, 0, 0, 0.05); border-radius: 6px; border: 1px solid rgba(0, 255, 255, 0.1); white-space: nowrap; flex-shrink: 0;}
.exchange-flow-row { display: flex; align-items: center; gap: 15px; justify-content: space-between; padding: 8px; background: rgba(0, 0, 0, 0.05); border-radius: 8px; height: 48px;}
.exchange-buy,
.exchange-sell { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;}
.exchange-icon-name { display: flex; align-items: center; gap: 8px; min-width: 120px;}
.exchange-icon { width: 32px; height: 32px; border-radius: 16px; object-fit: contain; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.1);}
.exchange-icon.fallback { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 14px;}
.exchange-name { font-weight: 600; font-size: 0.9em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px;}
.exchange-action { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;}
.action-label { font-size: 0.8em; color: var(--text-secondary); white-space: nowrap;}
.action-amount { font-weight: 700; font-family: monospace; font-size: 1.3em; color: var(--text-primary); white-space: nowrap; line-height: 1.2;}
.exchange-buy .action-amount { color: #dc3545;}
.exchange-sell .action-amount { color: #28a745;}
.flow-arrow { color: var(--accent-primary); font-size: 1em; padding: 0 8px; flex-shrink: 0;}
.deal-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto;}
.stat-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.05); height: 36px;}
.fee-stat { background: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.2);}
.fee-stat i { color: #ffc107; font-size: 1em; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgba(255, 193, 7, 0.2); border-radius: 6px; flex-shrink: 0;}
.profit-stat { border: 1px solid;}
.profit-stat.positive { background: rgba(40, 167, 69, 0.1); border-color: rgba(40, 167, 69, 0.2);}
.profit-stat.negative { background: rgba(220, 53, 69, 0.1); border-color: rgba(220, 53, 69, 0.2);}
.profit-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.9em; flex-shrink: 0;}
.profit-stat.positive .profit-icon { background: #28a745; color: #fff;}
.profit-stat.negative .profit-icon { background: #dc3545; color: #fff;}
.stat-content { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0;}
.stat-label { font-size: 0.75em; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.stat-value { font-weight: 700; font-family: monospace; font-size: 1.2em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1;}
.profit-stat.positive .stat-value { color: #28a745;}
.profit-stat.negative .stat-value { color: #dc3545;}
.stat-percent { font-size: 0.75em; opacity: 0.8; white-space: nowrap;}
.deal-note { display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px; background: rgba(0, 0, 0, 0.05); border-radius: 6px; border-left: 3px solid #ffc107; margin-top: auto; height: 32px; overflow: hidden;}
.deal-note.empty { opacity: 0.7; border-left-color: var(--text-secondary);}
.deal-note i { color: #ffc107; margin-top: 1px; flex-shrink: 0; font-size: 0.9em;}
.deal-note.empty i { color: var(--text-secondary);}
.deal-note span { flex: 1; font-size: 0.8em; color: var(--text-secondary); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.deal-actions { display: flex; gap: 8px; margin-top: 0; padding-top: 0; border-top: none; justify-content: flex-end; align-items: center; height: 100%; }
.btn-edit-deal { width: 32px; height: 32px; border-radius: 6px; border: none; background: rgba(0, 255, 255, 0.1); color: var(--accent-primary); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; font-size: 0.9em;}
.btn-edit-deal:hover { background: rgba(0, 255, 255, 0.2); color: var(--accent-primary); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 255, 255, 0.2);}
.btn-delete-deal { width: 32px; height: 32px; border-radius: 6px; border: none; background: rgba(255, 68, 68, 0.1); color: #dc3545; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; font-size: 0.9em;}
.btn-delete-deal:hover { background: rgba(255, 68, 68, 0.2); color: #dc3545; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(255, 68, 68, 0.2);}
.deal-with-fee .deal-note { display: none !important;}
.deal-with-note .deal-stats { display: none !important;}
@media (max-width: 1200px) { .deal-main-info { flex: 3; }
 .deal-side-info { flex: 1.5; min-width: 180px; }
 .exchange-icon-name { min-width: 100px; }
 .exchange-name { max-width: 80px; }
}
@media (max-width: 992px) { .deal-row { flex-direction: column; min-height: auto; }
 .deal-main-info { border-right: none; border-bottom: 1px solid rgba(0, 255, 255, 0.1); min-height: auto; }
 .deal-side-info { min-width: 100%; min-height: auto; }
 .deal-stats { grid-template-columns: 1fr 1fr; margin-top: 0; }
}
@media (max-width: 768px) { .deal-row { min-height: auto; }
 .deal-header-row { flex-direction: row; height: auto; margin-bottom: 8px; }
 .deal-type-coin { flex-wrap: wrap; }
 .coin-name { max-width: 120px; }
 .deal-date { margin-top: 0; }
 .exchange-flow-row { flex-direction: column; gap: 10px; height: auto; padding: 10px; }
 .flow-arrow { transform: rotate(90deg); padding: 5px 0; }
 .exchange-buy,
 .exchange-sell { width: 100%; }
 .exchange-icon-name { min-width: 100px; }
 .deal-stats { grid-template-columns: 1fr; gap: 6px; }
 .stat-item { height: 34px; }
 .deal-note { height: 30px; }
 .deal-actions { padding-top: 8px; }
 .btn-edit-deal,
 .btn-delete-deal { width: 30px; height: 30px; font-size: 0.85em; }
}
@media (max-width: 576px) { .deal-main-info,
 .deal-side-info { padding: 10px 12px; }
 .deal-coin { font-size: 0.95em; }
 .coin-name { max-width: 100px; font-size: 0.9em; }
 .deal-date { font-size: 0.75em; padding: 3px 6px; }
 .exchange-icon { width: 28px; height: 28px; }
 .exchange-name { max-width: 70px; font-size: 0.85em; }
 .action-amount { font-size: 0.95em; }
 .stat-item { padding: 5px 6px; }
 .stat-value { font-size: 0.85em; }
 .stat-label { font-size: 0.7em; }
 .deal-actions { gap: 6px; }
 .btn-edit-deal,
 .btn-delete-deal { width: 28px; height: 28px; font-size: 0.8em; }
}
@media (max-width: 480px) { .deal-row { border-radius: 8px; }
 .deal-header-row { gap: 8px; }
 .coin-name { max-width: 80px; }
 .exchange-icon-name { min-width: 90px; }
 .exchange-name { max-width: 60px; }
 .deal-stats { grid-template-columns: 1fr; }
 .deal-note span { font-size: 0.75em; -webkit-line-clamp: 1; }
 .btn-edit-deal,
 .btn-delete-deal { width: 26px; height: 26px; font-size: 0.75em; }
}
.deal-ultra-compact { display: none; background: var(--bg-card); border: 1px solid rgba(0, 255, 255, 0.1); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; position: relative; transition: all 0.2s ease; min-height: 60px; height: 60px; overflow: hidden;}
.deal-ultra-compact::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%;}
.deal-ultra-compact.profit::before { background: #28a745;}
.deal-ultra-compact.loss::before { background: #dc3545;}
.deal-ultra-compact:hover { border-color: rgba(0, 255, 255, 0.3); transform: translateY(-1px);}
@media (max-width: 768px) { .deal-row { display: none !important; }
 .deal-ultra-compact { display: flex !important; align-items: center; justify-content: space-between; }
}
.floating-panel-compact { z-index: 10500 !important; pointer-events: auto !important; isolation: isolate; }
.floating-actions-compact { z-index: 10501 !important; position: relative;}
.action-btn-compact { z-index: 10502 !important; position: relative; isolation: isolate;}
body * { pointer-events: auto !important;}
.modal,
.modal *:not(.action-btn-compact):not(.floating-panel-compact):not(.floating-actions-compact) { pointer-events: auto;}


/* Добавляем в начало styles.css, сразу после :root */

/* === LANDING PAGE STYLES === */
.landing-page {
    --primary-color: #00c3ff;
    --secondary-color: #0099cc;
    --dark-bg: #0a0e17;
    --card-bg: #131a2a;
    --text-primary: #ffffff;
    --text-secondary: #a0aec0;
    --border-color: #2d3748;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
}

.landing-page * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.landing-page body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0a0e17 0%, #131a2a 100%);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

.landing-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.landing-header {
    padding: 40px 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 60px;
}

.landing-logo {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.landing-logo i {
    font-size: 1.2em;
}

.landing-tagline {
    font-size: 1.2em;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.landing-auth-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
}

/* Кнопки лендинга (отдельные от приложения) */
.landing-btn {
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.landing-btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #000;
}

.landing-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 195, 255, 0.3);
}

.landing-btn-outline {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.landing-btn-outline:hover {
    background: rgba(0, 195, 255, 0.1);
}

/* Hero Section */
.landing-hero-section {
    text-align: center;
    margin-bottom: 80px;
}

.landing-hero-title {
    font-size: 3em;
    margin-bottom: 20px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-hero-subtitle {
    font-size: 1.3em;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
}

/* Features Section */
.landing-features-section {
    margin-bottom: 80px;
}

.landing-section-title {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 50px;
    color: var(--primary-color);
}

.landing-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.landing-feature-card {
    background: var(--card-bg);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.landing-feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.landing-feature-icon {
    width: 70px;
    height: 70px;
    background: rgba(0, 195, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.8em;
    color: var(--primary-color);
}

.landing-feature-title {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: var(--text-primary);
}

.landing-feature-description {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

/* Screenshot Placeholders */
.landing-screenshot-placeholder {
    background: var(--card-bg);
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
    margin: 20px 0;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.landing-screenshot-placeholder i {
    font-size: 4em;
    margin-bottom: 20px;
    color: var(--primary-color);
    opacity: 0.5;
}

/* How It Works */
.landing-how-it-works {
    margin-bottom: 80px;
}

.landing-steps-container {
    max-width: 800px;
    margin: 0 auto;
}

.landing-step {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 40px;
    padding: 30px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.landing-step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: 700;
    color: #000;
    flex-shrink: 0;
}

.landing-step-content {
    flex: 1;
}

.landing-step-title {
    font-size: 1.4em;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.landing-step-description {
    color: var(--text-secondary);
}

/* Stats Section */
.landing-stats-section {
    margin-bottom: 80px;
    text-align: center;
}

.landing-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.landing-stat-card {
    padding: 30px;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
}

.landing-stat-number {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.landing-stat-label {
    color: var(--text-secondary);
    font-size: 1.1em;
}

/* CTA Section */
.landing-cta-section {
    text-align: center;
    padding: 60px 0;
    background: var(--card-bg);
    border-radius: 20px;
    margin-bottom: 60px;
    border: 1px solid var(--border-color);
}

.landing-cta-title {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.landing-cta-subtitle {
    font-size: 1.2em;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto 40px;
}



/* Responsive для лендинга */
@media (max-width: 768px) {
    .landing-hero-title {
        font-size: 2.2em;
    }
    
    .landing-section-title {
        font-size: 2em;
    }
    
    .landing-step {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .landing-auth-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .landing-btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
}

/* Дополнительные стили для лендинга */
.landing-screenshot-placeholder.small {
    min-height: 150px;
}

.landing-screenshot-placeholder.medium {
    min-height: 200px;
    margin-top: 40px;
}

/* Стили для увеличения по клику */
.landing-screenshot {
    cursor: pointer;
    position: relative;
}

.screenshot-zoom-hint {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.75em;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.landing-screenshot:hover .screenshot-zoom-hint {
    opacity: 1;
}

.screenshot-zoom-hint i {
    font-size: 0.9em;
}

/* Модальное окно для изображений */
.image-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}


.image-modal.active {
    display: flex;
}

.image-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.image-modal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    background: var(--card-bg);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: modalSlideIn 0.4s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.image-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--border-color);
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-modal-close:hover {
    background: rgba(220, 53, 69, 0.8);
    transform: rotate(90deg);
}

.image-modal-content {
    max-width: 95%;
    max-height: 95%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-modal-content img {
    max-width: 90%;
    max-height: 95vh;
    width: auto;
    height: auto;
    object-fit: contain; 
    border-radius: 8px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.image-modal-img {
    width: 100%;
    height: calc(100% - 100px);
    object-fit: contain;
    background: #0a0e17;
    padding: 20px;
}

.image-modal-caption {
    padding: 20px;
    background: rgba(0, 0, 0, 0.8);
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.image-modal-caption h4 {
    color: var(--primary-color);
    margin-bottom: 8px;
    font-size: 1.3em;
}

.image-modal-caption p {
    color: var(--text-secondary);
    font-size: 0.95em;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.image-modal-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
}

.modal-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--border-color);
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
}

.modal-nav-btn:hover {
    background: rgba(0, 195, 255, 0.8);
    transform: scale(1.1);
}

.modal-nav-btn.prev-btn {
    transform: translateX(-10px);
}

.modal-nav-btn.next-btn {
    transform: translateX(10px);
}

.modal-nav-btn:hover.prev-btn {
    transform: translateX(-10px) scale(1.1);
}

.modal-nav-btn:hover.next-btn {
    transform: translateX(10px) scale(1.1);
}

/* Адаптивность модального окна */
@media (max-width: 768px) {
    .image-modal-container {
        width: 95%;
        max-height: 85vh;
    }
    
    .image-modal-img {
        height: calc(100% - 120px);
        padding: 10px;
    }
    
    .image-modal-caption {
        padding: 15px;
    }
    
    .image-modal-caption h4 {
        font-size: 1.1em;
    }
    
    .image-modal-caption p {
        font-size: 0.9em;
    }
    
    .modal-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 1em;
    }
    
    .screenshot-zoom-hint span {
        display: none;
    }
    
    .screenshot-zoom-hint {
        padding: 5px;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        justify-content: center;
    }
    
    .screenshot-zoom-hint i {
        margin: 0;
    }
}

@media (max-width: 480px) {
    .image-modal-container {
        border-radius: 0;
        width: 100%;
        height: 100%;
        max-height: 100vh;
    }
    
    .image-modal-img {
        height: calc(100% - 140px);
    }
    
    .image-modal-close {
        top: 10px;
        right: 10px;
        width: 35px;
        height: 35px;
    }
}