/* 高股息精选（#page-dividend）。颜色一律走主题变量：海洋 / 象牙白 / 黑金三套都不用另写。 */
#page-dividend{--dv-gold:var(--accent);--dv-soft:rgba(var(--ink-rgb),.06)}
#page-dividend [hidden]{display:none!important}
.dv-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 16px}
.dv-kpi{padding:14px 16px;min-width:0}
.dv-kpi .cap{display:block;font-size:11px;color:var(--dim);letter-spacing:.06em}
.dv-kpi b{display:block;font:500 24px/1.35 var(--font-head);color:var(--text);margin-top:4px}
.dv-kpi .x{display:block;font-size:11px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dv-kpi.gold b{color:var(--dv-gold)}
.dv-kpi .warn{color:var(--up)}

.dv-bar{padding:14px 16px;margin-bottom:14px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end}
.dv-bar .grp{display:flex;flex-direction:column;gap:6px;min-width:0}
.dv-bar .grp>label,.dv-bar .lbl{font-size:11px;color:var(--dim);letter-spacing:.04em}
.dv-bar select,.dv-bar input[type=number],.dv-bar input[type=search]{height:32px;padding:0 10px;
  border:1px solid var(--line);background:transparent;color:var(--text);font:inherit;font-size:13px;
  border-radius:var(--r-ctl,6px)}
.dv-bar input[type=number]{width:84px}
.dv-bar input[type=search]{width:150px}
.dv-bar select{max-width:170px}
.dv-bar .checks{display:flex;gap:14px;align-items:center;height:32px;font-size:13px;color:var(--dim2)}
.dv-bar .checks label{display:inline-flex;gap:6px;align-items:center;cursor:pointer;white-space:nowrap}
.dv-bar .more{margin-left:auto}

.dv-tabs{display:flex;gap:4px;align-items:center;margin:4px 0 10px;flex-wrap:wrap}
.dv-tabs button{padding:7px 14px;font-size:13px;border:1px solid var(--line);background:transparent;
  color:var(--dim2);cursor:pointer;border-radius:var(--r-ctl,6px)}
.dv-tabs button.on{background:var(--accent);color:var(--on-solid,#fff);border-color:var(--accent)}
.dv-tabs .cnt{margin-left:6px;font-size:11px;opacity:.85}
.dv-tabs .sub{margin-left:auto;font-size:12px;color:var(--dim)}

.dv-wrap{overflow-x:auto}
.dv-table{width:100%;border-collapse:collapse;font-size:13px}
.dv-table th{text-align:right;cursor:default}
.dv-table th.l,.dv-table td.l{text-align:left}
.dv-table th[data-sort]{cursor:pointer}
.dv-table th[data-sort].on{color:var(--accent)}
.dv-table td{padding:10px 12px;border-bottom:1px solid var(--line-row);text-align:right;vertical-align:middle;white-space:nowrap}
.dv-table tr.r:hover{background:var(--dv-soft);cursor:pointer}
.dv-name b{font-weight:500;color:var(--text)}
.dv-name .c{color:var(--dim);font-size:11px;margin-left:6px}
.dv-name .ind{display:block;color:var(--dim);font-size:11px;margin-top:2px}
.dv-yield{font:500 15px var(--font-head);color:var(--dv-gold)}
.dv-mark{display:inline-block;font-size:10.5px;padding:1px 6px;margin:1px 3px 1px 0;border:1px solid var(--line);
  color:var(--dim2);border-radius:3px;white-space:nowrap}
.dv-mark.hard{border-color:var(--up);color:var(--up)}
.dv-mark.mine{border-color:var(--accent);color:var(--accent)}
.dv-table td.dv-flags{white-space:normal;text-align:left;min-width:180px;max-width:300px}
.dv-reason{display:block;font-size:11px;color:var(--up);margin-top:3px;white-space:normal}
.dv-star{background:none;border:0;font-size:17px;line-height:1;cursor:pointer;color:var(--dim);padding:4px}
.dv-star.on{color:var(--accent)}
.dv-empty{padding:40px 12px;text-align:center;color:var(--dim)}
.dv-spark{display:block}
.dv-note{font-size:12px;color:var(--dim);line-height:1.7;margin:10px 2px 0}
.dv-note b{color:var(--dim2);font-weight:500}

/* 我的持仓分红参考 */
.dv-mine{padding:14px 16px;margin-bottom:14px}
.dv-mine-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dv-mine-h .kick{font-size:12px;color:var(--dim);letter-spacing:.08em}
.dv-mine-h b{font:500 20px var(--font-head);color:var(--dv-gold)}
.dv-mine-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dv-mine-list span{font-size:12px;padding:4px 9px;border:1px solid var(--line);border-radius:4px;color:var(--dim2)}
.dv-mix{display:flex;height:8px;margin-top:10px;border-radius:4px;overflow:hidden;background:var(--dv-soft)}
.dv-mix i{display:block;height:100%}
.dv-mix-l{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:11px;color:var(--dim)}
.dv-mix-l em{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:0}

/* 分红日历 */
.dv-cal-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.dv-day{margin-bottom:14px}
.dv-day-h{font-size:12px;color:var(--dim);padding:6px 2px;border-bottom:1px solid var(--line);letter-spacing:.04em}
.dv-day-h.today{color:var(--accent)}
.dv-day.past{opacity:.6}
.dv-ev{display:grid;grid-template-columns:minmax(0,1.3fr) 90px minmax(0,1.4fr) 110px;gap:10px;align-items:center;
  padding:9px 2px;border-bottom:1px solid var(--line-row);font-size:13px;cursor:pointer}
.dv-ev:hover{background:var(--dv-soft)}
.dv-ev .k{color:var(--dim);font-size:12px}
.dv-ev .p{color:var(--dim2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-st{font-size:11px;padding:2px 7px;border-radius:3px;border:1px solid var(--line);justify-self:end;white-space:nowrap}
.dv-st.done{border-color:var(--accent);color:var(--accent)}
.dv-st.agm{color:var(--dim2)}
.dv-st.board{color:var(--dim);border-style:dashed}

/* 详情弹窗 */
.dv-d-head{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:12px}
.dv-d-head div{min-width:96px}
.dv-d-head .cap{display:block;font-size:11px;color:var(--dim)}
.dv-d-head b{font:500 18px var(--font-head);color:var(--text)}
.dv-d-head b.g{color:var(--dv-gold)}
.dv-d-sec{margin-top:16px}
.dv-d-sec h4{font-size:12px;font-weight:500;color:var(--dim);letter-spacing:.08em;margin:0 0 8px}
.dv-d-tb{width:100%;border-collapse:collapse;font-size:12.5px}
.dv-d-tb th,.dv-d-tb td{padding:6px 8px;border-bottom:1px solid var(--line-row);text-align:right;white-space:nowrap}
.dv-d-tb th:first-child,.dv-d-tb td:first-child{text-align:left}
.dv-d-tb td.l{text-align:left;white-space:normal}
.dv-d-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;font-size:12.5px}
.dv-d-grid div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed var(--line-row);padding:4px 0}
.dv-d-grid span:first-child{color:var(--dim)}
.dv-chart text{fill:var(--dim);font-size:10px}
.dv-chart .v{fill:var(--dim2)}
.dv-rules{width:100%;border-collapse:collapse;font-size:12px}
.dv-rules td{padding:6px 8px;border-bottom:1px solid var(--line-row);vertical-align:top}
.dv-rules td:first-child{white-space:nowrap}
.dv-foot{font-size:11.5px;color:var(--dim);margin:18px 2px 6px;line-height:1.7}

/* 手机：表格变卡片，只留股息率、连续年数和风险标签，点一下展开其余指标 */
@media (max-width:899px){
  .dv-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .dv-kpi{padding:11px 12px}
  .dv-kpi b{font-size:20px}
  .dv-kpi:last-child{grid-column:1/-1}
  .dv-bar{gap:10px 12px;padding:12px}
  .dv-bar .grp.opt{display:none}
  .dv-bar.open .grp.opt{display:flex}
  .dv-bar input[type=search]{width:100%}
  .dv-bar .grp.search{flex:1 1 100%}
  .dv-table thead{display:none}
  .dv-table,.dv-table tbody{display:block}
  .dv-table tr.r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 12px;padding:12px 4px;
    border-bottom:1px solid var(--line-row);align-items:center}
  .dv-table tr.r td{display:none;border:0;padding:0}
  .dv-table tr.r td.m-name,.dv-table tr.r td.m-y,.dv-table tr.r td.m-n{display:block}
  .dv-table tr.r td.m-flags{display:block;grid-column:1/-1;max-width:none;text-align:left}
  .dv-table tr.r td.m-y{text-align:right}
  .dv-table tr.r td.m-n{text-align:right;font-size:12px;color:var(--dim2)}
  .dv-table tr.r td.m-n b{display:block;font:500 15px var(--font-head);color:var(--text)}
  .dv-table tr.r td.m-n::after{content:'连续分红';display:block;font-size:10.5px;color:var(--dim)}
  .dv-table tr.r td.m-y::after{content:'近12月股息率';display:block;font-size:10.5px;color:var(--dim)}
  .dv-table tr.r.open td.m-more{display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 14px;font-size:12px;padding-top:8px;text-align:left}
  .dv-table tr.r td.m-more span{color:var(--dim)}
  .dv-table tr.r td.m-more .acts{grid-column:1/-1;display:flex;gap:10px;justify-content:flex-end}
  .dv-ev{grid-template-columns:minmax(0,1fr) auto;gap:3px 10px}
  .dv-ev .dv-st{order:1}
  .dv-ev .k{order:2;grid-column:1/-1}
  .dv-ev .p{order:3;grid-column:1/-1}
  .dv-d-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dv-tabs .sub{flex-basis:100%;margin-left:0}
}
@media (min-width:900px){ .dv-table td.m-more{display:none} .dv-bar .more{display:none} }