/* ================================================================
   VEHICLY — BuyerIndex Page Styles (polished)
   ================================================================ */

/* ─── RESET & BASE ─── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
    --honey-text:var(--vh-primary-dark);
    --bg-warm:var(--vh-bg);
    --ease-spring:cubic-bezier(.22,1,.36,1);
    --ease-bounce:cubic-bezier(.34,1.56,.64,1);
    --ease-smooth:cubic-bezier(.4,0,.2,1);
    --dur-fast:.15s;
    --dur-base:.25s;
    --dur-slow:.4s;
    --glow-good:0 0 12px rgba(var(--vh-success-rgb),.3);
    --glow-fair:0 0 12px rgba(var(--vh-warning-rgb),.3);
    --glow-bad:0 0 12px rgba(var(--vh-error-rgb),.3);
    --glow-primary:rgba(var(--vh-primary-rgb),.35);
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100%;text-rendering:optimizeLegibility}
body{font-family:var(--vh-font-body);color:var(--vh-text);height:100%;overflow:hidden;background:var(--vh-bg);font-feature-settings:'cv02','cv03','cv04','cv11'}
body::before{display:none}

.app{display:flex;height:100vh;width:100%;overflow-x:hidden}

/* ─── SKIP LINK ─── */
.vh-skip-link{position:absolute;top:-100%;left:1rem;z-index:10000;padding:.75rem 1.25rem;background:var(--vh-primary);color:var(--vh-on-primary,#1a1a1a);font-weight:700;font-size:.85rem;border-radius:0 0 10px 10px;text-decoration:none;transition:top var(--dur-base) var(--ease-spring)}
.vh-skip-link:focus{top:0}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════ */
.sidebar{width:260px;background:var(--vh-surface,#FAFAF7);display:flex;flex-direction:column;flex-shrink:0;border-right:1.5px solid var(--vh-border);z-index:100;transition:width .35s var(--ease-smooth),box-shadow .35s ease;overflow:hidden;animation:vh-slideFromLeft .4s var(--ease-spring) both}
.sidebar.collapsed{width:0;border-right-color:transparent;box-shadow:none}
.sidebar.collapsed .sidebar-inner{opacity:0;pointer-events:none;transform:translateX(-12px)}
.sidebar-inner{display:flex;flex-direction:column;height:100%;min-width:260px;opacity:1;transition:opacity var(--dur-base) ease,transform .3s var(--ease-smooth);transform:translateX(0)}
.sidebar-head{padding:1.5rem 1.25rem 1rem;display:flex;align-items:center;justify-content:space-between}
.sidebar-brand{display:flex;align-items:center;gap:.5rem;text-decoration:none}
.sidebar-dot{width:8px;height:8px;border-radius:50%;background:var(--vh-primary);box-shadow:0 2px 8px rgba(var(--vh-primary-rgb),.35)}
.sidebar-brand-text{font-weight:700;font-size:.95rem;color:var(--vh-text);letter-spacing:-.03em}
.sidebar-new{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--vh-primary);color:var(--vh-on-primary,#1a1a1a);border:none;border-radius:var(--radius-sm, 10px);cursor:pointer;transition:all var(--dur-base) var(--ease-spring);box-shadow:0 2px 10px rgba(var(--vh-primary-rgb),.25);position:relative;overflow:hidden}
.sidebar-new::after{content:'';position:absolute;inset:-2px;border-radius:var(--radius-md, 12px);background:var(--vh-primary);opacity:0;filter:blur(8px);transition:opacity .4s ease;z-index:-1}
.sidebar-new:hover{transform:translateY(-1px) scale(1.06);box-shadow:0 4px 18px rgba(var(--vh-primary-rgb),.4)}
.sidebar-new:hover::after{opacity:.5;animation:newBtnGlow 2s ease-in-out infinite}
.sidebar-new:active{transform:scale(.92)}
@keyframes newBtnGlow{0%,100%{opacity:.3}50%{opacity:.6}}
.sidebar-new svg{width:15px;height:15px}
.sidebar-section{padding:1rem 1.25rem .4rem;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--vh-text-muted);display:flex;align-items:center;gap:.4rem}
.sidebar-section svg{width:12px;height:12px;opacity:.5;flex-shrink:0}
.sidebar-items{flex:1;overflow-y:auto;padding:0 .65rem;scrollbar-width:none}
.sidebar-items::-webkit-scrollbar{width:0}
.sidebar-entry{display:flex;align-items:center;gap:.55rem;padding:.55rem .65rem;border-radius:var(--radius-sm, 10px);cursor:pointer;color:var(--vh-text-secondary);font-size:.8rem;font-weight:400;white-space:nowrap;overflow:hidden;transition:background var(--dur-base) ease,color .2s ease,transform .2s var(--ease-spring),border-color .2s ease,box-shadow .2s ease;position:relative;border-left:3px solid transparent}
.sidebar-entry:hover{background:rgba(var(--vh-primary-rgb),.08);color:var(--vh-text);transform:translateX(3px);box-shadow:inset 0 0 0 1px rgba(var(--vh-primary-rgb),.08)}
.sidebar-entry.active{background:rgba(var(--vh-primary-rgb),.12);color:var(--vh-text);font-weight:500;border-left-color:var(--vh-primary);box-shadow:0 2px 8px rgba(var(--vh-primary-rgb),.08)}
.sidebar-entry:focus-visible{outline:2px solid var(--vh-primary);outline-offset:-2px;border-radius:var(--radius-sm, 10px)}
.sidebar-entry-icon{width:14px;height:14px;flex-shrink:0;opacity:.35;transition:opacity .2s ease,color .2s ease,transform .2s var(--ease-spring)}
.sidebar-entry:hover .sidebar-entry-icon{opacity:.6;transform:scale(1.1)}
.sidebar-entry.active .sidebar-entry-icon{opacity:.75;color:var(--vh-primary);transform:scale(1.05)}
.sidebar-entry-text{overflow:hidden;text-overflow:ellipsis}
.sidebar-entry-del{opacity:0;margin-left:auto;padding:4px;background:none;border:none;cursor:pointer;color:var(--vh-text-tertiary);flex-shrink:0;border-radius:var(--radius-xs, 8px);transition:all var(--dur-base) var(--ease-spring);display:flex;transform:scale(.8)}
.sidebar-entry:hover .sidebar-entry-del{opacity:1;transform:scale(1)}
.sidebar-entry-del:hover{color:var(--vh-error, #dc2626);background:rgba(var(--vh-error-rgb),.08)}
.sidebar-entry-del:active{transform:scale(.85)}
.sidebar-entry-del:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px;opacity:1;transform:scale(1)}
.sidebar-entry-del svg{width:11px;height:11px}
/* Delete confirmation state */
.sidebar-entry-del.confirming{opacity:1;transform:scale(1);color:#fff;background:var(--vh-error, #dc2626);border-radius:var(--radius-xs, 8px);padding:3px 6px;gap:2px}
.sidebar-entry-del.confirming svg{display:none}
.sidebar-entry-del.confirming::after{content:'Delete?';font-size:.58rem;font-weight:600;white-space:nowrap;letter-spacing:.02em}
.sidebar-entry-num{font-size:.55rem;font-weight:700;color:var(--vh-primary);background:rgba(var(--vh-primary-rgb),.1);padding:1px 5px;border-radius:var(--radius-xs, 8px);flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sidebar-foot{padding:1rem;border-top:1.5px solid var(--vh-border);display:flex;flex-direction:column;gap:.25rem}
.sidebar-link{display:flex;align-items:center;gap:.45rem;padding:.45rem .55rem;border-radius:var(--radius-xs, 8px);cursor:pointer;color:var(--vh-text-tertiary);font-size:.75rem;font-weight:400;text-decoration:none;border:none;background:none;font-family:inherit;width:100%;transition:all .2s ease}
.sidebar-link:hover{background:var(--vh-bg-highlight);color:var(--vh-text-muted)}
.sidebar-link:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.sidebar-link svg{width:13px;height:13px;transition:transform .35s var(--ease-spring)}
#collapseBtn svg{transition:transform .35s var(--ease-spring)}
.sidebar.collapsed~.main #expandBtn svg{transform:rotate(0deg)}
.topbar-expand svg{transition:transform .35s var(--ease-spring)}
.sidebar-user{display:flex;align-items:center;gap:.55rem;padding:.55rem;border-radius:var(--radius-sm, 10px);cursor:pointer;transition:all .2s ease;text-decoration:none}
.sidebar-user:hover{background:var(--vh-bg-highlight)}
.sidebar-user:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.sidebar-avatar{width:28px;height:28px;border-radius:var(--radius-xs, 8px);background:var(--vh-primary);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.65rem;color:var(--vh-on-primary,#1a1a1a);flex-shrink:0}
.sidebar-user-info{flex:1}
.sidebar-user-name{color:var(--vh-text);font-size:.78rem;font-weight:500}
.sidebar-user-plan{color:var(--vh-text-tertiary);font-size:.62rem;font-weight:500;text-transform:capitalize}
.sidebar-settings-icon{width:14px;height:14px;color:var(--vh-text-tertiary);flex-shrink:0}

/* ─── SIDEBAR CREDITS ─── */
.sidebar-credits{display:flex;align-items:center;gap:.4rem;margin:0 1.25rem .75rem;padding:.5rem .75rem;background:rgba(var(--vh-primary-rgb),.06);border:1.5px solid rgba(var(--vh-primary-rgb),.2);border-radius:var(--radius-sm, 10px);font-size:.72rem;font-weight:600;color:var(--vh-text-muted);transition:all .35s var(--ease-smooth)}
.sidebar-credits svg{width:14px;height:14px;color:var(--vh-primary);flex-shrink:0;opacity:.7;transition:color .3s ease}
.sidebar-credits span:first-of-type{color:var(--vh-text);font-weight:700;font-size:.82rem;font-variant-numeric:tabular-nums;transition:color .3s ease}
/* Low credits warning */
.sidebar-credits.low-credits{background:rgba(var(--vh-error-rgb),.06);border-color:rgba(var(--vh-error-rgb),.25)}
.sidebar-credits.low-credits svg{color:var(--vh-error, #dc2626);animation:creditsPulseWarn 2s ease-in-out infinite}
.sidebar-credits.low-credits span:first-of-type{color:var(--vh-error, #dc2626)}
@keyframes creditsPulseWarn{0%,100%{opacity:.7}50%{opacity:1}}
/* Credits pill low state */
.credits-pill.low-credits{background:var(--vh-error, #dc2626);box-shadow:0 2px 10px rgba(var(--vh-error-rgb),.25)}
.credits-pill.low-credits:hover{box-shadow:0 4px 16px rgba(var(--vh-error-rgb),.35)}

/* ─── SIDEBAR DATE GROUPS ─── */
.sidebar-date-group{padding:.6rem 1.25rem .3rem;font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--vh-text-tertiary)}
.sidebar-date-group-expired{opacity:.6}

/* ─── SIDEBAR SAVED ─── */
.sidebar-saved-items{max-height:220px}
.sidebar-empty-mini{display:flex;align-items:center;gap:.5rem;padding:.65rem 1rem;color:var(--vh-text-tertiary);font-size:.72rem;animation:emptyFadeIn .4s var(--ease-spring) both}
.sidebar-empty-mini-icon{width:14px;height:14px;opacity:.4;flex-shrink:0}
/* Saved item date subheaders */
.sidebar-saved-date{padding:.45rem 1rem .2rem;font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--vh-text-tertiary);opacity:.7}
.sidebar-saved-items .sidebar-entry{border-left:3px solid transparent}
.sidebar-saved-items .sidebar-entry:hover{border-left-color:rgba(var(--vh-primary-rgb),.3)}

/* ─── SIDEBAR REACTIVATE ─── */
.sidebar-entry-expired{opacity:.5}
.sidebar-entry-reactivate{display:none;margin-left:auto;padding:3px;background:none;border:none;cursor:pointer;color:var(--vh-text-tertiary);flex-shrink:0;border-radius:var(--radius-xs, 8px);transition:all var(--dur-fast)}
.sidebar-entry:hover .sidebar-entry-reactivate{display:flex}
.sidebar-entry-reactivate:hover{color:var(--vh-primary);background:rgba(var(--vh-primary-rgb),.1)}
.sidebar-entry-reactivate:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px;display:flex}
.sidebar-entry-reactivate svg{width:11px;height:11px}

/* ─── SIDEBAR EMPTY STATE ─── */
.sidebar-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.5rem;text-align:center;flex:1;animation:emptyFadeIn .5s var(--ease-spring) both}
.sidebar-empty-icon{width:48px;height:48px;color:var(--vh-primary);opacity:.25;margin-bottom:1rem;animation:emptyFloat 3s ease-in-out infinite}
.sidebar-empty-heading{font-size:.82rem;font-weight:600;color:var(--vh-text);margin-bottom:.4rem}
.sidebar-empty-text{font-size:.75rem;color:var(--vh-text-tertiary);line-height:1.6;margin-bottom:1.25rem;max-width:190px}
.sidebar-empty-btn{padding:.5rem 1.1rem;background:var(--vh-primary);color:var(--vh-on-primary,#1a1a1a);border:none;border-radius:var(--radius-sm, 10px);font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .25s var(--ease-spring);box-shadow:0 2px 10px rgba(var(--vh-primary-rgb),.2);display:flex;align-items:center;gap:.35rem}
.sidebar-empty-btn:hover{background:var(--vh-primary-hover);transform:translateY(-2px);box-shadow:0 4px 16px rgba(var(--vh-primary-rgb),.35)}
.sidebar-empty-btn:active{transform:scale(.94)}
.sidebar-empty-btn svg{width:13px;height:13px}
.sidebar-empty-hint{font-size:.62rem;color:var(--vh-text-tertiary);margin-top:.85rem;display:flex;align-items:center;gap:.3rem;opacity:.6}
.sidebar-empty-hint svg{width:10px;height:10px;flex-shrink:0}

/* ─── SIDEBAR ENTRANCE ─── */
@keyframes vh-slideFromLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
.sidebar-entry.stagger-in{animation:vh-entryIn .35s var(--ease-spring) both}
@keyframes vh-entryIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}

/* ─── SIDEBAR OVERLAY ─── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:90;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .3s ease}
.sidebar-overlay.open{display:block;opacity:1}

/* ═══════════════════════════════════════════════════════════════
   MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════ */
.main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative;overflow:hidden;animation:vh-mainFadeIn .5s var(--ease-spring) .15s both}
@keyframes vh-mainFadeIn{from{opacity:0}to{opacity:1}}

/* ─── TOPBAR ─── */
.topbar{height:56px;background:var(--vh-surface-translucent,rgba(250,250,247,.92));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--vh-border);display:flex;align-items:center;padding:0 1.75rem;flex-shrink:0;z-index:10;gap:.5rem;transition:all .45s var(--ease-smooth)}
.topbar-expand{display:none;background:none;border:none;cursor:pointer;padding:.35rem;border-radius:var(--radius-xs, 8px);color:var(--vh-text-muted)}
.topbar-expand:hover{background:var(--vh-bg);color:var(--vh-text)}
.topbar-expand:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.topbar-expand svg{width:18px;height:18px}
.app.sidebar-hidden .topbar-expand{display:flex}
.topbar-brand{font-weight:700;font-size:.88rem;color:var(--vh-text);letter-spacing:-.03em}
.credits-pill{display:flex;align-items:center;gap:.35rem;padding:.4rem .9rem;background:var(--vh-primary);color:var(--vh-on-primary,#1a1a1a);font-size:.72rem;font-weight:600;border-radius:var(--radius-pill, 9999px);box-shadow:0 2px 10px rgba(var(--vh-primary-rgb),.25);transition:all .3s var(--ease-smooth);letter-spacing:-.01em}
.credits-pill:hover{box-shadow:0 4px 16px rgba(var(--vh-primary-rgb),.35);transform:translateY(-1px)}
.credits-pill svg{width:14px;height:14px;opacity:.6}
.topbar-spacer{flex:1}

/* Credits pulse on update */
@keyframes vh-creditPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.credits-pulse{animation:vh-creditPulse .4s var(--ease-spring)}

/* ─── CONTENT ─── */
.content{flex:1;overflow-y:auto;display:flex;flex-direction:column;position:relative;scroll-behavior:smooth}
.content::-webkit-scrollbar{width:3px}
.content::-webkit-scrollbar-thumb{background:rgba(var(--vh-primary-rgb),.25);border-radius:var(--radius-xs, 8px)}
.content::-webkit-scrollbar-track{background:transparent}

/* ═══════════════════════════════════════════════════════════════
   HERO / URL INPUT
   ═══════════════════════════════════════════════════════════════ */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 2rem 8rem;animation:heroIn .5s var(--ease-smooth) both}
@keyframes heroIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.hero-engine{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .9rem;background:rgba(var(--vh-primary-rgb),.08);border:1.5px solid rgba(var(--vh-primary-rgb),.25);border-radius:var(--radius-pill, 9999px);font-size:.62rem;font-weight:600;color:var(--vh-text-muted);letter-spacing:.06em;margin-bottom:2rem;text-transform:uppercase;box-shadow:var(--shadow-xs);animation:paragraphFadeIn .4s var(--ease-spring) both}
.hero-engine-dot{width:6px;height:6px;border-radius:50%;background:var(--vh-primary);animation:pulse 2.5s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--vh-primary-rgb),.6)}70%{box-shadow:0 0 0 8px rgba(var(--vh-primary-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--vh-primary-rgb),0)}}

.hero h1{font-family:var(--vh-font-display);font-size:clamp(2rem,4.5vw,2.75rem);font-weight:700;letter-spacing:-.02em;color:var(--vh-text);text-align:center;line-height:1.12;max-width:540px;margin-bottom:.75rem;animation:heroTitleIn .6s var(--ease-spring) .1s both}
.hero h1 em{font-style:normal}
.hero-sub{font-size:.95rem;color:var(--vh-text-muted);text-align:center;max-width:420px;line-height:1.6;margin-bottom:2.75rem;font-weight:400;animation:heroSubIn .5s var(--ease-spring) .2s both}

@keyframes heroTitleIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes heroSubIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Mode switch */
.mode-switch{display:flex;gap:2px;background:rgba(var(--vh-primary-rgb),.06);border-radius:var(--radius-md, 12px);padding:4px;margin-bottom:1.5rem;border:1.5px solid rgba(var(--vh-primary-rgb),.2)}
.mode-switch-btn{padding:.55rem 1.25rem;border:none;background:none;cursor:pointer;font-family:inherit;font-size:.8rem;font-weight:500;color:var(--vh-text-muted);border-radius:var(--radius-xs, 8px);transition:all .3s var(--ease-smooth);display:flex;align-items:center;gap:.4rem}
.mode-switch-btn.active{background:var(--vh-surface);color:var(--vh-text);box-shadow:0 2px 8px rgba(var(--vh-primary-rgb),.12)}
.mode-switch-btn:hover:not(.active){color:var(--vh-text-secondary);background:rgba(var(--vh-primary-rgb),.04)}
.mode-switch-btn:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.mode-switch-btn svg{width:14px;height:14px;opacity:.45}
.mode-switch-btn.active svg{opacity:.65;color:var(--vh-text)}

/* Hero input */
.hero-input-wrap{width:100%;max-width:580px;animation:heroInputIn .5s var(--ease-spring) .3s both}
@keyframes heroInputIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes shakeInput{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.hero-input-box{background:var(--vh-surface);border:2px solid var(--vh-border);border-radius:var(--radius-lg, 18px);transition:border-color .3s ease,box-shadow .3s ease;box-shadow:0 2px 12px rgba(31,31,31,.03)}
.hero-input-box:focus-within{border-color:var(--vh-primary);box-shadow:0 0 0 4px rgba(var(--vh-primary-rgb),.1),0 4px 16px rgba(var(--vh-primary-rgb),.06)}
.hero-input-row{display:flex;align-items:center}
.hero-paste-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:none;border:none;cursor:pointer;color:var(--vh-text-tertiary);border-radius:var(--radius-sm, 10px);margin-left:.55rem;flex-shrink:0;transition:all .2s ease}
.hero-paste-btn:hover{color:var(--vh-primary);background:rgba(var(--vh-primary-rgb),.08)}
.hero-paste-btn:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.hero-paste-btn svg{width:18px;height:18px}
.hero-input{flex:1;padding:1.15rem .75rem 1.15rem .5rem;font-size:.95rem;font-family:inherit;border:none;background:transparent;color:var(--vh-text);outline:none;line-height:1.5;min-height:52px;transition:color .2s ease}
.hero-input::placeholder{color:var(--vh-text-tertiary)}
.hero-send{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:var(--vh-primary);border:none;border-radius:var(--radius-md, 12px);cursor:pointer;margin:.5rem .55rem;opacity:0;pointer-events:none;transform:scale(.85);transition:all var(--dur-base) var(--ease-bounce)}
.hero-send.ready{opacity:1;pointer-events:auto;transform:scale(1)}
.hero-send:hover{background:var(--vh-primary-hover);transform:scale(1.04)}
.hero-send:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px}
.hero-send svg{width:16px;height:16px;color:var(--vh-on-primary,#1a1a1a)}

.hero-hint{margin-top:1.5rem;font-size:.68rem;color:var(--vh-text-tertiary);letter-spacing:.01em}

/* URL validation feedback */
.hero-input-box.url-valid{border-color:var(--vh-success);box-shadow:0 0 0 4px rgba(var(--vh-success-rgb),.08),0 4px 12px rgba(var(--vh-success-rgb),.06)}
.hero-input-box.url-invalid{border-color:var(--vh-error);box-shadow:0 0 0 4px rgba(var(--vh-error-rgb),.06)}
.hero-input-box.url-invalid .hero-input{color:var(--vh-error)}
.hero-validation-msg{position:absolute;bottom:-1.6rem;left:.5rem;font-size:.65rem;font-weight:500;opacity:0;transform:translateY(-4px);transition:all .25s var(--ease-spring);pointer-events:none}
.hero-validation-msg.show{opacity:1;transform:translateY(0)}
.hero-validation-msg.valid{color:var(--vh-success)}
.hero-validation-msg.invalid{color:var(--vh-error)}
.hero-input-wrap{position:relative}

/* Paste detection flash */
.hero-input-box.paste-flash{animation:pasteFlash .5s var(--ease-spring)}
@keyframes pasteFlash{0%{box-shadow:0 0 0 0 rgba(var(--vh-primary-rgb),.4)}50%{box-shadow:0 0 0 8px rgba(var(--vh-primary-rgb),.15)}100%{box-shadow:0 0 0 0 rgba(var(--vh-primary-rgb),0)}}
.results-input-compact.paste-flash{animation:pasteFlash .5s var(--ease-spring)}

/* ═══════════════════════════════════════════════════════════════
   RESULTS VIEW
   ═══════════════════════════════════════════════════════════════ */
.results-view{display:none;flex-direction:column;min-height:100%}

.results-input-bar{padding:.75rem 1.75rem;background:var(--vh-surface-translucent,rgba(250,250,247,.88));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1.5px solid var(--vh-border);display:flex;align-items:center;gap:.65rem;flex-shrink:0;position:sticky;top:0;z-index:5}
.results-input-icon{width:16px;height:16px;color:var(--vh-text-tertiary);margin-left:.75rem;flex-shrink:0}
.results-input-compact{flex:1;max-width:620px;background:rgba(var(--vh-primary-rgb),.03);border:1.5px solid var(--vh-border);border-radius:var(--radius-md, 12px);display:flex;align-items:center;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease,background .3s ease}
.results-input-compact:focus-within{border-color:var(--vh-primary);background:var(--vh-surface);box-shadow:0 0 0 4px rgba(var(--vh-primary-rgb),.08),0 4px 12px rgba(var(--vh-primary-rgb),.06)}
.results-input-field{flex:1;padding:.6rem .9rem;font-size:.82rem;font-family:inherit;border:none;background:transparent;color:var(--vh-text);outline:none}
.results-input-field::placeholder{color:var(--vh-text-tertiary)}
.results-send-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--vh-primary);border:none;border-radius:var(--radius-xs, 8px);cursor:pointer;margin:.25rem;opacity:0;pointer-events:none;transition:all var(--dur-base) var(--ease-smooth)}
.results-send-btn.ready{opacity:1;pointer-events:auto}
.results-send-btn:hover{background:var(--vh-primary-hover);transform:scale(1.05)}
.results-send-btn:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px}
.results-send-btn svg{width:13px;height:13px;color:var(--vh-on-primary,#1a1a1a)}
.results-mode-pills{display:flex;gap:2px;background:rgba(var(--vh-primary-rgb),.04);border-radius:var(--radius-xs, 8px);padding:3px;border:1.5px solid rgba(var(--vh-primary-rgb),.15)}
.results-mode-pill{padding:.38rem .7rem;border:none;background:none;cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:500;color:var(--vh-text-tertiary);border-radius:var(--radius-xs, 8px);transition:all .3s var(--ease-spring);position:relative}
.results-mode-pill.active{background:var(--vh-surface);color:var(--vh-text);box-shadow:0 2px 8px rgba(var(--vh-primary-rgb),.12)}
.results-mode-pill:hover:not(.active){background:rgba(var(--vh-primary-rgb),.04);color:var(--vh-text-secondary)}
.results-mode-pill:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}

.results-flow{max-width:740px;width:100%;margin:0 auto;padding:2rem 2rem 5rem;display:flex;flex-direction:column;gap:1.25rem}

/* ═══════════════════════════════════════════════════════════════
   VERDICT HERO CARD
   ═══════════════════════════════════════════════════════════════ */
.verdict-hero{background:var(--vh-surface);border-radius:var(--radius-xl, 22px);padding:2.25rem 2.5rem;border:1.5px solid var(--vh-border);position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(31,31,31,.03);transition:transform .35s var(--ease-spring),box-shadow .35s var(--ease-spring),border-color .35s ease}
.verdict-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.verdict-hero.good::before{background:linear-gradient(90deg,var(--vh-success),rgba(var(--vh-success-rgb),.4))}
.verdict-hero.fair::before{background:linear-gradient(90deg,var(--vh-warning),rgba(var(--vh-warning-rgb),.4))}
.verdict-hero.bad::before{background:linear-gradient(90deg,var(--vh-error),rgba(var(--vh-error-rgb),.4))}
.verdict-hero.info::before{background:linear-gradient(90deg,var(--vh-primary),rgba(var(--vh-primary-rgb),.4))}
/* Color-coded subtle background tint */
.verdict-hero.good{background:linear-gradient(135deg,var(--vh-surface) 60%,rgba(var(--vh-success-rgb),.03));border-color:rgba(var(--vh-success-rgb),.2)}
.verdict-hero.fair{background:linear-gradient(135deg,var(--vh-surface) 60%,rgba(var(--vh-warning-rgb),.03));border-color:rgba(var(--vh-warning-rgb),.2)}
.verdict-hero.bad{background:linear-gradient(135deg,var(--vh-surface) 60%,rgba(var(--vh-error-rgb),.03));border-color:rgba(var(--vh-error-rgb),.2)}
.verdict-hero:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(var(--vh-primary-rgb),.12),0 4px 12px rgba(31,31,31,.04);border-color:rgba(var(--vh-primary-rgb),.3)}

.verdict-signal{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}
.verdict-icon{width:44px;height:44px;border-radius:var(--radius-md, 12px);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.verdict-icon.good{background:var(--vh-success-bg);color:var(--vh-success)}
.verdict-icon.fair{background:var(--vh-warning-bg);color:var(--vh-warning)}
.verdict-icon.bad{background:var(--vh-error-bg);color:var(--vh-error)}
.verdict-icon.info{background:rgba(var(--vh-primary-rgb),.12);color:var(--vh-primary)}
.verdict-icon svg{width:22px;height:22px}
.verdict-label{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.verdict-label.good{color:var(--vh-success)}
.verdict-label.fair{color:var(--vh-warning)}
.verdict-label.bad{color:var(--vh-error)}
.verdict-label.info{color:var(--vh-primary)}
.verdict-headline{font-family:var(--vh-font-display);font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:var(--vh-text);line-height:1.2}
.verdict-subtitle{font-size:.82rem;color:var(--vh-text-muted);margin-bottom:1rem}
.verdict-text{font-family:var(--vh-font-body);font-size:1.1rem;font-weight:600;color:var(--vh-text);margin-bottom:1.25rem;line-height:1.5}

.verdict-body{font-size:.88rem;line-height:1.75;color:var(--vh-text-secondary);margin-bottom:1.5rem;transition:max-height var(--dur-slow) var(--ease-smooth)}
.verdict-body.collapsed{max-height:300px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);mask-image:linear-gradient(to bottom,#000 60%,transparent 100%)}
.verdict-body p{margin-bottom:.5rem}
.verdict-body p:last-child{margin-bottom:0}

.verdict-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.5rem;margin-bottom:1.5rem}
.verdict-stat{padding:.8rem .9rem;background:rgba(var(--vh-primary-rgb),.04);border-radius:var(--radius-md, 12px);border:1px solid var(--vh-border);transition:all .3s ease}
.verdict-stat:hover{background:rgba(var(--vh-primary-rgb),.08);border-color:rgba(var(--vh-primary-rgb),.25)}
.verdict-stat-label{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--vh-text-muted);margin-bottom:.3rem}
.verdict-stat-value{font-size:1.05rem;font-weight:700;color:var(--vh-text);letter-spacing:-.02em}
.verdict-stat-note{font-size:.65rem;color:var(--vh-text-muted);margin-top:.15rem}

.verdict-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-top:1.25rem;border-top:1px solid var(--vh-border)}

/* ═══════════════════════════════════════════════════════════════
   RESULT CARD
   ═══════════════════════════════════════════════════════════════ */
.result-card{position:relative;background:var(--vh-surface);border:1.5px solid var(--vh-border);border-radius:var(--radius-xl, 22px);padding:1.65rem 1.85rem;box-shadow:0 1px 4px rgba(31,31,31,.02);transition:transform .35s var(--ease-spring),box-shadow .35s var(--ease-spring),border-color .35s ease}
.result-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--vh-primary);border-radius:20px 20px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-smooth)}
.result-card:hover::before{transform:scaleX(1)}
.result-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(var(--vh-primary-rgb),.12),0 4px 12px rgba(31,31,31,.04);border-color:rgba(var(--vh-primary-rgb),.3)}

.card-top{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}

/* ─── SCORE RING with color-coded glow ─── */
.score-ring{position:relative;width:54px;height:54px;flex-shrink:0}
.score-ring svg{width:54px;height:54px}
.score-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;color:var(--vh-text)}
.anim-in .score-ring{animation:scorePopIn .5s var(--ease-bounce) .15s both}
@keyframes scorePopIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

/* Score glow based on value — applied via JS data attribute */
/* Use will-change:filter only on the ring itself, not ancestors, to limit paint scope */
.score-ring[data-score-level="good"]{filter:drop-shadow(0 0 10px var(--glow-good));will-change:filter}
.score-ring[data-score-level="fair"]{filter:drop-shadow(0 0 10px var(--glow-fair));will-change:filter}
.score-ring[data-score-level="bad"]{filter:drop-shadow(0 0 10px var(--glow-bad));will-change:filter}
/* Prominent score number */
.score-num{font-variant-numeric:tabular-nums}
.score-ring[data-score-level="good"] .score-num{color:var(--vh-success)}
.score-ring[data-score-level="fair"] .score-num{color:var(--vh-warning)}
.score-ring[data-score-level="bad"] .score-num{color:var(--vh-error)}

/* Price display highlight */
.price-highlight{display:inline-flex;align-items:baseline;gap:.25rem;font-size:1.3rem;font-weight:800;color:var(--vh-text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price-highlight-currency{font-size:.85rem;font-weight:600;color:var(--vh-text-muted)}
.price-highlight-compare{font-size:.72rem;font-weight:600;padding:.15rem .5rem;border-radius:var(--radius-xs, 8px);margin-left:.4rem}
.price-highlight-compare.below{background:var(--vh-success-bg);color:var(--vh-success)}
.price-highlight-compare.above{background:var(--vh-error-bg);color:var(--vh-error)}
.price-highlight-compare.fair{background:var(--vh-warning-bg);color:var(--vh-warning)}

/* Key findings preview */
.card-findings{display:flex;flex-direction:column;gap:.35rem;margin:.65rem 0 .85rem;padding:.65rem .85rem;background:var(--vh-bg);border-radius:var(--radius-sm, 10px);border:1px solid var(--vh-border)}
.card-finding{display:flex;align-items:flex-start;gap:.4rem;font-size:.78rem;line-height:1.5;color:var(--vh-text-secondary)}
.card-finding-icon{width:14px;height:14px;flex-shrink:0;margin-top:2px}
.card-finding-icon.good{color:var(--vh-success)}
.card-finding-icon.bad{color:var(--vh-error)}
.card-finding-icon.warn{color:var(--vh-warning)}
.card-finding-icon.info{color:var(--vh-primary)}
.card-finding strong{color:var(--vh-text);font-weight:600}

/* ─── CARD BADGE with color coding ─── */
.card-badge{display:inline-flex;padding:.22rem .55rem;font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-xs, 8px);animation:badgeBounce .4s var(--ease-bounce) .2s both}
.anim-in .card-badge{animation:badgeBounce .4s var(--ease-bounce) .2s both}
.card-badge.price{background:var(--vh-success-bg);color:var(--vh-success);box-shadow:0 0 8px var(--glow-good)}
.card-badge.info{background:var(--vh-bg);color:var(--vh-text-secondary)}
.card-badge.warning{background:var(--vh-warning-bg);color:var(--vh-warning);box-shadow:0 0 8px var(--glow-fair)}
.card-badge.error{background:var(--vh-error-bg);color:var(--vh-error);box-shadow:0 0 8px var(--glow-bad)}
.card-badge.verdict{background:var(--vh-bg);color:var(--vh-text-secondary);border:1px solid var(--vh-border)}
@keyframes badgeBounce{0%{transform:scale(0);opacity:0}50%{transform:scale(1.15)}70%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}

.card-actions-row{display:flex;gap:.15rem}
.card-act{background:none;border:none;padding:.35rem;border-radius:var(--radius-xs, 8px);cursor:pointer;color:var(--vh-text-tertiary);transition:all .2s ease;display:flex}
.card-act:hover{background:var(--vh-bg);color:var(--vh-text-muted)}
.card-act.saved{color:#e74c6f}
.card-act.saved svg{fill:#e74c6f;stroke:#e74c6f}
.card-act:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.card-act svg{width:14px;height:14px;transition:transform .3s var(--ease-bounce),fill .3s ease,stroke .3s ease}
/* Heart save animation */
@keyframes heartPop{0%{transform:scale(1)}15%{transform:scale(.75)}30%{transform:scale(1.25)}45%{transform:scale(.95)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.card-act.heart-anim svg{animation:heartPop .6s var(--ease-spring)}
@keyframes heartBurst{0%{opacity:1;transform:scale(0)}50%{opacity:.6;transform:scale(1.8)}100%{opacity:0;transform:scale(2.5)}}
.card-act[data-act="save"]::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle,rgba(231,76,111,.3),transparent 70%);opacity:0;pointer-events:none}
.card-act.heart-anim[data-act="save"]::after{animation:heartBurst .5s var(--ease-smooth)}
.card-act[data-act="save"]{position:relative}
/* ─── Floating action buttons (top-right) ─── */
.card-actions-float{position:absolute;top:1rem;right:1rem;display:flex;gap:.15rem;z-index:1}

.card-title{font-family:var(--vh-font-display);font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--vh-text);line-height:1.25;margin-bottom:.15rem;padding-right:5rem}
.card-subtitle{font-size:.78rem;color:var(--vh-text-muted);margin-bottom:1rem;font-weight:400}

/* ─── CENTERED SCORE SECTION (report style) ─── */
.card-score-section{display:flex;flex-direction:column;align-items:center;padding:1.25rem 0 .75rem;text-align:center}
.card-score-ring{position:relative;width:110px;height:110px}
.card-score-ring svg{width:100%;height:100%}
.card-score-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:800;letter-spacing:-.03em;color:var(--vh-text)}
.card-score-label{margin-top:.6rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.card-score-label.good{color:var(--vh-success)}
.card-score-label.fair{color:var(--vh-warning)}
.card-score-label.bad{color:var(--vh-error)}
.card-score-summary{margin-top:.5rem;font-size:.82rem;color:var(--vh-text-secondary);max-width:500px;line-height:1.6}

/* ─── PRICE COMPARISON GRID (report style) ─── */
.card-price-section{padding:.6rem 0;margin:.25rem 0 .75rem;border:1px solid var(--vh-border);border-radius:var(--radius-md, 12px);background:var(--vh-surface)}
.card-price-section .rpt-price-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:0;text-align:center}
.card-price-section .rpt-price-col{padding:.6rem .25rem}
.card-price-section .rpt-price-col:not(:last-child){border-right:1px solid var(--vh-border)}
.card-price-section .rpt-price-label{display:block;font-size:.58rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--vh-text-muted);margin-bottom:.2rem}
.card-price-section .rpt-price-value{display:block;font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--vh-text)}
.card-price-section .rpt-price-over{color:var(--vh-error)}
.card-price-section .rpt-price-under{color:var(--vh-success)}

