/* Shared authentication controls. Layout belongs to each page. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 22px; border:1px solid transparent; border-radius:var(--radius-control); font:600 14px/1.4 var(--sans); text-decoration:none; cursor:pointer; }
.btn.primary { background:var(--btn-top); color:var(--btn-ink); }
.btn.primary:hover { background:var(--btn-hover); color:var(--btn-ink); }
.btn:disabled { opacity:.55; cursor:wait; }
.btn[hidden] { display:none; }
/* Existing account form and billing entry styles. */
/* 登录区（老页面整段搬来，样式因为不再引 app.css 在这里重给） */
#login .card{background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  padding:30px;max-width:420px}
#login h2{font-size:24px;margin-bottom:10px}
#login .hint{font-size:14px;color:var(--mut);margin-bottom:20px}
#login label{display:block;font-size:13px;color:var(--mut);margin-bottom:6px}
#login input{width:100%;height:44px;padding:0 14px;border-radius:8px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:16px/1 ui-sans-serif;transition:border-color .2s}
#login input::placeholder{color:var(--mut)}
#login input:focus{outline:none;border-color:color-mix(in srgb,var(--amber) 50%,transparent)}
#login input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#login .field{margin-bottom:16px}
/* Turnstile 的落点：空着不占位；真弹出来时和按钮留一行距 */
.turnstile-slot:not(:empty){margin-bottom:14px}
#login .btn{border:0;cursor:pointer}
.linklike{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;
  font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.linklike:hover{color:var(--ink)}
/* 提示行预留一行高：报错出现时不把下面顶开 */
#login .status{font-size:13px;color:var(--mut);margin-top:14px;min-height:1lh}
#login .status[data-state="error"]{color:var(--danger)}
#login .status .muted{display:block;color:var(--mut);margin-top:4px}
.mail-links{display:flex;gap:16px;margin-top:14px;font-size:13px}
/* display:flex 会压过 hidden 属性的 UA 样式——不补这条，发码前链接就露出来 */
.mail-links[hidden]{display:none}
.mail-links a{color:var(--blue)}
.dev-link{display:block;font-size:13px;color:var(--amber);margin-top:8px}
/* Google 按钮：Google 规范的 dark 主题（深底、灰描边、浅字、左侧四色 G），
   浅色模式下换回 light 主题的白底——两套都在 token 块里。
   #login .btn 把 border 抹成 0，这一条选择器更具体，把边框加回来 */
#login .btn.google{width:100%;background:var(--g-bg);color:var(--g-ink);
  border:1px solid var(--g-line);font-weight:500;font-size:15px;margin-bottom:2px}
#login .btn.google:hover{background:var(--g-hover)}
#login .btn.google svg{width:18px;height:18px;flex:0 0 auto}
/* display:inline-flex 会压过 hidden 的 UA 样式——不补这条，没配 Google 的部署
   会看到一个死按钮（.mail-links 上面栽过同一个坑） */
#login .btn.google[hidden]{display:none}
/* 分隔线：两侧各一条细线夹住一个「or」 */
#login .login-or{display:flex;align-items:center;gap:12px;margin:18px 0;
  font-size:13px;color:var(--mut)}
#login .login-or::before,#login .login-or::after{content:"";flex:1;height:1px;background:var(--line)}
#login .login-or[hidden]{display:none}
#login .login-alert{font-size:13px;color:var(--danger);line-height:1.55;margin-bottom:18px}
#login .login-terms{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--ink)}
#login .login-terms a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
#login .login-terms b{font-weight:600}
#login .login-alert.info{color:var(--ink);border-left:3px solid var(--accent);padding-left:12px}
#login .login-alert .muted{display:block;color:var(--mut);margin-top:4px}
.lang-picker{background:none;border:0;color:var(--mut);font:inherit;font-size:13px;cursor:pointer}
.lang-picker option{background:var(--bg2);color:var(--ink)}


@media (max-width:720px) { #login .card { padding:24px 20px; } }