@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";
:root{--bg-primary:#0b0e11;--bg-secondary:#1e2329;--bg-tertiary:#2b3139;--bg-elevated:#181a20;--bg-hover:#2b3139;--bg-input:#2b3139;--bg-card:#1e2329;--bg-overlay:#000000b3;--text-primary:#eaecef;--text-secondary:#848e9c;--text-tertiary:#5e6673;--text-disabled:#474d57;--green:#0ecb81;--green-hover:#2ed191;--green-bg:#0ecb811a;--green-bg-strong:#0ecb8133;--red:#f6465d;--red-hover:#f7576c;--red-bg:#f6465d1a;--red-bg-strong:#f6465d33;--yellow:#f0b90b;--yellow-hover:#f8d12f;--blue:#1e88e5;--blue-hover:#42a5f5;--border-color:#2b3139;--border-light:#363c45;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:20px;--spacing-xxl:24px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", "SF Mono", "Fira Code", monospace;--text-xs:11px;--text-sm:12px;--text-base:13px;--text-md:14px;--text-lg:16px;--text-xl:18px;--text-2xl:20px;--text-3xl:24px;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px #0000004d;--shadow-lg:0 8px 24px #0006;--shadow-glow-green:0 0 20px #0ecb8126;--shadow-glow-red:0 0 20px #f6465d26;--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.35s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.trading-layout{background-color:var(--border-color);grid-template-rows:auto 1fr;grid-template-columns:1fr 300px 360px;gap:1px;height:calc(100vh - 56px);min-height:600px;display:grid}.trading-layout>*{background-color:var(--bg-elevated)}.header{background:var(--bg-elevated);border-bottom:1px solid var(--border-color);height:56px;padding:0 var(--spacing-lg);align-items:center;gap:var(--spacing-xl);z-index:100;display:flex;position:sticky;top:0}.header__logo{align-items:center;gap:var(--spacing-sm);font-size:var(--text-xl);color:var(--yellow);letter-spacing:-.5px;flex-shrink:0;font-weight:700;text-decoration:none;display:flex}.header__logo-icon{background:linear-gradient(135deg, var(--yellow), #f7931a);border-radius:var(--radius-md);width:28px;height:28px;font-weight:800;font-size:var(--text-sm);color:var(--bg-primary);justify-content:center;align-items:center;display:flex}.pair-selector{align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast);display:flex;position:relative}.pair-selector:hover{background:var(--bg-hover)}.pair-selector__symbol{font-size:var(--text-lg);color:var(--text-primary);font-weight:600}.pair-selector__arrow{color:var(--text-secondary);font-size:var(--text-xs);transition:transform var(--transition-fast)}.pair-selector__dropdown{margin-top:var(--spacing-xs);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);min-width:200px;box-shadow:var(--shadow-lg);z-index:200;animation:.15s fadeSlideDown;position:absolute;top:100%;left:0;overflow:hidden}.pair-selector__option{padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;transition:background var(--transition-fast);font-size:var(--text-md);justify-content:space-between;align-items:center;display:flex}.pair-selector__option:hover{background:var(--bg-hover)}.pair-selector__option--active{background:var(--bg-tertiary);color:var(--yellow)}.ticker-stats{align-items:center;gap:var(--spacing-xxl);flex:1;display:flex;overflow-x:auto}.ticker-stat{white-space:nowrap;flex-direction:column;gap:2px;display:flex}.ticker-stat__label{font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.ticker-stat__value{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500;font-family:var(--font-mono)}.ticker-stat__value--positive{color:var(--green)}.ticker-stat__value--negative{color:var(--red)}.ticker-stat__value--large{font-size:var(--text-lg);color:var(--text-primary);font-weight:600}.header__actions{align-items:center;gap:var(--spacing-sm);flex-shrink:0;margin-left:auto;display:flex}.btn{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;gap:var(--spacing-sm);white-space:nowrap;border:none;font-weight:500;text-decoration:none;display:inline-flex}.btn--primary{background:var(--yellow);color:var(--bg-primary)}.btn--primary:hover{background:var(--yellow-hover);transform:translateY(-1px)}.btn--ghost{color:var(--text-secondary);background:0 0}.btn--ghost:hover{color:var(--text-primary);background:var(--bg-hover)}.btn--buy{background:var(--green);color:#fff;font-weight:600}.btn--buy:hover{background:var(--green-hover);box-shadow:var(--shadow-glow-green)}.btn--sell{background:var(--red);color:#fff;font-weight:600}.btn--sell:hover{background:var(--red-hover);box-shadow:var(--shadow-glow-red)}.btn--sm{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--text-xs)}.btn--full{width:100%;padding:var(--spacing-md) var(--spacing-lg);font-size:var(--text-md)}.btn--outline{border:1px solid var(--border-light);color:var(--text-secondary);background:0 0}.btn--outline:hover{border-color:var(--text-secondary);color:var(--text-primary)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.panel{flex-direction:column;display:flex;overflow:hidden}.panel__header{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.panel__title{font-size:var(--text-sm);color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.panel__body{flex:1;overflow:hidden auto}.chart-panel{flex-direction:column;grid-area:1/1/3;min-height:0;display:flex}.chart-controls{padding:var(--spacing-sm) var(--spacing-lg);align-items:center;gap:var(--spacing-xs);border-bottom:1px solid var(--border-color);flex-shrink:0;display:flex}.chart-controls__btn{padding:var(--spacing-xs) var(--spacing-sm);color:var(--text-secondary);font-size:var(--text-xs);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);font-weight:500;font-family:var(--font-sans);background:0 0;border:none}.chart-controls__btn:hover{color:var(--text-primary);background:var(--bg-hover)}.chart-controls__btn--active{color:var(--yellow);background:#f0b90b1a}.chart-container{flex:1;min-height:0;position:relative}.orderbook-panel{flex-direction:column;grid-area:1/2/3;min-height:0;display:flex}.orderbook-tabs{gap:var(--spacing-sm);padding:0 var(--spacing-lg);display:flex}.orderbook-tab{padding:var(--spacing-xs);cursor:pointer;border-radius:var(--radius-sm);transition:background var(--transition-fast);background:0 0;border:none;gap:2px;display:flex}.orderbook-tab:hover{background:var(--bg-hover)}.orderbook-tab--active{background:var(--bg-tertiary)}.orderbook-tab__bar{border-radius:1px;width:4px;height:12px}.orderbook__columns{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-color);grid-template-columns:1fr 1fr 1fr;display:grid}.orderbook__columns span:last-child{text-align:right}.orderbook__content{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.orderbook__asks,.orderbook__bids{flex:1;min-height:0;display:flex;overflow-y:auto}.orderbook__asks{flex-direction:column-reverse}.orderbook__bids{flex-direction:column}.orderbook__row{padding:2px var(--spacing-lg);font-size:var(--text-sm);font-family:var(--font-mono);cursor:pointer;transition:background var(--transition-fast);grid-template-columns:1fr 1fr 1fr;align-items:center;min-height:22px;display:grid;position:relative}.orderbook__row:hover{background:var(--bg-hover)}.orderbook__row--ask .orderbook__price{color:var(--red)}.orderbook__row--bid .orderbook__price{color:var(--green)}.orderbook__qty{color:var(--text-secondary)}.orderbook__total{text-align:right;color:var(--text-secondary)}.orderbook__depth{opacity:.08;pointer-events:none;transition:width var(--transition-fast);position:absolute;top:0;bottom:0;right:0}.orderbook__row--ask .orderbook__depth{background:var(--red)}.orderbook__row--bid .orderbook__depth{background:var(--green)}.orderbook__spread{padding:var(--spacing-sm) var(--spacing-lg);border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);flex-shrink:0;justify-content:center;align-items:center;display:flex}.orderbook__last-price{font-size:var(--text-lg);font-weight:600;font-family:var(--font-mono);align-items:center;gap:var(--spacing-sm);display:flex}.orderbook__last-price--up{color:var(--green)}.orderbook__last-price--down{color:var(--red)}.orderbook__spread-value{font-size:var(--text-xs);color:var(--text-tertiary);margin-left:var(--spacing-sm)}.right-column{flex-direction:column;grid-area:1/3/3;min-height:0;display:flex}.order-form{padding:var(--spacing-lg);border-bottom:1px solid var(--border-color)}.order-form__side-toggle{gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);background:var(--bg-primary);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;padding:3px;display:grid}.order-form__side-btn{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--text-secondary);background:0 0;border:none;font-weight:600}.order-form__side-btn--buy.active{background:var(--green);color:#fff;box-shadow:var(--shadow-glow-green)}.order-form__side-btn--sell.active{background:var(--red);color:#fff;box-shadow:var(--shadow-glow-red)}.order-form__type-tabs{gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-sm);display:flex}.order-form__type-tab{color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;padding-bottom:var(--spacing-sm);font-weight:500;font-family:var(--font-sans);transition:color var(--transition-fast);background:0 0;border:none;position:relative}.order-form__type-tab:hover,.order-form__type-tab--active{color:var(--text-primary)}.order-form__type-tab--active:after{content:"";background:var(--yellow);border-radius:1px;height:2px;position:absolute;bottom:-1px;left:0;right:0}.order-form__field{margin-bottom:var(--spacing-md)}.order-form__label{margin-bottom:var(--spacing-xs);font-size:var(--text-xs);color:var(--text-tertiary);justify-content:space-between;align-items:center;display:flex}.order-form__input-wrap{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:border-color var(--transition-fast);align-items:center;display:flex;overflow:hidden}.order-form__input-wrap:focus-within{border-color:var(--yellow)}.order-form__input{color:var(--text-primary);font-family:var(--font-mono);font-size:var(--text-md);padding:var(--spacing-sm) var(--spacing-md);background:0 0;border:none;outline:none;flex:1;width:100%}.order-form__input::placeholder{color:var(--text-disabled)}.order-form__input-suffix{padding:var(--spacing-sm) var(--spacing-md);color:var(--text-tertiary);font-size:var(--text-xs);white-space:nowrap;font-weight:500}.order-form__percent-btns{gap:var(--spacing-xs);margin-bottom:var(--spacing-lg);grid-template-columns:repeat(4,1fr);display:grid}.order-form__percent-btn{padding:var(--spacing-xs);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-xs);cursor:pointer;transition:all var(--transition-fast);font-weight:500;font-family:var(--font-sans)}.order-form__percent-btn:hover{border-color:var(--text-tertiary);color:var(--text-primary)}.order-form__total{padding:var(--spacing-sm) 0;font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--spacing-md);justify-content:space-between;display:flex}.order-form__balance{padding:var(--spacing-sm) 0;font-size:var(--text-xs);color:var(--text-tertiary);margin-bottom:var(--spacing-md);justify-content:space-between;display:flex}.order-form__balance-value{font-family:var(--font-mono);color:var(--text-secondary)}.trades-panel{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.trades__columns{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--text-xs);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-color);flex-shrink:0;grid-template-columns:1fr 1fr 1fr;display:grid}.trades__columns span:last-child{text-align:right}.trades__list{flex:1;overflow-y:auto}.trades__row{padding:2px var(--spacing-lg);font-size:var(--text-sm);font-family:var(--font-mono);transition:background var(--transition-fast);grid-template-columns:1fr 1fr 1fr;animation:.3s fadeIn;display:grid}.trades__row:hover{background:var(--bg-hover)}.trades__price--up{color:var(--green)}.trades__price--down{color:var(--red)}.trades__qty{color:var(--text-secondary)}.trades__time{text-align:right;color:var(--text-tertiary)}.modal-overlay{background:var(--bg-overlay);z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:var(--spacing-xxl);width:100%;max-width:400px;box-shadow:var(--shadow-lg);animation:.3s fadeSlideUp}.modal__title{font-size:var(--text-2xl);margin-bottom:var(--spacing-xxl);text-align:center;font-weight:700}.modal__tabs{gap:var(--spacing-xs);margin-bottom:var(--spacing-xxl);background:var(--bg-primary);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;padding:3px;display:grid}.modal__tab{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);font-weight:500;font-family:var(--font-sans);background:0 0;border:none}.modal__tab--active{background:var(--bg-tertiary);color:var(--text-primary)}.modal__field{margin-bottom:var(--spacing-lg)}.modal__field-label{font-size:var(--text-xs);color:var(--text-tertiary);margin-bottom:var(--spacing-xs);text-transform:uppercase;letter-spacing:.5px;display:block}.modal__input{width:100%;padding:var(--spacing-md);background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-md);transition:border-color var(--transition-fast);outline:none}.modal__input:focus{border-color:var(--yellow)}.modal__error{color:var(--red);font-size:var(--text-xs);margin-bottom:var(--spacing-md);text-align:center}.modal__close{top:var(--spacing-lg);right:var(--spacing-lg);color:var(--text-secondary);font-size:var(--text-xl);cursor:pointer;padding:var(--spacing-xs);background:0 0;border:none;position:absolute}.toast-container{top:70px;right:var(--spacing-lg);z-index:9999;gap:var(--spacing-sm);flex-direction:column;display:flex;position:fixed}.toast{padding:var(--spacing-md) var(--spacing-xl);border-radius:var(--radius-md);font-size:var(--text-sm);box-shadow:var(--shadow-lg);max-width:350px;font-weight:500;animation:.3s fadeSlideLeft,.3s 2.7s forwards fadeOut}.toast--success{background:var(--green-bg-strong);border:1px solid var(--green);color:var(--green)}.toast--error{background:var(--red-bg-strong);border:1px solid var(--red);color:var(--red)}.toast--info{border:1px solid var(--blue);color:var(--blue);background:#1e88e533}.spinner{border:2px solid var(--border-color);border-top-color:var(--yellow);border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}.loading-placeholder{height:100%;color:var(--text-tertiary);font-size:var(--text-sm);justify-content:center;align-items:center;display:flex}.user-menu{align-items:center;gap:var(--spacing-sm);display:flex}.user-menu__avatar{background:linear-gradient(135deg, var(--yellow), #f7931a);width:32px;height:32px;font-weight:700;font-size:var(--text-sm);color:var(--bg-primary);border-radius:50%;justify-content:center;align-items:center;display:flex}.user-menu__name{font-size:var(--text-sm);color:var(--text-secondary);font-weight:500}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeSlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeSlideLeft{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes flashGreen{0%{background:var(--green-bg)}to{background:0 0}}@keyframes flashRed{0%{background:var(--red-bg)}to{background:0 0}}.flash-green{animation:.5s flashGreen}.flash-red{animation:.5s flashRed}@media (max-width:1200px){.trading-layout{grid-template-columns:1fr 280px 320px}}@media (max-width:960px){.trading-layout{grid-template-rows:auto 400px auto;grid-template-columns:1fr 260px}.right-column{grid-area:3/1/auto/-1}.ticker-stats{display:none}}@media (max-width:640px){.trading-layout{grid-template-rows:auto 350px auto auto;grid-template-columns:1fr}.orderbook-panel{grid-area:3/1;max-height:350px}.right-column{grid-area:4/1}.header{padding:0 var(--spacing-sm);gap:var(--spacing-sm)}.header__logo span{display:none}}