html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #EDE6DC;
  overscroll-behavior: none;
}
body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  color: #2A3A38;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}
.oa-app-shell {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: #EDE6DC;
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) {
  body {
    background: radial-gradient(ellipse at top, #EDE6DC, #DDD3C4 120%);
  }
  .oa-app-shell {
    margin: 24px auto;
    max-width: 440px;
    min-height: calc(100dvh - 48px);
    border-radius: 36px;
    box-shadow: 0 30px 60px rgba(50,60,55,0.18), 0 0 0 1px rgba(0,0,0,0.06);
  }
}
.oa-scroll::-webkit-scrollbar { width: 0; height: 0; }
.oa-scroll { scrollbar-width: none; }
.oa-no-tap { -webkit-tap-highlight-color: transparent; user-select: none; }
button { font-family: inherit; }
input, textarea { font-family: inherit; }

@keyframes oaFadeUp { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform: none } }
@keyframes oaFadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes oaPop { 0% { transform: scale(.6); opacity:0 } 60% { transform: scale(1.08); opacity:1 } 100% { transform: scale(1) } }
@keyframes oaPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes oaDrift { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }
@keyframes oaShine { 0%,100% { opacity:.3 } 50% { opacity:.9 } }
@keyframes oaConfetti { 0% { transform: translateY(0) rotate(0); opacity:1 } 100% { transform: translateY(700px) rotate(720deg); opacity:0 } }
@keyframes oaSpin { from { transform: rotate(0) } to { transform: rotate(360deg) } }
@keyframes oaWave { 0%,100% { transform: rotate(-8deg) } 50% { transform: rotate(14deg) } }
@keyframes oaShake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-4px) } 75% { transform: translateX(4px) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.oa-splash {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #DDE9DF 0%, #EDE6DC 100%);
  z-index: 9999;
}
.oa-splash-inner { text-align: center; animation: oaFadeUp .5s ease; }
.oa-splash-mark {
  width: 88px; height: 88px; margin: 0 auto 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #A6C3B6, #5C7E73);
  color: #fff; font-family: 'Lora', serif; font-style: italic; font-size: 48px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 0 #4D6B61, 0 1px 0 rgba(255,255,255,0.6) inset;
  animation: oaDrift 4s ease-in-out infinite;
}
.oa-splash-text {
  font-family: 'Lora', serif; font-style: italic; font-weight: 600;
  font-size: 28px; color: #5C7E73;
}
.oa-fs-besar { font-size: 17px; }
.oa-fs-sangat-besar { font-size: 19px; }