/* ==========================================================================
   xDoctorApp v2 — /under-the-hood page styles
   Loaded alongside tokens.css + landing.css (shared nav/footer chrome).
   All colors reference tokens.css vars — no new brand colors introduced.
   Adapted from claude/under_the_hood_mockup_v2_2026-08-13.html.
   ========================================================================== */

.uth-main { max-width: 960px; margin: 0 auto; padding: 0 var(--space-6) var(--space-8); }

/* ---------- hero ---------- */
.uth-releasepill {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.5px;
  color: var(--accent-content-quality); background: rgba(94, 229, 209, 0.10);
  border: 1px solid rgba(94, 229, 209, 0.25);
  border-radius: 20px; padding: 7px 16px; width: fit-content; margin: var(--space-9) auto var(--space-5);
}
.uth-releasepill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-content-quality); box-shadow: var(--glow-soft-cq);
  animation: uth-pulse 2s ease-in-out infinite;
}
@keyframes uth-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.uth-kicker {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px;
  color: var(--accent-content-quality); text-transform: uppercase;
  margin: 0 0 var(--space-4); text-align: center;
}
.uth-title {
  text-align: center; font-size: clamp(32px, 5vw, 50px); font-weight: 800;
  line-height: 1.14; margin: 0 0 var(--space-4); letter-spacing: -0.5px;
  color: var(--text-primary); font-family: var(--font-display);
}
.uth-title span { color: var(--accent-content-quality); text-shadow: var(--glow-strong-cq); }
.uth-dek {
  text-align: center; color: var(--text-secondary); font-size: 18.5px; line-height: 1.65;
  max-width: 660px; margin: 0 auto var(--space-8);
}
.uth-dek b { color: var(--text-primary); font-weight: 600; }
/* PATCH:uth_signin_cta v1 — centers the sign-in button under the (centered)
   hero text; landing.css's .hero__cta is left-aligned by default. */
.uth-hero-cta { display: flex; justify-content: center; margin: 0 0 var(--space-8); }

/* ---------- 3-step guide ---------- */
.uth-steps { display: flex; gap: var(--space-3); margin: 0 0 var(--space-8); flex-wrap: wrap; justify-content: center; }
.uth-step {
  flex: 1 1 240px; max-width: 280px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 20px 20px 22px;
  transition: transform var(--duration-fast), border-color var(--duration-fast);
}
.uth-step:hover { transform: translateY(-2px); border-color: var(--border-emphasized); }
.uth-step .num { font-family: var(--font-mono); color: var(--accent-content-quality); font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.uth-step p { margin: 0; font-size: 14.5px; color: var(--text-secondary); line-height: 1.5; }
.uth-step a { color: var(--accent-content-quality); }

/* ---------- input card ---------- */
.uth-card {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 18px;
  padding: 34px; margin-bottom: var(--space-6);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.6);
}
.uth-tabs { display: flex; gap: 6px; margin-bottom: var(--space-5); background: var(--bg-recessed); border-radius: 10px; padding: 5px; width: fit-content; }
.uth-tab { font-family: var(--font-mono); font-size: 13.5px; cursor: pointer; padding: 9px 18px; border-radius: 7px; color: var(--text-secondary); transition: .15s; user-select: none; }
.uth-tab.on { background: rgba(94, 229, 209, 0.10); color: var(--accent-content-quality); font-weight: 700; }
.uth-textarea {
  width: 100%; min-height: 150px; resize: vertical;
  background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: 10px;
  color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  padding: 16px; outline: none; transition: border-color var(--duration-fast);
}
.uth-textarea:focus { border-color: rgba(94, 229, 209, 0.4); }
.uth-textarea::placeholder { color: var(--text-tertiary); }
.uth-dropzone {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  border: 1.5px dashed var(--border-emphasized); border-radius: 10px; padding: 40px 20px;
  text-align: center; background: var(--bg-elevated);
  transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
}
/* PATCH:uth_dropzone_cohesion v1 — shares one rule for :hover and .drag-over,
   exactly like app.css's .upload-drop:hover, .upload-drop--hover — so the
   zone reacts the moment the mouse enters it, not just mid-drag. */
