/* ─── RESET ─── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow-x:hidden}
body{font-family:'Outfit',sans-serif;transition:background .3s}
input,textarea,select,button{font-family:'Outfit',sans-serif}
::-webkit-scrollbar{width:0;display:none}

/* ─── DESKTOP LAYOUT ─── */
#app{max-width:780px;margin:0 auto;min-height:100vh;position:relative}
@media(min-width:520px){
  #app{box-shadow:0 0 40px rgba(0,0,0,.08);border-left:1px solid rgba(128,128,128,.1);border-right:1px solid rgba(128,128,128,.1)}
  [data-theme="dark"] #app{box-shadow:0 0 40px rgba(0,0,0,.3)}
  .slide-up{max-width:780px;margin:0 auto}
}
/* Desktop font boost — Bob is 80, readability is critical */
@media(min-width:600px){
  #app{zoom:1.2}
}
@media(min-width:1200px){
  #app{zoom:1.35}
}

/* ─── ANIMATIONS ─── */
@keyframes eq{from{height:4px}to{height:14px}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.fade-in{animation:fadeIn .2s ease}
.slide-up{animation:slideUp .25s ease}

/* ─── DARK MODE INPUTS ─── */
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#8884A0!important;opacity:1}
[data-theme="dark"] select{color:#F5F3FA!important}
[data-theme="dark"] input,[data-theme="dark"] textarea{color:#F5F3FA!important}