/* ==========================================================================
   QRCraft Pro — app pages theme (dashboard, analytics, generate,
   previous QR, subscription).  Loaded AFTER each page's own <style>.
   Brand: logo purple #691AEF · logo yellow #FED507 · ink #1B0547 · Inter.
   Animations use transform/opacity only, respect prefers-reduced-motion,
   and hover effects are limited to real pointer devices (not touch).
   ========================================================================== */

/* ---- Inter (self-hosted; latin + latin-ext for ₹) ---- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/inter-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/inter-600.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-700.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-ext-400.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/inter-ext-700.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

html.qa {
  --qa-brand: #691aef; --qa-brand-d: #5810d0; --qa-deep: #470cab; --qa-tint: #f5f0ff; --qa-yellow: #fed507; --qa-yellow-d: #f0c800; --qa-ink: #1b0547;
  --qa-ease: cubic-bezier(.22, 1, .36, 1); --qa-spring: cubic-bezier(.34, 1.45, .64, 1);
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
html.qa body, html.qa button, html.qa input, html.qa select, html.qa textarea, html.qa table { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important; }
html.qa body *:not(code):not(pre):not(kbd) { font-family: inherit; }
html.qa a, html.qa button, html.qa select, html.qa summary, html.qa [role="button"], html.qa label { touch-action: manipulation; }
html.qa ::selection { background: rgba(105, 26, 239, .22); }

/* ---------- keyframes ---------- */
@keyframes qa-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes qa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qa-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes qa-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes qa-pop { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes qa-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes qa-drop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes qa-ring { 0% { box-shadow: 0 0 0 0 rgba(105, 26, 239, .45); } 100% { box-shadow: 0 0 0 10px rgba(105, 26, 239, 0); } }
@keyframes qa-shine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes qa-float { 50% { transform: translateY(-4px); } }
@keyframes qa-bob { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 60% { transform: translateY(1px); } }
@keyframes qa-drift { to { transform: translate3d(30px, 24px, 0) scale(1.06); } }

/* ---------- real logo instead of ⚡ / QR-grid tiles ---------- */
html.qa .sb-logo, html.qa .mobile-brand-logo, html.qa .mobile-brand-icon, html.qa .brand-icon, html.qa .logo-mark, html.qa .logo-icon {
  background: url("uploads/brand/logo-96.png") center / cover no-repeat !important; font-size: 0 !important; color: transparent !important; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); overflow: hidden; }
html.qa .sb-logo svg, html.qa .mobile-brand-logo svg, html.qa .logo-icon svg { display: none !important; }

/* ---------- sidebar (dashboard / analytics / generate): logo-purple + yellow marker ---------- */
html.qa .sidebar { background: linear-gradient(190deg, #691aef 0%, #5810d0 50%, #470cab 100%) !important; }
html.qa .sb-link, html.qa .nav-item { position: relative; transition: background-color .25s, color .25s, transform .35s var(--qa-ease); }
html.qa .sb-link.active::before, html.qa .nav-item.active::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--qa-yellow);
  transform-origin: center; animation: qa-drop .5s var(--qa-spring) .25s backwards; box-shadow: 0 0 10px rgba(254, 213, 7, .7); }
html.qa .sb-link.active, html.qa .nav-item.active { background: rgba(255, 255, 255, .16) !important; }
html.qa .sb-link .badge, html.qa .nav-item .badge { background: var(--qa-yellow) !important; color: var(--qa-ink) !important; border-color: transparent !important; }
@media (hover: hover) and (pointer: fine) {
  html.qa .sb-link:hover, html.qa .nav-item:hover { transform: translateX(3px); }
  html.qa .sb-link:hover svg, html.qa .nav-item:hover .ni, html.qa .nav-item:hover .nav-icon { animation: qa-bob .6s var(--qa-ease); }
}
html.qa .sb-avatar, html.qa .user-avatar { background: var(--qa-yellow) !important; color: var(--qa-ink) !important; font-weight: 700; }
/* upgrade call-outs = logo yellow */
html.qa .upgrade-btn, html.qa .btn-white { background: var(--qa-yellow) !important; color: var(--qa-ink) !important; font-weight: 700; border: 0 !important; transition: transform .3s var(--qa-spring), box-shadow .3s; }
html.qa .upgrade-btn:hover, html.qa .btn-white:hover { background: var(--qa-yellow-d) !important; transform: translateY(-1px) scale(1.02); box-shadow: 0 10px 20px -10px rgba(254, 213, 7, .8); }
html.qa .sidebar-upgrade { background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .16); position: relative; overflow: hidden; }
html.qa .sidebar-upgrade::before { content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(254, 213, 7, .5), transparent 65%); animation: qa-drift 9s ease-in-out infinite alternate; pointer-events: none; }

