/* ---------- THEME (LIGHT • matched radii to dark) ---------- */
:root{
  --bg-1:#f8f9fb; --bg-2:#eaeef4; --fg:#1f2330; --muted:#6b7280;
  --primary:#4f5dff; --accent:#00bcd4; --hot:#e83e8c;

  --glass: rgba(255,255,255,.78);
  --glass-top: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.32) 30%, rgba(255,255,255,.18) 100%);
  --stroke: rgba(17,24,39,.08);
  --inner-stroke: rgba(255,255,255,.55);

  --shadow: 0 14px 40px rgba(31,35,48,.10), 0 1px 0 rgba(255,255,255,.6) inset;
  --radius: 18px; /* same as dark */
}

html,body{height:100%;}
body{
  color:var(--fg);
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(79,93,255,.12) 0%, transparent 55%),
    radial-gradient(900px 700px at 120% 0%, rgba(0,188,212,.12) 0%, transparent 60%),
    radial-gradient(1200px 900px at 50% 110%, rgba(232,62,140,.10) 0%, transparent 65%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* GLASS PANELS — same 18px radius as dark */
.glass{
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--glass);
  background-image: var(--glass-top);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  overflow: hidden; /* keeps bottom corners visually rounded */
}
.glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px var(--inner-stroke) inset;
  opacity:.35; pointer-events:none;
}

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

/* CONTROLS — use Bootstrap default radius (~.375rem) like in dark */
.form-select, .form-control{
  background-color: rgba(255,255,255,.95);
  border:1px solid rgba(17,24,39,.12);
  color:var(--fg);
  width:100%;
  border-radius: .375rem; /* match dark (no custom override there) */
}
.form-select:focus, .form-control:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(79,93,255,.22);
}

/* SWITCH */
.form-switch .form-check-input{
  width:3.1rem; height:1.55rem;
  background:#eef2f7;
  border:1px solid rgba(17,24,39,.2);
  border-radius: 999px;
}
.form-switch .form-check-input:checked{
  background-image: linear-gradient(90deg, var(--primary), var(--accent));
  border-color: transparent;
}

/* BUTTONS — use Bootstrap default radius (~.375rem) like in dark */
.btn-ghost{
  color:#1f2330;
  border:1px solid rgba(17,24,39,.12);
  background: linear-gradient(180deg, #ffffffee, #f4f6faee);
  border-radius: .375rem; /* aligned to dark */
}
.btn-ghost:hover{
  border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(79,93,255,.15);
}
.btn-neon{
  background: linear-gradient(90deg, var(--accent), var(--primary));
  color:#fff; border:0;
  border-radius: .375rem; /* aligned to dark */
  box-shadow: 0 10px 26px rgba(79,93,255,.30);
  transition: transform .06s ease-in-out;
}
.btn-neon:active{ transform: translateY(1px); }

/* LAYOUT HELPERS */
.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}}

/* PASSWORD LIST — unchanged radii relative to dark */
#passwordList{font-family:"Courier New",monospace}
.password-item{
  display:flex; align-items:center; gap:.75rem;
  padding:.7rem 1rem;
  border-top:1px dashed rgba(17,24,39,.10);
  background: rgba(255,255,255,.94);
}
.password-item:first-child{ border-top:0; }
.password-number{ width:32px; text-align:right; opacity:.6; 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 pill stays pill (same as dark) */
.copy-btn{
  background:#fff;
  border:1px solid rgba(17,24,39,.12);
  border-radius: 999px;
  padding:.35rem .65rem;
  color: var(--primary);
}
.copy-btn:hover{
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,188,212,.18);
}

.password-item.copied{
  background: linear-gradient(90deg,#22c55e22,#22c55e11);
}

/* CONTAINER WIDTH */
.app{ max-width:1000px }

/* Parity override */
.p-1 { padding: 0rem !important; }

/* --- Normalize #listCard height to match dark --- */

/* 1) List header inside the card */
#listCard > .p-3 {
  padding: 1rem !important; /* same visual density as dark */
}

.p-3.border-bottom {border-color:rgba(17,24,39,.10)!important;}

/* 2) Password rows: same padding as dark */
#passwordList .password-item {
  padding: .6rem 1rem !important;  /* dark uses .6rem */
  border-top: 1px dashed rgba(17,24,39,.10);
}
#passwordList .password-item:first-child {
  border-top: 0 !important;
}

/* 3) Ensure the card’s box model is identical */
#listCard.glass {
  border-width: 1px;           /* match dark */
  box-sizing: border-box;      /* safety */
}

/* 4) Avoid unexpected margins from children */
#listCard .password-item,
#listCard .password-content,
#listCard .password-number {
  margin: 0; /* normalize */
}