*{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0b0e11;--bg-secondary: #1e2329;--bg-tertiary: #2b3139;--border: #2b3139;--text-primary: #eaecef;--text-secondary: #848e9c;--green: #0ecb81;--green-hover: #0dd991;--red: #f6465d;--red-hover: #ff5a70;--yellow: #fcd535}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.5;font-size:14px}.app{display:flex;gap:1px;background:var(--border);min-height:100vh}.main-content{flex:1;background:var(--bg-primary);display:flex;flex-direction:column;min-width:0}.sidebar{width:320px;background:var(--bg-secondary);flex-shrink:0}.chart-container{flex:1;display:flex;flex-direction:column;min-height:400px}.chart-header{padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg-secondary)}.chart-symbol{font-size:16px;font-weight:600}.chart-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);background:var(--bg-primary)}.trading-panel{width:320px;background:var(--bg-secondary);border-radius:4px;padding:16px;display:flex;flex-direction:column;gap:12px}.panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border)}.panel-header h2{font-size:16px;font-weight:500}.balance-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary)}.summary{padding:12px 0;border-top:1px solid var(--border)}.summary-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary)}.component-placeholder{background:var(--bg-tertiary);border:2px dashed var(--border);border-radius:4px;padding:16px;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:12px;min-height:48px}.side-tabs{display:flex;gap:8px}.side-tab{flex:1;padding:10px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;background:var(--bg-tertiary);color:var(--text-secondary)}.side-tab.buy.active{background:var(--green);color:var(--bg-primary)}.side-tab.sell.active{background:var(--red);color:#fff}.order-types{display:flex;gap:4px;background:var(--bg-tertiary);padding:4px;border-radius:4px}.order-type{flex:1;padding:6px 12px;border:none;border-radius:2px;font-size:12px;cursor:pointer;background:transparent;color:var(--text-secondary)}.order-type.active{background:var(--bg-secondary);color:var(--text-primary)}.input-field{display:flex;flex-direction:column;gap:4px}.input-field label{font-size:12px;color:var(--text-secondary)}.input-wrapper{display:flex;align-items:center;background:var(--bg-tertiary);border-radius:4px;padding:0 12px}.input-wrapper input{flex:1;padding:12px 0;border:none;background:transparent;color:var(--text-primary);font-size:14px;outline:none}.input-wrapper input::placeholder{color:var(--text-secondary)}.input-suffix{color:var(--text-secondary);font-size:14px}.percent-slider{display:flex;gap:8px}.percent-btn{flex:1;padding:6px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .15s}.percent-btn:hover,.percent-btn.active{border-color:var(--yellow);color:var(--yellow)}.submit-btn{width:100%;padding:12px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s}.submit-btn.buy{background:var(--green);color:var(--bg-primary)}.submit-btn.buy:hover:not(:disabled){background:var(--green-hover)}.submit-btn.sell{background:var(--red);color:#fff}.submit-btn.sell:hover:not(:disabled){background:var(--red-hover)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.leverage-container{display:flex;flex-direction:column;gap:12px}.leverage-header{display:flex;justify-content:space-between;align-items:center}.leverage-header label{font-size:12px;color:var(--text-secondary)}.leverage-value{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:4px;color:var(--yellow);font-size:14px;font-weight:600;padding:4px 12px;cursor:pointer;transition:all .15s}.leverage-value:hover{border-color:var(--yellow)}.leverage-input-row{display:flex;align-items:center;gap:8px}.leverage-input{flex:1;background:var(--bg-tertiary);border:1px solid var(--yellow);border-radius:4px;color:var(--text-primary);padding:6px 12px;font-size:14px;outline:none}.leverage-range{font-size:11px;color:var(--text-secondary)}.leverage-slider-container{display:flex;flex-direction:column;gap:4px}.leverage-slider{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-tertiary);border-radius:2px;outline:none}.leverage-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--yellow);cursor:pointer;transition:all .15s}.leverage-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.leverage-slider::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--yellow);cursor:pointer;transition:all .15s}.leverage-slider::-moz-range-thumb:hover{transform:scale(1.2)}.leverage-marks{display:flex;justify-content:space-between;font-size:10px;color:var(--text-secondary);padding:0 2px}.leverage-presets{display:flex;gap:6px}.leverage-preset{flex:1;padding:6px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .15s}.leverage-preset:hover{border-color:var(--yellow);color:var(--yellow)}.leverage-preset.active{border-color:var(--yellow);background:var(--yellow);color:var(--bg-primary);font-weight:600}