/* ---------- load sequence (CSS only, fill = backwards → never leaves anything hidden) ---------- */
html.qa .topbar, html.qa .mobile-topbar, html.qa nav.nav, html.qa .controls-bar { animation: qa-down .6s var(--qa-ease) backwards; }
@media (min-width: 901px) {
  html.qa .sidebar { animation: qa-left .6s var(--qa-ease) backwards; }
  html.qa .sb-nav > *, html.qa .sidebar-nav > *, html.qa .sidebar-nav .nav-section > * { animation: qa-left .55s var(--qa-ease) backwards; }
  html.qa .sb-nav > *:nth-child(1), html.qa .sidebar-nav > *:nth-child(1) { animation-delay: .10s; } html.qa .sb-nav > *:nth-child(2), html.qa .sidebar-nav > *:nth-child(2) { animation-delay: .15s; }
  html.qa .sb-nav > *:nth-child(3), html.qa .sidebar-nav > *:nth-child(3) { animation-delay: .20s; } html.qa .sb-nav > *:nth-child(4), html.qa .sidebar-nav > *:nth-child(4) { animation-delay: .25s; }
  html.qa .sb-nav > *:nth-child(5), html.qa .sidebar-nav > *:nth-child(5) { animation-delay: .30s; } html.qa .sb-nav > *:nth-child(6), html.qa .sidebar-nav > *:nth-child(6) { animation-delay: .35s; }
  html.qa .sb-nav > *:nth-child(n+7), html.qa .sidebar-nav > *:nth-child(n+7) { animation-delay: .40s; }
}
html.qa .page-head, html.qa .upgrade-banner, html.qa .selector-wrap, html.qa .quick-bar, html.qa .step-progress { animation: qa-up .7s var(--qa-ease) .12s backwards; }
html.qa .stat-card { animation: qa-up .7s var(--qa-ease) backwards; }
html.qa .stat-grid > *:nth-child(1) { animation-delay: .15s; } html.qa .stat-grid > *:nth-child(2) { animation-delay: .22s; }
html.qa .stat-grid > *:nth-child(3) { animation-delay: .29s; } html.qa .stat-grid > *:nth-child(4) { animation-delay: .36s; }
html.qa .stat-icon, html.qa .stat-icon-row > .stat-icon { animation: qa-pop .6s var(--qa-spring) .4s backwards; }
html.qa .mid-row > *, html.qa .chart-grid > *, html.qa .bottom-row > * { animation: qa-up .75s var(--qa-ease) .4s backwards; }
html.qa .mid-row > *:nth-child(2), html.qa .chart-grid > *:nth-child(2), html.qa .bottom-row > *:nth-child(2) { animation-delay: .5s; }
html.qa .table-card, html.qa .content-wrap > .card { animation: qa-up .75s var(--qa-ease) .3s backwards; }
html.qa table tbody tr { animation: qa-fade .55s ease backwards; }
html.qa table tbody tr:nth-child(1) { animation-delay: .35s; } html.qa table tbody tr:nth-child(2) { animation-delay: .4s; } html.qa table tbody tr:nth-child(3) { animation-delay: .45s; }
html.qa table tbody tr:nth-child(4) { animation-delay: .5s; }  html.qa table tbody tr:nth-child(5) { animation-delay: .55s; } html.qa table tbody tr:nth-child(n+6) { animation-delay: .6s; }
html.qa .qr-mc { animation: qa-up .55s var(--qa-ease) backwards; }
html.qa .qr-mc:nth-of-type(1) { animation-delay: .3s; } html.qa .qr-mc:nth-of-type(2) { animation-delay: .38s; } html.qa .qr-mc:nth-of-type(3) { animation-delay: .46s; } html.qa .qr-mc:nth-of-type(n+4) { animation-delay: .54s; }
/* bars grow */
html.qa .prog-fill, html.qa .bar-fill { transform-origin: left center; animation: qa-grow 1.1s var(--qa-ease) .5s backwards; }
html.qa .bar-item:nth-child(2) .bar-fill { animation-delay: .6s; } html.qa .bar-item:nth-child(3) .bar-fill { animation-delay: .7s; } html.qa .bar-item:nth-child(n+4) .bar-fill { animation-delay: .8s; }

