:root{--bg:#081729;--panel:#132a44;--line:#345777;--mute:#a9c6d9;--white:#f1f7ff;--blue:#39bdde}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font-family:"Malgun Gothic",system-ui,Arial,sans-serif;line-height:1.45}
button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #8ce6ff;outline-offset:2px}
a{color:#96e5f1;text-decoration:none}
.top{display:flex;justify-content:space-between;gap:20px;align-items:center;background:#0d2239;border-bottom:1px solid #315470;padding:15px max(20px,calc((100vw - 1320px)/2))}
.brand{font-size:27px;font-weight:950;letter-spacing:-1px;line-height:1}.brand span{color:#58d6ed}
.brand small{display:block;font-size:10px;font-weight:800;color:#a2c2d2;letter-spacing:1.3px;margin-top:5px}
.top nav{display:flex;gap:18px;font-size:13px;font-weight:800}
.wrap{max-width:1320px;margin:20px auto;padding:0 16px 32px}
.hero{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid #4f7898;background:linear-gradient(105deg,#113250,#1b4264);padding:22px 25px;border-radius:14px}
.eyebrow{color:#85eff0;font-size:11px;font-weight:900;letter-spacing:1.1px;margin:0 0 8px}
h1{font-size:29px;margin:0 0 9px;letter-spacing:-1px}h1 strong{color:#ffdb8f}
.hero p:last-child{color:#b8d6e6;font-size:13px;margin:0}
.limit{min-width:100px;padding:9px 15px;border-radius:9px;background:#0e2943;border:1px solid #557895;text-align:center}
.limit strong{font-size:38px;color:#ffda85;line-height:1.1;display:block}.limit span{font-size:10px;color:#b4d1df}
.notice{border:1px solid #776a4b;background:#2c3240;color:#f4dfb5;font-size:12px;line-height:1.7;padding:11px 14px;border-radius:8px;margin:13px 0}
.notice.good{background:#183b40;border-color:#3d928c;color:#b5ebe3}
.mainTabs{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:13px 0}
.mainTabs button,.mainTabs a{border:1px solid #527798;background:#193e5d;color:#dcefff;border-radius:7px;padding:10px 15px;font-size:13px;font-weight:850}
.mainTabs button.active{background:#5fcbe4;color:#08283a;border-color:#98ebfa}
.mainTabs a.historyLink{margin-left:auto;border-color:#768aa8;background:#293b56}
.filter{border:1px solid var(--line);background:#102a45;border-radius:10px;padding:12px 14px}
.dateBtns{display:flex;gap:8px;flex-wrap:wrap}.dateBtns button{background:#244565;border:1px solid #507895;color:#e1f3ff;padding:9px 15px;border-radius:7px;font-weight:850}
.dateBtns button.active{background:#e2bc61;color:#1b2a3a;border-color:#ffe4a9}
.selectors{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;margin-top:12px}
.selectors label{font-size:11px;font-weight:800;color:#aec8da;display:flex;flex-direction:column;gap:5px;min-width:155px;flex:1}
select{width:100%;color:#12334e;background:#f5f9ff;border:1px solid #a9bdc9;border-radius:6px;padding:8px 9px;height:39px}
.viewChoice{display:flex;gap:5px}.viewChoice button{border:1px solid #527691;border-radius:6px;background:#203b56;color:#c4deed;padding:8px 12px;font-size:12px;font-weight:900}
.viewChoice button.active{color:#06243d;background:#65c8e5;border-color:#87def2}
.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.summary>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;border:1px solid #2c536e;background:#132c48;padding:11px 15px;border-radius:9px}
.summary b{font-size:24px;font-variant-numeric:tabular-nums;color:#fcd98b}.summary span{font-size:11px;color:#adc9db}
.legendPanel{background:#102940;border:1px solid #315674;padding:13px 15px;border-radius:10px;margin-bottom:13px}
.legendHead{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.legendHead b{font-size:13px}.legendHead small{color:#9fbfd1;font-size:11px}
.rankLegend,.tierLegend{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:9px}
.rankLegend span{display:inline-flex;align-items:center;gap:6px;border:1px solid #355777;background:#17344d;border-radius:5px;padding:5px 8px;font-size:11px}
.tone{width:12px;height:12px;display:inline-block;border-radius:1px}.gold{background:linear-gradient(180deg,#fff0ad,#d49b32)}.silver{background:linear-gradient(180deg,#fff,#8395ab)}.bronze{background:linear-gradient(180deg,#f6cc8c,#a66b35)}.blue{background:#4a8ee9}.cyan{background:#39c2d8}.green{background:#45ba88}.yellow{background:#e6c857}.slate{background:#91a8bc}
.tierLegend{border-top:1px dashed #416784;padding-top:10px}.tierLegend b{font-size:11px;color:#bfdaea;margin-right:3px}.tier{font-size:10px;color:#071b2b;border-radius:0;padding:3px 7px;font-weight:900}
.t100{background:#9396aa}.t200{background:#8f90c9}.t300{background:#76a5eb}.t400{background:#55c9d1}.t500{background:#61c993}.t600{background:#e0d071}.t700{background:#e4ad5d}.t800{background:#f2c076}
.layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(275px,.75fr);gap:13px;align-items:start}
.details{background:#132a44;border:1px solid #38627f;border-radius:10px;padding:16px;position:sticky;top:13px;min-height:180px}
.details h2{font-size:17px;margin:0 0 11px}.details p{font-size:12px;color:#b1cfe0}
.sourceMark{margin-top:15px;padding-top:11px;border-top:1px solid #3e5e76;font-size:11px;line-height:1.8;color:#d4ba81}
.raceCard{background:#132a44;border:1px solid #345977;border-radius:11px;margin-bottom:12px;overflow:hidden}
.raceHead{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid #31536e;background:#183650}
.raceHead h3{font-size:16px;margin:0;line-height:1.4}.raceHead small{font-size:11px;color:#aac5d5}.raceHead .meta{color:#b0cee1;font-size:11px}
.raceHead .scoreStatus{font-size:11px;font-weight:900;color:#bce8e4}.scoreStatus.pending{color:#efd9a5}
.axis{display:grid;grid-template-columns:33px 30px minmax(85px,1fr) minmax(100px,1.6fr) 69px;gap:7px;align-items:end;padding:9px 11px 5px;color:#b4ceda;font-size:10px}
.tickRow{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:#c2d4e1;gap:2px}
.rows{padding:0 9px 11px}
.horseRow{display:grid;grid-template-columns:33px 30px minmax(85px,1fr) minmax(100px,1.6fr) 69px;gap:7px;align-items:center;width:100%;padding:8px 5px;margin:5px 0 0;text-align:left;color:#eff9ff;background:#193752;border:1px solid transparent;border-radius:6px;min-height:44px}
.horseRow:hover,.horseRow.selected{background:#274d6a;border-color:#84d9e8}.horseRow:focus-visible{outline:2px solid #dff7ff}
.horseRow .place{font-size:11px;color:#d0dee9;text-align:center;white-space:nowrap}
.horseRow .gate{border:1px solid #889dae;border-radius:50%;width:28px;height:28px;font-size:13px;font-weight:950;display:flex;align-items:center;justify-content:center;background:#40556a;color:#fff}
.g1{background:#fff!important;color:#121212!important}.g2{background:#ffe839!important;color:#161616!important}.g3{background:#e53243!important}.g4{background:#14151c!important}.g5{background:#287ac4!important}.g6{background:#18865d!important}.g7{background:#876039!important}.g8{background:#f0a1bf!important;color:#151515!important}
.horseName{min-width:0}.horseName strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.horseName small{font-size:10px;color:#adc6d7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.track{height:19px;background:repeating-linear-gradient(90deg,#2a465f,#2a465f calc(25% - 1px),#49657e 25%);border:1px solid #53687d;overflow:hidden;border-radius:1px;position:relative}
.bar{display:block;height:100%;border-radius:0;position:relative}
.rowScore{text-align:right;font-weight:950;font-variant-numeric:tabular-nums;color:#d4dfeb;font-size:18px}
.rowScore small{font-size:9px;color:#aac4d8;font-weight:700;display:block}
.horseRow.rank-gold{--bar-bright:#e7bb46;--bar-dark:#a8731d;--text:#ffe4a2;border-color:#b58c40;background:linear-gradient(105deg,#363321,#1a354f 34%,#173048)}
.horseRow.rank-silver{--bar-bright:#d3dbe2;--bar-dark:#8a9aaa;--text:#e4eef5;border-color:#849cb0}
.horseRow.rank-bronze{--bar-bright:#c98b4b;--bar-dark:#89542b;--text:#f0c79d;border-color:#9e744a}
.horseRow.rank-blue{--bar-bright:#4a8ee9;--bar-dark:#2a63a9;--text:#aed4ff}
.horseRow.rank-cyan{--bar-bright:#39c2d8;--bar-dark:#1d819b;--text:#adf1f1}
.horseRow.rank-green{--bar-bright:#45ba88;--bar-dark:#267d59;--text:#a2eac4}
.horseRow.rank-yellow{--bar-bright:#e6c857;--bar-dark:#a78f38;--text:#fff3b7}
.horseRow.rank-slate{--bar-bright:#91a8bc;--bar-dark:#5f7589;--text:#d1dfea}
.horseRow[class*="rank-"] .bar{background:linear-gradient(90deg,var(--bar-dark),var(--bar-bright));box-shadow:inset 0 1px 2px #ffffff50}
.horseRow[class*="rank-"] .rowScore{color:var(--text)}
.horseRow.rank-gold .bar{background:linear-gradient(180deg,#fff1b7 0%,#e7bf5f 14%,#a66f20 57%,#e6b644 100%)}
.horseRow.rank-silver .bar{background:linear-gradient(180deg,#f6faff,#b5c4d1 20%,#6b798b 60%,#dce5ed 100%)}
.horseRow.rank-bronze .bar{background:linear-gradient(180deg,#fce0aa,#d1965a 25%,#90552c 66%,#cf985e 100%)}
.horseRow.pending .rowScore{font-size:11px;color:#bbc3d3;font-weight:800}
.horseRow.pending .track{border-style:dashed;background:repeating-linear-gradient(90deg,#233d55,#233d55 18px,#314b65 18px,#314b65 19px)}
.empty{padding:40px 16px;text-align:center;color:#bacfe1;font-size:13px;line-height:1.8}
.detailTop{display:flex;align-items:center;gap:10px}.detailTop .gate{flex-shrink:0;width:31px;height:31px;display:grid;place-items:center;border:1px solid #7c99ae;border-radius:50%}
.detailTop h3{font-size:18px;margin:0}.detailTop .id{font-size:11px;color:#a5c8da;margin-top:3px}
.mainPoint{font-size:34px;font-weight:950;color:#ffe0a0;margin:10px 0}.mainPoint small{font-size:11px;color:#abc6d7}
.sourceNote{padding:9px 10px;border:1px solid #4b6b7d;background:#213b50;border-radius:7px;font-size:11px;line-height:1.7;color:#bfd8e6}
.factors{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0}
.factor{padding:9px;background:#1b3952;border:1px solid #365f76;border-radius:5px}.factor.missing{opacity:.76}
.factorHead{display:flex;justify-content:space-between;gap:7px;font-size:11px}.factorHead span{color:#e4f0fb}.factorHead b{color:#ffdc90}
.factorTrack{height:5px;background:#35556c;margin:7px 0;border-radius:0;overflow:hidden}.factorTrack i{display:block;height:100%;background:#60bfd3}
.factor small{font-size:9px;color:#aacada;line-height:1.6}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.stats>div{padding:10px;background:#1d3e58;border-radius:6px}.stats b{display:block;color:#ffe0a0}.stats small{font-size:10px;color:#b1ceda}
footer{font-size:11px;color:#86a9bd;line-height:1.8;margin-top:16px}
@media(max-width:950px){.layout{grid-template-columns:minmax(0,1fr)}.details{position:static}.hero{padding:17px}.mainTabs a.historyLink{margin-left:0}}
@media(max-width:600px){.wrap{padding:0 8px}.top{padding:13px 10px}.brand{font-size:22px}.hero{align-items:flex-start}.hero h1{font-size:22px}.hero p:last-child{font-size:11px}.limit{min-width:67px;padding:9px 7px}.limit strong{font-size:26px}
.summary{grid-template-columns:1fr 1fr}.summary>div{padding:9px}.summary b{font-size:21px}
.raceHead{padding:10px}.axis{grid-template-columns:24px 27px minmax(60px,1fr) minmax(55px,1.05fr) 53px;gap:3px;padding:8px 4px 5px}
.rows{padding:0 4px 8px}.horseRow{grid-template-columns:24px 27px minmax(60px,1fr) minmax(55px,1.05fr) 53px;gap:3px;padding:8px 2px}.horseRow .gate{width:26px;height:26px;font-size:12px}.horseName strong{font-size:11px}.horseName small{font-size:9px}.rowScore{font-size:15px}.track{height:16px}.mainTabs button,.mainTabs a{padding:9px;font-size:11px}.factors{grid-template-columns:1fr}.selectors label{min-width:120px}}

.rowScore .tierBadge{display:inline-block;padding:2px 4px;margin-top:3px;font-size:9px;font-weight:900;white-space:nowrap;border-radius:0;line-height:1.1}
.rowScore .tierBadge.t100,.rowScore .tierBadge.t200,.rowScore .tierBadge.t300,.rowScore .tierBadge.t400,
.rowScore .tierBadge.t500,.rowScore .tierBadge.t600,.rowScore .tierBadge.t700,.rowScore .tierBadge.t800{color:#071b2b}
.horseRow.pending .tierBadge{color:#9db6c8}

/* V4.1 official lifetime podium percentage; independent of uncalculated 999 point score. */
.dnaMetricColumn{display:flex;flex-direction:column;gap:4px;min-width:0}
.dnaMetricColumn>.track{width:100%;flex:none}
.officialMini{width:100%;min-width:0;display:grid;align-items:center;
  grid-template-columns:47px minmax(16px,1fr) 38px;gap:5px;min-height:15px}
.officialMiniLabel{font-size:9px;color:#c8e4ed;white-space:nowrap;font-weight:800}
.officialMiniTrack{height:9px;border:1px solid #6886a0;background:#1b3a52;overflow:hidden;border-radius:0}
.officialMiniFill{display:block;height:100%;border-radius:0}
.officialMiniFill.pct-purple{background:#8e80bd}
.officialMiniFill.pct-blue{background:#609ee9}
.officialMiniFill.pct-cyan{background:#44c6d8}
.officialMiniFill.pct-green{background:#64cf94}
.officialMiniFill.pct-gold{background:linear-gradient(180deg,#ffeab1,#d6a338)}
.officialMiniValue{font-size:10px;font-weight:900;color:#edf9ff;
 text-align:right;font-variant-numeric:tabular-nums}
.officialMini.empty{display:block;min-height:15px}
.officialMini.empty span{font-size:9px;color:#bac4d1}
.raceCard .horseRow.pending .track{background:repeating-linear-gradient(90deg,
  #274761,#274761 12px,#31536e 12px,#31536e 13px)}
@media(max-width:600px){
 .officialMini{grid-template-columns:27px minmax(9px,1fr) 29px;gap:2px}
 .officialMiniLabel{font-size:8px;letter-spacing:-.5px}
 .officialMiniValue{font-size:8px}
 .officialMiniTrack{height:8px}
}

.sourceHint{margin:9px 0 2px;color:#bad9e3;background:#1b3e58;
 border-left:3px solid #72d8dd;padding:8px 11px;font-size:11px;line-height:1.75}
.sourceHint strong{color:#fff0bd}