/* Yumi 棉花糖猫咪 visual layer.
   Loaded after app.css; it only restyles existing markup and never changes layout-critical
   behaviour. Colours come from the brand banner: snow + polka dots, sky blue, sakura pink,
   lavender outlines. Sounds and runtime effects live in yumi-fx.js. */

:root{
  --k-snow:#fdfcff;--k-ground:#f7f6fd;--k-sky:#d4ebfa;--k-sky-2:#9fd0f0;--k-pink:#fadbe8;--k-pink-2:#f2a7c6;
  --k-lilac:#e6e1f8;--k-line:#d6d0ec;--k-line-soft:#e3dff3;--k-outline:#8a84a8;--k-ink:#4a4568;--k-muted:#6c6789;
  --k-ok:#2f7a66;--k-ok-bg:#e2f6ef;--k-ok-line:#a9dfcb;--k-bad:#b8436f;--k-bad-bg:#fdeef5;--k-bad-line:#f0b3c8;
  --k-candy:linear-gradient(100deg,#d4ebfa,#fadbe8);--k-candy-soft:linear-gradient(100deg,#eaf5fd,#fdeef5);
  --k-ease:cubic-bezier(.34,1.56,.64,1);--k-out:cubic-bezier(.2,.8,.2,1);
  --k-font-cute:"ZCOOL KuaiLe","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --k-font-num:"Fredoka","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --k-font-body:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --k-paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23f2a7c6' stroke='%238a84a8' stroke-width='1.4'%3E%3Cellipse cx='12' cy='15.5' rx='4.6' ry='3.8'/%3E%3Ccircle cx='6.3' cy='10' r='1.9'/%3E%3Ccircle cx='9.8' cy='6.9' r='2'/%3E%3Ccircle cx='14.2' cy='6.9' r='2'/%3E%3Ccircle cx='17.7' cy='10' r='1.9'/%3E%3C/g%3E%3C/svg%3E");
  --k-paw-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%239fd0f0' stroke='%238a84a8' stroke-width='1.4'%3E%3Cellipse cx='12' cy='15.5' rx='4.6' ry='3.8'/%3E%3Ccircle cx='6.3' cy='10' r='1.9'/%3E%3Ccircle cx='9.8' cy='6.9' r='2'/%3E%3Ccircle cx='14.2' cy='6.9' r='2'/%3E%3Ccircle cx='17.7' cy='10' r='1.9'/%3E%3C/g%3E%3C/svg%3E");
  --k-paw-lilac:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23e6e1f8' stroke='%238a84a8' stroke-width='1.4'%3E%3Cellipse cx='12' cy='15.5' rx='4.6' ry='3.8'/%3E%3Ccircle cx='6.3' cy='10' r='1.9'/%3E%3Ccircle cx='9.8' cy='6.9' r='2'/%3E%3Ccircle cx='14.2' cy='6.9' r='2'/%3E%3Ccircle cx='17.7' cy='10' r='1.9'/%3E%3C/g%3E%3C/svg%3E");
  --k-heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' fill='%23fadbe8' stroke='%238a84a8' stroke-width='1.6'/%3E%3C/svg%3E");
  --k-sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z' fill='%23fff4a8' stroke='%238a84a8' stroke-width='1.4'/%3E%3C/svg%3E");
  --k-sparkle-pink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.6 4.6 2.4 6.4 7 7-4.6.6-6.4 2.4-7 7-.6-4.6-2.4-6.4-7-7 4.6-.6 6.4-2.4 7-7z' fill='%23fadbe8' stroke='%238a84a8' stroke-width='1.4'/%3E%3C/svg%3E");
  --k-dots:radial-gradient(#e2def4 1.6px,transparent 2.2px),radial-gradient(#f8d6e5 1.6px,transparent 2.2px);
  --k-lace:radial-gradient(circle at 12px 0,#fff 0 9px,#d6d0ec 9px 11px,transparent 11px);
  /* Legacy tokens used throughout app.css now resolve to the new palette. */
  --bg:#f7f6fd!important;--bg-soft:#f3f1fc!important;--sidebar:#fff!important;--panel:#fff!important;--panel-2:#fdfcff!important;
  --line:#d6d0ec!important;--text:#4a4568!important;--muted:#6c6789!important;--blue:#9fd0f0!important;--blue-2:#b9b2d6!important;
  --pink:#f2a7c6!important;--pink-2:#fadbe8!important;--cyan:#6c6789!important;--danger:#b8436f!important;--success:#2f7a66!important;
  --shadow:0 6px 0 #e8e4f7,0 16px 30px rgba(110,100,160,.1)!important
}

html,body{background-color:var(--k-ground)!important;color:var(--k-ink)!important}
body{background-image:var(--k-dots)!important;background-size:30px 30px!important;background-position:0 0,15px 15px!important;background-attachment:fixed!important;font-family:var(--k-font-body)!important}
::selection{background:#fadbe8;color:#4a4568}
body h1,body h2,body h3{font-family:var(--k-font-cute)!important;font-weight:400!important;letter-spacing:0!important;color:var(--k-ink)!important}
body h4{color:var(--k-ink)!important}
body .eyebrow{font-family:var(--k-font-num)!important;font-weight:600!important;letter-spacing:.38em!important;color:var(--k-muted)!important}
body .muted,body .hint,body .label,body .field-hint,body .detail-sub{color:var(--k-muted)!important}
body strong,body b{color:inherit}
body .error{color:var(--k-bad)!important;font-weight:700}

/* ---------- Buttons: candy primary, milk ghost, berry danger, jelly press ---------- */
body button{font-family:var(--k-font-body)!important;transition:transform .26s var(--k-ease),box-shadow .16s ease,background-color .2s ease,border-color .2s ease,color .2s ease!important}
body button:focus-visible{outline:3px dashed var(--k-sky-2)!important;outline-offset:3px!important}
body button:not(:disabled):active{transform:translateY(3px) scale(1.05,.92)!important;transition-duration:.08s!important}
body button:not(.modal-close):not(.danger-outline){background:var(--k-candy)!important;color:var(--k-ink)!important;border:2px solid var(--k-outline)!important;border-radius:16px!important;box-shadow:0 4px 0 #b9b2d6!important;font-weight:700!important}
body button:not(.modal-close):not(.danger-outline):hover{background:var(--k-candy)!important;color:var(--k-ink)!important;border-color:var(--k-outline)!important;transform:translateY(-2px);box-shadow:0 6px 0 #b9b2d6!important;filter:none!important}
body button.ghost:not(.modal-close),body button.secondary:not(.modal-close),body button.compact-button:not(.danger-outline),body .pagination-bar button:not(.active),body .review-tabs button:not(.active),body .table-toolbar button:not(.modal-close){background:#fff!important;color:var(--k-ink)!important;border:2px solid var(--k-line)!important;box-shadow:0 3px 0 #ece9f8!important}
body button.ghost:not(.modal-close):hover,body button.secondary:not(.modal-close):hover,body button.compact-button:not(.danger-outline):hover,body .pagination-bar button:not(.active):hover,body .review-tabs button:not(.active):hover,body .table-toolbar button:not(.modal-close):hover{background:#f6f4fe!important;border-color:var(--k-outline)!important;box-shadow:0 4px 0 #e2ddf4!important}
body button.danger-outline,body button.ghost.danger{background:#fff!important;color:var(--k-bad)!important;border:2px solid var(--k-bad-line)!important;border-radius:16px!important;box-shadow:0 3px 0 #fbe1ea!important;font-weight:700!important}
body button.danger-outline:hover,body button.ghost.danger:hover{background:#fff3f7!important;border-color:#e07ea3!important;transform:translateY(-2px)}
body button:not(.modal-close):disabled{background:#f3f1f8!important;color:#8f8aa9!important;border:2px dashed var(--k-line)!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}
body button.compact-button{border-radius:12px!important}

/* ---------- Form controls ---------- */
body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),select,textarea){border:2px solid var(--k-line)!important;border-radius:16px!important;background:var(--k-snow)!important;color:var(--k-ink)!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s,background-color .2s!important;color-scheme:light!important}
body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),select,textarea):hover{border-color:#c4bde3!important}
body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),select,textarea):focus{border-color:var(--k-pink-2)!important;background:#fff!important;box-shadow:0 0 0 5px rgba(250,219,232,.7)!important;outline:0!important}
body :is(input,select,textarea):disabled{background:#f3f1f8!important;color:#8f8aa9!important;border-style:dashed!important}
body :is(input,textarea)::placeholder{color:#8f8aa9!important}
body input[type=checkbox],body input[type=radio]{accent-color:#e58fb6}
body .form label,body .login-card label{color:var(--k-ink)!important;font-weight:700!important}
body .form fieldset,body .tag-picker,body .calculator-extras,body .report-extras{background:var(--k-snow)!important;border:2px dashed var(--k-line)!important;border-radius:20px!important}
body .report-extras label,body .tag-picker label,body .onboarding-choice span,body .extra-item{background:#fff!important;border:2px solid var(--k-line)!important;border-radius:16px!important;color:var(--k-ink)!important;transition:transform .26s var(--k-ease),background-color .2s,border-color .2s!important}
body .report-extras label:hover,body .tag-picker label:hover{border-color:var(--k-outline)!important;transform:translateY(-2px)}
body .report-extras label:has(input:checked),body .tag-picker label:has(input:checked),body .onboarding-choice input:checked+span{background:var(--k-candy)!important;border-color:var(--k-outline)!important;box-shadow:0 3px 0 #b9b2d6!important}
body .report-extras strong,body .extra-item small{color:var(--k-bad)!important}
body pre.output{border-radius:16px!important}

/* ---------- Login ---------- */
body .login{background-color:var(--k-ground)!important;background-image:var(--k-dots)!important;background-size:30px 30px!important;background-position:0 0,15px 15px!important;animation:k-drift 50s linear infinite;grid-template-columns:minmax(0,1.15fr) minmax(360px,.7fr)!important}
body .login:before,body .login:after{display:none!important}
@keyframes k-drift{to{background-position:300px 300px,315px 315px}}
.yfx-hero{margin:0 0 6px;max-width:680px;padding:10px;border-radius:30px;background:#fff;border:2px solid var(--k-line);box-shadow:0 9px 0 #e8e4f7,0 24px 44px rgba(110,100,160,.16);animation:k-sway 6s ease-in-out infinite}
.yfx-hero img{display:block;width:100%;height:auto;border-radius:22px}
@keyframes k-sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(-.4deg) translateY(-6px)}}
body .login h1{margin:16px 0 8px!important;font-size:clamp(30px,3vw,42px)!important;line-height:1.3!important;background:none!important;-webkit-text-fill-color:currentColor!important;color:var(--k-ink)!important}
body .login h1 br{display:none}
body .login>section>p.muted{font-size:15px}
body .login .eyebrow{margin-top:0}
body .login-entry-selector{margin-top:22px!important;grid-template-columns:repeat(2,minmax(0,300px))!important;gap:14px!important}
body #roles.login-entry-selector button,body #staffRoles.staff-roles button{position:relative!important;padding:16px 18px 16px 66px!important;min-height:78px;border:2px solid var(--k-line)!important;border-radius:22px!important;background:#fff!important;color:var(--k-ink)!important;box-shadow:0 4px 0 #ece9f8!important;text-align:left!important;backdrop-filter:none!important}
body #roles.login-entry-selector button span{font-family:var(--k-font-cute);font-size:19px;font-weight:400}
body #roles.login-entry-selector button:before,body #staffRoles.staff-roles button:before{content:"";position:absolute;left:14px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:#f7f6fd var(--k-heart) center/22px no-repeat;border:2px solid var(--k-line-soft);transition:transform .3s var(--k-ease)}
body #roles.login-entry-selector button:before,body #staffRoles.staff-roles button:before{padding:0!important;right:auto!important;box-sizing:border-box;font-size:0!important;color:transparent!important}
body #roles.login-entry-selector .staff-toggle:before{background-image:var(--k-paw-blue)}
body #roles.login-entry-selector .staff-toggle:after{content:'+';float:none;position:absolute;right:16px;top:50%;width:26px;height:26px;margin-top:-13px;display:grid;place-items:center;border-radius:50%;background:var(--k-pink);border:2px solid var(--k-outline);color:var(--k-ink);font:700 16px/1 var(--k-font-num);transition:transform .3s var(--k-ease)}
body #roles.login-entry-selector .staff-toggle[aria-expanded="true"]:after{content:'−';transform:rotate(180deg)}
body #roles.login-entry-selector .staff-toggle{padding-right:52px!important}
body #staffRoles.staff-roles button:before{width:32px;height:32px;margin-top:-16px;background-size:18px;background-image:var(--k-paw-lilac)}
body #staffRoles.staff-roles .onboarding-entry:before{background-image:var(--k-sparkle)}
body #roles.login-entry-selector button:hover,body #staffRoles.staff-roles button:hover{border-color:var(--k-outline)!important;transform:translateY(-3px)}
body #roles.login-entry-selector button:hover:before,body #staffRoles.staff-roles button:hover:before{transform:rotate(-12deg) scale(1.08)}
body #roles.login-entry-selector button.selected,body #roles.login-entry-selector button[aria-expanded=true],body #staffRoles.staff-roles button.selected{background:var(--k-candy-soft)!important;border-color:var(--k-outline)!important;box-shadow:0 4px 0 #b9b2d6!important}
body #roles.login-entry-selector button.selected:before,body #staffRoles.staff-roles button.selected:before{background-color:#fff;border-color:var(--k-outline)}
body #roles.login-entry-selector small,body #staffRoles.staff-roles small{color:var(--k-muted)!important}
body .staff-roles{margin-top:12px!important;padding:14px!important;border:2px dashed var(--k-line)!important;border-radius:24px!important;background:rgba(255,255,255,.75)!important;box-shadow:none!important;animation:none!important}
body #staffRoles.staff-roles button{min-height:64px;padding-left:56px!important;border-radius:18px!important;animation:k-in .45s var(--k-ease) both}
body #staffRoles.staff-roles button:nth-child(2){animation-delay:.05s}body #staffRoles.staff-roles button:nth-child(3){animation-delay:.1s}body #staffRoles.staff-roles button:nth-child(4){animation-delay:.15s}body #staffRoles.staff-roles button:nth-child(5){animation-delay:.2s}
.yfx-login-side{position:relative;z-index:1;margin-top:96px;width:100%;max-width:460px;justify-self:center}
.yfx-login-side .yfx-chibi{position:absolute;right:-6px;top:-140px;width:144px;z-index:0;pointer-events:none;animation:k-bob 3.2s ease-in-out infinite}
.yfx-login-side .yfx-wing-l{position:absolute;left:-52px;top:42%;width:70px;transform-origin:right center;animation:k-flap-l 1.6s ease-in-out infinite;pointer-events:none}
.yfx-login-side .yfx-wing-r{position:absolute;right:-48px;top:48%;width:64px;transform-origin:left center;animation:k-flap-r 1.6s ease-in-out infinite;pointer-events:none}
@keyframes k-bob{50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes k-flap-l{50%{transform:rotate(-14deg)}}
@keyframes k-flap-r{50%{transform:rotate(14deg)}}
body .login-card{position:relative;z-index:1;padding:34px 32px 26px!important;border:2px solid var(--k-line)!important;border-radius:28px!important;background:#fff!important;box-shadow:0 0 0 6px rgba(255,255,255,.85),0 9px 0 #e8e4f7,0 24px 40px rgba(110,100,160,.14)!important;overflow:visible!important}
body .login-card:before,body .login-card:after,body .yfx-ears:before,body .yfx-ears:after{content:""!important;position:absolute!important;top:-15px!important;bottom:auto!important;width:30px!important;height:30px!important;background:linear-gradient(135deg,#fadbe8 0 34%,#fff 34%)!important;border:2px solid var(--k-line)!important;border-right:0!important;border-bottom:0!important;border-radius:10px 0 0 0!important;transform:rotate(45deg);opacity:1!important;inset:auto!important;top:-15px!important}
body .login-card:before,body .yfx-ears:before{left:40px!important;right:auto!important}
body .login-card:after,body .yfx-ears:after{right:40px!important;left:auto!important}
body .login-card:hover:before,body .yfx-ears:hover:before{animation:k-ear-l .5s ease}
body .login-card:hover:after,body .yfx-ears:hover:after{animation:k-ear-r .5s ease .05s}
@keyframes k-ear-l{30%{transform:rotate(30deg)}60%{transform:rotate(52deg)}}
@keyframes k-ear-r{30%{transform:rotate(60deg)}60%{transform:rotate(38deg)}}
body .login-card h2{font-size:30px!important;margin-bottom:14px!important}
body .login-card input{min-height:50px!important;border-radius:18px!important}
body .login-card>button{min-height:52px!important;border-radius:18px!important;font-size:15px!important}
body .login-card.yfx-shake{animation:k-shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes k-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

/* ---------- App shell ---------- */
body #app{grid-template-columns:272px minmax(0,1fr)!important;background:transparent!important}
body #app>aside{margin:16px 0 16px 16px!important;top:16px!important;height:calc(100vh - 32px)!important;padding:24px 14px 22px!important;border:2px solid var(--k-line)!important;border-radius:28px!important;background:#fff!important;box-shadow:0 0 0 5px rgba(255,255,255,.85),0 7px 0 #e8e4f7,0 18px 32px rgba(110,100,160,.1)!important;scrollbar-color:#d6d0ec transparent!important}
body #app>aside:after{display:none!important}
body .brand{display:inline-block;padding:0 8px;font-size:0!important;text-decoration:none}
body .brand span{display:inline-block;font-family:var(--k-font-cute)!important;font-size:30px!important;font-weight:400!important;line-height:1.15;letter-spacing:0!important;background:linear-gradient(180deg,#f5b8d2 0%,#fde4ef 46%,#d4ebfa 54%,#9fd0f0 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-stroke:1.1px #7d779c;filter:drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(0 4px 0 #ddd8f0)}
body .role-title{position:relative;margin:24px 6px 8px!important;padding:11px 14px!important;border:2px solid var(--k-outline)!important;border-radius:16px!important;background:var(--k-snow)!important;color:var(--k-ink)!important;font-weight:700;text-align:center}
body .role-title:before,body .role-title:after{content:"";position:absolute;top:-9px;width:14px;height:14px;background:var(--k-snow);border:2px solid var(--k-outline);border-right:0;border-bottom:0;border-radius:4px 0 0 0;transform:rotate(45deg)}
body .role-title:before{left:18px}body .role-title:after{right:18px}
body #app>aside nav{gap:3px!important}
body #app>aside nav button,body #app>aside nav button.subnav{display:flex!important;align-items:center;justify-content:space-between;gap:8px;min-height:42px!important;padding:0 14px!important;border:2px solid transparent!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:var(--k-ink)!important;font-size:14px!important;font-weight:600!important}
body #app>aside nav button.subnav{margin-left:10px!important;width:calc(100% - 10px);padding-left:16px!important;border-left:2px dotted var(--k-line)!important;border-radius:0 999px 999px 0!important;font-size:13px!important}
body #app>aside nav button:hover{background:#f3f1fc!important;transform:translateX(4px)}
body #app>aside nav button.active{background:var(--k-candy)!important;border-color:var(--k-outline)!important;font-weight:700!important;animation:k-pill .4s var(--k-ease)}
body #app>aside nav button.subnav.active{border-left:2px solid var(--k-outline)!important}
body #app>aside nav button.active:before{content:none!important;display:none!important}
body #app>aside nav button.active:after{content:"";flex:0 0 18px;width:18px;height:18px;margin-left:auto;background:var(--k-paw) center/contain no-repeat;animation:k-stamp .45s var(--k-ease) both}
@keyframes k-pill{from{transform:scaleX(.86)}to{transform:none}}
@keyframes k-stamp{from{transform:scale(2.2) rotate(-30deg);opacity:0}to{transform:rotate(12deg);opacity:1}}
body #app>aside .nav-group-label{display:flex!important;align-items:center;gap:6px;margin:16px 12px 4px!important;font-family:var(--k-font-cute);font-size:14px!important;font-weight:400!important;letter-spacing:0!important;color:var(--k-muted)!important}
body #app>aside .nav-group-label:before{content:"";width:14px;height:14px;background:var(--k-heart) center/contain no-repeat}
body .nav-count{display:inline-flex!important;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px!important;background:var(--k-pink-2)!important;border:2px solid var(--k-outline)!important;color:var(--k-ink)!important;font:700 12px/1 var(--k-font-num)!important;animation:k-beat 1.3s ease-in-out infinite}
body .nav-count[hidden]{display:none!important}
@keyframes k-beat{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.16)}28%{transform:scale(1.04)}}
body #app>aside .secondary{min-height:44px!important;border-radius:16px!important}
body .workspace{padding-top:30px!important}
body .workspace>header{border-bottom:2px dotted var(--k-line)!important;gap:14px}
body .workspace>header h2{font-size:32px!important}
body .workspace>header #user{padding:6px 16px;border-radius:999px;background:#fff;border:2px solid var(--k-line);box-shadow:0 3px 0 #ece9f8;line-height:1.35;color:var(--k-ink)}
.yfx-header-tools{display:flex;align-items:center;gap:12px;margin-left:auto}
body #yfxMute.yfx-mute{display:inline-flex!important;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0!important;border-radius:50%!important;background:#fff!important;border:2px solid var(--k-line)!important;box-shadow:0 3px 0 #ece9f8!important;color:var(--k-ink)!important}
body #yfxMute.yfx-mute:hover{border-color:var(--k-outline)!important;transform:rotate(-10deg)!important}
body #yfxMute.yfx-mute svg{width:20px;height:20px}
.yfx-mute-float{position:fixed;top:22px;right:22px;z-index:15}

/* ---------- Page content ---------- */
/* "backwards" (not "both"): a lingering animated transform would turn these wrappers into the
   containing block of the position:fixed modals that app.js mounts inside them. */
body #content>*{animation:k-in .5s var(--k-ease) backwards}
body #content>*:nth-child(2){animation-delay:.05s}body #content>*:nth-child(3){animation-delay:.1s}body #content>*:nth-child(4){animation-delay:.15s}body #content>*:nth-child(5){animation-delay:.2s}body #content>*:nth-child(n+6){animation-delay:.25s}
@keyframes k-in{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
body .page-head h3{font-size:30px!important}
body .group-heading h3{font-size:22px!important}
body .section-title h3{font-size:21px!important}
body .step-no{display:inline-grid!important;place-items:center;min-width:36px;height:36px;padding:0 6px;border-radius:50%!important;background:var(--k-candy)!important;border:2px solid var(--k-outline)!important;color:var(--k-ink)!important;font-family:var(--k-font-cute)!important;font-weight:400!important;box-shadow:none!important}
body .soft-badge{border-radius:999px!important;background:var(--k-bad-bg)!important;border:2px solid #f2b9d2!important;color:var(--k-ink)!important;font-weight:700}
body .chip{border-radius:999px!important;border:2px solid var(--k-line)!important;background:#f3f1fc!important;color:var(--k-ink)!important}
body .chip.pink{background:var(--k-bad-bg)!important;border-color:#f2b9d2!important}
body .chip.blue{background:#eaf5fd!important;border-color:#b6dbf3!important}
body .status{display:inline-flex;align-items:center;gap:5px;padding:3px 10px!important;border-radius:999px!important;border:2px solid var(--k-line)!important;background:#f3f1fc!important;color:var(--k-muted)!important;font-weight:700!important;white-space:nowrap}
body .status:before{content:"";width:9px;height:9px;flex:0 0 9px;background:currentColor;-webkit-mask:var(--k-heart) center/contain no-repeat;mask:var(--k-heart) center/contain no-repeat}
body .status.ok{background:var(--k-ok-bg)!important;border-color:var(--k-ok-line)!important;color:var(--k-ok)!important}
body .status.pending{background:var(--k-bad-bg)!important;border-color:#f2b9d2!important;color:var(--k-bad)!important}
body .status.pending:before{animation:k-beat 1.3s ease-in-out infinite}

body .cards>.card{animation:k-in .5s var(--k-ease) backwards}
body .cards>.card:nth-child(2){animation-delay:.05s}body .cards>.card:nth-child(3){animation-delay:.1s}body .cards>.card:nth-child(4){animation-delay:.15s}body .cards>.card:nth-child(5){animation-delay:.2s}body .cards>.card:nth-child(6){animation-delay:.25s}body .cards>.card:nth-child(n+7){animation-delay:.3s}
body #content .card,body .card{border:2px solid var(--k-line-soft)!important;border-radius:22px!important;background:#fff!important;box-shadow:0 5px 0 #efecf9!important;color:var(--k-ink)!important;transition:transform .3s var(--k-ease),border-color .2s,box-shadow .2s}
body #content .card:hover{transform:translateY(-4px) rotate(-.4deg);border-color:#b9b2d6!important;box-shadow:0 8px 0 #e6e1f8!important}
body .card:after{content:""!important;right:14px!important;top:14px!important;left:auto!important;width:20px!important;height:20px!important;border-radius:0!important;background:var(--k-sparkle) center/contain no-repeat!important;opacity:.9!important;transition:transform .35s var(--k-ease)}
body .cards>.card:nth-child(even):after{background-image:var(--k-sparkle-pink)!important}
body #content .card:hover:after{transform:rotate(-16deg) scale(1.2)}
body .card .label{font-weight:700!important;font-size:12px!important}
body .card .value{font-family:var(--k-font-num)!important;font-weight:700!important;color:var(--k-ink)!important;font-variant-numeric:tabular-nums}
body #content .company-cash-card{overflow:visible!important;background:var(--k-candy)!important;border-color:var(--k-outline)!important;box-shadow:0 5px 0 #b9b2d6!important}
body #content .company-cash-card:before,body #content .company-cash-card:after{content:""!important;position:absolute!important;top:-14px!important;right:auto;width:26px!important;height:26px!important;background:linear-gradient(135deg,#fadbe8 0 34%,#d4ebfa 34%)!important;border:2px solid var(--k-outline)!important;border-right:0!important;border-bottom:0!important;border-radius:8px 0 0 0!important;transform:rotate(45deg)!important;opacity:1!important}
body #content .company-cash-card:before{left:24px!important}
body #content .company-cash-card:after{left:auto!important;right:24px!important;background:linear-gradient(135deg,#fadbe8 0 34%,#fadbe8 34%)!important}
body #content .company-cash-card:hover{transform:translateY(-4px)}

body #content .panel,body .panel,body #content .recent-recharges,body #content .recent-dispatches,body #content .tag-editor,body #content .cascade-status,body #content .finance-before{border:2px solid var(--k-line)!important;border-radius:24px!important;background:#fff!important;box-shadow:0 6px 0 #e8e4f7,0 16px 30px rgba(110,100,160,.08)!important;color:var(--k-ink)!important}
body .recent-recharge-list>article,body .recent-dispatch-list>article,body .birthday-reminder-item,body .binding-members>div,body .task-route>div,body .report-locked>div,body .settlement-summary>div,body .payment-contact,body .calculator-result>div,body .calculator-person,body .calculator-person-base{border:2px solid var(--k-line-soft)!important;border-radius:18px!important;background:#fff!important;transition:transform .26s var(--k-ease),border-color .2s}
body .recent-recharge-list>article:hover,body .recent-dispatch-list>article:hover{transform:translateX(4px);border-color:var(--k-line)!important}
body .task-route>div,body .report-locked>div,body .settlement-summary>div{background:var(--k-ground)!important}
body .birthday-reminder-item .birthday-gift{border-radius:50%!important;background:var(--k-candy)!important;border:2px solid var(--k-outline)!important;color:var(--k-ink)!important;font-family:var(--k-font-cute)}
body #content .cascade-status{border-style:dashed!important}

/* Tables */
body .table-shell{overflow:hidden}
body .table th,body .matrix-table thead th,body .modal-order-table th{background:var(--k-candy-soft)!important;color:var(--k-ink)!important;font-weight:700!important;border-color:var(--k-line-soft)!important}
body .table td,body .matrix-table td,body .matrix-table th{border-color:var(--k-line-soft)!important;border-style:dotted!important}
body .table tbody tr{transition:background-color .16s ease,box-shadow .16s ease}
body .table tbody tr:hover{background:#fdf3f8!important;box-shadow:inset 4px 0 0 var(--k-pink-2)}
body .table-toolbar,body .pagination-bar,body .review-tabs{background:var(--k-snow)!important;border:2px solid var(--k-line-soft)!important;border-radius:20px!important;color:var(--k-muted)!important}
body .table-toolbar input{border-radius:999px!important}
body .pagination-bar button{min-width:38px;border-radius:12px!important}
body .pagination-bar .pagination-current{color:var(--k-ink)!important}
body .review-tabs button strong{background:var(--k-pink-2)!important;border:2px solid var(--k-outline);color:var(--k-ink)!important;font-family:var(--k-font-num)}

/* Companion task tickets */
body .companion-task{position:relative;border:2px solid var(--k-line)!important;border-radius:24px!important;background:#fff!important;box-shadow:0 6px 0 #e8e4f7!important;transition:transform .3s var(--k-ease),box-shadow .2s!important}
body .companion-task:hover{transform:translateY(-5px) rotate(.6deg);box-shadow:0 10px 0 #e2ddf4!important}
body .companion-task:after{content:"";position:absolute;right:16px;top:16px;width:28px;height:28px;background:var(--k-paw) center/contain no-repeat;transition:transform .35s var(--k-ease)}
body .companion-task:nth-child(3n+2):after{background-image:var(--k-paw-blue)}body .companion-task:nth-child(3n):after{background-image:var(--k-paw-lilac)}
body .companion-task:hover:after{transform:rotate(-18deg) scale(1.2)}
body .companion-task .task-head{padding-right:40px}
body .companion-task h3{font-size:24px!important}
body .companion-task .task-note{border-top:2px dashed var(--k-line-soft)!important;padding-top:12px}

/* Leaderboard */
body .leaderboard-row{border:2px solid transparent!important;border-radius:18px!important;background:transparent!important;box-shadow:none!important;transition:background-color .2s,border-color .2s}
body .leaderboard-row:hover{background:#fdf6fa!important;border-color:#f6dbe7!important}
body .leaderboard-rank{border-radius:50%!important;background:#f3f1fc!important;border:2px solid var(--k-line)!important;color:var(--k-ink)!important;font-family:var(--k-font-num)!important}
body .leaderboard-row.rank-1 .leaderboard-rank{background:#fff4c9!important;border-color:var(--k-outline)!important}
body .leaderboard-row.rank-2 .leaderboard-rank{background:var(--k-sky)!important;border-color:var(--k-outline)!important}
body .leaderboard-row.rank-3 .leaderboard-rank{background:var(--k-pink)!important;border-color:var(--k-outline)!important}
body .leaderboard-track{height:12px!important;border-radius:999px!important;background:#ece9f8!important;overflow:hidden}
body .leaderboard-track i{border-radius:999px!important;background:linear-gradient(90deg,#9fd0f0,#f2a7c6)!important;transform-origin:left;animation:k-fill 1s var(--k-ease) both}
@keyframes k-fill{from{transform:scaleX(0)}to{transform:none}}

/* Empty & loading */
body #content .empty{position:relative;padding:118px 20px 30px!important;border:2px dashed var(--k-line)!important;border-radius:24px!important;background:var(--k-snow)!important;box-shadow:none!important;color:var(--k-muted)!important;font-family:var(--k-font-cute);font-size:17px;text-align:center}
body #content .empty:before{content:"";position:absolute;left:50%;top:18px;width:84px;height:92px;margin-left:-42px;background:url("/assets/yfx/chibi-small.png") center/contain no-repeat;animation:k-bob 3.2s ease-in-out infinite}
body #content .loading{position:relative;padding:86px 20px 34px!important;border:2px dashed var(--k-line)!important;border-radius:24px!important;background:var(--k-snow)!important;box-shadow:none!important;color:var(--k-muted)!important;font-family:var(--k-font-cute);font-size:17px}
body #content .loading:before{content:"";position:absolute;left:50%;top:26px;width:120px;height:36px;margin-left:-60px;background:var(--k-paw) 0 50%/32px no-repeat,var(--k-paw-blue) 50% 50%/32px no-repeat,var(--k-paw-lilac) 100% 50%/32px no-repeat;animation:k-hop 1s ease-in-out infinite}
@keyframes k-hop{0%,60%,100%{transform:none}30%{transform:translateY(-12px)}}

/* ---------- Modals ---------- */
body .modal-backdrop,body .attachment-lightbox{background:rgba(138,132,168,.3)!important;backdrop-filter:blur(6px);animation:k-fade .22s ease both}
@keyframes k-fade{from{opacity:0}to{opacity:1}}
body .modal-backdrop>article,body .settlement-modal,body .report-modal,body .settlement-confirm-modal,body .credential-modal,body .password-change-modal,body .impact-preview-modal,body .order-review-modal{border:2px solid var(--k-line)!important;border-radius:28px!important;background:#fff var(--k-paw-lilac) right 64px top 22px/26px no-repeat!important;box-shadow:0 0 0 6px rgba(255,255,255,.85),0 9px 0 #e8e4f7,0 30px 60px rgba(74,69,104,.22)!important;color:var(--k-ink)!important}
body .modal-backdrop>article{animation:k-up .45s var(--k-ease) both}
@keyframes k-up{from{opacity:0;transform:translateY(60px) scale(.9)}to{opacity:1;transform:none}}
body .modal-close{width:38px!important;height:38px!important;border-radius:50%!important;border:2px solid var(--k-line)!important;background:#fff!important;color:var(--k-ink)!important;box-shadow:none!important;transition:transform .3s var(--k-ease)!important}
body .modal-close:hover{transform:rotate(90deg)!important;border-color:var(--k-outline)!important}
body .confirm-icon{position:relative;border-radius:50%!important;background:var(--k-candy)!important;border:2px solid var(--k-outline)!important;color:var(--k-ink)!important;font-family:var(--k-font-num)!important;box-shadow:none!important}
body .confirm-icon:before{content:"";position:absolute;left:50%;top:-16px;width:34px;height:34px;margin-left:-17px;border-radius:50%;border:3px solid #f3df9a;box-shadow:0 0 8px #fbeec0;animation:k-halo 3s linear infinite;pointer-events:none}
@keyframes k-halo{0%{transform:translateY(0) rotateX(68deg) rotateZ(0)}50%{transform:translateY(-4px) rotateX(68deg) rotateZ(180deg)}100%{transform:translateY(0) rotateX(68deg) rotateZ(360deg)}}
body .confirm-icon::after{color:var(--k-ink)}
body .settlement-confirm-modal:has(.danger-outline) .confirm-icon{background:var(--k-bad-bg)!important;border-color:#e07ea3!important;animation:k-wobble .5s ease .2s}
body .settlement-confirm-modal:has(.danger-outline) .confirm-icon::after{content:'!';color:var(--k-bad);font-weight:700}
body .settlement-confirm-modal:has(.danger-outline) .confirm-icon:before{display:none}
@keyframes k-wobble{25%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-4deg)}}
body .confirm-copy{color:var(--k-ink)!important}
body .floating-calculator{border:2px solid var(--k-line)!important;border-radius:24px!important;background:#fff!important;box-shadow:0 6px 0 #e8e4f7,0 24px 50px rgba(74,69,104,.2)!important}
body .floating-calculator>header{background:var(--k-candy-soft)!important;border-color:var(--k-line-soft)!important}
body .calculator-grand-total{background:var(--k-candy)!important;color:var(--k-ink)!important;border:2px solid var(--k-outline)}
body button.calculator-edge-toggle{border-radius:18px 0 0 18px!important}

/* ---------- Toast: cat-ear bubble that drops in from the top right ---------- */
body #toast{top:28px!important;right:24px!important;bottom:auto!important;z-index:60!important;min-width:240px;max-width:calc(100vw - 48px);box-sizing:border-box;padding:14px 18px 18px 50px!important;border:2px solid var(--k-outline)!important;border-radius:18px!important;color:var(--k-ink)!important;font-weight:700;box-shadow:0 5px 0 #d6d0ec!important;transform-origin:top center;background:var(--k-heart) 16px 50%/22px no-repeat,linear-gradient(90deg,#9fd0f0,#f2a7c6) 14px calc(100% - 6px)/calc(100% - 28px) 3px no-repeat,#fff!important}
body #toast.error-toast{background:var(--k-paw-lilac) 16px 50%/22px no-repeat,linear-gradient(90deg,#d6d0ec,#f0b3c8) 14px calc(100% - 6px)/calc(100% - 28px) 3px no-repeat,#fff!important;border-color:#e07ea3!important}
body #toast:before,body #toast:after{content:"";position:absolute;top:-9px;width:16px;height:16px;background:#fff;border:2px solid var(--k-outline);border-right:0;border-bottom:0;border-radius:5px 0 0 0;transform:rotate(45deg)}
body #toast.error-toast:before,body #toast.error-toast:after{border-color:#e07ea3}
body #toast:before{left:22px}body #toast:after{right:22px}
body #toast.show{animation:k-swing .8s var(--k-ease) both,k-countdown 3.5s linear both}
@keyframes k-swing{0%{transform:translateY(-90px)}35%{transform:translateY(0) rotate(-7deg)}60%{transform:rotate(4deg)}80%{transform:rotate(-1.5deg)}100%{transform:none}}
@keyframes k-countdown{from{background-size:22px,calc(100% - 28px) 3px,auto}to{background-size:22px,0 3px,auto}}

/* Floating hearts spawned by yumi-fx.js after successful actions. */
.yfx-heart{position:fixed;z-index:70;width:24px;height:24px;pointer-events:none;background:var(--k-heart) center/contain no-repeat;animation:k-rise 1.4s ease-out both}
.yfx-heart.b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' fill='%239fd0f0' stroke='%238a84a8' stroke-width='1.6'/%3E%3C/svg%3E")}
.yfx-heart.p{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z' fill='%23f2a7c6' stroke='%238a84a8' stroke-width='1.6'/%3E%3C/svg%3E")}
@keyframes k-rise{from{transform:translateY(16px) scale(.4);opacity:0}25%{opacity:1}to{transform:translate(var(--dx,0),-110px) scale(1.1);opacity:0}}

/* ---------- Public onboarding ---------- */
body .public-onboarding{background-color:var(--k-ground)!important;background-image:var(--k-dots)!important;background-size:30px 30px!important}
body .public-onboarding-shell{border:2px solid var(--k-line)!important;border-radius:28px!important;box-shadow:0 0 0 6px rgba(255,255,255,.85),0 9px 0 #e8e4f7,0 24px 44px rgba(110,100,160,.14)!important}
body .onboarding-upload-grid label,body .onboarding-attachment-card{border:2px dashed var(--k-line)!important;border-radius:20px!important;background:var(--k-snow)!important}

/* ---------- Neutralise app.css "#app #content :is(...)" resets ----------
   app.css forces white backgrounds, blue-grey borders and #263d5d text on every block inside
   #content with (2,1,x) specificity. "#app#app" lifts these overrides just above it. */
body #app#app #content :is(article,fieldset,.panel,.card,.tag-editor,.finance-before,.cascade-status,.empty,.loading,.review-tabs,.pagination-bar,.table-toolbar,.recent-recharges,.recent-dispatches,.recent-recharge-list>article,.recent-dispatch-list>article,.onboarding-account-fields,.initial-recharge,.recharge-preview,.trend-chart,.task-route>div,.report-locked>div,.settlement-summary>div,.payment-contact,.calculator-result>div,.calculator-person,.calculator-person-base,.modal-order-table,.binding-members>div){border-color:var(--k-line-soft)!important}
body #app#app #content :is(article,fieldset,.panel,.card,.tag-editor,.finance-before,.cascade-status,.empty,.loading,.review-tabs,.pagination-bar,.table-toolbar,.recent-recharges,.recent-dispatches,.recent-recharge-list>article,.recent-dispatch-list>article,.onboarding-account-fields,.initial-recharge,.recharge-preview,.trend-chart,.task-route>div,.report-locked>div,.settlement-summary>div,.payment-contact,.calculator-result>div,.calculator-person,.calculator-person-base,.modal-order-table,.binding-members>div) :not(button,button *,svg,svg *,path,i){color:var(--k-ink)!important}
body #app#app #content :is(article,fieldset,.panel,.card,.tag-editor,.finance-before,.cascade-status,.empty,.loading,.review-tabs,.pagination-bar,.table-toolbar,.recent-recharges,.recent-dispatches,.recent-recharge-list>article,.recent-dispatch-list>article,.onboarding-account-fields,.initial-recharge,.recharge-preview,.trend-chart,.task-route>div,.report-locked>div,.settlement-summary>div,.payment-contact,.calculator-result>div,.calculator-person,.calculator-person-base,.modal-order-table,.binding-members>div) :is(.label,.hint,.muted,.detail-sub,.field-hint,.eyebrow,.task-note,.recent-recharge-list span,.recent-dispatch-list span){color:var(--k-muted)!important}
body #app#app #content .status{color:var(--k-muted)!important}
body #app#app #content .status.ok{color:var(--k-ok)!important}
body #app#app #content .status.pending{color:var(--k-bad)!important}
body #app#app #content :is(.error,.report-extras strong,.expected-income,.balance-emphasis){color:var(--k-bad)!important}
body #app#app #content .company-cash-card{background-color:transparent!important;background-image:var(--k-candy)!important;border-color:var(--k-outline)!important}
body #app#app #content :is(.empty,.loading,.review-tabs,.pagination-bar,.table-toolbar,.cascade-status,.recharge-preview,.initial-recharge){background-color:var(--k-snow)!important}
body #app#app #content :is(.task-route>div,.report-locked>div,.settlement-summary>div,.calculator-result>div,.payment-contact,.binding-members>div){background-color:var(--k-ground)!important}
body #app#app #content :is(.panel,.recent-recharges,.recent-dispatches,.tag-editor){border-color:var(--k-line)!important}
body #app#app #content .modal-backdrop>article{border-color:var(--k-line)!important;background-image:var(--k-paw-lilac)!important;background-position:right 64px top 22px!important;background-size:26px!important;background-repeat:no-repeat!important}
body #app#app #content .leaderboard-row{background-color:transparent!important;border-color:transparent!important}
body #app#app #content .leaderboard-row:hover{background-color:#fdf6fa!important;border-color:#f6dbe7!important}
body #app#app #content .recent-recharge-list>article:hover,body #app#app #content .recent-dispatch-list>article:hover{border-color:var(--k-line)!important}
body #app#app #content .card:hover{border-color:#b9b2d6!important}

@media(max-width:760px){
  body #app{grid-template-columns:1fr!important}
  body #app>aside{margin:12px!important;height:auto!important;position:relative!important;top:0!important}
  .yfx-login-side{margin-top:110px}
  .yfx-login-side .yfx-wing-l,.yfx-login-side .yfx-wing-r{display:none}
  body .login-entry-selector{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}