/* Mods · Cleanup — visible working / done / error states.
   Decoration + feedback only: never changes values, filters or the actions themselves. */
#section-mods{--mc-glow:118,224,232;--mc-amber:251,191,36;--mc-green:52,211,153;--mc-red:248,113,113}

/* Cleanup card — match the Mod Optimizer console look so the two mod sections feel like one system. */
#mods-pane-clean > div{
  position:relative;isolation:isolate;
  border:1px solid #80ddea45!important;border-radius:22px!important;
  background:radial-gradient(ellipse at 100% 0%,#7051aa20,transparent 55%),linear-gradient(130deg,#142732,#101823 65%)!important;
  box-shadow:0 20px 45px #0003,inset 0 1px #c2f4ff12;
  max-width:760px!important;overflow:hidden;
}

/* Buttons: unmistakable hover + "busy" state. */
#section-mods .btn:not(:disabled):hover{box-shadow:0 0 22px #73dfe72b;filter:brightness(1.12)}
#section-mods .btn:disabled{cursor:wait}
#mc-scan:disabled{animation:mc-busy-pulse 1.1s ease-in-out infinite}
@keyframes mc-busy-pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--mc-glow),.4)}50%{box-shadow:0 0 0 8px rgba(var(--mc-glow),0)}}

/* The banner you can't miss — one clear line of state above the controls. */
.mc-banner{display:none;align-items:center;gap:12px;margin:0 0 16px;padding:14px 18px;border-radius:14px;
  font-size:0.9rem;font-weight:600;line-height:1.45;border:1px solid transparent}
.mc-banner.working,.mc-banner.ok,.mc-banner.err{display:flex;animation:mc-banner-in .35s ease}
.mc-banner.working{background:rgba(var(--mc-amber),.1);border-color:rgba(var(--mc-amber),.42);color:#fcd34d}
.mc-banner.ok{background:rgba(var(--mc-green),.12);border-color:rgba(var(--mc-green),.46);color:#6ee7b7}
.mc-banner.err{background:rgba(var(--mc-red),.1);border-color:rgba(var(--mc-red),.46);color:#fca5a5}
@keyframes mc-banner-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.mc-banner-spin{width:19px;height:19px;flex-shrink:0;border:2px solid rgba(var(--mc-amber),.25);
  border-top-color:#fcd34d;border-right-color:#fcd34d;border-radius:50%;animation:mc-spin .8s linear infinite}
@keyframes mc-spin{to{transform:rotate(360deg)}}

/* Status spans become readable pills instead of grey text that blends in. */
#mc-status:not(:empty),#mc-maint-st:not(:empty),#mc-sellstatus:not(:empty){
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;
  background:#0b1828;border:1px solid #2a3a4a;font-weight:600;font-size:0.82rem}
/* Spinner on the maintenance status while one of those ops is running (its button is disabled). */
#mods-pane-clean:has(#mc-unlock:disabled,#mc-levelup:disabled,#mc-slice:disabled,#mc-slice-all:disabled,#mc-slice-gold-spare:disabled,#mc-slice-gold:disabled,#mc-loclear:disabled) #mc-maint-st::before{
  content:'';width:15px;height:15px;flex-shrink:0;border:2px solid rgba(var(--mc-amber),.25);
  border-top-color:#fcd34d;border-right-color:#fcd34d;border-radius:50%;animation:mc-spin .8s linear infinite}

/* Scan summary tiles: lift them out of the flat grey boxes into glowing stat cards. */
#mc-result > div:first-child{gap:14px!important}
#mc-result > div:first-child > div{
  position:relative;isolation:isolate;overflow:hidden;min-width:140px;
  padding:16px 20px!important;border-radius:16px!important;
  background:linear-gradient(135deg,#153240,#141d2c)!important;border:1px solid #93d9e642!important;
  box-shadow:0 12px 28px #0003,inset 0 1px #b9edff12}
#mc-result > div:first-child > div > div:last-child{text-shadow:0 0 22px currentColor;font-variant-numeric:tabular-nums}

@media(max-width:640px){
  #mods-pane-clean > div{padding:18px 14px!important}
  #mc-result > div:first-child > div{min-width:0;flex:1}
}
@media(prefers-reduced-motion:reduce){
  #section-mods *,#section-mods *::before{animation:none!important}
}