.account-bar{max-width:1200px;margin:14px auto;padding:12px 20px;border:1px solid #cde6ef;background:#fff;border-radius:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#164b67}.account-bar>div{display:flex;gap:8px;flex-wrap:wrap}.account-bar .primary,.account-bar .secondary{padding:9px 13px;font-size:14px;text-decoration:none}.plan-badge{display:inline-block;padding:3px 9px;border-radius:12px;background:#e5f5f2;color:#147559;font-size:12px}.plan-badge.vip{background:#fff0bd;color:#805000}#accountDialog label{display:block;margin:14px 0;font-weight:700}#accountDialog input{display:block;width:100%;box-sizing:border-box;padding:12px;margin-top:6px;border:1px solid #c7dde8;border-radius:12px;font:inherit}#accountDialog .primary{display:inline-block;text-decoration:none}.link-button{border:0;background:transparent;color:#087fbc;font:inherit;margin:15px 0;cursor:pointer}@media(max-width:650px){.account-bar{margin:10px;flex-direction:column;align-items:flex-start}.account-bar>div{width:100%}.account-bar .primary,.account-bar .secondary{font-size:12px;padding:9px}}

.sync-bar{max-width:1200px;margin:8px auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:#16644e}.sync-bar [data-status=error]{color:#9b4327}.sync-bar .secondary{padding:8px 12px;font-size:13px}@media(max-width:650px){.sync-bar{padding:0 14px;margin-bottom:14px;font-size:12px}}

/* Compact account control in the learning header. */
#profileNav[hidden],.sync-bar[hidden],#accountMessage[hidden]{display:none!important}
.account-bar.account-header{margin:0;padding:0;max-width:none;border:0;border-radius:0;background:transparent;gap:10px;flex:0 0 auto;color:inherit}
.account-login{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:14px;background:linear-gradient(180deg,#ffbe58,#ffa12a);border:1px solid #ffcf86;box-shadow:0 3px 0 #d67b16;color:#603800;font-size:14px;white-space:nowrap}
.account-login:hover{background:#ffb344}.account-logout{background:transparent;border:1px solid #ffffff42;color:inherit;border-radius:12px;padding:8px 12px;min-height:38px;font-size:12px;white-space:nowrap}.account-bar:not(.account-header) .account-logout{border-color:#d0e5ed;color:#256482}
#accountDialog{width:min(440px,calc(100vw - 28px));padding:28px;border:1px solid #d7e7ef;border-radius:24px;box-shadow:0 22px 70px #063f6330}
#accountDialog::backdrop{background:#06354f66;backdrop-filter:blur(4px)}#accountDialog .dialog-heading{align-items:center;margin-bottom:20px;gap:12px}#accountDialog .dialog-heading h2{font-size:24px;letter-spacing:-.4px}#accountDialog label{font-size:14px;margin:16px 0}#accountDialog input{min-height:46px;background:#f8fbfd;border-color:#d6e5ed}#accountDialog input:focus{background:#fff}#accountDialog form>.primary,#accountDialog>a.primary{width:100%;margin-top:8px;text-align:center}#accountDialog .link-button{display:block;text-align:center;width:100%;font-size:14px;margin:20px 0 0}#accountDialog .notice{margin:0 0 18px;font-size:14px}#accountDialog>p:not(.notice){font-size:14px;color:#537586;margin:0 0 18px}.account-name{font-size:14px;font-weight:700}
@media(max-width:760px){.account-bar.account-header{width:auto;flex-direction:row;align-items:center;gap:6px}.account-login{padding:9px 12px;font-size:13px;min-height:40px;border-radius:12px}.account-login svg{width:16px;height:16px}.account-header.signed-in .plan-badge{display:none}.account-header .account-logout{padding:6px 8px;font-size:11px}.site-header .profile-button{max-width:145px}.site-header #profileName{max-width:76px}#accountDialog{padding:22px}#accountDialog .dialog-heading h2{font-size:22px}}