:root{
  --splash-bg: var(--bg, #fbf7ef);
  --splash-card: var(--card, #ffffff);
  --splash-text: var(--text, #1f2937);
  --splash-muted: var(--muted, #6b7280);
  --splash-border: var(--border, #eadfcb);
  --splash-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.08));
  --splash-accent: var(--accent, #f59e0b);
  --splash-radius: var(--radius, 16px);
}

/* ===== Splash Screen ===== */
.splash{
  position: fixed;
  inset: 0;
  background: var(--splash-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 99999;
  transition: opacity .35s ease, visibility .35s ease;
}

.splash.is-hidden{
  opacity:0;
  visibility:hidden;
}

.splash__card{
  width:min(520px, calc(100% - 40px));
  background: var(--splash-card);
  border:1px solid var(--splash-border);
  border-radius: var(--splash-radius);
  box-shadow: var(--splash-shadow);
  padding: 26px 20px;
  text-align:center;
  color: var(--splash-text);
}

.splash__logo{
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  object-fit: contain;
}

.splash__title{
  margin:0 0 10px;
  font-weight: 900;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
}

.splash__percent{
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--splash-accent);
}

/* loader bar */
.splash__bar{
  height: 8px;
  border-radius: 999px;
  background: rgba(245,158,11,.18);
  overflow:hidden;
  border: 1px solid rgba(245,158,11,.30);
}

.splash__bar > span{
  display:block;
  height:100%;
  width: 0%;
  background: var(--splash-accent);
  border-radius: 999px;
  animation: splashFill 1s linear forwards;
}

@keyframes splashFill{
  from{ width: 0%; }
  to{ width: 100%; }
}

/* Page enter animation */
.page{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}

.page.is-ready{
  opacity:1;
  transform: translateY(0);
}