@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

:root{
  --bg:#070d1a;--surf:#0f1629;--surf2:#182038;--border:rgba(255,255,255,0.07);
  --accent:#22d3ee;--accent2:#818cf8;--green:#10b981;--yellow:#f59e0b;--red:#f43f5e;
  --text:#e2e8f0;--muted:#64748b;--r:14px;--font:'DM Sans',sans-serif;--display:'Syne',sans-serif;
}

/* ── Wrapper ── */
.cwd-wrap{
  font-family:var(--font);background:var(--bg);color:var(--text);
  border-radius:var(--r);padding:52px 48px;max-width:940px;margin:0 auto;
  box-shadow:0 0 0 1px var(--border),0 0 100px rgba(34,211,238,.05);
  position:relative;overflow:hidden;
}
.cwd-wrap::after{
  content:'';position:absolute;top:-300px;right:-200px;width:600px;height:600px;
  background:radial-gradient(circle,rgba(129,140,248,.06) 0%,transparent 65%);pointer-events:none;
}

/* ── Header ── */
.cwd-header{text-align:center;margin-bottom:40px}
.cwd-bolt{font-size:44px;line-height:1;margin-bottom:12px;display:block;filter:drop-shadow(0 0 20px rgba(251,191,36,.4))}
.cwd-title{font-family:var(--display);font-size:2.1rem;font-weight:800;color:#fff;margin:0 0 8px;letter-spacing:-.03em}
.cwd-sub{color:var(--muted);margin:0;font-size:.9rem}

/* ── Input area ── */
.cwd-input-area{margin-bottom:20px}
.cwd-input-row{
  display:flex;align-items:center;gap:8px;
  background:var(--surf);border:1.5px solid var(--border);border-radius:12px;
  padding:6px 6px 6px 16px;transition:border-color .2s;
}
.cwd-input-row:focus-within{border-color:var(--accent)}
.cwd-globe{font-size:18px;flex-shrink:0}
#cwd-url{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text);font-size:1rem;font-family:var(--font);padding:9px 4px;
}
#cwd-url::placeholder{color:var(--muted)}
#cwd-btn{
  background:linear-gradient(130deg,var(--accent),var(--accent2));
  color:#fff;border:none;border-radius:9px;padding:12px 26px;
  font-family:var(--display);font-weight:700;font-size:.9rem;cursor:pointer;
  transition:opacity .2s,transform .15s;white-space:nowrap;letter-spacing:.02em;
  min-width:120px;
}
#cwd-btn:hover{opacity:.88;transform:translateY(-1px)}
#cwd-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ── Toggles ── */
.cwd-toggles{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cwd-toggle{
  display:flex;align-items:center;gap:6px;padding:7px 14px;
  background:var(--surf);border:1px solid var(--border);border-radius:8px;
  cursor:pointer;font-size:.82rem;transition:all .2s;user-select:none;
  color:var(--muted);
}
.cwd-toggle input{display:none}
.cwd-toggle.active{border-color:var(--accent);background:rgba(34,211,238,.08);color:var(--accent)}
.cwd-toggle:hover{border-color:rgba(34,211,238,.35)}

/* ── Progress ── */
.cwd-progress{margin:20px 0}
.cwd-bar{background:var(--surf);border-radius:999px;height:5px;overflow:hidden}
.cwd-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;transition:width .5s ease}
.cwd-step-txt{margin-top:8px;text-align:center;font-size:.78rem;color:var(--muted)}

/* ── Error ── */
.cwd-error-box{
  background:rgba(244,63,94,.08);border:1px solid rgba(244,63,94,.3);
  color:#fda4af;border-radius:10px;padding:13px 18px;margin:12px 0;font-size:.88rem;
}

/* ── Results meta bar ── */
.cwd-meta-bar{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surf);border:1px solid var(--border);border-radius:10px;
  padding:9px 16px;margin-bottom:22px;font-size:.78rem;flex-wrap:wrap;gap:8px;
}
.cwd-meta-url{color:var(--accent);font-weight:600;word-break:break-all}
.cwd-meta-ts{color:var(--muted);white-space:nowrap}

/* ── Scores row ── */
.cwd-scores-row{
  display:flex;gap:36px;align-items:center;
  background:var(--surf);border:1px solid var(--border);border-radius:var(--r);
  padding:28px 32px;margin-bottom:28px;flex-wrap:wrap;
}

