:root{color-scheme:light;font-family:Verdana,Arial,sans-serif;background:#eef3f8}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#eef3f8}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.phone-screen{width:100%;height:100%;min-height:100%;border:0}
#toast{position:fixed;z-index:100;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);padding:10px 14px;border-radius:10px;color:#fff;background:#273943e8;font-size:12px;opacity:0;transform:translate(-50%,12px);transition:.2s ease;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
.startup-splash{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;justify-items:center;gap:22px;color:#425766;background:#eef3f8;opacity:1;transition:opacity .28s ease}
.startup-splash.is-finished{opacity:0;pointer-events:none}
.startup-splash>strong{font-size:13px;font-weight:600;letter-spacing:1.35px}
.splash-tile{position:relative;width:202px;height:202px;display:grid;place-items:center;border:1px solid #fff;border-radius:38px;background:linear-gradient(145deg,#fbfdff,#e1ebf2);box-shadow:0 20px 45px #34526b25,inset 0 1px 0 #fff,inset 0 -7px 16px #9db2c21c}
.splash-tile:after{content:"";position:absolute;inset:2px;border-radius:36px;background:linear-gradient(135deg,#fff8,transparent 42%);pointer-events:none}
.splash-logo{position:relative;z-index:1;width:154px;height:82px;transform-origin:50% 50%;animation:quiet-logo-breathe .9s cubic-bezier(.22,.74,.2,1) both;filter:drop-shadow(0 5px 4px #24476424)}
.splash-logo:before{content:"";position:absolute;z-index:0;inset:-38px;background:radial-gradient(ellipse at center,#70beef2e 0%,#70beef12 38%,transparent 72%);opacity:0;animation:quiet-logo-glow .9s ease-in-out both}
.splash-piece{position:absolute;z-index:1;inset:0;width:154px;height:82px;object-fit:contain;opacity:0;transform-origin:50% 50%;animation-name:quiet-piece-reveal;animation-timing-function:cubic-bezier(.16,.82,.22,1);animation-fill-mode:forwards}
.splash-red{animation-duration:.34s;animation-delay:0s}
.splash-blue-main{animation-duration:.38s;animation-delay:.06s}
.splash-blue-lower{animation-duration:.38s;animation-delay:.13s}
.splash-tile small{position:absolute;right:13px;bottom:12px;z-index:2;padding:3px 7px;border-radius:999px;color:#fff;background:#536b7ad9;font:600 9px/1 Verdana,Arial,sans-serif;letter-spacing:.55px;box-shadow:inset 0 1px 0 #ffffff70}
@keyframes quiet-piece-reveal{0%{opacity:0;transform:scale(.92)}65%{opacity:1;transform:scale(1.015)}100%{opacity:1;transform:scale(1)}}
@keyframes quiet-logo-breathe{0%{transform:scale(.90)}50%{transform:scale(1.03)}80%{transform:scale(.995)}100%{transform:scale(1)}}
@keyframes quiet-logo-glow{0%,100%{opacity:0}48%{opacity:1}}
.boot-error{height:100%;display:grid;place-content:center;justify-items:center;gap:10px;padding:30px;color:#465763;text-align:center;background:#eef3f8}
.boot-error b{font-size:16px}
.boot-error p{margin:0;font-size:12px;line-height:1.5}
.boot-error button{margin-top:8px;padding:9px 16px;border:0;border-radius:9px;color:#fff;background:#22b9c5}
@media(prefers-reduced-motion:reduce){.splash-logo,.splash-piece,.splash-logo:before{animation-duration:.01ms;animation-delay:0s}}/* SPLASH SEQUENCE PRO 2026-08-24 */
.startup-splash { gap: 22px; }
.startup-splash > strong {
  opacity: 0;
  transform: translateY(5px);
  animation: splash-caption-in .38s ease-out 1.63s forwards;
}
.splash-tile {
  position: relative;
  width: 202px;
  height: 202px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 38px;
  background: transparent;
  box-shadow: none;
}
.splash-tile::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid #fff;
  border-radius: 38px;
  background: linear-gradient(145deg,#fbfdff,#e1ebf2);
  box-shadow: 0 20px 45px #34526b25,inset 0 1px 0 #fff,inset 0 -7px 16px #9db2c21c;
  opacity: 0;
  transform: scale(.91);
  animation: splash-tile-in .5s cubic-bezier(.2,.78,.22,1) 1.18s forwards;
}
.splash-tile::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 2px;
  border-radius: 36px;
  background: linear-gradient(135deg,#fff8,transparent 42%);
  opacity: 0;
  animation: splash-tile-highlight .42s ease-out 1.32s forwards;
  pointer-events: none;
}
.splash-logo {
  position: relative;
  z-index: 2;
  width: 154px;
  height: 82px;
  margin-top: -18px;
  transform-origin: 50% 50%;
  animation: quiet-logo-breathe .9s cubic-bezier(.22,.74,.2,1) .23s both;
  filter: drop-shadow(0 5px 4px #24476424);
}
.splash-logo::before { animation-delay: .23s; }
.splash-piece { z-index: 2; }
.splash-red { animation-delay: .23s; }
.splash-blue-main { animation-delay: .29s; }
.splash-blue-lower { animation-delay: .36s; }
.splash-tile small {
  left: 50%;
  right: auto;
  bottom: 25px;
  z-index: 4;
  min-width: 43px;
  padding: 4px 8px;
  color: #fff;
  background: #536b7ae8;
  font: 700 9px/1 Verdana,Arial,sans-serif;
  letter-spacing: .45px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%,5px) scale(.94);
  animation: splash-badge-in .36s cubic-bezier(.2,.78,.22,1) 1.63s forwards;
}
@keyframes splash-tile-in { to { opacity: 1; transform: scale(1); } }
@keyframes splash-tile-highlight { to { opacity: 1; } }
@keyframes splash-badge-in { to { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes splash-caption-in { to { opacity: 1; transform: none; } }
/* APPROVED CLEAN SPLASH 2026-08-25 */
.startup-splash {
  gap: 26px;
  background: #eef3f7;
}
.startup-splash > strong {
  color: #445662;
  font: 500 12px/1.15 "Segoe UI",Arial,sans-serif;
  letter-spacing: 1.2px;
  opacity: 0;
  transform: translateY(4px);
  animation: clean-caption-in .733s cubic-bezier(.16,1,.3,1) 2.3s forwards;
}
.splash-tile {
  position: relative;
  width: 202px;
  height: 202px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 38px;
  background: transparent;
  box-shadow: none;
}
.splash-tile::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 38px;
  background: linear-gradient(145deg,#fbfdff,#e1ebf2);
  box-shadow: 0 20px 45px rgba(52,82,107,.13),inset 0 1px 0 rgba(255,255,255,.95);
  opacity: 0;
  transform: scale(.94);
  animation: clean-tile-in .967s cubic-bezier(.16,1,.3,1) 1.067s forwards;
}
.splash-tile::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 2px;
  border-radius: 36px;
  background: linear-gradient(135deg,rgba(255,255,255,.53),transparent 42%);
  opacity: 0;
  animation: clean-tile-highlight .6s ease-out 1.35s forwards;
  pointer-events: none;
}
.splash-logo {
  position: relative;
  z-index: 2;
  width: 154px;
  height: 82px;
  margin: 0;
  transform: none;
  animation: none;
  filter: drop-shadow(0 5px 5px rgba(36,71,100,.13));
}
.splash-logo::before { display: none; }
.splash-piece {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 154px;
  height: 82px;
  object-fit: contain;
  opacity: 0;
  transform-origin: 50% 50%;
  animation-duration: .933s;
  animation-timing-function: cubic-bezier(.16,1,.3,1);
  animation-fill-mode: forwards;
}
.splash-red {
  animation-name: clean-piece-red;
  animation-delay: .567s;
}
.splash-blue-main {
  animation-name: clean-piece-main;
  animation-delay: .8s;
}
.splash-blue-lower {
  animation-name: clean-piece-lower;
  animation-delay: 1.033s;
}
.splash-shine {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 154px;
  height: 82px;
  opacity: 0;
  pointer-events: none;
  filter: brightness(1.75) saturate(.72);
  mix-blend-mode: screen;
  animation: clean-logo-shine .833s cubic-bezier(.22,.61,.36,1) 2.367s both;
}
.splash-shine img {
  position: absolute;
  inset: 0;
  width: 154px;
  height: 82px;
  object-fit: contain;
}
@keyframes clean-piece-red {
  from { opacity: 0; transform: translate(-7px,-4px) scale(.98); }
  to { opacity: 1; transform: translate(0,0) scale(1); }
}
@keyframes clean-piece-main {
  from { opacity: 0; transform: translate(7px,-3px) scale(.98); }
  to { opacity: 1; transform: translate(0,0) scale(1); }
}
@keyframes clean-piece-lower {
  from { opacity: 0; transform: translate(5px,5px) scale(.98); }
  to { opacity: 1; transform: translate(0,0) scale(1); }
}
@keyframes clean-tile-in {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes clean-tile-highlight {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes clean-caption-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes clean-logo-shine {
  0% {
    opacity: 0;
    clip-path: polygon(-64% 100%,-57% 100%,-24% 0%,-32% 0%);
  }
  28% { opacity: .78; }
  70% { opacity: .66; }
  100% {
    opacity: 0;
    clip-path: polygon(124% 100%,131% 100%,164% 0%,156% 0%);
  }
}
@media(prefers-reduced-motion:reduce) {
  .splash-piece,.splash-tile::before,.splash-tile::after,.startup-splash>strong {
    animation-delay: 0s;
    animation-duration: .01ms;
  }
  .splash-shine { display: none; }
}