/* USAGI 2.1: visual theme override only; no business logic */
body[data-theme="leaf"]{--v21-bg:#ffe0ce;--v21-bg2:#ffc5a8;--v21-card:#fff7ed;--v21-edge:#ef986c;--v21-strong:#df693e;--v21-glow:#f59c68;--v21-text:#663d35;--v21-sky:#ffcfb0;--v21-accent:#ff8b4e}
body[data-theme="akatsuki"]{--v21-bg:#b7b5f0;--v21-bg2:#7f8ed3;--v21-card:#efebff;--v21-edge:#8a79ca;--v21-strong:#6653af;--v21-glow:#9981e8;--v21-text:#302a60;--v21-sky:#a4a2ed;--v21-accent:#755bca}
body[data-theme="chibi"]{--v21-bg:#ffb4d2;--v21-bg2:#f58bb9;--v21-card:#fff0f7;--v21-edge:#e978ab;--v21-strong:#cc4388;--v21-glow:#ff79b4;--v21-text:#642c52;--v21-sky:#ffadd5;--v21-accent:#ec5899}
body[data-theme="hokage"]{--v21-bg:#ffe39c;--v21-bg2:#f6bd63;--v21-card:#fff8df;--v21-edge:#dba94b;--v21-strong:#a96e20;--v21-glow:#eec363;--v21-text:#65461c;--v21-sky:#f9d37c;--v21-accent:#d89328}
html{background:var(--v21-bg)!important}
body{background:radial-gradient(ellipse at 12% 8%,#ffffffb3,transparent 37%),radial-gradient(ellipse at 95% 45%,var(--v21-bg2),transparent 65%),linear-gradient(145deg,var(--v21-bg),var(--v21-bg2))!important;background-attachment:fixed!important;color:var(--v21-text)!important;transition:background-color .4s,color .4s}
body .topbar{background:linear-gradient(125deg,var(--v21-card),var(--v21-sky))!important;border-bottom:2px solid var(--v21-edge)!important;box-shadow:0 6px 30px color-mix(in srgb,var(--v21-glow) 35%,transparent)!important}
body .brand,body .topbar label,body .usagi-friends-title strong{color:var(--v21-text)!important}
body .topbar select,body .topbar button{background:var(--v21-card)!important;border:2px solid var(--v21-edge)!important;color:var(--v21-text)!important;box-shadow:0 3px 12px color-mix(in srgb,var(--v21-glow) 30%,transparent)!important}
body .hero{background:linear-gradient(110deg,var(--v21-card),var(--v21-sky))!important;border:3px solid var(--v21-edge)!important;box-shadow:0 10px 35px color-mix(in srgb,var(--v21-glow) 48%,transparent),0 0 0 4px color-mix(in srgb,var(--v21-card) 75%,transparent)!important}
body .hero .usagi-hero-copy h1,body .hero .usagi-hero-copy p{color:var(--v21-text)!important}
body .hero .usagi-hero-copy h1 em{color:var(--v21-strong)!important}
body .usagi-hero-pill{background:var(--v21-card)!important;color:var(--v21-strong)!important;border-color:var(--v21-edge)!important}
body .usagi-friends,body .panel,body .usagi-live-preview,body .usagi-calc-heading{background-color:var(--v21-card)!important;border-color:var(--v21-edge)!important;box-shadow:0 7px 24px color-mix(in srgb,var(--v21-glow) 22%,transparent)!important}
body .usagi-friends{background-image:linear-gradient(140deg,var(--v21-card),var(--v21-sky))!important}
body .usagi-friend{background:linear-gradient(145deg,#fff,var(--v21-card))!important;border-color:var(--v21-edge)!important}
body .usagi-friend.is-selected{border-color:var(--v21-strong)!important;box-shadow:0 0 0 2px var(--v21-edge),0 7px 25px var(--v21-glow)!important}
body .usagi-friend strong,body .usagi-friend span,body .usagi-friends-title span{color:var(--v21-text)!important}
body .section-head h2,body .usagi-calc-heading h2{color:var(--v21-strong)!important}
body .quick-tabs{border:3px solid var(--v21-edge)!important;background:color-mix(in srgb,var(--v21-text) 86%,black)!important;box-shadow:0 5px 20px var(--v21-glow)!important}
body .quick-tabs a{filter:saturate(1.15)}
body .panel label,body .panel .hint{color:var(--v21-text)!important;opacity:1!important}
body .panel input,body .panel select{border-color:var(--v21-edge)!important}
body .subtotal,body .result-strip,body .usagi-preview-box{border-color:var(--v21-edge)!important;background:linear-gradient(125deg,var(--v21-card),var(--v21-sky))!important}
body .subtotal strong,body .result-strip strong{color:var(--v21-strong)!important}
body .hero{position:relative;overflow:hidden}
body .usagi-hero-bunny{animation:v21BunnyFloat 4.2s ease-in-out infinite;transform-origin:65% 75%;will-change:transform}
body .hero[data-bunny="sleep"] .usagi-hero-bunny{animation:v21BunnyBreathe 5.3s ease-in-out infinite}
body .hero[data-bunny="energy"] .usagi-hero-bunny{animation:v21BunnyHop 2.7s ease-in-out infinite}
body .hero[data-bunny="plan"] .usagi-hero-bunny{animation:v21BunnyNod 3.8s ease-in-out infinite}
body .hero[data-bunny="style"] .usagi-hero-bunny{animation:v21BunnySway 3.6s ease-in-out infinite}
body .hero[data-bunny="count"] .usagi-hero-bunny{animation:v21BunnyFloat 4.2s ease-in-out infinite}
body .usagi-friend.is-selected img{animation:v21CardBop 3.5s ease-in-out infinite}
body .hero.v21-pop .usagi-hero-bunny{animation:v21Entrance .65s ease-out both!important}
.v21-magic{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.v21-magic i{position:absolute;left:var(--x);top:var(--y);font-size:var(--s);font-style:normal;opacity:0;animation:v21Magic var(--d) ease-in-out infinite;animation-delay:var(--delay);text-shadow:0 0 8px #fff}
.v21-bunny-bubble{position:absolute;right:10%;top:6%;z-index:5;font-size:24px;pointer-events:none;animation:v21Bubble 2.6s ease-in-out infinite;color:var(--v21-strong);text-shadow:0 2px 8px #fff}
.v21-tap-spark{position:absolute;z-index:10;left:var(--tx);top:var(--ty);font-size:24px;pointer-events:none;animation:v21Tap .85s ease-out forwards}
@keyframes v21BunnyFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes v21BunnyBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@keyframes v21BunnyHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}55%{transform:translateY(-2px)}}
@keyframes v21BunnyNod{0%,100%{transform:rotate(0)}50%{transform:rotate(2deg) translateY(-3px)}}
@keyframes v21BunnySway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(2deg) translateY(-5px)}}
@keyframes v21CardBop{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes v21Entrance{0%{opacity:.2;transform:scale(.9) translateY(15px)}100%{opacity:1;transform:scale(1)}}
@keyframes v21Magic{0%,100%{opacity:0;transform:translateY(5px) scale(.6) rotate(0)}35%,60%{opacity:.85}80%{transform:translateY(-22px) scale(1.1) rotate(35deg)}}
@keyframes v21Bubble{0%,100%{opacity:.4;transform:translateY(5px)}50%{opacity:1;transform:translateY(-9px)}}
@keyframes v21Tap{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}100%{opacity:0;transform:translate(-50%,-110%) scale(1.6)}}
@media(prefers-reduced-motion:reduce){body .usagi-hero-bunny,body .usagi-friend img,.v21-magic i,.v21-bunny-bubble,.v21-tap-spark{animation:none!important}}
