/* Mascot loaders (any pack whose theme has a mascot) + the "bluto" style variant (theme.yaml → style: bluto).
   Everything for the variant is scoped under .style-bluto, so other client packs are not affected. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* ---------- mascot loaders ---------- */
.bs-loader.mascot{gap:10px}
.bs-loader .mhop{width:150px;height:auto;animation:mhop 1.1s cubic-bezier(.3,.7,.4,1) infinite;transform-origin:50% 100%;filter:drop-shadow(0 16px 12px rgba(0,0,0,.28))}
.bs-loader .mshadow{display:block;width:96px;height:14px;border-radius:50%;background:rgba(0,0,0,.28);margin-top:-12px;animation:mshadow 1.1s cubic-bezier(.3,.7,.4,1) infinite}
.bs-loader .mprog{width:220px;height:7px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.bs-loader .mprog i{display:block;height:100%;width:40%;border-radius:9px;background:linear-gradient(90deg,var(--steel),#FFD666);animation:mprog 1.4s ease-in-out infinite}
#bs-splash .bs-loader.mascot .bn{font-size:24px;margin-top:6px}
#bs-splash .bs-loader.mascot .cap{letter-spacing:.1em}
.bs-loader.mascot:not(.inline) .cap:after{content:""}
/* in-page loader with the mascot (loaderHtml) */
.bs-loader.mascot.page .mhop{width:110px}
.bs-loader.mascot.page .mprog{background:var(--orange-bg)}
.bs-loader.inline.mascot{flex-direction:row;gap:14px;padding:12px 16px;border-radius:14px;background:var(--orange-bg);border:0}
.bs-loader.inline.mascot .mhop{width:46px;filter:none;animation-duration:.9s}
.bs-loader.inline.mascot .mshadow,.bs-loader.inline.mascot .mprog{display:none}
@keyframes mhop{0%,100%{transform:translateY(0) scale(1.04,.96)}45%{transform:translateY(-26px) scale(.97,1.03)}60%{transform:translateY(-22px) rotate(-3deg)}}
@keyframes mshadow{0%,100%{transform:scale(1);opacity:1}45%{transform:scale(.6);opacity:.45}}
@keyframes mprog{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}

/* ---------- profile menu, developer panel, schedule editor (all packs) ---------- */
.profbtn{align-self:center;flex:none;display:flex;align-items:center;gap:9px;height:40px;padding:0 12px 0 4px;border-radius:999px;border:1px solid var(--graphite3);background:var(--graphite2);color:#fff;font:600 13.5px var(--body);cursor:pointer;white-space:nowrap}
.profbtn .av,.profmenu .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--orange);color:#fff;flex:none}
.style-bluto .profbtn .av{background:var(--steel);color:var(--graphite)}
.profbtn svg{opacity:.7}
.profmenu{position:fixed;top:64px;right:20px;width:320px;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 24px 60px -18px rgba(12,26,58,.45);z-index:90;animation:bsup .25s var(--ease) both}
.profmenu .me{display:flex;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line2)}
.profmenu .me .av{width:44px;height:44px;font-size:17px;background:var(--orange);color:#fff}
.profmenu .me b{display:block;font-size:15.5px;color:var(--ink)}.profmenu .me small{color:var(--ink2);font-size:12.5px;word-break:break-all}
.profmenu .me em{display:inline-block;margin-top:4px;font:700 10px var(--mono);font-style:normal;padding:2px 7px;background:var(--orange-bg);color:var(--orange-d)}
.profmenu .it{display:flex;align-items:center;gap:12px;width:100%;padding:12px 18px;border:0;background:none;text-align:left;font:600 14px var(--body);color:var(--ink);cursor:pointer}
.profmenu .it:hover{background:var(--orange-t1)}
.profmenu .it svg{color:var(--ink2);flex:none}.profmenu .it .g{flex:1}
.profmenu .it small{display:block;font-weight:500;font-size:12px;color:var(--ink3);margin-top:2px}
.profmenu .it .ed{color:var(--orange-d);font-weight:700;font-size:13px}
.profmenu .sep{border-top:1px solid var(--line2)}
.tgl{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:999px;background:#3A4E7A;position:relative;cursor:pointer;flex:none;transition:background .2s;margin:0}
.tgl:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.tgl:checked{background:var(--steel)}.tgl:checked:after{transform:translateX(20px)}
.tgl:disabled{opacity:.5;cursor:wait}
.mbox .tgl{background:#CBD3E1}.mbox .tgl:checked{background:var(--orange)}
.sched .f{margin-bottom:16px}.sched .f>label{display:block;font-weight:700;font-size:13.5px;margin-bottom:7px}
.sched .in{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sched input[type=number],.sched input[type=time],.sched select{height:40px;border:1.5px solid var(--line);padding:0 10px;font:600 14px var(--body);background:#fff;color:var(--ink)}
.sched input[type=number]{width:90px}
.sched .seg{display:flex;border:1.5px solid var(--line)}.sched .seg button{border:0;border-right:1.5px solid var(--line);background:#fff;padding:0 14px;height:37px;font:600 13px var(--body);cursor:pointer;color:var(--ink)}
.sched .seg button:last-child{border-right:0}.sched .seg button.on{background:var(--orange);color:#fff}
.sched .days button{width:46px;height:38px;border:1.5px solid var(--line);background:#fff;font:700 13px var(--body);cursor:pointer;color:var(--ink)}
.sched .days button.on{background:var(--orange);border-color:var(--orange);color:#fff}
.sched .hint{font-size:12px;color:var(--ink3);margin-top:5px}
.sched .tl{background:var(--orange-t1);padding:14px 16px;margin-top:6px}
.sched .tl .t{display:flex;gap:12px;align-items:center;font-size:13px;margin:8px 0}
.sched .tl .t i{width:11px;height:11px;border-radius:50%;flex:none;background:var(--orange)}
.sched .tl .t.follow_up i{background:var(--steel)}.sched .tl .t.compare i{background:var(--ok)}
.sched .tl .t b{width:150px;font:700 11.5px var(--mono);flex:none}
.sched .err{color:var(--red);font-size:13px;margin-top:8px}

/* sign-out row with the "clear workspace data" bin */
.profmenu .outrow{display:flex;align-items:stretch}.profmenu .outrow .it{flex:1}
.profmenu .binb{width:56px;border:0;border-left:1px solid var(--line2);background:none;color:var(--ink3);cursor:pointer;display:grid;place-items:center}
.profmenu .binb:hover{background:var(--redbg);color:var(--red)}
.resetbox p{margin:0 0 14px;line-height:1.55}
.resetbox .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.resetbox .cols>div{background:var(--panel2);border:1px solid var(--line2);padding:10px 14px}
.resetbox .cols>div:first-child{background:var(--redbg);border-color:#F1B7B1}
.resetbox small{font:700 10.5px var(--mono);letter-spacing:.08em;color:var(--ink3)}
.resetbox ul{margin:6px 0 0;padding-left:18px;font-size:13.5px;line-height:1.7}
.resetbox label{display:block;font-size:13.5px;margin-bottom:6px}
.resetbox input{width:100%;height:42px;border:1.5px solid var(--line);padding:0 12px;font:700 15px var(--mono);letter-spacing:.1em}
.resetbox .err{color:var(--red);font-size:13px;margin-top:8px}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}.btn.danger:disabled{opacity:.45}
.resetting{position:fixed;inset:0;z-index:200;background:var(--graphite);display:grid;place-items:center;color:#fff}.resetting .cap{color:#AFC0E3}
.style-bluto .resetbox .cols>div,.style-bluto .resetbox input{border-radius:12px}

/* ---------- "bluto" variant of the layout: rounded, friendly, same structure ---------- */
.style-bluto body{font-family:"Plus Jakarta Sans",system-ui,sans-serif}
.style-bluto .pn,.style-bluto .mbox,.style-bluto .bellpop,.style-bluto .banner{border-radius:16px;overflow:hidden}
.style-bluto .mbox{border:0;box-shadow:0 30px 70px -24px rgba(12,26,58,.55)}
.style-bluto .btn{border-radius:999px;text-transform:none;letter-spacing:0;font-weight:700}
.style-bluto .btn.sm{border-radius:999px}
.style-bluto .tag,.style-bluto .pill-state{border-radius:6px}
.style-bluto .sg{border-radius:14px}
.style-bluto .nav{box-shadow:0 2px 0 var(--steel)}
.style-bluto .tabs a.on{border-bottom-color:var(--steel)}
.style-bluto .newp{background:var(--steel);border-color:var(--steel);color:var(--graphite)}
.style-bluto .profmenu{border-radius:18px;overflow:hidden}
.style-bluto .profmenu .me em{border-radius:5px}
.style-bluto .sched input,.style-bluto .sched select,.style-bluto .sched .seg,.style-bluto .sched .days button,.style-bluto .sched .tl{border-radius:10px}
.style-bluto .sched .seg{overflow:hidden}
.style-bluto .sheet .site{opacity:.85}
.style-bluto .sheet .mascot-peek{position:absolute;right:28px;bottom:6px;width:86px;z-index:1;animation:mhop 3s ease-in-out infinite;transform-origin:50% 100%}
@media (max-width:900px){.style-bluto .sheet .mascot-peek{display:none}}

/* Command center + top bar in the bluto variant: same shapes everywhere (round controls, pill buttons, soft cards) */
.style-bluto .nav .iconb{border-radius:50%;border-color:var(--graphite3);background:var(--graphite2)}
.style-bluto .iconb b{min-width:18px;height:18px;padding:0 5px;border-radius:999px;top:-3px;right:-4px;background:var(--steel);color:var(--graphite);font:800 10.5px/18px var(--body);text-align:center;box-shadow:0 0 0 2px var(--graphite)}
.style-bluto .agentst{border-radius:999px}
.style-bluto .bigbtn{border-radius:999px;text-transform:none;letter-spacing:0;font:700 15px var(--body);padding:13px 24px;box-shadow:0 12px 24px -12px rgba(var(--orange-rgb),.75)}
.style-bluto .bigbtn.ghost{box-shadow:none}
.style-bluto .cta small{letter-spacing:.12em}
.style-bluto .kpis,.style-bluto .pipe{border-radius:16px;overflow:hidden}
.style-bluto .chip{border-radius:999px;text-transform:none;letter-spacing:0;font:600 12.5px var(--body);padding:6px 12px}
.style-bluto .srch{border-radius:999px;padding:0 14px}
.style-bluto .tag,.style-bluto .t-st{border-radius:999px;padding-left:9px;padding-right:9px}
.style-bluto .sheet .tb{border-radius:14px 0 0 0}
.style-bluto input[type=text],.style-bluto input[type=search],.style-bluto input[type=number],.style-bluto input[type=email],.style-bluto select,.style-bluto textarea{border-radius:10px}
.style-bluto .ctabs{border-radius:999px;overflow:hidden}
.style-bluto .scrollbox{border-radius:0 0 16px 16px}
.style-bluto .toast{border-radius:14px;border-left:0;box-shadow:0 18px 40px -16px rgba(12,26,58,.55)}
