/* Real account surfaces; independent of legacy demo state. */
.web-account [hidden], .signin-dialog [hidden] { display:none!important; }
.web-account { max-width:760px; margin:32px auto 72px; color:#153f35; }
.web-account>h1 { font-size:32px; margin:0 0 24px; }
#web-account-status:empty { display:none; }
#web-account-status { color:#58685f; line-height:1.5; }
.web-profile { display:flex; align-items:center; gap:20px; padding:28px; border:1px solid #e1e8e3; border-radius:24px; background:#f5f8f5; margin-bottom:20px; }
.web-profile>div { min-width:0; flex:1; }
.web-profile h2 { font-size:24px; line-height:1.3; margin:0 0 6px; overflow-wrap:anywhere; }
.web-profile p { margin:0; color:#627068; overflow-wrap:anywhere; font-size:15px; }
.web-profile .btn { flex-shrink:0; }
.web-profile-icon { width:64px; height:64px; flex-shrink:0; display:grid; place-items:center; border-radius:20px; background:#dfebe4; color:#075e4b; font-size:27px; font-weight:650; }
.web-member-badge { display:inline-block; margin-top:10px; font-size:12px; color:#075e4b; }
.web-account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.web-account-card { display:block; padding:24px; border:1px solid #e1e8e3; border-radius:20px; color:inherit; text-decoration:none; transition:background .15s; }
.web-account-card:hover { background:#f5f8f5; }
.web-account-card h2 { font-size:18px; margin:16px 0 6px; }
.web-account-card p { color:#627068; font-size:14px; margin:0; line-height:1.5; }
.web-account-alerts { background:#fff9ed; border-color:#f0e5cd; }
.web-account-settings { border:1px solid #e1e8e3; border-radius:20px; overflow:hidden; }
.web-account-settings>a { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; text-decoration:none; color:inherit; border-bottom:1px solid #e1e8e3; min-height:64px; }
.web-account-settings details { padding:20px 24px; }
.web-account-settings summary,.signin-privacy summary { cursor:pointer; }
.web-account-settings p,.signin-privacy p { line-height:1.65; color:#627068; font-size:14px; }
.web-logout { display:block; width:100%; min-height:52px; padding:14px; margin-top:28px; border:1px solid #ebd8d4; border-radius:14px; color:#a53c32; background:#fff; font-size:16px; cursor:pointer; }
.web-logout:hover { background:#fff5f3; }
.web-account :focus-visible,.signin-dialog :focus-visible { outline:3px solid #b28b2f; outline-offset:4px; }
dialog.signin-dialog { width:min(480px,calc(100% - 32px)); max-width:480px; padding:44px 32px 28px; color:#153f35; }
.signin-brand { display:block; margin:0 auto 20px; border-radius:12px; }
.signin-dialog #signin-title { font-size:30px; letter-spacing:-.6px; margin-bottom:10px; }
.signin-dialog .signin-description { font-size:16px; color:#627068; margin-bottom:28px; }
.signin-dialog .signin-options { gap:14px; width:100%; max-width:400px; margin-inline:auto; }
.signin-dialog .signin-provider { min-height:44px; border-radius:24px; padding:10px 20px; font-size:16px; grid-template-columns:20px 1fr 20px; }
.signin-dialog .signin-provider svg { width:20px; height:20px; }
.signin-google-slot { position:relative; height:44px; width:100%; }
#web-google-signin { height:44px; display:flex; align-items:center; justify-content:center; }
/* Preserve the official provider artwork; global line-icon strokes must not leak in. */
#web-google-signin svg { stroke:none; stroke-width:0; stroke-linecap:butt; stroke-linejoin:miter; }
.signin-google-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #dadce0; border-radius:24px; color:#68716d; font-size:14px; background:#fff; }
.signin-loading-dot { width:14px; height:14px; border:2px solid #e1e8e3; border-top-color:#627068; border-radius:50%; animation:signin-spin .8s linear infinite; }
@keyframes signin-spin { to { transform:rotate(360deg); } }
.signin-dialog .signin-status { min-height:21px; margin:12px 0 0; padding:0; background:transparent; border-radius:0; line-height:1.5; color:#8a3c2f; font-size:14px; text-align:center; }
.signin-dialog .signin-status:empty { display:block; }
.signin-dialog .signin-legal { margin:16px 0; color:#627068; font-size:13px; line-height:1.6; text-align:center; }
.signin-privacy { border-top:1px solid #e1e8e3; padding-top:16px; font-size:13px; }
.web-auth-retry { display:block; margin:12px auto; padding:10px 24px; border:1px solid #dce5df; border-radius:22px; background:#fff; color:#075e4b; cursor:pointer; }
.signin-dialog button:disabled,.web-account button:disabled { opacity:.55; cursor:wait; }
@media(max-width:600px) {
  .web-account { margin:20px auto 48px; }
  .web-profile { padding:20px; gap:14px; flex-wrap:wrap; }
  .web-profile h2 { font-size:21px; }
  .web-profile .btn { width:100%; }
  .web-profile-icon { width:52px; height:52px; border-radius:16px; }
  .web-account-card { padding:20px 16px; }
  .web-account-card h2 { font-size:17px; }
  dialog.signin-dialog { padding:44px 24px 24px; }
}
@media(prefers-reduced-motion:reduce) { .web-account-card { transition:none; } .signin-loading-dot { animation:none; } }