:root {
  --bg: #0a1020;
  --panel: rgba(255,255,255,0.1);
  --panel-solid: #ffffff;
  --text: #eef2ff;
  --muted: #7c8aa5;
  --accent: #4f46e5;
  --accent-2: #06b6d4;
  --accent-3: #8b5cf6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --line: rgba(148,163,184,0.2);
  --applicant: #7c3aed;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #0f172a;
  background:
    radial-gradient(circle at 10% 15%, rgba(79,70,229,0.22), transparent 18%),
    radial-gradient(circle at 85% 12%, rgba(6,182,212,0.20), transparent 18%),
    radial-gradient(circle at 70% 80%, rgba(139,92,246,0.18), transparent 20%),
    linear-gradient(145deg, #eef4ff 0%, #f6f3ff 45%, #f5fbff 100%);
  min-height: 100vh;
  overflow-x: hidden;
}
body::before,
body::after {
  content: '';
  position: fixed;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .22;
  pointer-events: none;
  z-index: -1;
  animation: orbit 18s ease-in-out infinite;
}
body::before {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  top: -80px;
  left: -70px;
}
body::after {
  background: linear-gradient(135deg, var(--accent-3), var(--accent-2));
  right: -100px;
  bottom: -80px;
  animation-delay: -8s;
}
a { color: inherit; text-decoration: none; }
.container { width: min(1220px, calc(100% - 24px)); margin: 0 auto; }
.topbar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px);
  background: rgba(8, 15, 32, 0.76);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; }
.brand { color: white; font-weight: 700; display:flex; align-items:center; gap:10px; }
.brand-badge {
  width: 38px; height: 38px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display:grid; place-items:center; box-shadow: 0 10px 25px rgba(79,70,229,.30);
}
.nav { display:flex; gap:10px; flex-wrap: wrap; }
.nav a {
  color:#e2e8f0; padding:10px 14px; border-radius: 12px;
  transition: .25s ease; border:1px solid transparent;
}
.nav a:hover, .nav a.active { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.09); transform: translateY(-1px); }
.hero {
  position: relative; overflow:hidden; border-radius: 30px; padding: 28px; margin: 18px 0 22px;
  color: white;
  background:
    linear-gradient(135deg, rgba(4,12,28,.84), rgba(20,30,56,.72)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='520' viewBox='0 0 1440 520'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%234f46e5'/%3E%3Cstop offset='50%25' stop-color='%2306b6d4'/%3E%3Cstop offset='100%25' stop-color='%238b5cf6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='%23060b18' width='1440' height='520'/%3E%3Cg opacity='0.9'%3E%3Ccircle fill='url(%23g1)' cx='180' cy='100' r='180'/%3E%3Ccircle fill='url(%23g1)' cx='1240' cy='120' r='220'/%3E%3Ccircle fill='url(%23g1)' cx='720' cy='520' r='250'/%3E%3C/g%3E%3Cpath d='M0 356 C 200 276, 330 402, 550 318 S 970 242, 1440 330 L 1440 520 L 0 520 Z' fill='rgba(255,255,255,0.10)'/%3E%3Cpath d='M0 390 C 250 330, 350 430, 600 378 S 1020 300, 1440 392 L 1440 520 L 0 520 Z' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E") center/cover no-repeat;
  box-shadow: 0 24px 70px rgba(15,23,42,.20);
}
.hero::before {
  content:''; position:absolute; inset:auto 14% -120px auto; width:280px; height:280px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.24), transparent 65%);
  animation: float 6s ease-in-out infinite;
}
.hero::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 36%, transparent 52%);
  transform: translateX(-100%);
  animation: shine 8s linear infinite;
}
.hero-content { position: relative; z-index: 1; max-width: 820px; }
.hero h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.7rem); }
.hero p { margin: 0; color: rgba(255,255,255,.86); max-width: 720px; line-height: 1.6; }
.hero-chip {
  display:inline-flex; margin-bottom: 12px; padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); font-weight:700; font-size:.85rem;
}
.cards { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 22px; }
.card, .panel {
  background: rgba(255,255,255,.90); border:1px solid rgba(255,255,255,.72); border-radius: 24px;
  box-shadow: 0 16px 40px rgba(15,23,42,.08);
}
.card { padding: 18px; animation: rise .6s ease both; }
.card .label { color: var(--muted); font-size: .92rem; margin-bottom: 8px; }
.card .value { font-size: 1.75rem; font-weight: 700; color: #0f172a; }
.panel { padding: 22px; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 16px; }
.section-title h2, .section-title h3 { margin:0; }
.grid-2, .grid-3, .grid-4 { display:grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.field { display:flex; flex-direction:column; gap:8px; }
.field-span-2 { grid-column: span 2; }
.field label { font-weight:600; color:#0f172a; }
.field small { color: var(--muted); }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea, input[type="file"] {
  width: 100%; border:1px solid #cbd5e1; background: white; color: #0f172a; border-radius: 14px; padding: 12px 14px;
  outline: none; transition: .2s ease; font-size: .96rem;
}
select, option { color: #0f172a; background: white; }
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79,70,229,.12); }
button, .btn {
  border:0; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 14px; padding: 12px 16px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white;
  box-shadow: 0 14px 30px rgba(79,70,229,.18); transition: .25s ease;
}
button:hover, .btn:hover { transform: translateY(-1px); }
.btn-muted { background: #e2e8f0; color:#0f172a; box-shadow:none; }
.btn-danger { background: linear-gradient(135deg, #fb7185, #ef4444); }
.badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:.85rem; font-weight:700; }
.badge.pending { background:#fff7ed; color:#c2410c; }
.badge.approved, .badge.sanctioned, .badge.disposed { background:#ecfdf5; color:#047857; }
.badge.cancelled { background:#fef2f2; color:#b91c1c; }
.badge.credit, .badge.logined { background:#eff6ff; color:#1d4ed8; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; min-width: 1100px; }
th, td { text-align:left; padding: 14px 12px; border-bottom:1px solid #e2e8f0; vertical-align: top; }
th { color:#475569; font-size:.92rem; background:#f8fafc; position: sticky; top:0; }
.applicant-name { color: var(--applicant); font-weight: 700; }
.flash { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; }
.flash.success { background:#ecfdf5; color:#065f46; }
.flash.error { background:#fef2f2; color:#991b1b; }
.login-wrap { min-height: 100vh; display:grid; place-items:center; padding: 20px; }
.login-card { width:min(520px, 100%); padding: 26px; }
.muted { color: var(--muted); }
.checkbox-row { display:flex; align-items:center; gap:10px; padding-top: 8px; background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:14px; }
.subpanel { padding: 16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius: 18px; }
.hidden { display:none !important; }
.file-links { display:flex; flex-wrap:wrap; gap:8px; margin-top: 8px; }
.file-links a { background:#eef2ff; color:#3730a3; padding:8px 10px; border-radius: 12px; font-size:.88rem; }
.footer-space { height: 28px; }
@keyframes rise { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform: translateY(0);} }
@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-12px);} }
@keyframes orbit { 0%,100% { transform: translate3d(0,0,0) scale(1);} 50% { transform: translate3d(15px,-20px,0) scale(1.06);} }
@keyframes shine { from { transform: translateX(-120%);} to { transform: translateX(120%);} }
@media (max-width: 1100px) {
  .cards, .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .topbar-inner { flex-direction: column; align-items:flex-start; }
  .cards, .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .hero { padding: 22px; border-radius: 22px; }
  .panel, .card { border-radius: 18px; }
  .nav { width:100%; }
  .field-span-2 { grid-column: span 1; }
}