* { 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-status.pending { background:rgba(33,150,243,0.12); color:#2196F3; }
.signal-item .sig-status.queued { background:rgba(33,150,243,0.12); color:#2196F3; }
.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 Modal ====== */
.config-modal-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.75); z-index:1000;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(4px);
}
.config-modal-box {
    position:absolute;
    top:58px; left:58px; right:58px; bottom:58px;
    background:linear-gradient(155deg,rgba(8,14,28,0.95) 0%,rgba(4,10,22,0.92) 100%);
    border:1px solid var(--border-cyan); border-radius:16px;
    box-shadow:0 0 0 1px rgba(0,240,255,0.06) inset,0 24px 60px rgba(0,0,0,0.5);
    display:flex; flex-direction:column;
    backdrop-filter:blur(14px);
}
.config-modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 28px 14px; border-bottom:1px solid rgba(255,255,255,0.08);
    flex-shrink:0;
}
.config-modal-title {
    font-family:var(--font-mono); font-size:16px; font-weight:700;
    color:#00f0ff; letter-spacing:0.12em; text-transform:uppercase;
}
.config-modal-close {
    width:36px; height:36px; border:1px solid rgba(255,255,255,0.12); border-radius:8px;
    background:rgba(255,255,255,0.04); color:#a8b4c4; font-size:22px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    line-height:1; transition:all 0.2s;
}
.config-modal-close:hover { background:rgba(255,75,75,0.15); border-color:#ff4b4b; color:#ff4b4b; }
.config-modal-body {
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:20px 28px 28px;
}
.config-modal-body::-webkit-scrollbar { width:6px; }
.config-modal-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:3px; }

/* ====== Config Panel ====== */
.config-panel {
    max-width:100%; margin:0;
    background:transparent; border:none; border-radius:0;
    padding:0;
    box-shadow:none;
    backdrop-filter:none;
}
.config-panel h3 {
    font-family:var(--font-mono); font-size:14px; font-weight:700;
    text-transform:uppercase; letter-spacing:0.14em; color:#00f0ff;
    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:6px 10px;
    background:#fdd83529; 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:14px; color:#b9a863; 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; }
}

/* ====== Tablet (≤768px) ====== */
@media(max-width:768px) {
    #app { max-width:100%; padding:12px 10px 24px; }
    header { padding:14px 14px 18px; border-radius:12px; gap:10px; }
    .logo { font-size:1rem; }
    .header-right { gap:4px; }
    .header-right .btn { padding:5px 10px; font-size:11px; }

    .grid { grid-template-columns: 1fr; gap:12px; }
    .card { padding:14px; }
    .chart-area { flex-direction:column; }
    .chart-container { min-height:350px; height:350px; }
    #tv-chart { height:350px; }
    .sidebar { width:100%; flex-direction:column; }
    .sidebar .panel { min-width:auto; flex:none; }
    .signal-list { max-height:280px; }
    .config-panel { padding:14px; }
    .config-group { gap:6px; }
    .config-group label { width:100%; font-size:11px; }
    .config-group input, .config-group select { width:100%; font-size:11px; padding:6px 8px; }

    .db-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .db-table-wrap table { min-width:600px; font-size:10px; }
    .db-table-wrap th, .db-table-wrap td { padding:4px 6px; }

    .btn-bar { flex-wrap:wrap; gap:6px; }
    .btn-bar .btn { flex:1 1 auto; min-width:80px; font-size:11px; padding:6px 10px; }

    .modal-box { width:94%; max-width:400px; padding:20px 16px; border-radius:14px; }
    .modal-box h2 { font-size:16px; }
    .modal-table { font-size:11px; }

    .settlement-group-header th { font-size:11px; padding:6px 8px; }
    .settlement-group thead tr:last-child th { font-size:9px; padding:3px 4px; }
    .settlement-group td { font-size:10px; padding:2px 4px; }
    .sim-group-header { flex-wrap:wrap; gap:4px; font-size:11px; padding:6px 10px; }
    .sim-group-body th { font-size:9px; padding:3px 4px; }
    .sim-group-body td { font-size:10px; padding:2px 4px; }

    .page { padding:10px 8px; }
    .page header { flex-wrap:wrap; gap:8px; }
    .page header .title { font-size:16px; }
    .page header .actions { flex-wrap:wrap; gap:4px; }
    .page header .btn { font-size:10px; padding:4px 8px; }

    #sysconfig-modal .modal-box { width:90%; max-width:none; border-radius:10px 0 0 10px; }
}