.uth-dropzone:hover,
.uth-dropzone.drag-over {
  border-color: var(--accent-content-quality);
  background: color-mix(in srgb, var(--accent-content-quality) 6%, var(--bg-elevated));
  box-shadow: 0 0 28px rgba(94, 229, 209, 0.15);
}
/* PATCH:uth_dropzone_filled_state v1 — persistent "file received" state,
   distinct from the transient :hover/.drag-over glow above (solid border,
   stays on after the pointer leaves) so a chosen file is unmistakable. */
.uth-dropzone--filled {
  border-style: solid;
  border-color: var(--accent-content-quality);
  background: color-mix(in srgb, var(--accent-content-quality) 8%, var(--bg-elevated));
}
.uth-dropzone--filled .uth-dropzone__glyph { color: var(--accent-content-quality); }
.uth-dropzone--filled .uth-dropzone__title {
  color: var(--accent-content-quality);
  font-family: var(--font-mono);
  font-size: 14px;
  word-break: break-all;
}
/* PATCH:uth_scan_button_gate v1 — a chosen file that fails the export shape
   check gets called out immediately instead of just leaving the Scan button
   disabled with no explanation. var(--accent-lists-risk) is already used on
   this exact page (see .uth-inline-error above) — no new token introduced. */
.uth-dropzone--invalid {
  border-style: solid;
  border-color: var(--accent-lists-risk);
  background: rgba(255, 122, 133, 0.08);
}
.uth-dropzone--invalid .uth-dropzone__glyph { color: var(--accent-lists-risk); }
.uth-dropzone--invalid .uth-dropzone__title {
  color: var(--accent-lists-risk);
  font-family: var(--font-mono);
  font-size: 14px;
  word-break: break-all;
}
.uth-dropzone--invalid .uth-dropzone__sub { color: var(--accent-lists-risk); }
.uth-dropzone__glyph {
  font-size: 32px; line-height: 1; color: var(--accent-content-quality);
  text-shadow: 0 0 18px rgba(94, 229, 209, 0.5), 0 0 6px rgba(94, 229, 209, 0.35);
  margin-bottom: 10px;
}
.uth-dropzone__title { color: var(--text-primary); font-size: 15.5px; font-weight: 500; margin: 0 0 4px; }
.uth-dropzone__sub { color: var(--text-secondary); font-size: 13px; margin: 0; }
.uth-privacy-note { font-size: 13px; color: var(--text-tertiary); margin-top: var(--space-4); line-height: 1.6; }
.uth-privacy-note b { color: var(--text-secondary); }
.uth-scanbtn {
  margin-top: var(--space-4);
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  background: var(--accent-content-quality); color: var(--bg-base); border: none; border-radius: 9px;
  padding: 15px 26px; cursor: pointer; width: 100%;
  box-shadow: 0 0 0 1px rgba(94, 229, 209, 0.15), 0 12px 30px -10px rgba(94, 229, 209, 0.35);
  transition: filter var(--duration-fast), transform var(--duration-fast);
}
.uth-scanbtn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.uth-scanbtn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.uth-inline-error {
  display: none; margin-top: var(--space-3); padding: 12px 14px;
  background: rgba(255, 122, 133, 0.08); border: 1px solid rgba(255, 122, 133, 0.3);
  border-radius: 8px; color: var(--accent-lists-risk); font-size: 13.5px; line-height: 1.5;
}
.uth-inline-error.show { display: block; }

/* ---------- scanning state ---------- */
.uth-scancard {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 18px;
  padding: 52px 40px; margin: 80px 0; text-align: center;
}
.uth-scancard .ring {
  width: 64px; height: 64px; margin: 0 auto var(--space-5);
  border-radius: 50%; border: 3px solid var(--border-emphasized); border-top-color: var(--accent-content-quality);
  animation: uth-spin 1s linear infinite;
}
@keyframes uth-spin { to { transform: rotate(360deg); } }
.uth-scancard h3 { margin: 0 0 var(--space-5); font-size: 19px; font-weight: 700; color: var(--text-primary); }
.uth-scansteps { max-width: 380px; margin: 0 auto; text-align: left; }
.uth-scanstep {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 14px; color: var(--text-tertiary);
  padding: 9px 0; opacity: 0; transform: translateY(4px);
  transition: opacity .4s, color .4s, transform .4s;
}
.uth-scanstep.done { opacity: 1; transform: translateY(0); color: var(--text-primary); }
.uth-scanstep .mark {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-emphasized);
  display: flex; align-items: center; justify-content: center; font-size: 11px; flex: 0 0 18px;
  color: transparent; transition: .3s;
}
.uth-scanstep.done .mark { border-color: var(--accent-content-quality); background: rgba(94, 229, 209, 0.10); color: var(--accent-content-quality); }

