/* 🦞 龙虾合约 - Cyber Lobster Trading Terminal */
:root{--bg-deep:#0a0e17;--bg-primary:#111827;--bg-card:#1a1f2e;--bg-hover:#232a3b;--bg-input:#0d1220;--border-color:#2a3040;--text-primary:#e8eaf0;--text-secondary:#7a8599;--text-tertiary:#4a5568;--neon-cyan:#00f0ff;--neon-pink:#ff00aa;--neon-green:#00ff88;--neon-red:#ff3366;--lobster:#FF6B35;--lobster-dim:rgba(255,107,53,.15);--cyan-dim:rgba(0,240,255,.1);--pink-dim:rgba(255,0,170,.1);--green-dim:rgba(0,255,136,.1);--red-dim:rgba(255,51,102,.1);--nav-width:220px;--nav-collapsed:60px;--topbar-height:48px;--radius:8px;--radius-sm:4px;--transition:.2s ease;--font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:14px;-webkit-font-smoothing:antialiased}body{font-family:var(--font-family);background:var(--bg-deep);color:var(--text-primary);line-height:1.5;overflow-x:hidden;min-height:100vh;position:relative}
body::before{content:'';position:fixed;inset:0;background:linear-gradient(rgba(0,240,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,.008) 2px,rgba(0,240,255,.008) 4px);pointer-events:none;z-index:0}
a{color:var(--neon-cyan);text-decoration:none}a:hover{color:#5df2ff}input,select,textarea,button{font-family:inherit;font-size:inherit}
.tn{font-variant-numeric:tabular-nums}.green{color:var(--neon-green)}.red{color:var(--neon-red)}.cyan{color:var(--neon-cyan)}.pink{color:var(--neon-pink)}.lobster{color:var(--lobster)}.muted{color:var(--text-secondary)}.text-center{text-align:center}.text-right{text-align:right}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}.flex-1{flex:1}.hidden{display:none!important}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--neon-cyan)}
.app-layout{display:flex;min-height:100vh;position:relative;z-index:1}
.sidebar{width:var(--nav-width);background:var(--bg-primary);border-right:1px solid var(--border-color);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:width var(--transition);overflow:hidden}.sidebar.collapsed{width:var(--nav-collapsed)}
.sidebar-brand{height:var(--topbar-height);display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--border-color);gap:10px;flex-shrink:0}
.sidebar-brand .brand-icon{width:32px;height:32px;font-size:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(255,107,53,.5))}
.sidebar-brand .brand-text{font-weight:700;font-size:15px;white-space:nowrap;background:linear-gradient(135deg,var(--lobster),var(--neon-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar.collapsed .brand-text{display:none}
.sidebar-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;padding:10px 12px;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);gap:12px;white-space:nowrap;text-decoration:none;border:1px solid transparent}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--border-color)}
.nav-item.active{background:var(--cyan-dim);color:var(--neon-cyan);border-color:rgba(0,240,255,.2);box-shadow:0 0 12px rgba(0,240,255,.08),inset 0 0 12px rgba(0,240,255,.04)}
.nav-item .nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}.nav-item .nav-label{font-size:13px;font-weight:500}
.sidebar.collapsed .nav-label{display:none}.sidebar.collapsed .nav-item{justify-content:center;padding:10px}
.sidebar-footer{padding:12px 8px;border-top:1px solid var(--border-color);flex-shrink:0}
.sidebar-toggle{display:flex;align-items:center;justify-content:center;padding:8px;cursor:pointer;color:var(--text-secondary);border-radius:var(--radius-sm);transition:all var(--transition)}.sidebar-toggle:hover{background:var(--bg-hover);color:var(--neon-cyan)}
.main-wrapper{margin-left:var(--nav-width);flex:1;min-height:100vh;display:flex;flex-direction:column;transition:margin-left var(--transition)}.main-wrapper.nav-collapsed{margin-left:var(--nav-collapsed)}
.topbar{height:var(--topbar-height);background:rgba(17,24,39,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:50;flex-shrink:0}
.topbar-left{display:flex;align-items:center;gap:12px}.topbar-title{font-size:15px;font-weight:600;color:var(--text-primary);text-shadow:0 0 8px rgba(0,240,255,.2)}
.topbar-right{display:flex;align-items:center;gap:16px}.topbar-user{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:13px}
.topbar-user .user-avatar{width:28px;height:28px;border-radius:50%;background:var(--cyan-dim);color:var(--neon-cyan);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;border:1px solid rgba(0,240,255,.3)}
.main-content{flex:1;padding:20px;overflow-y:auto}
.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:20px;position:relative}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.card-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:16px 20px;position:relative;overflow:hidden}
.stat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));opacity:.6}
.stat-card .stat-label{font-size:12px;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.stat-card .stat-value{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-primary);text-shadow:0 0 12px rgba(0,240,255,.3)}
.stat-card .stat-value.accent{color:var(--lobster);text-shadow:0 0 12px rgba(255,107,53,.4)}.stat-card .stat-value.green{color:var(--neon-green);text-shadow:0 0 12px rgba(0,255,136,.4)}.stat-card .stat-value.red{color:var(--neon-red);text-shadow:0 0 12px rgba(255,51,102,.4)}.stat-card .stat-value.cyan{color:var(--neon-cyan);text-shadow:0 0 12px rgba(0,240,255,.4)}
.stat-card .stat-sub{font-size:12px;color:var(--text-secondary);margin-top:4px}
.table-wrapper{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;padding:10px 12px;color:var(--text-secondary);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-color);white-space:nowrap}
tbody td{padding:10px 12px;border-bottom:1px solid rgba(42,48,64,.5);white-space:nowrap}tbody tr:hover{background:var(--bg-hover)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition);white-space:nowrap;line-height:1.4}.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,var(--lobster),#e85d2a);color:#fff;box-shadow:0 0 16px rgba(255,107,53,.3)}.btn-primary:hover:not(:disabled){box-shadow:0 0 24px rgba(255,107,53,.5);transform:translateY(-1px)}
.btn-cyan{background:linear-gradient(135deg,var(--neon-cyan),#00c4d6);color:#0a0e17;box-shadow:0 0 16px rgba(0,240,255,.25)}.btn-cyan:hover:not(:disabled){box-shadow:0 0 24px rgba(0,240,255,.45);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-hover);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){border-color:var(--neon-cyan);color:var(--neon-cyan)}
.btn-danger{background:linear-gradient(135deg,var(--neon-red),#cc2952);color:#fff;box-shadow:0 0 16px rgba(255,51,102,.25)}.btn-danger:hover:not(:disabled){box-shadow:0 0 24px rgba(255,51,102,.45)}
.btn-green{background:linear-gradient(135deg,var(--neon-green),#00cc6e);color:#0a0e17;box-shadow:0 0 16px rgba(0,255,136,.25)}.btn-green:hover:not(:disabled){box-shadow:0 0 24px rgba(0,255,136,.45)}
.btn-outline{background:transparent;border:1px solid var(--border-color);color:var(--text-primary)}.btn-outline:hover:not(:disabled){border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 12px rgba(0,240,255,.15)}
.btn-sm{padding:5px 10px;font-size:12px}.btn-lg{padding:12px 24px;font-size:15px}.btn-block{width:100%}
.form-group{margin-bottom:16px}.form-label{display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.form-input{width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:16px;transition:all var(--transition);outline:none;-webkit-appearance:none;appearance:none;-webkit-user-select:text;user-select:text;box-sizing:border-box}
.form-input:focus{border-color:var(--neon-cyan);box-shadow:0 0 12px rgba(0,240,255,.15),inset 0 0 8px rgba(0,240,255,.05)}.form-input::placeholder{color:var(--text-tertiary)}.form-input.error{border-color:var(--neon-red);box-shadow:0 0 12px rgba(255,51,102,.15)}
.form-error{font-size:12px;color:var(--neon-red);margin-top:4px}
.form-select{width:100%;padding:10px 12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px;outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300f0ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.form-select:focus{border-color:var(--neon-cyan);box-shadow:0 0 12px rgba(0,240,255,.15)}
.toggle-switch{position:relative;width:48px;height:26px;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--bg-hover);border-radius:13px;transition:all var(--transition);border:1px solid var(--border-color)}
.toggle-slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:var(--text-secondary);border-radius:50%;transition:all var(--transition)}
.toggle-switch input:checked+.toggle-slider{background:rgba(0,255,136,.2);border-color:var(--neon-green);box-shadow:0 0 12px rgba(0,255,136,.3)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(22px);background:var(--neon-green);box-shadow:0 0 8px rgba(0,255,136,.5)}
.toggle-lg{width:56px;height:30px}.toggle-lg .toggle-slider::before{width:24px;height:24px}.toggle-lg input:checked+.toggle-slider::before{transform:translateX(26px)}
.tabs{display:flex;border-bottom:1px solid var(--border-color);gap:0}.tab-item{padding:10px 20px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition);white-space:nowrap}
.tab-item:hover{color:var(--text-primary)}.tab-item.active{color:var(--neon-cyan);border-bottom-color:var(--neon-cyan);text-shadow:0 0 8px rgba(0,240,255,.3)}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap}.filter-pill{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;background:var(--bg-card);color:var(--text-secondary);cursor:pointer;border:1px solid var(--border-color);transition:all var(--transition)}
.filter-pill:hover{color:var(--neon-cyan);border-color:rgba(0,240,255,.3)}.filter-pill.active{background:var(--cyan-dim);color:var(--neon-cyan);border-color:var(--neon-cyan);box-shadow:0 0 12px rgba(0,240,255,.2)}
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.3px}
.badge-long{background:var(--green-dim);color:var(--neon-green);box-shadow:0 0 8px rgba(0,255,136,.15)}.badge-short{background:var(--red-dim);color:var(--neon-red);box-shadow:0 0 8px rgba(255,51,102,.15)}.badge-strategy{background:var(--cyan-dim);color:var(--neon-cyan)}.badge-admin{background:var(--lobster-dim);color:var(--lobster)}.badge-user{background:var(--bg-hover);color:var(--text-secondary)}
.position-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.position-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:16px;transition:all var(--transition);position:relative;overflow:hidden}
.position-card:hover{border-color:rgba(0,240,255,.3);box-shadow:0 0 20px rgba(0,240,255,.08)}
.position-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}.position-card.long::before{background:var(--neon-green);box-shadow:0 0 8px rgba(0,255,136,.5)}.position-card.short::before{background:var(--neon-red);box-shadow:0 0 8px rgba(255,51,102,.5)}
.position-card .pc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.position-card .pc-symbol{font-size:16px;font-weight:700;color:var(--text-primary)}
.position-card .pc-body{display:grid;grid-template-columns:1fr 1fr;gap:8px}.position-card .pc-field{display:flex;flex-direction:column}.position-card .pc-field-label{font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.3px}.position-card .pc-field-value{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.position-card .pc-pnl{text-align:right}.position-card .pc-pnl .pc-field-value{font-size:16px;font-weight:700}
@keyframes pnl-flash-green{0%,100%{color:var(--neon-green);text-shadow:0 0 8px rgba(0,255,136,.4)}50%{color:#5fffb8;text-shadow:0 0 20px rgba(0,255,136,.8)}}
@keyframes pnl-flash-red{0%,100%{color:var(--neon-red);text-shadow:0 0 8px rgba(255,51,102,.4)}50%{color:#ff8a9a;text-shadow:0 0 20px rgba(255,51,102,.8)}}
.pnl-flash.green{animation:pnl-flash-green 1s ease}.pnl-flash.red{animation:pnl-flash-red 1s ease}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:all .2s ease;backdrop-filter:blur(4px)}.modal-overlay.visible{opacity:1;visibility:visible}
.modal-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:24px;max-width:520px;width:90%;max-height:80vh;overflow-y:auto;transform:scale(.95);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,240,255,.1),0 0 80px rgba(255,0,170,.05)}.modal-overlay.visible .modal-box{transform:scale(1)}
.modal-title{font-size:16px;font-weight:600;margin-bottom:12px}.modal-body{color:var(--text-secondary);font-size:14px;margin-bottom:20px;line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:8px}
.toast-container{position:fixed;top:16px;right:16px;z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:12px 16px;font-size:13px;color:var(--text-primary);box-shadow:0 4px 24px rgba(0,0,0,.4);pointer-events:auto;display:flex;align-items:center;gap:8px;animation:toast-in .3s ease;max-width:360px}
.toast.success{border-left:3px solid var(--neon-green);box-shadow:0 0 16px rgba(0,255,136,.15)}.toast.error{border-left:3px solid var(--neon-red);box-shadow:0 0 16px rgba(255,51,102,.15)}.toast.warning{border-left:3px solid var(--lobster);box-shadow:0 0 16px rgba(255,107,53,.15)}.toast.info{border-left:3px solid var(--neon-cyan);box-shadow:0 0 16px rgba(0,240,255,.15)}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}.toast.removing{animation:toast-out .3s ease forwards}
.login-page{display:flex;min-height:100vh;position:relative;z-index:1}
.login-brand{flex:1;background:var(--bg-deep);display:flex;flex-direction:column;justify-content:center;padding:60px;position:relative;overflow:hidden}
.login-brand::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,240,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.04) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.login-brand::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(0,240,255,.08) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(255,0,170,.06) 0%,transparent 50%),radial-gradient(circle at 50% 80%,rgba(255,107,53,.06) 0%,transparent 40%);pointer-events:none}
.login-brand-content{position:relative;z-index:1}
.login-brand .brand-logo{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.login-brand .brand-logo-icon{font-size:56px;filter:drop-shadow(0 0 20px rgba(255,107,53,.6));animation:lobster-float 3s ease-in-out infinite}
@keyframes lobster-float{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-8px) rotate(-3deg)}75%{transform:translateY(4px) rotate(2deg)}}
.login-brand .brand-logo-text{font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--lobster),var(--neon-cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.login-brand .brand-tagline{font-size:36px;font-weight:800;line-height:1.3;margin-bottom:16px;color:var(--text-primary)}
.login-brand .brand-tagline .neon-text{color:var(--neon-cyan);text-shadow:0 0 10px rgba(0,240,255,.5),0 0 20px rgba(0,240,255,.3)}
.login-brand .brand-tagline .lobster-text{color:var(--lobster);text-shadow:0 0 10px rgba(255,107,53,.5),0 0 20px rgba(255,107,53,.3)}
.login-brand .brand-desc{font-size:15px;color:var(--text-secondary);line-height:1.6;margin-bottom:40px;max-width:440px}
.login-brand .brand-features{list-style:none;display:flex;flex-direction:column;gap:16px}.login-brand .brand-features li{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text-secondary)}
.login-brand .brand-features li .feature-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.login-brand .brand-features li:nth-child(1) .feature-icon{background:var(--cyan-dim);border:1px solid rgba(0,240,255,.2)}.login-brand .brand-features li:nth-child(2) .feature-icon{background:var(--green-dim);border:1px solid rgba(0,255,136,.2)}.login-brand .brand-features li:nth-child(3) .feature-icon{background:var(--pink-dim);border:1px solid rgba(255,0,170,.2)}.login-brand .brand-features li:nth-child(4) .feature-icon{background:var(--lobster-dim);border:1px solid rgba(255,107,53,.2)}
.login-form-area{width:440px;flex-shrink:0;background:var(--bg-primary);display:flex;flex-direction:column;justify-content:center;padding:60px 40px;border-left:1px solid var(--border-color)}.login-form-area .form-title{font-size:22px;font-weight:700;margin-bottom:8px}.login-form-area .form-subtitle{font-size:14px;color:var(--text-secondary);margin-bottom:28px}
.copy-toggle-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);padding:20px 24px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;position:relative;overflow:hidden}
.copy-toggle-section::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-green));opacity:.5}
.copy-toggle-info h3{font-size:16px;font-weight:600;margin-bottom:4px}.copy-toggle-info p{font-size:13px;color:var(--text-secondary)}
.copy-toggle-status{display:flex;align-items:center;gap:12px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-tertiary)}
.status-dot.active{background:var(--neon-green);box-shadow:0 0 8px rgba(0,255,136,.6);animation:pulse-green 2s infinite}.status-dot.inactive{background:var(--neon-red);box-shadow:0 0 6px rgba(255,51,102,.4)}
@keyframes pulse-green{0%,100%{box-shadow:0 0 8px rgba(0,255,136,.6)}50%{box-shadow:0 0 16px rgba(0,255,136,.9)}}
.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.mode-card{background:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius);padding:16px;cursor:pointer;transition:all var(--transition);text-align:center}.mode-card:hover{border-color:var(--bg-hover)}.mode-card.selected{border-color:var(--neon-cyan);background:var(--cyan-dim);box-shadow:0 0 16px rgba(0,240,255,.15)}
.mode-card .mode-icon{font-size:24px;margin-bottom:8px}.mode-card .mode-name{font-size:14px;font-weight:600;margin-bottom:4px}.mode-card .mode-desc{font-size:12px;color:var(--text-secondary)}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.api-key-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);margin-bottom:8px}.api-key-info{display:flex;flex-direction:column;gap:2px}.api-key-value{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-primary)}.api-key-label{font-size:12px;color:var(--text-secondary)}.api-key-date{font-size:11px;color:var(--text-tertiary)}
.user-detail-section{margin-bottom:20px}.user-detail-section h4{font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border-color)}
.empty-state{text-align:center;padding:40px 20px;color:var(--text-tertiary)}.empty-state .empty-icon{font-size:40px;margin-bottom:12px}.empty-state .empty-text{font-size:14px}
.spinner{width:20px;height:20px;border:2px solid var(--border-color);border-top-color:var(--neon-cyan);border-radius:50%;animation:spin .6s linear infinite}.spinner-lg{width:32px;height:32px;border-width:3px}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay{display:flex;align-items:center;justify-content:center;padding:40px}
.section{margin-bottom:24px}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-title{font-size:16px;font-weight:600}
.table-container{overflow-x:auto;border:1px solid var(--border-color);border-radius:var(--radius)}.table-container table{margin:0}
.partial-close-form{display:flex;align-items:center;gap:8px;margin-top:8px}.partial-close-form input{width:100px;padding:6px 8px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;outline:none}.partial-close-form input:focus{border-color:var(--neon-cyan)}
.mobile-menu-btn{display:none!important;align-items:center;justify-content:center;width:32px;height:32px;cursor:pointer;color:var(--text-secondary);border-radius:var(--radius-sm)}.mobile-menu-btn:hover{background:var(--bg-hover);color:var(--neon-cyan)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99}.sidebar-overlay.visible{display:block}
.admin-stat-card{position:relative;overflow:hidden}.admin-stat-card::after{content:'';position:absolute;right:-10px;bottom:-10px;width:60px;height:60px;border-radius:50%;opacity:.06}
.admin-stat-card:nth-child(1)::after{background:var(--lobster)}.admin-stat-card:nth-child(2)::after{background:var(--neon-green)}.admin-stat-card:nth-child(3)::after{background:var(--neon-red)}.admin-stat-card:nth-child(4)::after{background:var(--neon-cyan)}.admin-stat-card:nth-child(5)::after{background:var(--neon-pink)}
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}.skeleton{background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-hover) 50%,var(--bg-card) 75%);background-size:200px 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}.skeleton-text{height:14px;margin-bottom:8px}.skeleton-text.short{width:60%}
@keyframes data-flow{0%{background-position:0 0}100%{background-position:200px 0}}.data-flow-line{height:2px;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);background-size:200px 100%;animation:data-flow 2s linear infinite;opacity:.3;margin:4px 0}
@media(max-width:768px){.sidebar{transform:translateX(-100%);width:var(--nav-width)}.sidebar.mobile-open{transform:translateX(0)}.main-wrapper{margin-left:0!important}.main-content{padding:12px}.login-page{flex-direction:column}.login-brand{padding:40px 24px;min-height:auto}.login-brand .brand-tagline{font-size:24px}.login-brand .brand-logo-icon{font-size:40px}.login-brand .brand-logo-text{font-size:22px}.login-form-area{width:100%;padding:32px 24px;border-left:none;border-top:1px solid var(--border-color)}.stat-grid{grid-template-columns:repeat(2,1fr)}.position-grid{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.mode-cards{grid-template-columns:1fr 1fr}.mobile-menu-btn{display:flex!important}table{font-size:12px}thead th,tbody td{padding:8px 6px}.topbar{padding:0 12px}.topbar-title{font-size:13px}.copy-toggle-section{flex-direction:column;gap:12px;align-items:flex-start}.copy-toggle-status{width:100%;justify-content:space-between}.form-row{grid-template-columns:1fr}.btn-lg{padding:10px 20px;font-size:14px}.section-title{font-size:14px}.position-card .pc-body{grid-template-columns:1fr 1fr;gap:6px}.position-card .pc-pnl .pc-field-value{font-size:14px}}
@media(max-width:480px){.stat-grid{grid-template-columns:1fr}.mode-cards{grid-template-columns:1fr}.login-brand{padding:32px 16px}.login-brand .brand-tagline{font-size:20px}.login-form-area{padding:24px 16px}.position-card .pc-body{grid-template-columns:1fr}.position-card .pc-symbol{font-size:14px}.stat-card .stat-value{font-size:20px}.filter-pills{gap:4px}.filter-pill{padding:4px 10px;font-size:11px}.copy-toggle-info h3{font-size:14px}.copy-toggle-info p{font-size:12px}}

/* V8特有样式 */
.position-group-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.position-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.btc-hero {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.btc-hero-badge {
  font-size: 28px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: var(--radius);
}

.btc-hero-badge.bull {
  background: var(--green-dim);
  color: var(--neon-green);
  border: 1px solid rgba(0,255,136,.3);
}

.btc-hero-badge.bear {
  background: var(--red-dim);
  color: var(--neon-red);
  border: 1px solid rgba(255,51,102,.3);
}

.btc-hero-badge.range {
  background: var(--cyan-dim);
  color: var(--neon-cyan);
  border: 1px solid rgba(0,240,255,.3);
}

.btc-state-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.btc-state-badge.bull {
  background: var(--green-dim);
  color: var(--neon-green);
}

.btc-state-badge.bear {
  background: var(--red-dim);
  color: var(--neon-red);
}

.btc-state-badge.range {
  background: var(--cyan-dim);
  color: var(--neon-cyan);
}

.cyber-loader {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 20px;
}

.cyber-loader .bar {
  width: 4px;
  height: 20px;
  background: var(--neon-cyan);
  border-radius: 2px;
  animation: loader-bar 1s ease-in-out infinite;
}

.cyber-loader .bar:nth-child(2) { animation-delay: 0.1s; }
.cyber-loader .bar:nth-child(3) { animation-delay: 0.2s; }
.cyber-loader .bar:nth-child(4) { animation-delay: 0.3s; }
.cyber-loader .bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes loader-bar {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50% { transform: scaleY(1.5); opacity: 1; }
}

.margin-bar {
  height: 3px;
  background: var(--bg-hover);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.margin-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.margin-bar-fill.safe { background: var(--neon-green); }
.margin-bar-fill.warn { background: var(--lobster); }
.margin-bar-fill.danger { background: var(--neon-red); }

.signal-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(42,48,64,.3);
  font-size: 12px;
}

.signal-time { color: var(--text-tertiary); }
.signal-symbol { font-weight: 600; }
.signal-action.open { color: var(--neon-green); }
.signal-action.filter { color: var(--text-tertiary); }
.signal-reason { color: var(--text-secondary); font-size: 11px; }

.so-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.so-card .so-name { font-weight: 600; font-size: 13px; }
.so-card .so-pnl { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.so-card .so-status { font-size: 11px; margin-left: auto; }

.engine-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.running {
  background: var(--neon-green);
  box-shadow: 0 0 8px rgba(0,255,136,.5);
  animation: pulse 2s infinite;
}

.status-dot.stopped {
  background: var(--neon-red);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.scanline {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  opacity: 0.1;
  animation: scanline-move 4s linear infinite;
  pointer-events: none;
  z-index: 9999;
}

@keyframes scanline-move {
  0% { top: 0; }
  100% { top: 100vh; }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--text-secondary);
}

.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-text { font-size: 14px; }