.di-root{--di-ink:#293850;--di-muted:#66748a;--di-line:#d3dce9;--di-soft:#edf3fa;--di-card:#fff;--di-accent:#336ca0;border:1px solid var(--di-line);border-radius:20px;background:linear-gradient(130deg,#edf4fc,#f9fbff);padding:21px;margin:20px 0;color:var(--di-ink)}
.di-header{display:flex;align-items:center;justify-content:space-between;gap:18px}
.di-header>div:first-child{min-width:0;flex:1}
.di-kicker{font-size:10px;letter-spacing:.1em;font-weight:850;color:var(--di-accent)}
.di-header h2{font-size:clamp(21px,2.7vw,29px);margin:9px 0;color:var(--di-ink)}
.di-header p,.di-disclaimer{font-size:11px;line-height:1.85;color:var(--di-muted)}
.di-count{min-width:142px;display:grid;gap:5px;text-align:center;padding:17px;border-radius:13px;background:#deeafc;border:1px solid #b8cfee}
.di-count strong{font-size:28px;color:#376fa5}.di-count span{font-size:11px;color:#617d9c}
.di-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}
.di-overview>div{background:var(--di-card);border:1px solid var(--di-line);border-radius:11px;display:grid;text-align:center;gap:7px;padding:13px}
.di-overview b{font-size:23px;font-variant-numeric:tabular-nums;color:var(--di-ink)}
.di-overview span{font-size:10px;line-height:1.6;color:var(--di-muted)}
.di-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0}
.di-tools span{font-size:11px;color:var(--di-muted);margin-right:7px}
.di-tools button{border:1px solid var(--di-line);color:var(--di-ink);background:var(--di-card);border-radius:9px;font:700 11px/1.5 inherit;cursor:pointer;padding:9px 12px}
.di-tools button.active{background:var(--di-accent);color:white;border-color:var(--di-accent)}
.di-items{display:grid;gap:9px}
.di-item{display:flex;align-items:center;gap:13px;border:1px solid var(--di-line);background:var(--di-card);border-radius:12px;padding:13px}
.di-rank{font-size:11px;font-weight:750;color:var(--di-muted);min-width:15px}
.di-char{width:54px;height:54px;display:grid;place-items:center;background:var(--di-soft);border-radius:10px;font:700 28px/1.5 "Microsoft YaHei",sans-serif;color:var(--di-ink);flex-shrink:0}
.di-info{min-width:0;flex:1;display:grid;gap:7px}
.di-info>div:first-child{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.di-info strong{font-size:12px;color:var(--di-ink)}
.di-info span,.di-info small{font-size:10px;color:var(--di-muted);line-height:1.6}
.di-bar{height:7px;background:var(--di-soft);border-radius:10px;overflow:hidden}
.di-bar i{display:block;height:100%;background:linear-gradient(90deg,#407cbd,#8caee2);border-radius:10px}
.di-item button{font-size:11px;white-space:nowrap}
.di-hint,.di-empty,.di-notice{font-size:11px;line-height:1.8;color:var(--di-muted)}
.di-empty{padding:18px;background:var(--di-card);border:1px solid var(--di-line);border-radius:12px}
.di-empty strong{font-size:13px;color:var(--di-ink)}
.di-notice{min-height:12px;color:var(--di-accent)}
.di-root :is(button,select):focus-visible{outline:3px solid #679bda;outline-offset:3px}
body.dark .di-root{--di-ink:#edf4ff;--di-muted:#bfcee4;--di-line:#53647d;--di-soft:#303f58;--di-card:#28374e;--di-accent:#8eb7f4;background:linear-gradient(125deg,#293b56,#243249)}
body.dark .di-count{background:#334a69;border-color:#5e7c9f}
body.dark .di-count strong,body.dark .di-count span{color:#d9e9ff}
body.dark .di-tools button.active{background:#4d74b2;border-color:#4d74b2;color:white}
@media(max-width:720px){.di-header{flex-direction:column;align-items:stretch}.di-count{min-width:0}.di-item{flex-wrap:wrap}.di-info{flex-basis:calc(100% - 100px)}.di-item button{margin-left:auto}}
@media(max-width:520px){.di-root{padding:14px}.di-overview{gap:6px}.di-overview>div{padding:10px 6px}.di-overview b{font-size:19px}.di-item button{width:100%}}