/* ---------- results: Card 1 — "Marked-Safe style" share card ----------
   PATCH:uth_results_redesign v1 — replaces the old flat .uth-summary bar.
   Ported from claude/under_the_hood_mockup_v2_2026-08-13.html's approved
   sharecard design via the approved mockup chain (see
   claude/uth_results_page_combined_2026-08-14.html). */
.uth-sharewrap {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 18px;
  padding: 26px; margin-bottom: var(--space-6);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.6);
}
.uth-sharewrap-inner { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }

.uth-sharecard {
  width: 300px; flex: 0 0 300px; border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(94,229,209,0.14), transparent 60%),
    linear-gradient(165deg, #0c1614, #090b10 70%);
  border: 2px solid var(--accent-content-quality);
  box-shadow: 0 0 0 1px rgba(94,229,209,0.12), 0 0 50px rgba(94,229,209,0.18), inset 0 0 40px rgba(94,229,209,0.05);
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-mono); text-align: center; padding: 20px 20px 16px; position: relative;
}
.uth-sharecard.labeled {
  border-color: var(--accent-efficiency);
  box-shadow: 0 0 0 1px rgba(245,215,107,0.12), 0 0 50px rgba(245,215,107,0.16), inset 0 0 40px rgba(245,215,107,0.05);
}
.sc-top { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.sc-statuschip { font-size: 9.5px; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 20px; text-transform: uppercase; font-weight: 700; }
.uth-sharecard:not(.labeled) .sc-statuschip { color: var(--accent-content-quality); background: rgba(94,229,209,0.10); border: 1px solid rgba(94,229,209,0.3); }
.uth-sharecard.labeled .sc-statuschip { color: var(--accent-efficiency); background: rgba(245,215,107,0.10); border: 1px solid rgba(245,215,107,0.3); }

.sc-titleblock { width: 100%; text-align: center; margin-bottom: 16px; }
.sc-brand {
  font-size: 10px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase;
  color: var(--accent-content-quality); margin-bottom: 4px;
}
.uth-sharecard.labeled .sc-brand { color: var(--accent-efficiency); }
.sc-titleline { font-size: 16.5px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.2px; }

.sc-avatarring { position: relative; width: 116px; height: 116px; margin: 0 auto 16px; display: block; text-decoration: none; color: inherit; cursor: pointer; }
.sc-avatarring::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 3px solid var(--border-emphasized); transition: border-color .3s, box-shadow .3s;
}
.connected .uth-sharecard:not(.labeled) .sc-avatarring::before { border-color: var(--accent-content-quality); box-shadow: 0 0 18px rgba(94,229,209,0.55); }
.connected .uth-sharecard.labeled .sc-avatarring::before { border-color: var(--accent-efficiency); box-shadow: 0 0 18px rgba(245,215,107,0.4); }
.sc-avatar {
  width: 116px; height: 116px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; background-size: cover; background-position: center; background-repeat: no-repeat;
}
.sc-avatar-pending {
  border: 2px dashed var(--text-tertiary); color: var(--text-tertiary);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
  line-height: 1.35; text-align: center; padding: 0 10px;
  animation: sc-pfp-pulse 2s ease-in-out infinite;
}
@keyframes sc-pfp-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
/* PATCH:uth_sharecard_avatar_tiling_fix v1 — was the `background` shorthand, which
   resets background-size/position/repeat to their defaults and clobbered
   .sc-avatar's `background-size:cover`, tiling the real avatar photo instead of
   showing one centered image. Longhand background-image leaves those alone. */
