.account-panel{margin:0 0 26px;padding:22px 24px;background:#fff;border:1px solid var(--line,#e5ebf2);border-radius:12px;color:var(--ink,#20344a);box-shadow:0 2px 8px #17365008}
.account-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.account-panel-heading h2{font-size:18px;line-height:1.35;letter-spacing:-.3px;color:var(--navy,#173650)}
.account-kicker{margin:0 0 3px;color:#728398;font-size:10px;font-weight:700;letter-spacing:1.8px;line-height:1.4}
.account-state-pill{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:3px 10px;border-radius:999px;background:#f0f4f8;color:#53677c;font-size:12px;white-space:nowrap}
.account-state-pill i{width:7px;height:7px;border-radius:50%;background:#7b8fa5}
.account-state-synced{background:#eef7f3;color:#286d59}.account-state-synced i{background:#27816b}
.account-state-syncing{background:#eef4fc;color:#285c94}.account-state-syncing i{background:#3d7fc0;animation:account-pulse 1.1s ease-in-out infinite}
.account-state-offline,.account-state-error,.account-state-blocked{background:#fff5e8;color:#875e20}.account-state-offline i,.account-state-error i,.account-state-blocked i{background:#b87920}
.account-state-conflict{background:#fff0ed;color:#9a493b}.account-state-conflict i{background:#bf5b48}
@keyframes account-pulse{50%{opacity:.35;transform:scale(.75)}}
.account-user-row{display:flex;align-items:center;gap:13px;min-width:0;padding:2px 0 16px;border-bottom:1px solid #edf1f5}
.account-avatar{position:relative;display:grid;place-items:center;width:54px;height:54px;flex:0 0 54px;overflow:hidden;border:1px solid #dce6f0;border-radius:12px;background:#eaf1fa;color:#1f4f80}
.account-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:transparent}
.account-avatar-fallback{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;background:#eaf1fa;color:#245f9d;font-weight:700}
.account-avatar-fallback i{position:absolute;width:8px;height:8px;background:#8eb5df;opacity:.68}.account-avatar-fallback i:nth-child(1){left:5px;top:6px}.account-avatar-fallback i:nth-child(2){right:5px;top:10px;background:#bfd3e9}.account-avatar-fallback i:nth-child(3){right:9px;bottom:5px;background:#6e9dcd}.account-avatar-fallback b{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border:1px solid #bbd0e5;border-radius:7px;background:#f7fafe;font-size:17px;font-weight:700;line-height:1}
.account-user-copy{display:grid;gap:2px;min-width:0;flex:1}.account-user-copy strong{overflow-wrap:anywhere;font-size:16px;line-height:1.4;color:var(--navy,#173650)}.account-user-copy span{overflow-wrap:anywhere;font-size:13px;color:var(--muted,#5a6b7f)}
.account-icon-button,.account-button,.account-file-label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border:1px solid #d4dfeb;border-radius:8px;background:#fff;color:#294965;font-size:14px;line-height:1.3;font-weight:600;text-align:center;cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}
.account-icon-button{padding:7px 11px;font-size:13px;white-space:nowrap}.account-icon-button:hover,.account-button-secondary:hover,.account-file-label:hover{background:#f1f5fa;border-color:#aebfd1}
.account-button-primary{border-color:#1c4b73;background:#1c4b73;color:#fff}.account-button-primary:hover{background:#153d60;border-color:#153d60}
.account-button-quiet{border-color:transparent;background:transparent;color:#607489}.account-button-quiet:hover{background:#f3f6f9;color:#294965}
.account-button:focus-visible,.account-icon-button:focus-visible,.account-file-label:focus-visible,.account-link-button:focus-visible,.account-dialog-close:focus-visible,.account-avatar-tools input:focus-visible{outline:3px solid #2f6bd6;outline-offset:3px}
.account-sync-copy{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:13px 0;color:#52677d}.account-sync-copy p{font-size:13px;line-height:1.6}.account-sync-copy span{flex:0 0 auto;color:#8190a0;font-size:12px}
.account-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.account-privacy-note{font-size:12px;color:#718297}
.account-migration{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:17px;padding:15px 16px;border:1px solid #dce7f2;border-radius:9px;background:#f7faff}.account-migration strong{font-size:14px;color:#294965}.account-migration p{margin-top:3px;color:#64788d;font-size:12px;line-height:1.5}
.account-inline-error{margin-top:12px;padding:9px 11px;border-radius:7px;background:#fff0ed;color:#9a493d;font-size:13px;line-height:1.5}
.account-logged-out-copy{display:flex;align-items:center;gap:16px;margin:2px 0 17px}.account-logged-out-copy>div{min-width:0}.account-logged-out-copy strong{display:block;margin-bottom:3px;color:#294965;font-size:15px}.account-logged-out-copy p{max-width:650px;color:#64788d;font-size:13px;line-height:1.65}
.account-mark{position:relative;display:grid;place-items:center;width:53px;height:53px;flex:0 0 53px;overflow:hidden;border:1px solid #d5e2f0;border-radius:12px;background:#eaf1fa;color:#245f9d}.account-mark i{position:absolute;width:7px;height:7px;background:#7fa9d4}.account-mark i:nth-child(1){left:8px;top:8px}.account-mark i:nth-child(2){right:8px;top:12px;background:#b4cbe3}.account-mark i:nth-child(3){right:11px;bottom:8px;background:#6796c7}.account-mark b{position:relative;display:grid;place-items:center;width:31px;height:31px;border:1px solid #b7cbe0;border-radius:7px;background:#f8fbff;font-size:16px}

.account-dialog{width:min(100vw - 32px,560px);max-width:560px;max-height:min(86dvh,780px);padding:0;border:1px solid #dce5ef;border-radius:16px;background:#fff;color:var(--ink,#20344a);box-shadow:0 22px 70px #102b4652;overflow:auto;overscroll-behavior:contain}
.account-dialog::backdrop{background:#10243a88;backdrop-filter:blur(3px)}
.account-dialog-header{position:relative;display:flex;justify-content:space-between;gap:22px;padding:24px 26px 17px;border-bottom:1px solid #edf1f5}.account-dialog-header h2{font-size:21px;line-height:1.35;letter-spacing:-.4px;color:var(--navy,#173650)}.account-dialog-subtitle{max-width:440px;margin-top:6px;color:#667a8e;font-size:13px;line-height:1.6}
.account-dialog-close{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;margin:-6px -8px 0 0;border:0;border-radius:8px;background:transparent;color:#62768b;font-size:27px;line-height:1}.account-dialog-close:hover{background:#f1f4f8;color:#263d54}
.account-form{display:grid;gap:14px;padding:20px 26px 0}.account-field{display:grid;gap:6px;color:#304a63;font-size:13px;font-weight:600}.account-field input{width:100%;min-width:0;min-height:46px;padding:10px 12px;border:1px solid #cfdae6;border-radius:8px;background:#fff;color:#20344a;font-size:15px;font-weight:400;outline:none}.account-field input::placeholder{color:#9ba8b5}.account-field input:focus{border-color:#5588bd;box-shadow:0 0 0 3px #2f6bd61c}.account-field-hint{margin-top:-5px;color:#718297;font-size:12px;line-height:1.55}
.account-submit{width:100%;margin-top:2px}.account-dialog-error{padding:9px 11px;border-radius:7px;background:#fff0ed;color:#9a493d;font-size:13px;line-height:1.5}.account-dialog-error[hidden]{display:none}
.account-switch-prompt,.account-login-links{padding:15px 26px 24px;color:#677b8f;font-size:13px}.account-login-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}.account-login-links>span{color:#667a8e}.account-link-button{display:inline-flex;align-items:center;min-height:44px;padding:5px 3px;border:0;background:transparent;color:#245f9d;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer}.account-link-button:hover{text-decoration:underline}
.account-profile-preview{display:flex;align-items:center;gap:14px;padding:19px 26px 2px}.account-avatar-large{width:72px;height:72px;flex-basis:72px;border-radius:14px}.account-avatar-large .account-avatar-fallback b{width:40px;height:40px;font-size:20px}.account-profile-preview>div:last-child{display:grid;gap:3px;min-width:0}.account-profile-preview strong{overflow-wrap:anywhere;font-size:14px;color:#294965}.account-profile-preview span:not(.account-avatar):not(.account-avatar-fallback){color:#718297;font-size:12px}
.account-avatar-tools{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;padding:17px 26px 24px;border-top:1px solid #edf1f5;margin-top:17px}.account-file-label{min-width:104px}.account-avatar-tools input{grid-column:1 / -1;width:100%;min-width:0;min-height:44px;padding:7px;border:1px dashed #c8d5e3;border-radius:8px;background:#f8fafc;color:#52677d;font-size:12px}.account-avatar-tools input::file-selector-button{min-height:30px;margin-right:9px;padding:4px 10px;border:1px solid #d4dfeb;border-radius:6px;background:#fff;color:#294965;font:inherit;cursor:pointer}.account-avatar-tools>span{color:#718297;font-size:12px;line-height:1.5}.account-remove-avatar{justify-self:start;grid-column:1 / -1}
.account-recovery-code{margin:22px 26px 0;padding:17px 14px;border:1px solid #dce6f0;border-radius:9px;background:#f5f8fc;color:#173650;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:16px;font-weight:700;letter-spacing:.04em;line-height:1.65;text-align:center;overflow-wrap:anywhere;user-select:all}
.account-recovery-actions{display:flex;gap:9px;padding:13px 26px 2px}.account-save-confirm{display:flex;align-items:flex-start;gap:10px;padding:17px 26px 3px;color:#40566c;font-size:13px;line-height:1.5}.account-save-confirm input{width:20px;height:20px;flex:0 0 20px;margin:0;accent-color:#1c4b73}.account-recovery-actions+.account-save-confirm+.account-dialog-error{margin:12px 26px 0}.account-recovery-actions+.account-save-confirm+.account-dialog-error[hidden]{display:none}.account-recovery-actions+.account-save-confirm+.account-dialog-error+.account-submit{width:calc(100% - 52px);margin:16px 26px 0}
.account-warning{margin:21px 26px;padding:15px 16px;border:1px solid #e8d9be;border-radius:9px;background:#fffaf2}.account-warning strong{color:#80591d;font-size:14px}.account-warning p{margin:4px 0 12px;color:#6b6254;font-size:13px;line-height:1.6}.account-conflict-actions,.account-import-actions{display:flex;gap:10px;padding:0 26px 25px}.account-conflict-actions>* ,.account-import-actions>*{flex:1}

@media(max-width:560px){
  .account-panel{padding:18px 16px;border-radius:10px}.account-panel-heading{align-items:flex-start;margin-bottom:15px}.account-panel-heading h2{font-size:17px}.account-state-pill{max-width:132px;white-space:normal;line-height:1.3}.account-user-row{gap:10px}.account-user-copy strong{font-size:15px}.account-icon-button{padding:6px 8px}.account-sync-copy{display:grid;gap:2px}.account-actions{gap:7px}.account-actions .account-button{flex:1 1 auto}.account-migration{align-items:flex-start;flex-direction:column;padding:13px}.account-migration .account-button{width:100%}.account-logged-out-copy{align-items:flex-start;gap:12px}.account-logged-out-copy p{font-size:12px}.account-privacy-note{width:100%;text-align:center}
  .account-dialog{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:min(92dvh,840px);border-right:0;border-bottom:0;border-left:0;border-radius:18px 18px 0 0;padding-bottom:max(8px,env(safe-area-inset-bottom));}
  .account-dialog-header{padding:20px 18px 15px}.account-dialog-header h2{font-size:19px}.account-dialog-subtitle{font-size:12px;max-width:calc(100vw - 86px)}.account-form{padding:17px 18px 0;gap:13px}.account-switch-prompt,.account-login-links{padding:13px 18px 21px}.account-login-links{display:grid;gap:4px}.account-profile-preview{padding:16px 18px 0}.account-avatar-tools{padding:15px 18px 20px}.account-recovery-code{margin:18px 18px 0;font-size:14px;padding:13px 10px}.account-recovery-actions{padding:12px 18px 2px;flex-wrap:wrap}.account-recovery-actions .account-button{flex:1}.account-save-confirm{padding:15px 18px 3px}.account-recovery-actions+.account-save-confirm+.account-dialog-error{margin:12px 18px 0}.account-recovery-actions+.account-save-confirm+.account-dialog-error+.account-submit{width:calc(100% - 36px);margin:14px 18px 0}.account-warning{margin:17px 18px}.account-conflict-actions,.account-import-actions{padding:0 18px 21px;flex-direction:column}.account-conflict-actions .account-button,.account-import-actions .account-button{width:100%}
}
@media(max-width:380px){
  .account-panel{padding:16px 13px}.account-panel-heading{gap:7px}.account-state-pill{max-width:110px;padding:3px 8px;font-size:11px}.account-user-row{gap:8px}.account-avatar{width:48px;height:48px;flex-basis:48px}.account-icon-button{font-size:12px}.account-button{padding:8px 11px;font-size:13px}.account-logged-out-copy{gap:9px}.account-mark{width:47px;height:47px;flex-basis:47px}.account-dialog-header{padding-right:14px;padding-left:16px}.account-form{padding-right:16px;padding-left:16px}.account-switch-prompt,.account-login-links{padding-right:16px;padding-left:16px}.account-profile-preview,.account-avatar-tools{padding-right:16px;padding-left:16px}.account-recovery-code{margin-right:16px;margin-left:16px}.account-recovery-actions,.account-save-confirm{padding-right:16px;padding-left:16px}.account-warning{margin-right:16px;margin-left:16px}.account-conflict-actions,.account-import-actions{padding-right:16px;padding-left:16px}
}
@media(prefers-reduced-motion:reduce){.account-state-syncing i{animation:none}.account-icon-button,.account-button,.account-file-label{transition:none}}

.account-send-code{justify-self:start;min-width:144px}
.account-code-block:not([hidden]){display:grid;gap:6px}
.account-code-status{color:#286d59;font-size:12px;line-height:1.5}
.account-code-status[hidden]{display:none}
.account-purpose-note{color:#718297;font-size:12px;line-height:1.5}
.account-takeover-warning{border-color:#ead7c0;background:#fff8ef}
.account-takeover-warning p{margin-bottom:0}
.account-takeover-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 26px 25px}
.account-takeover-actions>*{min-width:130px}
@media(max-width:560px){.account-takeover-actions{padding:0 18px 21px}.account-takeover-actions>*{flex:1;min-width:0}}
@media(max-width:380px){.account-takeover-actions{padding-right:16px;padding-left:16px}}

/* Align the profile sections on the Me page while keeping the heatmap's own scroll area intact. */
.my-page{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;width:min(100%,1080px);min-width:0;margin-inline:auto}
.my-page>.account-panel,.my-page>.year-heatmap,.my-page>.my-links{width:100%;max-width:none;min-width:0;margin:0}
.my-page>.account-panel,.my-page>.year-heatmap{padding:18px 20px}
.my-page>.my-links{padding-right:20px;padding-left:20px}
@media(max-width:560px){
  .my-page{gap:12px}
  .my-page>.account-panel,.my-page>.year-heatmap{padding:14px 12px}
  .my-page>.my-links{padding-right:12px;padding-left:12px}
}