:root{
  --bg:#0c0f16; --panel:#121821; --panel2:#182030; --border:#222c3a;
  --text:#e6ebf2; --muted:#8b97a7; --muted2:#5b6675;
  --accent:#f0b90b; --accent2:#f0b90b;
  --up:#ff4d4f; --down:#21ba72; --blue:#3b82f6; --blue2:#7ab0ff;
  --radius:12px; --shadow:0 10px 30px rgba(0,0,0,.35);
  font-synthesis:none;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;height:100vh}
button,input,select{font-family:inherit}
a{color:var(--accent);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#2a3647;border-radius:5px}

/* 顶栏 */
header{height:58px;flex:0 0 58px;display:flex;align-items:center;gap:14px;padding:0 20px;background:var(--panel);border-bottom:1px solid var(--border)}
.logo{font-weight:800;font-size:17px;letter-spacing:.5px}
.logo .d{color:var(--accent)}
.tag{font-size:11px;color:var(--muted);border:1px solid var(--border);padding:2px 8px;border-radius:20px}
.spacer{flex:1}
.acct-select{background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:9px;padding:7px 10px;font-size:13px;outline:none}
.capital-chip{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:6px 12px}
.capital-chip label{font-size:12px;color:var(--muted)}
.capital-chip input{width:120px;background:transparent;border:none;color:var(--text);font-size:15px;font-weight:700;text-align:right;outline:none}
.capital-chip input:focus{color:var(--accent)}

.body{flex:1;display:flex;min-height:0}
nav{width:188px;flex:0 0 188px;background:var(--panel);border-right:1px solid var(--border);padding:14px 10px;display:flex;flex-direction:column;gap:4px;overflow-y:auto}
nav .navitem{padding:11px 14px;border-radius:9px;color:var(--muted);cursor:pointer;font-size:14px;display:flex;align-items:center;gap:10px;transition:.15s;user-select:none}
nav .navitem:hover{background:var(--panel2);color:var(--text)}
nav .navitem.active{background:linear-gradient(90deg,rgba(240,185,11,.16),rgba(240,185,11,.02));color:var(--accent);font-weight:600}
nav .ic{width:18px;text-align:center;opacity:.85}
nav .navfoot{margin-top:auto;font-size:11px;color:var(--muted2);padding:10px 12px;line-height:1.6}

main{flex:1;overflow-y:auto;padding:22px 28px 40px}
.view{display:none;animation:fade .25s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

h1{font-size:22px;margin-bottom:4px}
h2{font-size:16px;margin:22px 0 12px;display:flex;align-items:center;gap:8px}
.sub{color:var(--muted);font-size:13px;margin-bottom:18px}
.bar-accent{width:4px;height:16px;background:var(--accent);border-radius:2px;display:inline-block}

.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:15px 17px}
.card .k{font-size:12px;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.card .v{font-size:25px;font-weight:700}
.card .d{font-size:12px;margin-top:6px;color:var(--muted)}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.panel .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.panel .ph .t{font-weight:600;font-size:15px}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 11px;text-align:right;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:500;font-size:12px;text-align:right}
th:first-child,td:first-child{text-align:left}
tbody tr:hover{background:var(--panel2)}
.date-sep td{border-bottom:2px solid var(--accent)!important;padding:0!important;height:0}
.code{font-family:ui-monospace,Menlo,monospace;color:var(--muted);font-size:12px}
.pill{padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600}
.pill.hold{background:rgba(59,130,246,.15);color:#7ab0ff}
.pill.done{background:rgba(33,186,114,.15);color:#5fe0a3}
.pill.tp{background:rgba(255,77,79,.15);color:#ff8a8c}
.pill.sl{background:rgba(33,186,114,.15);color:#5fe0a3}
.pill.mkt{background:rgba(240,185,11,.15);color:var(--accent)}
.pill.def{background:rgba(139,151,167,.15);color:var(--muted)}
.pill.man{background:rgba(240,185,11,.15);color:var(--accent)}
.stockcell{cursor:pointer;font-weight:600}
.stockcell:hover{color:var(--accent);text-decoration:underline}
.bdate{padding:2px 8px;border-radius:6px;font-size:12px;display:inline-block;background:var(--panel2)}

.btn{background:var(--accent);color:#1a1300;border:none;padding:9px 16px;border-radius:8px;font-weight:700;cursor:pointer;font-size:13px;transition:.15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text);font-weight:500}
.btn.ghost:hover{background:var(--panel2)}
.btn.sm{padding:6px 11px;font-size:12px}
.btn.danger{border-color:var(--down);color:var(--down);background:transparent}

.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.tab{padding:10px 16px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;font-size:14px}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tabpane{display:none} .tabpane.active{display:block;animation:fade .2s}

#view-settings .panel{max-width:760px}
.field{display:grid;grid-template-columns:1fr auto;align-items:center;padding:13px 0;border-bottom:1px solid var(--border);gap:14px}
.field:last-child{border-bottom:none}
.field .fl{display:flex;flex-direction:column;gap:2px;min-width:0}
.field .fl .ft{font-size:14px}
.field .fl .fd{font-size:12px;color:var(--muted)}
.field input,.field select{justify-self:end;width:140px;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:8px 10px;text-align:right;outline:none;font-size:14px}
.field input:focus,.field select:focus{border-color:var(--accent)}
@media(max-width:600px){.field{grid-template-columns:1fr}.field input,.field select{justify-self:stretch;width:100%;margin-top:6px}}

.mask{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.mask.show{display:flex}
.modal{width:480px;max-width:94vw;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:var(--shadow);max-height:90vh;overflow-y:auto}
.modal h3{margin-bottom:4px;font-size:17px}
.modal .ms{color:var(--muted);font-size:12px;margin-bottom:16px}
.formrow{margin-bottom:13px;position:relative}
.formrow label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.formrow input,.formrow select{width:100%;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 11px;outline:none;font-size:14px}
.formrow input:focus,.formrow select:focus{border-color:var(--accent)}
.formrow .hint{font-size:11px;color:var(--muted2);margin-top:4px}
.suggest{background:var(--panel2);border:1px solid var(--border);border-radius:8px;margin-top:4px;max-height:170px;overflow-y:auto;display:none;position:absolute;left:0;right:0;z-index:5}
.suggest div{padding:8px 11px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:10px}
.suggest div:hover,.suggest div.active{background:var(--border);color:var(--accent)}
.mactions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

.svgchart{width:100%;display:block;height:auto}
.line-chart{max-height:240px}
.bar-chart{max-height:80px}
.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
.empty{color:var(--muted2);text-align:center;padding:24px;font-size:13px}
.up{color:var(--up)} .down{color:var(--down)}

/* 悬停行情小窗：侧置，避开股票名 */
#qtip{position:fixed;z-index:80;display:none;width:280px;background:#0f141d;border:1px solid var(--border);border-radius:10px;padding:13px 15px;box-shadow:var(--shadow);pointer-events:none;font-size:12px;line-height:1.7}
#qtip .qn{font-weight:700;font-size:14px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline}
#qtip .qn .qc{color:var(--muted);font-size:12px;font-weight:400}
#qtip .qp{font-size:22px;font-weight:800}
#qtip .qp small{font-size:13px;font-weight:600;margin-left:8px}
#qtip .qg{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;margin-top:8px;color:var(--muted)}
#qtip .qg div{display:flex;justify-content:space-between}
#qtip .qg div b{color:var(--text);font-weight:600}
#qtip .qnote{color:var(--muted2);font-size:11px;margin-top:8px;border-top:1px solid var(--border);padding-top:6px}

/* ===== 悬停行情大卡（侧置浮层，不遮挡股票名） ===== */
.dtip{position:fixed;z-index:95;display:none;width:420px;max-width:94vw;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px 10px;box-shadow:var(--shadow);pointer-events:auto}
.dtip.show{display:block;animation:fade .18s ease}
.dtip .dtl-head{padding-bottom:8px;border-bottom:1px solid var(--border);cursor:pointer}
.dtip .dtl-head:hover .dtl-name{color:var(--accent)}
.dtip .dtl-name{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:700;margin-bottom:6px}
.dtip .dtl-name .dtl-code{color:var(--muted);font-size:12px;font-weight:400;font-family:ui-monospace,Menlo,monospace}
.dtip .dtl-row-price{display:flex;align-items:baseline;gap:12px;margin:6px 0 9px}
.dtip .dtl-p{font-size:24px;font-weight:800;line-height:1}
.dtip .dtl-chg{font-size:13px;font-weight:700}
.dtip .dtl-chgamt{font-size:12px;font-weight:600;color:var(--muted)}
.dtip .dtl-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;color:var(--muted);font-size:12px}
.dtip .dtl-grid div{display:flex;justify-content:space-between}
.dtip .dtl-grid div b{color:var(--text);font-weight:600}
.dtip .dtl-section{margin-top:11px}
.dtip .dtl-stitle{font-size:11px;color:var(--muted);margin-bottom:4px}
.dtip .dtl-rtag{color:var(--muted2);font-size:10px;margin-left:4px}
.dtip .dtl-foot{font-size:10px;color:var(--muted2);margin-top:6px;text-align:center}
.dtip .dtl-loading{padding:22px 0;text-align:center;color:var(--muted2);font-size:12px}
.dtip svg{display:block;width:100%;height:auto}

/* ===== 分时图相关 class（与 drawMin1d 配套） ===== */
.dtl-min-svg{font-family:ui-monospace,Menlo,monospace}
.dtl-min-svg .axgrid line{stroke:#1c2633;stroke-width:.5}
.dtl-min-svg .axzero{stroke:#5b6675;stroke-dasharray:4 3;stroke-width:1}
.dtl-min-svg .priceLine{fill:none;stroke:#ff4d4f;stroke-width:1.4}
.dtl-min-svg .yclose{stroke:#5b6675;stroke-dasharray:3 3}
.dtl-min-svg .fill{opacity:.15}
.dtl-min-svg .labL{fill:#8b97a7;font-size:10px;text-anchor:end}
.dtl-min-svg .labR{fill:#3b82f6;font-size:9px;text-anchor:start}
.dtl-min-svg .labT{fill:#5b6675;font-size:10px;text-anchor:middle}

.req h3{margin:18px 0 8px;font-size:15px;color:var(--accent)}
.req p,.req li{color:#c4ccd6;font-size:13.5px;line-height:1.75}
.req ul,.req ol{padding-left:20px;margin:6px 0}
.req .note{background:var(--panel2);border-left:3px solid var(--accent);padding:10px 14px;border-radius:0 8px 8px 0;margin:10px 0;font-size:13px;color:var(--muted)}
.req code{background:var(--panel2);padding:1px 6px;border-radius:5px;font-family:ui-monospace,Menlo,monospace;color:var(--accent);font-size:12px}
.badge{display:inline-block;background:var(--panel2);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-size:11px;color:var(--muted);margin-right:6px}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);padding:11px 18px;border-radius:10px;box-shadow:var(--shadow);z-index:90;font-size:13px;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}

.menu-btn{display:none;background:var(--panel2);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 11px;font-size:16px;cursor:pointer}
@media(max-width:860px){
  header{flex-wrap:wrap;height:auto;padding:10px 14px;gap:10px}
  .tag{display:none}
  .body{flex-direction:column}
  nav{width:100%;flex:0 0 auto;flex-direction:row;overflow-x:auto;padding:8px;gap:4px}
  nav .navitem{flex:0 0 auto;padding:9px 13px}
  nav .navfoot{display:none}
  main{padding:14px}
  .g4,.g3,.g2{grid-template-columns:1fr}
  .capital-chip input{width:84px}
  table{font-size:12px}
  th,td{padding:8px 7px}
}