/* Milestone UI layer: soft palette, friendly mascots and small polish on top of milestone.css.
   Mascots are decorative only (pointer-events:none) and are placed where they never cover content. */
:root{
  --mu-plum:#633FDA; --mu-plum-2:#7C5CE8; --mu-ink:#241B52; --mu-gold:#F7B93D;
  --mu-plum-soft:#f6edf5; --mu-gold-soft:#f8f1e3; --mu-sage:#2d7559; --mu-sage-soft:#e9f3ee;
  --mu-sky:#4776a6; --mu-sky-soft:#eaf0f7; --mu-line:#ebe3ea; --mu-muted:#857a86;
  --mu-shadow:0 8px 26px rgba(50,35,70,.07);
}
body{background:linear-gradient(180deg,#faf7fa 0,#f4f5f5 340px) fixed}
::selection{background:#e9d3e5;color:#241B52}
:focus-visible{outline:2px solid #b98cb0;outline-offset:2px}
.ms-content{animation:muFade .35s ease both}
@keyframes muFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- sidebar & topbar ---------- */
.ms-sidebar-header{position:relative}
.mu-side-bee{position:absolute;left:10px;top:12px;width:34px;height:auto;pointer-events:none;animation:muFloat 4.2s ease-in-out infinite}
.ms-sidebar-footer{position:relative}
.mu-side-cat{position:absolute;inset-inline-start:16px;top:-32px;width:62px;height:auto;pointer-events:none;animation:muCrawl 5s ease-in-out infinite}
.ms-topbar{position:relative}
.mu-top-butterfly{position:absolute;left:50%;top:14px;width:40px;height:auto;pointer-events:none;animation:muFlutter 6s ease-in-out infinite;opacity:.95}
.ms-menu-item{transition:background .18s ease,transform .18s ease}
.ms-menu-item:hover{transform:translateX(-2px)}
[dir=ltr] .ms-menu-item:hover{transform:translateX(2px)}
.ms-menu-section{letter-spacing:.02em}
body.ms-sidebar-collapsed .mu-side-bee,body.ms-sidebar-collapsed .mu-side-cat{display:none}

/* ---------- friendly peeking mascot above a key button ---------- */
[data-peek]{position:relative;margin-top:26px!important}
[data-peek]::after{content:"";position:absolute;top:-27px;inset-inline-end:16px;width:30px;height:30px;background-repeat:no-repeat;background-position:center bottom;background-size:contain;pointer-events:none;animation:muBob 3.4s ease-in-out infinite}
[data-peek=bee]::after{background-image:url("../images/ui/bee.png")}
[data-peek=butterfly]::after{background-image:url("../images/ui/butterfly.png")}
[data-peek=caterpillar]::after{background-image:url("../images/ui/caterpillar.png");width:40px}
[data-peek=elephant]::after{background-image:url("../images/ui/elephant.png");width:34px;height:34px}

.th-actions,.pv-actions{align-items:flex-end}

/* ---------- empty states ---------- */
.th-empty::before,.ms-empty-state::before{content:"";display:block;width:74px;height:74px;margin:0 auto 8px;background:url("../images/ui/elephant.png") center/contain no-repeat}

/* ---------- progress with a caterpillar at the head ---------- */
.mu-progress{position:relative;height:12px;border-radius:99px;background:#efe8ee;margin:20px 0 6px}
.mu-progress>i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px;background:linear-gradient(90deg,#633FDA,#b06aa5 60%,#F7B93D);min-width:12px;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.mu-progress>i::after{content:"";position:absolute;inset-inline-end:-6px;top:-19px;width:34px;height:22px;background:url("../images/ui/caterpillar.png") center bottom/contain no-repeat;pointer-events:none}
[dir=rtl] .mu-progress>i::after{transform:scaleX(-1)}
.mu-progress.sage>i{background:linear-gradient(90deg,#2d7559,#79b79a)}
.mu-progress.sky>i{background:linear-gradient(90deg,#4776a6,#9cc0e0)}

/* ---------- payment state pills (camp registrations) ---------- */
.th-pill.PAID{background:#e8f6ed;color:#23714a}.th-pill.PARTIAL{background:#fff4de;color:#a06a00}.th-pill.UNPAID{background:#eef0f4;color:#5d6577}

/* ---------- shared bits reused by dashboard/login ---------- */
.mu-chip{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 12px;font-size:12px;font-weight:800;background:var(--mu-plum-soft);color:var(--mu-plum)}
.mu-dot{width:9px;height:9px;border-radius:50%;display:inline-block}

@keyframes muFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes muFlutter{0%,100%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(-18px,5px) rotate(4deg)}50%{transform:translate(4px,-4px) rotate(-3deg)}75%{transform:translate(20px,4px) rotate(6deg)}}
@keyframes muCrawl{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@keyframes muBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

@media(max-width:1100px){.mu-top-butterfly{display:none}}
@media(max-width:900px){.mu-side-bee,.mu-side-cat{display:none}}
@media(prefers-reduced-motion:reduce){.mu-side-bee,.mu-side-cat,.mu-top-butterfly,[data-peek]::after,.ms-content{animation:none!important}}