.grade-box { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.grade-box.up { border-color: color-mix(in oklab, var(--up) 45%, var(--line)); }
.grade-box.warn { border-color: color-mix(in oklab, var(--gold) 45%, var(--line)); }
.grade-box.down { border-color: color-mix(in oklab, var(--down) 35%, var(--line)); }
.gb-head { font: 700 14px var(--display); }
.gb-verdict { font-size: 13px; margin: 4px 0 2px; }
.grade-box .ptable td:nth-child(2) { text-align: right; font-family: var(--mono); }
.grade-box .ptable td.src.r { text-align: right; }
.grade-box .ptable tr:first-child td { border-top: 0; padding-top: 8px; }
.pos { color: var(--up); } .neg { color: var(--down); }
.tile .upside { font: 600 10px var(--mono); color: var(--up); margin-left: 4px; }