/* ─── CALCULATIONS / SCORE OPBOUW (directly visible) ─── */
.card-section-title{font-size:.88rem;font-weight:700;margin:1.25rem 0 .75rem;color:var(--vh-text);letter-spacing:-.01em}
.card-calculations-body{font-size:.82rem;line-height:1.7;color:var(--vh-text-secondary)}
.card-calculations-body h4{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--vh-text);margin:1.25rem 0 .5rem;padding:.4rem .6rem;background:rgba(var(--vh-primary-rgb),.06);border-radius:var(--radius-xs, 8px);border-left:3px solid var(--vh-primary)}
.card-calculations-body h4:first-child{margin-top:0}
.card-calculations-body table{width:100%;border-collapse:collapse;margin:.4rem 0 .6rem;font-size:.78rem}
.card-calculations-body th{text-align:left;font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--vh-text-tertiary);padding:.35rem .45rem;border-bottom:1.5px solid var(--vh-border);background:var(--vh-surface)}
.card-calculations-body td{padding:.35rem .45rem;border-bottom:1px solid var(--vh-border);color:var(--vh-text-secondary)}
.card-calculations-body td:first-child{font-weight:500;color:var(--vh-text)}
.card-calculations-body ul{margin:.3rem 0 .5rem 0;list-style:none;padding:0}
.card-calculations-body li{margin-bottom:.35rem;padding:.3rem .5rem .3rem 1rem;position:relative;border-left:2px solid var(--vh-border)}
.card-calculations-body li::before{content:'';position:absolute;left:.35rem;top:.7em;width:3px;height:3px;border-radius:50%;background:var(--vh-primary)}
.card-calculations-body strong{color:var(--vh-text);font-weight:600}
.card-calculations-body em{color:var(--vh-primary-dark);font-style:normal;font-weight:600}
.card-calculations-body p{margin-bottom:.4rem}
.card-body{font-size:.85rem;line-height:1.75;color:var(--vh-text-secondary);transition:max-height var(--dur-slow) var(--ease-smooth)}
.card-body.collapsed{max-height:200px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);mask-image:linear-gradient(to bottom,#000 60%,transparent 100%)}
.card-expand-btn{display:flex;align-items:center;gap:.35rem;margin:-.25rem 0 .75rem;padding:.4rem .75rem;background:none;border:1.5px solid var(--vh-border);border-radius:var(--radius-xs, 8px);font-family:inherit;font-size:.75rem;font-weight:600;color:var(--vh-text-muted);cursor:pointer;transition:all .2s ease}
.card-expand-btn:hover{border-color:rgba(var(--vh-primary-rgb),.3);color:var(--vh-text);background:rgba(var(--vh-primary-rgb),.04)}
.card-expand-btn:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.card-expand-btn svg{width:14px;height:14px;transition:transform .3s ease}
.card-expand-btn.expanded svg{transform:rotate(180deg)}

/* Card body typography */
.card-body h3,.verdict-body h3{display:flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--vh-text);margin:1.5rem 0 .6rem;padding:.5rem .75rem;background:var(--vh-bg);border-radius:var(--radius-xs, 8px);border:1px solid var(--vh-border)}
.card-body h3:first-child,.verdict-body h3:first-child{margin-top:0}
.card-body p{margin-bottom:.5rem}
.card-body p:last-child{margin-bottom:0}
.card-body ul,.verdict-body ul{margin:.4rem 0 .75rem 0;list-style:none;padding:0}
.card-body li,.verdict-body li{margin-bottom:.5rem;position:relative;padding:.45rem .65rem .45rem 1.15rem;background:rgba(var(--vh-primary-rgb),.02);border-radius:var(--radius-xs, 8px);border-left:3px solid var(--vh-border);transition:all .2s ease}
.card-body li:hover,.verdict-body li:hover{background:rgba(var(--vh-primary-rgb),.05);border-left-color:var(--vh-primary)}
.card-body li::before,.verdict-body li::before{content:'';position:absolute;left:.4rem;top:.85em;width:4px;height:4px;border-radius:50%;background:var(--vh-primary)}
.card-body li strong,.verdict-body li strong{color:var(--vh-text);font-weight:600}
.card-body a,.verdict-body a{color:var(--vh-text);text-decoration:underline;text-decoration-color:rgba(var(--vh-primary-rgb),.4);text-underline-offset:3px;font-weight:500;transition:all var(--dur-fast) ease}
.card-body a:hover,.verdict-body a:hover{text-decoration-color:var(--vh-primary);color:var(--vh-text)}
.card-body a:focus-visible,.verdict-body a:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px;border-radius:var(--radius-xs, 8px)}
.card-body em,.verdict-body em{color:var(--vh-primary-dark);font-style:normal;font-weight:600}
.card-body table,.verdict-body table{width:100%;border-collapse:collapse;margin:.5rem 0 .75rem;font-size:.82rem}
.card-body th,.verdict-body th{text-align:left;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--vh-text-tertiary);padding:.4rem .5rem;border-bottom:1.5px solid var(--vh-border);background:var(--vh-bg)}
.card-body td,.verdict-body td{padding:.4rem .5rem;border-bottom:1px solid var(--vh-border);color:var(--vh-text-secondary)}
.card-body td:first-child,.verdict-body td:first-child{font-weight:500;color:var(--vh-text)}

