/* Adapted from the user-supplied day-night-stars-fixed.html switch. */
html,body,#app,.app,.main{min-height:100dvh}
html,body,#app,.app{width:100%}
.main{position:relative;isolation:isolate}
:root[data-theme="dark"] .main::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.38;
  background-image:radial-gradient(1px 1px at 11% 20%,#F5F8FF 98%,transparent),radial-gradient(2px 2px at 76% 12%,#A7B7CE 98%,transparent),radial-gradient(1px 1px at 91% 53%,#F5F8FF 98%,transparent),radial-gradient(1px 1px at 36% 67%,#A7B7CE 98%,transparent),radial-gradient(2px 2px at 60% 83%,#6EA4E8 98%,transparent);
  background-size:310px 280px,440px 360px,390px 320px,480px 410px,530px 480px;
}
.theme-toggle{
  width:124px;height:auto;aspect-ratio:400/172;min-height:0;padding:0;border:0;border-radius:999px;
  background:none;color:inherit;box-shadow:none;filter:drop-shadow(0 4px 7px #0B142466);
  right:20px;bottom:18px;z-index:60;overflow:visible;
}
.theme-toggle:hover{border:0;transform:translateY(-3px);filter:drop-shadow(0 7px 10px #0B142477)}
.theme-toggle svg{display:block;width:100%;height:100%;overflow:visible}
.theme-toggle .track{fill:#3179b9;transition:fill 1s}
.theme-toggle .rim{fill:none;stroke:#d8e3e8;stroke-width:4;transition:stroke 1s}
.theme-toggle .halo{transform:translateX(0);transition:transform 1.05s cubic-bezier(.5,.02,.2,1)}
.theme-toggle .halo circle{transition:fill 1s}
.theme-toggle .starfield{opacity:0;transition:opacity .65s;pointer-events:none}
.theme-toggle .star{transform-box:fill-box;transform-origin:center;animation:mm-twinkle 2.5s ease-in-out infinite alternate}
.theme-toggle .star:nth-child(2){animation-delay:.5s}.theme-toggle .star:nth-child(3){animation-delay:1.1s}.theme-toggle .star:nth-child(4){animation-delay:1.8s}
.theme-toggle .clouds{transform:translateY(0);opacity:1;transition:transform .85s cubic-bezier(.4,0,.2,1),opacity .6s}
.theme-toggle .orb{transform:translateX(0);transition:transform 1.05s cubic-bezier(.5,.02,.2,1)}
.theme-toggle .sun{opacity:1;transition:opacity .45s}.theme-toggle .moon{opacity:0;transition:opacity .5s}
.theme-toggle.night .track{fill:#0c1426}.theme-toggle.night .rim{stroke:#182036}
.theme-toggle.night .halo,.theme-toggle.night .orb{transform:translateX(215px)}
.theme-toggle.night .halo circle:nth-child(1){fill:#101b34}.theme-toggle.night .halo circle:nth-child(2){fill:#1b2b49}.theme-toggle.night .halo circle:nth-child(3){fill:#263a5c}
.theme-toggle.night .sun{opacity:0}.theme-toggle.night .moon{opacity:1}
.theme-toggle.night .clouds{transform:translateY(115px);opacity:0}.theme-toggle.night .starfield{opacity:1}
@keyframes mm-twinkle{from{opacity:.4;transform:scale(.75)}to{opacity:1;transform:scale(1.2)}}
@media(max-width:850px){.theme-toggle{width:90px;right:12px;bottom:calc(79px + env(safe-area-inset-bottom))}body:has(.login-wrap) .theme-toggle{bottom:12px}}
@media(prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle *{transition-duration:.01ms!important;animation:none!important}}
/* Keep the animated control visible and named on every screen. */
.theme-toggle{width:auto;min-width:220px;height:68px;aspect-ratio:auto;display:inline-flex;align-items:center;gap:10px;padding:7px 11px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 27px var(--shadow);filter:none}
.theme-toggle:hover{border:1px solid var(--primary);filter:none;box-shadow:0 16px 30px var(--shadow)}
.theme-toggle svg{width:105px;height:auto;flex:none}
.theme-toggle-copy{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;white-space:nowrap}
.theme-toggle-copy strong{font-size:12px;color:var(--text)}
.theme-toggle-copy small{font-size:11px;color:var(--muted)}
body:has(.login-wrap) .theme-toggle{top:20px;right:20px;bottom:auto}
@media(max-width:850px){.theme-toggle{width:auto;min-width:184px;height:57px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));padding:6px 8px;gap:7px}.theme-toggle svg{width:86px}.theme-toggle-copy strong{font-size:11px}.theme-toggle-copy small{font-size:10px}body:has(.login-wrap) .theme-toggle{top:15px;left:15px;right:auto;bottom:auto}}
/* Compact control in the app header. Login has no header, so it sits at the top. */
.theme-toggle.in-header{position:relative;inset:auto;z-index:auto;width:82px;min-width:82px;height:40px;padding:2px 4px;border:1px solid var(--border);border-radius:999px;background:var(--surface-alt);box-shadow:none;filter:none;flex:none}
.theme-toggle.in-header:hover{transform:none;border-color:var(--primary);box-shadow:0 3px 9px var(--shadow)}
.theme-toggle.in-header svg{width:73px;height:auto}
.theme-toggle.in-header .theme-toggle-copy{display:none}
body:has(.login-wrap) .theme-toggle:not(.in-header){width:102px;min-width:102px;height:48px;padding:3px;border-radius:999px}
body:has(.login-wrap) .theme-toggle:not(.in-header) svg{width:94px}
body:has(.login-wrap) .theme-toggle:not(.in-header) .theme-toggle-copy{display:none}
@media(max-width:850px){
  html,body,#app,.app,.shell,.main{width:100%;max-width:none;min-height:100dvh;margin:0}
  html,body{overflow-x:hidden}
  .shell{display:block}
  .content{width:100%;max-width:none;margin:0}
  .theme-toggle.in-header{width:66px;min-width:66px;height:34px;padding:2px}
  .theme-toggle.in-header svg{width:60px}
  .top-actions{gap:6px}
  body:has(.login-wrap) .theme-toggle:not(.in-header){top:16px;left:15px;right:auto;bottom:auto;width:88px;min-width:88px;height:43px}
  body:has(.login-wrap) .theme-toggle:not(.in-header) svg{width:80px}
}

/* Keep the loading screen focused on the animation. */
body:has(.cloud-loading) .theme-toggle{display:none!important}