/* =====================================================================
   LIGHT COLOURFUL THEME — pastel aurora, gradients, colourful cards
   Sits on top of app.css (which is already light). Swapped with theme-ai.css by the toggle.
   ===================================================================== */
:root{
  --lt-bg:#f5f3ff; --lt-ink:#1e1b4b;
  --v1:#7c3aed; --v2:#ec4899; --vs:rgba(124,58,237,.25);
  --lt-grad:linear-gradient(110deg,#7c3aed 0%,#ec4899 50%,#0ea5e9 100%);
}
body,.min-h-screen.bg-slate-100{background:var(--lt-bg)!important}
body{background-image:
  radial-gradient(52rem 38rem at 6% -8%,rgba(196,181,253,.75),transparent 62%),
  radial-gradient(46rem 34rem at 100% 4%,rgba(125,211,252,.6),transparent 62%),
  radial-gradient(44rem 34rem at 75% 100%,rgba(251,207,232,.75),transparent 62%),
  radial-gradient(38rem 30rem at 0% 90%,rgba(167,243,208,.55),transparent 62%)!important;
  background-attachment:fixed}
#ai-net{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#root{position:relative;z-index:1}
body::before,body::after{content:"";position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(80px);opacity:.5}
body::before{width:30rem;height:30rem;left:-6rem;top:35%;background:radial-gradient(circle,#c4b5fd,transparent 65%);animation:ltDrift1 24s ease-in-out infinite alternate}
body::after{width:28rem;height:28rem;right:-5rem;top:55%;background:radial-gradient(circle,#fbcfe8,transparent 65%);animation:ltDrift2 28s ease-in-out infinite alternate}
@keyframes ltDrift1{to{transform:translate(16vw,-12vh) scale(1.2)}}
@keyframes ltDrift2{to{transform:translate(-18vw,-16vh) scale(1.15)}}
::selection{background:rgba(236,72,153,.28);color:#1e1b4b}

/* shell = soft frosted white */
.max-w-7xl.mx-auto.bg-white.min-h-screen{background:rgba(255,255,255,.72)!important;background-image:none!important;
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 0 0 1px rgba(124,58,237,.14),0 40px 100px -30px rgba(124,58,237,.35),0 20px 60px -30px rgba(236,72,153,.25)!important}

/* header */
header.sticky,header.sticky.bg-white{background:rgba(255,255,255,.78)!important;backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);border-bottom:0!important;box-shadow:0 12px 32px -20px rgba(124,58,237,.45)!important}
header.sticky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#8b5cf6,#ec4899,#0ea5e9,transparent);opacity:.75}
header .bg-violet-600:not(a){background:var(--lt-grad)!important;box-shadow:0 8px 20px -6px rgba(236,72,153,.55)!important}
header nav button.bg-violet-50{background:linear-gradient(135deg,#ede9fe,#fce7f3)!important;color:#6d28d9!important;box-shadow:inset 0 0 0 1px rgba(124,58,237,.3)}
header nav button:not(.bg-violet-50):hover{background:linear-gradient(135deg,#f5f3ff,#fdf2f8)!important;color:#6d28d9!important}

/* gradient buttons */
.bg-violet-600,.hover\:bg-violet-700:hover,.group:hover .group-hover\:bg-violet-600,.group:hover .group-hover\:bg-violet-700{
  background:linear-gradient(110deg,#7c3aed,#ec4899,#0ea5e9,#7c3aed)!important;background-size:260% 100%!important;animation:ltShift 7s linear infinite;color:#fff!important}
a.bg-violet-600,button.bg-violet-600{box-shadow:0 12px 28px -8px rgba(236,72,153,.55)!important}
@media (hover:hover){main a.bg-violet-600:hover,main button.bg-violet-600:hover{box-shadow:0 16px 34px -8px rgba(14,165,233,.6)!important}}
@keyframes ltShift{to{background-position:260% 0}}
main a.bg-slate-100,main button.bg-slate-100{background:#fff!important;border:1px solid rgba(124,58,237,.3)!important;color:#5b21b6!important}

/* hero */
#profile-hero .rounded-3xl{background:linear-gradient(135deg,rgba(255,255,255,.92) 0%,rgba(250,245,255,.9) 40%,rgba(255,241,248,.9) 70%,rgba(236,249,255,.92) 100%)!important;
  border:1px solid rgba(124,58,237,.2)!important;box-shadow:0 40px 80px -40px rgba(124,58,237,.45),0 10px 30px -14px rgba(236,72,153,.25)!important}
#profile-hero .rounded-3xl::before{background:radial-gradient(circle,rgba(244,114,182,.5),rgba(167,139,250,.3) 55%,transparent 72%)!important;filter:blur(24px);animation:ltPulse 7s ease-in-out infinite}
#profile-hero .rounded-3xl::after{border:2px dashed rgba(14,165,233,.4)!important}
@keyframes ltPulse{50%{transform:scale(1.18);opacity:.8}}
@keyframes ltSpin{to{transform:rotate(360deg)}}
#profile-hero h1{background-image:linear-gradient(100deg,#4c1d95 0%,#7c3aed 35%,#db2777 65%,#0284c7 100%)!important;background-size:100% 100%!important;background-repeat:no-repeat!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;color:transparent!important;padding-right:.15em}
#profile-hero p.text-violet-700{background-image:linear-gradient(90deg,#7c3aed,#db2777,#0284c7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;width:fit-content}
#profile-hero .inline-flex.rounded-full{background:linear-gradient(135deg,#ede9fe,#e0f2fe)!important;border-color:rgba(14,165,233,.4)!important;color:#0369a1!important}
#profile-hero .inline-flex.rounded-full .bg-violet-600{background:#0ea5e9!important;animation:none}

/* hero photo: transparent cutout floats on a pastel aura */
#profile-hero .lg\:col-span-5>div{background:transparent!important;box-shadow:none!important;transform:none!important}
#profile-hero .lg\:col-span-5>div>div.relative{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
#profile-hero .lg\:col-span-5>div>div.relative>img{background:transparent!important;border-radius:0!important;object-fit:contain;position:relative;z-index:2;
  filter:drop-shadow(0 18px 24px rgba(76,29,149,.3));
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);mask-image:linear-gradient(to bottom,#000 74%,transparent 99%);animation:ltFloat 7s ease-in-out infinite}
@keyframes ltFloat{50%{transform:translateY(-8px)}}
#profile-hero .lg\:col-span-5::before{background:conic-gradient(from 0deg,#a78bfa,#f472b6,#7dd3fc,#6ee7b7,#fcd34d,#a78bfa)!important;opacity:.7!important;filter:blur(30px);
  inset:6% -2% 8% -2%!important;border-radius:50%!important;transform:none!important;animation:ltSpin 12s linear infinite}
#profile-hero .lg\:col-span-5::after{background-image:radial-gradient(#ec4899 2.2px,transparent 2.4px)!important;opacity:.5}
#profile-hero .lg\:col-span-5>div::before{content:"";position:absolute;z-index:1;left:50%;top:10%;width:78%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 0 40px -6px rgba(124,58,237,.35),inset 0 0 40px -10px rgba(255,255,255,.8);pointer-events:none}
#profile-hero .lg\:col-span-5>div>div.relative>div.mt-3{position:relative;z-index:3;margin-top:-3.2rem!important;background:rgba(255,255,255,.78)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(124,58,237,.3)!important;box-shadow:0 14px 30px -14px rgba(124,58,237,.5)!important}
#profile-hero .bg-slate-50{background:rgba(255,255,255,.75)!important;border-color:rgba(124,58,237,.16)!important}
#profile-hero .bg-slate-50 :is(.text-2xl,.font-bold,.font-extrabold):not(.text-xs):not(.text-sm):not(.text-slate-500){background-image:linear-gradient(100deg,#6d28d9,#db2777)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;color:transparent!important;width:fit-content}

/* section titles */
section:not(#profile-hero) h2{background-image:linear-gradient(100deg,#4c1d95,#7c3aed 40%,#db2777 75%,#0284c7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;width:fit-content}
.text-center h2{margin-inline:auto}
section:not(#profile-hero) h2::after{background:var(--lt-grad)!important;height:4px!important;-webkit-text-fill-color:initial;box-shadow:0 6px 14px -4px rgba(236,72,153,.6)!important}

/* cards: white glass, a different pastel accent per card */
main :is(.rounded-3xl,.rounded-2xl):is(.bg-white,.bg-emerald-50):not(#profile-hero *):not(:has(form)):not(.max-h-\[85vh\]):not(.w-16),
main .rounded-2xl.bg-white:not(:has(form)):not(.w-16){
  --c1:#8b5cf6;--c2:#ec4899;--t:rgba(139,92,246,.07);
  background-color:rgba(255,255,255,.88)!important;
  background-image:linear-gradient(90deg,var(--c1),var(--c2)),linear-gradient(160deg,var(--t),transparent 55%)!important;
  background-repeat:no-repeat!important;background-size:100% 4px,100% 100%!important;background-position:0 0,0 0!important;
  border-color:rgba(124,58,237,.14)!important;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 36px -20px color-mix(in srgb,var(--c1) 55%,transparent)!important}
main :is(.rounded-3xl,.rounded-2xl):is(.bg-white,.bg-emerald-50):not(#profile-hero *):not(:has(form)):not(.max-h-\[85vh\]):not(.w-16):nth-child(4n+2){--c1:#0ea5e9;--c2:#6366f1;--t:rgba(14,165,233,.08)}
main :is(.rounded-3xl,.rounded-2xl):is(.bg-white,.bg-emerald-50):not(#profile-hero *):not(:has(form)):not(.max-h-\[85vh\]):not(.w-16):nth-child(4n+3){--c1:#f43f5e;--c2:#f59e0b;--t:rgba(244,63,94,.07)}
main :is(.rounded-3xl,.rounded-2xl):is(.bg-white,.bg-emerald-50):not(#profile-hero *):not(:has(form)):not(.max-h-\[85vh\]):not(.w-16):nth-child(4n+4){--c1:#10b981;--c2:#0ea5e9;--t:rgba(16,185,129,.08)}
@media (hover:hover){
  main :is(.rounded-3xl,.rounded-2xl):is(.bg-white,.bg-emerald-50):not(#profile-hero *):not(:has(form)):not(.max-h-\[85vh\]):not(.w-16):hover,
  main .rounded-2xl.bg-white:not(:has(form)):not(.w-16):hover{
    border-color:var(--c1)!important;background-size:100% 6px,100% 100%!important;
    box-shadow:0 0 0 1px var(--c1),0 30px 56px -22px color-mix(in srgb,var(--c1) 65%,transparent)!important}
  main .rounded-3xl:hover h3{color:var(--c1)!important}
  main .rounded-3xl:hover li svg{color:var(--c2)!important}
  main :is(.rounded-2xl,.rounded-xl).bg-slate-50:not(#profile-hero *):hover{background:#fff!important;border-color:rgba(14,165,233,.5)!important;box-shadow:0 14px 26px -14px rgba(14,165,233,.5)!important}
}
main .rounded-3xl.border-violet-200{animation:none!important;border-color:rgba(124,58,237,.5)!important;box-shadow:0 0 0 1px rgba(124,58,237,.35),0 24px 60px -20px rgba(124,58,237,.5)!important}
main .rounded-3xl:has(form),main .rounded-2xl:has(form){background:rgba(255,255,255,.9)!important;border:1px solid rgba(124,58,237,.25)!important;box-shadow:0 30px 60px -28px rgba(124,58,237,.4)!important}
.bg-slate-50,.bg-slate-50\/80{background-color:rgba(245,243,255,.75)!important}

/* icon tiles: pastel gradient per card */
main .rounded-xl.w-12,main .rounded-xl.w-10,main .rounded-2xl.w-12,main .rounded-xl.w-16,main .rounded-2xl.w-16{background:linear-gradient(135deg,#ede9fe,#fbcfe8)!important;color:#6d28d9;box-shadow:0 10px 20px -8px rgba(139,92,246,.5)!important}
main .grid>*:nth-child(4n+2) :is(.w-12,.w-10,.w-16).rounded-xl,main .grid>*:nth-child(4n+2) :is(.w-12,.w-10).rounded-2xl{background:linear-gradient(135deg,#e0f2fe,#e0e7ff)!important;color:#0369a1;box-shadow:0 10px 20px -8px rgba(14,165,233,.5)!important}
main .grid>*:nth-child(4n+3) :is(.w-12,.w-10,.w-16).rounded-xl,main .grid>*:nth-child(4n+3) :is(.w-12,.w-10).rounded-2xl{background:linear-gradient(135deg,#ffe4e6,#fef3c7)!important;color:#be123c;box-shadow:0 10px 20px -8px rgba(244,63,94,.45)!important}
main .grid>*:nth-child(4n+4) :is(.w-12,.w-10,.w-16).rounded-xl,main .grid>*:nth-child(4n+4) :is(.w-12,.w-10).rounded-2xl{background:linear-gradient(135deg,#d1fae5,#cffafe)!important;color:#047857;box-shadow:0 10px 20px -8px rgba(16,185,129,.45)!important}

/* chips */
main .rounded-full.bg-violet-50,main .rounded-lg.bg-violet-50{background:linear-gradient(135deg,#f5f3ff,#fdf2f8)!important;border-color:rgba(124,58,237,.25)!important;color:#6d28d9!important}
.bg-emerald-50{background-color:#ecfdf5!important}.bg-amber-50{background-color:#fffbeb!important}

/* forms */
main :is(input,textarea,select){background:rgba(255,255,255,.9)!important;border-color:rgba(124,58,237,.25)!important}
main :is(input,textarea,select):focus{border-color:#0ea5e9!important;box-shadow:0 0 0 4px rgba(14,165,233,.15),0 12px 24px -14px rgba(14,165,233,.5)!important}

/* footer */
footer{background:linear-gradient(rgba(255,255,255,.5),rgba(237,233,254,.7) 55%,rgba(252,231,243,.6))!important;border-top:0!important;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#8b5cf6,#ec4899,#0ea5e9,transparent)}
footer .text-violet-700{background-image:linear-gradient(90deg,#7c3aed,#db2777,#0284c7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important}

#mv-progress{background:var(--lt-grad)!important}
.bkm-overlay{background:rgba(49,24,100,.45)!important}
.bkm-dialog{background:linear-gradient(135deg,#fff,#faf5ff 50%,#fdf2f8)!important}

@media (prefers-reduced-motion:reduce){body::before,body::after,.bg-violet-600,#profile-hero .rounded-3xl::before,#profile-hero .lg\:col-span-5::before,#profile-hero .lg\:col-span-5>div>div.relative>img{animation:none!important}}
@media (max-width:640px){body::before,body::after{opacity:.35}}

/* ===== timeline icon nodes (Education / Experience): always visible, gradient on hover ===== */
main div.w-16.h-16.rounded-2xl.bg-white{background:linear-gradient(135deg,#ede9fe,#fce7f3)!important;border:2px solid #8b5cf6!important;color:#6d28d9!important;
  box-shadow:0 12px 24px -10px rgba(139,92,246,.55)!important}
main .group:hover div.w-16.h-16.rounded-2xl.bg-white{background:linear-gradient(135deg,#7c3aed,#ec4899,#0ea5e9)!important;border-color:transparent!important;color:#fff!important}
main div.w-16.h-16.rounded-2xl svg{color:inherit!important;stroke:currentColor!important}
/* the vertical timeline line gets the gradient too */
main .bg-slate-200.w-0\.5{background:linear-gradient(#a78bfa,#f472b6,#38bdf8)!important;opacity:.6}