/* ════════════════════════════════════════
   BEAR AI — Design Tokens & Base Styles
   MysticNoy © 2026
   Tema: Monokrom Hitam & Putih
   ════════════════════════════════════════ */
:root{
  --bg:#000000;--surface:#0a0a0a;--card-solid:#121212;--hover:#1c1c1c;
  --border:rgba(255,255,255,0.09);--border-b:rgba(255,255,255,0.18);
  --accent:#ffffff;--accent-dim:rgba(255,255,255,0.1);--accent-d2:rgba(255,255,255,0.16);
  --text:#f5f5f5;--text2:#a0a0a0;--text3:#5a5a5a;
  --green:#e8e8e8;--amber:#cfcfcf;--red:#ffffff;
  --r1:10px;--r2:16px;--r3:24px;--r4:32px;
  --sh:0 8px 32px rgba(0,0,0,0.7);--mono:'JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);
  height:100%;overflow:hidden;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
*{scrollbar-width:thin;scrollbar-color:var(--border-b) transparent}
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── SCREENS ── */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s ease;overflow:hidden;padding-top:env(safe-area-inset-top,0px)}
.screen.active{opacity:1;pointer-events:all}
@keyframes sIn{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}
.s-in{animation:sIn .45s cubic-bezier(.16,1,.3,1) forwards}

/* ── Shared animation utility classes ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}70%{box-shadow:0 0 0 14px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.fade-up{animation:fadeUp .4s cubic-bezier(.16,1,.3,1) both}
.float{animation:floatY 3.5s ease-in-out infinite}