/* Card stats grid */
.card-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem;margin-top:1.25rem;padding:.75rem;background:var(--vh-bg);border-radius:var(--radius-md, 12px);border:1px solid var(--vh-border)}
.card-stat{padding:.6rem .7rem;background:var(--vh-surface);border-radius:var(--radius-xs, 8px);border:1px solid var(--vh-border);transition:all var(--dur-base) ease}
.card-stat:hover{background:rgba(var(--vh-primary-rgb),.06);border-color:rgba(var(--vh-primary-rgb),.2)}
.card-stat-label{font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--vh-text-muted);margin-bottom:.2rem}
.card-stat-value{font-size:.9rem;font-weight:700;color:var(--vh-text);letter-spacing:-.01em}
.card-stat-note{font-size:.62rem;color:var(--vh-text-muted);margin-top:.15rem;line-height:1.3}

/* Card verdict inline */
.card-verdict{display:flex;align-items:flex-start;gap:.65rem;padding:.85rem 1.1rem;border-radius:var(--radius-md, 12px);margin-top:1.15rem;font-size:.84rem;font-weight:500;line-height:1.6}
.card-verdict.good{background:var(--vh-success-bg);color:var(--vh-success);border:1px solid var(--vh-success-border)}
.card-verdict.fair{background:var(--vh-warning-bg);color:var(--vh-warning);border:1px solid var(--vh-warning-border)}
.card-verdict.bad{background:var(--vh-error-bg);color:var(--vh-error);border:1px solid var(--vh-error-border)}
.card-verdict svg{width:18px;height:18px;flex-shrink:0;opacity:.8;margin-top:.1rem}
.card-footer{display:flex;align-items:center;gap:.4rem;margin-top:1.15rem;padding-top:.85rem;border-top:1px solid var(--vh-border);flex-wrap:wrap}

