:root {
--bg-1:#0f1226; --bg-2:#0b0e1e; --fg:#e9ecff; --muted:#a9b0d6; --primary:#6c7bff; --accent:#00e0ff; --hot:#ff5aa5; --glass:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.15); --shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); --radius:18px;  }

  body.light   {
--bg-1:#f8f9fb; --bg-2:#eaeef4; --fg:#222529; --muted:#6c757d; --primary:#5a67ff; --accent:#00bcd4; --hot:#e83e8c; --glass:rgba(255,255,255,.7); --stroke:rgba(0,0,0,.08); --shadow:0 12px 30px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.4);  }

 html,body  {
height:100%; }

 body  {
color:var(--fg); background: radial-gradient(1200px 800px at 20% -10%, #414573 0%, transparent 55%), radial-gradient(900px 700px at 120% 0%, #06a0ff33 0%, transparent 60%), radial-gradient(1200px 900px at 50% 110%, #9d456466 0%, transparent 65%), linear-gradient(160deg, var(--bg-1), var(--bg-2)); background-attachment: fixed;  }

 .glass  {
backdrop-filter:blur(14px) saturate(120%); background:var(--glass); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); }

 .sub  {
color:var(--muted) }

  .form-select,.form-control  {
background-color:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.16); color:#eaf0ff; width:100%; }

 .form-select:focus,.form-control:focus  {
border-color:#8ea0ff; box-shadow:0 0 0 .2rem #6c7bff33; }

 .form-switch .form-check-input  {
width:3.1rem; height:1.55rem; background:#222543; border:1px solid rgba(255,255,255,.15);  }

 .form-switch .form-check-input:checked  {
background-image:linear-gradient(90deg, var(--primary), var(--accent)); border-color:transparent;  }

 .btn-ghost  {
color:#dfe6ff; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg, #ffffff12, #ffffff08);  }

 .btn-ghost:hover  {
border-color:#a7b2ff;  }

 .btn-neon  {
background:linear-gradient(90deg, var(--accent), var(--primary)); color:#0e1022; border:0; box-shadow:0 8px 28px rgba(108,123,255,.35);  }

  .header  {
display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap }

 .kv  {
display:grid;grid-template-columns:1fr auto;align-items:center;gap:.75rem 1rem }

 @media (max-width:768px)  {
  .kv  {
  grid-template-columns:1fr }

 }

  #passwordList  {
font-family:"Courier New",monospace }

 .password-item  {
display:flex;align-items:center;gap:.75rem;padding:.6rem 1rem;border-top:1px dashed rgba(255,255,255,.18) }

 .password-item:first-child  {
;border-top:0px dashed rgba(255,255,255,.18) }

 .password-number  {
width:32px;text-align:right;opacity:.7;font-weight:700;user-select:none }

 .password-content  {
display:flex;align-items:center;gap:.6rem;flex:1 1 auto;min-width:0 }

 .password-text  {
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:text }

 .copy-btn  {
background:transparent;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.35rem .6rem;color:#dfe6ff }

 .copy-btn:hover  {
border-color:#a7b2ff }

 .password-item.copied  {
background:linear-gradient(90deg,#16a34a22,#16a34a11) }

  .app  {
max-width:1000px }

 .p-1   {
padding: 0rem !important; }

/* ===== SweetAlert2 — DARK MODE ===== */
.swal2-popup {
  background: #1a1d2e !important;
  color: var(--fg) !important;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.swal2-title { color: var(--fg) !important; }
.swal2-html-container { color: var(--muted) !important; }

/* Buttons */
.swal2-confirm {
  background: linear-gradient(90deg, var(--accent), var(--primary)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: .375rem !important;
  box-shadow: 0 8px 22px rgba(108,123,255,.30) !important;
}
.swal2-cancel {
  background: rgba(255,255,255,.08) !important;
  color: var(--fg) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: .375rem !important;
}

/* Inputs inside SweetAlert */
.swal2-input, .swal2-select, .swal2-textarea {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: var(--fg) !important;
}
.swal2-input:focus, .swal2-select:focus, .swal2-textarea:focus {
  background: rgba(255,255,255,.06) !important;
  border-color: #8ea0ff !important;
  box-shadow: 0 0 0 .2rem #6c7bff33 !important;
  color: var(--fg) !important;
}

/* ===== Form controls — DARK focus stays dark ===== */
.form-select:focus,
.form-control:focus {
  background-color: rgba(255,255,255,.05); /* keep dark */
  border-color: #8ea0ff;
  color: #eaf0ff;
  box-shadow: 0 0 0 .2rem #6c7bff33;
}

/* Autofill (Chrome/Edge/Safari) — keep dark */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #eaf0ff !important;
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.05) inset !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.05) inset !important;
  caret-color: #eaf0ff !important;
}
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset, 0 0 0 .2rem #6c7bff33 !important;
  box-shadow: 0 0 0px 1000px rgba(255,255,255,.06) inset, 0 0 0 .2rem #6c7bff33 !important;
}

.p-3.border-bottom {border-color:rgba(255,255,255,.15)!important;}

footer a, footer a:hover, footer a:active, footer a:visited, { color: #fff!important; }



/* ---- SPACE BACKGROUND (dense stars + fog + rotation) ---- */
.space-bg{
  --bg-1:#0a0f23;
  --bg-2:#070b18;

  --fog-a:#6b63ff18;
  --fog-b:#0aa0ff16;
  --fog-c:#e045a816;

  background-repeat: no-repeat;
  min-height: 100vh;
  position: relative;
  isolation:isolate;
}

/* --- MAIN STARFIELD (rotating) --- */
.space-bg::before{
  content:"";
  position: fixed;
  inset:-50%;
  pointer-events:none;
  z-index:-2;

  background:
    /* lots of tiny stars */
    radial-gradient(1px 1px at 10% 20%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 65%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 80%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 90%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 42% 78%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 65%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 35%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 62% 68%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 22%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 15%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 42%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 80% 60%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 83% 73%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 40%, #fff2 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 85%, #fff2 50%, transparent 51%),
    /* medium stars */
    radial-gradient(2px 2px at 22% 52%, #fff7 50%, transparent 51%),
    radial-gradient(2px 2px at 65% 12%, #fff9 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 66%, #fff9 50%, transparent 51%),
    radial-gradient(2px 2px at 35% 40%, #fff9 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 28%, #fff9 50%, transparent 51%),
    /* a few larger bright ones */
    radial-gradient(3px 3px at 48% 18%, #ffff 60%, transparent 61%),
    radial-gradient(3px 3px at 72% 58%, #ffff 60%, transparent 61%),
    radial-gradient(3px 3px at 28% 72%, #ffff 60%, transparent 61%),
    radial-gradient(3px 3px at 12% 32%, #ffff 60%, transparent 61%);

  background-size:100% 100%;
  border-radius:50%;
  animation: rotate-sky 600s linear infinite;
}

/* --- FOREGROUND TWINKLES --- */
.space-bg .twinkle{
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(2px 2px at 20% 30%, #fff 60%, transparent 61%),
    radial-gradient(2px 2px at 50% 70%, #fff 60%, transparent 61%),
    radial-gradient(2px 2px at 70% 20%, #fff 60%, transparent 61%),
    radial-gradient(2px 2px at 90% 60%, #fff 60%, transparent 61%);
  animation: twinkle 6s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity:.8;
}

/* Animations */
@keyframes rotate-sky{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}
@keyframes twinkle{
  0%{opacity:.4; transform:scale(1)}
  50%{opacity:1; transform:scale(1.2)}
  100%{opacity:.6; transform:scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .space-bg::before,
  .space-bg .twinkle{ animation:none }
}