:root{--charm-sidebar-width:80px;--charm-purple:#005064;--charm-ink:#111;--charm-surface:#fff;--charm-safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0;min-height:100%;width:100%;overflow-x:hidden}body{padding-left:var(--charm-sidebar-width);background:var(--charm-surface);color:var(--charm-ink)}body.charm-modal-open{overflow:hidden}
#spa-shell{min-height:100vh;position:relative}#spa-view-shell{min-height:100vh;position:relative}.spa-view{min-height:100vh}
.charm-sidebar .rail-item.route-active{background:var(--charm-purple)!important;color:#fff!important}.mobile-nav .mobile-nav-item.route-active{color:var(--charm-purple)!important}
#spa-page-loading{position:fixed;inset:0 0 auto 0;height:2px;z-index:100000;pointer-events:none;opacity:0;background:transparent;overflow:hidden;transition:opacity .15s ease}#spa-page-loading::before{content:"";position:absolute;left:-30%;width:30%;height:100%;background:var(--charm-purple);border-radius:0 10px 10px 0;box-shadow:0 0 14px rgba(80,0,100,.25)}#spa-page-loading.is-active{opacity:1}#spa-page-loading.is-active::before{animation:charmLoad 900ms cubic-bezier(.4,0,.2,1) infinite}@keyframes charmLoad{to{left:105%}}
#spa-view{opacity:1;transform:none;will-change:opacity,transform}.spa-navigation-pending #spa-view{opacity:.01;transform:translateY(4px)}.spa-view-reveal{animation:spaReveal .18s cubic-bezier(.22,1,.36,1)}@keyframes spaReveal{from{opacity:.01;transform:translateY(4px)}to{opacity:1;transform:none}}
.charm-offline-bar{position:fixed;left:0;right:0;top:0;z-index:100010;display:flex;justify-content:center;pointer-events:none;opacity:0;transform:translateY(-100%);transition:opacity .18s ease,transform .25s ease}.charm-offline-bar>div{margin:10px auto 0;padding:9px 13px;border:1px solid rgba(17,17,17,.08);border-radius:999px;background:#111;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.16);font:700 11px/1 "DM Sans",system-ui,sans-serif}.charm-offline-bar.is-visible{opacity:1;transform:none}
#toastHost{position:fixed;right:18px;top:18px;z-index:100020;display:grid;gap:8px;width:min(360px,calc(100vw - 36px));pointer-events:none}.charm-toast{pointer-events:auto;display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border-radius:14px;background:#111;color:#fff;box-shadow:0 18px 42px rgba(0,0,0,.18);font:500 12px/1.45 "DM Sans",system-ui,sans-serif;animation:toastIn .18s ease}.charm-toast[data-kind="error"]{background:#341017}.charm-toast[data-kind="offline"]{background:#242424}.charm-toast strong{display:block;font-weight:800;margin-bottom:2px}.charm-toast button{margin-left:auto;border:0;background:transparent;color:inherit;opacity:.7;cursor:pointer}@keyframes toastIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

@media(max-width:900px){body{padding-left:0!important;padding-bottom:calc(68px + var(--charm-safe-bottom))}.charm-sidebar{display:none!important}#spa-view-shell{min-height:calc(100vh - 68px)}}
@media(min-width:901px){.mobile-nav{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.spa-cached-view[hidden]{display:none!important}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* SPA integrity: the shell remains stable while route content switches. */
#spa-view-host{min-height:100vh;position:relative}
.spa-view{min-height:100vh;position:relative}
.spa-view-ready{animation:charmSpaReveal .18s ease both}
@keyframes charmSpaReveal{from{opacity:.001;transform:translateY(4px)}to{opacity:1;transform:none}}
.spa-switching #spa-view-host{pointer-events:none}
[data-charm-account-icon]{color:#111}
.profile-auth-pending #spa-view-host{visibility:hidden}
.profile-auth-pending #spa-page-loading{opacity:1!important}
.profile-auth-pending #spa-view-host + *{visibility:hidden}

/* ==============================================================
   PRO SPA LOADER + INTERNAL RECOVERY
   ==============================================================
*/
#spa-page-loading{
  position:fixed;inset:0;z-index:100000;display:grid;place-items:center;
  height:auto;background:rgba(6,6,8,.72);backdrop-filter:blur(16px) saturate(.7);
  -webkit-backdrop-filter:blur(16px) saturate(.7);opacity:0;visibility:hidden;
  pointer-events:none;transition:opacity .18s ease,visibility .18s ease;
}
#spa-page-loading::before{display:none}
#spa-page-loading.is-active{opacity:1;visibility:visible}
.spa-loader-card{display:grid;justify-items:center;gap:8px;min-width:180px;padding:20px 22px 19px;border:1px solid rgba(255,255,255,.11);border-radius:24px;background:rgba(17,17,19,.72);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.spa-loader-orbit{position:relative;width:56px;height:56px;display:grid;place-items:center}
.spa-loader-orbit::before,.spa-loader-orbit::after{content:"";position:absolute;inset:0;border-radius:50%}
.spa-loader-orbit::before{border:1.5px solid rgba(255,255,255,.14);border-top-color:#fff;border-right-color:rgba(255,255,255,.54);animation:spaLoaderSpin 1s linear infinite}
.spa-loader-orbit::after{inset:7px;border:1px solid rgba(255,255,255,.08);border-bottom-color:rgba(255,255,255,.6);animation:spaLoaderSpinReverse 1.4s linear infinite}
.spa-loader-orbit img{width:20px;height:20px;display:block;filter:brightness(0) invert(1);opacity:.96}
.spa-loader-title{font:800 11px/1 "DM Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.spa-loader-caption{font:500 10px/1.2 "DM Sans",system-ui,sans-serif;color:rgba(255,255,255,.52)}
@keyframes spaLoaderSpin{to{transform:rotate(360deg)}}
@keyframes spaLoaderSpinReverse{to{transform:rotate(-360deg)}}

#spa-recovery{position:fixed;inset:0;z-index:99990;display:grid;place-items:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:opacity .18s ease,visibility .18s ease}
#spa-recovery.is-active{opacity:1;visibility:visible;pointer-events:auto}
.spa-recovery-card{width:min(380px,calc(100vw - 36px));padding:28px;border:1px solid rgba(17,17,17,.08);border-radius:24px;background:#fff;box-shadow:0 26px 70px rgba(17,17,17,.12);text-align:center}
.spa-recovery-mark{width:42px;height:42px;border-radius:50%;margin:0 auto 15px;display:grid;place-items:center;border:1px solid #e6e6e6}
.spa-recovery-mark::before{content:"";width:18px;height:18px;border:1.5px solid #111;border-top-color:transparent;border-radius:50%;animation:spaLoaderSpin .8s linear infinite}
.spa-recovery-card h2{margin:0 0 8px;font:800 18px/1.15 "DM Sans",system-ui,sans-serif;color:#111}
.spa-recovery-card p{margin:0 auto 18px;max-width:300px;font:500 12px/1.55 "DM Sans",system-ui,sans-serif;color:#696d72}
.spa-recovery-card button{border:0;border-radius:999px;padding:11px 17px;background:#111;color:#fff;cursor:pointer;font:800 11px/1 "DM Sans",system-ui,sans-serif;box-shadow:0 10px 22px rgba(17,17,17,.16)}
.spa-recovery-card button:disabled{opacity:.5;cursor:wait}
@media(max-width:900px){#spa-recovery{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}.spa-loader-card{min-width:156px;padding:18px}.spa-loader-orbit{width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){.spa-loader-orbit::before,.spa-loader-orbit::after,.spa-recovery-mark::before{animation:none}}