/* Base styles */
.ytw-wrap{ --bg:#0b1020; --panel:#121a2a; --ink:#e8eef8; --muted:#a7b2c6; --brand:#6ae1ff; --good:#22c55e; --warn:#f59e0b; --bad:#ef4444; --border:#1e293b; font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--ink); background:var(--bg); border-radius:16px; padding:16px; max-width:860px; margin:20px auto; border:1px solid var(--border); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.ytw-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ytw-title{ font-weight:800; font-size:clamp(20px,2.8vw,28px); margin:0; }
.ytw-progress{ position:relative; width:40%; min-width:220px; }
.ytw-bar{ height:10px; background:#0e1526; border:1px solid var(--border); border-radius:999px; overflow:hidden }
.ytw-bar>i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--brand),#7effa8); transition:width .45s ease }
.ytw-pct{ font-size:12px; color:var(--muted); margin-top:6px; text-align:right }

.ytw-body{ margin-top:14px; background:var(--panel); border:1px solid var(--border); border-radius:14px; overflow:hidden }
.ytw-viewport{ width:100%; overflow:hidden; position:relative }
.ytw-track{ display:flex; width:100%; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.ytw-slide{ width:100%; flex:0 0 100%; padding:18px; }

.ytw-q{ font-size:18px; font-weight:700; margin:0 0 10px }
.ytw-hint{ font-size:13px; color:var(--muted); margin:0 0 12px }
.ytw-input, .ytw-textarea{ width:100%; background:#0b1324; color:var(--ink); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.ytw-textarea{ min-height:140px; resize:vertical }

.ytw-ctrls{ display:flex; gap:10px; justify-content:space-between; align-items:center; margin-top:12px }
.ytw-left, .ytw-right{ display:flex; gap:10px; align-items:center }
.ytw-btn{ background:var(--brand); color:#03131f; border:0; border-radius:12px; padding:10px 14px; font-weight:800; cursor:pointer; transition:transform .15s ease, opacity .15s ease; }
.ytw-btn:hover{ transform:translateY(-1px) scale(1.01) }
.ytw-ghost{ background:transparent; color:var(--ink); border:1px solid var(--border) }
.ytw-skip{ background:transparent; color:var(--muted); border:1px dashed var(--border) }
.ytw-active-btn { box-shadow: 0 0 14px 2px rgba(106, 225, 255, 0.45); }

.ytw-scoreRing{ --size:76px; --stroke:10px; width:var(--size); height:var(--size); border-radius:50%; background:conic-gradient(var(--brand) var(--deg,0deg), #1b2436 0); position:relative }
.ytw-scoreRing::after{ content:attr(data-label); position:absolute; inset:calc(var(--stroke) + 3px); background:var(--panel); border-radius:50%; display:grid; place-items:center; font-weight:900 }

.ytw-results h3{ margin:8px 0 6px; font-size:18px }
.ytw-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.ytw-list li{ display:flex; gap:8px; align-items:flex-start; font-size:14px }
.ytw-dot{ width:10px; height:10px; border-radius:50% }
.ok{ background:var(--good) } .warn{ background:var(--warn) } .bad{ background:var(--bad) }
.ytw-mini{ font-size:12px; color:var(--muted) }

.ytw-footer{ margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px }
.ytw-pill{ font-size:12px; padding:4px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted) }
/* Add this new CSS to the bottom of your style.css file */
@keyframes ytw-highlight-pulse {
  0% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 10px 3px var(--brand), 0 0 20px 6px rgba(106, 225, 255, 0.45); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.ytw-wrap.highlight {
  animation: ytw-highlight-pulse 1.8s ease-in-out;
}