:root {
  --km-green: #68B033;
  --km-green-2: #33A940;
  --km-grey: #8C8F93;
  --km-ink: #333333;
  --km-bg: #EBEBEB;
  --km-link: #04ABE6;
  --risk-low: #33A940;
  --risk-medium: #FFC12C;
  --risk-high: #FF7000;
  --risk-critical: #E64430;
  --font: 'Trebuchet MS', 'Noto Sans', Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--km-ink); background: #fff; }
.top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 3px solid var(--km-green); }
.top h1 { font-size: 16px; margin: 0; }
main { padding: 16px; }
h2 { font-size: 14px; margin: 18px 0 4px; color: var(--km-green-2); }
h3 { font-size: 13px; margin: 14px 0 4px; }
p { margin: 0 0 10px; }
em { font-style: normal; font-weight: bold; }

button { font-family: var(--font); font-size: 14px; padding: 8px 14px; border-radius: 4px; border: 1px solid var(--km-grey); background: #fff; color: var(--km-ink); cursor: pointer; }
button:hover { border-color: var(--km-green); }
button.primary { width: 100%; padding: 12px; background: var(--km-green); color: #fff; border: none; font-weight: bold; }
button.primary:hover { background: var(--km-green-2); }
button:disabled { opacity: .5; cursor: default; }

.privacy, .disclaimer, .meta { font-size: 12px; color: var(--km-grey); margin-top: 12px; }

.spinner { width: 32px; height: 32px; margin: 24px auto 12px; border: 4px solid var(--km-bg); border-top-color: var(--km-green); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#loading p { text-align: center; }

.error { background: #fdecea; border-left: 4px solid var(--risk-critical); padding: 12px; }

.score-card { display: flex; align-items: center; gap: 16px; padding: 14px; background: var(--km-bg); border-left: 8px solid var(--km-grey); }
.score { font-size: 40px; font-weight: bold; line-height: 1; }
.score small { font-size: 14px; color: var(--km-grey); font-weight: normal; }
.level { font-size: 18px; font-weight: bold; }
.verdict { font-size: 13px; }
.meter { height: 8px; background: var(--km-bg); margin: 8px 0 4px; }
.meter div { height: 100%; width: 0; transition: width .6s ease; }

.risk-Low .score-card { border-left-color: var(--risk-low); }       .risk-Low .meter div { background: var(--risk-low); }
.risk-Medium .score-card { border-left-color: var(--risk-medium); } .risk-Medium .meter div { background: var(--risk-medium); }
.risk-High .score-card { border-left-color: var(--risk-high); }     .risk-High .meter div { background: var(--risk-high); }
.risk-Critical .score-card { border-left-color: var(--risk-critical); } .risk-Critical .meter div { background: var(--risk-critical); }

.action { font-weight: bold; }
.report { font-size: 13px; }
details { margin-top: 16px; border-top: 1px solid var(--km-bg); padding-top: 8px; }
summary { cursor: pointer; color: var(--km-green-2); font-weight: bold; }
ul { padding-left: 18px; margin: 4px 0 8px; }
li { margin-bottom: 4px; word-break: break-word; }
#againBtn { margin-top: 8px; }