:root{--bg:#f9fbfc;--ink:#1F1C59;--muted:#6b6b7a;--navy:#1F1C59;--line:#e2e4ef;--ok:#2d7a4f;--err:#c0392b;--display:'Instrument Sans','Helvetica Neue',Arial,sans-serif;--display-weight:600;--display-stretch:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
.wrap{max-width:520px;margin:0 auto;padding:48px 22px 80px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 26px;text-align:center}
h1{font-family:var(--display);font-stretch:var(--display-stretch);font-weight:var(--display-weight);font-size:26px;line-height:1.22;letter-spacing:0;text-wrap:balance;margin:0 0 8px}
p{margin:10px 0;color:var(--muted)}
p.lead{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 15px/1 inherit;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn:hover{filter:brightness(0.97)}
.btn[disabled]{opacity:.6;cursor:default}
/* The official "Sign in with Google" pill: the generator's markup and CSS
   (light theme, pill, standard text), wired to Firebase's popup. */
.gsi-material-button{-moz-user-select:none;-webkit-user-select:none;user-select:none;-webkit-appearance:none;background-color:#fff;background-image:none;border:1px solid #747775;border-radius:20px;box-sizing:border-box;color:#1f1f1f;cursor:pointer;font-family:"Roboto",arial,sans-serif;font-size:14px;height:40px;letter-spacing:0.25px;outline:none;overflow:hidden;padding:0 12px;position:relative;text-align:center;transition:background-color .218s,border-color .218s,box-shadow .218s;vertical-align:middle;white-space:nowrap;width:auto;max-width:400px;min-width:min-content}
.gsi-material-button .gsi-material-button-icon{height:20px;margin-right:12px;min-width:20px;width:20px}
.gsi-material-button .gsi-material-button-content-wrapper{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;height:100%;justify-content:space-between;position:relative;width:100%}
.gsi-material-button .gsi-material-button-contents{flex-grow:1;font-family:"Roboto",arial,sans-serif;font-weight:500;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.gsi-material-button .gsi-material-button-state{transition:opacity .218s;bottom:0;left:0;opacity:0;position:absolute;right:0;top:0}
.gsi-material-button:disabled{cursor:default;background-color:#ffffff61;border-color:#1f1f1f1f}
.gsi-material-button:disabled .gsi-material-button-contents{opacity:38%}
.gsi-material-button:disabled .gsi-material-button-icon{opacity:38%}
.gsi-material-button:not(:disabled):active .gsi-material-button-state,.gsi-material-button:not(:disabled):focus .gsi-material-button-state{background-color:#303030;opacity:12%}
.gsi-material-button:not(:disabled):hover{box-shadow:0 1px 2px 0 rgba(60,64,67,.30),0 1px 3px 1px rgba(60,64,67,.15)}
.gsi-material-button:not(:disabled):hover .gsi-material-button-state{background-color:#303030;opacity:8%}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.role{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:#eef0f7;color:var(--navy)}
.role.none{background:rgba(192,57,43,.10);color:var(--err)}
.msg{margin-top:14px;font-size:14px;color:var(--err);min-height:1.2em}
.muted{color:var(--muted);font-size:13.5px}
a{color:var(--navy)}
/* Sticky footer: the page is a column, main takes the slack, so the footer
   sits at the viewport bottom on short pages. */
body{display:flex;flex-direction:column;min-height:100vh}
body>main{flex:1 0 auto}
body>footer{flex:0 0 auto}