/* Gem Workshop cosmetics: themed backgrounds, avatar borders and profile banners. */
html[data-ui-theme] body{background:linear-gradient(170deg,var(--sky-a),var(--sky-b)) fixed}
/* Theme-specific stationery and atmosphere sit behind the app shell; they never reduce card contrast. */
html[data-ui-theme]::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.32;background-repeat:no-repeat}
html[data-ui-theme="ui-sakura"]::before{background-image:radial-gradient(ellipse at 100% 0%,#f6a6c5 0 2px,transparent 2.5px),radial-gradient(ellipse at 100% 0%,#fff7fa 0 2px,transparent 2.5px),radial-gradient(ellipse at 100% 0%,#ed8cb1 0 2px,transparent 2.5px),radial-gradient(ellipse at 100% 0%,#fff7fa 0 2px,transparent 2.5px),radial-gradient(circle at 100% 0%,#ffdbe8 0 2px,transparent 2.5px);background-size:32px 32px,32px 32px,32px 32px,32px 32px,32px 32px;background-position:calc(100% - 24px) 28px,calc(100% - 17px) 18px,calc(100% - 10px) 28px,calc(100% - 17px) 38px,calc(100% - 17px) 28px}
html[data-ui-theme="ui-ocean"]::before{opacity:.22;background-image:repeating-radial-gradient(ellipse at 100% 100%,transparent 0 24px,rgba(44,134,173,.38) 25px 26px,transparent 27px 46px)}
html[data-ui-theme="ui-moonlight"]::before{opacity:.28;background-image:radial-gradient(circle at 86% 14%,#fff 0 2px,transparent 3px),radial-gradient(circle at 86% 14%,transparent 0 34px,#fff4d7 35px 36px,transparent 37px),radial-gradient(circle at 86% 14%,#fff2cf 0 24px,transparent 25px)}
html[data-ui-theme="ui-aurora"]::before{opacity:.2;background-image:linear-gradient(160deg,transparent 15%,#55e8c4 38%,transparent 62%),linear-gradient(200deg,transparent 28%,#8f80ff 48%,transparent 70%);background-size:100% 58%,100% 70%;background-position:top center}
html[data-ui-theme="ui-galaxy"]::before{opacity:.22;background-image:radial-gradient(ellipse at 70% 28%,#ff8ad8 0,transparent 33%),radial-gradient(ellipse at 38% 62%,#9671ff 0,transparent 42%),radial-gradient(circle at 75% 24%,#fff 0 1px,transparent 2px),radial-gradient(circle at 32% 72%,#fff 0 1px,transparent 2px)}
html[data-ui-theme="ui-synthwave"]::before{opacity:.24;top:52%;background-image:linear-gradient(transparent 0 48%,#ff56c9 49%,transparent 50%),repeating-linear-gradient(0deg,transparent 0 17px,#e855cf 18px 19px),repeating-linear-gradient(90deg,transparent 0 35px,#9d61ff 36px 37px),radial-gradient(ellipse at 50% 0%,#ff56c9,transparent 68%);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
html[data-ui-theme="ui-deepsea"]::before{opacity:.2;background-image:repeating-radial-gradient(ellipse at 50% 110%,transparent 0 18px,#53e6d7 19px 20px,transparent 21px 38px),radial-gradient(ellipse at 18% 78%,#26d9dc,transparent 34%),radial-gradient(ellipse at 80% 30%,#458bff,transparent 38%)}
html[data-ui-theme="ui-carnival"]::before{opacity:.18;background-image:radial-gradient(circle at 15% 18%,#ffe27a 0 2px,transparent 3px),radial-gradient(circle at 78% 23%,#ff6f9f 0 3px,transparent 4px),radial-gradient(circle at 40% 70%,#5ad1ff 0 2px,transparent 3px),radial-gradient(circle at 92% 84%,#b18cff 0 3px,transparent 4px);background-size:130px 130px}
html[data-ui-theme="ui-paper"]::before{opacity:.2;background-image:repeating-linear-gradient(transparent 0 27px,#c8b77d 28px 29px);background-position:0 38px}
html[data-ui-theme="ui-slate"]::before{opacity:.12;background-image:linear-gradient(135deg,transparent 49.8%,var(--accent) 50%,transparent 50.2%),linear-gradient(45deg,transparent 49.8%,var(--accent-2) 50%,transparent 50.2%);background-size:54px 54px}
html[data-ui-theme] .app-shell{position:relative;z-index:1}
html[data-ui-theme] main{background:transparent}
#themeFx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* Every surface stays opaque under a theme so text never sits on the moving background. */
html[data-ui-theme] .topbar{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 8px 20px -16px var(--sd)}
html[data-ui-theme="ui-galaxy"] .brand-mark,html[data-ui-theme="ui-galaxy"] .button:not(.secondary){background:linear-gradient(135deg,var(--accent),var(--accent-2))}
html[data-ui-theme="ui-aurora"] .button:not(.secondary){background:linear-gradient(135deg,var(--accent),var(--accent-2))}
html[data-ui-theme="ui-galaxy"] .topbar,html[data-ui-theme="ui-aurora"] .topbar,html[data-ui-theme="ui-deepsea"] .topbar{border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,var(--edge));box-shadow:0 8px 24px -18px var(--accent)}
html[data-ui-theme="ui-sakura"] .topbar{border-bottom:2px solid color-mix(in srgb,#f28ab0 38%,var(--edge))}
html[data-ui-theme="ui-synthwave"] .topbar{border-bottom:1px solid color-mix(in srgb,#ff56c9 55%,var(--edge));box-shadow:0 4px 22px -14px #ff56c9}

/* Avatar borders: a frame around any avatar. */
.frame{position:relative;display:inline-grid;place-items:center;border-radius:50%;padding:3px;flex-shrink:0;isolation:isolate}
.frame>*{position:relative;z-index:1}
.frame::before,.frame::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.frame.border-mint{background:linear-gradient(135deg,#9df0d6,#2fbf9b);box-shadow:0 0 0 2px var(--bg),0 0 0 4px #9df0d6}
.frame.border-sakura{background:conic-gradient(from 0deg,#ffc6da,#ffffff,#f39bbb,#ffffff,#ffc6da)}
.frame.border-sakura::after{inset:-6px;background:radial-gradient(circle at 15% 20%,#ffd6e6 0 4px,transparent 5px),radial-gradient(circle at 85% 30%,#ffffff 0 3px,transparent 4px),radial-gradient(circle at 70% 90%,#f7a8c4 0 4px,transparent 5px)}
.frame.border-gold{background:linear-gradient(135deg,#fff2b0,#d9a21b 45%,#fff2b0 60%,#a8770c);box-shadow:0 0 12px rgba(241,180,69,.45)}
.frame.border-neon{background:linear-gradient(135deg,#5ef2ff,#c46bff);animation:neonPulse 2.4s ease-in-out infinite}
.frame.border-aurora{background:conic-gradient(from var(--spin,0deg),#5ef2c2,#5ad1ff,#b18cff,#ff8ad8,#5ef2c2);animation:spinRing 6s linear infinite}
.frame.border-cosmic{background:conic-gradient(from var(--spin,0deg),#24124a,#7a5cff,#ff7ad9,#24124a);animation:spinRing 9s linear infinite}
.frame.border-cosmic::after{width:8px;height:8px;top:50%;left:50%;margin:-4px;background:#fff6c9;box-shadow:0 0 8px 2px #ffe27a;animation:orbit 3.2s linear infinite;z-index:2}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spinRing{to{--spin:360deg}}
@keyframes neonPulse{0%,100%{box-shadow:0 0 6px rgba(94,242,255,.6)}50%{box-shadow:0 0 16px rgba(196,107,255,.9)}}
@keyframes orbit{from{transform:rotate(0deg) translateX(var(--orbit,30px)) rotate(0deg)}to{transform:rotate(360deg) translateX(var(--orbit,30px)) rotate(-360deg)}}
.frame:has(.xl){--orbit:54px;padding:4px}
.frame:has(.face){--orbit:21px;padding:2px}
.frame:has(.league-avatar){--orbit:25px}

/* Profile banners on the profile card. */
.profile-hero.banner{position:relative;overflow:hidden}
.profile-hero.banner::before{content:"";position:absolute;inset:0 0 auto 0;height:72px;z-index:0;pointer-events:none;filter:var(--banner-filter,none)}
.profile-hero.banner>*{position:relative;z-index:1}
.banner-pt-sunset::before{background:linear-gradient(120deg,#ff9a5c,#ff6f91 55%,#ffc46b)}
.banner-pt-ocean::before{background:linear-gradient(120deg,#1d4e89,#2ec4d6 60%,#7af0e0)}
.banner-pt-forest::before{background:linear-gradient(120deg,#1e5631,#4caf50 55%,#c5e86c)}
.banner-pt-nebula::before{background:radial-gradient(circle at 20% 40%,#ff7ad9 0,transparent 40%),radial-gradient(circle at 70% 30%,#7a5cff 0,transparent 45%),linear-gradient(120deg,#160f3d,#3a1f7a)}

@media(prefers-reduced-motion:reduce){.frame,.frame::after{animation:none!important}}
@media(prefers-reduced-motion:reduce){html[data-ui-theme]::before{animation:none!important}}

/* ---------- Animated accessories (inside every axolotl: avatars, Lotl, previews) ---------- */
.acc-sparkles .spk{transform-box:fill-box;transform-origin:center;animation:twinkle 1.8s ease-in-out infinite}
.acc-sparkles .spk1{animation-delay:.3s}.acc-sparkles .spk2{animation-delay:.6s}.acc-sparkles .spk3{animation-delay:.9s}.acc-sparkles .spk4{animation-delay:1.2s}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.3}50%{transform:scale(1.15) rotate(45deg);opacity:1}}
.acc-bubbles .bub{transform-box:fill-box;transform-origin:center;animation:bubbleUp 3s ease-in infinite}
.acc-bubbles .bub1{animation-delay:.7s}.acc-bubbles .bub2{animation-delay:1.4s}.acc-bubbles .bub3{animation-delay:2.1s}
@keyframes bubbleUp{0%{transform:translateY(10px) scale(.5);opacity:0}20%{opacity:1}100%{transform:translateY(-46px) scale(1.2);opacity:0}}
.acc-party .conf{transform-box:fill-box;transform-origin:center;animation:confettiFall 2.6s linear infinite}
.acc-party .conf1{animation-delay:.6s}.acc-party .conf2{animation-delay:1.2s}.acc-party .conf3{animation-delay:1.8s}
@keyframes confettiFall{0%{transform:translateY(-12px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(60px) rotate(420deg);opacity:0}}
.acc-butterfly{animation:flutterPath 4s ease-in-out infinite}
.acc-butterfly .wing{transform-box:fill-box;animation:flap .35s ease-in-out infinite alternate}
.acc-butterfly .wl{transform-origin:right center}.acc-butterfly .wr{transform-origin:left center}
@keyframes flap{to{transform:scaleX(.25)}}
@keyframes flutterPath{0%,100%{translate:0 0}50%{translate:-8px -6px}}
.acc-chick{animation:chickBob 1.2s ease-in-out infinite}
@keyframes chickBob{0%,100%{translate:0 0}50%{translate:0 -3px}}

/* ---------- Borders: richer and animated ---------- */
.frame.border-mint{background:linear-gradient(135deg,#c9fff0,#2fbf9b 50%,#9df0d6);box-shadow:0 0 0 2px var(--bg),0 0 0 4px #9df0d6,0 0 14px rgba(47,191,155,.45)}
.frame.border-gold{background:conic-gradient(from var(--spin,0deg),#fff2b0,#d9a21b,#fff8d6,#a8770c,#fff2b0);animation:spinRing 5s linear infinite;box-shadow:0 0 14px rgba(241,180,69,.5)}
.frame.border-gold::after{inset:-7px;background:radial-gradient(circle at 12% 30%,#fff6c9 0 2px,transparent 3px),radial-gradient(circle at 88% 70%,#fff6c9 0 2px,transparent 3px),radial-gradient(circle at 50% 2%,#ffffff 0 2px,transparent 3px);animation:sparkleBlink 1.6s ease-in-out infinite}
@keyframes sparkleBlink{50%{opacity:.2}}
.frame.border-sakura::after{animation:spinSlow 12s linear infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.frame.border-hearts{background:linear-gradient(135deg,#ffb3cd,#ff6f9f);box-shadow:0 0 12px rgba(255,111,159,.5)}
.frame.border-hearts::before{inset:-12px;background:radial-gradient(circle at 20% 80%,#ff6f9f 0 3px,transparent 4px),radial-gradient(circle at 80% 85%,#ff9ec1 0 3px,transparent 4px),radial-gradient(circle at 50% 95%,#ff6f9f 0 2px,transparent 3px);animation:heartsRise 2.4s ease-in infinite}
@keyframes heartsRise{0%{transform:translateY(8px);opacity:0}30%{opacity:1}100%{transform:translateY(-30px);opacity:0}}
.frame.border-flame{background:conic-gradient(from var(--spin,0deg),#ff3d00,#ffb300,#ff6d00,#ffe066,#ff3d00);animation:spinRing 2.4s linear infinite,flameGlow 1.1s ease-in-out infinite alternate}
@keyframes flameGlow{from{box-shadow:0 0 8px rgba(255,90,0,.5)}to{box-shadow:0 0 20px rgba(255,170,0,.85),0 -4px 14px rgba(255,90,0,.5)}}
.frame.border-rainbow{background:conic-gradient(from var(--spin,0deg),#ff5f6d,#ffc371,#fff27a,#7af0a0,#5ad1ff,#b18cff,#ff5f6d);animation:spinRing 4s linear infinite;box-shadow:0 0 14px rgba(177,140,255,.45)}
.frame.border-neon{background:linear-gradient(135deg,#5ef2ff,#c46bff,#5ef2ff);background-size:200% 200%;animation:neonPulse 2.4s ease-in-out infinite,neonShift 3s linear infinite}
@keyframes neonShift{to{background-position:200% 0}}
.frame.border-aurora::after{inset:-6px;background:conic-gradient(from var(--spin,0deg),transparent,rgba(94,242,194,.5),transparent,rgba(177,140,255,.5),transparent);filter:blur(6px);animation:spinRing 6s linear infinite}

/* ---------- Banners: living scenes ---------- */
.profile-hero.banner::after,.item-banner::after{content:"";position:absolute;inset:0 0 auto 0;height:96px;z-index:0;pointer-events:none}
.item-banner::after{height:100%}
.banner-pt-sunset::before{background:linear-gradient(120deg,#ff9a5c,#ff6f91 55%,#ffc46b);background-size:200% 100%;animation:bannerDrift 12s ease-in-out infinite alternate}
.banner-pt-sunset::after{background:radial-gradient(circle at 80% 85%,rgba(255,244,190,.9) 0 18px,rgba(255,220,150,.35) 30px,transparent 60px);animation:sunPulse 4s ease-in-out infinite}
.banner-pt-ocean::after{background:radial-gradient(ellipse 60px 10px at 20% 100%,rgba(255,255,255,.35),transparent),radial-gradient(ellipse 80px 12px at 70% 100%,rgba(255,255,255,.3),transparent);background-size:240px 100%;animation:waves 6s linear infinite}
.banner-pt-forest::after{background:radial-gradient(ellipse 5px 3px at 20% 30%,#d6f5a0,transparent),radial-gradient(ellipse 5px 3px at 60% 10%,#a8e070,transparent),radial-gradient(ellipse 4px 3px at 85% 50%,#e4ff9e,transparent);background-size:180px 96px;animation:leaves 9s linear infinite}
.banner-pt-nebula::after{background:radial-gradient(circle at 10% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 40% 60%,#fff 0 1px,transparent 2px),radial-gradient(circle at 75% 25%,#ffe9ff 0 1.5px,transparent 2.5px),radial-gradient(circle at 90% 70%,#fff 0 1px,transparent 2px);background-size:160px 96px;animation:sparkleBlink 2.2s ease-in-out infinite}
.banner-pt-sakura::before{background:linear-gradient(120deg,#ffe3ee,#ffc6da 55%,#fff0f5)}
.banner-pt-sakura::after{background:radial-gradient(ellipse 6px 4px at 15% 20%,#ff9ec1,transparent),radial-gradient(ellipse 5px 3px at 55% 50%,#ffffff,transparent),radial-gradient(ellipse 6px 4px at 80% 10%,#f7a8c4,transparent);background-size:200px 96px;animation:petalsFall 7s linear infinite}
.banner-pt-aurora::before{background:linear-gradient(170deg,#06121e,#10283a)}
.banner-pt-aurora::after{background:linear-gradient(100deg,transparent 20%,rgba(94,242,194,.55) 35%,transparent 50%,rgba(177,140,255,.5) 65%,transparent 80%);background-size:300% 100%;filter:blur(8px);animation:bannerDrift 8s ease-in-out infinite alternate}
.banner-pt-citynight::before{background:linear-gradient(180deg,#1b1f4a,#3a2f6e 70%,#5a3f7a)}
.banner-pt-citynight::after{background:linear-gradient(to top,#0e1027 0 38%,transparent 38%),radial-gradient(circle at 12% 70%,#ffd86b 0 2px,transparent 3px),radial-gradient(circle at 30% 76%,#ffd86b 0 2px,transparent 3px),radial-gradient(circle at 52% 66%,#ffe9a8 0 2px,transparent 3px),radial-gradient(circle at 74% 78%,#ffd86b 0 2px,transparent 3px),radial-gradient(circle at 90% 70%,#ffe9a8 0 2px,transparent 3px);animation:sparkleBlink 3s ease-in-out infinite}
.item-banner::before{content:"";position:absolute;inset:0}
@keyframes bannerDrift{to{background-position:100% 0}}
@keyframes sunPulse{50%{transform:scale(1.08);opacity:.85}}
@keyframes waves{to{background-position:240px 0}}
@keyframes leaves{from{background-position:0 -96px}to{background-position:90px 96px}}
@keyframes petalsFall{from{background-position:0 -96px}to{background-position:60px 96px}}

/* ---------- Themes inside lessons, flashcards and quizzes ---------- */
html[data-ui-theme] .stage{background:var(--bg)}
html[data-ui-theme] .q-option,html[data-ui-theme] .match-option{background:var(--bg)}
html[data-ui-theme] .q-option:not([aria-disabled]):hover{box-shadow:var(--raise-xs),0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
html[data-ui-theme] .sheet{background:var(--bg)}
#themeBurst{position:fixed;inset:0;width:100%;height:100%;z-index:83;pointer-events:none}
@media(prefers-reduced-motion:reduce){.acc-sparkles .spk,.acc-bubbles .bub,.acc-party .conf,.acc-butterfly,.acc-butterfly .wing,.acc-chick,.profile-hero.banner::after,.item-banner::after,.banner-pt-sunset::before,.frame::before,.frame::after{animation:none!important}}

/* ================= Collection 2 ================= */
/* ---------- Borders ---------- */
.frame.border-peach{background:linear-gradient(135deg,#ffe3cf,#ff9f7a 55%,#ffd2b8);box-shadow:0 0 0 2px var(--bg),0 0 0 4px #ffc2a2}
.frame.border-tide{background:conic-gradient(from var(--spin,0deg),#1d4e89,#2ec4d6,#7af0e0,#2ec4d6,#1d4e89);animation:spinRing 7s linear infinite}
.frame.border-fern{background:linear-gradient(135deg,#1e5631,#4caf50 50%,#a6d96a);box-shadow:0 0 10px rgba(76,175,80,.4)}
.frame.border-lilac{background:linear-gradient(135deg,#efe6ff,#b9a3f5 55%,#8f72e0);box-shadow:0 0 0 2px var(--bg),0 0 0 4px #e6dcff}
.frame.border-frost{background:conic-gradient(from var(--spin,0deg),#ffffff,#bfe6ff,#e8f7ff,#8fcff5,#ffffff);animation:spinRing 9s linear infinite;box-shadow:0 0 12px rgba(150,210,255,.55)}
.frame.border-candy{background:repeating-conic-gradient(from var(--spin,0deg),#e2445c 0 15deg,#ffffff 15deg 30deg);animation:spinRing 6s linear infinite}
.frame.border-pearl{background:radial-gradient(circle at 30% 25%,#ffffff,#f3eee8 40%,#d9d0c7 75%,#f7f2ec);box-shadow:0 0 10px rgba(255,248,235,.6)}
.frame.border-ruby{background:conic-gradient(#ff5a76,#a3122e,#ff8fa0,#7d0d22,#ff5a76);box-shadow:0 0 12px rgba(207,58,85,.5)}
.frame.border-emerald{background:conic-gradient(#5be39a,#0f7a45,#9ff2c4,#0a5a33,#5be39a);box-shadow:0 0 12px rgba(30,160,90,.5)}
.frame.border-sapphire{background:conic-gradient(#6aa6ff,#173f9e,#a9c9ff,#0f2a6e,#6aa6ff);box-shadow:0 0 12px rgba(60,110,220,.5)}
.frame.border-amethyst{background:conic-gradient(#c79bff,#5a2a9e,#e3ccff,#3f1a75,#c79bff);box-shadow:0 0 12px rgba(150,90,230,.5)}
.frame.border-amethyst::after,.frame.border-ruby::after,.frame.border-emerald::after,.frame.border-sapphire::after{inset:-5px;background:radial-gradient(circle at 18% 22%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 82% 78%,#fff 0 1.5px,transparent 2.5px);animation:sparkleBlink 2s ease-in-out infinite}
.frame.border-sunset{background:linear-gradient(160deg,#ffc46b,#ff6f91 55%,#8a4fd1);box-shadow:0 0 12px rgba(255,111,145,.45)}
.frame.border-midnight{background:radial-gradient(circle at 25% 30%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 75% 65%,#fff 0 1px,transparent 1.6px),radial-gradient(circle at 55% 15%,#cfd8ff 0 1px,transparent 1.6px),linear-gradient(135deg,#1a2244,#34479e)}
.frame.border-bubblegum{background:conic-gradient(from var(--spin,0deg),#ff9fd0,#7fd4ff,#ff9fd0,#7fd4ff,#ff9fd0);animation:spinRing 5s linear infinite}
.frame.border-mono{background:conic-gradient(#111 0 25%,#fff 0 50%,#111 0 75%,#fff 0);box-shadow:0 0 0 1px #888}
.frame.border-circuit{background:repeating-conic-gradient(from var(--spin,0deg),#5ef2ff 0 10deg,transparent 10deg 20deg),#1a2030;animation:spinRing 3s linear infinite;box-shadow:0 0 10px rgba(94,242,255,.5)}
.frame.border-polka{background:radial-gradient(circle,#fff 0 1.8px,transparent 2.4px) 0 0/8px 8px,linear-gradient(135deg,#ff9ec1,#f06aae)}
.frame.border-vine{background:linear-gradient(135deg,#3f962a,#8fd16b 50%,#2a7a1f)}
.frame.border-vine::after{inset:-7px;background:radial-gradient(ellipse 5px 3px at 15% 20%,#7bd36b,transparent),radial-gradient(ellipse 5px 3px at 88% 35%,#5fbf3f,transparent),radial-gradient(ellipse 5px 3px at 30% 92%,#9be37f,transparent),radial-gradient(ellipse 5px 3px at 78% 88%,#7bd36b,transparent);animation:spinSlow 18s linear infinite}
.frame.border-twinstar{background:conic-gradient(from var(--spin,0deg),#2a1f5e,#7a66e8,#2a1f5e);animation:spinRing 10s linear infinite}
.frame.border-twinstar::after,.frame.border-twinstar::before{width:7px;height:7px;top:50%;left:50%;margin:-3.5px;background:#fff6c9;box-shadow:0 0 8px 2px #ffe27a;animation:orbit 4s linear infinite;z-index:2;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.frame.border-twinstar::before{animation-delay:-2s;background:#ffd6f5;box-shadow:0 0 8px 2px #ff8ad8}
.frame.border-comet{background:conic-gradient(from var(--spin,0deg),transparent 0 60%,rgba(130,200,255,.4) 80%,#ffffff 99%,transparent 100%),#1c2a4a;animation:spinRing 2.6s linear infinite}
.frame.border-ripple{background:linear-gradient(135deg,#7af0e0,#2ec4d6)}
.frame.border-ripple::after{inset:0;border:2px solid #7af0e0;animation:rippleOut 2.2s ease-out infinite}
@keyframes rippleOut{from{transform:scale(1);opacity:.9}to{transform:scale(1.35);opacity:0}}
.frame.border-prism{background:conic-gradient(#ff5f6d,#ffc371,#7af0a0,#5ad1ff,#b18cff,#ff5f6d);animation:prismShift 6s linear infinite}
@keyframes prismShift{to{filter:hue-rotate(360deg)}}
.frame.border-heartbeat{background:linear-gradient(135deg,#ff6f9f,#cf3a55);animation:heartBeat 1.2s ease-in-out infinite}
@keyframes heartBeat{0%,40%,100%{box-shadow:0 0 0 0 rgba(255,111,159,.6)}15%{box-shadow:0 0 0 5px rgba(255,111,159,.25)}25%{box-shadow:0 0 0 2px rgba(255,111,159,.5)}}

/* ---------- Banners ---------- */
.banner-pt-lavender::before{background:repeating-linear-gradient(170deg,#b9a3f5 0 10px,#9d7fde 10px 18px),linear-gradient(#e9ddff,#c3acf5)}
.banner-pt-lavender::after{background:linear-gradient(180deg,#f3e9ff 0 30%,transparent 60%)}
.banner-pt-desert::before{background:radial-gradient(ellipse 70% 40% at 30% 100%,#d9a845 0 60%,transparent 61%),radial-gradient(ellipse 60% 35% at 80% 100%,#c38a2e 0 60%,transparent 61%),linear-gradient(180deg,#ffcf8a,#ffb067)}
.banner-pt-desert::after{background:radial-gradient(circle at 78% 30%,#fff3c4 0 12px,transparent 22px);animation:sunPulse 5s ease-in-out infinite}
.banner-pt-glacier::before{background:linear-gradient(160deg,transparent 45%,#e8f7ff 45% 55%,transparent 55%),linear-gradient(200deg,transparent 40%,#cfeeff 40% 60%,transparent 60%),linear-gradient(180deg,#9dd3f2,#e8f7ff)}
.banner-pt-glacier::after{background:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 2px),radial-gradient(circle at 60% 20%,#fff 0 1px,transparent 2px);background-size:120px 96px;animation:sparkleBlink 3s ease-in-out infinite}
.banner-pt-meadow::before{background:radial-gradient(ellipse 80% 50% at 25% 110%,#5fbf3f 0 60%,transparent 61%),radial-gradient(ellipse 70% 45% at 85% 110%,#4fa83a 0 60%,transparent 61%),linear-gradient(180deg,#bfe9ff,#e8fbd9)}
.banner-pt-meadow::after{background:radial-gradient(circle at 15% 80%,#ff9ec1 0 2px,transparent 3px),radial-gradient(circle at 40% 85%,#fff4b0 0 2px,transparent 3px),radial-gradient(circle at 70% 78%,#b9a8ff 0 2px,transparent 3px);background-size:140px 96px}
.banner-pt-reef::before{background:radial-gradient(ellipse 20px 30px at 15% 100%,#ff7a7a 0 60%,transparent 61%),radial-gradient(ellipse 16px 24px at 40% 100%,#ffb347 0 60%,transparent 61%),radial-gradient(ellipse 22px 34px at 75% 100%,#ff6fb8 0 60%,transparent 61%),linear-gradient(180deg,#2ec4d6,#1d6fa0)}
.banner-pt-reef::after{background:radial-gradient(circle at 20% 60%,rgba(255,255,255,.5) 0 2px,transparent 3px),radial-gradient(circle at 55% 40%,rgba(255,255,255,.4) 0 3px,transparent 4px),radial-gradient(circle at 85% 70%,rgba(255,255,255,.5) 0 2px,transparent 3px);background-size:160px 96px;animation:leaves 8s linear infinite reverse}
.banner-pt-volcano::before{background:linear-gradient(120deg,transparent 30%,#3d1410 30% 45%,transparent 45%),linear-gradient(240deg,transparent 30%,#2b0e0b 30% 45%,transparent 45%),linear-gradient(180deg,#5c1010,#ff5a1f 90%)}
.banner-pt-volcano::after{background:radial-gradient(circle at 30% 70%,#ffd23f 0 1.5px,transparent 2.5px),radial-gradient(circle at 60% 50%,#ff8a3d 0 2px,transparent 3px),radial-gradient(circle at 80% 80%,#ffd23f 0 1.5px,transparent 2.5px);background-size:120px 96px;animation:leaves 6s linear infinite reverse}
.banner-pt-candy::before{background:repeating-linear-gradient(135deg,#ffd1e6 0 14px,#d9f0ff 14px 28px,#fff4c2 28px 42px)}
.banner-pt-candy::after{background:radial-gradient(ellipse 3px 1.5px at 20% 30%,#ff6f9f,transparent),radial-gradient(ellipse 3px 1.5px at 60% 60%,#5d9be6,transparent),radial-gradient(ellipse 3px 1.5px at 80% 20%,#3db67a,transparent);background-size:90px 60px}
.banner-pt-starry::before{background:radial-gradient(ellipse at 30% 40%,rgba(120,150,255,.5),transparent 50%),radial-gradient(ellipse at 75% 60%,rgba(255,230,120,.25),transparent 40%),linear-gradient(160deg,#0f1840,#24357a)}
.banner-pt-starry::after{background:radial-gradient(circle at 10% 30%,#ffe27a 0 1.5px,transparent 2.5px),radial-gradient(circle at 45% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 55%,#ffe27a 0 1.5px,transparent 2.5px),radial-gradient(circle at 90% 25%,#fff 0 1px,transparent 2px);background-size:150px 96px;animation:sparkleBlink 2.6s ease-in-out infinite}
.banner-pt-twilight::before{background:linear-gradient(180deg,#2a1f5e,#7a4fd1 65%,#ff9ec1)}
.banner-pt-twilight::after{background:radial-gradient(circle at 82% 32%,#fff6c9 0 13px,transparent 14px),radial-gradient(circle at 85% 28%,#7a4fd1 0 12px,transparent 13px)}
.banner-pt-lemonade::before{background:linear-gradient(135deg,#fff7b0,#ffe066 60%,#ffd23f)}
.banner-pt-lemonade::after{background:radial-gradient(circle at 20% 80%,transparent 3px,rgba(255,255,255,.85) 3.5px,transparent 4.5px),radial-gradient(circle at 60% 40%,transparent 4px,rgba(255,255,255,.75) 4.5px,transparent 5.5px),radial-gradient(circle at 85% 85%,transparent 2px,rgba(255,255,255,.85) 2.5px,transparent 3.5px);background-size:56px 48px;animation:leaves 7s linear infinite reverse}
.banner-pt-mintchoc::before{background:linear-gradient(135deg,#bff2df,#7fd9b8)}
.banner-pt-mintchoc::after{background:radial-gradient(ellipse 4px 2.5px at 20% 30%,#5a3a24,transparent),radial-gradient(ellipse 3px 2px at 55% 70%,#3e2616,transparent),radial-gradient(ellipse 4px 2.5px at 80% 40%,#5a3a24,transparent);background-size:44px 36px}
.banner-pt-cosmos::before{background:radial-gradient(circle at 20% 60%,#ff9f7a 0 12px,transparent 13px),radial-gradient(circle at 70% 35%,#7fd4ff 0 8px,transparent 9px),radial-gradient(ellipse 22px 4px at 70% 35%,rgba(255,255,255,.6) 0 60%,transparent 70%),linear-gradient(160deg,#0a0618,#2a1650)}
.banner-pt-cosmos::after{background:radial-gradient(circle at 10% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 50% 80%,#fff 0 1px,transparent 2px),radial-gradient(circle at 90% 60%,#fff 0 1px,transparent 2px);background-size:110px 96px;animation:bannerDrift 20s linear infinite}
.banner-pt-rainy::before{background:linear-gradient(180deg,#5f7fa8,#9cb8d8)}
.banner-pt-rainy::after{background:linear-gradient(105deg,transparent 48%,rgba(255,255,255,.55) 49% 51%,transparent 52%);background-size:22px 26px;animation:rainFall .7s linear infinite}
@keyframes rainFall{to{background-position:-7px 26px}}
.banner-pt-autumn::before{background:linear-gradient(135deg,#ffb057,#d9622b 60%,#8a3a1a)}
.banner-pt-autumn::after{background:radial-gradient(ellipse 6px 4px at 20% 20%,#ffd23f,transparent),radial-gradient(ellipse 6px 4px at 60% 50%,#7a2a12,transparent),radial-gradient(ellipse 5px 3px at 85% 85%,#ffb057,transparent);background-size:64px 48px;animation:petalsFall 8s linear infinite}
.banner-pt-winter::before{background:linear-gradient(180deg,#9dc3e6,#e8f3ff)}
.banner-pt-winter::after{background:radial-gradient(circle at 20% 20%,#fff 0 2px,transparent 3px),radial-gradient(circle at 55% 55%,#fff 0 1.5px,transparent 2.5px),radial-gradient(circle at 85% 80%,#fff 0 2px,transparent 3px);background-size:52px 44px;animation:petalsFall 9s linear infinite}
.banner-pt-bloom::before{background:linear-gradient(135deg,#fff0f5,#ffd1e6 50%,#e8fbd9)}
.banner-pt-bloom::after{background:radial-gradient(circle at 20% 40%,#ff9ec1 0 5px,#fff4b0 5px 6.5px,transparent 7px),radial-gradient(circle at 65% 65%,#b9a8ff 0 4px,#fff4b0 4px 5.5px,transparent 6px);background-size:130px 96px;animation:sunPulse 4s ease-in-out infinite}
.banner-pt-synthwave::before{background:linear-gradient(transparent 55%,rgba(255,106,213,.6) 55% 56%,transparent 56%) 0 0/100% 12px,linear-gradient(90deg,rgba(255,106,213,.5) 1px,transparent 1px) 0 0/22px 100%,linear-gradient(180deg,#1a0b3a,#5a1a7a 60%,#ff6ad5)}
.banner-pt-synthwave::after{background:radial-gradient(circle at 50% 70%,#ffd23f 0 22px,#ff6ad5 22px 30px,transparent 31px)}
.banner-pt-matcha::before{background:radial-gradient(ellipse at 30% 50%,#c6d99a,transparent 60%),radial-gradient(ellipse at 75% 40%,#98b866,transparent 55%),linear-gradient(135deg,#e8f0d0,#a6c27a)}
.banner-pt-matcha::after{background:radial-gradient(ellipse 40px 10px at 50% 50%,transparent 60%,rgba(255,255,240,.5) 62%,transparent 70%);background-size:120px 60px;animation:waves 10s linear infinite}
.banner-pt-nightshift::before{background:linear-gradient(to top,#121733 0 34%,transparent 34%),linear-gradient(180deg,#1b2a5a,#3a4f8a)}
.banner-pt-nightshift::after{background:radial-gradient(circle at 15% 78%,#9fe6ff 0 2px,transparent 3px),radial-gradient(circle at 35% 82%,#fff 0 2px,transparent 3px),radial-gradient(circle at 62% 76%,#9fe6ff 0 2px,transparent 3px),radial-gradient(circle at 88% 30%,#fff6c9 0 9px,transparent 10px),linear-gradient(90deg,transparent 46%,#e2445c 46% 54%,transparent 54%) 50% 74%/18px 6px no-repeat,linear-gradient(transparent 46%,#e2445c 46% 54%,transparent 54%) 50% 74%/6px 18px no-repeat;animation:sparkleBlink 3.4s ease-in-out infinite}
.banner-pt-honeycomb::before{background:radial-gradient(circle,transparent 9px,#d9a21b 9.5px 11px,transparent 11.5px) 0 0/24px 21px,radial-gradient(circle,transparent 9px,#d9a21b 9.5px 11px,transparent 11.5px) 12px 10.5px/24px 21px,linear-gradient(135deg,#ffe066,#f2b33d)}
.banner-pt-confetti::before{background:linear-gradient(135deg,#7a66e8,#ff6f9f)}
.banner-pt-confetti::after{background:radial-gradient(circle at 20% 30%,#ffd23f 0 2.5px,transparent 3px),radial-gradient(circle at 70% 20%,#7af0e0 0 2px,transparent 2.5px),radial-gradient(circle at 45% 70%,#ffffff 0 2px,transparent 2.5px),radial-gradient(circle at 85% 75%,#ffd23f 0 2px,transparent 2.5px);background-size:46px 38px;animation:petalsFall 5s linear infinite}
.banner-pt-origami::before{background:linear-gradient(60deg,#ff9f7a 25%,transparent 25%) 0 0/60px 60px,linear-gradient(-60deg,#ffc46b 25%,transparent 25%) 0 0/60px 60px,linear-gradient(120deg,#ff6f91 25%,transparent 25%) 30px 30px/60px 60px,linear-gradient(135deg,#ffe3cf,#ffd2b8)}

/* ---------- Profile themes. Each profile card theme is a full token set (theme-tokens.js writes one rule per theme,
   in the current light or dark mode, into #profileThemeStyles). It is applied to the hero and to every card inside
   the profile page: the hero's parent gets .pc-scope plus the same pc-* class, so --bg, --ink, --muted, --accent,
   the shadows and the outline all switch together and text always contrasts with the surface under it. ---------- */
.pc-scope{background:var(--bg);color:var(--ink);box-shadow:0 0 0 12px var(--bg);border-radius:6px}
.profile-hero[class*=" pc-"],.profile-hero[class^="pc-"]{background:var(--pc-bg);color:var(--pc-ink);border-color:var(--pc-line);box-shadow:inset 0 0 0 2px var(--pc-rim,transparent),var(--raise)}
.profile-hero[class*=" pc-"] .metric,.profile-hero[class*=" pc-"] .button.secondary{background:var(--pc-chip);color:var(--pc-ink);box-shadow:none;border:1px solid var(--pc-line)}
.profile-hero[class*=" pc-"] .hero-sub,.profile-hero[class*=" pc-"] .hero-note,.profile-hero[class*=" pc-"] .hero-foot,.profile-hero[class*=" pc-"] small{color:var(--pc-muted)}
.profile-hero.pc-holo,.item-pcard.pc-holo{background-size:200% 100%;animation:bannerDrift 8s ease-in-out infinite alternate}
.item-pcard{display:block;width:100%;height:100%;border-radius:12px;background:var(--pc-bg);position:relative;overflow:hidden}
.item-pcard::before{content:"";position:absolute;left:12px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--pc-accent);opacity:.85}
.item-pcard::after{content:"";position:absolute;left:46px;top:18px;width:46%;height:6px;border-radius:4px;background:var(--pc-ink);opacity:.7;box-shadow:0 12px 0 -1px var(--pc-muted)}
.profile-preview-dialog{width:min(760px,calc(100vw - 28px));max-width:none;max-height:min(900px,calc(100dvh - 28px));padding:0;border:1px solid var(--edge);border-radius:24px;background:var(--bg);color:var(--ink);box-shadow:0 28px 70px rgba(0,0,0,.4);overflow:hidden}
.profile-preview-dialog::backdrop{background:rgba(8,12,18,.6);backdrop-filter:blur(3px)}
.profile-preview-dialog[open]{display:flex;flex-direction:column}
.profile-preview-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:20px 22px 14px;border-bottom:1px solid var(--edge);flex:0 0 auto}
.profile-preview-head .eyebrow{margin:0 0 4px;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em}
.profile-preview-head h2{margin:0;font-size:20px}
.profile-preview-head p:last-child{margin:5px 0 0;color:var(--muted);font-size:13px}
.profile-preview-close{flex:0 0 auto;font-size:24px}
.profile-preview-scroll{padding:18px 22px;overflow:auto;overscroll-behavior:contain}
.profile-preview-scope{display:grid;gap:14px;padding:10px;border-radius:20px;background:var(--bg);color:var(--ink)}
.profile-preview-scope .profile-hero{margin:0}
.profile-preview-scope .hero-id{display:flex;gap:14px;align-items:center}
.profile-preview-scope .hero-id h2{margin:0;font-size:20px}
.profile-preview-scope .hero-sub{margin:4px 0 0;color:var(--muted)}
.profile-preview-scope .profile-card{padding:18px;border-radius:18px;background:var(--bg);box-shadow:var(--raise-sm);border:1px solid var(--edge)}
.profile-preview-scope .profile-card p{color:var(--muted);margin:6px 0 14px}
.profile-preview-badges{display:flex;flex-wrap:wrap;gap:8px}
.profile-preview-badges span{padding:7px 10px;border-radius:99px;background:var(--pc-chip,var(--bg));border:1px solid var(--pc-line,var(--edge));font-size:12px;font-weight:750}
.profile-preview-actions{display:flex;justify-content:flex-end;padding:12px 22px 18px;border-top:1px solid var(--edge);flex:0 0 auto}
@media(max-width:560px){.profile-preview-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:19px}.profile-preview-head{padding:16px 16px 12px}.profile-preview-scroll{padding:12px 10px}.profile-preview-actions{padding:10px 16px 14px}.profile-preview-scope{padding:5px;gap:10px}}
@media(prefers-reduced-motion:reduce){.frame.border-prism,.frame.border-heartbeat,.frame.border-ripple::after,.frame.border-twinstar::before,.frame.border-twinstar::after,.pc-holo{animation:none!important}}