:root { --bg:#faf9f6; --panel:#fff; --panel2:#f0efeb; --border:#e4e2db; --text:#292824; --muted:#828078; --accent:#b45a3c; --accent2:#697f75; --up:#33836a; --down:#c05762; --shadow:none; --sidebar:#252622; }
[data-theme="dark"] { --bg:#20211f; --panel:#252724; --panel2:#2d302c; --border:#3b3e37; --text:#eae9e3; --muted:#aaa99e; --accent:#da957b; --accent2:#8ba696; --up:#83b99c; --down:#db8893; --sidebar:#191b18; }
[data-theme="cyber"] { --bg:#171f22; --panel:#1c282e; --panel2:#26343b; --border:#394950; --text:#e2ecea; --muted:#a0b7b9; --accent:#b6d8cc; --accent2:#e5bc82; --up:#83c7ab; --down:#de929e; --sidebar:#11191d; }
* { letter-spacing:0; }
body { font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
button,select,input { font-family:inherit; }
.app { display:grid; grid-template-columns:204px minmax(0,1fr); grid-template-rows:1fr; min-height:100vh; }
header { position:sticky; top:0; height:100vh; min-height:560px; padding:32px 20px 20px; display:flex; flex-direction:column; align-items:stretch; gap:0; background:var(--sidebar); color:#ecebe4; border:0; backdrop-filter:none; z-index:5; }
.brand { gap:9px; font-family:Georgia,"Times New Roman",serif; font-size:28px; font-weight:400; align-items:center; }
.brand small { display:block; font:10px "Segoe UI",sans-serif; color:#989c90; margin-top:5px; }
.logo { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:30px; height:36px; background:transparent; color:#d79175; font:bold 34px Georgia,serif; border-radius:0; box-shadow:none; }
.toolbar { width:100%; margin:0; display:flex; flex-direction:column; align-items:stretch; flex:1; gap:0; }
.nav-caption { font:9px var(--mono); color:#95998d; margin:52px 8px 14px; }
.seg { display:flex; flex-direction:column; padding:0; gap:6px; border:0; background:transparent; }
.seg button { display:flex; align-items:center; height:43px; gap:10px; padding:0 12px; color:#bfc2b8; font-size:13px; border-radius:5px; text-align:left; }
.seg button.active { color:#faf9f5; background:#3b3d35; box-shadow:none; }
.seg button:hover { background:#33352e; }
.exchange-mark { display:grid; place-items:center; width:19px; height:19px; font:12px var(--mono); border:1px solid #5a5d52; border-radius:4px; color:#c4c7b8; }
.nav-arrow { margin-left:auto; color:#919785; font-size:15px; opacity:0; } .seg button.active .nav-arrow { opacity:1; }
.action-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:31px; padding:0 10px; border:1px solid var(--border); border-radius:5px; background:transparent; color:var(--text); font-size:11px; font-weight:500; cursor:pointer; white-space:nowrap; }
.action-btn:hover { background:var(--panel2); } .action-btn:disabled { opacity:.55; cursor:wait; }
#refreshBtn { margin-top:24px; height:37px; color:#f5ede4; border:1px solid #a36149; background:#a36149; font-size:12px; }
#refreshBtn:hover { background:#b36b50; }
.sidebar-note { margin-top:32px; border-top:1px solid #404338; padding:22px 8px; color:#a2a696; font-size:10px; }
.sidebar-note > div { color:#dedfd4; font:12px var(--mono); margin:12px 0; } .sidebar-note i { color:#838b77; font-style:normal; margin:0 5px; } .sidebar-note small { font-size:9px; }
.sidebar-account { display:flex; gap:10px; align-items:center; margin-top:auto; padding:18px 0 14px; border-top:1px solid #404338; font-size:11px; color:#dedfd4; }
.sidebar-account small { display:block; color:#939887; margin-top:4px; font-size:9px; }
.avatar { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:#44473c; font:12px Georgia,serif; }
.sidebar-actions { display:flex; gap:8px; } .sidebar-actions .icon-btn { border-color:#41453a; color:#b6bdac; background:transparent; }
.icon-btn { display:inline-grid; place-items:center; width:31px; height:31px; background:transparent; border:1px solid var(--border); border-radius:5px; color:var(--muted); }
.main { max-width:1720px; margin:0 auto; padding:38px 38px 28px; min-width:0; width:100%; }
.workspace-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:30px; }
.eyebrow { color:var(--muted); font-size:10px; } .eyebrow > span { margin:0 10px; opacity:.5; }
h1 { margin:14px 0 0; font-size:29px; font-weight:500; font-family:Georgia,"Songti SC","SimSun",serif; }
.heading-dot { color:var(--accent); font-size:34px; }
.schedule { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:7px; color:var(--muted); font-size:10px; width:165px; }
.schedule small { width:100%; text-align:right; color:var(--muted); font-size:9px; margin-top:1px; } #nextScan { font:10px var(--mono); color:var(--text); }
.live-dot { width:5px; height:5px; background:var(--up); border-radius:50%; }
.stats { display:flex; justify-content:flex-start; gap:38px; margin:0; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stat { background:transparent; border:0; border-radius:0; padding:0; display:flex; align-items:baseline; gap:12px; min-width:0; }
.stat span { font-size:10px; white-space:nowrap; } .stat b { font:15px var(--mono); margin:0; white-space:nowrap; }
.scan-health { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:32px; padding:8px 0; color:var(--muted); font:9px var(--mono); }
.scan-health[data-error="true"] { color:var(--down); }
progress { width:65px; height:2px; accent-color:var(--accent); flex-shrink:0; }
.filter-bar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; margin:17px 0 27px; }
.filter-bar label { margin:0; font-size:9px; color:var(--muted); min-width:90px; flex:1; font-weight:400; }
.filter-bar .search-field { flex:1.6; min-width:135px; }
.filter-bar input[type="search"], select { margin-top:7px; width:100%; height:32px; border:1px solid var(--border); border-radius:5px; background:transparent; color:var(--text); padding:0 8px; font-size:11px; }
.filter-bar input:focus,select:focus { border-color:var(--accent); box-shadow:none; outline:none; }
.filter-bar .check-field { display:flex; align-items:center; gap:5px; min-width:auto; flex:0 0 auto; height:32px; }
input[type="checkbox"] { height:12px; width:12px; padding:0; margin:0; accent-color:var(--accent); box-shadow:none; }
.layout { display:grid; grid-template-columns:300px minmax(0,1fr); gap:27px; }
.panel { background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; min-width:0; }
.market-list { padding-right:22px; border-right:1px solid var(--border); }
.section-caption { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--text); padding:0 0 16px; font-weight:500; }
.section-caption span { color:var(--muted); font:9px var(--mono); }
.list-head,.row { display:grid; grid-template-columns:18px minmax(66px,1fr) 48px 86px; gap:4px; padding:0 6px; align-items:center; }
.list-head { border-top:1px solid var(--border); background:transparent; color:var(--muted); font-size:8px; min-height:30px; }
.row { min-height:62px; border-bottom:1px solid var(--border); cursor:pointer; }
.rows { max-height:calc(100vh - 370px); min-height:210px; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.row.active { background:color-mix(in srgb,var(--accent) 7%,transparent); box-shadow:inset 2px 0 0 var(--accent); }
.row:hover { background:var(--panel2); }
.star { width:18px; height:27px; padding:0; background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:15px; }
.star[aria-pressed="true"] { color:var(--accent); }
.sym { font-size:11px; font-weight:500; min-width:0; } .sym small { display:block; color:var(--muted); font:8px var(--mono); padding-top:5px; }
.change { font:9px var(--mono); text-align:right; } .positive { color:var(--up); } .negative { color:var(--down); }
.price { font:10px var(--mono); } .price small { display:block; font-size:8px; color:var(--muted); padding-top:5px; }
.detail { padding:0; } .detail-top { gap:12px; }
.detail h2 { font-size:19px; font-weight:500; } .detail h2 small { font-size:10px; }
.quote-summary { font:21px var(--mono); margin:9px 0 0; } .quote-summary > span { font-size:10px; margin-left:12px; }
.detail-meta { margin-top:12px; gap:5px; } .pill,.risk { border-radius:3px; background:var(--panel2); font-size:9px; padding:3px 6px; }
.detail-top > .kpi { border:0; background:transparent; padding:0; min-width:55px!important; text-align:right; } .detail-top > .kpi span { color:var(--muted); font-size:9px; } .detail-top > .kpi b { color:var(--accent); font:27px Georgia,serif!important; }
.kpis { margin:18px 0 14px; padding:12px 0; gap:0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); grid-template-columns:repeat(4,minmax(0,1fr)); }
.kpis .kpi { background:transparent; padding:0; border:0; border-radius:0; } .kpis .kpi span { font-size:9px; } .kpis .kpi b { margin-top:6px; font:12px var(--mono); }
.chart-tools { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.chart-tools > div { display:flex; align-items:center; gap:4px; }
.time-tabs { margin:0; gap:0!important; border-bottom:0; }
.time-tabs button { border:0; border-radius:4px; color:var(--muted); font-size:10px; background:transparent; padding:7px 9px; }
.time-tabs button.active { background:var(--panel2); color:var(--text); }
.indicator-controls { display:flex; align-items:center; gap:15px; margin:4px 0 12px; }
.indicator-controls label { display:flex; align-items:center; gap:5px; margin:0; font-size:9px; font-weight:400; }
.chart-wrap { position:relative; height:430px; background:var(--panel); border:1px solid var(--border); border-radius:5px; overflow:hidden; }
.chart-legend { left:4px; max-width:calc(100% - 85px); white-space:normal; flex-wrap:wrap; gap:3px 8px; padding:3px 5px; border:0; background:var(--panel); font-size:9px; border-radius:0; }
.chart-legend .ma-values { display:flex; gap:8px; width:100%; } .chart-legend .ma-values > span { white-space:nowrap; }
.indicator-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-top:17px; }
.indicator-details > div { padding-top:12px; border-top:1px solid var(--border); font-size:9px; line-height:2; color:var(--muted); }
.indicator-details strong { display:block; font-size:10px; font-weight:500; color:var(--text); margin-bottom:3px; }
.chart-foot { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:8px; margin-top:17px; } .chart-foot a { color:var(--muted); }
.chart-error { display:flex; gap:12px; justify-content:space-between; align-items:center; color:var(--down); font-size:12px; padding:14px; background:var(--panel2); margin-bottom:12px; }
.chart-panel:fullscreen { padding:28px; overflow:auto; background:var(--bg); } .chart-panel:fullscreen .chart-wrap { height:65vh; }
.empty,.loading { font-size:12px; padding:50px 12px; }
button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.main { padding-top:28px; }
.workspace-heading { margin-bottom:22px; }
.scan-health { font:11px Inter,"Segoe UI",sans-serif; }
.eyebrow,.stat span,.filter-bar label,.section-caption span { font-size:11px; }
.stat b { font-size:14px; }
.filter-bar input[type="search"],select,.action-btn { font-size:12px; }
.list-head { font-size:10px; }
.sym { font-size:13px; } .sym small { font-size:10px; }
.change,.price { font-size:11px; } .price small { font-size:9px; }
.pill,.risk,.indicator-controls label,.kpis .kpi span { font-size:11px; }
.time-tabs button { font-size:12px; }
.indicator-details > div { font-size:11px; } .indicator-details strong { font-size:12px; }
.chart-foot { font-size:10px; }
.nav-caption,.sidebar-note,.sidebar-account small { font-size:11px; }
#loginScreen { background:var(--bg); } .login { box-shadow:0 8px 50px #29282407; border-color:var(--border); padding:42px; border-radius:6px; } .login h1 { font-size:29px; } .login p { font-size:12px; margin-top:12px; } .login .primary { background:#a36149; }
@media(min-width:1600px) { .main { padding:42px 50px; } .layout { grid-template-columns:340px minmax(0,1fr); gap:36px; } .chart-wrap { height:510px; } .row { min-height:67px; } .sym { font-size:12px; } }
@media(max-width:1200px) { .app { grid-template-columns:170px minmax(0,1fr); } header { padding:26px 13px 18px; } .main { padding:30px 22px; } .brand { font-size:25px; } .layout { grid-template-columns:260px minmax(0,1fr); gap:18px; } .market-list { padding-right:13px; } .stats { gap:21px; } .stat { gap:7px; } .stat b { font-size:12px; } .list-head,.row { grid-template-columns:17px minmax(55px,1fr) 44px 75px; } }
@media(max-width:1000px) and (min-width:761px) { .app { grid-template-columns:150px minmax(0,1fr); } .layout { grid-template-columns:1fr; } .market-list { padding:0; border:0; } .rows { max-height:220px; min-height:0; } .main { padding:25px 20px; } .stats { gap:14px; flex-wrap:wrap; } .sidebar-note { padding:18px 0; } .sidebar-note i { margin:0; } }
@media(max-width:760px) { .app { display:block; } header { position:relative; height:auto; min-height:0; padding:16px; gap:15px; } .brand { font-size:25px; } .brand small { display:none; } .logo { font-size:29px; height:29px; width:24px; } .toolbar { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px; } .nav-caption,.sidebar-note,.sidebar-account { display:none; } .sidebar-actions { position:absolute; right:16px; top:16px; } .seg { flex-direction:row; gap:4px; } .seg button { height:33px; padding:0 10px; font-size:11px; gap:5px; } .exchange-mark,.nav-arrow { display:none; } #refreshBtn { margin:0 0 0 auto; height:33px; font-size:10px; } .main { padding:23px 17px; } .workspace-heading { margin-bottom:21px; } h1 { font-size:26px; margin-top:10px; } .schedule { width:128px; font-size:9px; } .eyebrow { font-size:9px; } .stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px; padding:14px 0; } .stat { justify-content:space-between; gap:6px; } .stat b { font-size:12px; } .stat span { font-size:9px; } .scan-health { font-size:8px; gap:10px; } progress { width:35px; } .filter-bar { margin:14px 0 24px; gap:12px 9px; } .filter-bar label { min-width:90px; } .filter-bar .search-field { min-width:155px; } .layout { grid-template-columns:1fr; gap:26px; } .market-list { padding:0; border:0; } .rows { max-height:246px; min-height:0; } .list-head,.row { grid-template-columns:22px minmax(82px,1fr) 57px 97px; gap:6px; } .sym { font-size:12px; } .row { min-height:61px; } .change,.price { font-size:10px; } .chart-wrap { height:440px; } .indicator-details { gap:9px; } .chart-foot { flex-wrap:wrap; } .chart-legend { font-size:8px; } }