/* =======================================================
   base.css — Reset, keyframes, screen router
   ======================================================= */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; overflow:hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
input, select, textarea { font-family:inherit; color:inherit; }
a { color:inherit; text-decoration:none; }

/* --- Screen router --- */
.screen { position:absolute; inset:0; display:none; flex-direction:column; }
.screen.active { display:flex; }

/* --- Panel router (trong dashboard) --- */
.panel { display:none; flex-direction:column; flex:1; overflow:hidden; }
.panel.active { display:flex; }

/* --- Keyframes --- */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes toastIn  { from { opacity:0; transform:translateX(12px); } to { opacity:1; } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform:translateX(12px); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }

/* --- Utility --- */
.spinning { animation:spin 0.7s linear infinite; }
.hidden   { display:none !important; }