/* ═══════════════════════════════════════════════════════════════
   KEY HIGHLIGHTS PILLS
   ═══════════════════════════════════════════════════════════════ */
.card-highlights{display:flex;flex-wrap:wrap;gap:.4rem;margin:.65rem 0 1rem}
.hl-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;background:var(--vh-bg);border:1px solid var(--vh-border);border-radius:var(--radius-xs, 8px);font-size:.72rem;transition:all .2s ease}
.hl-pill:hover{background:rgba(var(--vh-primary-rgb),.06);border-color:rgba(var(--vh-primary-rgb),.25)}
.hl-pill-icon{display:flex;align-items:center;flex-shrink:0}
.hl-pill-icon svg{width:12px;height:12px;color:var(--vh-primary);opacity:.7}
.hl-pill-label{color:var(--vh-text-muted);font-weight:500;white-space:nowrap}
.hl-pill-value{color:var(--vh-text);font-weight:700;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════
   VIEW INSIDE PANEL
   ═══════════════════════════════════════════════════════════════ */
.view-inside-toggle{display:flex;align-items:center;gap:.4rem;margin-top:.85rem;padding:.55rem .85rem;background:var(--vh-bg);border:1.5px solid var(--vh-border);border-radius:var(--radius-sm, 10px);cursor:pointer;font-family:inherit;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--vh-text-muted);transition:all var(--dur-base) var(--ease-spring);width:100%}
.view-inside-toggle:hover{background:rgba(var(--vh-primary-rgb),.06);border-color:rgba(var(--vh-primary-rgb),.3);color:var(--vh-text)}
.view-inside-toggle.open{border-color:var(--vh-primary);color:var(--vh-text);background:rgba(var(--vh-primary-rgb),.04)}
.view-inside-toggle:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.view-inside-toggle svg{width:14px;height:14px;transition:transform .35s var(--ease-spring);flex-shrink:0}
.view-inside-toggle.open svg{transform:rotate(180deg)}
.view-inside-toggle .vi-label{flex:1;text-align:left}
.view-inside-toggle .vi-badge{font-size:.58rem;padding:.15rem .4rem;background:var(--vh-primary);color:var(--vh-on-primary,#1a1a1a);border-radius:var(--radius-xs, 8px);font-weight:700;letter-spacing:.04em}
.view-inside-panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .45s var(--ease-spring),opacity .35s ease,margin .35s ease;margin-top:0}
.view-inside-panel.open{max-height:3000px;opacity:1;margin-top:.75rem}
.view-inside-content{padding:1rem 1.15rem;background:var(--vh-bg);border:1.5px solid var(--vh-border);border-radius:var(--radius-md, 12px);font-size:.82rem;line-height:1.7;color:var(--vh-text-secondary)}
.view-inside-content h4{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--vh-text);margin:1.25rem 0 .5rem;padding:.4rem .6rem;background:rgba(var(--vh-primary-rgb),.06);border-radius:var(--radius-xs, 8px);border-left:3px solid var(--vh-primary)}
.view-inside-content h4:first-child{margin-top:0}
.view-inside-content table{width:100%;border-collapse:collapse;margin:.4rem 0 .6rem;font-size:.78rem}
.view-inside-content th{text-align:left;font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--vh-text-tertiary);padding:.35rem .45rem;border-bottom:1.5px solid var(--vh-border);background:var(--vh-surface)}
.view-inside-content td{padding:.35rem .45rem;border-bottom:1px solid var(--vh-border);color:var(--vh-text-secondary)}
.view-inside-content td:first-child{font-weight:500;color:var(--vh-text)}
.view-inside-content ul{margin:.3rem 0 .5rem 0;list-style:none;padding:0}
.view-inside-content li{margin-bottom:.35rem;padding:.3rem .5rem .3rem 1rem;position:relative;border-left:2px solid var(--vh-border)}
.view-inside-content li::before{content:'';position:absolute;left:.35rem;top:.7em;width:3px;height:3px;border-radius:50%;background:var(--vh-primary)}
.view-inside-content strong{color:var(--vh-text);font-weight:600}
.view-inside-content em{color:var(--vh-primary-dark);font-style:normal;font-weight:600}
.view-inside-content p{margin-bottom:.4rem}

/* ═══════════════════════════════════════════════════════════════
   CARD IMAGE & GALLERY
   ═══════════════════════════════════════════════════════════════ */
.card-image{width:100%;border-radius:var(--radius-lg, 18px);overflow:hidden;margin-bottom:1rem;border:1px solid var(--vh-border)}
.card-image img{width:100%;height:200px;object-fit:cover;display:block;transition:opacity .4s ease,transform .4s var(--ease-smooth)}
.card-image img:hover{transform:scale(1.03)}
.card-image img.crossfade-out{opacity:0}
.card-image.hero img{height:240px}
.card-gallery{display:flex;gap:.4rem;margin-bottom:1rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:0}
.card-gallery::-webkit-scrollbar{display:none}
.card-gallery img{width:80px;height:56px;object-fit:cover;border-radius:var(--radius-sm, 10px);flex-shrink:0;cursor:pointer;border:2px solid transparent;transition:all .25s var(--ease-spring)}
.card-gallery img:hover{border-color:rgba(var(--vh-primary-rgb),.35);transform:translateY(-3px) scale(1.04);box-shadow:0 6px 16px rgba(var(--vh-primary-rgb),.12)}
.card-gallery img.active{border-color:var(--vh-primary);box-shadow:0 4px 12px rgba(var(--vh-primary-rgb),.15)}

/* Gallery lightbox overlay */
.gallery-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:6000;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s var(--ease-smooth);cursor:zoom-out}
.gallery-lightbox.active{opacity:1}
.gallery-lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--radius-md, 12px);box-shadow:0 24px 80px rgba(0,0,0,.4);transform:scale(.92);transition:transform .4s var(--ease-spring);will-change:transform}
.gallery-lightbox.active img{transform:scale(1)}
.gallery-lightbox-close{position:absolute;top:1.25rem;right:1.25rem;width:36px;height:36px;border:none;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius-sm, 10px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s ease}
.gallery-lightbox-close:hover{background:rgba(255,255,255,.2);transform:scale(1.08)}
.gallery-lightbox-close svg{width:18px;height:18px}
.gallery-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border:none;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--radius-sm, 10px);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .2s ease}
.gallery-lightbox-nav:hover{background:rgba(255,255,255,.2)}
.gallery-lightbox-nav svg{width:18px;height:18px}
.gallery-lightbox-prev{left:1.25rem}
.gallery-lightbox-next{right:1.25rem}
.gallery-lightbox-counter{position:absolute;bottom:1.25rem;left:50%;transform:translateX(-50%);font-size:.75rem;font-weight:600;color:rgba(255,255,255,.7);background:rgba(0,0,0,.4);padding:.3rem .75rem;border-radius:var(--radius-xs, 8px);font-variant-numeric:tabular-nums}
/* Lightbox loading spinner */
.gallery-lightbox-spinner{display:none;position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--vh-primary);border-radius:50%;animation:spin .7s linear infinite;z-index:1}

/* ═══════════════════════════════════════════════════════════════
   SOURCES SECTION
   ═══════════════════════════════════════════════════════════════ */
