:root{--color-bg: #0e1116;--color-bg-elev: #1a1e2e;--panel-bg: rgba(26, 30, 46, .8);--color-text: #d1d4dc;--color-muted: #888;--color-border: #2b2b43;--color-primary: #26a69a;--color-primary-hover: #1f8f86;--color-danger: #ef5350;--color-info: #42a5f5;--chart-up: #26a69a;--chart-down: #ef5350;--chart-crosshair: #758696;--chart-grid: rgba(42, 46, 57, .5);--chart-bg: transparent;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 32px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .3);--shadow-xl: 0 16px 32px rgba(0, 0, 0, .4)}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,sans-serif;background:linear-gradient(180deg,#050514fa,#080c1ef2 30%,#0c1228eb 70%,#060a19f2);color:var(--color-text);min-height:100vh;padding:0;line-height:1.6;transition:background .3s ease}body.theme-pixi{background:transparent;color:#00f0f0}#app{max-width:2560px;margin:0 auto}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#3b3b53;border-radius:4px;transition:background var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:#4b4b63}button{font-family:inherit;cursor:pointer;border:none;background:none;transition:all var(--transition-fast)}button:disabled{opacity:.5;cursor:not-allowed}input,textarea,select{font-family:inherit;color:inherit;background:inherit}input:focus,textarea:focus,select:focus{outline:none}@media(max-width:1400px){body{padding:0}#app{max-width:100%}}@media(max-width:1200px){body{padding:0}.container{max-width:100%!important}}@media(max-width:992px){:root{--spacing-lg: 12px;--spacing-xl: 16px}body{padding:0}}@media(max-width:768px){:root{--spacing-md: 8px;--spacing-lg: 10px;--spacing-xl: 14px}body{padding:0;font-size:14px}.header{flex-direction:column;gap:12px;align-items:stretch!important;padding:12px!important}.header-left{flex-wrap:wrap;gap:10px!important}.header-right{justify-content:space-between;flex-wrap:wrap;gap:8px!important}.header-controls{width:100%;justify-content:space-between}.chart-info{flex-direction:column;gap:8px!important}.kline-controls{flex-direction:column;align-items:flex-start}.quick-search-box{width:95vw!important;max-width:400px}.chart-container,.kline-chart-container{height:55vh!important;min-height:350px!important;max-height:500px!important}}@media(max-width:576px){:root{--spacing-sm: 6px;--spacing-md: 8px;--spacing-lg: 10px;--radius-lg: 6px;--radius-xl: 8px}body{padding:0;font-size:13px}.header{padding:10px!important;margin-bottom:12px!important;border-radius:8px!important}.header h1{font-size:18px!important}.header-price .price-display{font-size:20px!important}.header-price .change-display{font-size:12px!important}.stats-card,.status{padding:6px 10px!important;font-size:11px!important}.chart-container,.kline-chart-container{height:45vh!important;min-height:280px!important;max-height:400px!important;padding:8px!important;border-radius:8px!important}.chart-section{margin-bottom:12px!important}.kline-section{margin-top:12px!important}.chart-cell .kline-period-selector,.chart-inner .kline-period-selector{top:12px!important;left:12px!important}.period-dropdown-button{padding:5px 10px!important;font-size:12px!important;min-width:70px!important}.period-dropdown-item{padding:10px 14px!important;font-size:13px!important}.data-range-info{font-size:11px!important;padding:3px 8px!important}.quick-search-box{width:calc(100vw - 24px)!important;max-width:none!important}}@media(max-width:400px){body{padding:0;font-size:12px}.header{padding:8px!important;gap:8px!important}.header h1{font-size:16px!important}.header-title{max-width:50vw}.contract-subtitle{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.header-price{gap:6px!important}.header-price .price-display{font-size:18px!important}.header-left{gap:8px!important}.header-right{gap:6px!important}.stats-card{padding:4px 8px!important;font-size:10px!important}.theme-btn{padding:6px 8px!important;font-size:14px!important}.status{padding:4px 8px!important;font-size:10px!important}.pulse{width:6px!important;height:6px!important}.chart-container,.kline-chart-container{height:40vh!important;min-height:240px!important;max-height:320px!important;padding:6px!important}}@media(max-height:500px)and (orientation:landscape){body{padding:0}.header{padding:8px 12px!important;margin-bottom:8px!important}.chart-container,.kline-chart-container{height:60vh!important;min-height:200px!important}.chart-section{margin-bottom:8px!important}.kline-section{margin-top:8px!important}}@media(hover:none)and (pointer:coarse){button,.period-dropdown-button,.period-dropdown-item,.theme-btn,.status{min-height:44px;min-width:44px}.period-dropdown-item{padding:12px 16px!important}.period-dropdown-button:hover{background:#0a0e1af2}.period-dropdown-button:active{background:#26a69a26;border-color:#26a69a80}.theme-btn:hover{background:#0a0e1a99}.theme-btn:active{background:#26a69a26;border-color:#26a69a80}}@media(prefers-contrast:high){:root{--color-border: #4b4b63;--color-muted: #aaa}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body{background:linear-gradient(135deg,#0a0e1a,#1a1e2e);color:#d1d4dc}.container{max-width:1600px;margin:0 auto}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;padding:20px 30px;background:#1a1e2ecc;border-radius:12px;border:1px solid #2b2b43}.header-title{text-align:left}.header h1{font-size:32px;margin-bottom:8px;background:linear-gradient(135deg,#26a69a,#2962ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.header p{color:#758696;font-size:14px}.status{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:6px;font-weight:600;font-size:13px}.status.connected{background:#26a69a33;color:#26a69a;border:1px solid #26a69a}.status.disconnected{background:#ef535033;color:#ef5350;border:1px solid #ef5350}.status.connecting{background:#ffc10733;color:#ffc107;border:1px solid #ffc107}.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;animation:pulse 2s infinite}.pulse.green{background:#26a69a;box-shadow:0 0 #26a69ab3}.pulse.red{background:#ef5350;box-shadow:0 0 #ef5350b3}.pulse.yellow{background:#ffc107;box-shadow:0 0 #ffc107b3}@keyframes pulse{0%{box-shadow:0 0 #26a69ab3}70%{box-shadow:0 0 0 10px #26a69a00}to{box-shadow:0 0 #26a69a00}}.chart-container{background:#1a1e2ecc;border-radius:12px;padding:15px;border:1px solid #2b2b43;position:relative;height:750px}.info-panel{position:absolute;top:25px;left:25px;background:#0a0e1af2;padding:18px 22px;border-radius:10px;border:1px solid rgba(42,46,57,.8);box-shadow:0 8px 16px #0006;font-family:Consolas,Monaco,monospace;z-index:100;min-width:200px}.price-display{font-size:32px;font-weight:700;margin-bottom:10px;letter-spacing:-.5px}.price-up{color:#ef5350}.price-down{color:#26a69a}.change-display{font-size:16px;margin-bottom:12px}.stats{font-size:13px;color:#758696;border-top:1px solid rgba(42,46,57,.5);padding-top:12px;margin-top:12px}.stats div{margin:6px 0;display:flex;justify-content:space-between;gap:15px}.stats .label{color:#758696}.stats .value{color:#d1d4dc;font-weight:600}.kline-section{margin-top:25px}.kline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.kline-title{font-size:20px;font-weight:600;color:#d1d4dc}.data-range-info{font-size:12px;color:#758696;padding:4px 12px;background:#1a1e2e99;border-radius:6px;border:1px solid #2b2b43}.kline-chart-container{background:#1a1e2ecc;border-radius:12px;padding:15px;border:1px solid #2b2b43;position:relative;height:750px;margin-bottom:15px}.chart-cell .kline-period-selector,.chart-inner .kline-period-selector{position:absolute;top:25px;left:25px;z-index:10}.kline-header .kline-period-selector,.kline-header-slot .kline-period-selector{position:static!important;top:auto!important;left:auto!important}.period-dropdown-button{padding:6px 12px;background:#0a0e1af2;color:#d1d4dc;border:1px solid rgba(42,46,57,.9);border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;white-space:nowrap;backdrop-filter:blur(8px);display:flex;align-items:center;gap:8px;min-width:80px}.period-dropdown-button:hover{background:#0a0e1a;border-color:#2a2e39e6;color:#d1d4dc}.period-dropdown-button.active{border-color:#2a2e39e6;background:#0a0e1af2}.period-dropdown-arrow{font-size:10px;transition:transform .2s;margin-left:auto}.period-dropdown-button.active .period-dropdown-arrow{transform:rotate(180deg)}.period-dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;background:#0a0e1afa;border:1px solid rgba(42,46,57,.9);border-radius:6px;backdrop-filter:blur(10px);min-width:100px;display:none;box-shadow:0 4px 12px #00000080;overflow:hidden;z-index:100}.period-dropdown-menu.show{display:block;animation:dropdownFadeIn .15s ease}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.period-dropdown-item{padding:8px 16px;color:#d1d4dc;cursor:pointer;font-size:13px;transition:all .15s;display:flex;align-items:center;justify-content:space-between}.period-dropdown-item:hover{background:#ffffff0d;color:#d1d4dc}.period-dropdown-item.selected{background:transparent;color:#d1d4dc}.period-dropdown-item .check-icon{font-size:12px;color:#d1d4dc;visibility:hidden}.period-dropdown-item.selected .check-icon{visibility:visible}.quick-search-overlay{position:fixed;inset:0;background:#0a0e1acc;backdrop-filter:blur(4px);z-index:1000;display:none;align-items:flex-end;justify-content:center;padding-bottom:80px;animation:fadeIn .2s ease}.quick-search-overlay.active{display:flex}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.quick-search-box{background:#1a1e2efa;border:2px solid #26a69a;border-radius:12px;box-shadow:0 16px 48px #0009;width:580px;max-width:90vw;animation:slideUp .2s ease;overflow:hidden}.quick-search-input-wrapper{padding:20px;border-bottom:1px solid #2b2b43}.quick-search-input{width:100%;padding:14px 18px;font-size:18px;background:#1e1e2e;color:#d1d4dc;border:2px solid #3b3b53;border-radius:8px;outline:none;transition:all .3s;font-family:Consolas,monospace}.quick-search-input:focus{border-color:#26a69a;background:#252532}.quick-search-input::placeholder{color:#758696}.quick-search-results{max-height:320px;overflow-y:auto;padding:8px}.quick-search-results::-webkit-scrollbar{width:8px}.quick-search-results::-webkit-scrollbar-track{background:#1e1e2e}.quick-search-results::-webkit-scrollbar-thumb{background:#3b3b53;border-radius:4px}.quick-search-results::-webkit-scrollbar-thumb:hover{background:#4b4b63}.search-result-item{padding:12px 16px;margin:4px 0;background:#2a2e3966;border:1px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}.search-result-item:hover,.search-result-item.selected{background:#26a69a26;border-color:#26a69a}.search-result-code{font-family:Consolas,monospace;font-size:14px;color:#26a69a;font-weight:600}.search-result-name{font-size:13px;color:#758696}.quick-search-hint{padding:12px 20px;font-size:12px;color:#758696;border-top:1px solid #2b2b43;display:flex;justify-content:center;align-items:center;background:#0a0e1a80}.quick-search-hint kbd{background:#2b2b43;padding:2px 6px;border-radius:3px;font-family:Consolas,monospace;font-size:11px;color:#26a69a;border:1px solid #3b3b53;display:inline-block;margin:0 2px}.search-no-results{padding:40px 20px;text-align:center;color:#758696;font-size:14px}.search-loading{padding:30px 20px;text-align:center;color:#26a69a;font-size:14px}.search-loading:before{content:"⏳ ";animation:rotate 2s linear infinite;display:inline-block}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.footer{text-align:center;margin-top:25px;padding:15px;color:#758696;font-size:13px}.footer kbd{background:#2b2b43;padding:3px 8px;border-radius:4px;border:1px solid #3b3b53;font-family:Consolas,monospace;font-size:11px;color:#26a69a;margin:0 2px}
