:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#173047;background:#f5f7f8}
*{box-sizing:border-box} body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#fff 0,#f5f7f8 55%,#edf2f3 100%)}
button,input{font:inherit}.shell{width:min(620px,100%);margin:0 auto;padding:32px 18px 60px}.brand{display:flex;align-items:center;gap:12px;margin:8px 0 28px}
.mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#e8f7f3;color:#16a394;font-size:27px;font-weight:800}
.wordmark{font-size:34px;font-weight:850;letter-spacing:-1.5px;color:#203650;line-height:1}.wordmark span{color:#18a99a}.tagline{font-size:13px;color:#6f7f8d;margin-top:5px}
.card{background:white;border:1px solid #e5eaed;border-radius:24px;box-shadow:0 18px 55px rgba(31,55,73,.08);padding:28px}
.step{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#1aa394;margin-bottom:10px}.title{font-size:30px;line-height:1.05;margin:0 0 10px;letter-spacing:-.7px}
.sub{color:#71808c;line-height:1.5;margin:0 0 24px}.field{margin:16px 0}.field label{display:block;font-weight:750;font-size:14px;margin-bottom:7px}
.field input{width:100%;border:1.5px solid #dce3e7;border-radius:13px;padding:14px 15px;outline:none;background:#fbfcfc}.field input:focus{border-color:#19a596;box-shadow:0 0 0 3px rgba(25,165,150,.1)}
.pin{letter-spacing:.35em;font-size:19px}.actions{display:flex;gap:10px;margin-top:24px}.btn{border:0;border-radius:13px;padding:13px 18px;font-weight:800;cursor:pointer}.primary{background:#173a55;color:#fff;flex:1}.secondary{background:#eef3f5;color:#284052}.btn:disabled{opacity:.55;cursor:wait}
.error{margin-top:14px;padding:12px 14px;border-radius:12px;background:#fff0f0;color:#a33;font-size:14px}.success{margin-top:14px;padding:12px 14px;border-radius:12px;background:#ebfaf5;color:#13735f;font-size:14px}
.member{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #edf0f2}.member:last-child{border-bottom:0}.member strong{display:block}.meta{font-size:12px;color:#7b8993;margin-top:2px}
.module{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #edf0f2}.module:last-child{border:0}.module input{width:21px;height:21px;accent-color:#169f91}
.pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef8f6;color:#16897d;font-size:12px;font-weight:800}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:25px;letter-spacing:.12em;font-weight:850;background:#f1f6f7;padding:12px 14px;border-radius:12px;text-align:center}
.profile{width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid #e4eaed;background:#fff;padding:14px;border-radius:14px;margin:10px 0;cursor:pointer}.avatar{width:40px;height:40px;border-radius:50%;background:#e9f7f4;display:grid;place-items:center;font-weight:850;color:#178d81}
.row{display:flex;align-items:center;gap:12px;text-align:left}.tiny{font-size:12px;color:#788791}.setup-list{margin:18px 0 0;padding:0;list-style:none}.setup-list li{padding:7px 0;color:#526573}
@media(max-width:520px){.shell{padding:20px 12px 40px}.card{padding:22px 18px;border-radius:20px}.title{font-size:27px}}

.authStack{display:grid;gap:10px;margin-top:20px}
.googleBtn{width:100%;background:#fff;color:#243746;border:1.5px solid #dce3e7;display:flex;align-items:center;justify-content:center;gap:10px}
.googleG{font-weight:900;font-size:19px;color:#4285f4}
.divider{display:flex;align-items:center;gap:12px;color:#93a0aa;font-size:12px;margin:17px 0}
.divider:before,.divider:after{content:"";height:1px;background:#e4e9ec;flex:1}
.linkBtn{border:0;background:transparent;color:#168f84;font-weight:800;cursor:pointer;padding:5px}
.accountNote{font-size:12px;line-height:1.45;color:#7a8994;margin-top:14px}
.authEmail{font-size:13px;color:#526573;background:#f3f7f8;border-radius:10px;padding:10px 12px;margin-bottom:18px}

/* v0.2.1 reusable Family Settings */

/* v0.2.3 member profile fields */
.field select{
  width:100%;
  border:1.5px solid #dce3e7;
  border-radius:13px;
  padding:14px 15px;
  outline:none;
  background:#fbfcfc;
  color:#173047;
}
.field select:focus{
  border-color:#19a596;
  box-shadow:0 0 0 3px rgba(25,165,150,.1);
}
.profileFields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.checkOption{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 0 6px;
  font-weight:750;
  cursor:pointer;
}
.checkOption input{
  width:21px;
  height:21px;
  margin:0;
  accent-color:#169f91;
  flex:0 0 auto;
}
@media(max-width:520px){
  .profileFields{grid-template-columns:1fr}
}