.sources-section{margin:1.25rem 0;padding:1rem 1.25rem;background:rgba(var(--vh-primary-rgb),.03);border:1.5px solid var(--vh-border);border-radius:var(--radius-lg, 18px);transition:all var(--dur-base) ease}
.sources-header{display:flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;color:var(--vh-text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--vh-border)}
.sources-header svg{color:var(--vh-text-tertiary);flex-shrink:0}
.sources-count{margin-left:auto;font-size:.65rem;font-weight:600;color:var(--vh-text-tertiary);background:var(--vh-surface);padding:.15rem .5rem;border-radius:var(--radius-xs, 8px);border:1px solid var(--vh-border)}
.sources-list{display:grid;gap:.4rem}
.source-item{display:grid;grid-template-columns:auto 1fr;gap:.25rem .75rem;align-items:baseline;padding:.4rem .55rem;border-radius:var(--radius-xs, 8px);transition:background var(--dur-fast) ease}
.source-item:hover{background:var(--vh-bg-highlight)}
.source-name{font-size:.78rem;font-weight:600;color:var(--vh-text);white-space:nowrap;display:inline-flex;align-items:center;text-decoration:none;transition:color var(--dur-fast) ease}
a.source-name:hover{color:var(--vh-text-secondary)}
a.source-name:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px;border-radius:var(--radius-xs, 8px)}
.source-finding{font-size:.75rem;color:var(--vh-text-muted);line-height:1.5;grid-column:2}
.source-item.scan-highlight{background:rgba(var(--vh-primary-rgb),.06);border:1px solid rgba(var(--vh-primary-rgb),.15);border-radius:var(--radius-sm, 10px);padding:.55rem .7rem}
.source-name.market-scan{color:var(--honey-dark,#d4a017);display:inline-flex;align-items:center}
.source-item.scan-highlight .source-finding{color:var(--vh-text-secondary);font-weight:500}
.source-link-icon{width:12px;height:12px;margin-left:4px;opacity:.5}
.source-scan-icon{width:13px;height:13px;margin-right:3px}

/* ═══════════════════════════════════════════════════════════════
   QUESTION CARD
   ═══════════════════════════════════════════════════════════════ */
.question-card{background:var(--vh-surface);border:1.5px solid var(--vh-border);border-radius:var(--radius-xl, 22px);padding:1.65rem 1.85rem;box-shadow:0 1px 4px rgba(31,31,31,.02);transition:transform .35s var(--ease-spring),box-shadow .35s var(--ease-spring),border-color .35s ease}
.question-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(var(--vh-primary-rgb),.08);border-color:rgba(var(--vh-primary-rgb),.2)}
.question-from{display:flex;align-items:center;gap:.4rem;margin-bottom:.85rem}
.question-dot{width:20px;height:20px;border-radius:var(--radius-xs, 8px);background:rgba(var(--vh-primary-rgb),.08);border:1px solid var(--vh-border);display:flex;align-items:center;justify-content:center}
.question-dot svg{width:10px;height:10px;color:var(--vh-text-muted)}
.question-from-label{font-size:.65rem;font-weight:600;color:var(--vh-text-secondary);letter-spacing:.02em}
.question-text{font-family:var(--vh-font-body);font-size:1.05rem;line-height:1.55;color:var(--vh-text);margin-bottom:1rem;font-weight:500}
.question-opts{display:flex;flex-wrap:wrap;gap:.4rem}
.question-opt{padding:.5rem .95rem;background:var(--vh-surface);border:1.5px solid var(--vh-border);border-radius:var(--radius-pill, 9999px);cursor:pointer;font-family:inherit;font-size:.78rem;font-weight:500;color:var(--vh-text-muted);transition:all .3s var(--ease-smooth)}
.question-opt:hover{background:rgba(var(--vh-primary-rgb),.06);border-color:rgba(var(--vh-primary-rgb),.3);color:var(--vh-text);box-shadow:0 4px 12px rgba(var(--vh-primary-rgb),.08);transform:translateY(-1px)}
.question-opt:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS (unified)
   ═══════════════════════════════════════════════════════════════ */
.v-btn{padding:.55rem 1.1rem;border-radius:var(--radius-sm, 10px);font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:all var(--dur-base) var(--ease-spring);border:1.5px solid var(--vh-border);background:var(--vh-surface);color:var(--vh-text-muted);display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;will-change:transform}
.v-btn:hover{border-color:rgba(var(--vh-primary-rgb),.3);color:var(--vh-text);transform:translateY(-2px);box-shadow:0 4px 12px rgba(var(--vh-primary-rgb),.08)}
.v-btn:active{transform:scale(.94)}
.v-btn:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px}
.v-btn.primary{background:var(--vh-primary);border-color:var(--vh-primary);color:var(--vh-on-primary,#1a1a1a);font-weight:600;box-shadow:0 4px 12px rgba(var(--vh-primary-rgb),.2);padding:.6rem 1.3rem;font-size:.82rem}
.v-btn.primary:hover{background:var(--vh-primary-hover);transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--vh-primary-rgb),.28)}
.v-btn svg{width:13px;height:13px}

/* Button success feedback */
@keyframes btnSuccessPop{0%{transform:scale(1)}30%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.v-btn.success{animation:btnSuccessPop .4s var(--ease-smooth);background:var(--vh-success)!important;border-color:var(--vh-success)!important;color:#fff!important}
.card-act.success{animation:btnSuccessPop .4s var(--ease-smooth);color:var(--vh-success)!important}

/* ═══════════════════════════════════════════════════════════════
   FEEDBACK ROW
   ═══════════════════════════════════════════════════════════════ */
.feedback-row{display:flex;align-items:center;gap:.5rem;padding-top:.75rem;margin-top:.75rem;border-top:1px solid var(--vh-border)}
.fb-btn{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .7rem;border-radius:var(--radius-xs, 8px);font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;border:1.5px solid var(--vh-border);background:var(--vh-surface);color:var(--vh-text-tertiary);transition:all var(--dur-base) ease}
.fb-btn:hover{border-color:rgba(var(--vh-primary-rgb),.3);color:var(--vh-text-secondary)}
.fb-btn:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.fb-btn svg{width:14px;height:14px}
.fb-btn.up.active{background:var(--vh-success-bg);border-color:var(--vh-success);color:var(--vh-success)}
.fb-btn.down.active{background:var(--vh-error-bg);border-color:var(--vh-error);color:var(--vh-error)}
.fb-label{font-size:.7rem;color:var(--vh-text-tertiary);margin-left:auto}
.fb-expand{overflow:hidden;max-height:0;transition:max-height .4s var(--ease-spring),margin .3s ease;margin-top:0}
.fb-expand.open{max-height:300px;margin-top:.75rem}
.fb-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}
.fb-tag{padding:.25rem .55rem;border-radius:var(--radius-xs, 8px);font-size:.68rem;font-weight:500;cursor:pointer;border:1px solid var(--vh-border);background:var(--vh-bg);color:var(--vh-text-muted);transition:all .2s ease}
.fb-tag:hover{border-color:rgba(var(--vh-primary-rgb),.3)}
.fb-tag:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.fb-tag.selected{background:rgba(var(--vh-primary-rgb),.12);border-color:var(--vh-primary);color:var(--vh-text)}
.fb-comment{width:100%;padding:.5rem .65rem;border:1.5px solid var(--vh-border);border-radius:var(--radius-xs, 8px);font-family:inherit;font-size:.75rem;background:var(--vh-surface);color:var(--vh-text);resize:none;outline:none;transition:border-color .3s ease,box-shadow .3s ease}
.fb-comment:focus{border-color:var(--vh-primary);box-shadow:0 0 0 3px rgba(var(--vh-primary-rgb),.08)}
.fb-submit{padding:.35rem .75rem;border-radius:var(--radius-xs, 8px);font-family:inherit;font-size:.72rem;font-weight:600;cursor:pointer;border:none;background:var(--vh-primary);color:var(--vh-on-primary,#1a1a1a);transition:all .2s ease}
.fb-submit:hover{background:var(--vh-primary-hover)}
.fb-submit:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px}
.fb-submit-row{display:flex;justify-content:flex-end;margin-top:.4rem}
.fb-sent{font-size:.72rem;color:var(--vh-success);font-weight:500;display:flex;align-items:center;gap:.3rem}
.fb-sent svg{width:14px;height:14px}

/* ═══════════════════════════════════════════════════════════════
   MARKET SCAN BANNER
   ═══════════════════════════════════════════════════════════════ */
.search-id-bar{display:flex;align-items:center;gap:.5rem;padding:.4rem 0;margin-bottom:.35rem}
.search-id-badge{font-size:.62rem;font-weight:700;color:var(--vh-primary);background:rgba(var(--vh-primary-rgb),.08);padding:3px 8px;border-radius:var(--radius-xs, 8px);font-variant-numeric:tabular-nums;letter-spacing:.03em;border:1px solid rgba(var(--vh-primary-rgb),.15)}
.search-id-name{font-size:.72rem;color:var(--vh-text-muted);font-weight:500}
.market-scan-banner{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.25rem;background:rgba(var(--vh-primary-rgb),.06);border:1.5px solid rgba(var(--vh-primary-rgb),.2);border-radius:var(--radius-lg, 18px);font-size:.82rem;color:var(--vh-text-muted);font-family:var(--vh-font-body);margin-bottom:.5rem}
.market-scan-banner strong{color:var(--vh-text);font-weight:700}
.market-scan-banner svg{color:var(--vh-primary)}

/* Scan details */
.scan-icon{width:18px;height:18px;flex-shrink:0}
.scan-details{display:flex;flex-direction:column;gap:2px}
.scan-sites{font-size:.72rem;opacity:.7}
.scan-more{opacity:.6}
.scan-badges{display:flex;gap:4px;flex-wrap:wrap}
.scan-badge{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:var(--radius-xs, 8px)}
.scan-badge svg{width:11px;height:11px}
.scan-badge-import{background:rgba(var(--vh-success-rgb),.1);color:var(--vh-success)}
.scan-badge-dealers{background:rgba(var(--vh-info-rgb),.1);color:var(--vh-info)}

/* ═══════════════════════════════════════════════════════════════
   TRUST ELEMENTS
   ═══════════════════════════════════════════════════════════════ */
.trust-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;background:rgba(var(--vh-success-rgb),.06);border:1px solid rgba(var(--vh-success-rgb),.15);border-radius:var(--radius-pill, 9999px);font-size:.58rem;font-weight:600;color:var(--vh-success);letter-spacing:.04em;text-transform:uppercase}
.trust-pill svg{width:10px;height:10px}
.trust-pill.warning{background:rgba(var(--vh-warning-rgb),.06);border-color:rgba(var(--vh-warning-rgb),.15);color:var(--vh-warning)}
.trust-pill.info{background:rgba(var(--vh-primary-rgb),.06);border-color:rgba(var(--vh-primary-rgb),.2);color:var(--vh-primary-dark)}

.verified-badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.56rem;font-weight:600;color:var(--vh-success);text-transform:uppercase;letter-spacing:.05em}
.verified-badge svg{width:11px;height:11px;animation:checkIn .4s var(--ease-bounce) both}

.market-confidence{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:rgba(var(--vh-primary-rgb),.04);border:1px solid rgba(var(--vh-primary-rgb),.12);border-radius:var(--radius-sm, 10px);font-size:.7rem;color:var(--vh-text-muted);margin-top:.5rem}
.confidence-bar{flex:1;height:4px;background:var(--vh-border);border-radius:var(--radius-xs, 8px);overflow:hidden}
.confidence-fill{height:100%;border-radius:var(--radius-xs, 8px);transition:width 1s var(--ease-smooth)}
.confidence-fill.high{background:var(--vh-success);width:85%}
.confidence-fill.medium{background:var(--vh-warning);width:60%}
.confidence-fill.low{background:var(--vh-error);width:35%}

/* ═══════════════════════════════════════════════════════════════
   LOADING — SKELETON WITH SHIMMER
   ═══════════════════════════════════════════════════════════════ */
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes skeletonPulse{0%{opacity:1}50%{opacity:.55}100%{opacity:1}}

