* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: #05060A;
  overscroll-behavior: none;
  font-family: 'Space Grotesk', sans-serif;
  color: #EEF2FA;
}
a { color: #C9FF3D; }
a:hover { color: #3DE0FF; }
input:focus, button:focus { outline: none; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 0; height: 0; }

#app { min-height: 100dvh; display: flex; justify-content: center; background: radial-gradient(90% 40% at 50% 0%, #0C1120 0%, #05060A 60%); }
.shell {
  width: min(430px, 100vw);
  height: 100dvh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: radial-gradient(130% 55% at 50% -8%, #121A2E 0%, #0A0D18 45%, #05060A 100%);
  border-left: 1px solid rgba(255,255,255,.05);
  border-right: 1px solid rgba(255,255,255,.05);
  /* Android 15 / iOS draw edge-to-edge under the status & navigation bars.
     Push all content into the safe area so the clock/notifications never overlap.
     The floating bottom nav (position:absolute; bottom) is measured from this
     padding box, so it automatically clears the gesture bar too. */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Xheki keyframes */
@keyframes xkPop { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes xkShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes xkFloatUp { 0% { transform: translate(-50%,0) scale(.8); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-50%,-70px) scale(1.3); opacity: 0; } }
@keyframes xkSlideUp { from { transform: translateY(46px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes xkStarPop { 0% { transform: scale(0) rotate(-30deg); } 70% { transform: scale(1.35) rotate(8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes xkWiggle { 0%,100% { transform: rotate(-5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.08); } }
@keyframes xkPulseL { 0% { box-shadow: 0 0 0 0 rgba(201,255,61,.5); } 70% { box-shadow: 0 0 0 12px rgba(201,255,61,0); } 100% { box-shadow: 0 0 0 0 rgba(201,255,61,0); } }
@keyframes xkRise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes xkBlink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes xkFloaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }
@keyframes xkHype { 0%,100% { transform: translateY(0) rotate(-3deg); } 25% { transform: translateY(-8%) rotate(3deg); } 50% { transform: translateY(0) rotate(-2deg); } 75% { transform: translateY(-6%) rotate(2deg); } }
@keyframes xkFever { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes xkLed { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.35); opacity: 1; } }
@keyframes xkSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* pressable buttons (replaces the design tool's style-active) */
.pr:active { transform: translateY(2px) scale(.99); }
.prS:active { transform: scale(.96); }

.scroll-area > * { flex-shrink: 0; }

/* iOS Safari repaint stabilisation — prevents ghosted/duplicated text. */
.shell {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.scroll-area {
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
}
.shell * {
  -webkit-backface-visibility: hidden;
}

/* --- Dizajni i ri (Claude Design v2): boot, rrota, vulat, aurora --- */
@keyframes xkBoing { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-16px) scale(.95, 1.07); } 50% { transform: translateY(0) scale(1.08, .9); } 68% { transform: translateY(-6px) scale(.99, 1.03); } 82% { transform: translateY(0) scale(1.02, .98); } }
@keyframes xkKeyWave { 0%, 50%, 100% { transform: translateY(0); } 20% { transform: translateY(-10px); } }
@keyframes xkWaveJump { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-13px) scale(1.14); } 70% { transform: translateY(2px) scale(.95); } 100% { transform: translateY(0) scale(1); } }
@keyframes xkStripes { from { background-position: 0 0; } to { background-position: 56px 0; } }
@keyframes xkAurora { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, 30px) scale(1.18); } }
@keyframes xkRedFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xkShadowPulse { 0%, 100% { transform: scale(1); opacity: .45; } 30% { transform: scale(.72); opacity: .3; } 50% { transform: scale(1.12); opacity: .5; } }
@keyframes xkStamp { 0% { transform: scale(2.8) rotate(-7deg); opacity: 0; } 28% { transform: scale(1) rotate(-7deg); opacity: 1; } 78% { transform: scale(1) rotate(-7deg); opacity: 1; } 100% { transform: scale(1.08) rotate(-7deg); opacity: 0; } }
@keyframes xkGlowPulse { 0%, 100% { box-shadow: 0 3px 0 #A87A00, 0 0 0 0 rgba(255, 210, 61, .5); } 60% { box-shadow: 0 3px 0 #A87A00, 0 0 0 12px rgba(255, 210, 61, 0); } }
@keyframes xkPtr { 0%, 100% { transform: translateX(-50%) rotate(0deg); } 50% { transform: translateX(-50%) rotate(8deg); } }
@keyframes xkFlyUp { 0% { transform: translateY(4px); opacity: 0; } 18% { opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } }