:root{--bg:#0b0f16;--fg:#e5e7eb;--muted:#9ca3af;--card:#111827;--accent:#22d3ee;--danger:#ef4444;--ok:#10b981}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
.btn{display:inline-block;padding:.5rem 1rem;border-radius:.5rem;background:#1f2937;color:#fff}
.btn-primary{background:linear-gradient(135deg,#06b6d4,#22d3ee)}
.btn-danger{background:#b91c1c}
.card{background:var(--card);border:1px solid #1f2937;border-radius:.75rem;padding:1rem}
/* Utilities to tweak card padding when title sits directly above */
.card.pt-0{padding-top:0}
.input{width:100%;padding:.5rem .75rem;border:1px solid #374151;border-radius:.5rem;background:#0b1220;color:var(--fg)}
label{display:block;margin-bottom:.25rem;color:var(--muted)}
.header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid #111}
.container{max-width:1000px;margin:0 auto;padding:1rem}
.grid{display:grid;gap:1rem}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.5rem .75rem;border-bottom:1px solid #1f2937}
.badge{padding:.125rem .5rem;border-radius:.5rem;background:#0e7490}
.toast{position:fixed;right:1rem;bottom:1rem;background:#111827;color:#e5e7eb;border:1px solid #374151;padding:.75rem 1rem;border-radius:.5rem;display:none}

/* Starfield background for selected pages (sparkle, no blur) */
.starfield{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.starfield.hero{position:absolute;left:0;right:0;top:0;height:420px;z-index:0}
/* soft fade at bottom of hero starfield to avoid hard edge */
.starfield.hero:after,.starfield.hero:before{mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0))}
.starfield:before{content:"";position:absolute;inset:0;opacity:.95;animation:twinkle2 40s linear infinite, sparkle2 1.6s ease-in-out infinite; 
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2l2.39 4.84 5.34.78-3.86 3.76.91 5.31L12 14.9l-4.78 2.51.91-5.31L4.27 7.62l5.34-.78L12 2z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' opacity='0.9'><path d='M12 2l2.39 4.84 5.34.78-3.86 3.76.91 5.31L12 14.9l-4.78 2.51.91-5.31L4.27 7.62l5.34-.78L12 2z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' opacity='0.8'><path d='M12 2l2.39 4.84 5.34.78-3.86 3.76.91 5.31L12 14.9l-4.78 2.51.91-5.31L4.27 7.62l5.34-.78L12 2z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' opacity='0.7'><path d='M12 2l2.39 4.84 5.34.78-3.86 3.76.91 5.31L12 14.9l-4.78 2.51.91-5.31L4.27 7.62l5.34-.78L12 2z'/></svg>");
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
  background-position: 8% 16%, 28% 62%, 52% 26%, 76% 44%;
  background-size: 16px 16px, 18px 18px, 14px 14px, 17px 17px;
}
.starfield:after{content:"";position:absolute;inset:0;opacity:.9;animation:twinkle 30s linear infinite, sparkle 1.4s ease-in-out infinite; 
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2l2.39 4.84 5.34.78-3.86 3.76.91 5.31L12 14.9l-4.78 2.51.91-5.31L4.27 7.62l5.34-.78L12 2z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' opacity='0.9'><path d='M12 2l2.39 4.84 5.34.78-3.86 3.76.91 5.31L12 14.9l-4.78 2.51.91-5.31L4.27 7.62l5.34-.78L12 2z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' opacity='0.85'><path d='M12 2l2.39 4.84 5.34.78-3.86 3.76.91 5.31L12 14.9l-4.78 2.51.91-5.31L4.27 7.62l5.34-.78L12 2z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' opacity='0.75'><path d='M12 2l2.39 4.84 5.34.78-3.86 3.76.91 5.31L12 14.9l-4.78 2.51.91-5.31L4.27 7.62l5.34-.78L12 2z'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' opacity='0.95'><path d='M12 2l2.39 4.84 5.34.78-3.86 3.76.91 5.31L12 14.9l-4.78 2.51.91-5.31L4.27 7.62l5.34-.78L12 2z'/></svg>");
  background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  background-position: 12% 24%, 36% 80%, 60% 18%, 72% 54%, 88% 30%;
  background-size: 15px 15px, 17px 17px, 13px 13px, 14px 14px, 18px 18px;
}
@keyframes twinkle{
  0%{transform:translate(0,0)}
  25%{transform:translate(-6px,-8px)}
  50%{transform:translate(0,-12px)}
  75%{transform:translate(6px,-6px)}
  100%{transform:translate(0,0)}
}
/* subtle sparkle pulses on stars */
.starfield:after{animation:twinkle 10s linear infinite, sparkle 1.4s ease-in-out infinite}
.starfield:before{animation:twinkle2 14s linear infinite, sparkle2 1.6s ease-in-out infinite}
@keyframes sparkle{0%,100%{filter:brightness(1)}50%{filter:brightness(1.8)}}
@keyframes sparkle2{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
@keyframes twinkle2{
  0%{transform:translate(0,0)}
  33%{transform:translate(4px,8px)}
  66%{transform:translate(-8px,4px)}
  100%{transform:translate(0,0)}
}

/* Ensure content is above starfield */
header, main{position:relative;z-index:1}

/* Custom Scrollbar (Dark + Cyan Accent) */
html{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #1f2937 #0c1424; /* thumb track */
}
/* Chrome, Edge, Safari */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0c1424}
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(34,211,238,0.35), rgba(14,116,144,0.35));
  border: 2px solid #0c1424;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(34,211,238,0.55), rgba(14,116,144,0.55));
}

/* Modal animations */
#modal-overlay{opacity:0;transition:opacity .2s ease}
#modal-overlay.open{opacity:1}
#modal-card{transform:translateY(12px) scale(.96);opacity:0;transition:transform .2s ease, opacity .2s ease}
#modal-overlay.open #modal-card{transform:translateY(0) scale(1);opacity:1}

/* Form switch animation inside modal */
.form-panel{opacity:0;transform:translateY(8px);transition:opacity .18s ease, transform .18s ease}
.form-panel.show{opacity:1;transform:translateY(0)}