/* ---------------- Base / Reset ---------------- */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
html { scroll-behavior:smooth; }
body { line-height:1.45; }

/* Theme Variables */
:root {
	--color-bg: radial-gradient(circle at 20% 20%, #0f1b2a 0%, #09101a 55%, #060a10 100%);
	--color-text:#e6edf3;
	--color-subtle:#a8bed3;
	--color-border:rgba(108,172,255,0.15);
	--color-card-grad:linear-gradient(180deg,rgba(22,28,38,0.9),rgba(16,23,33,0.92));
	--color-input-bg:linear-gradient(145deg,#101b29,#0c141f);
	--color-input-bg-focus:linear-gradient(140deg,#132436,#101b28);
	--color-btn-bg:#162231;
	--color-btn-ghost-bg:rgba(30,45,64,0.3);
	--color-nav-bg:rgba(14,22,35,0.78);
	--color-hero-title-grad:linear-gradient(95deg,#fff,#d9eaff 35%,#9cc8ff 75%);
	color-scheme: dark;
}

body.light {
	--color-bg: radial-gradient(circle at 35% 25%, #ffffff 0%, #f2f6fb 55%, #e4edf5 100%);
	--color-text:#142230;
	--color-subtle:#4c5e70;
	--color-border:rgba(40,90,160,0.18);
	--color-card-grad:linear-gradient(180deg,rgba(255,255,255,0.82),rgba(245,250,255,0.9));
	--color-input-bg:linear-gradient(145deg,#ffffff,#e7eef6);
	--color-input-bg-focus:linear-gradient(145deg,#f4f9ff,#e6eef7);
	--color-btn-bg:#e4edf6;
	--color-btn-ghost-bg:rgba(220,235,250,0.6);
	--color-nav-bg:rgba(255,255,255,0.7);
	--color-hero-title-grad:linear-gradient(95deg,#0c2d55,#1c4c85 40%,#2e6fbf 75%);
	color-scheme: light;
}

body { background: var(--color-bg); color: var(--color-text); transition: background .6s ease, color .4s ease; display:flex; flex-direction:column; min-height:100dvh; }

/* Apply variables in existing rules adjustments */
body.preload * { transition:none !important; }
img { max-width:100%; height:auto; display:block; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; }
pre { background:#161b22; padding:1rem; border-radius:8px; overflow:auto; font-size:.85rem; color:#e6edf3; }
code { background:#161b22; padding:2px 5px; border-radius:4px; font-size:.85em; }
a { color:#3d82ff; text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------------- Layout Containers ---------------- */
.container { max-width:1220px; margin:0 auto; padding:0 1.25rem; }
.content-width { width:100%; max-width:960px; margin:0 auto; padding:0 1.25rem; }
.app-main { display:flex; flex-direction:column; min-height:calc(100dvh - 60px); }
.analysis-results { padding:2.5rem 0 4rem; }
.analysis-results__inner { display:flex; flex-direction:column; gap:1.25rem; }
.pad-top-xl { padding-top:4rem; }
.stack { display:flex; flex-direction:column; }
.gap-sm { gap:.75rem; }

/* ---------------- Navbar ---------------- */
.nav { position:sticky; top:0; z-index:60; background:var(--color-nav-bg); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid rgba(88,142,255,0.08); box-shadow:0 1px 0 0 rgba(0,0,0,0.04), 0 4px 24px -12px rgba(0,40,120,0.4); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; min-height:60px; gap:1rem; padding:0 1.25rem; }
.nav__left, .nav__right { display:flex; align-items:center; gap:1rem; }
.nav__right { gap:1.1rem; }
.nav__brand { font-size:1.15rem; }
.nav__brand { font-weight:600; font-size:1.1rem; letter-spacing:.5px; color:#fff; display:flex; align-items:center; }
.nav__brand { background:linear-gradient(95deg,#ffffff,#d9eaff 35%,#9cc8ff 75%); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.light .nav__brand { background:none; -webkit-background-clip:initial; background-clip:initial; color:#142230; }
body.light .nav__brand .brand-dot { color:#2e6fbf; }
.brand-dot { color:#3d82ff; margin-left:2px; }
.nav__links { display:flex; align-items:center; gap:1.25rem; font-size:.9rem; }
.nav__link { color:#c7d1dc; position:relative; }
.nav__link:hover { color:#fff; }
.nav__auth { display:flex; align-items:center; gap:.75rem; }
.nav__user { font-size:.8rem; color:#8b97a6; white-space:nowrap; padding-left:.25rem; }
.nav__auth { flex-wrap:wrap; }
.nav__health { font-size:.65rem; padding:.25rem .5rem; background:#161b22; border-radius:12px; color:#8b97a6; }
/* Credits pill (moved from hero to navbar) */
.nav__credits { font-size:.65rem; background:rgba(60,120,220,0.18); color:#9fc8ff; padding:.35rem .6rem; border:1px solid rgba(120,180,255,0.35); border-radius:14px; letter-spacing:.5px; backdrop-filter:blur(6px); line-height:1; display:inline-flex; align-items:center; gap:.25rem; }
body.light .nav__credits { background:rgba(70,130,240,0.15); color:#1d4e85; border-color:rgba(60,140,255,0.45); }

/* ---------------- Hero ---------------- */
.hero { padding:4.4rem 0 2.8rem; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; transition:padding .55s ease, min-height .55s ease; }
/* Fill variant uses viewport height (accounts for nav + footer spacing) */
.hero--fill { min-height:clamp(420px, calc(100dvh - 300px), 760px); }
/* Fallback for older browsers without dvh */
@supports not (height: 100dvh){
	.hero--fill { min-height:clamp(480px, calc(100vh - 240px), 860px); }
}
@media (max-width:900px){
	.hero--fill { min-height:clamp(420px, calc(100dvh - 200px), 760px); }
}
@media (max-width:600px){
	.hero--fill { min-height:clamp(380px, calc(100dvh - 180px), 680px); }
}
.hero__content { width:100%; max-width:760px; margin:0 auto; }
.hero__title { font-size: clamp(2.15rem, 4.9vw, 3.1rem); line-height:1.1; font-weight:640; margin:0 0 1.25rem; background:var(--color-hero-title-grad); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 22px rgba(42,120,255,0.22)); transition:font-size .5s ease, margin .45s ease, opacity .4s ease; }
.hero__promise { margin:.35rem auto .85rem; max-width:720px; font-size:.98rem; line-height:1.42; color:var(--color-subtle); }
/* Problem list (compact pills) */
.hero__problems-label { font-size:.58rem; letter-spacing:1.3px; font-weight:600; text-transform:uppercase; color:#74a8ff; margin:.1rem auto .45rem; max-width:840px; text-align:left; opacity:.82; }
body.light .hero__problems-label { color:#2f5c95; }
.hero__problems { list-style:none; padding:0; margin:.15rem auto 1rem; display:grid; gap:.5rem; max-width:840px; font-size:.72rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); align-items:stretch; }
.hero__problems li { background:linear-gradient(180deg,rgba(70,130,255,0.085),rgba(40,70,120,0.04)); border:1px solid rgba(120,180,255,0.22); padding:.65rem .65rem .6rem 1rem; border-radius:14px; display:flex; align-items:flex-start; line-height:1.22; letter-spacing:.18px; position:relative; font-weight:500; text-align:left; overflow:hidden; min-height:74px; box-shadow:0 2px 10px -6px rgba(30,70,140,.38), inset 0 0 0 1px rgba(255,255,255,0.02); transition:background .35s, border-color .35s, transform .25s, box-shadow .35s; }
.hero__problems li:before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,#3a84ff,#6fb3ff 70%,#8ed4ff); border-top-left-radius:inherit; border-bottom-left-radius:inherit; opacity:.9; box-shadow:0 0 0 1px rgba(80,150,255,.25), 0 0 12px -2px rgba(70,140,255,.55); }
.hero__problems li:after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%,rgba(120,180,255,0.15),transparent 60%); pointer-events:none; }
body.light .hero__problems li { background:linear-gradient(180deg,rgba(100,170,255,0.18),rgba(140,190,255,0.08)); border-color:rgba(90,150,255,0.32); }
.hero__problems li:hover { background:linear-gradient(180deg,rgba(70,130,255,0.14),rgba(40,70,120,0.07)); border-color:rgba(140,195,255,0.34); box-shadow:0 4px 18px -8px rgba(40,90,170,.55), inset 0 0 0 1px rgba(255,255,255,0.03); transform:translateY(-2px); }
.hero__problems li:focus-within { outline:2px solid #4d9bff; outline-offset:2px; }
/* (Old light theme rule replaced above) */
.hero__social-proof { font-size:.68rem; text-transform:uppercase; letter-spacing:.65px; color:#6d8aa8; margin:1rem 0 0; font-weight:600; }
body.light .hero__social-proof { color:#4b6378; }
@media (max-width:680px){
			.hero__promise { font-size:1rem; }
			.hero__problems { justify-content:flex-start; }
							.hero__problems li { font-size:.68rem; min-height:82px; padding:.55rem .5rem .5rem 2.1rem; }
}
@media (max-width:520px){
			.hero__problems { justify-content:center; }
						.hero__problems { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.5rem; }
				@media (max-width:560px){
						.hero__problems { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.45rem; }
						.hero__problems li { padding:.6rem .6rem .55rem 2.3rem; min-height:95px; }
						.hero__problems li:before { width:1.4rem; height:1.4rem; font-size:.6rem; left:.65rem; top:.6rem; }
				}
}
.accent { background:linear-gradient(120deg,#4d9bff,#67b2ff,#90c9ff); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; }
.accent:after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background:linear-gradient(90deg,#458dff,#7cbaff,#9dd2ff); border-radius:2px; opacity:.55; filter:blur(.5px); }
.hero__subtitle { font-size:1.08rem; color:var(--color-subtle); margin:0 0 1.65rem; max-width:720px; margin-left:auto; margin-right:auto; }
.hero__form { display:flex; flex-wrap:wrap; gap:.75rem; margin:0 auto 1.1rem; justify-content:center; }
.hero__form input { flex:1 1 420px; min-width:300px; padding:1rem 1.05rem; background:var(--color-input-bg); color:var(--color-text); border:1px solid rgba(77,155,255,0.25); border-radius:14px; font-size:.95rem; outline:none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 4px 18px -8px rgba(8,36,80,.6); transition:border-color .25s, box-shadow .25s, background .4s; }
.hero__form input:hover { border-color:rgba(102,178,255,0.5); }
.hero__form input:focus { border-color:#6ab0ff; box-shadow:0 0 0 3px rgba(80,150,255,0.35); background:var(--color-input-bg-focus); }
.hero__form--stack { flex-direction:column; align-items:stretch; max-width:620px; gap:1.05rem; padding-top:.35rem; }
.hero__form--stack input { flex:1 1 auto; width:100%; min-width:0; }
.hero__actions { display:flex; justify-content:center; width:100%; padding-top:.15rem; }
.btn--wide { width:100%; justify-content:center; }
@media (min-width:640px){
	.btn--wide { width:auto; min-width:260px; }
	.hero__actions { justify-content:center; }
}
.hero__meta { font-size:.72rem; color:var(--color-subtle); letter-spacing:.55px; text-transform:uppercase; font-weight:600; opacity:.9; }
.status-line { font-size:.8rem; min-height:1.2rem; color:#8aa2bd; margin-top:.4rem; }
.analysis-results { padding:2rem 0 0; }

/* Hero morph state (after submission) */
.hero--morphed { padding:1rem 0 .35rem; text-align:left; min-height:0; }
.hero--morphed .hero__content { max-width:1040px; }
.hero--morphed .hero__title { opacity:0; margin:0; height:0; overflow:hidden; }
.hero--morphed form.hero__form { flex-direction:row; gap:.6rem; margin:0 0 .4rem; }
.hero--morphed .hero__form.hero__form--stack { max-width:none; padding-top:0; }
.hero--morphed .hero__form input { flex:1 1 auto; min-width:0; padding:.72rem .85rem; border-radius:10px; font-size:.85rem; }
.hero--morphed .hero__actions { width:auto; padding-top:0; }
.hero--morphed #heroAnalyzeBtn { padding:.78rem 1.1rem; font-size:.75rem; letter-spacing:.4px; min-width:130px; }
.hero--morphed + .analysis-results { padding-top:0.8rem; }
.analysis-results.tight { padding-top:0.4rem; }

/* Accent title variant for analysis section */
.section__title--accent { position:relative; font-size:1rem; font-weight:600; letter-spacing:.6px; text-transform:uppercase; margin:0 0 .4rem; }
.section__title--accent .section__accent-text { background:linear-gradient(95deg,#4d9bff,#8bc5ff 45%,#d9ecff); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; padding-left:0.2rem; }
.section__title--accent .section__accent-text:before { content:''; position:absolute; left:-.6rem; top:50%; width:.35rem; height:.35rem; background:#4d9bff; border-radius:50%; box-shadow:0 0 0 4px rgba(77,155,255,0.2), 0 0 12px -2px rgba(90,160,255,0.8); transform:translateY(-50%); }
.section__title--accent:after { content:''; position:absolute; left:0; bottom:-4px; height:2px; width:100%; background:linear-gradient(90deg,#458dff,#7cbaff,#9dd2ff 70%,rgba(157,210,255,0)); opacity:.55; border-radius:2px; }
@media (max-width:1100px){
	.content-width { max-width:840px; }
}
@media (max-width:900px){
	.content-width { max-width:680px; }
	.hero { padding:4.8rem 0 3rem; }
}
@media (max-width:680px){
	.content-width { max-width:100%; }
	.hero { padding:4.2rem 0 2.6rem; }
	.hero__title { font-size: clamp(2rem, 9vw, 2.65rem); }
}
.section__title { font-size:1.55rem; font-weight:600; margin:0 0 .75rem; color:#fff; }
.section__head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.75rem; }
.section__hint { font-size:.75rem; color:#6f8092; margin:0; }

/* ---------------- Cards / Lists ---------------- */
.card { background:var(--color-card-grad); border:1px solid var(--color-border); border-radius:18px; padding:1.15rem 1.25rem; color:var(--color-text); box-shadow:0 8px 36px -18px rgba(6,30,70,.4), 0 2px 4px -1px rgba(0,0,0,.25); position:relative; overflow:hidden; }
.card:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 15% 10%,rgba(120,180,255,0.18),transparent 60%); mix-blend-mode:overlay; pointer-events:none; }
.items-list { display:grid; gap:.5rem; align-items:start; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.item { background:#161b22; border:1px solid #27303d; padding:.65rem .75rem; border-radius:10px; font-size:.8rem; }
.item code { background:transparent; padding:0; color:#6aa9ff; }

/* ---------------- Buttons ---------------- */
.btn { --btn-bg:var(--color-btn-bg); --btn-color:var(--color-text); --btn-border:rgba(97,155,235,0.4); cursor:pointer; appearance:none; border:1px solid var(--btn-border); background:linear-gradient(160deg,var(--btn-bg),rgba(0,0,0,0.15)); color:var(--btn-color); padding:.78rem 1.15rem; font-size:.82rem; border-radius:14px; font-weight:500; letter-spacing:.45px; display:inline-flex; align-items:center; gap:.45rem; line-height:1; position:relative; transition:background .35s, border-color .35s, transform .25s, box-shadow .35s; }
.btn:before { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,rgba(90,160,255,0.15),rgba(255,255,255,0)); opacity:0; transition:opacity .4s; }
.btn:hover:before { opacity:1; }
.btn:hover { background:linear-gradient(160deg,#1f2f43,#182536); border-color:rgba(120,182,255,0.55); box-shadow:0 4px 18px -8px rgba(48,120,220,.65); }
.btn:active { transform:translateY(1px); }
.btn:focus { outline:2px solid #4f98ff; outline-offset:3px; }
.btn--primary { --btn-bg:#2d7dff; --btn-border:#2d7dff; background:linear-gradient(120deg,#2d7dff,#4e94ff 45%,#74b5ff); color:#fff; box-shadow:0 6px 26px -10px rgba(45,125,255,.7); }
.btn--primary:hover { background:linear-gradient(120deg,#2a73eb,#428dff 45%,#6aabff); }
.btn--ghost { background:var(--color-btn-ghost-bg); color:var(--color-subtle); backdrop-filter:blur(6px); }
.btn--ghost:hover { color:var(--color-text); background:rgba(42,68,96,0.4); }
.btn--cta { --btn-bg:#3d82ff; --btn-border:#3d82ff; background:linear-gradient(94deg,#3180ff,#4d96ff 40%,#6fb3ff); color:#fff; box-shadow:0 12px 42px -16px rgba(49,128,255,.85), 0 3px 10px -2px rgba(30,70,130,.6); padding:1rem 1.55rem; font-size:.9rem; letter-spacing:.6px; }
.btn--cta:hover { filter:brightness(1.08); box-shadow:0 14px 46px -18px rgba(58,138,255,.95), 0 4px 12px -2px rgba(30,70,130,.75); }
/* Accent purchase pill */
.btn--accent-purchase { --btn-border:#53e2b2; background:linear-gradient(120deg,#1d3b49,#12343f); color:#53e2b2; border:1px solid rgba(83,226,178,0.5); padding:.55rem .95rem .5rem; font-size:.58rem; letter-spacing:.9px; text-transform:uppercase; font-weight:600; display:flex; align-items:center; gap:.45rem; border-radius:999px; position:relative; box-shadow:0 4px 18px -8px rgba(20,200,150,.55), inset 0 0 0 1px rgba(255,255,255,0.05); cursor:pointer; user-select:none; -webkit-user-select:none; }
.btn--accent-purchase:before { content:''; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 20% 35%,rgba(83,226,178,0.3),rgba(83,226,178,0) 65%); mix-blend-mode:screen; opacity:.75; pointer-events:none; }
.btn--accent-purchase .buy-icon { font-size:.7rem; line-height:1; filter:drop-shadow(0 0 4px rgba(83,226,178,.6)); }
.btn--accent-purchase .buy-label { position:relative; top:1px; line-height:1; }
.btn--accent-purchase .buy-icon, .btn--accent-purchase .buy-label { pointer-events:none; }
.btn--accent-purchase:hover { background:linear-gradient(120deg,#224451,#173d48); color:#6cf0c3; border-color:#6cf0c3; box-shadow:0 6px 22px -10px rgba(30,220,170,.65), inset 0 0 0 1px rgba(255,255,255,0.08); }
.btn--accent-purchase:active { transform:translateY(1px); }
body.light .btn--accent-purchase { background:linear-gradient(125deg,#e8fff9,#dffaf3); color:#0d6b4f; border-color:rgba(13,107,79,0.4); box-shadow:0 4px 16px -8px rgba(13,107,79,.35); }
body.light .btn--accent-purchase:before { background:radial-gradient(circle at 25% 35%,rgba(13,107,79,0.25),rgba(13,107,79,0) 60%); }
body.light .btn--accent-purchase:hover { background:linear-gradient(125deg,#f0fff9,#e4fbf3); color:#0a5c43; border-color:rgba(13,107,79,0.55); }

/* Low credits pulse */
.pulse-low { animation:pulseLow 2.4s ease-in-out infinite; position:relative; }
.pulse-low:after { content:''; position:absolute; inset:-4px; border-radius:inherit; background:radial-gradient(circle at 30% 40%,rgba(255,120,120,0.35),rgba(255,120,120,0) 70%); opacity:.55; filter:blur(6px); animation:glowFade 2.4s ease-in-out infinite; pointer-events:none; }
@keyframes pulseLow { 0%,100% { transform:translateY(0) scale(1); box-shadow:0 0 0 0 rgba(255,110,110,0.4);} 50% { transform:translateY(-1px) scale(1.03); box-shadow:0 0 0 6px rgba(255,110,110,0);} }
@keyframes glowFade { 0%,100% { opacity:.55; } 50% { opacity:.15; } }
body.light .pulse-low:after { background:radial-gradient(circle at 30% 40%,rgba(220,80,80,0.35),rgba(220,80,80,0) 70%); }

/* Inline form */
.inline-form { display:flex; flex-wrap:wrap; gap:.6rem; }
.inline-form input { flex:1 1 200px; padding:.6rem .75rem; background:#161b22; border:1px solid #27303d; border-radius:8px; color:#e6edf3; font-size:.8rem; }
.inline-form input:focus { border-color:#3d82ff; box-shadow:0 0 0 2px rgba(61,130,255,.25); }

/* Utility */
.hidden { display:none !important; }
.error { color:#ff6b6b; }
.subtle { font-size:.75rem; color:#6f8092; margin:.5rem 0 1rem; }
.code-block { margin-top:1rem; }
.accent-border { border:1px solid #3d82ff; }

/* Footer */
.footer { padding:2.75rem 0 2.4rem; text-align:center; font-size:.7rem; color:#5c6b79; position:relative; margin-top:auto; }
.footer:before { content:''; position:absolute; top:0; left:50%; width:60%; height:1px; transform:translateX(-50%); background:linear-gradient(90deg,rgba(60,120,220,0),rgba(80,150,255,.35),rgba(60,120,220,0)); }
/* Ambient background canvas (decorative gradients) */
.bg-canvas { position:fixed; inset:0; overflow:hidden; z-index:-1; background:radial-gradient(circle at 70% 20%, rgba(80,150,255,0.08), transparent 65%), radial-gradient(circle at 30% 75%, rgba(70,120,220,0.09), transparent 70%); }
.bg-canvas:before, .bg-canvas:after { content:''; position:absolute; width:520px; height:520px; background:radial-gradient(circle at 30% 30%, rgba(82,152,255,0.45), rgba(82,152,255,0) 70%); filter:blur(80px); opacity:.23; animation:float1 22s linear infinite; }
.bg-canvas:after { top:auto; bottom:-160px; right:-140px; left:auto; animation:float2 28s linear infinite; }
@keyframes float1 { 0% { transform:translate(-120px,-160px) rotate(0deg);} 50% { transform:translate(-60px,-80px) rotate(180deg);} 100% { transform:translate(-120px,-160px) rotate(360deg);} }
@keyframes float2 { 0% { transform:translate(0,0) rotate(0deg);} 50% { transform:translate(-80px,40px) rotate(180deg);} 100% { transform:translate(0,0) rotate(360deg);} }
.footline a { color:#9fb0c2; }
.footline a:hover { color:#fff; }

/* Scrollbar subtle styling (webkit) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0d0f13; }
::-webkit-scrollbar-thumb { background:#1c2530; border-radius:20px; border:2px solid #0d0f13; }
::-webkit-scrollbar-thumb:hover { background:#253140; }

@media (max-width:760px){
		.nav__links { display:none; }
		.hero { padding:4.2rem 0 3rem; }
		.hero__title { font-size: clamp(2.2rem, 8vw, 3.05rem); }
}

/* ---------------- Analysis Card (Transcript & Summary) ---------------- */
.analysis-card { border:1px solid var(--color-border); background:linear-gradient(145deg,rgba(28,34,44,0.92),rgba(18,22,28,0.92)); box-shadow:0 2px 4px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03) inset; padding:1rem 1.25rem .85rem; display:flex; flex-direction:column; gap:.85rem; position:relative; border-radius:14px; }
.analysis-card__head { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:.75rem; }
.analysis-card__actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.analysis-card__body { display:grid; gap:1.2rem; }
.analysis-card__foot { font-size:.6rem; opacity:.55; letter-spacing:.08em; text-transform:uppercase; }
.analysis-card__badge { background:#2d6df6; color:#fff; padding:.25rem .55rem; border-radius:999px; font-size:.6rem; font-weight:600; letter-spacing:.05em; box-shadow:0 0 0 1px rgba(255,255,255,0.08), 0 4px 12px -4px rgba(45,109,246,.6); }

.analysis-summary-block { font-size:.85rem; line-height:1.45; white-space:pre-wrap; background:rgba(255,255,255,0.02); border:1px solid rgba(120,180,255,0.12); padding:.75rem .85rem; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02); }
.analysis-transcript { max-height:280px; overflow:auto; background:#10161e; padding:.7rem .8rem; border-radius:8px; line-height:1.34; font-size:.72rem; border:1px solid rgba(120,180,255,0.08); }
.analysis-json { max-height:320px; overflow:auto; background:#0d1218; padding:.7rem .8rem; border-radius:8px; font-size:.68rem; line-height:1.32; border:1px solid rgba(120,180,255,0.08); }
.analysis-subhead { margin:0 0 .35rem; font-size:.65rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; opacity:.7; }
.analysis-json-block.collapsed { display:none; }

/* Micro buttons for card actions */
.btn--xs { font-size:.6rem; padding:.38rem .55rem; line-height:1; border-radius:6px; }
.btn--ghost.btn--xs { background:rgba(255,255,255,0.05); border-color:rgba(120,180,255,0.25); }
.btn--ghost.btn--xs:hover { background:rgba(255,255,255,0.1); }

@media (min-width:860px){
	.analysis-card { padding:1.1rem 1.35rem .95rem; }
	.analysis-transcript { font-size:.7rem; }
	.analysis-json { font-size:.63rem; }
}

/* Light mode overrides for analysis card + blocks */
body.light .analysis-card { background:linear-gradient(145deg,rgba(255,255,255,0.9),rgba(240,246,252,0.92)); border-color:rgba(40,90,160,0.18); box-shadow:0 2px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(255,255,255,0.4) inset; }
body.light .analysis-summary-block { background:linear-gradient(145deg,#f4f9ff,#edf4fa); border:1px solid rgba(40,90,160,0.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.4); color:#142230; }
body.light .analysis-transcript { background:#f5f9fd; border-color:rgba(40,90,160,0.2); color:#173048; }
body.light .analysis-json { background:#f3f7fb; border-color:rgba(40,90,160,0.18); color:#133047; }
body.light .analysis-subhead { opacity:.85; color:#365679; }
body.light .analysis-card__badge { background:#2d6df6; color:#fff; }
body.light .analysis-card__foot { opacity:.65; }

/* Micro ghost buttons visibility in light mode */
body.light .btn--ghost.btn--xs { background:rgba(0,0,0,0.04); color:#365679; border-color:rgba(40,90,160,0.35); }
body.light .btn--ghost.btn--xs:hover { background:rgba(0,0,0,0.07); color:#142230; }

/* Profile collapsible analysis panel snippet blocks in light mode */
body.light .analysis-snippet { background:#f5f9fd; border-color:rgba(40,90,160,0.25); color:#173048; }
body.light .analysis-raw { background:#f3f7fb; border-color:rgba(40,90,160,0.25); color:#133047; }
/* Light mode scrollbar enhancements for scrollable analysis blocks */
body.light .analysis-snippet,
body.light .analysis-raw { scrollbar-color:#b8cddd #e6eff7; scrollbar-width:thin; }
body.light .analysis-snippet::-webkit-scrollbar,
body.light .analysis-raw::-webkit-scrollbar { width:8px; }
body.light .analysis-snippet::-webkit-scrollbar-track,
body.light .analysis-raw::-webkit-scrollbar-track { background:#e6eff7; border-radius:8px; }
body.light .analysis-snippet::-webkit-scrollbar-thumb,
body.light .analysis-raw::-webkit-scrollbar-thumb { background:#b8cddd; border-radius:8px; border:2px solid #e6eff7; }
body.light .analysis-snippet::-webkit-scrollbar-thumb:hover,
body.light .analysis-raw::-webkit-scrollbar-thumb:hover { background:#a4bdd2; }
body.light .analysis-item { background:linear-gradient(145deg,rgba(255,255,255,0.85),rgba(240,246,252,0.9)); border-color:rgba(40,90,160,0.22); }
body.light .analysis-item[open] { background:linear-gradient(145deg,rgba(255,255,255,0.95),rgba(240,246,252,0.95)); border-color:rgba(40,90,160,0.35); }
body.light .analysis-item__summary:hover { background:rgba(0,0,0,0.04); }
body.light .analysis-item__summary-line { color:#173048; }
body.light .analysis-item__url { opacity:.55; }

/* Embedded related activity light variants */
body.light .analysis-related { background:linear-gradient(145deg,#ffffff,#edf4fa); border-color:rgba(40,90,160,0.22); }
body.light .analysis-related__head { background:rgba(0,0,0,0.04); color:#2c4f72; }
body.light .analysis-related__row { border-top:1px solid rgba(40,90,160,0.16); }
body.light .analysis-related__time { opacity:.7; }
body.light .analysis-related__type { opacity:.85; }

/* ---------------- Purchase Modal ---------------- */
.modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:1.5rem; backdrop-filter:none; }
.modal.hidden { display:none; }
.modal__backdrop { position:absolute; inset:0; background:rgba(10,16,24,0.72); backdrop-filter:blur(10px); }
.modal__dialog { position:relative; width:100%; max-width:420px; background:linear-gradient(145deg,rgba(28,34,44,0.95),rgba(18,22,28,0.95)); border:1px solid var(--color-border); border-radius:18px; padding:1rem 1.1rem 1.1rem; box-shadow:0 18px 60px -22px rgba(0,0,0,0.65), 0 4px 18px -8px rgba(10,40,90,0.6); display:flex; flex-direction:column; gap:.85rem; }
.modal__head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.modal__title { margin:0; font-size:1rem; font-weight:600; letter-spacing:.5px; }
.modal__close { background:transparent; border:none; color:var(--color-text); font-size:.9rem; cursor:pointer; padding:.35rem; border-radius:6px; }
.modal__close:hover { background:rgba(255,255,255,0.08); }
.modal__body { font-size:.75rem; display:flex; flex-direction:column; gap:.75rem; }
.modal__intro { margin:.2rem 0 .4rem; color:var(--color-subtle); font-size:.7rem; }
.purchase-options { display:flex; flex-direction:column; gap:.6rem; }
.purchase-option { border:1px solid var(--color-border); background:linear-gradient(145deg,rgba(36,44,56,0.9),rgba(22,28,36,0.92)); border-radius:12px; padding:.65rem .7rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.purchase-option__main { display:flex; flex-direction:column; gap:.15rem; }
.purchase-option__qty { font-size:.8rem; font-weight:600; }
.purchase-option__price { font-size:.7rem; opacity:.8; }
.purchase-status { min-height:1rem; font-size:.65rem; color:#6fb3ff; }
.modal__foot { display:flex; justify-content:flex-end; }
body.light .modal__dialog { background:linear-gradient(145deg,#ffffff,#f1f6fb); }
body.light .purchase-option { background:linear-gradient(145deg,#f6fbff,#e9f1f9); border-color:rgba(40,90,160,0.25); }
body.light .purchase-option__price { opacity:.7; }

/* Profile analyses collapsible list */
.analyses-list { display:flex; flex-direction:column; gap:.55rem; }
.analysis-item { border:1px solid var(--color-border); border-radius:12px; background:linear-gradient(145deg,rgba(28,34,44,0.85),rgba(18,22,28,0.9)); position:relative; overflow:hidden; transition:border-color .3s, background .4s; }
.analysis-item[open] { background:linear-gradient(145deg,rgba(40,54,72,0.9),rgba(24,30,40,0.95)); border-color:rgba(120,180,255,0.35); }
.analysis-item__summary { list-style:none; margin:0; padding:.65rem .9rem; display:flex; align-items:center; gap:.65rem; cursor:pointer; font-size:.72rem; line-height:1.25; }
.analysis-item__summary:hover { background:rgba(255,255,255,0.04); }
.analysis-item__title { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.25rem; }
.analysis-item__meta { display:flex; gap:.5rem; align-items:center; font-size:.6rem; letter-spacing:.5px; text-transform:uppercase; opacity:.8; }
.analysis-item__badge { background:#2d6df6; color:#fff; padding:.18rem .45rem; border-radius:999px; font-size:.55rem; font-weight:600; letter-spacing:.05em; box-shadow:0 0 0 1px rgba(255,255,255,0.08); }
.analysis-item__summary-line { font-weight:500; font-size:.7rem; color:#d0e3f7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.analysis-item__url { font-size:.55rem; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.analysis-item__chevron { transition:transform .4s ease; font-size:.65rem; width:1rem; text-align:center; opacity:.7; }
.analysis-item[open] .analysis-item__chevron { transform:rotate(90deg); }
.analysis-item__panel { padding:.6rem .85rem .8rem; display:grid; gap:.55rem; animation:fadeSlide .45s ease; }
.analysis-detail-grid { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.analysis-snippet { font-size:.65rem; line-height:1.3; background:#10161e; border:1px solid rgba(120,180,255,0.12); border-radius:8px; padding:.55rem .6rem; max-height:180px; overflow:auto; }
.analysis-raw { font-size:.6rem; line-height:1.25; background:#0d1218; border:1px solid rgba(120,180,255,0.12); border-radius:8px; padding:.55rem .6rem; max-height:220px; overflow:auto; }
.analysis-actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.analysis-actions .btn--xs { font-size:.55rem; padding:.32rem .5rem; }
.analysis-item__time { font-size:.55rem; opacity:.7; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.section__tools { display:flex; gap:.4rem; align-items:center; }

/* Profile header compact redesign */
.profile-header--compact { padding:1.4rem 0 1rem; display:flex; flex-direction:column; gap:.75rem; }
.profile-header__topline { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; }
.profile-metrics { display:flex; gap:.85rem; align-items:stretch; flex-wrap:wrap; }
.profile-metrics .metric-actions { display:flex; gap:.45rem; align-items:flex-start; }
.profile-metrics .metric-actions .btn { margin:0; }
.metric { background:linear-gradient(145deg,rgba(28,34,44,0.85),rgba(18,22,28,0.9)); border:1px solid var(--color-border); padding:.55rem .75rem .5rem; border-radius:10px; min-width:92px; display:flex; flex-direction:column; gap:.2rem; position:relative; overflow:hidden; font-size:.55rem; letter-spacing:.5px; text-transform:uppercase; }
.metric:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%,rgba(120,180,255,0.22),transparent 60%); opacity:.4; pointer-events:none; }
.metric__label { opacity:.65; font-weight:600; }
.metric__value { font-size:1.05rem; font-weight:600; line-height:1; background:linear-gradient(95deg,#6fb3ff,#d9eaff); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Light mode overrides for profile metrics (improve contrast) */
body.light .metric { background:linear-gradient(145deg,#ffffff,#edf4fa); border-color:rgba(40,90,160,0.22); box-shadow:0 2px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.65) inset; }
body.light .metric:before { background:radial-gradient(circle at 25% 20%,rgba(40,90,160,0.18),transparent 60%); opacity:.35; }
body.light .metric__label { opacity:.78; color:#365679; }
/* Use a darker-to-accent gradient for value for strong readability; fallback solid color for older browsers */
body.light .metric__value { background:linear-gradient(95deg,#1d4e85,#2e6fbf 55%,#6fb3ff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 0 #1d4e85; }
@supports (-webkit-background-clip:text) {
	body.light .metric__value { text-shadow:none; }
}
.profile-tagline.small { font-size:.7rem; opacity:.7; margin:0; }
.profile-searchbar { display:flex; }
.profile-searchbar__input { flex:1; background:var(--color-input-bg); border:1px solid rgba(120,180,255,0.25); padding:.65rem .75rem; border-radius:10px; font-size:.7rem; outline:none; color:var(--color-text); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03); }
.profile-searchbar__input:focus { border-color:#6ab0ff; box-shadow:0 0 0 3px rgba(80,150,255,0.32); }

.unified-activity { margin-top:1rem; }
.unified-activity .card__inner { padding-top:1rem; }

@media (max-width:720px){
	.profile-metrics { gap:.6rem; }
	.metric { min-width:78px; padding:.5rem .6rem .45rem; }
	.metric__value { font-size:.95rem; }
	.profile-header--compact { padding:1rem 0 .85rem; }
}

@media (max-width:680px){
	.analysis-detail-grid { grid-template-columns:1fr; }
}

/* ---------------- Embedded Related Activity (per analysis panel) ---------------- */
.analysis-related { margin-top:.4rem; border:1px solid rgba(120,180,255,0.18); background:linear-gradient(145deg,rgba(18,24,32,0.85),rgba(14,20,28,0.9)); border-radius:10px; font-size:.55rem; letter-spacing:.25px; overflow:hidden; box-shadow:0 2px 8px -4px rgba(10,30,60,.55), inset 0 0 0 1px rgba(255,255,255,0.02); }
.analysis-related__head { font-weight:600; text-transform:uppercase; letter-spacing:.55px; opacity:.75; padding:.42rem .6rem .38rem; background:rgba(255,255,255,0.04); position:relative; }
.analysis-related__head:before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#4d9bff,#8bc5ff 75%,#d9ecff); }
.analysis-related__row { display:grid; grid-template-columns: 120px 1fr 60px; gap:.6rem; align-items:center; padding:.38rem .6rem .34rem; border-top:1px solid rgba(120,180,255,0.12); line-height:1.15; }
@media (max-width:560px){
	.analysis-related__row { grid-template-columns: 100px 1fr 54px; }
}
.analysis-related__row:nth-child(2) { border-top:none; }
.analysis-related__time { font-variant-numeric:tabular-nums; opacity:.75; }
.analysis-related__type { font-weight:500; opacity:.85; }
.analysis-related__delta { font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.delta-pos { color:#53e2b2; }
.delta-neg { color:#ff6b6b; }
.delta-zero { color:#9fb0c2; opacity:.8; }
body.light .delta-pos { color:#138a62; }
body.light .delta-neg { color:#d84040; }
body.light .delta-zero { color:#5a6a78; }

/* Ledger / activity badges (shared) */
.badge { display:inline-block; padding:.18rem .5rem .2rem; font-size:.55rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; border-radius:999px; background:rgba(90,150,255,0.18); color:#9fc8ff; border:1px solid rgba(120,180,255,0.35); line-height:1; }
.badge--charge { background:rgba(255,109,109,0.15); color:#ff8a8a; border-color:rgba(255,109,109,0.4); }
.badge--grant { background:rgba(83,226,178,0.18); color:#53e2b2; border-color:rgba(83,226,178,0.45); }
body.light .badge { background:rgba(70,130,240,0.15); color:#1d4e85; border-color:rgba(60,140,255,0.45); }
body.light .badge--charge { background:rgba(255,109,109,0.18); color:#b52d2d; border-color:rgba(255,109,109,0.4); }
body.light .badge--grant { background:rgba(83,226,178,0.2); color:#0d6b4f; border-color:rgba(83,226,178,0.45); }

/* Progress bars (hero + profile items) */
.analysis-progress { position:relative; height:6px; background:rgba(255,255,255,0.06); border:1px solid rgba(120,180,255,0.25); border-radius:5px; overflow:hidden; margin-top:.4rem; }
.analysis-progress__bar { position:absolute; inset:0; width:0%; background:linear-gradient(90deg,#3180ff,#6fb3ff); transition:width .9s ease; }
.analysis-progress__text { font-size:.55rem; letter-spacing:.5px; margin-top:.25rem; opacity:.7; text-transform:uppercase; }
body.light .analysis-progress { background:rgba(0,0,0,0.05); border-color:rgba(40,90,160,0.25); }
body.light .analysis-progress__bar { background:linear-gradient(90deg,#2d6df6,#6fb3ff); }

/* ---------------- Video Insight Card ---------------- */
.insight-root { display:flex; flex-direction:column; gap:1.4rem; text-align:left; }
.insight-header { display:flex; flex-direction:column; gap:.35rem; }
.insight-title { font-size:1.35rem; margin:0; line-height:1.15; background:linear-gradient(90deg,#5da8ff,#e0f0ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
body.light .insight-title { background:none; color:#163250; }
.insight-subtitle { font-size:.85rem; opacity:.75; }
.insight-badges { display:flex; flex-wrap:wrap; gap:.4rem; }
.insight-badge { font-size:.55rem; letter-spacing:.4px; padding:.25rem .45rem; background:rgba(70,130,255,0.12); border:1px solid rgba(120,170,255,0.3); border-radius:10px; backdrop-filter:blur(4px); }
body.light .insight-badge { background:rgba(90,150,255,0.15); }
.insight-badge__label { text-transform:uppercase; font-weight:600; margin-right:.25rem; opacity:.85; }
.insight-section__title { font-size:.75rem; letter-spacing:1px; text-transform:uppercase; margin:0 0 .4rem; opacity:.8; }
.insight-section { background:linear-gradient(180deg,rgba(70,130,255,0.07),rgba(40,70,120,0.04)); border:1px solid rgba(120,180,255,0.18); padding:.9rem .95rem .85rem; border-radius:14px; box-shadow:0 2px 8px -4px rgba(30,70,140,.4), inset 0 0 0 1px rgba(255,255,255,0.015); }
body.light .insight-section { background:linear-gradient(180deg,rgba(120,170,255,0.18),rgba(160,200,255,0.08)); border-color:rgba(120,170,255,0.32); }
.insight-section__head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin:0 0 .4rem; }
.insight-copy-btn, .insight-more-btn { font:inherit; cursor:pointer; border:1px solid rgba(120,170,255,0.4); background:rgba(255,255,255,0.05); color:#e8f4ff; padding:.25rem .55rem; border-radius:8px; font-size:.6rem; letter-spacing:.5px; text-transform:uppercase; transition:background .15s,border-color .15s; }
.insight-copy-btn:hover, .insight-more-btn:hover { background:rgba(90,150,255,0.15); }
body.light .insight-copy-btn, body.light .insight-more-btn { background:rgba(255,255,255,0.6); color:#1c3150; }
body.light .insight-copy-btn:hover, body.light .insight-more-btn:hover { background:#fff; }
.insight-more-btn { margin-top:.55rem; }
.insight-error { background:rgba(210,70,70,0.12); border:1px solid rgba(230,110,110,0.4); color:#ffb7b7; padding:.65rem .8rem; border-radius:12px; font-size:.7rem; }
body.light .insight-error { color:#7a1e1e; }
.insight-list, .insight-steps, .insight-questions { margin:.35rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.35rem; font-size:.78rem; line-height:1.25; }
.insight-steps { counter-reset: step; }
.insight-steps > li { position:relative; }
.insight-timeline-bar { display:flex; height:10px; background:rgba(255,255,255,0.08); border:1px solid rgba(120,180,255,0.25); border-radius:6px; overflow:hidden; margin:.25rem 0 .6rem; }
.insight-timeline-seg { background:linear-gradient(90deg,#3c86ff,#61b4ff); cursor:pointer; position:relative; }
.insight-timeline-seg:not(:last-child){ box-shadow:1px 0 0 rgba(0,0,0,0.25); }
.insight-timeline-row { padding:.4rem .5rem .55rem; border:1px solid rgba(120,180,255,0.18); border-radius:10px; margin-bottom:.5rem; background:rgba(255,255,255,0.02); }
.insight-timeline-row__head { display:flex; gap:.6rem; align-items:baseline; }
.insight-timeline-row__time { font-size:.6rem; opacity:.7; letter-spacing:.5px; text-transform:uppercase; }
.insight-timeline-row__title { font-size:.8rem; font-weight:600; }
.insight-timeline-row__summary { font-size:.72rem; margin:.35rem 0 .25rem; line-height:1.25; opacity:.85; }
.insight-keypoints { margin:.2rem 0 0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.25rem; font-size:.68rem; }
.insight-claim { border:1px solid rgba(120,180,255,0.25); border-radius:12px; background:rgba(255,255,255,0.03); box-shadow:0 1px 4px -2px rgba(20,60,120,.4); }
.insight-claim > summary { cursor:pointer; list-style:none; padding:.55rem .75rem; font-size:.72rem; font-weight:600; }
.insight-claim[open] > summary { border-bottom:1px solid rgba(120,180,255,0.25); }
.insight-claim__body { padding:.55rem .75rem .7rem; display:flex; flex-direction:column; gap:.5rem; }
.insight-claim__evidence, .insight-claim__assumptions, .insight-claim__counter { margin:0; padding-left:1.05rem; display:flex; flex-direction:column; gap:.25rem; font-size:.65rem; }
.insight-claim--strong { border-color:rgba(60,200,140,0.55); }
.insight-claim--moderate { border-color:rgba(240,180,70,0.55); }
.insight-claim--weak, .insight-claim--neutral { border-color:rgba(180,180,180,0.4); }
.insight-glossary { margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.5rem .9rem; font-size:.66rem; }
.insight-glossary dt { font-weight:600; }
.insight-glossary dd { margin:0 0 .4rem; opacity:.85; }
.insight-mis-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:.75rem; }
.insight-mis { background:rgba(255,255,255,0.03); border:1px solid rgba(120,180,255,0.2); border-radius:12px; padding:.6rem .7rem; font-size:.7rem; display:flex; flex-direction:column; gap:.35rem; }
.insight-mis__statement { font-weight:600; }
.insight-mis__correction { opacity:.85; }
.insight-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.insight-chip { font-size:.55rem; padding:.3rem .5rem; background:rgba(90,140,255,0.16); border:1px solid rgba(120,170,255,0.38); border-radius:10px; letter-spacing:.5px; text-transform:uppercase; }
@media (max-width:680px){
	.insight-timeline-row { padding:.55rem .6rem .65rem; }
	.insight-title { font-size:1.15rem; }
}

/* --- Auth Callback Page (moved from inline styles for CSP) --- */
.auth-callback-body { display:flex; align-items:center; justify-content:center; min-height:100dvh; }
.auth-callback-box { text-align:center; max-width:420px; padding:2rem 2.25rem; background:var(--color-card-grad); border:1px solid var(--color-border); border-radius:20px; box-shadow:0 18px 60px -25px rgba(20,90,180,.45), 0 4px 14px -4px rgba(0,0,0,.4); }
.auth-callback-spinner { width:42px; height:42px; margin:0 auto 1.25rem; border:4px solid rgba(120,170,255,.25); border-top-color:#4d9bff; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg);} }
.auth-callback-title { font-size:1.35rem; margin:0 0 .75rem; }
.auth-callback-desc { margin:0 0 1rem; font-size:.9rem; opacity:.75; }
.auth-callback-status { font-size:.7rem; letter-spacing:.5px; text-transform:uppercase; opacity:.55; }
.auth-callback-fail { color:#ff6b6b; font-size:.85rem; margin-top:1rem; }

/* Hero progress (moved from inline styles) */
.hero-progress-wrap { margin-top:.4rem; }
.hero-progress-track { position:relative; height:8px; background:rgba(255,255,255,0.07); border:1px solid rgba(120,180,255,0.25); border-radius:6px; overflow:hidden; }
.hero-progress-bar { height:100%; width:0%; background:linear-gradient(90deg,#3180ff,#6fb3ff); transition:width .8s ease; }
.hero-progress-text { font-size:.55rem; letter-spacing:.5px; margin-top:.25rem; opacity:.75; text-transform:uppercase; }
.hero-progress-note { font-size:.55rem; opacity:.55; margin-top:.35rem; max-width:560px; margin-left:auto; margin-right:auto; }
.hero-progress-note.hidden { display:none !important; }