/* Family Tree PWA - Landing styles */
:root{
  --bg-start:#5b21b6; /* purple-800 */
  --bg-end:#2563eb;   /* blue-600 */
  --text:#f8fafc;     /* slate-50 */
  --muted:#cbd5e1;    /* slate-300 */
  --primary:#22d3ee;  /* cyan-400 */
  --primary-600:#06b6d4; /* cyan-500 */
  --glass-bg:rgba(255,255,255,0.08);
  --glass-stroke:rgba(255,255,255,0.25);
  --shadow:0 10px 30px rgba(0,0,0,0.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,var(--bg-start),var(--bg-end));
  background-attachment:fixed;
}
.hero{
  min-height:100%; display:grid; place-items:center; padding:24px;
}
.glass{
  width:min(960px,92vw); padding:40px 32px; border-radius:20px;
  background:var(--glass-bg);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border:1px solid var(--glass-stroke);
  box-shadow:var(--shadow);
}
.brand{display:flex; align-items:center; gap:14px}
.logo{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(34,211,238,.15), rgba(255,255,255,.08));
  color:#e2e8f0; font-weight:700; letter-spacing:1px; border:1px solid rgba(255,255,255,.25);
}
h1{margin:0; font-size:clamp(28px,4vw,40px); font-weight:700}
.tagline{margin:8px 0 0; color:var(--muted)}
.hero-header{margin-bottom:28px}
.actions{display:flex; gap:12px; margin:20px 0 8px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; transition:.2s ease;
  border:1px solid rgba(255,255,255,.25);
}
.btn-primary{ color:#0f172a; background:var(--primary); }
.btn-primary:hover{ background:var(--primary-600); }
.btn-ghost{ color:var(--text); background:transparent; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }
.pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  margin-right:8px; color:var(--muted); font-size:14px;
}
.hero-foot{margin-top:16px}
.card-enter{opacity:0; transform: translateY(10px); transition:.5s ease}
.card-enter.in{opacity:1; transform:none}

/* Auth forms (login/register) */
.auth-wrap{min-height:100%; display:grid; place-items:center; padding:24px}
.auth-card{ width:min(560px,92vw); }
.auth-title{margin:0 0 8px}
.auth-sub{margin:0 0 20px; color:var(--muted)}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
.input{
  padding:12px 14px; border-radius:12px; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.25);
  outline:none; transition:.15s ease; width:100%;
}
.input select,.input option{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.input::-ms-expand{ display:none; }
select.input{ appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:linear-gradient(45deg, transparent 50%, rgba(255,255,255,.6) 50%), linear-gradient(135deg, rgba(255,255,255,.6) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px); background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:34px }
.input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(34,211,238,.25); }
.form-actions{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:10px }
.link{ color:var(--primary); text-decoration:none }
.link:hover{ text-decoration:underline }

@media (max-width:520px){ .actions{justify-content:stretch} .btn{flex:1} }

/* Wizard additions */
.steps{display:flex; flex-direction:column; gap:14px; margin:14px 0 22px}
.steps-indicator{display:flex; align-items:center; gap:8px}
.dot{width:24px; height:24px; border-radius:999px; display:grid; place-items:center; font-size:12px; color:#0f172a; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.8)}
.dot.active{background:var(--primary); border-color:var(--primary)}
.progress{height:8px; background:rgba(255,255,255,.12); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.18)}
.progress-bar{height:100%; width:0; background:linear-gradient(90deg, var(--primary), #a78bfa); transition:width .25s ease}
.panel{margin-top:6px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid-2 .field{margin:0}
.dyn-row{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)) auto; gap:10px; padding:10px; margin:10px 0; border:1px solid rgba(255,255,255,.18); border-radius:12px; background:rgba(255,255,255,.05)}
@media (max-width:900px){ .dyn-row{grid-template-columns:1fr 1fr; } }
/* Ensure hidden attribute truly hides in all browsers */
[hidden]{ display:none !important; }

/* Icon utilities */
.icon { width: 1.1em; height: 1.1em; display:inline-block; vertical-align:middle; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:var(--text); cursor:pointer; }
.icon-btn .icon { width:1.2em; height:1.2em; }
.btn .icon { width:1.1em; height:1.1em; }
.label { margin-left:6px; }
@media (max-width:480px){ .btn .label { display:none; } }

/* Ensure native dropdowns (select/options) are legible across themes */
select, select option, select optgroup {
  color:#0f172a !important; /* dark text so options are visible on white system menus */
}
select {
  background-color:#ffffff; /* most dropdown UIs render white lists; match the control */
  border-color:#cbd5e1;
}
/* When used on dark/glass backgrounds, keep the control readable while the menu stays dark text */
.glass select { color:#0f172a; background-color:#ffffff; border-color:#cbd5e1; }

/* --- Brand logo refinements (prevent distortion, add white background) --- */
.brand .image-holder{
  width:60px; height:60px; background:#ffffff; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.12); border:1px solid rgba(0,0,0,.08);
  padding:4px; overflow:hidden;
}
.brand .image-holder img.logo{
  width:100%; height:auto; object-fit:contain; display:block;
  background:none; border:none; border-radius:0; padding:0; /* override earlier .logo gradient/border */
  box-shadow:none; color:inherit; letter-spacing:normal;
}
@media (max-width:520px){ .brand .image-holder{width:50px; height:50px; border-radius:14px;} }
/* --- End brand logo tweaks --- */