:root{
  --primary:#38BEC4;--on-primary:#03363A;
  --primary-c:color-mix(in oklab,var(--primary) 15%,#FDFDFF);
  --on-primary-c:color-mix(in oklab,var(--primary) 72%,#000);
  --surface:#FBFAFE;--surface-c:#F1F0F6;--surface-ch:#E9E8EF;
  --outline:#C5C6D0;--outline-v:#E4E3EA;
  --on-surface:#1B1B21;--on-surface-v:#46474F;
  --error:#BA1A1A;--outer:#EDECF2;--scrim:rgba(0,0,0,.45)
}
body.dark{
  --primary:#5CE1E6;
  --primary-c:color-mix(in oklab,var(--primary) 32%,#15161C);
  --on-primary-c:color-mix(in oklab,var(--primary) 30%,#fff);
  --surface:#121318;--surface-c:#1D1E24;--surface-ch:#26272E;
  --outline:#5C5D66;--outline-v:#2C2D34;
  --on-surface:#E4E2E8;--on-surface-v:#A6A6B0;
  --error:#FFB4AB;--outer:#0A0A0E;--scrim:rgba(0,0,0,.6)
}
html,body{margin:0;padding:0;background:var(--outer)}
body{font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
input,textarea{font-family:inherit}
button{font-family:inherit;cursor:pointer}
::-webkit-scrollbar{display:none}
@keyframes sheetUp{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes toastPop{from{transform:translate(-50%,16px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes eq{0%,100%{height:5px}50%{height:14px}}
@keyframes pushDown{from{transform:translate(-50%,-90px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* pseudo-estados (el prototipo los tenía como style-focus/hover/active) */
.inp{outline:none;border:1px solid var(--outline);border-radius:14px;background:transparent;color:var(--on-surface);box-sizing:border-box;width:100%}
.inp:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.hov:hover{background:var(--surface-ch)}
.act:active{transform:scale(.98)}
.act96:active{transform:scale(.96)}
.act92:active{transform:scale(.92)}
.eqbar{width:3px;border-radius:2px;background:var(--primary);animation:eq .9s ease-in-out infinite}