:root {
  --brand-blue: #3b82f6;
  --brand-cyan: #22d3ee;
  --brand-violet: #8b5cf6;
}

* { -webkit-font-smoothing: antialiased; }

body {
  background:
    radial-gradient(1200px 600px at 15% -5%, rgba(59,130,246,0.10), transparent 60%),
    radial-gradient(1000px 500px at 95% 0%, rgba(139,92,246,0.10), transparent 55%),
    #080b16;
  background-attachment: fixed;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1c2436; border-radius: 10px; border: 2px solid #080b16; }
::-webkit-scrollbar-thumb:hover { background: #2a3550; }

.grad-text {
  background: linear-gradient(92deg, var(--brand-cyan), var(--brand-blue) 55%, var(--brand-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-logo {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-violet));
}

.card-surface {
  background: linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0));
  background-color: #0f1626;
  border: 1px solid #1c2436;
}

.card-hover { transition: border-color .2s ease, transform .2s ease, background-color .2s ease; }
.card-hover:hover { border-color: #33415e; transform: translateY(-2px); }

.hero-panel {
  background:
    radial-gradient(700px 300px at 90% 20%, rgba(139,92,246,0.16), transparent 60%),
    radial-gradient(500px 260px at 15% 30%, rgba(59,130,246,0.14), transparent 60%),
    #0d1424;
  border: 1px solid #1c2436;
}

.nav-pill { transition: background-color .18s ease, color .18s ease; }
.nav-pill[data-active="true"] {
  background: linear-gradient(180deg, rgba(59,130,246,0.20), rgba(59,130,246,0.10));
  color: #dbeafe;
  border-color: rgba(59,130,246,0.35) !important;
}

.icon-tile {
  background: linear-gradient(160deg, rgba(59,130,246,0.14), rgba(139,92,246,0.10));
  border: 1px solid #223050;
}

.chip { border: 1px solid transparent; }
.chip-green { background: rgba(16,185,129,0.10); color: #34d399; border-color: rgba(16,185,129,0.25); }
.chip-blue  { background: rgba(59,130,246,0.10); color: #60a5fa; border-color: rgba(59,130,246,0.25); }
.chip-violet{ background: rgba(139,92,246,0.10); color: #a78bfa; border-color: rgba(139,92,246,0.25); }
.chip-amber { background: rgba(245,158,11,0.10); color: #fbbf24; border-color: rgba(245,158,11,0.25); }

.status-active  { background: rgba(16,185,129,0.10); color: #34d399; border: 1px solid rgba(16,185,129,0.30); }
.status-pending { background: rgba(245,158,11,0.10); color: #fbbf24; border: 1px solid rgba(245,158,11,0.30); }
.status-draft   { background: rgba(148,163,184,0.10); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-violet));
  transition: filter .18s ease, transform .1s ease;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }

.fade-in { animation: fadeIn .35s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.toast {
  min-width: 240px;
  border: 1px solid #223050;
  background: #0f1626;
  animation: toastIn .25s ease both;
}
@keyframes toastIn { from { opacity:0; transform: translateX(20px);} to {opacity:1; transform:none;} }

.skeleton { background: linear-gradient(90deg,#131b2c 25%,#1a2438 37%,#131b2c 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; }
@keyframes sk { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }

input, select, textarea { color-scheme: dark; }