/* Ring */
.cwd-ring-wrap{position:relative;width:140px;height:140px;flex-shrink:0}
.cwd-ring-svg{width:100%;height:100%;transform:rotate(-90deg)}
.cwd-ring-track{fill:none;stroke:var(--surf2);stroke-width:9}
.cwd-ring-arc{
  fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:314;stroke-dashoffset:314;
  transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1),stroke .4s;
}
.cwd-ring-inner{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.cwd-ring-num{font-family:var(--display);font-size:2.3rem;font-weight:800;color:#fff;line-height:1}
.cwd-ring-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.cwd-ring-grade{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
.cwd-ring-grade.sg{color:var(--green)}.cwd-ring-grade.sy{color:var(--yellow)}.cwd-ring-grade.sr{color:var(--red)}

/* Pills */
.cwd-pills-col{flex:1;display:flex;flex-direction:column;gap:11px}
.cwd-pill-row{display:flex;align-items:center;gap:10px;font-size:.82rem}
.cwd-pill-icon{width:22px;text-align:center}
.cwd-pill-lbl{flex:1;color:var(--muted)}
.cwd-pill-bar{flex:2;background:var(--surf2);border-radius:999px;height:5px;overflow:hidden}
.cwd-pill-fill{height:100%;border-radius:999px;transition:width .9s ease}
.cwd-pill-val{width:34px;text-align:right;font-weight:700;font-family:var(--display);font-size:.9rem}

/* ── Tool Cards ── */
.cwd-card-wrap{display:flex;flex-direction:column;gap:16px}
.cwd-card{
  background:var(--surf);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s;
}
.cwd-card:hover{border-color:rgba(34,211,238,.18)}
.cwd-card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;cursor:pointer;user-select:none;
}
.cwd-card-left{display:flex;align-items:center;gap:12px}
.cwd-card-icon{font-size:22px}
.cwd-card-name{font-family:var(--display);font-weight:700;font-size:.95rem}
.cwd-card-tally{display:flex;gap:10px;margin-top:3px;font-size:.72rem}
.cwd-ct-p{color:var(--green)}.cwd-ct-w{color:var(--yellow)}.cwd-ct-f{color:var(--red)}
.cwd-card-right{display:flex;align-items:center;gap:8px}
.cwd-card-score{font-family:var(--display);font-weight:800;font-size:1.4rem}
.cwd-chevron{color:var(--muted);font-size:.75rem;transition:transform .2s}
.cwd-card.open .cwd-chevron{transform:rotate(180deg)}
.cwd-card-body{display:none;padding:0 22px 22px}
.cwd-card.open .cwd-card-body{display:block}

/* Check list */
.cwd-checks{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.cwd-check{
  display:flex;align-items:flex-start;gap:10px;
  padding:11px 14px;border-radius:10px;
}
.cwd-check.pass{background:rgba(16,185,129,.06)}
.cwd-check.warn{background:rgba(245,158,11,.06)}
.cwd-check.fail{background:rgba(244,63,94,.07)}
.cwd-check-ico{font-size:13px;flex-shrink:0;margin-top:2px}
.cwd-check-name{font-weight:600;font-size:.83rem;color:var(--text);margin-bottom:2px}
.cwd-check-msg{font-size:.8rem;color:var(--muted);line-height:1.4}
.cwd-check-detail{font-size:.76rem;color:rgba(100,116,139,.7);margin-top:3px;font-style:italic}

/* WCAG badge */
.cwd-wcag{
  display:inline-block;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.2);
  color:var(--accent);font-size:.75rem;font-weight:700;padding:4px 12px;
  border-radius:999px;margin-bottom:14px;letter-spacing:.04em;
}

/* Suggestions */
.cwd-sugs{margin-top:16px}
.cwd-sugs h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 8px}
.cwd-sug{
  padding:9px 13px;border-radius:8px;font-size:.8rem;margin-bottom:5px;
  border-left:3px solid;line-height:1.4;
}
.cwd-sug.high{background:rgba(244,63,94,.07);border-color:var(--red);color:#fda4af}
.cwd-sug.medium{background:rgba(245,158,11,.07);border-color:var(--yellow);color:#fcd34d}
.cwd-sug-badge{font-weight:700;font-size:.7rem;margin-right:6px;text-transform:uppercase}

/* Actions */
.cwd-actions{display:flex;gap:12px;margin-top:28px;justify-content:center;flex-wrap:wrap}
.cwd-act-btn{
  background:var(--surf);border:1px solid var(--border);color:var(--text);
  padding:11px 24px;border-radius:10px;cursor:pointer;font-family:var(--font);font-size:.88rem;
  transition:border-color .2s,background .2s,transform .15s;
}
.cwd-act-btn:hover{border-color:var(--accent);background:rgba(34,211,238,.06);transform:translateY(-1px)}
.cwd-act-print:hover{border-color:var(--accent2);background:rgba(129,140,248,.06)}

/* Score colors */
.sc-g{color:var(--green)}.sc-y{color:var(--yellow)}.sc-r{color:var(--red)}

@media(max-width:620px){
  .cwd-wrap{padding:28px 16px}
  .cwd-title{font-size:1.5rem}
  .cwd-input-row{flex-wrap:wrap}
  #cwd-btn{width:100%}
  .cwd-scores-row{flex-direction:column;align-items:center;text-align:center;gap:24px}
  .cwd-pills-col{width:100%}
}