@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap";:root{--bg-color:#090a0f;--panel-bg:#13151c;--panel-border:#222533;--text-main:#8a91a6;--text-bright:#fff;--neon-green:#0f8;--neon-green-glow:#0f83;--neon-red:#f36;--neon-red-glow:#f363;--accent:#4361ee;--accent-glow:#4361ee4d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-main);min-height:100vh;overflow-y:hidden}h1,h2,h3{color:var(--text-bright);font-weight:600}.app-container{flex-direction:column;gap:20px;height:100vh;padding:20px;display:flex}.modal-overlay{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;background:#000c;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.modal-content{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;flex-direction:column;gap:15px;width:400px;padding:30px;display:flex;box-shadow:0 10px 40px #00000080}.modal-content input{background:var(--bg-color);border:1px solid var(--panel-border);color:var(--text-bright);border-radius:8px;outline:none;padding:12px;font-size:14px}.modal-content input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.btn-primary{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:12px;font-weight:600;transition:all .2s}.btn-primary:hover{box-shadow:0 4px 15px var(--accent-glow);background:#2e4dd6}.top-bar{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;justify-content:space-between;align-items:center;padding:15px 25px;display:flex}.controls{align-items:center;gap:20px;display:flex}.control-group{align-items:center;gap:10px;display:flex}.control-group select,.control-group input{background:var(--bg-color);border:1px solid var(--panel-border);color:var(--text-bright);border-radius:6px;outline:none;padding:8px 12px}.status-indicator{background:#ffffff08;border-radius:20px;align-items:center;gap:10px;padding:6px 12px;font-size:14px;display:flex}.dot{background:#333;border-radius:50%;width:8px;height:8px;transition:all .3s}.dot.connected{background:var(--neon-green);box-shadow:0 0 12px var(--neon-green)}.dot.error{background:var(--neon-red);box-shadow:0 0 12px var(--neon-red)}.dot.disconnected{background:#555}.dot.connecting{background:gold;box-shadow:0 0 8px #ffd70066}select,input[type=number]{border:1px solid var(--panel-border);color:var(--text-bright);cursor:pointer;background:#1a1d26;border-radius:8px;outline:none;padding:8px 12px;font-family:inherit;font-size:13px;transition:all .2s cubic-bezier(.4,0,.2,1)}select:hover,input[type=number]:hover{background:#222533;border-color:#444}select:focus,input[type=number]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);background:#1a1d26}input[type=number]{cursor:text;text-align:center;appearance:textfield}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.control-group label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-main);margin-right:-4px;font-size:11px;font-weight:700}.dashboard-grid{flex:1;grid-template-columns:1fr 1fr;gap:20px;display:grid;overflow:hidden}.feed-column{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--panel-border);background:#13151cb3;border-radius:16px;flex-direction:column;transition:transform .3s,box-shadow .3s;display:flex;overflow:hidden}.feed-column:hover{border-color:#333;box-shadow:0 8px 24px #0000004d}.feed-header{border-bottom:1px solid var(--panel-border);background:#ffffff05;justify-content:space-between;align-items:center;padding:18px;display:flex}.feed-title{letter-spacing:1px;font-size:16px}.feed-list{flex-direction:column;flex:1;gap:10px;padding:15px;display:flex;overflow-y:auto}.feed-list::-webkit-scrollbar{width:6px}.feed-list::-webkit-scrollbar-track{background:0 0}.feed-list::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:3px}.horizontal-scroll::-webkit-scrollbar{height:6px}.horizontal-scroll::-webkit-scrollbar-track{background:0 0}.horizontal-scroll::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:3px}.horizontal-scroll .alert-card{flex-shrink:0;min-width:250px}.alert-card{background:var(--bg-color);border:1px solid var(--panel-border);border-radius:8px;justify-content:space-between;align-items:center;padding:12px;animation:.3s ease-out forwards slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert-card.buy{border-left:4px solid var(--neon-green)}.alert-card.sell{border-left:4px solid var(--neon-red)}.alert-card.buy{animation:1s ease-out forwards flashBuy}.alert-card.sell{animation:1s ease-out forwards flashSell}.alert-card.oi-buildup{border-left:4px solid gold;animation:1.5s ease-out forwards flashOi}@keyframes flashBuy{0%{box-shadow:0 0 20px var(--neon-green-glow);background:#00ff881a}to{box-shadow:none;background:var(--bg-color)}}@keyframes flashSell{0%{box-shadow:0 0 20px var(--neon-red-glow);background:#ff33661a}to{box-shadow:none;background:var(--bg-color)}}@keyframes flashOi{0%{background:#ffd70026;box-shadow:0 0 20px #ffd70066}50%{box-shadow:0 0 10px #ffd70033}to{box-shadow:none;background:var(--bg-color)}}.alert-main{flex-direction:column;gap:4px;display:flex}.alert-symbol{color:var(--text-bright);font-weight:600}.alert-time{color:var(--text-main);font-size:12px}.alert-price{font-family:monospace;font-size:14px}.alert-value-section{text-align:right;flex-direction:column;gap:4px;display:flex}.alert-value{font-size:18px;font-weight:700}.buy .alert-value{color:var(--neon-green)}.sell .alert-value{color:var(--neon-red)}.alert-qty{color:var(--text-main);font-size:12px}
