*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,Roboto,sans-serif;background-color:#f8f9fa;color:#333}.trading-system-app{height:100vh;width:100%;overflow:hidden;background-color:#fff}.layout,.sidebar{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}.sidebar{width:300px;background-color:#fff;border-right:1px solid #eaeaea;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}.sidebar-header{padding:12px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-bottom:1px solid #eaeaea}.sidebar-header h2{font-size:18px;font-weight:600;color:#333}.connection-status{font-size:12px;padding:4px 10px;border-radius:12px;background-color:#f8d7da;color:#721c24}.connection-status.connected{background-color:#d4edda;color:#155724}.trade-list{overflow-y:auto;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:10px}.trade-card{background-color:#fff;border-radius:10px;padding:15px;margin-bottom:10px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.05);box-shadow:0 2px 4px rgba(0,0,0,.05);cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;border:1px solid #eaeaea}.trade-card.active,.trade-card:hover{-webkit-box-shadow:0 4px 8px rgba(0,0,0,.1);box-shadow:0 4px 8px rgba(0,0,0,.1);border-color:#d0d0d0;-webkit-transform:translateY(-2px);transform:translateY(-2px)}.trade-card.active{background-color:#f0f7ff;border-left:3px solid #2d7ff9}.trade-card-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:5px}.trade-card-header h3{font-size:16px;font-weight:600}.price-change{font-size:var(--font-secondary);padding:2px 6px;border-radius:4px}.price-change.positive{color:#6366f1}.price-change.negative{background-color:rgba(244,67,54,.1);color:#f44336}.trade-card-price{font-size:18px;font-weight:700;margin-bottom:5px}.trade-card-time,.trade-card-volume{font-size:var(--font-small);color:#777}.main-content{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;position:relative;background-color:#fcfcfc}.no-trade-selected{color:#aaa}.no-trade-selected h3{margin-top:20px;font-weight:500}.trade-details-container{height:100%;overflow-y:auto;padding:15px;position:relative}.swipe-indicator{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:20px;color:#999;font-size:12px}.arrows,.swipe-indicator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.arrows{margin-left:10px}.swipe-arrow{cursor:pointer;margin:0 8px;width:36px;height:36px;border-radius:50%;background-color:#f5f5f5;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:all .3s ease;transition:all .3s ease}.swipe-arrow:hover{background-color:#e0e0e0;-webkit-transform:scale(1.1);transform:scale(1.1)}.swipe-arrow i{color:#666;font-size:20px}.swipe-arrow:hover i{color:#333}.trade-details{background-color:#fff;border-radius:15px;-webkit-box-shadow:0 4px 20px rgba(0,0,0,.05);box-shadow:0 4px 20px rgba(0,0,0,.05);overflow:hidden}.trade-details-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:10px;border-bottom:1px solid #eaeaea}.trade-details-header h2{font-size:18px;font-weight:600}.control-btn,.trade-controls{display:-webkit-box;display:-ms-flexbox;display:flex}.control-btn{background:none;border:none;width:32px;height:32px;border-radius:50%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-left:5px;cursor:pointer;color:#777;-webkit-transition:all .2s ease;transition:all .2s ease}.control-btn:hover{background-color:#f5f5f5;color:#333}.control-btn.active{color:#ff9800}.control-btn.refresh:hover{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.k-line-chart{border-bottom:1px solid #eaeaea}.chart-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:15px}.chart-header h3{font-size:16px;font-weight:500}.time-selector{display:-webkit-box;display:-ms-flexbox;display:flex}.time-selector button{background:none;border:none;padding:4px 10px;margin:0 2px;border-radius:4px;cursor:pointer;font-size:var(--font-small);color:#777}.time-selector button.active,.time-selector button:hover{background-color:#eef2f7;color:#2d7ff9}.chart-placeholder{height:200px;background-color:#fbfbfb;border-radius:10px;position:relative;overflow:hidden}.mock-chart{position:relative;height:100%;width:100%}.price-line{position:absolute;width:1px;background:-webkit-gradient(linear,left top,right top,from(#2d7ff9),to(transparent));background:linear-gradient(90deg,#2d7ff9,transparent);bottom:20px}.volume-bar{position:absolute;width:10px;background-color:rgba(45,127,249,.2);border-radius:2px 2px 0 0;bottom:0}.trade-action-module{padding:10px;border-bottom:1px solid #eaeaea}.tabs{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:15px}.tabs button{-webkit-box-flex:1;-ms-flex:1;flex:1;background:none;border:none;padding:10px;border-radius:5px;font-size:14px;font-weight:500;cursor:pointer;color:#777}.tabs button.active{background-color:#f5f5f5;color:#333}.tabs button:first-child.active{background-color:rgba(0,200,83,.1);color:#00c853}.tabs button:last-child.active{background-color:rgba(244,67,54,.1);color:#f44336}.trade-form{gap:15px}.form-group,.trade-form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.form-group label,.slider-group label{font-size:12px;margin-bottom:5px;color:#777}.input-with-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#f5f5f5;border-radius:5px;overflow:hidden}.input-with-label input{-webkit-box-flex:1;-ms-flex:1;flex:1;border:none;background:none;padding:10px;font-size:14px;outline:none}.input-with-label span{padding:0 10px;color:#777;font-size:12px}.slider-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.slider-group input[type=range]{width:100%;height:5px;-webkit-appearance:none;background:#eaeaea;outline:none;border-radius:5px;margin:10px 0}.slider-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#2d7ff9;cursor:pointer}.slider-labels{font-size:10px;color:#999}.slider-labels,.total-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.total-group{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#f9f9f9;padding:10px;border-radius:5px}.total-value{font-weight:600;font-size:16px}.action-button{padding:8px;border-radius:5px;border:none;color:#fff;font-weight:500;cursor:pointer;-webkit-transition:all .3s ease;transition:all .3s ease;min-width:80px}.action-button:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 4px 8px rgba(0,0,0,.2);box-shadow:0 4px 8px rgba(0,0,0,.2)}.action-button:active{-webkit-transform:translateY(0);transform:translateY(0);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:0 2px 4px rgba(0,0,0,.1)}.sell-button{background:linear-gradient(135deg,#ff4b2b,#ff416c)}.sell-button:hover{background:linear-gradient(135deg,#ff416c,#ff4b2b)}.recent-trades{padding:20px}.recent-trades h3{font-size:16px;font-weight:500;margin-bottom:15px}.trades-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10px}.trades-list,.transaction-item{display:-webkit-box;display:-ms-flexbox;display:flex}.transaction-item{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px;background-color:#f9f9f9;border-radius:5px}.transaction-details,.transaction-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:5px}.transaction-type{font-weight:500;text-transform:uppercase;font-size:12px;padding:2px 6px;border-radius:4px;display:inline-block}.transaction-type.buy{background-color:rgba(0,200,83,.1);color:#00c853}.transaction-type.sell{background-color:rgba(244,67,54,.1);color:#f44336}.transaction-time{font-size:13px;color:#999}.transaction-amount{font-weight:400;font-size:14px}.transaction-price{font-size:14px;color:#777}@media (max-width:768px){.layout{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.sidebar{width:100%;height:auto;max-height:40%;border-right:none;border-bottom:1px solid #eaeaea}.main-content{height:60%}.trade-card,.trade-details-container{padding:10px}.trade-details-header h2{font-size:20px}.chart-placeholder{height:150px}.embedded-webpage{margin-top:20px;border:1px solid #eaeaea;border-radius:10px;overflow:hidden}.embedded-webpage iframe{width:100%;height:100%;border:none}}.action-size{width:150px;height:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:15px}.balance-container{border-radius:15px;-webkit-transition:all .3s ease;transition:all .3s ease}.balance-container:hover{-webkit-transform:translateY(-2px);transform:translateY(-2px)}.balance-display{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:5px;margin:5px}.balance-display,.balance-header{display:-webkit-box;display:-ms-flexbox;display:flex}.balance-header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;margin-bottom:5px}.balance-label{font-size:14px;color:#666;font-weight:500}.balance-icon{color:#4caf50;font-size:18px}.balance-value{color:#4caf50;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.balance-amount{font-size:22px;font-weight:700;color:#333}.balance-unit{font-size:16px;color:#666;margin-left:4px}.action-button{padding:0}.action-button,.integrated-input-button{-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1);box-shadow:0 2px 4px rgba(0,0,0,.1)}.integrated-input-button{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:12px;overflow:hidden;border:1px solid #eaeaea}.buy-input-integrated{width:90px;padding:8px 10px;border:none;font-size:14px;outline:none}.buy-button-integrated{padding:8px 15px;border:none;background:linear-gradient(135deg,#00c853,#009688);color:#fff;font-weight:500;cursor:pointer;-webkit-transition:all .3s ease;transition:all .3s ease}.buy-button-integrated:hover{background:linear-gradient(135deg,#009688,#00c853)}.refresh-button,.refresh-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.refresh-button{background:linear-gradient(135deg,#3b82f6,#2563eb);padding:8px 10px;border-radius:12px;border:none;color:#fff;gap:6px;cursor:pointer;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-box-shadow:0 4px 6px -1px rgba(37,99,235,.1);box-shadow:0 4px 6px -1px rgba(37,99,235,.1)}.refresh-button:active{-webkit-transform:translateY(0);transform:translateY(0)}.refresh-button:hover .refresh-icon{-webkit-animation:spin 1s ease;animation:spin 1s ease}.refresh-text{font-weight:500;font-size:.9rem}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.no-trade-selected{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:100%;background:linear-gradient(135deg,#f5f7fa,#e4e9f2);border-radius:15px;padding:40px}.pulse-animation{-webkit-animation:pulse 2s infinite;animation:pulse 2s infinite;margin-bottom:20px}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(1.1);transform:scale(1.1);opacity:.8}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}50%{-webkit-transform:scale(1.1);transform:scale(1.1);opacity:.8}to{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.prompt-text{font-size:24px;font-weight:600;color:#2c3e50;margin:20px 0 10px;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.sub-text{font-size:16px;color:#7f8c8d;margin-top:10px}.empty-trade-list{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#f5f7fa,#e4e9f2)}.empty-icon-wrapper{background:rgba(139,92,246,.1);border-radius:50%;padding:20px;margin-bottom:16px;-webkit-animation:float 3s ease-in-out infinite;animation:float 3s ease-in-out infinite}@-webkit-keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes float{0%{-webkit-transform:translateY(0);transform:translateY(0)}50%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.empty-title{font-size:18px;font-weight:600;color:#4b5563;margin-bottom:8px}.empty-desc{font-size:14px;color:#6b7280;text-align:center}.action-button:disabled,.buy-button-integrated:disabled{opacity:.6;cursor:not-allowed}.action-button:disabled:not([disabled=""]),.buy-button-integrated:disabled:not([disabled=""]){background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:1rem 1rem;-webkit-animation:progress-bar-stripes 1s linear infinite;animation:progress-bar-stripes 1s linear infinite}@-webkit-keyframes progress-bar-stripes{0%{background-position:1rem 0}to{background-position:0 0}}@keyframes progress-bar-stripes{0%{background-position:1rem 0}to{background-position:0 0}}