@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.1) transparent; }
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
body {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #0B1120; color: #d1d4dc; min-height: 100vh; overflow-x: hidden;
    position: relative;
}
body::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 120% 80% at 30% 0%, rgba(60,120,220,.28) 0%, transparent 55%),
        radial-gradient(ellipse 100% 70% at 85% 15%, rgba(90,60,180,.22) 0%, transparent 50%),
        radial-gradient(ellipse 90% 60% at 60% 100%, rgba(38,200,254,.12) 0%, transparent 45%);
}
#app { position: relative; z-index: 1; }

/* ── Top Bar ── */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; height: 44px; background: rgba(11, 17, 32, .65); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255,255,255,.08); position: sticky; top: 0; z-index: 100;
}
.topbar .title { font-size: 15px; font-weight: 700; white-space: nowrap; }
.tabs { display: flex; gap: 0; background: transparent; border-radius: 0; padding: 0; }
.tab {
    background: transparent; color: #787b86; border: none; padding: 8px 20px;
    border-radius: 0; cursor: pointer; font-size: 13px; font-weight: 500;
    border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: #d1d4dc; }
.tab.active { background: transparent; color: #d4a04a; border-bottom-color: #d4a04a; }
.topbar-right { display: flex; align-items: center; gap: 10px; font-size: 12px; }
#update-time { color: #26a69a; }
#btn-refresh {
    background: rgba(255,255,255,.08); color: #d1d4dc; border: 1px solid rgba(255,255,255,.12);
    padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 12px;
}
#btn-refresh:hover { border-color: #2962ff; }
.back-link { color: #787b86; text-decoration: none; font-size: 12px; }
.back-link:hover { color: #d1d4dc; }
.live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #26a69a;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── Layout ── */
.main-layout { display: flex; height: calc(100vh - 44px); }
.sidebar {
    width: 220px; flex-shrink: 0; background: rgba(19, 29, 46, .5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255,255,255,.08); overflow-y: auto; padding: 10px;
    display: flex; flex-direction: column;
}
.content {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
}

/* ── Content Tabs Area (top half) ── */
#content-tabs {
    overflow-y: auto; padding: 12px;
    transition: max-height 0.3s ease;
}
#content-tabs.chart-open {
    max-height: 42vh; flex-shrink: 0;
    border-bottom: 2px solid rgba(255,255,255,.08);
}

/* ── K-Line Chart Area (bottom half) ── */
#chart-area {
    display: none; flex-direction: column; min-height: 0;
    background: #0B1120;
}
#chart-area.active {
    display: flex; flex: 1;
}
#chart-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 12px; background: #131D2E;
    border-bottom: 1px solid rgba(255,255,255,.08); height: 32px; flex-shrink: 0;
}
.chart-header-left { display: flex; align-items: center; gap: 10px; }
.chart-sym-label { font-size: 13px; font-weight: 600; }
.chart-state-label { font-size: 11px; color: #787b86; }
#chart-freq-tabs { display: flex; gap: 2px; }
.chart-freq-btn {
    background: rgba(255,255,255,.08); color: #787b86; border: 1px solid rgba(255,255,255,.12);
    padding: 2px 10px; border-radius: 3px; cursor: pointer; font-size: 11px;
    transition: all 0.15s;
}
.chart-freq-btn:hover { color: #d1d4dc; border-color: #787b86; }
.chart-freq-btn.active { background: #2962ff; color: #fff; border-color: #2962ff; }
.chart-close-btn {
    background: transparent; color: #787b86; border: 1px solid rgba(255,255,255,.12);
    padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 14px;
    margin-left: 6px; line-height: 1; transition: all 0.15s;
}
.chart-close-btn:hover { color: #ef5350; border-color: #ef5350; }
#chart-main { flex: 65; min-height: 0; position: relative; }
#chart-macd { flex: 35; min-height: 0; border-top: 1px solid rgba(255,255,255,.08); position: relative; }
#chart-main .chart-legend {
    position: absolute; top: 4px; left: 8px; z-index: 10;
    font-size: 11px; color: #787b86; pointer-events: none;
}

/* ── Sidebar ── */
.sb-section { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sb-section-grow { flex: 1; min-height: 0; display: flex; flex-direction: column; border-bottom: none; }
.sb-section-grow .signal-log { flex: 1; max-height: none; overflow-y: auto; }
.sb-title {
    font-size: 12px; font-weight: 600; margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
}
.sb-subtitle { font-size: 11px; color: #d1d4dc; margin: 6px 0 4px; font-weight: 600; padding-left: 8px; border-left: 2px solid #2962ff; }
.sb-counts { font-size: 12px; }
.sb-count-row { display: flex; justify-content: space-between; padding: 1px 0; }
.sb-count-row .cnt { color: #2962ff; font-weight: 600; }
.sb-overview { font-size: 12px; }
.sb-ov-row { display: flex; justify-content: space-between; padding: 2px 0; }
.sb-ov-row .val { font-weight: 600; }
.sb-ov-row .val.pos { color: #ef5350; }
.sb-ov-row .val.neg { color: #26a69a; }
.val.pos { color: #ef5350; }
.val.neg { color: #26a69a; }

/* ── Tab Content ── */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Section Headers (Overview) ── */
.section-header {
    font-size: 14px; font-weight: 600; margin-bottom: 10px;
    padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.section-count { color: #787b86; font-size: 12px; font-weight: 400; }

/* ── Strategy Description ── */
.strategy-desc {
    font-size: 13px; color: #FF9800; font-weight: 500;
    padding: 6px 10px; background: rgba(255,152,0,0.08);
    border-radius: 4px; margin-bottom: 12px; border-left: 3px solid #FF9800;
}

/* ── Pipeline ── */
.pipeline { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pipe-stage {
    background: #131D2E; border-radius: 12px; padding: 10px;
    display: flex; flex-direction: column; min-height: 120px;
}
.stage-header {
    font-size: 13px; font-weight: 600; padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 8px;
    display: flex; align-items: center; justify-content: space-between;
}
.stage-arrow { color: #787b86; font-size: 16px; }
.stage-body { flex: 1; overflow-y: auto; max-height: 500px; }
.chart-open .stage-body { max-height: 200px; }

/* ── Pool Table ── */
.pool-table { width: 100%; font-size: 11px; border-collapse: collapse; table-layout: auto; }
.pool-table th {
    text-align: left; color: #787b86; font-weight: 500; padding: 4px 6px;
    border-bottom: 1px solid rgba(255,255,255,.08); font-size: 10px; white-space: nowrap;
}
.pool-table td { padding: 5px 6px; border-bottom: 1px solid rgba(42,46,57,0.4); white-space: nowrap; }
.pool-table tr { cursor: pointer; }
.pool-table tr:hover { background: rgba(41,98,255,0.08); }
.pool-table tr.selected { background: rgba(41,98,255,0.15); }
.pool-dist { font-weight: 500; color: #26a69a; }
.pool-dist.near { color: #FF9800; }
.pool-status { color: #787b86; font-size: 10px; }
.t1-state { font-weight: bold; padding: 1px 5px; border-radius: 3px; font-size: 10px; }
.t1-alert { background: #c0392b; color: #fff; animation: t1-pulse 1.5s ease-in-out infinite; }
.t1-warm  { background: #e67e22; color: #fff; }
@keyframes t1-pulse { 0%,100% { box-shadow: 0 0 0 rgba(192,57,43,0); } 50% { box-shadow: 0 0 8px rgba(192,57,43,0.6); } }

/* ── CC门 ── */
.cc-card { border-left: 2px solid #2196F3; }
.cc-type-badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.cc-type-di { background: rgba(38,166,154,0.2); color: #26a69a; }
.cc-type-tian { background: rgba(142,68,173,0.2); color: #8e44ad; }
.cc-formation { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; }
.cc-formation-above { background: rgba(33,150,243,0.15); color: #2196F3; }
.cc-formation-below { background: rgba(255,152,0,0.15); color: #FF9800; }
.cc-reopen-badge {
    background: rgba(239,83,80,0.2); color: #ef5350;
    font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.3px;
}
.cc-status-open {
    font-size: 10px; font-weight: 600; color: #26a69a;
    padding: 3px 0; border-top: 1px solid rgba(255,255,255,.06); margin-top: 4px;
}
.strategy-desc-cc { color: #2196F3; }

.show-more {
    text-align: center; padding: 6px; color: #2962ff; font-size: 11px;
    cursor: pointer; border-top: 1px solid rgba(255,255,255,.08); margin-top: 4px;
}
.show-more:hover { text-decoration: underline; }

/* ── Freq Filter ── */
.freq-filter { display: flex; gap: 2px; white-space: nowrap; }
.ff-btn {
    background: rgba(255,255,255,.08); color: #787b86; border: 1px solid rgba(255,255,255,.12);
    padding: 3px 10px; border-radius: 3px; cursor: pointer;
    font-size: 11px; transition: all 0.15s;
}
.ff-btn:hover { color: #d1d4dc; border-color: #787b86; }
.ff-btn.active { background: #2962ff; color: #fff; border-color: #2962ff; }

/* ── Bollinger Distance ── */
.boll-dist { font-weight: 500; font-size: 11px; }
.boll-far { color: #26a69a; }
.boll-mid { color: #FF9800; }
.boll-near { color: #ef5350; }

/* ── Star Button ── */
.star-btn {
    cursor: pointer; font-size: 14px; color: #555;
    transition: color 0.15s; user-select: none;
}
.star-btn:hover { color: #d4a04a; }
.star-btn.starred { color: #d4a04a; }

/* ── Gate Cards (Layer 2) ── */
.gate-card {
    background: #1A2538; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
    padding: 10px; margin-bottom: 6px; cursor: pointer;
    transition: border-color 0.15s;
}
.gate-card:hover { border-color: #2962ff; }
.gate-card.selected { border-color: #2962ff; background: rgba(41,98,255,0.06); }
.gc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.gc-sym { font-weight: 600; font-size: 13px; }
.gc-freq { color: #2962ff; font-size: 10px; font-weight: 600; background: rgba(41,98,255,0.15); padding: 1px 5px; border-radius: 3px; }
.gc-type { color: #787b86; font-size: 10px; }
.badge-new {
    background: #ef5350; color: #fff; font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px; letter-spacing: 0.5px;
}
.gc-prices { display: flex; gap: 10px; font-size: 11px; color: #9098a1; margin-bottom: 6px; }
.gc-circles { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 6px; padding: 4px 0; }
.gc-circles-label { font-size: 10px; color: #555; width: 28px; }

/* ── State Circles ── */
.state-circle {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.sc-1 { background: #1a3a2a; color: #26a69a; }
.sc-3 { background: #1a3a2a; color: #26a69a; }
.sc-2 { background: #3a3520; color: #FF9800; }
.sc-B { background: #3a3520; color: #FF9800; }
.sc-A { background: #3a1a1a; color: #ef5350; }
.sc-C { background: #3a1a1a; color: #ef5350; }
.sc-none { background: rgba(255,255,255,.08); color: #555; }

/* ── Cascade drive text ── */
.gc-cascade { font-size: 11px; margin-top: 4px; }
.gc-cas-row { display: flex; gap: 6px; padding: 1px 0; align-items: center; }
.gc-cas-freq { color: #787b86; width: 30px; }
.gc-cas-state { width: 24px; }
.gc-cas-drive { font-weight: 500; }
.space-big { color: #ef5350; }
.space-mid { color: #26a69a; }
.space-small { color: #FF9800; }
.space-neutral { color: #787b86; }

/* ── Monitor Cards (Layer 3) ── */
.monitor-table { width: 100%; font-size: 11px; border-collapse: collapse; margin-bottom: 8px; }
.monitor-table th {
    text-align: left; color: #787b86; font-weight: 500; padding: 4px 6px;
    border-bottom: 1px solid rgba(255,255,255,.08); font-size: 10px;
}
.monitor-table td { padding: 5px 6px; border-bottom: 1px solid rgba(42,46,57,0.4); }
.monitor-table tr { cursor: pointer; }
.monitor-table tr:hover { background: rgba(41,98,255,0.08); }
.monitor-table tr.selected { background: rgba(41,98,255,0.15); }
.mon-pnl-pos { color: #ef5350; font-weight: 600; }
.mon-pnl-neg { color: #26a69a; font-weight: 600; }
.mon-status { font-size: 10px; padding: 1px 6px; border-radius: 3px; }
.mon-status.active { background: rgba(41,98,255,0.15); color: #2962ff; }

.mini-chart-card {
    background: #1A2538; border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
    padding: 8px; margin-bottom: 6px;
}
.mini-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mini-chart-title { font-size: 12px; font-weight: 600; }
.mini-chart-pnl { font-size: 12px; font-weight: 600; white-space: nowrap; }
.mini-chart-body { height: 140px; }
.chart-open .mini-chart-card { display: none; }
.detail-btn {
    display: inline-block; margin-top: 4px; font-size: 10px; color: #2962ff;
    background: rgba(41,98,255,0.1); border: 1px solid rgba(41,98,255,0.3);
    padding: 2px 8px; border-radius: 3px; cursor: pointer; text-decoration: none;
}
.detail-btn:hover { background: rgba(41,98,255,0.2); }

/* ── Sub Tabs (天门 Layer 2) ── */
.sub-tabs { display: flex; gap: 2px; margin-bottom: 8px; }
.sub-tab {
    background: rgba(255,255,255,.08); color: #787b86; border: none; padding: 3px 10px;
    border-radius: 3px; cursor: pointer; font-size: 11px;
}
.sub-tab.active { background: #2962ff; color: #fff; }
.sub-content { display: none; }
.sub-content.active { display: block; }

/* ── Zou2 badges ── */
.zou2-badge {
    font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600;
}
.zou2-waiting { background: #3e3520; color: #FF9800; }
.zou2-active { background: #1a3530; color: #26a69a; }
.zou2-confirmed { background: #1a3530; color: #26a69a; }
.zou2-detail { font-size: 11px; color: #9098a1; padding: 2px 0; }

/* ── Watchlist (Overview) ── */
.watch-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px; margin-bottom: 6px;
}
.watch-card {
    background: #131D2E; border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
    padding: 12px; transition: border-color 0.15s;
}
.watch-card:hover { border-color: rgba(255,255,255,.12); }
.watch-card.active { border-left: 3px solid #26a69a; }
.watch-card.pool { border-left: 3px solid #FF9800; }
.watch-card.closed { border-left: 3px solid #555; opacity: 0.6; }
.wc-top {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
    flex-wrap: wrap;
}
.wc-status {
    font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600;
    margin-left: auto;
}
.wc-active { background: rgba(38,166,154,0.15); color: #26a69a; }
.wc-pool { background: rgba(255,152,0,0.15); color: #FF9800; }
.wc-closed { background: rgba(120,123,134,0.15); color: #787b86; }
.wc-remove {
    cursor: pointer; font-size: 16px; color: #555; padding: 0 4px;
    transition: color 0.15s; line-height: 1;
}
.wc-remove:hover { color: #ef5350; }
.wc-data {
    display: flex; gap: 10px; font-size: 11px; color: #9098a1;
    margin-bottom: 4px;
}
.wc-duration { font-size: 10px; color: #787b86; }

/* ── Journal (Trade Records) ── */
.journal-section { background: #131D2E; border-radius: 6px; padding: 12px; }
.journal-input { display: flex; gap: 8px; margin-bottom: 12px; }
.journal-input input {
    flex: 1; background: rgba(255,255,255,.08); color: #d1d4dc; border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px; padding: 8px 12px; font-size: 13px; outline: none;
}
.journal-input input:focus { border-color: #2962ff; }
.journal-input input::placeholder { color: #555; }
.journal-input button {
    background: #2962ff; color: #fff; border: none;
    padding: 8px 16px; border-radius: 4px; cursor: pointer;
    font-size: 13px; font-weight: 500; white-space: nowrap;
    transition: background 0.15s;
}
.journal-input button:hover { background: #1e4fd8; }
.journal-input button:disabled { background: rgba(255,255,255,.12); color: #787b86; cursor: not-allowed; }
.journal-list { max-height: 300px; overflow-y: auto; }
.journal-entry {
    display: flex; gap: 8px; padding: 6px 0; align-items: center;
    border-bottom: 1px solid rgba(42,46,57,0.4); font-size: 12px;
}
.je-time { color: #787b86; width: 40px; flex-shrink: 0; font-size: 11px; }
.je-body { flex: 1; }
.je-summary { color: #d1d4dc; }
.je-icon { font-size: 13px; flex-shrink: 0; width: 20px; text-align: center; }
.journal-result-win { color: #ef5350; font-weight: 600; }
.journal-result-loss { color: #26a69a; font-weight: 600; }

/* Signal Log (sidebar) */
.signal-log { max-height: 180px; overflow-y: auto; }
.sl-item { display: flex; gap: 8px; padding: 3px 0; font-size: 11px; border-bottom: 1px solid rgba(42,46,57,0.3); }
.sl-time { color: #787b86; width: 50px; flex-shrink: 0; }
.sl-text { flex: 1; }
.sl-type-open { color: #ef5350; }
.sl-type-close { color: #26a69a; }
.sl-type-new { color: #2962ff; }
.sl-type-entry { color: #FF9800; }
.sl-link { color: #2962ff; font-size: 10px; cursor: pointer; text-decoration: none; }
.sl-link:hover { text-decoration: underline; }

/* ── Modal ── */
.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: flex; justify-content: center;
    align-items: center; z-index: 1000;
}
.modal-content {
    background: #131D2E; border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
    padding: 20px; max-width: 640px; width: 90%; max-height: 80vh; overflow-y: auto;
}
.modal-content h3 { margin-bottom: 12px; font-size: 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.modal-content h4 { margin: 14px 0 6px; font-size: 13px; color: #787b86; }
.modal-content p { font-size: 13px; margin-bottom: 4px; }
.detail-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.detail-table th, .detail-table td { padding: 4px 8px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); }
.detail-table th { color: #787b86; font-weight: 500; }
.history-entry { font-size: 12px; padding: 3px 0; border-bottom: 1px solid rgba(42,46,57,0.5); }
.history-time { color: #2962ff; font-weight: 500; margin-right: 8px; }

/* ── Empty states ── */
.empty { color: #555; font-size: 12px; padding: 16px; text-align: center; }
.empty-tab { color: #555; font-size: 13px; padding: 40px; text-align: center; }

/* ── Responsive ── */
@media (max-width: 1200px) {
    .sidebar { width: 180px; }
    .pipeline { grid-template-columns: 1fr; }
    .watch-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sidebar { display: none; }
    .watch-grid { grid-template-columns: 1fr; }
}

/* ── Key Metrics (MA208 + Boll distance) ── */
.gc-key-metrics { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.km-tag {
    font-size: 12px; font-weight: 700; padding: 3px 10px;
    border-radius: 4px; letter-spacing: 0.3px;
}
.km-above { background: rgba(38,166,154,0.2); color: #26a69a; border: 1px solid rgba(38,166,154,0.4); }
.km-below { background: rgba(239,83,80,0.2); color: #ef5350; border: 1px solid rgba(239,83,80,0.4); }
.km-boll-far { background: rgba(38,166,154,0.15); color: #26a69a; border: 1px solid rgba(38,166,154,0.3); }
.km-boll-mid { background: rgba(255,152,0,0.15); color: #FF9800; border: 1px solid rgba(255,152,0,0.3); }
.km-boll-near { background: rgba(239,83,80,0.15); color: #ef5350; border: 1px solid rgba(239,83,80,0.3); }
.km-optional { border-style: dashed !important; opacity: 0.65; }

/* ── Short Strategy (天门做空) ── */
.strategy-desc-short {
    color: #8e44ad !important; background: rgba(142,68,173,0.08) !important;
    border-left-color: #8e44ad !important;
}
.sb-short { border-left-color: #8e44ad !important; }
.short-badge {
    background: rgba(142,68,173,0.2); color: #8e44ad;
    font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600;
}
.badge-short {
    background: #8e44ad; color: #fff; font-size: 9px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px; letter-spacing: 0.5px;
}
.short-card { border-left: 2px solid #8e44ad; }
.mon-status.short { background: rgba(142,68,173,0.15); color: #8e44ad; }

/* Short MA208 metrics (inverted: below=good, above=bad) */
.km-below-good { background: rgba(38,166,154,0.2); color: #26a69a; border: 1px solid rgba(38,166,154,0.4); }
.km-above-bad { background: rgba(239,83,80,0.2); color: #ef5350; border: 1px solid rgba(239,83,80,0.4); }

/* ── Pullback Strategy (地门回踩) ── */
.strategy-desc-pullback {
    color: #FF9800 !important; background: rgba(255,152,0,0.08) !important;
    border-left-color: #FF9800 !important;
}
.pullback-card { border-left: 2px solid #FF9800; }
.pullback-badge {
    background: rgba(255,152,0,0.2); color: #FF9800;
    font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 700;
}
.pullback-info {
    font-size: 11px; color: #9098a1; padding: 4px 0;
}

/* P3 我的策略 */
.ms-cols { display: flex; gap: 16px; align-items: flex-start; }
.ms-left { flex: 0 0 420px; } .ms-right { flex: 1; min-width: 0; }
.ms-layer { border: 1px solid #2a2e39; border-radius: 6px; padding: 8px; margin-bottom: 8px; }
.ms-pred { display: flex; gap: 6px; align-items: center; margin: 4px 0; font-size: 12px; }
.ms-row { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.ms-btn { background: #2962ff; color: #fff; border: none; border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.ms-btn.sec { background: #2a2e39; } .ms-btn.del { background: #b02a2a; }
.ms-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ms-table th, .ms-table td { border-bottom: 1px solid #2a2e39; padding: 4px 6px; text-align: left; }
.ms-item { border: 1px solid #2a2e39; border-radius: 6px; padding: 6px 8px; margin-bottom: 6px; font-size: 12px; }
.ms-item .nm { font-weight: 600; } .ms-tag { color: #787b86; font-size: 11px; }

/* ══ P4 焦点策略前端 ══ */

/* 左侧分类导航 */
#nav { width: 200px; padding: 8px; overflow-y: auto; }
.nav-cat { margin-bottom: 4px; }
.nav-cat-head { font-size: 12px; font-weight: 600; color: #b2b5be; padding: 8px 6px 4px; cursor: pointer; user-select: none; }
.nav-arrow { display: inline-block; width: 14px; color: #787b86; }
.nav-item { font-size: 13px; color: #d1d4dc; padding: 6px 10px 6px 22px; border-radius: 5px; cursor: pointer; }
.nav-item:hover { background: #1e222d; }
.nav-item.active { background: #2962ff; color: #fff; }
.nav-item.disabled { color: #555; cursor: default; }
.nav-item.disabled:hover { background: none; }
.nav-dot { color: #4caf50; font-size: 10px; }

/* 策略头部 */
#strat-header { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid #2a2e39; }
.strat-title { font-size: 15px; font-weight: 600; color: #fff; }

/* 流水线列 */
.pipeline { display: flex; gap: 12px; padding: 12px 14px; align-items: flex-start; overflow-x: auto; }
.stage-count { color: #4caf50; font-size: 12px; margin-left: 4px; }
.stage-body { display: flex; flex-direction: column; gap: 8px; }

/* 卡片 */
.gate-card { background: #1a1d28; border: 1px solid #2a2e39; border-radius: 8px; padding: 8px 10px; cursor: pointer; min-width: 180px; }
.gate-card:hover { border-color: #2962ff; }
.gc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.gc-sym { font-weight: 600; color: #fff; font-size: 13px; flex: 1; }
.gc-freq { color: #787b86; font-size: 11px; }
.gc-star { font-size: 15px; color: #555; cursor: pointer; }
.gc-star.on { color: #f5b301; }
.gc-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 2px; }
.gc-k { color: #787b86; } .gc-v { color: #d1d4dc; }
.gc-status { padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.st-open { background: #1b5e20; color: #a5d6a7; }
.st-close { background: #4a148c; color: #ce93d8; }
.st-above { background: #0d47a1; color: #90caf9; }
.st-below { background: #37474f; color: #b0bec5; }
.st-none { background: #2a2e39; color: #787b86; }
.gc-walk { color: #f5b301; font-size: 11px; }
.gc-pb { color: #4caf50; font-size: 11px; }

/* 我的关注 */
#fav-section { padding: 12px 14px; border-top: 1px solid #2a2e39; }
.fav-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.fav-chip { display: flex; align-items: center; gap: 6px; background: #1a1d28; border: 1px solid #2a2e39; border-radius: 16px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.fav-chip:hover { border-color: #2962ff; }
.fav-sym { font-weight: 600; color: #fff; } .fav-freq { color: #787b86; }
.fav-x { color: #787b86; font-size: 14px; padding: 0 2px; }
.fav-x:hover { color: #ef5350; }

/* 入场浮窗报警 */
#alert-stack { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; }
.alert-toast { width: 240px; background: #1a1d28; border: 1px solid #2962ff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.5); overflow: hidden; }
.at-head { display: flex; align-items: center; background: #2962ff; padding: 5px 10px; }
.at-title { flex: 1; color: #fff; font-weight: 600; font-size: 12px; }
.at-x { color: #fff; cursor: pointer; font-size: 16px; }
.at-body { padding: 8px 10px; font-size: 12px; color: #d1d4dc; }
.at-sym { font-weight: 600; color: #fff; font-size: 14px; }
.at-freq { color: #787b86; font-size: 11px; }
.at-row { color: #b2b5be; margin-top: 2px; }
.at-strat { color: #787b86; font-size: 11px; }
.at-actions { display: flex; gap: 6px; padding: 0 10px 10px; }
.at-btn { flex: 1; text-align: center; background: #2a2e39; color: #d1d4dc; border: none; border-radius: 5px; padding: 5px 0; font-size: 12px; cursor: pointer; text-decoration: none; }
.at-btn.primary { background: #2962ff; color: #fff; }
.pipe-loading { padding: 40px; text-align: center; color: #787b86; font-size: 14px; }

/* ── 今日入场记录面板 (④前端) ── */
.strat-body { display: flex; align-items: flex-start; }
.entry-log { width: 300px; flex: 0 0 300px; margin-left: 12px; background: #131722; border: 1px solid #2a2e39; border-radius: 8px; padding: 10px; align-self: flex-start; max-height: 70vh; overflow: auto; }
.el-title { font-size: 13px; color: #d1d4dc; font-weight: 600; margin-bottom: 8px; }
.el-empty { color: #5d6273; font-size: 12px; padding: 12px 0; text-align: center; }
.el-sec-h { font-size: 11px; color: #787b86; margin: 8px 0 4px; }
.el-sec-old { opacity: 0.5; }
.el-row { display: flex; gap: 6px; align-items: center; font-size: 12px; padding: 5px 6px; border-radius: 4px; cursor: pointer; }
.el-row:hover { background: #1e222d; }
.el-sym { color: #d1d4dc; font-weight: 600; min-width: 42px; }
.el-freq { color: #787b86; }
.el-price { color: #d1d4dc; margin-left: auto; }
.el-time { color: #787b86; }
.el-age { color: #5d6273; min-width: 38px; text-align: right; }
.gc-time { color: #787b86; font-size: 12px; }

/* P3: 入场列 / 前态徽标 / 历史提示 */
.pipe-stage.pipe-entry .stage-header { color: #e8b84b; }
.pipe-entry .stage-body { }
.entry-card { border-left: 2px solid #e8b84b; }
.entry-card .gc-age { opacity: .6; font-size: 11px; margin-left: auto; }
.el-age { opacity: .6; font-size: 11px; }
.gc-open-badge {
    display: inline-block; padding: 1px 6px; border-radius: 3px;
    background: #2e7d32; color: #eafaef; font-size: 11px; margin-left: 6px;
}
.el-hint { opacity: .5; font-size: 11px; font-weight: normal; }