/* ====== Mobile (≤480px) ====== */
@media(max-width:480px) {
    #app { padding:6px 5px 16px; }
    header { padding:10px 10px 14px; border-radius:10px; flex-direction:column; align-items:flex-start; }
    .logo { font-size:0.9rem; }
    .header-right { width:100%; justify-content:flex-end; flex-wrap:wrap; }
    .header-center { position:static; transform:none; margin:2px auto; font-size:18px; }
    .tabs { gap:3px; }
    .tab { padding:5px 10px; font-size:10px; flex:1; text-align:center; }
    .chart-container { min-height:240px; height:240px; border-radius:10px; }
    #tv-chart { height:240px; }
    .sidebar { gap:8px; }
    .panel { padding:10px; border-radius:10px; }
    .panel h3 { font-size:0.55rem; }
    .stat-row { font-size:12px; padding:4px 0; }
    .signal-item { font-size:11px; padding:6px 8px; }
    .signal-list { max-height:200px; }

    .grid { gap:8px; }
    .card { padding:10px; border-radius:10px; }
    .card h3 { font-size:13px; }

    .db-table-wrap table { min-width:480px; font-size:9px; }
    .db-table-wrap th, .db-table-wrap td { padding:3px 4px; }

    .btn { padding:5px 10px; font-size:11px; border-radius:8px; }
    .btn-bar { gap:4px; }
    .btn-bar .btn { flex:1 1 100%; min-width:0; font-size:10px; padding:6px 8px; }

    .config-panel { padding:10px; border-radius:10px; }
    .radio-group { flex-direction:column; gap:4px; }
    .radio-option { padding:6px 10px; font-size:11px; }

    .modal-box { width:96%; max-width:none; padding:16px 12px; border-radius:10px; }
    .modal-box h2 { font-size:14px; }
    .modal-close { font-size:20px; top:6px; right:10px; }

    .settlement-group { border-radius:6px; margin-bottom:10px; }
    .settlement-group-header { font-size:10px; padding:5px 8px; }
    .settlement-group-header th { font-size:10px; padding:4px 6px; }
    .settlement-group thead tr:last-child th { font-size:8px; padding:2px 4px; }
    .settlement-group td { font-size:9px; padding:2px 4px; }
    .sim-group { border-radius:6px; margin-bottom:10px; }
    .sim-group-header { font-size:10px; padding:5px 8px; }
    .sim-group-body th { font-size:8px; padding:2px 4px; }
    .sim-group-body td { font-size:9px; padding:2px 4px; }

    .login-box { padding:24px 16px; width:94%; border-radius:12px; }
    .login-box h1 { font-size:22px; }
    .login-box input { padding:10px 12px; font-size:13px; }

    .page header { padding:10px; }
    .page header .title { font-size:14px; }
    .page header .actions .btn { font-size:9px; padding:4px 6px; }

    .stat-row .label { font-size:10px; }
    .stat-row .val { font-size:12px; }
    .chart-bar { height:6px; border-radius:3px; }
    .chart-pct { font-size:11px; }

    #sysconfig-modal .modal-box { width:96%; left:4%; border-radius:8px 8px 0 0; }
    #sysconfig-modal .modal-box h2 { font-size:14px; }
}

/* ====== Small print landscape (height ≤480px) ====== */
@media(max-height:480px) {
    .chart-container { min-height:180px; height:180px; }
    #tv-chart { height:180px; }
    header { padding:8px 10px; margin-bottom:8px; }
    .panel { padding:8px; }
    .stat-row { padding:2px 0; font-size:11px; }
    .signal-list { max-height:140px; }
    .login-box { padding:16px 24px; }
    .login-box h1 { font-size:18px; margin-bottom:12px; }
    .login-box input { padding:8px 10px; }
}
}

