:root{
  --ink:#0f172a;
  --accent:#0ea5a4;
  --accent-2:#f97316;
  --surface:#ffffff;
  --muted:#94a3b8;
}
.bg-atmosphere{
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(14,165,164,.18), transparent 60%),
    radial-gradient(900px 300px at 90% 10%, rgba(249,115,22,.15), transparent 65%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 60%, #f1f5f9 100%);
}
.card{
  background: var(--surface);
  border-radius: 1.25rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.15rem .6rem;
  border-radius:999px;
  font-size:.75rem;
  background:#f1f5f9;
  color:#475569;
}
.rtl{
  direction: rtl;
}
.dark body{
  background:#0f172a;
  color:#f8fafc;
}
.dark .card{
  background:#0b1220;
  border-color:#1e293b;
  box-shadow:none;
}
.dark .bg-atmosphere{
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(14,165,164,.15), transparent 60%),
    radial-gradient(900px 300px at 90% 10%, rgba(249,115,22,.12), transparent 65%),
    linear-gradient(180deg, #0f172a 0%, #0b1220 70%, #0f172a 100%);
}
body.panel .card{
  border-radius: 1.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
body.panel input,
body.panel select,
body.panel textarea{
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  padding: 0.55rem 0.8rem;
  background: #fff;
}
body.panel input:focus,
body.panel select:focus,
body.panel textarea:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
  border-color: #93c5fd;
}
body.panel table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.65rem;
}
body.panel thead th{
  text-align: left;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #94a3b8;
  padding: 0 0.75rem 0.25rem;
}
body.panel tbody tr{
  background: #fff;
  border: 1px solid #e2e8f0;
}
body.panel tbody td{
  padding: 0.75rem;
}
body.panel tbody tr td:first-child{
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
body.panel tbody tr td:last-child{
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
body.panel .btn-primary{
  background: #2563eb;
  color: #fff;
  border-radius: 0.9rem;
  padding: 0.55rem 0.9rem;
  font-weight: 700;
}
body.panel .btn-ghost{
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  padding: 0.55rem 0.9rem;
  color: #475569;
  font-weight: 600;
}

@keyframes fade-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes slide-in-right{
  from{opacity:0; transform:translateX(2rem)}
  to{opacity:1; transform:translateX(0)}
}
@keyframes slide-in-left{
  from{opacity:0; transform:translateX(-2rem)}
  to{opacity:1; transform:translateX(0)}
}
@keyframes slide-in-up{
  from{opacity:0; transform:translateY(2rem)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes zoom-in{
  from{opacity:0; transform:scale(.95)}
  to{opacity:1; transform:scale(1)}
}
@keyframes pulse-scale{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
@keyframes bounce-subtle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes progress-fill{
  from{width:0}
  to{width:var(--progress,100%)}
}
.animate-in{will-change:transform,opacity}
.fade-in{animation:fade-in .5s ease both}
.slide-in-from-right-8{animation:slide-in-right .5s ease both}
.slide-in-from-left-8{animation:slide-in-left .8s ease both}
.slide-in-from-bottom-8{animation:slide-in-up .6s ease both}
.zoom-in-95{animation:zoom-in .6s ease both}
.hover-pulse-scale:hover{animation:pulse-scale 1.5s infinite ease-in-out}
.group:hover .group-hover-bounce{animation:bounce-subtle .8s infinite ease-in-out}
.animate-progress{animation:progress-fill 1.2s ease both}