* { box-sizing:border-box; margin:0; padding:0; }

/* ========== 科技风主题变量 ========== */
:root {
    --bg-void: #030508;
    --bg-deep: #060a12;
    --bg-panel: rgba(6,12,24,0.78);
    --cyan: #00f0ff;
    --cyan-dim: rgba(0,240,255,0.12);
    --violet: #a855f7;
    --violet-dim: rgba(168,85,247,0.14);
    --border-cyan: rgba(0,240,255,0.22);
    --border-soft: rgba(255,255,255,0.06);
    --text: #e8eef8;
    --muted: #7b8fa3;
    --font-display:'Orbitron',ui-sans-serif,system-ui,sans-serif;
    --font-ui:'Rajdhani','Segoe UI',sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,'Consolas',monospace;
}
::selection { background:rgba(0,240,255,0.28); color:#fff; }

body {
    font-family:var(--font-ui);
    background:var(--bg-void);
    color:var(--text);
    font-size:15px;
    line-height:1.55;
    font-weight:500;
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

/* ====== 背景层 ====== */
body::before {
    content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
    background-color:var(--bg-deep);
    background-image:linear-gradient(rgba(0,240,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,0.04) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 90% 65% at 50% -10%,#000 25%,transparent 70%);
}
.glow-cyan, .glow-violet {
    position:fixed; border-radius:50%; filter:blur(100px); pointer-events:none; z-index:0;
    animation:float 18s ease-in-out infinite;
}
.glow-cyan {
    width:min(72vw,520px); height:min(72vw,520px);
    top:-8%; right:-8%;
    background:radial-gradient(circle,var(--cyan) 0%,transparent 68%);
    opacity:0.45;
}
.glow-violet {
    width:min(60vw,420px); height:min(60vw,420px);
    bottom:5%; left:-8%;
    background:radial-gradient(circle,var(--violet) 0%,transparent 70%);
    opacity:0.35; animation-delay:-7s;
}
@keyframes float { 0%,100%{transform:translate(0,0)scale(1)} 50%{transform:translate(-12px,16px)scale(1.05)} }

.scan-line {
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(transparent 0%,rgba(0,240,255,0.02) 48%,rgba(0,240,255,0.04) 50%,rgba(0,240,255,0.02) 52%,transparent 100%);
    background-size:100% 220%; animation:scan 10s linear infinite; opacity:0.35;
}
@keyframes scan { 0%{background-position:0 -100%} 100%{background-position:0 100%} }

#app { position:relative; z-index:1; max-width:92%; margin:0 auto; padding:24px 20px 40px; }

/* ====== Header ====== */
header {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 16px 24px; margin-bottom:28px;
    border:1px solid var(--border-cyan); border-radius:16px;
    background:linear-gradient(165deg,rgba(8,16,32,0.92) 0%,rgba(4,8,18,0.88) 100%);
    box-shadow:0 0 0 1px rgba(0,240,255,0.06) inset,0 20px 48px rgba(0,0,0,0.45),0 0 80px rgba(0,240,255,0.06);
    /*clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);*/
    gap:12px; flex-wrap:wrap; position:relative;
}
.logo { font-family:var(--font-display); font-size:clamp(1.05rem,3.2vw,1.65rem); font-weight:700; letter-spacing:0.06em; line-height:1.35; display:flex; align-items:center; gap:8px; }
.logo-text {
    background:linear-gradient(105deg,#fff 0%,var(--cyan) 45%,var(--violet) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 28px rgba(0,240,255,0.25));
}
.header-center {
    position:absolute; left:50%; transform:translateX(-50%);
    font-family:var(--font-display); font-size:24px; font-weight:700;
    color:#ef4444; display:none; text-align:center; white-space:nowrap; letter-spacing:2px;
    text-shadow:0 0 20px rgba(239,68,68,0.3);
}
.header-center.show { display:block; animation:breathing 1.5s ease-in-out infinite; }
@keyframes breathing { 0%,100%{opacity:0.25;text-shadow:0 0 10px rgba(239,68,68,0.15)} 50%{opacity:1;text-shadow:0 0 30px rgba(239,68,68,0.5)} }
.header-right { display:flex; align-items:center; gap:8px; }

/* ====== 语言切换 ====== */
.lang-toggle {
    font-family:var(--font-display); font-size:11px; font-weight:700;
    letter-spacing:0.08em; cursor:pointer; user-select:none;
    color:var(--muted); padding:4px 8px; border-radius:6px;
    border:1px solid rgba(255,255,255,0.08); transition:all .2s;
    background:rgba(255,255,255,0.03); white-space:nowrap;
}
.lang-toggle:hover { color:var(--cyan); border-color:var(--border-cyan); background:var(--cyan-dim); }

/* ====== 齿轮菜单 ====== */
.gear-menu { position:relative; }
.gear-icon {
    font-size:32px; color:#00ffd1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%; transition:all .2s; user-select:none;
}
.gear-icon:hover { color:#e2e8f0; background:rgba(255,255,255,0.06); transform:rotate(30deg); }
.gear-dropdown {
    display:none; position:absolute; right:0; top:100%; margin-top:8px;
    background:rgba(6,12,24,0.95); backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,0.08); border-radius:12px;
    min-width:140px; box-shadow:0 12px 48px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.03);
    z-index:100; overflow:hidden; padding:4px;
}
.gear-dropdown.open { display:block; animation:fadeSlideIn .15s ease-out; }
@keyframes fadeSlideIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.dropdown-item { padding:10px 16px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; transition:all .12s; border-radius:8px; }
.dropdown-item:hover { background:var(--cyan-dim); color:var(--cyan); }
.dropdown-item:last-child { color:#f87171; }
.dropdown-item:last-child:hover { background:rgba(248,113,113,0.1); color:#ef4444; }

/* ====== 状态栏 ====== */
.status-bar {
    display:flex; align-items:center; gap:8px;
    font-size:0.88rem; font-weight:600;
    letter-spacing:0.28em; color:var(--cyan); text-transform:uppercase;
    background:rgba(255,255,255,0.04); padding:4px 12px 4px 8px; border-radius:20px;
    border:1px solid rgba(255,255,255,0.05);
}
.indicator { width:7px; height:7px; border-radius:50%; display:inline-block; }
.indicator.on { background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,0.5); }
.indicator.off { background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,0.5); }

/* ====== Tabs ====== */
.tabs { display:flex; gap:6px; margin-bottom:16px; }
.tab {
    padding:8px 22px; background:rgba(255,255,255,0.03);
    border:1px solid var(--border-soft); color:var(--muted);
    cursor:pointer; border-radius:10px;
    font-family:var(--font-display); font-size:12px; font-weight:600;
    letter-spacing:0.08em; text-transform:uppercase;
    transition:all .2s;
}
.tab:hover { background:rgba(255,255,255,0.06); color:var(--text); border-color:rgba(255,255,255,0.1); }
.tab.active {
    background:linear-gradient(135deg,var(--cyan-dim),var(--violet-dim));
    color:var(--cyan); border-color:var(--border-cyan);
    box-shadow:0 0 20px rgba(0,240,255,0.05);
}

/* ====== Main ====== */
.main { display:flex; gap:16px; }
.tab-content { display:none; width:100%; }
.tab-content.active { display:flex; flex-direction:column; gap:16px; }
#tab-chart { display:flex; flex-direction:column; gap:16px; }
#tab-config.active { display:block; }

/* ====== Chart ====== */
.chart-area { display:flex; gap:16px; }
.chart-container {
    flex:1; min-height:78vh; height:78vh; border-radius:14px; overflow:hidden;
    background:rgba(4,8,18,0.92); border:1px solid var(--border-cyan);
    box-shadow:0 0 0 1px rgba(0,240,255,0.04) inset,0 16px 40px rgba(0,0,0,0.35);
}
#tv-chart { width:100%; height:78vh; }

/* ====== Sidebar ====== */
.sidebar { width:300px; flex-shrink:0; display:flex; flex-direction:column; gap:12px; }
.panel {
    background:linear-gradient(155deg,rgba(8,14,28,0.92) 0%,rgba(4,10,22,0.88) 100%);
    border:1px solid var(--border-cyan); border-radius:14px; padding:18px;
    box-shadow:0 0 0 1px rgba(0,240,255,0.04) inset,0 16px 40px rgba(0,0,0,0.35);
    backdrop-filter:blur(14px);
}
.panel h3 {
    font-size:0.88rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.18em; color:var(--cyan);
    margin-bottom:14px; opacity:0.9;
}
.stats-panel .stat-row { display:flex; justify-content:space-between; padding:7px 0; font-size:14px; border-bottom:1px solid rgba(255,255,255,0.06); }
.stats-panel .stat-row:last-child { border-bottom:none; }
.stats-panel .stat-row .label { color:var(--muted); font-weight:500; }
.stats-panel .stat-row .value { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; font-family:var(--font-mono); }
.stats-panel .stat-row .value.green { color:#2ed573; }
.stats-panel .stat-row .value.red { color:#ff4757; }
.stats-panel .stat-row .value.orange { color:#ffa502; }

/* ====== Signal list ====== */
.signal-list { max-height:420px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(0,240,255,0.2) transparent; }
.signal-list::-webkit-scrollbar { width:6px; }
.signal-list::-webkit-scrollbar-track { background:rgba(0,0,0,0.35); border-radius:4px; }
.signal-list::-webkit-scrollbar-thumb { background:linear-gradient(180deg,rgba(0,240,255,0.35),rgba(168,85,247,0.25)); border-radius:4px; border:1px solid rgba(0,240,255,0.2); }
.signal-empty { text-align:center; color:#475569; padding:32px 0; font-size:13px; font-weight:500; }
.signal-item {
    padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.04);
    font-size:13px; line-height:1.6; transition:background .15s;
    border-radius:8px; margin-bottom:2px; font-family:var(--font-mono);
}
.signal-item:hover { background:rgba(255,255,255,0.03); }
.signal-item:last-child { border-bottom:none; margin-bottom:0; }
.signal-item .sig-time { color:#475569; font-size:11px; }
.signal-item .sig-action { font-weight:700; }
.signal-item .sig-action.buy { color:#2ed573; }
.signal-item .sig-action.sell { color:#ff4757; }
.signal-item .sig-detail { color:var(--muted); }
.signal-item .sig-status { display:inline-block; padding:2px 8px; border-radius:6px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; font-family:var(--font-ui); }
.signal-item .sig-status.ok { background:rgba(46,213,115,0.12); color:#2ed573; }
.signal-item .sig-status.failed { background:rgba(255,71,87,0.12); color:#ff4757; }
.signal-item .sig-status.rejected { background:rgba(255,165,2,0.12); color:#ffa502; }
.signal-item .sig-status.unfilled { background:rgba(255,165,2,0.12); color:#ffa502; }
.signal-item .sig-source { display:inline-block; padding:1px 6px; border-radius:4px; font-size:9px; font-weight:600; letter-spacing:0.3px; margin-right:6px; font-family:var(--font-ui); }
.signal-item .sig-source.tv { background:rgba(0,240,255,0.1); color:var(--cyan); }
.signal-item .sig-source.manual { background:rgba(168,85,247,0.12); color:var(--violet); }
.signal-item .sig-source.exec { background:rgba(46,213,115,0.12); color:#2ed573; }
.signal-item .sig-source.cold_start { background:rgba(71,85,105,0.15); color:#64748b; }
.signal-item .sig-source.cold_confirmed { background:rgba(71,85,105,0.15); color:#64748b; }

/* ====== Config ====== */
.config-panel {
    max-width:98%; margin:0 auto;
    background:linear-gradient(155deg,rgba(8,14,28,0.92) 0%,rgba(4,10,22,0.88) 100%);
    border:1px solid var(--border-cyan); border-radius:14px;
    padding:24px 28px;
    box-shadow:0 0 0 1px rgba(0,240,255,0.04) inset,0 16px 40px rgba(0,0,0,0.35);
    backdrop-filter:blur(14px);
}
.config-panel h3 {
    font-family:var(--font-mono); font-size:0.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.14em; color:var(--muted);
    margin-bottom:16px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.06);
}
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:0.8rem; font-weight:600; color:#a8b4c4; margin-bottom:6px; letter-spacing:0.3px; }
.form-group input, .form-group textarea, .form-group select {
    width:100%; padding:10px 14px;
    background:rgb(37 37 37 / 85%); border:1px solid rgba(255,255,255,0.1);
    border-radius:8px; color:var(--text); 
    font-family:var(--font-ui); font-weight:500;
    outline:none; transition:all .2s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    border-color:var(--cyan); box-shadow:0 0 0 2px var(--cyan-dim),0 0 20px rgba(0,240,255,0.12);
    background:rgba(0,0,0,0.4);
}
.form-group textarea { resize:vertical; }
details { margin:16px 0; }
details summary {
    cursor:pointer; color:var(--cyan); font-size:13px; font-weight:700;
    font-family:var(--font-display); letter-spacing:0.06em;
    padding:6px 0; transition:color .15s; outline:none;
    text-transform:uppercase;
}
details summary:hover { color:#38bdf8; }
hr { border:none; border-top:1px solid rgba(255,255,255,0.06); margin:16px 0; }
.btn {
    position:relative; padding:10px 22px; border-radius:10px; cursor:pointer;
    font-size:14px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    border:1px solid var(--border-cyan); font-family:var(--font-display);
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,filter .15s ease;
    color:var(--text);
    background:linear-gradient(165deg,rgba(18,28,52,0.95) 0%,rgba(6,12,26,0.98) 100%);
    box-shadow:0 0 0 1px rgba(0,240,255,0.06) inset,0 8px 24px rgba(0,0,0,0.35);
}
.btn:hover:not(:disabled) {
    transform:translateY(-2px);
    border-color:rgba(0,240,255,0.45);
    box-shadow:0 0 0 1px rgba(0,240,255,0.1) inset,0 0 28px var(--cyan-dim),0 12px 28px rgba(0,0,0,0.4);
}
.btn:active:not(:disabled) {
    transform:translateY(1px); filter:brightness(0.95);
    box-shadow:0 0 0 1px rgba(0,240,255,0.05) inset,0 4px 14px rgba(0,0,0,0.35);
}
.btn:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
.btn:disabled { opacity:0.45; cursor:not-allowed; transform:none; filter:grayscale(0.2); box-shadow:0 4px 12px rgba(0,0,0,0.25); }
#save-msg { margin-left:12px; font-size:13px; font-weight:600; }
#save-msg.success { color:#2ed573; }
#save-msg.error { color:#ff4757; }

/* ====== Radio group ====== */
.radio-group { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.radio-label { font-size:0.8rem; font-weight:600; color:#a8b4c4; white-space:nowrap; }
.radio-options {
    display:inline-flex; padding:4px; border-radius:10px;
    background:rgba(0,0,0,0.35); border:1px solid var(--border-cyan); gap:4px;
}
.radio-option { position:relative; cursor:pointer; margin:0; user-select:none; }
.radio-option input { position:absolute; opacity:0; width:0; height:0; margin:0; }
.radio-option span {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:5.5rem; padding:8px 16px; border-radius:8px;
    font-family:var(--font-display); font-size:0.78rem; font-weight:700;
    letter-spacing:0.12em; color:var(--muted); background:transparent;
    border:1px solid transparent; transition:all .15s; cursor:pointer;
}
.radio-option input:checked+span {
    color:#061018; background:linear-gradient(135deg,var(--cyan) 0%,#00b8d4 100%);
    border-color:rgba(255,255,255,0.25); box-shadow:0 0 20px var(--cyan-dim);
}
.radio-option:hover input:not(:checked)+span {
    color:var(--text); background:rgba(0,240,255,0.08); border-color:rgba(0,240,255,0.25);
}
.radio-group .hint { width:100%; }

/* ====== DB viewer ====== */
.db-section { display:flex; flex-direction:column; gap:16px; }
.db-panel {
    background:linear-gradient(155deg,rgba(8,14,28,0.92) 0%,rgba(4,10,22,0.88) 100%);
    border:1px solid var(--border-cyan); border-radius:14px; padding:18px;
    box-shadow:0 0 0 1px rgba(0,240,255,0.04) inset,0 16px 40px rgba(0,0,0,0.35);
    backdrop-filter:blur(14px);
    overflow-x:auto;
}
.db-panel h3 { font-family:var(--font-mono); font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.18em; color:var(--cyan); margin-bottom:14px; opacity:0.9; }
.db-table-wrap { overflow-x:auto; }
.db-table { width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:12px; }
.db-table th { text-align:left; padding:8px 10px; background:rgba(0,240,255,0.06); color:var(--cyan); font-weight:600; border-bottom:1px solid rgba(0,240,255,0.15); white-space:nowrap;font-size:15px; }
.db-table td { padding:7px 10px; border-bottom:1px solid rgba(255,255,255,0.04); color:var(--text); word-break:break-all; }
.db-table tr:hover td { background:rgba(255,255,255,0.03); }
.db-empty { text-align:center; color:#475569; padding:32px 0; }

/* ====== Hint ====== */
.hint { font-size:12px; color:#7a8698; margin-top:5px; line-height:1.5; }

/* ====== Login ====== */
body.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box {
    background:linear-gradient(155deg,rgba(8,14,28,0.92) 0%,rgba(4,10,22,0.88) 100%);
    border:1px solid var(--border-cyan); border-radius:16px;
    padding:44px 40px; width:588px;
    box-shadow:0 0 0 1px rgba(0,240,255,0.04) inset,0 20px 48px rgba(0,0,0,0.45);
    backdrop-filter:blur(14px);
}
.login-box h1 {
    font-family:var(--font-display); font-size:24px; font-weight:700;
    letter-spacing:0.06em; text-align:center; margin-bottom:6px;
    background:linear-gradient(105deg,#fff 0%,var(--cyan) 45%,var(--violet) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 28px rgba(0,240,255,0.25));
}
.login-box .sub { text-align:center; color:var(--muted); font-size:13px; margin-bottom:32px; }
.login-box .form-group { margin-bottom:18px; }
.login-box input {
    width:100%; padding:14px 16px;
    background:rgba(2,6,14,0.85); border:1px solid rgba(255,255,255,0.1);
    border-radius:10px; color:var(--text); font-size:24px;
    font-family:var(--font-ui); font-weight:500; outline:none; transition:all .2s;
}
.login-box input:focus { border-color:var(--cyan); box-shadow:0 0 0 2px var(--cyan-dim),0 0 20px rgba(0,240,255,0.12); }
.login-box .checkbox-row { display:flex; align-items:center; gap:8px; margin-bottom:24px; color:var(--muted); font-size:13px; }
.login-box .checkbox-row input { width:auto; accent-color:var(--cyan); }
.login-box .btn { width:100%; padding:14px; font-size:15px; }
#login-msg { text-align:center; font-size:13px; margin-top:14px; min-height:22px; font-weight:600; }
#login-msg.error { color:#ff4757; }

/* ====== Responsive ====== */
@media(max-width:900px) {
    .chart-area { flex-direction:column; }
    .sidebar { width:100%; flex-direction:row; flex-wrap:wrap; }
    .sidebar .panel { flex:1; min-width:200px; }
    .chart-container { min-height:400px; height:400px; }
    #tv-chart { height:400px; }
    .signal-list { max-height:320px; }
}
@media(max-width:600px) {
    #app { padding:10px 12px; }
    header { flex-direction:column; align-items:flex-start; padding:16px 14px 20px; }
    .header-right { width:100%; justify-content:space-between; }
    .header-center { position:static; transform:none; margin:4px auto; font-size:20px; }
    .tabs { gap:4px; }
    .tab { padding:6px 14px; font-size:11px; flex:1; text-align:center; }
    .chart-container { min-height:300px; height:300px; border-radius:10px; }
    #tv-chart { height:300px; }
    .sidebar { flex-direction:column; }
    .sidebar .panel { min-width:auto; }
    .panel { padding:14px; }
    .panel h3 { font-size:0.6rem; }
    .stat-row { font-size:13px; padding:5px 0; }
    .signal-item { font-size:12px; padding:8px 10px; }
    .config-panel { padding:16px; border-radius:12px; }
    .signal-list { max-height:260px; }
    #save-msg { display:block; margin-left:0; margin-top:10px; }
    .login-box { padding:32px 24px; width:92%; border-radius:16px; }
}

/* ====== 系统配置抽屉 ====== */
#sysconfig-modal {
    justify-content:flex-end; align-items:stretch;
    background:rgba(0,0,0,0.3);
}
#sysconfig-modal .modal-box {
    position:relative; width:40%; min-width:360px; height:100vh;
    max-width:100%; border-radius:0; padding:28px 24px;
    background:linear-gradient(165deg,rgba(8,16,32,0.98) 0%,rgba(4,8,18,0.96) 100%);
    border:none; border-left:1px solid var(--border-cyan);
    box-shadow:-20px 0 60px rgba(0,0,0,0.5),-4px 0 20px rgba(0,240,255,0.08);
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#sysconfig-modal.active .modal-box { transform:translateX(0); }
#sysconfig-modal .modal-close {
    position:absolute; top:16px; right:16px; float:none;
    font-size:24px; color:var(--muted); cursor:pointer;
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border-radius:8px; background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08); z-index:2;
    transition:all .15s;
}
#sysconfig-modal .modal-close:hover {
    color:#fff; background:rgba(255,71,87,0.15); border-color:rgba(255,71,87,0.3);
}
#sysconfig-modal .modal-box h2 {
    margin:0 0 20px; padding-right:44px;
    font-size:16px; color:var(--cyan);
}