/* ====== 系统配置抽屉 ====== */
#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);
}



/* === simulation.html === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'JetBrains Mono', monospace; background: #000; color: #c8d6e5; overflow-x: hidden; }
.glow-cyan { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.6), transparent); filter: blur(8px); z-index: 0; }
.page { position: relative; z-index: 1; max-width: 90%; margin: 0 auto; padding: 20px; }
header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid rgba(0,240,255,0.2); border-radius: 12px; margin-bottom: 20px; background: rgba(0,240,255,0.03); }
header .title { font-family: Orbitron, monospace; font-size: 20px; color: #00f0ff; }
header .status { font-size: 14px; }
.status-on { color: #00f0ff; }
.status-off { color: #ff4757; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.card { border: 1px solid rgba(0,240,255,0.15); border-radius: 10px; padding: 16px; background: rgba(0,0,0,0.6); }
.card h3 { font-size: 14px; color: #00f0ff; margin-bottom: 12px; font-weight: 600; }
.stat-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.stat-row .label { color: #8a9bb5; }
.stat-row .val { font-weight: 600; }
.val-win { color: #15FF00; }
.val-lose { color: #FF1500; }
.val-info { color: #00f0ff; }
.btn-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.btn { font-family: inherit; font-size: 13px; padding: 6px 16px; border: 1px solid rgba(0,240,255,0.3); border-radius: 6px; background: rgba(0,240,255,0.08); color: #c8d6e5; cursor: pointer; }
.btn:hover { background: rgba(0,240,255,0.15); }
.btn-danger { border-color: rgba(255,75,75,0.3); color: #ff4757; }
.btn-danger:hover { background: rgba(255,75,75,0.1); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(0,240,255,0.2); color: #00f0ff; font-weight: 600; }
td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
tr:hover td { background: rgba(0,240,255,0.03); }
td.win { color: #15FF00; }
td.lose { color: #FF1500; }
td.pending { color: #8a9bb5; }
.chart-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.chart-track { flex: 1; height: 12px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; display: flex; }
.chart-win { background: linear-gradient(90deg, #15FF00, #0af); height: 100%; transition: width 0.5s; }
.chart-lose { background: linear-gradient(90deg, #FF1500, #f66); height: 100%; transition: width 0.5s; }
.chart-pct { font-family: Orbitron, monospace; font-size: 16px; min-width: 50px; }

/* === data-cleanup.html === */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'JetBrains Mono', monospace; background: #000; color: #c8d6e5; overflow-x: hidden; }
.glow-cyan { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.6), transparent); filter: blur(8px); z-index: 0; }
.page { position: relative; z-index: 1; max-width: 90%; margin: 0 auto; padding: 20px; }
header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid rgba(0,240,255,0.2); border-radius: 12px; margin-bottom: 20px; background: rgba(0,240,255,0.03); }
header .title { font-family: Orbitron, monospace; font-size: 20px; color: #00f0ff; }
header .actions { display: flex; gap: 8px; }
.card { border: 1px solid rgba(0,240,255,0.15); border-radius: 10px; padding: 20px; background: rgba(0,0,0,0.6); margin-bottom: 16px; }
.card h3 { font-size: 14px; color: #00f0ff; margin-bottom: 16px; font-weight: 600; }
.form-row { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.form-row label { font-size: 13px; color: #8a9bb5; min-width: 80px; }
.radio-group { display: flex; gap: 16px; align-items: center; }
.radio-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: #c8d6e5; font-size: 14px; min-width: auto; }
.radio-group input[type="radio"] { accent-color: #00f0ff; width: 16px; height: 16px; cursor: pointer; }
.flatpickr-input { padding: 8px 12px; border: 1px solid rgba(0,240,255,0.3); border-radius: 6px; background: rgba(0,0,0,0.5); color: #c8d6e5; font-family: inherit; font-size: 13px; outline: none; min-width: 180px; }
.flatpickr-calendar { background: #0a0f1a; border: 1px solid rgba(0,240,255,0.3); }
.flatpickr-day { color: #c8d6e5; }
.flatpickr-day:hover { background: rgba(0,240,255,0.15); }
.flatpickr-day.selected { background: #00f0ff; color: #000; }
.flatpickr-months .flatpickr-month { color: #00f0ff; }
.flatpickr-current-month input.cur-year { color: #00f0ff; }
.flatpickr-weekday { color: #8a9bb5; }
.btn { font-family: inherit; font-size: 13px; padding: 8px 20px; border: 1px solid rgba(0,240,255,0.3); border-radius: 6px; background: rgba(0,240,255,0.08); color: #c8d6e5; cursor: pointer; transition: all 0.2s; }
.btn:hover { background: rgba(0,240,255,0.15); }
.btn-danger { border-color: rgba(255,75,75,0.3); color: #ff4757; background: rgba(255,75,75,0.08); }
.btn-danger:hover { background: rgba(255,75,75,0.15); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.msg { font-size: 13px; margin-left: 12px; color: #8a9bb5; }
.msg.success { color: #2ed573; }
.msg.error { color: #ff4757; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.data-table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(0,240,255,0.2); color: #00f0ff; font-weight: 600; white-space: nowrap; }
.data-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.data-table tr:hover td { background: rgba(0,240,255,0.03); }
.data-table input[type="checkbox"] { accent-color: #00f0ff; cursor: pointer; }
.data-table .col-check { width: 36px; text-align: center; }
.data-table .col-time { min-width: 160px; }
.data-table .col-dir { min-width: 80px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; }
.pagination .page-info { color: #8a9bb5; }
.no-data { color: #8a9bb5; text-align: center; padding: 24px 0; font-size: 13px; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.toolbar label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: #c8d6e5; }
.toolbar label input { accent-color: #00f0ff; }
.selected-count { font-size: 13px; color: #ffa502; margin-left: auto; }

/* === manage.html === */
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'JetBrains Mono', monospace; background:#000; color:#c8d6e5; overflow-x:hidden; }
.glow-cyan { position:fixed; top:0; left:50%; transform:translateX(-50%); width:800px; height:2px; background:linear-gradient(90deg, transparent, rgba(0,240,255,0.6), transparent); filter:blur(8px); z-index:0; }
.page { position:relative; z-index:1; max-width:95%; margin:0 auto; padding:20px; }
header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border:1px solid rgba(0,240,255,20%); border-radius:12px; margin-bottom:20px; background:rgba(0,240,255,20%); }
header .title { font-family:Orbitron, monospace; font-size:20px; color:#00f0ff; }
header .actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.btn { font-family:inherit; font-size:13px; padding:6px 16px; border:1px solid rgba(0,240,255,0.3); border-radius:6px; background:rgba(0,240,255,0.08); color:#c8d6e5; cursor:pointer; }
.btn:hover { background:rgba(0,240,255,0.15); }
.btn-danger { border-color:rgba(255,75,75,0.3); color:#ff4757; }
.btn-danger:hover { background:rgba(255,75,75,0.1); }
.btn-start { border-color:rgba(21,255,0,0.3); color:#15FF00; }
.btn-start:hover { background:rgba(21,255,0,0.1); }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.card { border:1px solid rgba(0,240,255,0.15); border-radius:10px; padding:16px; background:rgba(0,0,0,0.6); }
.card h3 { font-size:14px; color:#00f0ff; margin-bottom:12px; font-weight:600; }
.stat-row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.04); }
.stat-row .label { color:#8a9bb5; }
.stat-row .val { font-weight:600; }
.val-win { color:#15FF00; }
.val-lose { color:#FF1500; }
.val-info { color:#00f0ff; }
td.win { color:#15FF00; }
td.lose { color:#FF1500; }
td.pending { color:#8a9bb5; }
.chart-bar { display:flex; align-items:center; gap:8px; margin-top:8px; }
.chart-track { flex:1; height:12px; background:rgba(255,255,255,0.06); border-radius:6px; overflow:hidden; display:flex; }
.chart-win { background:linear-gradient(90deg, #15FF00, #0af); height:100%; transition:width 0.5s; }
.chart-lose { background:linear-gradient(90deg, #FF1500, #f66); height:100%; transition:width 0.5s; }
.chart-pct { font-family:Orbitron, monospace; font-size:16px; min-width:50px; }
table { width:100%; border-collapse:collapse; font-size:12px; }
th { text-align:left; padding:8px 10px; border-bottom:1px solid rgba(0,240,255,0.2); color:#00f0ff; font-weight:600; }
td { padding:6px 10px; border-bottom:1px solid rgba(255,255,255,0.04); }
tr:hover td { background:rgba(0,240,255,0.03); }
.status-on { color:#00f0ff; }
.status-off { color:#ff4757; }
.db-table-wrap { overflow-x:auto; }
.btn-bar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
@media(max-width:800px){ .grid{grid-template-columns:1fr} }

/* Modals */
.modal-overlay { display:none; position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); justify-content:center; align-items:center; }
.modal-overlay.active { display:flex; }
.modal-box { background:linear-gradient(165deg,rgba(8,16,32,0.98) 0%,rgba(4,8,18,0.95) 100%); border:1px solid var(--border-cyan); border-radius:16px; padding:24px; max-width:700px; width:90%; max-height:80vh; overflow-y:auto; box-shadow:0 0 60px rgba(0,240,255,0.12); }
.modal-box h2 { margin:0 0 16px; font-size:16px; color:var(--cyan); }
.modal-box .modal-close { float:right; cursor:pointer; font-size:18px; color:var(--muted); padding:2px 8px; border-radius:4px; }
.modal-box .modal-close:hover { color:var(--cyan); background:rgba(0,240,255,0.1); }
.modal-table { width:100%; border-collapse:collapse; font-size:12px; }
.modal-table th { text-align:left; padding:6px 10px; border-bottom:1px solid rgba(0,240,255,0.15); color:var(--cyan); font-weight:600; }
.modal-table td { padding:5px 10px; border-bottom:1px solid rgba(255,255,255,0.05); word-break:break-all; }
.modal-table td:first-child { color:var(--accent-violet); font-family:'JetBrains Mono',monospace; font-size:16px; }
.modal-table td:last-child { color:#c8d6e5; font-size:16px;}
.modal-table tr:hover td { background:rgba(0,240,255,0.04); }
.syscfg-section { border:1px solid rgba(0,240,255,0.15); border-radius:8px; padding:14px; margin-top:8px; }
.syscfg-input { padding:5px 7px; border:1px solid var(--border-cyan); border-radius:4px; background:rgba(0,0,0,0.3); color:#c8d6e5; font-size:15px; }
.syscfg-btn { font-size:14px; padding:5px 13px; }

/* === public/simulation.html === */
* { box-sizing: border-box; margin: 0; padding: 0; }
.page-sim body { font-family: 'JetBrains Mono', monospace; background: #000; color: #c8d6e5; overflow-x: hidden; }
.page-sim .glow-cyan { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.6), transparent); filter: blur(8px); z-index: 0; }
.page-sim .page { position: relative; z-index: 1; max-width: 95%; margin: 0 auto; padding: 20px; }
.page-sim header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid rgba(0,240,255,20%); border-radius: 12px; margin-bottom: 20px; background: rgba(0,240,255,20%); }
.page-sim header .title { font-family: Orbitron, monospace; font-size: 20px; color: #00f0ff; }
.page-sim header .status { font-size: 14px; }
.page-sim .status-on { color: #00f0ff; }
.page-sim .status-off { color: #ff4757; }
.page-sim .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.page-sim .card { border:1px solid rgb(0 240 255 / 40%); border-radius: 10px; padding: 16px; background: rgba(0,0,0,0.6); }
.page-sim .card h3 { font-size: 14px; color: #00f0ff; margin-bottom: 12px; font-weight: 600; }
.page-sim .stat-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.page-sim .stat-row .label { color: #8a9bb5; }
.page-sim .stat-row .val { font-weight: 600; }
.page-sim .val-win { color: #15FF00; }
.page-sim .val-lose { color: #FF1500; }
.page-sim .val-info { color: #00f0ff; }
.page-sim .btn-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.page-sim .btn { font-family: inherit; font-size: 13px; padding: 6px 16px; border: 1px solid rgba(0,240,255,0.3); border-radius: 6px; background: rgba(0,240,255,0.08); color: #c8d6e5; cursor: pointer; }
.page-sim .btn:hover { background: rgba(0,240,255,0.15); }
.page-sim .btn-danger { border-color: rgba(255,75,75,0.3); color: #ff4757; }
.page-sim .btn-danger:hover { background: rgba(255,75,75,0.1); }
.page-sim table { width: 100%; border-collapse: collapse; font-size: 12px; }
.page-sim th { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(0,240,255,0.2); color: #00f0ff; font-weight: 600; }
.page-sim td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.page-sim tr:hover td { background: rgba(0,240,255,0.03); }
.page-sim td.win { color: #15FF00; }
.page-sim td.lose { color: #FF1500; }
.page-sim td.pending { color: #8a9bb5; }
.page-sim .chart-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.page-sim .chart-track { flex: 1; height: 12px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden; display: flex; }
.page-sim .chart-win { background: linear-gradient(90deg, #15FF00, #0af); height: 100%; transition: width 0.5s; }
.page-sim .chart-lose { background: linear-gradient(90deg, #FF1500, #f66); height: 100%; transition: width 0.5s; }
.page-sim .chart-pct { font-family: Orbitron, monospace; font-size: 16px; min-width: 50px; }

/* === public/data-cleanup.html === */
* { box-sizing: border-box; margin: 0; padding: 0; }
.page-cleanup body { font-family: 'JetBrains Mono', monospace; background: #000; color: #c8d6e5; overflow-x: hidden; }
.page-cleanup .glow-cyan { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 2px; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.6), transparent); filter: blur(8px); z-index: 0; }
.page-cleanup .page { position: relative; z-index: 1; max-width: 95%; margin: 0 auto; padding: 20px; }
.page-cleanup header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border: 1px solid rgba(0,240,255,20%); border-radius: 12px; margin-bottom: 20px; background: rgba(0,240,255,20%); }
.page-cleanup header .title { font-family: Orbitron, monospace; font-size: 20px; color: #00f0ff; }
.page-cleanup header .actions { display: flex; gap: 8px; }
.page-cleanup .card { border: 1px solid rgba(0,240,255,0.40); border-radius: 10px; padding: 20px; background: rgba(0,0,0,0.6); margin-bottom: 16px; }
.page-cleanup .card h3 { font-size: 14px; color: #00f0ff; margin-bottom: 16px; font-weight: 600; }
.page-cleanup .form-row { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; }
.page-cleanup .form-row label { font-size: 13px; color: #8a9bb5; min-width: 80px; }
.page-cleanup .radio-group { display: flex; gap: 16px; align-items: center; }
.page-cleanup .radio-group label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: #c8d6e5; font-size: 14px; min-width: auto; }
.page-cleanup .radio-group input[type="radio"] { accent-color: #00f0ff; width: 16px; height: 16px; cursor: pointer; }
.page-cleanup .flatpickr-input { padding: 8px 12px; border: 1px solid rgba(0,240,255,0.3); border-radius: 6px; background: rgba(0,0,0,0.5); color: #c8d6e5; font-family: inherit; font-size: 13px; outline: none; min-width: 180px; }
.page-cleanup .flatpickr-calendar { background: #0a0f1a; border: 1px solid rgba(0,240,255,0.3); }
.page-cleanup .flatpickr-day { color: #c8d6e5; }
.page-cleanup .flatpickr-day:hover { background: rgba(0,240,255,0.15); }
.page-cleanup .flatpickr-day.selected { background: #00f0ff; color: #000; }
.page-cleanup .flatpickr-months .flatpickr-month { color: #00f0ff; }
.page-cleanup .flatpickr-current-month input.cur-year { color: #00f0ff; }
.page-cleanup .flatpickr-weekday { color: #8a9bb5; }
.page-cleanup .btn { font-family: inherit; font-size: 13px; padding: 8px 20px; border: 1px solid rgba(0,240,255,0.3); border-radius: 6px; background: rgba(0,240,255,0.08); color: #c8d6e5; cursor: pointer; transition: all 0.2s; }
.page-cleanup .btn:hover { background: rgba(0,240,255,0.15); }
.page-cleanup .btn-danger { border-color: rgba(255,75,75,0.3); color: #ff4757; background: rgba(255,75,75,0.08); }
.page-cleanup .btn-danger:hover { background: rgba(255,75,75,0.15); }
.page-cleanup .btn:disabled { opacity: 0.45; cursor: not-allowed; }
.page-cleanup .msg { font-size: 13px; margin-left: 12px; color: #8a9bb5; }
.page-cleanup .msg.success { color: #2ed573; }
.page-cleanup .msg.error { color: #ff4757; }
.page-cleanup .data-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.page-cleanup .data-table th { text-align: left; padding: 10px 8px; border-bottom: 1px solid rgba(0,240,255,0.2); color: #00f0ff; font-weight: 600; white-space: nowrap; }
.page-cleanup .data-table td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.page-cleanup .data-table tr:hover td { background: rgba(0,240,255,0.03); }
.page-cleanup .data-table input[type="checkbox"] { accent-color: #00f0ff; cursor: pointer; }
.page-cleanup .data-table .col-check { width: 36px; text-align: center; }
.page-cleanup .data-table .col-time { min-width: 160px; }
.page-cleanup .data-table .col-dir { min-width: 80px; }
.page-cleanup .pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; font-size: 13px; }
.page-cleanup .pagination .page-info { color: #8a9bb5; }
.page-cleanup .no-data { color: #8a9bb5; text-align: center; padding: 24px 0; font-size: 13px; }
.page-cleanup .toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.page-cleanup .toolbar label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; color: #c8d6e5; }
.page-cleanup .toolbar label input { accent-color: #00f0ff; }
.page-cleanup .selected-count { font-size: 13px; color: #ffa502; margin-left: auto; }

/* === public/manage.html === */
* { box-sizing:border-box; margin:0; padding:0; }
.page-manage body { font-family:'JetBrains Mono', monospace; background:#000; color:#c8d6e5; overflow-x:hidden; }
.page-manage .glow-cyan { position:fixed; top:0; left:50%; transform:translateX(-50%); width:800px; height:2px; background:linear-gradient(90deg, transparent, rgba(0,240,255,0.6), transparent); filter:blur(8px); z-index:0; }
.page-manage .page { position:relative; z-index:1; max-width:95%; margin:0 auto; padding:20px; }
.page-manage header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border:1px solid rgba(0,240,255,20%); border-radius:12px; margin-bottom:20px; background:rgba(0,240,255,20%); }
.page-manage header .title { font-family:Orbitron, monospace; font-size:20px; color:#00f0ff; }
.page-manage header .actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.page-manage .btn { font-family:inherit; font-size:13px; padding:6px 16px; border:1px solid rgba(0,240,255,0.3); border-radius:6px; background:rgba(0,240,255,0.08); color:#c8d6e5; cursor:pointer; }
.page-manage .btn:hover { background:rgba(0,240,255,0.15); }
.page-manage .btn-danger { border-color:rgba(255,75,75,0.3); color:#ff4757; }
.page-manage .btn-danger:hover { background:rgba(255,75,75,0.1); }
.page-manage .btn-start { border-color:rgba(21,255,0,0.3); color:#15FF00; }
.page-manage .btn-start:hover { background:rgba(21,255,0,0.1); }
.page-manage .grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.page-manage .card { border:1px solid rgba(0,240,255,0.40); border-radius:10px; padding:16px; background:rgba(0,0,0,0.6); }
.page-manage .card h3 { font-size:14px; color:#00f0ff; margin-bottom:12px; font-weight:600; }
.page-manage .stat-row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; border-bottom:1px solid rgba(255,255,255,0.04); }
.page-manage .stat-row .label { color:#8a9bb5; }
.page-manage .stat-row .val { font-weight:600; }
.page-manage .val-win { color:#15FF00; }
.page-manage .val-lose { color:#FF1500; }
.page-manage .val-info { color:#00f0ff; }
.page-manage td.win { color:#15FF00; }
.page-manage td.lose { color:#FF1500; }
.page-manage td.pending { color:#8a9bb5; }
.page-manage .chart-bar { display:flex; align-items:center; gap:8px; margin-top:8px; }
.page-manage .chart-track { flex:1; height:12px; background:rgba(255,255,255,0.06); border-radius:6px; overflow:hidden; display:flex; }
.page-manage .chart-win { background:linear-gradient(90deg, #15FF00, #0af); height:100%; transition:width 0.5s; }
.page-manage .chart-lose { background:linear-gradient(90deg, #FF1500, #f66); height:100%; transition:width 0.5s; }
.page-manage .chart-pct { font-family:Orbitron, monospace; font-size:16px; min-width:50px; }
.page-manage table { width:100%; border-collapse:collapse; font-size:12px; }
.page-manage th { text-align:left; padding:8px 10px; border-bottom:1px solid rgba(0,240,255,0.2); color:#00f0ff; font-weight:600; }
.page-manage td { padding:6px 10px; border-bottom:1px solid rgba(255,255,255,0.04); }
.page-manage tr:hover td { background:rgba(0,240,255,0.03); }
.page-manage .status-on { color:#00f0ff; }
.page-manage .status-off { color:#ff4757; }
.page-manage .db-table-wrap { overflow-x:auto; }
.page-manage .btn-bar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
@media(max-width:800px){ .grid{grid-template-columns:1fr} }

/* Modals */
.page-manage .modal-overlay { display:none; position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); justify-content:center; align-items:center; }
.page-manage .modal-overlay.active { display:flex; }
.page-manage .modal-box { background:linear-gradient(165deg,rgba(8,16,32,0.98) 0%,rgba(4,8,18,0.95) 100%); border:1px solid var(--border-cyan); border-radius:16px; padding:24px; max-width:700px; width:90%; max-height:80vh; overflow-y:auto; box-shadow:0 0 60px rgba(0,240,255,0.12); }
.page-manage .modal-box h2 { margin:0 0 16px; font-size:16px; color:var(--cyan); }
.page-manage .modal-box .modal-close { float:right; cursor:pointer; font-size:18px; color:var(--muted); padding:2px 8px; border-radius:4px; }
.page-manage .modal-box .modal-close:hover { color:var(--cyan); background:rgba(0,240,255,0.1); }
.page-manage .modal-table { width:100%; border-collapse:collapse; font-size:12px; }
.page-manage .modal-table th { text-align:left; padding:6px 10px; border-bottom:1px solid rgba(0,240,255,0.15); color:var(--cyan); font-weight:600; }
.page-manage .modal-table td { padding:5px 10px; border-bottom:1px solid rgba(255,255,255,0.05); word-break:break-all; }
.page-manage .modal-table td:first-child { color:var(--accent-violet); font-family:'JetBrains Mono',monospace; font-size:16px; }
.page-manage .modal-table td:last-child { color:#c8d6e5; font-size:16px;}
.page-manage .modal-table tr:hover td { background:rgba(0,240,255,0.04); }
.page-manage .syscfg-section { border:1px solid rgba(0,240,255,0.15); border-radius:8px; padding:14px; margin-top:8px; }
.page-manage .syscfg-input { padding:5px 7px; border:1px solid var(--border-cyan); border-radius:4px; background:rgba(0,0,0,0.3); color:#c8d6e5; font-size:15px; }
.page-manage .syscfg-btn { font-size:14px; padding:5px 13px; }