/* ---------- cards / buttons: hover (pointer devices only) + press (touch too) ---------- */
html.qa .stat-card, html.qa .card, html.qa .qr-mc, html.qa .qr-card { transition: transform .4s var(--qa-ease), box-shadow .4s ease, border-color .4s ease; }
@media (hover: hover) and (pointer: fine) {
  html.qa .stat-card:hover, html.qa .qr-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(105, 26, 239, .5), 0 0 0 1px rgba(105, 26, 239, .18) !important; }
  html.qa .stat-card:hover .stat-icon { animation: qa-bob .7s var(--qa-ease); }
  html.qa table tbody tr { transition: background-color .25s; } html.qa table tbody tr:hover { background: rgba(105, 26, 239, .045); }
}
html.qa .btn, html.qa .btn-create, html.qa .mobile-create-btn, html.qa .btn-generate, html.qa .btn-next, html.qa .btn-back, html.qa .upgrade-btn, html.qa .btn-white,
html.qa .ph-btn, html.qa .act-btn, html.qa .filter-tab, html.qa .bn-item, html.qa .mc-stats, html.qa .mc-edit, html.qa .type-opt-btn, html.qa .btn-amber, html.qa .tab-btn { transition: transform .3s var(--qa-spring), box-shadow .3s ease, background-color .25s, color .25s, border-color .25s; }
html.qa .btn:active, html.qa .btn-create:active, html.qa .mobile-create-btn:active, html.qa .btn-generate:active, html.qa .btn-next:active, html.qa .btn-back:active,
html.qa .ph-btn:active, html.qa .act-btn:active, html.qa .filter-tab:active, html.qa .bn-item:active, html.qa .type-opt-btn:active, html.qa .btn-amber:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  html.qa .btn-primary:hover, html.qa .btn-create:hover, html.qa .btn-generate:hover, html.qa .btn-next:hover, html.qa .ph-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(105, 26, 239, .7); }
}
html.qa .btn-primary, html.qa .btn-create, html.qa .mobile-create-btn, html.qa .btn-generate, html.qa .btn-next { position: relative; overflow: hidden; isolation: isolate; }
html.qa .btn-primary::after, html.qa .btn-create::after, html.qa .btn-generate::after, html.qa .btn-next::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-120%) skewX(-18deg); }
@media (hover: hover) and (pointer: fine) { html.qa .btn-primary:hover::after, html.qa .btn-create:hover::after, html.qa .btn-generate:hover::after, html.qa .btn-next:hover::after { animation: qa-shine .9s var(--qa-ease) 1; } }
html.qa input:focus, html.qa select:focus, html.qa textarea:focus { outline: none; }
html.qa input:focus-visible, html.qa select:focus-visible, html.qa textarea:focus-visible { box-shadow: 0 0 0 4px rgba(105, 26, 239, .16) !important; border-color: var(--qa-brand) !important; }

/* ---------- scroll reveal (JS marks ONLY below-the-fold elements, so nothing is ever hidden without JS) ---------- */
html.qa .qa-rv { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--qa-ease), transform .85s var(--qa-ease); transition-delay: calc(var(--qd, 0) * 1ms); }
html.qa .qa-rv.qa-in { opacity: 1; transform: none; }
html.qa .qa-bar { transform: scaleX(0) !important; transform-origin: left center; animation: none !important; transition: transform 1.1s var(--qa-ease) .15s; }
html.qa .qa-bar.qa-in { transform: scaleX(1) !important; }