.sc-avatar-done { display: none; background-image: linear-gradient(135deg,#5ee5d1,#82a7ff); background-color: transparent; color: var(--bg-base); }
.connected .sc-avatar-pending { display: none; }
.connected .sc-avatar-done { display: flex; }
.sc-ring-badge {
  position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-size: 13px; font-weight: 900;
  border: 3px solid #0c1614;
}
.connected .uth-sharecard:not(.labeled) .sc-ring-badge { display: flex; background: var(--accent-content-quality); color: var(--bg-base); }
.connected .uth-sharecard.labeled .sc-ring-badge { display: flex; background: var(--accent-efficiency); color: var(--bg-base); }

.sc-headline { font-size: 14px; font-weight: 700; line-height: 1.45; padding: 0 4px; margin-bottom: 0; min-height: 0; transition: margin-bottom .2s; }
.sc-headline .done-line { display: none; color: var(--text-primary); }
.sc-headline .done-line b { color: var(--accent-content-quality); }
.uth-sharecard.labeled .sc-headline .done-line b { color: var(--accent-efficiency); }
.connected .sc-headline { margin-bottom: 14px; min-height: 20px; }
.connected .sc-headline .done-line { display: block; }

.sc-stat { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: #f2fffb; text-shadow: 0 0 20px rgba(94,229,209,0.65); }
.uth-sharecard.labeled .sc-stat { text-shadow: 0 0 20px rgba(245,215,107,0.5); }
.sc-stat .unit {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; text-shadow: none; color: var(--text-secondary); margin-left: 6px;
}
.sc-caption { font-size: 11px; color: var(--text-secondary); margin-top: 8px; margin-bottom: 6px; }
.sc-watermark { margin-top: 14px; font-size: 10px; color: var(--text-tertiary); align-self: flex-end; }

.uth-sharetext { flex: 1 1 260px; }
.uth-sharetext h4 { margin: 0 0 6px; font-size: 16px; color: var(--text-primary); }
.uth-sharetext p { margin: 0 0 16px; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }
.uth-sharetext .connected-copy b { color: var(--accent-content-quality); }

.sc-cta-save {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  background: var(--accent-content-quality); color: var(--bg-base); border: none; border-radius: 9px;
  padding: 13px 20px; cursor: pointer; width: 100%; display: block; text-align: center; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(94,229,209,0.15), 0 10px 26px -10px rgba(94,229,209,0.35);
  transition: filter .15s, transform .15s;
}
.sc-cta-save:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sc-save-note { font-size: 11.5px; color: var(--text-tertiary); margin-top: 10px; line-height: 1.5; }
.sc-shareactions { display: flex; gap: 10px; flex-wrap: wrap; }
.sc-btn-outline {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  background: transparent; color: var(--text-primary); border: 1px solid var(--border-emphasized);
  padding: 10px 14px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
}
.sc-btn-outline:disabled { opacity: .4; cursor: not-allowed; }
.sc-btn-share {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  background: var(--accent-content-quality); color: var(--bg-base); border: none; border-radius: 8px;
  padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  box-shadow: 0 8px 20px -8px rgba(94,229,209,0.4);
}
.uth-sharecard.labeled ~ .uth-sharetext .sc-btn-share { background: var(--accent-efficiency); color: var(--bg-base); }

/* PATCH:uth_history_post_x v1 — Pro direct-to-X post button states on
   /coach/uth-history's share modal. The re-auth CTA is a real <form> (POST
   to /auth/twitter/uth-post-authorize needs a full-page navigation, not
   fetch) — display:contents lets its child button sit in the flex row like
   any other sibling instead of the form's own box breaking the layout. The
   "already posted today" state is a <span>, not a <button>, since there's
   nothing left to click until tomorrow — :disabled styling doesn't apply to
   spans, so .sc-btn-disabled repeats it explicitly. */
.uthh-postx-authform { display: contents; }
.sc-btn-disabled { opacity: .55; cursor: not-allowed; }

.uth-meter { height: 6px; border-radius: 4px; background: var(--bg-recessed); overflow: hidden; margin-bottom: var(--space-6); }
.uth-meter .fill { height: 100%; border-radius: 4px; }
.uth-meter .fill.labeled { background: var(--accent-efficiency); box-shadow: 0 0 10px rgba(245, 215, 107, 0.5); }
.uth-meter .fill.clean { width: 0%; background: var(--accent-content-quality); }
.uth-meterlabels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin: -16px 0 var(--space-6); }

.uth-labelcard {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-left: 3px solid var(--accent-efficiency);
  border-radius: 14px; padding: 24px 26px; margin-bottom: var(--space-4);
  transition: transform var(--duration-fast), border-color var(--duration-fast);
}
.uth-labelcard:hover { transform: translateY(-2px); border-color: var(--border-emphasized); border-left-color: var(--accent-efficiency); }
.uth-labelcard .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.uth-labelcard .pill {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.5px;
  background: rgba(245, 215, 107, 0.10); color: var(--accent-efficiency); border: 1px solid rgba(245, 215, 107, 0.35);
  padding: 5px 12px; border-radius: 20px;
}
.uth-labelcard .stat { font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); text-align: right; }
.uth-labelcard .stat b { color: var(--text-primary); font-size: 15px; }
.uth-labelcard .about, .uth-labelcard .effect { font-size: 14.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 10px; }
.uth-labelcard .about b, .uth-labelcard .effect b { color: var(--text-primary); font-weight: 600; }
.uth-xd-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px;
  background: rgba(94, 229, 209, 0.10); color: var(--accent-content-quality); border: 1px solid rgba(94, 229, 209, 0.3);
  padding: 7px 12px; border-radius: 8px;
}

