.cvss-app { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.cvss-app[hidden] { display: none; }
.cvss-visuals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; padding: 24px; border-bottom: 1px solid var(--line); }
.cvss-chart { min-width: 0; padding: 20px; background: var(--bg-900); border: 1px solid var(--line); border-radius: 8px; }
.cvss-chart h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--text); }
.cvss-chart p { color: var(--muted); font-size: .78rem; line-height: 1.6; }
.cvss-chart .cvss-chart-note { font-size: .72rem; }
.cvss-heat-table { width: 100%; border-spacing: 6px; table-layout: fixed; margin: 24px 0 18px; }
.cvss-heat-table caption { text-align: left; color: var(--cyan); font: .72rem/1.5 var(--font-mono); margin-bottom: 14px; }
.cvss-heat-table th { color: var(--muted); font-size: .72rem; font-weight: 500; overflow-wrap: anywhere; }
.cvss-heat-table tbody th { text-align: left; }
.cvss-heat-table td { padding: 0; }
.cvss-heat-table button { width: 100%; min-height: 60px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font: 700 1.1rem var(--font-mono); transition: transform .15s; }
.cvss-heat-table button:hover { transform: scale(1.04); }
.cvss-heat-table button[aria-pressed="true"] { border: 2px solid white; box-shadow: 0 0 0 2px var(--bg-900); }
.cvss-heat-table [data-level="none"], .cvss-heat-legend [data-level="none"] { background: #283d48; color: #d7e5ec; }
.cvss-heat-table [data-level="low"], .cvss-heat-legend [data-level="low"] { background: #174d37; color: #9bffd0; }
.cvss-heat-table [data-level="medium"], .cvss-heat-legend [data-level="medium"] { background: #59451b; color: #ffe49e; }
.cvss-heat-table [data-level="high"], .cvss-heat-legend [data-level="high"] { background: #663a22; color: #ffc59d; }
.cvss-heat-table [data-level="critical"], .cvss-heat-legend [data-level="critical"] { background: #641f33; color: #ffb5c1; }
.cvss-heat-legend { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 20px; }.cvss-heat-legend span { padding: 5px 8px; border-radius: 4px; font-size: .67rem; }
.cvss-radar-svg { display: block; width: 100%; max-width: 370px; height: auto; margin: 0 auto; fill: none; stroke: none; }
.cvss-radar-ring { fill: none; stroke: var(--line); stroke-width: 1; }.cvss-radar-axis { stroke: var(--line); stroke-width: 1; }
.cvss-radar-label { fill: var(--muted); stroke: none; font: 12px var(--font-mono); }
.cvss-radar-legend { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cvss-radar-legend button { color: var(--cyan); background: rgba(39,229,242,.06); border: 1px solid var(--line); padding: 7px 9px; font-size: .68rem; border-radius: 4px; cursor: pointer; }
@media (max-width:900px) { .cvss-visuals { grid-template-columns: minmax(0,1fr); padding: 18px; }.cvss-chart { padding: 14px; } }
@media (max-width:420px) { .cvss-heat-table { border-spacing: 3px; }.cvss-heat-table button { font-size: .87rem; min-height: 52px; }.cvss-heat-table th { font-size: .64rem; } }
@media (prefers-reduced-motion:reduce) { .cvss-heat-table button { transition: none; }.cvss-heat-table button:hover { transform: none; } }
.cvss-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cvss-versions { display: flex; gap: 8px; }
.cvss-versions button { padding: 10px 20px; border: 1px solid var(--line); background: var(--bg-900); color: var(--muted); cursor: pointer; border-radius: 6px; font-weight: 700; }
.cvss-versions button[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); background: rgba(39,229,242,.08); }
.cvss-local, .cvss-notes, .cvss-import p { color: var(--muted); font-size: .8rem; }
.cvss-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 32px; padding: 28px; align-items: start; }
.cvss-group + .cvss-group { margin-top: 28px; }
.cvss-group h3 { font-size: .95rem; color: var(--cyan); margin: 0 0 16px; }
.cvss-metric { border: 0; border-bottom: 1px solid var(--line); margin: 0 0 16px; padding: 0 0 16px; min-width: 0; }
.cvss-metric legend { font-size: .86rem; font-weight: 600; }
.cvss-metric legend code { display: inline-block; color: var(--cyan); margin-right: 10px; }
.cvss-metric p { color: var(--muted); font-size: .76rem; margin: 5px 0 10px; }
.cvss-options { display: flex; flex-wrap: wrap; gap: 8px; }
.cvss-option { position: relative; cursor: pointer; }
.cvss-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cvss-option span { display: block; border: 1px solid var(--line); border-radius: 5px; padding: 8px 13px; color: var(--muted); font-size: .8rem; background: var(--bg-900); }
.cvss-option input:checked + span { border-color: var(--cyan); background: rgba(39,229,242,.1); color: var(--text); }
.cvss-option input:focus-visible + span, .cvss-app button:focus-visible, .cvss-app input:focus-visible, .cvss-app textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.cvss-result { position: sticky; top: 94px; padding: 24px; background: var(--bg-900); border: 1px solid var(--line); border-radius: 8px; --score-color: var(--danger); }
.cvss-result[data-severity="none"] { --score-color: var(--muted); }.cvss-result[data-severity="low"] { --score-color: var(--green); }.cvss-result[data-severity="medium"] { --score-color: var(--gold); }.cvss-result[data-severity="high"] { --score-color: #ffab70; }
.cvss-result small { color: var(--muted); font: .68rem var(--font-mono); }
.cvss-score { display: flex; align-items: baseline; gap: 12px; }.cvss-score strong { font: 700 4.5rem var(--font-mono); color: var(--score-color); }.cvss-score span { color: var(--muted); }
.cvss-severity { display: inline-block; color: var(--score-color); font-weight: 700; margin-bottom: 24px; }
.cvss-result label, .cvss-import > label { display: block; font-size: .8rem; margin-bottom: 8px; }
.cvss-app textarea, .cvss-import input { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); background: var(--bg-950); color: var(--text); border-radius: 5px; font: .78rem/1.6 var(--font-mono); user-select: text; -webkit-user-select: text; }
.cvss-app textarea { resize: vertical; overflow-wrap: anywhere; }.cvss-result .button { width: 100%; margin-top: 10px; }
.cvss-feedback { min-height: 2.6em; color: var(--cyan); font-size: .78rem; }
.cvss-bands { border-top: 1px solid var(--line); padding-top: 12px; }.cvss-bands span { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; padding: 3px 0; }
.cvss-import { border-top: 1px solid var(--line); padding: 24px 28px; }.cvss-import > div { display: flex; gap: 12px; }.cvss-import .button { flex-shrink: 0; }
.cvss-notes { margin-top: 20px; max-width: 1000px; }.cvss-notes a { color: var(--cyan); }
@media (max-width: 760px) { .cvss-layout { grid-template-columns: minmax(0,1fr); padding: 18px; gap: 20px; }.cvss-result { position: static; grid-row: 1; }.cvss-import { padding: 18px; }.cvss-import > div { flex-direction: column; }.cvss-toolbar { padding: 18px; } }