/* ===== Registration Page Styles ===== */
:root{
  --brand-teal:#117e77; --brand-deep:#0b3b3a; --brand-gold:#e3b34b; --brand-orange:#d96a2b; --brand-cream:#f5e7c6;
  --bg: radial-gradient(900px 600px at -10% -10%, rgba(245,231,198,0.75) 0%, transparent 60%),
        radial-gradient(900px 600px at 110% 0%, rgba(17,126,119,0.12) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff, #f8fafc);
  --panel: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
  --glass: rgba(255,255,255,0.65); --glass-strong: rgba(255,255,255,0.86);
  --text:#0f172a; --muted:#64748b; --accent:var(--brand-teal);
  --border:1px solid rgba(2,6,23,0.08); --shadow:0 10px 30px rgba(2,6,23,0.08), inset 0 1px 0 rgba(255,255,255,0.6); --radius:18px;
  --ok:#16a34a; --danger:#ef4444;
}

[data-theme="dark"]{ 
  --bg:radial-gradient(1200px 800px at 20% -10%, rgba(17,126,119,0.35) 0%, transparent 60%),radial-gradient(1000px 800px at 120% 10%, rgba(227,179,75,0.15) 0%, transparent 60%),linear-gradient(180deg, #0b1217, #0b1217); 
  --panel:linear-gradient(180deg, #18222b, #0f1720); 
  --glass:rgba(255,255,255,0.08); --glass-strong:rgba(255,255,255,0.14); 
  --text:#e5e7eb; --muted:#9ca3af; 
  --border:1px solid rgba(255,255,255,0.15); 
  --shadow:0 10px 30px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06); 
}

*{box-sizing:border-box}
body{margin:0;font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial; color:var(--text); background-image:var(--bg);}
.container{max-width:1200px;margin:0 auto;padding:24px;}

/* Breadcrumbs */
.breadcrumbs{margin:16px 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.breadcrumbs a{color:var(--muted); text-decoration:none; padding:6px 10px; background:var(--glass); border:var(--border); border-radius:999px}
.breadcrumbs .current{color:var(--text); background:transparent; padding:0; box-shadow:none; border:none}

/* Stepper */
.stepper{display:flex; gap:8px; align-items:center; padding:10px 12px; background:var(--glass); border:var(--border); border-radius:14px; box-shadow:var(--shadow);}
.step{display:flex; align-items:center; gap:8px;}
.dot{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;border:var(--border);background:var(--glass)}
.step.active .dot{background:linear-gradient(135deg, rgba(17,126,119,.95), rgba(11,59,58,.95)); color:#fff}
.step .label{font-weight:700}

/* Layout */
.grid{display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:16px}
@media (max-width: 980px){ .grid{grid-template-columns: 1fr;} }

/* Cards */
.card{background:var(--glass);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}

/* Forms */
.form{padding:14px}
.form h2{margin:0 0 8px 0; font-size:18px}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.row-3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px}
.row-1{display:grid; grid-template-columns: 1fr; gap:10px}
@media (max-width:700px){ .row, .row-3{grid-template-columns:1fr;} }

.field{display:grid; gap:6px}
.label{font-size:12px; color:var(--muted)}
input, select, textarea{padding:12px 14px; border-radius:12px; border:var(--border); background:var(--glass); color:var(--text); box-shadow:var(--shadow)}
.hint{font-size:12px; color:var(--muted)}
.error{font-size:12px; color:var(--danger);}
.success-hint{font-size:12px; color:var(--ok);}
.switch-lg{display:flex; align-items:center; gap:12px; padding:10px 12px; border:var(--border); background:var(--glass); border-radius:12px}

/* Summary/Side */
.side{padding:14px; position:sticky; top:84px}
.side h3{margin:0 0 8px 0; font-size:16px}
.side .box{padding:12px; border:var(--border); border-radius:12px; background:var(--glass)}
.strength{height:8px;border-radius:999px;background:rgba(2,6,23,0.08); overflow:hidden}
.strength > div{height:100%; width:0%; background:linear-gradient(90deg, var(--brand-orange), var(--brand-teal)); transition:width .25s ease}

/* Dark mode legibility */
select, input, textarea { color: var(--text); }
select option { color: var(--text); background: var(--panel); }
[data-theme="dark"] select { background: var(--glass-strong); }

[hidden]{display:none !important}
button{color:var(--text)}
.primary{border-radius:14px;border:var(--border);background:linear-gradient(135deg, rgba(17,126,119,.95), rgba(11,59,58,.95));padding:14px 18px;font-weight:800;cursor:pointer;color:#fff}
.secondary{border-radius:14px;border:var(--border);background:var(--glass);padding:12px 16px;cursor:pointer}

/* Success state */
.success{display:grid; gap:10px; align-items:center; justify-items:center; text-align:center; padding:24px}

/* Toast/Popup notifications */
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}