/* base */
.htw-card { background:#fff; border-radius:16px; box-shadow:0 12px 24px rgba(0,0,0,.06); padding:16px; margin-bottom:16px; }
.htw-label { font-size:14px; font-weight:600; margin-bottom:8px; display:block; }
.htw-label-sm { font-size:13px; font-weight:600; }
.htw-muted { color:#6b7280; font-size:12px; }
.htw-row { display:flex; gap:8px; align-items:center; }
.htw-row-between { display:flex; align-items:center; justify-content:space-between; }
.htw-input { flex:1; border:1px solid #d4d4d8; border-radius:12px; padding:10px 12px; outline:none; }
.htw-input:focus { box-shadow:0 0 0 2px rgba(0,0,0,.08); }
.htw-btn { border:1px solid #e5e7eb; background:#f3f4f6; padding:10px 14px; border-radius:12px; cursor:pointer; }
.htw-btn:hover { background:#e5e7eb; }
.htw-btn-dark { background:#111; color:#fff; border-color:#111; }
.htw-btn-dark:hover { background:#000; }
.htw-status { font-size:12px; color:#666; margin-top:8px; }

/* scan */
.htw-scan .htw-card { margin-top:8px; }
.htw-dots span{ display:inline-block; width:8px; height:8px; background:#9ca3af; border-radius:9999px; margin-left:4px; animation: htw-pulse 1.2s infinite ease-in-out; }
.htw-dots span:nth-child(2){ animation-delay:.2s; }
.htw-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes htw-pulse { 0%,80%,100%{ opacity:.3; transform:scale(.8);} 40%{ opacity:1; transform:scale(1);} }

/* result + blur overlay with stronger top blur and lighter bottom to tease signals */
.htw-result { position:relative; }
.htw-blur { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.90) 40%, rgba(255,255,255,0.45) 72%, rgba(255,255,255,0.18) 100%);
  backdrop-filter: blur(8px); border-radius:16px;
}

.htw-section + .htw-section { margin-top:12px; }
.htw-title { font-size:18px; font-weight:600; }
.htw-subtitle { font-weight:600; }
.htw-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.htw-colspan-2 { grid-column:span 2; }
.htw-box { background:#f6f7f9; border-radius:12px; padding:12px; }
.htw-kicker { text-transform:uppercase; letter-spacing:.04em; font-size:11px; color:#6b7280; }
.htw-field { font-weight:600; word-break:break-word; }
.htw-bigline { display:flex; align-items:center; justify-content:space-between; font-size:22px; font-weight:700; color:#111; }
.htw-subtle { font-size:12px; color:#6b7280; }
.htw-conf { font-weight:700; }
.htw-conf .htw-conf-pct { color:#6b7280; font-weight:500; margin-left:4px; }
.htw-bar { margin-top:6px; background:#e5e7eb; height:8px; border-radius:9999px; overflow:hidden; }
.htw-bar-fill { height:100%; width:0%; background:#10b981; }
.htw-signals { margin-top:6px; border-top:1px solid #e5e7eb; }
.htw-signal { display:grid; grid-template-columns:1fr auto auto; gap:10px; padding:8px 0; border-bottom:1px solid #eee; }
.htw-signal-title { font-weight:600; font-size:14px; }
.htw-signal-subtle { font-size:12px; color:#6b7280; }
.htw-signal-date { font-size:14px; }
.htw-signal-extra { font-size:12px; color:#4b5563; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:56ch; }

/* Modal */
.htw-modal { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; }
.htw-modal-inner { width:100%; max-width:520px; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border:1px solid #e5e7eb; border-radius:16px; padding:20px; box-shadow:0 12px 24px rgba(0,0,0,.08); }
.htw-modal-title { text-align:center; font-size:18px; font-weight:700; margin-bottom:8px; }
.htw-modal-conf { margin:8px auto 8px auto; max-width:320px; }
.htw-modal-note { text-align:center; font-size:12px; color:#6b7280; margin-bottom:8px; }
.htw-email { width:100%; margin-top:6px; }
.htw-error { color:#b91c1c; font-size:12px; margin:6px 0; }
.htw-tiny { color:#6b7280; font-size:11px; margin-top:8px; text-align:center; }

@media (max-width: 600px) {
  .htw-grid { grid-template-columns:1fr; } .htw-colspan-2 { grid-column:span 1; }
}