.skol-hero{padding:48px 0 40px;border-bottom:1px solid var(--border);text-align:center}
.skol-ring{width:200px;height:200px;margin:32px auto 20px;position:relative}
.skol-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.skol-ring-score{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.skol-components{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:32px}
.skol-comp{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px}
.skol-chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-top:24px;overflow-x:auto}
.skol-chart{height:200px;display:flex;align-items:flex-end;gap:2px;min-width:400px}
.skol-bar{flex:1;min-width:20px;border-radius:3px 3px 0 0;transition:height .4s ease;position:relative;cursor:crosshair}
.skol-bar:hover{opacity:.85}
.skol-bar:hover .skol-tip{display:block}
.skol-tip{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:6px 10px;white-space:nowrap;z-index:10;margin-bottom:4px;pointer-events:none}
.skol-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:32px}
.skol-tl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;transition:border-color .2s}
.skol-tl-card:hover{border-color:rgba(255,184,0,.15)}