.loading-card{background:var(--vh-surface);border:1.5px solid var(--vh-border);border-radius:var(--radius-xl, 22px);padding:1.65rem 1.85rem;box-shadow:0 1px 4px rgba(31,31,31,.02);position:relative;transition:opacity .5s var(--ease-smooth),transform .5s var(--ease-spring)}
.loading-card.fade-out{opacity:0;transform:translateY(-12px) scale(.96);pointer-events:none}
.loading-status{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.78rem;font-weight:500;color:var(--vh-text-secondary)}
.loading-status-text{transition:opacity .3s ease,transform .3s var(--ease-spring)}
.loading-dot{width:6px;height:6px;border-radius:50%;background:var(--vh-primary);animation:loadPulse 1.4s ease-in-out infinite;box-shadow:0 0 6px rgba(var(--vh-primary-rgb),.4)}
@keyframes loadPulse{0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.loading-line{height:8px;background:linear-gradient(90deg,var(--vh-border) 25%,var(--vh-bg-highlight,rgba(var(--vh-primary-rgb),.06)) 50%,var(--vh-border) 75%);background-size:200% 100%;border-radius:var(--radius-xs, 8px);animation:shimmer 1.5s ease infinite}
.loading-line+.loading-line{margin-top:.55rem}
.loading-line.short{width:35%}
.loading-line.med{width:58%}

/* Skeleton card */
.skeleton-card{background:var(--vh-surface);border:1.5px solid var(--vh-border);border-radius:var(--radius-xl, 22px);padding:1.65rem 1.85rem;animation:skeletonPulse 2s cubic-bezier(.4,0,.6,1) infinite;box-shadow:0 1px 4px rgba(31,31,31,.02)}
.loading-card .skeleton-card{margin-top:.75rem;border:none;padding:0;box-shadow:none}
.skeleton-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.skeleton-header-text{flex:1}
.skeleton-ring{width:54px;height:54px;border-radius:50%;background:linear-gradient(90deg,var(--vh-border) 25%,var(--vh-bg-highlight,rgba(var(--vh-primary-rgb),.06)) 50%,var(--vh-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite}
.skeleton-badge{width:80px;height:22px;border-radius:var(--radius-xs, 8px);background:linear-gradient(90deg,var(--vh-border) 25%,var(--vh-bg-highlight,rgba(var(--vh-primary-rgb),.06)) 50%,var(--vh-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite}
.skeleton-title{height:20px;width:65%;border-radius:var(--radius-xs, 8px);background:linear-gradient(90deg,var(--vh-border) 25%,var(--vh-bg-highlight,rgba(var(--vh-primary-rgb),.06)) 50%,var(--vh-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;margin-bottom:.75rem}
.skeleton-text{height:12px;border-radius:var(--radius-xs, 8px);background:linear-gradient(90deg,var(--vh-border) 25%,var(--vh-bg-highlight,rgba(var(--vh-primary-rgb),.06)) 50%,var(--vh-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;margin-bottom:.5rem}
.skeleton-text.w90{width:92%}.skeleton-text.w75{width:75%}.skeleton-text.w60{width:60%}.skeleton-text.w40{width:40%}
.skeleton-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1rem}
.skeleton-stat{height:56px;border-radius:var(--radius-md, 12px);background:linear-gradient(90deg,var(--vh-border) 25%,var(--vh-bg-highlight,rgba(var(--vh-primary-rgb),.06)) 50%,var(--vh-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite}
.skeleton-image{height:140px;border-radius:var(--radius-lg, 18px);background:linear-gradient(90deg,var(--vh-border) 25%,var(--vh-bg-highlight,rgba(var(--vh-primary-rgb),.06)) 50%,var(--vh-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;margin-bottom:.75rem}
.skeleton-pills{display:flex;gap:.4rem;margin-bottom:.75rem}
.skeleton-pill{height:24px;border-radius:var(--radius-xs, 8px);background:linear-gradient(90deg,var(--vh-border) 25%,var(--vh-bg-highlight,rgba(var(--vh-primary-rgb),.06)) 50%,var(--vh-border) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite}
.skeleton-pill:nth-child(1){width:90px}.skeleton-pill:nth-child(2){width:75px}.skeleton-pill:nth-child(3){width:60px}

/* Step progress bar */
.loading-progress{margin-bottom:1rem}
.loading-progress-bar{height:3px;background:var(--vh-border);border-radius:var(--radius-xs, 8px);overflow:hidden;margin-bottom:.65rem}
.loading-progress-fill{height:100%;background:linear-gradient(90deg,var(--vh-primary),#e8b931);border-radius:var(--radius-xs, 8px);transition:width 1.8s cubic-bezier(.4,0,.2,1);width:0}
.loading-steps{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.loading-step{display:flex;align-items:center;gap:.3rem;font-size:.62rem;font-weight:600;color:var(--vh-text-tertiary);text-transform:uppercase;letter-spacing:.04em;transition:all .3s var(--ease-smooth);padding:.2rem .5rem;border-radius:var(--radius-xs, 8px);background:transparent}
.loading-step.active{color:var(--vh-primary);background:rgba(var(--vh-primary-rgb),.08)}
.loading-step.done{color:var(--vh-success)}
.loading-step-check{display:none}
.loading-step.done .loading-step-check{display:block;animation:checkIn .3s var(--ease-bounce) both}
.loading-step.done .loading-step-num{display:none}
.loading-step-divider{width:12px;height:1px;background:var(--vh-border);flex-shrink:0}

/* Search transition bar */
.search-transition{position:relative;overflow:hidden}
.search-transition::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--vh-primary),transparent);animation:searchSweep 2s ease-in-out infinite}
@keyframes searchSweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Typing indicator — AI message bubble style */
.typing-indicator{display:flex;align-items:center;gap:.65rem;padding:.75rem 1.15rem;margin-bottom:.65rem;background:rgba(var(--vh-primary-rgb),.04);border-radius:14px 14px 14px 4px;border:1px solid rgba(var(--vh-primary-rgb),.1);max-width:280px}
.typing-indicator-avatar{width:24px;height:24px;border-radius:var(--radius-xs, 8px);background:var(--vh-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.typing-indicator-avatar svg{width:12px;height:12px;color:var(--vh-on-primary,#1a1a1a)}
.typing-indicator-dots{display:flex;align-items:center;gap:5px}
.typing-indicator-dots span{width:6px;height:6px;border-radius:50%;background:var(--vh-primary);opacity:.3;animation:typingWave 1.4s ease-in-out infinite}
.typing-indicator-dots span:nth-child(2){animation-delay:.2s}
.typing-indicator-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingWave{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-5px);opacity:.9}}
.typing-indicator-text{font-size:.72rem;color:var(--vh-text-tertiary);font-weight:500;letter-spacing:.01em}

/* ═══════════════════════════════════════════════════════════════
   ERROR STATE
   ═══════════════════════════════════════════════════════════════ */
.error-state{border-color:var(--vh-error-border)}
.error-content{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.25rem 0}
.error-icon{width:48px;height:48px;margin-bottom:1.15rem;opacity:.8}
.error-title{font-family:var(--vh-font-display);font-size:1.1rem;font-weight:700;color:var(--vh-text);margin-bottom:.5rem}
.error-desc{font-size:.82rem;color:var(--vh-text-muted);line-height:1.6;max-width:400px;margin-bottom:.25rem}
.error-detail{font-size:.72rem;color:var(--vh-text-tertiary);margin-top:.35rem;padding:.45rem .85rem;background:var(--vh-bg);border-radius:var(--radius-xs, 8px);font-family:'SF Mono',Consolas,monospace;border:1px solid var(--vh-border);max-width:100%;word-break:break-all}
.error-content .v-btn{margin-top:1.15rem}
.error-hint{font-size:.68rem;color:var(--vh-text-tertiary);margin-top:.65rem;line-height:1.5;max-width:340px}
.error-code{display:inline-flex;align-items:center;gap:.25rem;font-size:.6rem;font-weight:600;color:var(--vh-text-tertiary);text-transform:uppercase;letter-spacing:.06em;margin-top:.75rem;padding:.2rem .55rem;background:var(--vh-bg);border-radius:var(--radius-xs, 8px);border:1px solid var(--vh-border)}
/* Network error */
.error-state.error-network{border-color:var(--vh-warning-border,rgba(var(--vh-warning-rgb),.3))}
.error-state.error-network .error-icon{color:var(--vh-warning)}
/* Invalid URL error */
.error-state.error-invalid{border-color:rgba(var(--vh-primary-rgb),.3)}
.error-state.error-invalid .error-icon{color:var(--vh-primary)}
/* Rate limit error */
.error-state.error-ratelimit{border-color:rgba(139,115,50,.3)}
.error-state.error-ratelimit .error-icon{color:var(--honey-text)}
/* Server error */
.error-state.error-server{border-color:rgba(var(--vh-error-rgb),.25)}
.error-state.error-server .error-icon{color:var(--vh-error)}
/* Timeout error */
.error-state.error-timeout{border-color:var(--vh-warning-border,rgba(var(--vh-warning-rgb),.3))}
.error-state.error-timeout .error-icon{color:var(--vh-warning)}

/* ═══════════════════════════════════════════════════════════════
   TOAST — SLIDE-IN/OUT FROM RIGHT (bottom on mobile)
   ═══════════════════════════════════════════════════════════════ */
.toast-container{position:fixed;bottom:2rem;right:2rem;z-index:10000;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
.toast{position:fixed;bottom:2rem;right:2rem;left:auto;transform:translateX(calc(100% + 2rem));padding:.75rem 1.25rem;background:#1F1F1F;color:#fff;font-size:.78rem;font-weight:600;border-radius:var(--radius-lg, 18px);border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 50px rgba(31,31,31,.15);opacity:0;z-index:10000;transition:transform .45s var(--ease-spring),opacity .35s ease;pointer-events:none;display:flex;align-items:center;gap:.5rem;max-width:380px}
.toast.toast-success{border-left:3px solid var(--vh-success)}
.toast.toast-error{border-left:3px solid var(--vh-error)}
.toast.toast-warning{border-left:3px solid var(--vh-warning)}
.toast.show{opacity:1;transform:translateX(0);pointer-events:auto}
.toast.toast-exit{opacity:0;transform:translateX(calc(100% + 2rem));transition:transform .35s var(--ease-smooth),opacity .25s ease}

/* ═══════════════════════════════════════════════════════════════
   SHARE MODAL
   ═══════════════════════════════════════════════════════════════ */
.share-overlay{position:fixed;inset:0;background:rgba(31,31,31,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:5000;opacity:0;transition:opacity .3s var(--ease-spring)}
.share-overlay.active{opacity:1}
.share-modal{background:var(--vh-surface);border-radius:var(--radius-xl, 22px);max-width:440px;width:90%;padding:2rem;box-shadow:0 24px 64px rgba(var(--vh-primary-rgb),.12),0 8px 24px rgba(31,31,31,.06);position:relative;transform:translateY(20px) scale(.96);transition:transform .35s var(--ease-spring),opacity .3s ease;border:1.5px solid var(--vh-border);opacity:0}
.share-overlay.active .share-modal{transform:translateY(0) scale(1);opacity:1}
.share-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border:none;background:none;cursor:pointer;font-size:1.4rem;color:var(--vh-text-tertiary);border-radius:var(--radius-xs, 8px);display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.share-close:hover{background:var(--vh-bg-highlight);color:var(--vh-text)}
.share-close:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.share-header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.5rem}
.share-header-icon{width:24px;height:24px;color:var(--vh-primary);flex-shrink:0}
.share-title{font-family:var(--vh-font-display);font-size:1.15rem;font-weight:700;color:var(--vh-text);margin-bottom:.25rem}
.share-desc{font-size:.82rem;color:var(--vh-text-muted);line-height:1.5}
.share-url-row{display:flex;gap:.5rem;margin-bottom:1.25rem}
.share-url-input{flex:1;padding:.6rem .85rem;border:1.5px solid var(--vh-border);border-radius:var(--radius-sm, 10px);font-family:var(--vh-font-body);font-size:.8rem;color:var(--vh-text-muted);background:rgba(var(--vh-primary-rgb),.03);outline:none;min-width:0;transition:all var(--dur-base) ease}
.share-url-input:focus{border-color:var(--vh-primary);box-shadow:0 0 0 4px rgba(var(--vh-primary-rgb),.08)}
.share-copy-btn{padding:.6rem 1.1rem;background:var(--vh-primary);color:var(--vh-on-primary,#1a1a1a);border:none;border-radius:var(--radius-sm, 10px);font-family:var(--vh-font-body);font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--dur-base) var(--ease-smooth);box-shadow:0 2px 8px rgba(var(--vh-primary-rgb),.2)}
.share-copy-btn:hover{background:var(--vh-primary-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(var(--vh-primary-rgb),.28)}
.share-copy-btn:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px}
.share-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.share-action-btn{display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border:1.5px solid var(--vh-border);border-radius:var(--radius-sm, 10px);background:var(--vh-surface);color:var(--vh-text);font-family:var(--vh-font-body);font-size:.8rem;font-weight:500;cursor:pointer;text-decoration:none;transition:all .3s var(--ease-smooth)}
.share-action-btn:hover{border-color:rgba(var(--vh-primary-rgb),.3);background:rgba(var(--vh-primary-rgb),.04);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--vh-primary-rgb),.08)}
.share-action-btn:focus-visible{outline:2px solid var(--vh-primary);outline-offset:1px}
.share-native{border-color:var(--vh-primary);background:rgba(var(--vh-primary-rgb),.06)}
.share-action-icon{width:18px;height:18px}
.share-whatsapp-icon{color:#25d366}

/* ═══════════════════════════════════════════════════════════════
   AUTH GATE
   ═══════════════════════════════════════════════════════════════ */
.auth-gate{position:fixed;inset:0;background:var(--vh-bg,#FAFAF7);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;opacity:1;transition:opacity .4s}
.auth-gate.hidden{opacity:0;pointer-events:none}
.auth-spinner{width:18px;height:18px;border:2px solid var(--vh-border);border-top-color:var(--vh-primary);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-gate-dot{width:10px;height:10px;margin-bottom:.5rem}
.auth-gate p{font-size:.82rem;color:var(--vh-text-muted)}
.auth-error{text-align:center}
.auth-error p{margin-bottom:.75rem}
.auth-error a{display:inline-flex;padding:.55rem 1.3rem;background:var(--vh-primary);border-radius:var(--radius-sm, 10px);color:var(--vh-on-primary,#1a1a1a);font-size:.82rem;font-weight:600;text-decoration:none;transition:all .2s ease}
.auth-error a:hover{background:var(--vh-primary-hover)}
.auth-error a:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════
   LOGIN REQUIRED STATE
   ═══════════════════════════════════════════════════════════════ */
.bi-login-required{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 72px);padding:2rem 1rem;background:var(--vh-bg,#FAFAF7)}
.bi-login-card{text-align:center;max-width:420px;width:100%;background:var(--vh-surface,#fff);border:1px solid var(--vh-border,#e5e5e0);border-radius:var(--radius-lg, 18px);padding:2.5rem 2rem;box-shadow:0 2px 12px rgba(0,0,0,.04);animation:fadeInUp .5s ease both}
.bi-login-icon{width:56px;height:56px;margin:0 auto 1.25rem;display:flex;align-items:center;justify-content:center;background:var(--vh-primary,#F2C94C);border-radius:var(--radius-lg, 18px);color:var(--vh-on-primary,#1a1a1a)}
.bi-login-icon svg{width:28px;height:28px}
.bi-login-title{font-size:1.25rem;font-weight:700;color:var(--vh-text,#1a1a1a);margin:0 0 .5rem}
.bi-login-desc{font-size:.9rem;color:var(--vh-text-muted,#6b6b6b);margin:0 0 1.5rem;line-height:1.5}
.bi-login-btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 2rem;background:var(--vh-primary,#F2C94C);color:var(--vh-on-primary,#1a1a1a);font-size:.9rem;font-weight:600;border-radius:var(--radius-sm, 10px);text-decoration:none;transition:all .2s ease;gap:.4rem}
.bi-login-btn:hover{background:var(--vh-primary-hover,#e6bd44);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--vh-primary-rgb),.3)}
.bi-login-btn:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px}
.bi-login-sub{font-size:.82rem;color:var(--vh-text-muted,#6b6b6b);margin-top:1rem}
.bi-login-sub a{color:var(--vh-primary,#F2C94C);font-weight:600;text-decoration:none;margin-left:.25rem}
.bi-login-sub a:hover{text-decoration:underline}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS — STAGGERED ENTRANCES
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes paragraphFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes resultIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes emptyFadeIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes emptyFloat{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-4px) rotate(-2deg)}75%{transform:translateY(-2px) rotate(1deg)}}
@keyframes scoreRingFill{from{stroke-dashoffset:var(--ring-circumference,283)}to{stroke-dashoffset:var(--ring-target,0)}}
@keyframes countUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes cardStagger{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes checkIn{from{transform:scale(0) rotate(-45deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes checkmarkDraw{0%{stroke-dashoffset:20;opacity:0}40%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes savedBounce{0%{transform:scale(1)}25%{transform:scale(.85)}50%{transform:scale(1.15)}75%{transform:scale(.97)}100%{transform:scale(1)}}

/* Card/element entrance class */
.result-card.anim-in,.verdict-hero.anim-in,.question-card.anim-in,.loading-card.anim-in,.search-id-bar.anim-in,.market-scan-banner.anim-in,.error-state.anim-in{
    animation:fadeInUp .5s var(--ease-spring) both
}
.loading-card{animation:fadeInUp .4s var(--ease-spring) both}
.error-state{animation:fadeInUp .4s var(--ease-spring) both}

/* Score ring + badge entrance */
.score-ring-animated circle.score-track{animation:scoreRingFill 1.2s var(--ease-smooth) forwards}
.verdict-badge-animated{animation:badgeBounce .5s var(--ease-bounce) both}
.stat-value-animated{animation:countUp .4s var(--ease-smooth) both}
.source-check{animation:checkIn .3s var(--ease-bounce) both}
.source-check:nth-child(2){animation-delay:.1s}
.source-check:nth-child(3){animation-delay:.2s}

/* Save/share animations */
.card-act.saved{animation:savedBounce .5s var(--ease-spring)}
.v-btn.success svg,.card-act.success svg{animation:savedBounce .4s var(--ease-spring)}

/* Staggered paragraphs */
.verdict-body p,.card-body p{animation:paragraphFadeIn .4s var(--ease-spring) both}
.verdict-body p:nth-child(2),.card-body p:nth-child(2){animation-delay:.06s}
.verdict-body p:nth-child(3),.card-body p:nth-child(3){animation-delay:.12s}
.verdict-body p:nth-child(4),.card-body p:nth-child(4){animation-delay:.18s}
.verdict-body p:nth-child(5),.card-body p:nth-child(5){animation-delay:.24s}
.verdict-body li,.card-body li{animation:paragraphFadeIn .35s var(--ease-spring) both}
.verdict-body li:nth-child(2),.card-body li:nth-child(2){animation-delay:.04s}
.verdict-body li:nth-child(3),.card-body li:nth-child(3){animation-delay:.08s}
.verdict-body li:nth-child(4),.card-body li:nth-child(4){animation-delay:.12s}
.verdict-body li:nth-child(5),.card-body li:nth-child(5){animation-delay:.16s}
.verdict-body li:nth-child(6),.card-body li:nth-child(6){animation-delay:.2s}
.verdict-body li:nth-child(7),.card-body li:nth-child(7){animation-delay:.24s}
.verdict-body li:nth-child(8),.card-body li:nth-child(8){animation-delay:.28s}

/* Highlight pills stagger */
.hl-pill{animation:paragraphFadeIn .3s var(--ease-spring) both}
.hl-pill:nth-child(2){animation-delay:.04s}
.hl-pill:nth-child(3){animation-delay:.08s}
.hl-pill:nth-child(4){animation-delay:.12s}
.hl-pill:nth-child(5){animation-delay:.16s}
.hl-pill:nth-child(6){animation-delay:.2s}

/* Stat grid stagger */
.verdict-stat,.card-stat{animation:paragraphFadeIn .35s var(--ease-spring) both}
.verdict-stat:nth-child(2),.card-stat:nth-child(2){animation-delay:.05s}
.verdict-stat:nth-child(3),.card-stat:nth-child(3){animation-delay:.1s}
.verdict-stat:nth-child(4),.card-stat:nth-child(4){animation-delay:.15s}
.verdict-stat:nth-child(5),.card-stat:nth-child(5){animation-delay:.2s}
.verdict-stat:nth-child(6),.card-stat:nth-child(6){animation-delay:.25s}

/* Sources entrance */
.sources-section{animation:paragraphFadeIn .4s var(--ease-spring) .1s both}
.source-item{animation:paragraphFadeIn .3s var(--ease-spring) both}
.source-item:nth-child(2){animation-delay:.04s}
.source-item:nth-child(3){animation-delay:.08s}
.source-item:nth-child(4){animation-delay:.12s}

/* Verdict actions entrance */
.verdict-actions{animation:paragraphFadeIn .35s var(--ease-spring) .15s both}

/* Feedback entrance */
.feedback-row{animation:paragraphFadeIn .35s var(--ease-spring) .2s both}

/* Results empty state */
.results-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;animation:fadeInUp .5s var(--ease-spring) both}
.results-empty-icon{width:64px;height:64px;color:var(--vh-text-tertiary);opacity:.25;margin-bottom:1.25rem;animation:emptyFloat 3.5s ease-in-out infinite}
.results-empty-title{font-family:var(--vh-font-display);font-size:1.15rem;font-weight:700;color:var(--vh-text);margin-bottom:.5rem}
.results-empty-desc{font-size:.85rem;color:var(--vh-text-muted);line-height:1.6;max-width:340px}

/* ─── HIDDEN ATTRIBUTE ─── */
[hidden]{display:none!important}

/* will-change hints for animated elements — only during entrance animation, cleared after */
.results-flow>.anim-in{will-change:transform,opacity}

/* Loading-to-results transition */
@keyframes resultReveal{0%{opacity:0;transform:translateY(16px) scale(.97)}60%{opacity:1;transform:translateY(-3px) scale(1.005)}100%{opacity:1;transform:none}}
.result-reveal{animation:resultReveal .55s var(--ease-spring) both}

/* Share button tooltip */
.card-act[data-act="share"]:hover::before{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:.25rem .55rem;background:#1f1f1f;color:#fff;font-size:.62rem;font-weight:600;border-radius:var(--radius-xs, 8px);white-space:nowrap;pointer-events:none;opacity:0;animation:tooltipIn .2s ease .3s forwards}
@keyframes tooltipIn{to{opacity:1;transform:translateX(-50%) translateY(-4px)}}
.card-act[data-act="share"]{position:relative}

/* ═══════════════════════════════════════════════════════════════
   INTERACTIVE STATES — unified :active + :focus-visible
   ═══════════════════════════════════════════════════════════════ */
.card-act:active,.hero-send:active,.results-send-btn:active,.question-opt:active,.fb-btn:active,.fb-tag:active,.fb-submit:active,.sidebar-new:active,.share-copy-btn:active,.share-action-btn:active,.card-expand-btn:active,.view-inside-toggle:active{
    transform:scale(.94)
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 768px (tablet)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
    /* Bottom sheet sidebar */
    .sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%!important;max-height:80vh;transform:translateY(100%);z-index:100;border-right:none;border-top:1.5px solid var(--vh-border);border-radius:20px 20px 0 0;transition:transform .35s var(--ease-spring);box-shadow:0 -8px 40px rgba(0,0,0,.15),0 -2px 12px rgba(0,0,0,.06);overflow:hidden;animation:none;will-change:transform}
    .sidebar.open{transform:translateY(0)}
    .sidebar-inner{min-width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,0);overscroll-behavior:contain}
    /* Drag handle */
    .sidebar::before{content:'';display:block;width:40px;height:4.5px;background:var(--vh-text-tertiary);opacity:.35;border-radius:var(--radius-xs, 8px);margin:10px auto 6px;flex-shrink:0;transition:opacity .2s ease}
    .sidebar:active::before{opacity:.6}
    /* Overlay backdrop blur */
    .sidebar-overlay.open{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:rgba(0,0,0,.35)}
    .sidebar-head{padding:1rem 1.25rem .75rem}
    .sidebar-foot{padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom,0))}
    .sidebar.collapsed{transform:translateY(100%);width:100%;height:auto}
    .sidebar.collapsed .sidebar-inner{opacity:0;pointer-events:none}
    .sidebar-credits{margin:0 1rem .75rem}
    .sidebar-entry{min-height:44px;padding:.6rem .65rem;border-left:none;border-bottom:1px solid var(--vh-border)}
    .sidebar-entry.active{border-left:none;background:rgba(var(--vh-primary-rgb),.12)}
    .sidebar-entry:last-child{border-bottom:none}
    .sidebar-link{min-height:44px;padding:.55rem .65rem}

    /* Topbar */
    .topbar{padding:0 1rem;padding-top:env(safe-area-inset-top,0)}
    .topbar-expand{display:flex}

    /* Hero */
    .hero{padding:2rem 1.25rem 5rem}
    .hero h1{font-size:clamp(1.6rem,5vw,2rem)}
    .hero-sub{font-size:.88rem}
    .hero-input-wrap{max-width:100%}
    .hero-input-box{border-radius:var(--radius-lg, 18px)}
    .hero-input{padding:1rem 0 1rem 1.15rem;font-size:.9rem;min-height:48px}
    .hero-paste-btn{width:44px;height:44px}
    .hero-send{width:48px;height:48px}

    /* Results */
    .results-flow{padding:1.5rem 1rem calc(4rem + env(safe-area-inset-bottom,0))}
    .results-input-bar{padding:.6rem 1rem}
    .verdict-hero{padding:1.5rem 1.25rem;border-radius:var(--radius-lg, 18px)}
    .verdict-headline{font-size:1.35rem}
    .result-card{padding:1.25rem 1.15rem;border-radius:var(--radius-lg, 18px)}

    /* Touch targets */
    .card-act{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
    .v-btn{min-height:44px;padding:.6rem 1.15rem}
    .fb-btn{min-height:44px;padding:.4rem .8rem}
    .mode-switch-btn{padding:.55rem .95rem;font-size:.75rem;min-height:44px}

    /* Share modal */
    .share-modal{border-radius:var(--radius-lg, 18px);padding:1.5rem;margin-bottom:env(safe-area-inset-bottom,0)}

    /* Toast */
    .toast{right:1rem;left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0));max-width:none;transform:translateX(0) translateY(60px)}
    .toast.show{transform:translateX(0) translateY(0)}
    .toast.toast-exit{transform:translateX(0) translateY(60px)}

    /* Skeleton */
    .skeleton-stats{grid-template-columns:repeat(2,1fr)}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 480px (small phone)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:480px){
    .hero h1{font-size:clamp(1.4rem,5vw,1.7rem)}
    .hero{padding:1.5rem 1rem 4rem}
    .verdict-hero{padding:1.25rem 1rem;border-radius:var(--radius-lg, 18px)}
    .result-card{padding:1.1rem 1rem;border-radius:var(--radius-lg, 18px)}
    .verdict-stats,.card-stats{grid-template-columns:1fr 1fr}
    .card-highlights{gap:.3rem}
    .hl-pill{font-size:.65rem;padding:.25rem .5rem}
    .share-modal{width:95%;padding:1.25rem}
    .share-url-row{flex-direction:column}
    .share-actions{flex-direction:column}
    .share-action-btn{justify-content:center}
    .question-opts{gap:.3rem}
    .question-opt{padding:.45rem .75rem;font-size:.72rem}
    .card-gallery img{width:100px;height:65px}
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 360px (extra small)
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:360px){
    .hero h1{font-size:1.3rem}
    .hero-sub{font-size:.82rem;margin-bottom:2rem}
    .hero{padding:1.25rem .75rem 3rem}
    .hero-input{font-size:.85rem;padding:.85rem 0 .85rem .75rem}
    .results-flow{padding:1rem .75rem calc(3.5rem + env(safe-area-inset-bottom,0))}
    .verdict-hero{padding:1rem .85rem;border-radius:var(--radius-md, 12px)}
    .verdict-headline{font-size:1.15rem}
    .result-card{padding:1rem .85rem;border-radius:var(--radius-md, 12px)}
    .verdict-stats,.card-stats{grid-template-columns:1fr}
    .skeleton-stats{grid-template-columns:1fr}
    .card-title{font-size:1rem}
    .v-btn{font-size:.72rem;padding:.5rem .85rem}
    .market-scan-banner{flex-direction:column;align-items:flex-start;gap:.4rem;padding:.6rem 1rem;font-size:.75rem}
    .scan-badges{margin-top:.25rem}
    .topbar{padding:0 .75rem;padding-top:env(safe-area-inset-top,0)}
    .credits-pill{padding:.35rem .65rem;font-size:.65rem}
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.15s!important;
        scroll-behavior:auto!important
    }
    .hero-engine-dot{animation:none}
    .loading-dot{animation:none}
    .typing-indicator-dots span{animation:none;opacity:.6}
    .sidebar-empty-icon{animation:none}
    .results-empty-icon{animation:none}
    .search-transition::after{animation:none;display:none}
    .skeleton-ring,.skeleton-badge,.skeleton-title,.skeleton-text,.skeleton-stat,.skeleton-image,.skeleton-pill,.loading-line{
        animation:skeletonPulse 2s cubic-bezier(.4,0,.6,1) infinite!important
    }
    .loading-progress-fill{transition-duration:.3s!important}
    .gallery-lightbox img{transition-duration:.15s!important}
    .card-act.heart-anim svg{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — forced-colors (high contrast mode)
   ═══════════════════════════════════════════════════════════════ */
@media(forced-colors:active){
    .sidebar{border-right:2px solid CanvasText}
    .sidebar-entry.active{border-left:3px solid Highlight}
    .result-card,.verdict-hero,.question-card,.loading-card,.skeleton-card{border:2px solid CanvasText}
    .result-card::before,.verdict-hero::before{display:none}
    .hero-input-box{border:2px solid CanvasText}
    .hero-input-box:focus-within{border-color:Highlight}
    .hero-send,.results-send-btn,.v-btn.primary,.fb-submit,.share-copy-btn,.sidebar-empty-btn{
        border:2px solid ButtonText;forced-color-adjust:none
    }
    .v-btn,.fb-btn,.card-act,.question-opt,.fb-tag,.card-expand-btn,.view-inside-toggle,.share-action-btn{
        border:1px solid ButtonText
    }
    .card-badge,.search-id-badge,.scan-badge,.trust-pill,.hl-pill{border:1px solid CanvasText}
    .score-ring{filter:none}
    .score-ring svg circle{forced-color-adjust:none}
    .toast{border:2px solid CanvasText;background:Canvas;color:CanvasText}
    .loading-line,.skeleton-ring,.skeleton-badge,.skeleton-title,.skeleton-text,.skeleton-stat,.skeleton-image,.skeleton-pill{
        background:none;border:1px solid GrayText
    }
    .gallery-lightbox{background:rgba(0,0,0,.9);backdrop-filter:none;-webkit-backdrop-filter:none}
    .error-state.error-network,.error-state.error-invalid,.error-state.error-ratelimit,.error-state.error-timeout,.error-state.error-server{border-color:CanvasText}
    *:focus-visible{outline:2px solid Highlight!important;outline-offset:2px!important}
    .sidebar-overlay.open{background:rgba(0,0,0,.5);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ═══════════════════════════════════════════════════════════════
   SCREEN READER ONLY (visually hidden but announced)
   ═══════════════════════════════════════════════════════════════ */
.vh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Second skip link */
.vh-skip-link-results{left:auto;right:1rem}

/* ═══════════════════════════════════════════════════════════════
   MOBILE POLISH — BOTTOM SHEET ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
    /* Bottom sheet grab area — larger for easier touch drag */
    .sidebar::before{width:48px;height:5px;margin:12px auto 8px;cursor:grab}
    .sidebar::after{content:'';display:block;position:absolute;top:0;left:0;right:0;height:44px;z-index:1;cursor:grab}

    /* Sidebar items: ensure min tap target 48px */
    .sidebar-entry{min-height:48px;padding:.65rem .75rem;gap:.6rem;-webkit-tap-highlight-color:rgba(var(--vh-primary-rgb),.15)}
    .sidebar-entry-del{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
    .sidebar-entry-reactivate{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
    .sidebar-link{min-height:48px}
    .sidebar-user{min-height:48px}
    .sidebar-new{width:40px;height:40px}
    .sidebar-empty-btn{min-height:48px;padding:.65rem 1.3rem}

    /* Hero search input — full width with better mobile sizing */
    .hero-input-wrap{max-width:100%;padding:0}
    .hero-input-box{border-radius:var(--radius-lg, 18px)}
    .hero-input{padding:1rem .5rem 1rem .25rem;font-size:16px;min-height:52px}
    .hero-paste-btn{width:48px;height:48px;margin-left:.35rem}
    .hero-send{width:48px;height:48px;border-radius:var(--radius-lg, 18px);margin:.35rem}

    /* Results compact input — full width */
    .results-input-bar{padding:.5rem .75rem}
    .results-input-compact{max-width:100%}
    .results-input-field{padding:.65rem .75rem;font-size:16px;min-height:44px}
    .results-send-btn{width:40px;height:40px;border-radius:var(--radius-sm, 10px);margin:.3rem}

    /* Cards — proper stacking with readable scores */
    .results-flow{padding:1rem .75rem calc(4rem + env(safe-area-inset-bottom,0));gap:1rem}
    .verdict-hero{padding:1.25rem 1rem;border-radius:var(--radius-lg, 18px)}
    .verdict-headline{font-size:1.25rem}
    .verdict-signal{gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
    .verdict-text{font-size:1rem}
    .result-card{padding:1.15rem 1rem;border-radius:var(--radius-lg, 18px)}
    .card-top{gap:.5rem;flex-wrap:wrap}
    .card-title{font-size:1.05rem}

    /* Score ring — ensure readability on mobile */
    .score-ring{width:50px;height:50px}
    .score-ring svg{width:50px;height:50px}
    .score-num{font-size:.82rem}

    /* Stats grid — two columns on mobile */
    .verdict-stats,.card-stats{grid-template-columns:1fr 1fr;gap:.4rem}
    .verdict-stat,.card-stat{padding:.65rem .6rem}
    .verdict-stat-label,.card-stat-label{font-size:.55rem}
    .verdict-stat-value,.card-stat-value{font-size:.9rem}

    /* Highlight pills — horizontal scroll on narrow screens */
    .card-highlights{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;padding-bottom:.25rem}
    .card-highlights::-webkit-scrollbar{display:none}
    .hl-pill{flex-shrink:0}

    /* Findings — stack properly */
    .card-findings{padding:.5rem .65rem}
    .card-finding{font-size:.75rem}

    /* Actions — wrap nicely */
    .verdict-actions{gap:.4rem;padding-top:1rem}
    .v-btn{min-height:48px;padding:.55rem 1rem;font-size:.78rem}
    .card-actions-row{gap:.1rem}
    .card-act{min-width:48px;min-height:48px}

    /* Gallery — horizontal scroll with touch */
    .card-gallery{scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
    .card-gallery img{scroll-snap-align:start;width:110px;height:72px}

    /* Toast — bottom center, safe area aware, not blocking content */
    .toast{left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0));max-width:none;border-radius:var(--radius-md, 12px);padding:.65rem 1rem;font-size:.75rem;transform:translateY(calc(100% + 1rem))}
    .toast.show{transform:translateY(0)}
    .toast.toast-exit{transform:translateY(calc(100% + 1rem))}

    /* Feedback — larger touch targets */
    .fb-btn{min-height:48px;padding:.45rem .85rem}
    .fb-tag{min-height:40px;display:inline-flex;align-items:center;padding:.3rem .6rem}
    .fb-submit{min-height:44px;padding:.45rem .85rem}

    /* Question options — better tap targets */
    .question-opt{min-height:48px;display:inline-flex;align-items:center;padding:.55rem 1rem}

    /* Share modal — bottom sheet style on mobile */
    .share-overlay{align-items:flex-end}
    .share-modal{width:100%;max-width:100%;border-radius:20px 20px 0 0;margin:0;padding:1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0));transform:translateY(100%);max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .share-overlay.active .share-modal{transform:translateY(0)}
    .share-close{top:.75rem;right:.75rem;min-width:44px;min-height:44px}
    .share-copy-btn{min-height:48px}
    .share-action-btn{min-height:48px;justify-content:center}

    /* Lightbox — full screen on mobile */
    .gallery-lightbox img{max-width:100vw;max-height:90vh;border-radius:0}
    .gallery-lightbox-close{top:.75rem;right:.75rem;min-width:48px;min-height:48px}
    .gallery-lightbox-nav{min-width:48px;min-height:48px}
    .gallery-lightbox-prev{left:.5rem}
    .gallery-lightbox-next{right:.5rem}

    /* Loading card */
    .loading-card{padding:1.15rem 1rem;border-radius:var(--radius-lg, 18px)}
    .loading-steps{gap:.25rem}
    .loading-step{font-size:.55rem;padding:.15rem .35rem}

    /* Error state */
    .error-content{padding:1rem 0}
    .error-title{font-size:1rem}
    .error-desc{font-size:.78rem}

    /* Sources — compact on mobile */
    .sources-section{padding:.75rem 1rem}
    .source-item{gap:.2rem .5rem;padding:.35rem .4rem}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE POLISH — 480px refinements
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:480px){
    .hero-input{font-size:16px}
    .results-input-field{font-size:16px}
    .verdict-stats,.card-stats{grid-template-columns:1fr 1fr}
    .verdict-actions{flex-direction:column}
    .verdict-actions .v-btn{width:100%;justify-content:center}
    .card-footer{flex-direction:column}
    .card-footer .v-btn{width:100%;justify-content:center}
    .market-scan-banner{flex-direction:column;align-items:flex-start;gap:.35rem;padding:.6rem .85rem;font-size:.75rem}
    .scan-badges{margin-top:.2rem}
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE POLISH — 360px refinements
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:360px){
    .verdict-stats,.card-stats{grid-template-columns:1fr}
    .score-ring{width:44px;height:44px}
    .score-ring svg{width:44px;height:44px}
    .score-num{font-size:.75rem}
}

/* ═══════════════════════════════════════════════════════════════
   FOCUS VISIBLE — enhanced keyboard focus indicators
   ═══════════════════════════════════════════════════════════════ */
.result-card:focus-within{outline:2px solid var(--vh-primary);outline-offset:2px;border-radius:var(--radius-xl, 22px)}
.verdict-hero:focus-within{outline:2px solid var(--vh-primary);outline-offset:2px;border-radius:var(--radius-xl, 22px)}

/* Ensure interactive elements within cards are tabbable */
.card-act:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px;border-radius:var(--radius-xs, 8px);background:rgba(var(--vh-primary-rgb),.08)}
.v-btn:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px}
.question-opt:focus-visible{outline:2px solid var(--vh-primary);outline-offset:2px}

/* Loading card focus management */
.loading-card:focus{outline:none}
.loading-card[role="status"]{outline:none}

/* ═══════════════════════════════════════════════════════════════
   TOUCH INTERACTIONS — active states for touch feedback
   ═══════════════════════════════════════════════════════════════ */
@media(hover:none) and (pointer:coarse){
    /* Disable hover-based transforms on touch devices to prevent jank */
    .result-card:hover{transform:none;box-shadow:0 1px 4px rgba(31,31,31,.02)}
    .verdict-hero:hover{transform:none;box-shadow:0 2px 8px rgba(31,31,31,.03)}
    .question-card:hover{transform:none;box-shadow:0 1px 4px rgba(31,31,31,.02)}
    .result-card:hover::before{transform:scaleX(0)}
    .sidebar-entry:hover{transform:none}
    .v-btn:hover{transform:none}

    /* Active (touch) states instead */
    .result-card:active{transform:scale(.99);transition-duration:.1s}
    .verdict-hero:active{transform:scale(.99);transition-duration:.1s}
    .sidebar-entry:active{background:rgba(var(--vh-primary-rgb),.12);transform:none}
    .v-btn:active{transform:scale(.95);transition-duration:.1s}
    .card-act:active{background:rgba(var(--vh-primary-rgb),.12);transform:scale(.9);transition-duration:.1s}
    .question-opt:active{background:rgba(var(--vh-primary-rgb),.1);transform:scale(.97);transition-duration:.1s}
    .fb-btn:active{transform:scale(.95);transition-duration:.1s}
    .fb-tag:active{transform:scale(.95);transition-duration:.1s}
    .hl-pill:active{background:rgba(var(--vh-primary-rgb),.1);transition-duration:.1s}
    .share-action-btn:active{transform:scale(.97);transition-duration:.1s}

    /* Tap highlight for sidebar items */
    .sidebar-entry{-webkit-tap-highlight-color:rgba(var(--vh-primary-rgb),.1)}
    .v-btn{-webkit-tap-highlight-color:rgba(var(--vh-primary-rgb),.15)}
    .card-act{-webkit-tap-highlight-color:transparent}
}

/* ─── NO CREDITS MODAL ─── */
.no-credits-overlay{
    position:fixed;inset:0;z-index:9999;
    background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    animation:ncFadeIn .25s var(--ease-smooth);
}
.no-credits-overlay[hidden]{display:none}
@keyframes ncFadeIn{from{opacity:0}to{opacity:1}}
.no-credits-modal{
    background:var(--vh-surface,#fff);
    border-radius:var(--vh-radius-xl,16px);
    padding:40px 32px 32px;
    max-width:400px;width:100%;
    text-align:center;
    box-shadow:0 24px 80px rgba(0,0,0,.25);
    animation:ncSlideUp .35s var(--ease-spring);
}
@keyframes ncSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.no-credits-icon{margin:0 auto 20px;width:64px;height:64px}
.no-credits-icon svg{width:100%;height:100%}
.no-credits-modal h2{
    font-size:1.375rem;font-weight:700;
    color:var(--vh-text,#1a1a1a);margin:0 0 8px;
}
.no-credits-desc{
    font-size:.9375rem;color:var(--vh-text-muted,#6b7280);
    line-height:1.55;margin:0 0 24px;
}
.no-credits-cta{
    display:block;width:100%;padding:14px 24px;
    background:var(--vh-primary,#F2C94C);color:var(--vh-primary-contrast,#1a1a1a);
    font-weight:700;font-size:1rem;
    border:none;border-radius:var(--vh-radius-md,8px);
    text-decoration:none;text-align:center;
    cursor:pointer;transition:transform .15s,box-shadow .15s;
}
.no-credits-cta:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(var(--vh-primary-rgb),.35)}
.no-credits-dismiss{
    display:block;width:100%;margin-top:12px;padding:10px;
    background:none;border:none;
    color:var(--vh-text-muted,#6b7280);font-size:.875rem;
    cursor:pointer;border-radius:var(--vh-radius-md,8px);
    transition:background .15s;
}
.no-credits-dismiss:hover{background:var(--vh-hover,rgba(0,0,0,.04))}