@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0b0e11;--bg-secondary: #1e2329;--bg-tertiary: #2b3139;--text-primary: #eaecef;--text-secondary: #848e9c;--text-tertiary: #5e6673;--border-color: #2b3139;--profit: #0ecb81;--loss: #f6465d;--accent: #8b5cf6;--warning: #f0b90b}.light{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--text-primary: #1e2329;--text-secondary: #5e6673;--text-tertiary: #848e9c;--border-color: #e9ecef}.demo-container{width:400px;height:600px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;position:relative}.header-bar{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:12px 16px;flex-shrink:0}.header-content{display:flex;align-items:center;justify-content:space-between}.header-left{display:flex;align-items:center;gap:12px}.logo-container{display:flex;align-items:center;gap:8px}.logo{height:24px;width:auto}.tier-badge{display:flex;align-items:center;gap:4px;padding:2px 6px;background:#8b5cf626;color:#a78bfa;border:1px solid rgba(139,92,246,.3);border-radius:4px;font-size:9px;font-weight:700;text-transform:uppercase}.last-update{font-size:10px;color:var(--text-secondary);font-variant-numeric:tabular-nums}.header-right{display:flex;align-items:center;gap:6px}.live-badge{display:flex;align-items:center;gap:4px;padding:2px 8px;background:#0ecb8126;color:var(--profit);border-radius:4px;font-size:10px;font-weight:600}.live-dot{width:6px;height:6px;background:var(--profit);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.opp-count{background:#0ecb8126;color:var(--profit);padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600}.icon-btn{padding:6px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;border-radius:6px;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.icon-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.icon-btn.spinning svg{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.main-content{flex:1;overflow-y:auto;padding:12px}.main-content::-webkit-scrollbar{width:4px}.main-content::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:2px}.section{margin-bottom:16px}.section-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:8px;padding:0 4px}.opportunity-list{list-style:none;display:flex;flex-direction:column;gap:8px}.opportunity-card{background:linear-gradient(135deg,#0ecb8114,#0ecb8105);border:1px solid rgba(14,203,129,.3);border-radius:12px;padding:12px;position:relative;overflow:hidden}.opportunity-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--profit),transparent)}.opp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.opp-symbol{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}.coin-icon{width:24px;height:24px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#ffffff1a,#ffffff05);padding:2px}.coin-icon img{width:100%;height:100%;border-radius:50%;object-fit:cover}.low-liq-badge{display:flex;align-items:center;gap:4px;padding:2px 6px;background:#f0b90b1a;border:1px solid rgba(240,185,11,.2);border-radius:4px;font-size:9px;color:var(--warning);font-weight:500}.spread-badge{padding:2px 8px;background:#0ecb8126;color:var(--profit);border-radius:4px;font-size:12px;font-weight:600}.exchange-flow{display:flex;align-items:center;gap:8px;margin-bottom:8px}.exchange-box{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-size:12px}.exchange-box.buy{background:#0ecb811a}.exchange-box.sell{background:#f6465d1a}.exchange-name{font-weight:500}.exchange-box.buy .exchange-name{color:var(--profit)}.exchange-box.sell .exchange-name{color:var(--loss)}.exchange-price{font-variant-numeric:tabular-nums;font-weight:600}.exchange-box.buy .exchange-price{color:var(--profit)}.exchange-box.sell .exchange-price{color:var(--loss)}.profit-section{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#0ecb811a;border-radius:8px;margin-bottom:8px}.investment-info{font-size:11px}.profit-value{text-align:right}.profit-amount{font-size:14px;font-weight:700;color:var(--profit);font-variant-numeric:tabular-nums}.profit-percent{font-size:10px;color:var(--profit);margin-left:4px}.opp-footer{display:flex;align-items:center;justify-content:space-between}.fee-info{font-size:10px;color:var(--text-tertiary)}.trade-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#8b5cf61a;color:var(--accent);border:none;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s ease}.trade-btn:hover{background:#8b5cf633}.watchlist{display:flex;flex-direction:column;gap:8px}.watchlist-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:12px}.watchlist-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.watchlist-symbol{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}.spread-text{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-secondary)}.price-list{list-style:none;display:flex;flex-direction:column;gap:4px}.price-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:6px;transition:background .1s ease}.price-row:hover{background:var(--bg-tertiary)}.price-row.best{background:#0ecb8114}.price-row.worst{background:#f6465d0d}.price-exchange{display:flex;align-items:center;gap:8px}.exchange-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffffff14,#ffffff05);border:1px solid rgba(255,255,255,.08);border-radius:6px;overflow:hidden}.exchange-icon img{width:18px;height:18px;object-fit:contain}.exchange-name-sm{font-size:12px;color:var(--text-secondary)}.best-tag{font-size:9px;font-weight:600;color:var(--profit);text-transform:uppercase}.price-values{display:flex;align-items:center;gap:12px}.price-amount{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.price-change{display:flex;align-items:center;gap:2px;font-size:10px;font-variant-numeric:tabular-nums}.text-profit{color:var(--profit)}.text-loss{color:var(--loss)}.text-accent{color:var(--accent)}.text-muted{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.font-medium{font-weight:500}.icon-xs{width:12px;height:12px}.icon-sm{width:16px;height:16px}.settings-overlay{position:absolute;inset:0;background:#0009;z-index:40}.settings-panel{position:absolute;top:0;right:-320px;width:320px;height:100%;background:var(--bg-secondary);border-left:1px solid var(--border-color);z-index:50;transition:right .25s ease;display:flex;flex-direction:column}.settings-panel.open{right:0}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-color)}.settings-header h2{font-size:14px;font-weight:600}.settings-content{flex:1;overflow-y:auto;padding:16px}.settings-content::-webkit-scrollbar{width:4px}.settings-content::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:2px}.settings-group{margin-bottom:20px}.settings-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:10px}.subscription-card{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;padding:12px}.subscription-card.pro{border-color:#8b5cf64d;background:linear-gradient(135deg,#8b5cf614,#8b5cf605)}.subscription-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.plan-badge{font-size:12px;font-weight:700;color:var(--accent)}.subscription-features{display:flex;flex-direction:column;gap:6px}.feature-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-secondary)}.lang-dropdown-container{position:relative}.lang-dropdown-btn{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:13px;cursor:pointer;transition:border-color .15s}.lang-dropdown-btn:hover{border-color:var(--accent)}.lang-dropdown-btn .icon-sm{margin-left:auto;transition:transform .2s}.lang-dropdown-btn .icon-sm.rotated{transform:rotate(180deg)}.lang-flag{font-size:16px}.lang-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;max-height:200px;overflow-y:auto;z-index:60}.lang-option{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;background:none;border:none;color:var(--text-primary);font-size:13px;cursor:pointer;text-align:left}.lang-option:hover{background:var(--bg-tertiary)}.lang-option.active{background:#8b5cf61a}.lang-option .icon-xs{margin-left:auto}.theme-toggle{display:flex;gap:8px}.theme-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s}.theme-btn:hover{border-color:var(--accent)}.theme-btn.active{background:#8b5cf626;border-color:#8b5cf64d;color:var(--accent)}.exchange-chips{display:flex;flex-wrap:wrap;gap:8px}.exchange-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--bg-tertiary);border:1px solid transparent;border-radius:8px;color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}.exchange-chip:hover{background:#3c4147}.exchange-chip.active{background:#8b5cf626;border-color:#8b5cf64d;color:var(--accent)}.chip-logo{width:16px;height:16px;border-radius:4px;object-fit:contain}.slider-container{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;padding:12px}.slider-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.slider-value{font-size:13px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}.slider-input{width:100%;height:4px;background:var(--bg-primary);border-radius:2px;appearance:none;outline:none}.slider-input::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer}.slider-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--text-tertiary)}.volume-input-container{display:flex;align-items:center;gap:8px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:8px 12px}.dollar-sign{color:var(--text-secondary);font-size:13px}.volume-input{flex:1;background:none;border:none;color:var(--text-primary);font-size:13px;font-variant-numeric:tabular-nums;outline:none}.volume-presets{display:flex;gap:6px;margin-top:8px}.preset-btn{flex:1;padding:6px;background:var(--bg-tertiary);border:none;border-radius:6px;color:var(--text-secondary);font-size:10px;font-weight:500;cursor:pointer;transition:all .15s}.preset-btn:hover{background:#3c4147}.preset-btn.active{background:var(--accent);color:#fff}.liquidity-mode{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.mode-toggle{display:flex;gap:6px}.mode-btn{padding:6px 12px;background:var(--bg-tertiary);border:none;border-radius:6px;color:var(--text-secondary);font-size:11px;font-weight:500;cursor:pointer;transition:all .15s}.mode-btn:hover{background:#3c4147}.mode-btn.active{background:#8b5cf626;color:var(--accent)}.mode-btn.active.warn{background:#f0b90b26;color:var(--warning)}.refresh-btns{display:flex;gap:8px}.refresh-btn{flex:1;position:relative;padding:10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-secondary);font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;cursor:pointer;transition:all .15s}.refresh-btn:hover{border-color:var(--accent)}.refresh-btn.active{background:#8b5cf626;border-color:#8b5cf64d;color:var(--accent)}.refresh-btn.pro{background:linear-gradient(135deg,#8b5cf61a,#8b5cf60d);border-color:#8b5cf633}.lock-icon{position:absolute;top:2px;right:2px;width:10px;height:10px;color:var(--text-tertiary)}