/* ---------- dashboard ---------- */
html.qa-dashboard .upgrade-banner { position: relative; overflow: hidden; isolation: isolate; }
html.qa-dashboard .upgrade-banner::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(254, 213, 7, .38), transparent 65%); animation: qa-drift 12s ease-in-out infinite alternate; }
html.qa-dashboard .mobile-topbar, html.qa-analytics .mobile-topbar { background: linear-gradient(180deg, #691aef, #5810d0) !important; }
html.qa-dashboard .mobile-bottomnav, html.qa-analytics .mobile-bottomnav { background: linear-gradient(180deg, #5810d0, #470cab) !important; padding-bottom: env(safe-area-inset-bottom); }
html.qa-dashboard { --bottom-nav-h: calc(60px + env(safe-area-inset-bottom)); }
html.qa-analytics { --bottomnav-h: calc(64px + env(safe-area-inset-bottom)); }
html.qa .bn-item { position: relative; }
html.qa .bn-item.active::before { content: ""; position: absolute; top: -1px; left: 26%; right: 26%; height: 3px; border-radius: 0 0 3px 3px; background: var(--qa-yellow); animation: qa-drop .45s var(--qa-spring) backwards; transform-origin: top; box-shadow: 0 0 10px rgba(254, 213, 7, .8); }
html.qa .bn-item.active svg, html.qa .bn-item.active .bn-icon { animation: qa-bob .7s var(--qa-ease) .2s; }
html.qa .stat-delta.delta-up { animation: qa-float 3.2s ease-in-out 1.2s infinite; }
html.qa .scan-dot { animation: qa-ring 2s ease-out infinite; }
html.qa .qr-rank.gold { animation: qa-float 3s ease-in-out infinite; }

/* ---------- analytics ---------- */
html.qa-analytics .qr-select { border-radius: 12px; transition: box-shadow .25s, border-color .25s; }
html.qa-analytics .card-badge, html.qa-analytics .stat-badge.up { animation: qa-pop .55s var(--qa-spring) .6s backwards; }
html.qa-analytics .btn-create { background: var(--qa-yellow) !important; color: var(--qa-ink) !important; font-weight: 700; }


/* ==========================================================================
   ANALYTICS — alignment system (one spacing unit, equal insets, no collisions)
   ========================================================================== */
html.qa-analytics { --qa-gap: 16px; }
html.qa-analytics .main { min-width: 0; }
@media (min-width: 701px) { html.qa-analytics .main { padding: 28px !important; } }            /* was 32px 28px → equal on all four sides */
html.qa-analytics .selector-wrap { margin-bottom: var(--qa-gap) !important; min-width: 0; }
html.qa-analytics .qr-select { min-width: 0; max-width: 100%; flex: 1 1 260px; text-overflow: ellipsis; }   /* long QR labels can no longer widen the page */
html.qa-analytics .stat-grid, html.qa-analytics .chart-grid { gap: var(--qa-gap) !important; margin-bottom: var(--qa-gap) !important; }
html.qa-analytics .table-card { margin-top: 0 !important; }
/* all four stat values share one height, so every label sits on the same line */
html.qa-analytics .stat-value { display: flex; align-items: center; min-height: 30px; padding-top: 0 !important; }
/* table text inset = card padding (24px), matching the title, icon and bars above */
html.qa-analytics th:first-child, html.qa-analytics td:first-child { padding-left: 24px; }
html.qa-analytics th:last-child, html.qa-analytics td:last-child { padding-right: 24px; }
/* topbar: never wraps, never collides, button/badge stay centred */
html.qa-analytics .topbar { gap: 16px; }
html.qa-analytics .topbar > div:first-child { min-width: 0; flex: 1 1 auto; }
html.qa-analytics .topbar-title, html.qa-analytics .topbar-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.qa-analytics .topbar-right { flex-shrink: 0; align-items: center; }
html.qa-analytics .btn-create { white-space: nowrap; }
@media (max-width: 1100px) { html.qa-analytics .user-info { display: none; } html.qa-analytics .user-badge { padding-right: 10px; } }
@media (max-width: 700px) { html.qa-analytics { --qa-gap: 12px; } html.qa-analytics .stat-value { min-height: 24px; } html.qa-analytics .qr-select { flex: none; width: 100%; } }   /* stacked on phones: width, not height */
@media (max-width: 360px) { html.qa-analytics { --qa-gap: 10px; } html.qa-analytics .stat-value { min-height: 20px; } }

/* ---------- generate ---------- */
html.qa-generate .step-panel.active > .card, html.qa-generate .step-panel.active > * { animation: qa-up .55s var(--qa-ease) backwards; }
html.qa-generate .sp-item.active .sp-circle { animation: qa-ring 1.8s ease-out infinite; }
html.qa-generate .sp-item.done .sp-circle, html.qa-generate .sp-item.active .sp-circle { transition: transform .4s var(--qa-spring), background-color .3s; }
html.qa-generate .sp-item.active .sp-circle { transform: scale(1.1); }
html.qa-generate .type-opt-btn { border-radius: 12px; }
@media (hover: hover) and (pointer: fine) { html.qa-generate .type-opt-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(105, 26, 239, .6); } }
html.qa-generate .type-opt-btn.selected, html.qa-generate .type-opt-btn.active { animation: qa-pop .4s var(--qa-spring); }
html.qa-generate .quick-bar { background: linear-gradient(135deg, #f5f0ff, #fff) !important; border-color: rgba(105, 26, 239, .18) !important; }
html.qa-generate .quick-bar-btn, html.qa-generate .btn-generate { background: var(--qa-brand) !important; color: #fff !important; }
html.qa-generate .plan-chip { background: var(--qa-yellow) !important; color: var(--qa-ink) !important; font-weight: 700; }
html.qa-generate .mobile-preview-btn { background: var(--qa-yellow) !important; color: var(--qa-ink) !important; font-weight: 700; box-shadow: 0 14px 30px -10px rgba(254, 213, 7, .8); animation: qa-float 3s ease-in-out 1s infinite; }
html.qa-generate .preview-badge.live::before { background: #16a34a; }
html.qa-generate .qr-stage { transition: box-shadow .4s; }
html.qa-generate .btn-action-dl { background: var(--qa-brand) !important; color: #fff !important; }
html.qa-generate .btn-action-share { background: var(--qa-yellow) !important; color: var(--qa-ink) !important; }

/* ---------- previous QR ---------- */
html.qa-previous_qr body { background: #faf8ff; }
html.qa-previous_qr .page-header { position: relative; overflow: hidden; background: linear-gradient(135deg, #470cab 0%, #691aef 60%, #7a3ff2 100%) !important; }
html.qa-previous_qr .page-header::after { content: ""; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(254, 213, 7, .4), transparent 65%); animation: qa-drift 14s ease-in-out infinite alternate; pointer-events: none; }
html.qa-previous_qr .ph-inner { position: relative; z-index: 1; }
html.qa-previous_qr .ph-btn-white { background: var(--qa-yellow) !important; color: var(--qa-ink) !important; font-weight: 700; }
html.qa-previous_qr .filter-tab.active { background: var(--qa-brand) !important; color: #fff !important; border-color: var(--qa-brand) !important; animation: qa-pop .35s var(--qa-spring); }
html.qa-previous_qr .qr-card { animation: qa-up .6s var(--qa-ease) backwards; border-radius: 18px; }
html.qa-previous_qr .qr-card:nth-child(1) { animation-delay: .10s; } html.qa-previous_qr .qr-card:nth-child(2) { animation-delay: .17s; } html.qa-previous_qr .qr-card:nth-child(3) { animation-delay: .24s; }
html.qa-previous_qr .qr-card:nth-child(4) { animation-delay: .31s; } html.qa-previous_qr .qr-card:nth-child(5) { animation-delay: .38s; } html.qa-previous_qr .qr-card:nth-child(6) { animation-delay: .45s; } html.qa-previous_qr .qr-card:nth-child(n+7) { animation-delay: .5s; }
html.qa-previous_qr .qr-card:hover .type-pill { transform: scale(1.06); } html.qa-previous_qr .type-pill { transition: transform .35s var(--qa-spring); }
html.qa-previous_qr .count-badge { background: var(--qa-yellow) !important; color: var(--qa-ink) !important; font-weight: 700; }
html.qa-previous_qr .modal-overlay.open .modal, html.qa-previous_qr .modal-overlay.show .modal, html.qa-previous_qr .modal-overlay.active .modal { animation: qa-pop .45s var(--qa-spring); }
html.qa-previous_qr .bulk-bar { border-radius: 18px; }
html.qa-previous_qr .empty-state, html.qa-previous_qr .empty { animation: qa-up .7s var(--qa-ease) .2s backwards; }

/* ---------- subscription / payment ---------- */
html.qa-subscription body { background: linear-gradient(180deg, #f5f0ff 0%, #ffffff 60%); }
html.qa-subscription .shell { animation: qa-up .8s var(--qa-ease) .1s backwards; box-shadow: 0 50px 100px -50px rgba(105, 26, 239, .45), 0 0 0 1px rgba(105, 26, 239, .08); }
html.qa-subscription .plan-col { background: linear-gradient(160deg, #691aef 0%, #470cab 100%) !important; }
html.qa-subscription .price-badge { background: linear-gradient(135deg, #fed507, #f5c800) !important; box-shadow: 0 20px 40px -18px rgba(254, 213, 7, .7) !important; animation: qa-pop .7s var(--qa-spring) .35s backwards; }
html.qa-subscription .price-badge .badge-sublabel, html.qa-subscription .price-badge .badge-period { color: rgba(27, 5, 71, .7) !important; }
html.qa-subscription .price-badge .badge-sym, html.qa-subscription .price-badge .badge-num { color: var(--qa-ink) !important; }
html.qa-subscription .feature-list li { animation: qa-left .55s var(--qa-ease) backwards; }
html.qa-subscription .feature-list li:nth-child(1) { animation-delay: .5s; } html.qa-subscription .feature-list li:nth-child(2) { animation-delay: .58s; } html.qa-subscription .feature-list li:nth-child(3) { animation-delay: .66s; }
html.qa-subscription .feature-list li:nth-child(4) { animation-delay: .74s; } html.qa-subscription .feature-list li:nth-child(n+5) { animation-delay: .82s; }
html.qa-subscription .fcheck { background: rgba(254, 213, 7, .22) !important; color: var(--qa-yellow) !important; }
html.qa-subscription .selected-plan-banner, html.qa-subscription .greeting-bar, html.qa-subscription .amount-pill { animation: qa-up .6s var(--qa-ease) backwards; }
html.qa-subscription .greeting-bar { animation-delay: .25s; } html.qa-subscription .amount-pill { animation-delay: .4s; }
html.qa-subscription .step-item.active .step-circle { animation: qa-ring 1.8s ease-out infinite; }
html.qa-subscription .step-item.done .step-circle { animation: qa-pop .5s var(--qa-spring) .4s backwards; }
html.qa-subscription .progress-stripe { background-size: 200% 100% !important; animation: qa-stripe 3s linear infinite; }
@keyframes qa-stripe { to { background-position: -200% 0; } }
html.qa-subscription .btn-amber { background: linear-gradient(135deg, #fed507, #f5c800) !important; color: var(--qa-ink) !important; font-weight: 800; box-shadow: 0 14px 28px -12px rgba(254, 213, 7, .9) !important; position: relative; overflow: hidden; isolation: isolate; }
html.qa-subscription .btn-amber::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(-120%) skewX(-18deg); animation: qa-shine 3.2s ease-in-out 1.2s infinite; }
html.qa-subscription .btn-amber:hover { transform: translateY(-1px); }
html.qa-subscription .tab-btn.active { color: var(--qa-brand) !important; }
html.qa-subscription .btn-primary { background: var(--qa-brand) !important; }

/* ---------- phones & tablets ---------- */
@media (max-width: 900px) {
  html.qa { overflow-x: clip; }
  html.qa .bn-item, html.qa .filter-tab, html.qa .menu-btn, html.qa .mobile-create-btn, html.qa .btn-create, html.qa .tab-btn, html.qa .drawer-close, html.qa .modal-close-btn { min-height: 44px; }
  html.qa .bn-item { justify-content: center; }
}
@media (max-width: 768px) {
  html.qa input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html.qa select, html.qa textarea { font-size: 16px !important; }
  html.qa .stat-card:active, html.qa .qr-card:active, html.qa .qr-mc:active { transform: scale(.985); }
  html.qa-subscription .shell { border-radius: 22px; }
  html.qa-subscription .price-badge .badge-num { font-size: 44px !important; }
}
@media (max-width: 380px) { html.qa .stat-card { padding: 12px !important; } }


/* ---------- polish ---------- */
html.qa-previous_qr .count-badge { padding: 4px 12px !important; border-radius: 999px !important; }
@media (max-width: 520px) {
  html.qa-generate .quick-tag { display: none !important; }
  html.qa-generate .quick-bar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  html.qa-generate .quick-bar-btn, html.qa-generate .quick-bar .btn-generate { flex-shrink: 0; white-space: nowrap; }
}
@media (max-width: 430px) {
  html.qa-previous_qr .qr-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html.qa-previous_qr .card-actions .act-btn { min-height: 44px; }
}


/* ==========================================================================
   ALIGNMENT FIXES (measured, not guessed)
   ========================================================================== */
/* 1) Sidebar brand row = top-bar height, so the divider line runs straight across
      (was 15px off on Analytics, 11px on Dashboard, 9px on Generate). */
html.qa-analytics .sidebar-brand { box-sizing: border-box; height: 62px; padding-top: 0; padding-bottom: 0; }
html.qa-dashboard .sb-brand      { box-sizing: border-box; height: var(--topbar-h, 54px); padding-top: 0; padding-bottom: 0; }
html.qa-generate  .sidebar-brand { box-sizing: border-box; height: var(--nav-h, 56px); padding-top: 0; padding-bottom: 0; }

/* 2) Analytics stat cards: every value uses ONE size (the numbers were 30px, the text values
      20px via inline style), so the four cards share a baseline; long names truncate cleanly. */
html.qa-analytics .stat-value { font-size: 26px !important; line-height: 30px !important; height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 700px) { html.qa-analytics .stat-value { font-size: 22px !important; line-height: 26px !important; height: 26px; } }

/* 3) Analytics header: subtitle truncates with an ellipsis instead of running under the buttons */
html.qa-analytics .topbar > :first-child { min-width: 0; flex: 1 1 auto; }
html.qa-analytics .topbar-title, html.qa-analytics .topbar-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.qa-analytics .topbar-right { flex-shrink: 0; }

/* 4) Analytics between phone and desktop (sidebar visible, content only ~550-780px wide):
      stack the paired cards, one-column countries, and keep the scans table inside its card. */
@media (min-width: 769px) and (max-width: 1000px) {
  html.qa-analytics .chart-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html.qa-analytics .card.full { grid-column: 1 !important; }
  html.qa-analytics .bar-list[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  html.qa-analytics .table-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }      /* safety net for very long values */
  html.qa-analytics .table-card table { min-width: 100%; table-layout: auto; }
  html.qa-analytics th, html.qa-analytics td { padding-left: 10px; padding-right: 10px; }
  html.qa-analytics td { font-size: 12.5px; }
  html.qa-analytics td .tag { white-space: nowrap; }
}
/* narrow tablet band (content < ~600px): use the same card list as phones — nothing cut off, no data lost */
@media (min-width: 769px) and (max-width: 880px) {
  html.qa-analytics .table-card table { display: none; }
  html.qa-analytics .scan-cards { display: flex; }
  html.qa-analytics .table-card .card-header { padding: 14px 14px 12px; }
  html.qa-analytics .table-card .divider { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.qa *, html.qa *::before, html.qa *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html.qa .qa-rv, html.qa .qa-bar { opacity: 1 !important; transform: none !important; }
}