.topbar{
  position:sticky; top:0; z-index:9;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  border-bottom:1px solid var(--stroke);
  background:rgba(7,10,16,.72);
  backdrop-filter: blur(12px);
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:42px; width:auto}
.brandName{font-weight:900}
.brandSub{font-size:13px; color:var(--muted)}
.brandText{line-height:1.12}

.actions{display:flex; gap:10px; align-items:center}

.card{
  border:1px solid var(--stroke);
  border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
  padding:18px;
}
.card.inner{
  border-radius:var(--r2);
  background:rgba(255,255,255,.03);
}

.field{display:flex; flex-direction:column; gap:8px; margin: 12px 0}
label{font-size:14px; color:var(--muted)}
.input, input, select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
input:focus, select:focus{border-color: rgba(94,234,212,.38)}

.row{display:flex; gap:10px; align-items:center}
.row.wrap{flex-wrap:wrap}
.row.space{justify-content:space-between}

.primaryBtn,.ghostBtn,.dangerBtn,.iconBtn{
  border:1px solid var(--stroke);
  border-radius:14px;
  padding:10px 14px;
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.primaryBtn{
  background:rgba(94,234,212,.12);
  border-color: rgba(94,234,212,.35);
}
.dangerBtn{
  background:rgba(251,113,133,.10);
  border-color: rgba(251,113,133,.35);
}
.iconBtn{width:44px;height:44px; display:grid; place-items:center}

.primaryBtn:hover,.ghostBtn:hover,.dangerBtn:hover{ transform: translateY(-1px) scale(1.01); }
.primaryBtn:active,.ghostBtn:active,.dangerBtn:active{ transform: translateY(0) scale(.99); }

.divider{height:1px; background:var(--stroke); margin:16px 0}

.footer{
  padding:18px 14px;
  color:var(--muted);
  display:flex;
  justify-content:center;
  font-size:13px;
}

.msg{min-height:20px; margin-top:10px; color:var(--muted)}

.pill{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
}

.fileLike{position:relative; overflow:hidden}
.fileLike input{position:absolute; inset:0; opacity:0; cursor:pointer}

/* Motion presets */
.liftIn{ animation: liftIn .55s cubic-bezier(.2,.9,.2,1) both; }
.slideIn{ animation: slideIn .55s cubic-bezier(.2,.9,.2,1) both; }
.fadeIn{ animation: fadeIn .45s ease both; }
.popIn{ animation: popIn .55s cubic-bezier(.2,.9,.2,1) both; }

@keyframes liftIn{
  from{ opacity:0; transform: translateY(16px) scale(.98); filter: blur(6px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes slideIn{
  from{ opacity:0; transform: translateX(18px); filter: blur(6px);}
  to{ opacity:1; transform: translateX(0); filter: blur(0);}
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes popIn{
  from{ opacity:0; transform: scale(.96); }
  to{ opacity:1; transform: scale(1); }
}

/* Toast */
.toast{
  position: fixed;
  left: 14px;
  right: 14px;
  top: 14px;
  margin: 0 auto;
  max-width: 520px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  transform: translateY(-14px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  z-index: 9999;
}
.toast.show{ transform: translateY(0); opacity: 1; }
.toast.success{ border-color: rgba(94,234,212,.35); }
.toast.error{ border-color: rgba(251,113,133,.40); }