*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }
body {
  height:100%; overflow:hidden;
  background: var(--bg-base);
  color: var(--t1);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Toata ierarhia radacina trebuie sa aiba height explicita */
#app {
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
a { color:var(--t-accent); text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
input, textarea { font-family:inherit; color:inherit; background:none; border:none; outline:none; }
img, video { max-width:100%; display:block; }

.hidden    { display:none !important; }
.truncate  { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.flex      { display:flex; }
.flex-1    { flex:1; min-width:0; min-height:0; }
.items-center { align-items:center; }

/* Grain cinematic */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0; opacity:.5;
}

/* ── Splash ────────────────────────────────────────────── */
.splash {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:32px;
  background: radial-gradient(ellipse at 50% 40%, rgba(124,58,237,.2) 0%, var(--bg-base) 65%);
  z-index: var(--z5);
}
.splash-logo {
  position:relative;
  width:80px; height:80px; border-radius:24px;
  background: var(--grad-brand);
  display:flex; align-items:center; justify-content:center;
  font-size:42px; font-weight:900; color:#fff;
  box-shadow: var(--glow-lg), var(--shadow-xl);
  animation: splashPop .7s cubic-bezier(.34,1.56,.64,1) both;
}
.splash-logo::after {
  content:''; position:absolute; inset:-10px;
  border-radius:30px;
  background: var(--grad-brand); opacity:.18;
  filter:blur(20px);
  animation: pulse 2.5s ease infinite;
}
.splash-name {
  font-size:32px; font-weight:900; letter-spacing:-1px;
  background: var(--grad-brand);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation: fadeInUp .5s ease .3s both;
}
.splash-bar {
  width:140px; height:2px;
  background: var(--b2); border-radius:99px; overflow:hidden;
  animation: fadeInUp .5s ease .5s both;
}
.splash-fill {
  height:100%;
  background: var(--grad-h);
  animation: loadBar 1.4s ease-in-out infinite;
}

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes fadeIn     { from{opacity:0}to{opacity:1} }
@keyframes fadeInUp   { from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none} }
@keyframes fadeInDown { from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)} }
@keyframes splashPop  { from{opacity:0;transform:scale(.5) rotate(-8deg)}to{opacity:1;transform:none} }
@keyframes msgIn      { from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none} }
@keyframes spin       { to{transform:rotate(360deg)} }
@keyframes pulse      { 0%,100%{opacity:.2}50%{opacity:.5} }
@keyframes pulseGlow  { 0%,100%{box-shadow:var(--glow-sm)}50%{box-shadow:var(--glow-lg)} }
@keyframes toastIn    { from{opacity:0;transform:translateY(12px) scale(.93)}to{opacity:1;transform:none} }
@keyframes toastOut   { to{opacity:0;transform:translateY(8px) scale(.94)} }
@keyframes typingDot  { 0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1} }
@keyframes loadBar    { 0%{width:0;margin-left:0}50%{width:60%;margin-left:20%}100%{width:0;margin-left:100%} }
@keyframes shimmer    { from{background-position:-200% 0}to{background-position:200% 0} }

.animate-spin  { animation: spin .75s linear infinite; }
.animate-pulse { animation: pulse 2s ease infinite; }
.animate-in    { animation: fadeInUp .25s ease both; }