/* ---------- results: Card 2 — "X vs xDoctor" scoreboard ----------
   PATCH:uth_results_redesign v1 — replaces the old .uth-cleancard blind
   grid. Approved variant B from claude/uth_card2_persuasion_mockups_2026-08-14.html,
   merged with the ported + mystery-tease Account Health Score ring (see
   playScoreGauge() in the inline script below). */
.vb-card {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 14px;
  padding: 28px 28px 26px; margin-bottom: var(--space-6); overflow: hidden;
}
.vb-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.vb-header-text { flex: 1; min-width: 220px; }
.vb-card h3 { margin: 0 0 8px; font-size: 18px; color: var(--text-primary); }
.vb-card > .vb-header > .vb-header-text > p { margin: 0 0 24px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; }

/* score ring — faithful port of public/views/app/home.php's .score-ring
   (Account Health Score gauge next to the pillar tiles). Physical footprint
   fixed at 96px to match the source exactly. */
.vb-scoregauge-link { display: block; text-decoration: none; cursor: pointer; }
.vb-scoregauge-link:hover .vb-scoregauge { filter: brightness(1.08); }
.vb-scoregauge-link:hover .vb-scoregauge-l { color: var(--accent-content-quality); }
.vb-scoregauge {
  position: relative; width: 96px; height: 96px; flex: 0 0 auto;
  display: inline-grid; place-items: center; isolation: isolate;
}
.vb-scoregauge__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vb-scoregauge__track { stroke: rgba(255,255,255,.07); }
.vb-scoregauge__tick { stroke: rgba(255,255,255,.25); stroke-width: 2; }
.vb-scoregauge__arc { stroke-dasharray: 326.726; stroke-dashoffset: 326.726; transition: stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1); }
.vb-scoregauge-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.vb-scoregauge-n { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; letter-spacing: -.02em; color: #fff; text-shadow: 0 0 16px rgba(34,224,200,.35); line-height: 1; }
.vb-scoregauge-l { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-tertiary); margin-top: 4px; text-align: center; line-height: 1.2; }
.vb-scoregauge::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,224,200,.22), transparent 68%);
  opacity: 0; z-index: 0; animation: vb-ringBreath 4.2s ease-in-out infinite; pointer-events: none;
}
@keyframes vb-ringBreath { 0%,100% { opacity: .25; transform: scale(.98); } 50% { opacity: .6; transform: scale(1.02); } }
.vb-scoregauge-tag {
  position: absolute; top: -6px; right: -6px; z-index: 3;
  font-family: var(--font-mono); font-size: 7.5px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--bg-base); background: var(--accent-efficiency);
  border-radius: 4px; padding: 2px 5px; transform: rotate(4deg);
  transition: background-color .3s, color .3s;
}
.vb-scoregauge-tag.mystery { background: var(--accent-content-quality); }
/* mystery-tease landing state — deliberately never a fabricated final value */
.vb-scoregauge__arc.mystery { stroke-dasharray: 10 8; stroke-dashoffset: 0; transition: none; animation: vb-mystery-march 1.3s linear infinite; }
@keyframes vb-mystery-march { to { stroke-dashoffset: -36; } }
.vb-scoregauge-n.mystery { color: var(--accent-content-quality); animation: vb-mystery-pulse 1.7s ease-in-out infinite; }
@keyframes vb-mystery-pulse { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

.vb-table { border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.vb-head, .vb-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; align-items: center; }
.vb-head {
  background: var(--bg-recessed); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-tertiary); padding: 11px 16px;
}
.vb-head .col-x { text-align: center; }
.vb-head .col-xd { text-align: center; color: var(--accent-content-quality); }
.vb-row { padding: 13px 16px; border-top: 1px solid var(--border-subtle); font-size: 13.5px; }
.vb-row .label { color: var(--text-primary); font-weight: 600; }
.vb-row .label span { display: block; font-weight: 400; color: var(--text-secondary); font-size: 12px; margin-top: 2px; }
.vb-mark { text-align: center; font-size: 15px; font-weight: 900; }
.vb-mark.no { color: var(--accent-lists-risk); opacity: 0.7; }
.vb-mark.yes { color: var(--accent-content-quality); }
.vb-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--bg-recessed); padding: 13px 16px; border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
}
.vb-foot b { color: var(--accent-content-quality); }
.vb-cta { text-align: center; }
.vb-cta a.btn {
  font-family: var(--font-mono); font-size: 14.5px; font-weight: 700;
  background: var(--accent-content-quality); color: var(--bg-base); border-radius: 9px;
  padding: 14px 24px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(94,229,209,0.4);
}

