:root{
      --bg: #ffffff;
      --text: #0f172a;
      --muted: #64748b;
      --line: #e5e7eb;
      --field: #eef3f7;
      --field2:#f3f6f9;
      --primary:#2ea4d6;
      --primary2:#5dbbe2;
      --shadow: 0 10px 25px rgba(2, 8, 23, .08);
      --radius: 18px;
      --radius2: 14px;
      --danger: #e11d48;
      --ok: #16a34a;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      background: var(--bg);
      color: var(--text);
    }

    .page{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:28px 18px 42px;
    }

    .wrap{
      width: min(860px, 100%);
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:16px;
    }

    h1{
      font-size: 28px;
      font-weight: 600;
      margin:0 0 10px;
      letter-spacing:.2px;
    }

    .hero{
      width: min(720px, 100%);
      border-radius: 22px;
      background: linear-gradient(90deg, #d6ebf8 0%, #d6e9f6 60%, #d5e8f5 100%);
      box-shadow: var(--shadow);
      padding: 18px 18px;
      display:flex;
      align-items:center;
      gap:16px;
      border: 1px solid rgba(255,255,255,.6);
    }

    .hero .logo{
      width:64px;height:64px;
      border-radius: 18px;
      overflow: hidden;
      background: #2ea4d6;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      box-shadow: 0 10px 18px rgba(46,164,214,.25) inset, 0 8px 16px rgba(2,8,23,.08);
    }
    .hero .logo img{
      width:100%;
      height:100%;
      object-fit: cover;
      display:block;
    }

    .hero .txt h2{
      margin:0;
      font-size: 22px;
      font-weight: 800;
      letter-spacing:.1px;
    }
    .hero .txt p{
      margin:6px 0 0;
      color: #334155;
      line-height:1.35;
      font-size: 14px;
      max-width: 520px;
    }

    .panel{
      width: min(720px, 100%);
      padding: 12px 0 0;
    }

    .segmented{
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 4px 0 14px;
    }
    .segmented .seg{
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 999px;
      overflow:hidden;
      display:flex;
      box-shadow: 0 8px 18px rgba(2,8,23,.05);
    }
    .segmented button{
      appearance:none;
      border:0;
      background:transparent;
      padding: 9px 18px;
      font-size: 14px;
      color:#0f172a;
      display:flex;
      align-items:center;
      gap:8px;
      cursor:pointer;
      min-width: 140px;
      justify-content:center;
    }
    .segmented button .ico{
      width:16px;height:16px;
      display:inline-grid;
      place-items:center;
      opacity:.9;
      font-weight:700;
    }
    .segmented button.active{
      background: #cfe9f7;
      box-shadow: inset 0 0 0 1px rgba(46,164,214,.25);
      font-weight: 600;
    }
    .segmented button:not(.active){opacity:.9}
    .segmented button:focus-visible{
      outline: 3px solid rgba(46,164,214,.35);
      outline-offset: 2px;
    }

    form{
      width:100%;
      display:flex;
      flex-direction:column;
      gap:12px;
      align-items:center;
    }

    .field{
      width: min(640px, 100%);
    }

    .input{
      position:relative;
      width:100%;
      height:54px;
      border-radius: 16px;
      background: var(--field);
      border: 1px solid #d6dde6;
      display:flex;
      align-items:center;
      gap:10px;
      padding: 0 14px 0 48px;
      transition: border-color .15s, box-shadow .15s, background .15s;
    }

    .input:focus-within{
      border-color: rgba(46,164,214,.55);
      box-shadow: 0 0 0 4px rgba(46,164,214,.12);
      background: var(--field2);
    }

    .input.invalid{
      border-color: rgba(225,29,72,.65);
      box-shadow: 0 0 0 4px rgba(225,29,72,.10);
      background: #fff1f2;
    }

    .input input{
      width:100%;
      border:0;
      outline:none;
      background:transparent;
      font-size: 15px;
      color: var(--text);
    }

    .input input::placeholder{
      color:#94a3b8;
      font-style: italic;
    }

    .left-ico{
      position:absolute;
      left:14px;
      width:22px;height:22px;
      opacity:.65;
    }
    .left-ico svg{width:22px;height:22px;fill:#0f172a}

    .right-btn{
      position:absolute;
      right:12px;
      width:36px;height:36px;
      border-radius: 999px;
      border:0;
      background: transparent;
      cursor:pointer;
      display:grid;
      place-items:center;
      opacity:.7;
      transition: opacity .15s, background .15s;
    }
    .right-btn:hover{opacity:1;background: rgba(15,23,42,.06)}
    .right-btn:focus-visible{
      outline: 3px solid rgba(46,164,214,.35);
      outline-offset: 2px;
    }
    .right-btn svg{width:20px;height:20px;fill:#0f172a}

    .error{
      margin:8px 0 0;
      color: var(--danger);
      font-size: 13px;
      display:none;
      padding-left: 10px;
    }
    .error.show{display:block}

    .captchaRow{
      width: min(640px, 100%);
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:16px;
      margin-top: 4px;
    }

    .captchaBox{
      display:flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 10px;
      box-shadow: 0 10px 20px rgba(2,8,23,.05);
      min-height: 66px;
    }

    .captchaHint{
      font-size: 13px;
      color: var(--muted);
      line-height:1.35;
    }

    .actions{
      width: min(640px, 100%);
      display:flex;
      justify-content:flex-end;
      margin-top: 4px;
    }

    .btn{
      border:0;
      height:44px;
      padding: 0 18px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--primary2), var(--primary));
      color:#fff;
      font-weight: 700;
      letter-spacing:.2px;
      display:inline-flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      box-shadow: 0 12px 24px rgba(46,164,214,.24);
      transition: transform .05s, filter .15s, opacity .15s;
      user-select:none;
    }
    .btn:active{transform: translateY(1px)}
    .btn[disabled]{
      opacity:.55;
      cursor:not-allowed;
      filter: grayscale(.15);
      box-shadow: none;
    }
    .btn svg{width:18px;height:18px;fill:#fff}

    .footer{
      width:min(720px, 100%);
      text-align:center;
      color: var(--muted);
      font-size: 13px;
      margin-top: 6px;
    }
    .footer a{
      color: var(--primary);
      text-decoration: none;
      font-weight: 600;
    }
    .footer a:hover{text-decoration: underline}

    .toast{
      width: min(640px, 100%);
      display:none;
      border-radius: 14px;
      padding: 12px 14px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 10px 18px rgba(2,8,23,.05);
      background:#fff;
      margin-top: 6px;
      align-items:flex-start;
      gap:10px;
    }
    .toast.show{display:flex}
    .toast .dot{
      width:10px;height:10px;border-radius:999px;margin-top:4px;
      background: var(--ok);
      flex:0 0 auto;
    }
    .toast .t{
      font-size: 13px;
      color:#0f172a;
      line-height:1.35;
    }
    .toast.error .dot{background: var(--danger)}
    .toast.error{border-color: rgba(225,29,72,.25); background:#fff1f2}

    @media (max-width:520px){
      .hero{padding:14px}
      .segmented button{min-width: 0; padding: 9px 14px}
      .captchaRow{flex-direction:column; align-items:flex-start}
      .actions{justify-content:center}
    }

    /* ===== CGU MODAL ===== */
.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.modal.show{
  display:block;
}

.modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(2px);
}

.modal-box{
  position:relative;
  width: min(900px, 95vw);
  height: min(80vh, 700px);
  margin: 5vh auto;
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.modal-header{
  height:52px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e5e7eb;
  font-weight:600;
  font-size:14px;
}

.modal-close{
  border:0;
  background:transparent;
  font-size:18px;
  cursor:pointer;
  opacity:.7;
}
.modal-close:hover{opacity:1}

.modal iframe{
  flex:1;
  width:100%;
  border:0;
}

/* ===== Join family checkbox ===== */
.checkrow{
  width: min(640px, 100%);
  display:flex;
  align-items:flex-start;
  gap:10px;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.35;
  user-select:none;
}

.checkrow input[type="checkbox"]{
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor:pointer;
}

#familyCodeBlock .input{
  background: var(--field);
}