/* ---------- CTA band (post-diagnosis sign-in ask) ---------- */
.uth-ctaband {
  background:
    radial-gradient(ellipse 500px 260px at 50% -10%, rgba(94, 229, 209, 0.14), transparent 65%),
    var(--bg-elevated);
  border: 1px solid rgba(94, 229, 209, 0.28); border-radius: 18px;
  padding: 36px 30px; text-align: center; margin-bottom: var(--space-9);
}
.uth-ctaband h3 { margin: 0 0 10px; font-size: 21px; color: var(--text-primary); }
.uth-ctaband p { margin: 0 0 var(--space-5); color: var(--text-secondary); font-size: 14.5px; max-width: 540px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.uth-ctaband p .og { color: var(--accent-graph-strength); font-weight: 600; }
.uth-ctaband .btn { display: inline-flex; }

/* ---------- claimed banner (logged-in visitor) ---------- */
.uth-claimed-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(94, 229, 209, 0.06); border: 1px solid rgba(94, 229, 209, 0.28);
  border-radius: 14px; padding: 18px 22px; margin-bottom: var(--space-9);
  font-family: var(--font-mono); font-size: 14px; color: var(--text-primary);
}
.uth-claimed-banner b { color: var(--accent-content-quality); }
.uth-claimed-banner a { color: var(--accent-content-quality); }

[data-uth-state] { display: none; }
body[data-uth-active="input"] [data-uth-state="input"] { display: block; }
body[data-uth-active="scanning"] [data-uth-state="scanning"] { display: block; }
body[data-uth-active="results"] [data-uth-state="results"] { display: block; }

@media (max-width: 640px) {
  .uth-title { font-size: 32px; }
  .uth-dek { font-size: 15.5px; }
  .uth-card { padding: 20px; }
  .uth-sharewrap-inner { flex-direction: column; }
  .uth-sharecard { width: 100%; }
  .uth-labelcard .head { flex-direction: column; align-items: flex-start; }
  .uth-labelcard .stat { text-align: left; }
  .vb-head, .vb-row { grid-template-columns: 1.1fr 0.8fr 0.8fr; font-size: 12px; }
}