.account-button{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #d7dfd8;border-radius:4px;background:#f4f7f3;padding:8px 10px;color:#40594a;font:600 9px 'DM Sans';cursor:pointer}
.account-button:hover,.welcome-account-button:hover{background:#e9efe8}
.welcome-account-button{margin-top:9px;border:0;background:transparent;padding:7px 0;color:#7d8a80;font:600 9px 'DM Sans';cursor:pointer}
.welcome-account-button span{margin-left:4px;color:#ad9355}
#account-backdrop{grid-template-columns:minmax(0,1fr)}
.account-modal{width:min(440px,calc(100vw - 40px));min-width:0;max-width:440px;max-height:calc(100dvh - 32px);overflow-y:auto}
.account-description{margin-bottom:18px!important}
.google-auth-section{margin:0 0 14px}
.account-divider{display:flex;align-items:center;gap:10px;margin:0 0 11px;color:#a3a69d;font-size:8px;letter-spacing:1.3px}
.account-divider:before,.account-divider:after{height:1px;background:#e8e5dc;content:'';flex:1}
.google-signin-button{display:flex;justify-content:center;min-height:40px}
#google-signin-button[hidden]{display:none}
.google-auth-status{margin:0;color:#89938a;text-align:center;font-size:8px;line-height:1.5}
.google-auth-status:empty{display:none}
.google-auth-status.error{color:#a85c4e}
.google-auth-retry{display:block;margin:7px auto 0;padding:6px 10px;border:1px solid #ded7c5;border-radius:4px;background:#fffdf8;color:#665633;font:600 9px 'DM Sans',sans-serif;cursor:pointer}
.google-auth-retry[hidden]{display:none}
.google-auth-retry:disabled{cursor:wait;opacity:.6}
#account-form{display:flex;flex-direction:column;gap:12px}
#account-form .online-field input{height:42px}
.password-input-wrap{position:relative;width:100%}
#account-form .password-input-wrap input{padding-right:82px}
.password-visibility-toggle{position:absolute;top:50%;right:7px;min-width:65px;min-height:32px;transform:translateY(-50%);border:0;border-radius:4px;background:transparent;padding:5px 8px;color:#657b69;font:600 9px 'DM Sans',sans-serif;cursor:pointer}
.password-visibility-toggle:hover{background:#eef1e9;color:#40594a}
.account-submit{width:100%;height:42px;margin-top:2px}
.account-mode-toggle,.account-logout-button{display:block;width:100%;border:0;background:transparent;padding:11px;color:#7c887e;font:600 9px 'DM Sans';cursor:pointer}
.account-mode-toggle:hover,.account-logout-button:hover{color:#40594a;text-decoration:underline}
.account-delete-button{display:block;width:100%;margin-top:9px;border:1px solid #ead8d2;border-radius:4px;background:#fff9f7;padding:10px;color:#98584e;font:600 9px 'DM Sans',sans-serif;cursor:pointer}
.account-delete-button:hover{border-color:#dcb8ad;background:#fff3ef;color:#7d3f37}
.account-delete-button:disabled{cursor:wait;opacity:.6}
.account-privacy{margin:5px 0 0;color:#939a91;font-size:8px;line-height:1.55}
.account-privacy-link{display:block;margin:8px auto 0;border:0;background:transparent;padding:6px;color:#657b69;font:600 9px 'DM Sans',sans-serif;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.account-privacy-link:hover,.account-privacy-link:focus-visible{color:#354f3f}
.data-privacy-modal{width:min(640px,calc(100vw - 40px));max-height:calc(100dvh - 32px);overflow-y:auto}
.data-privacy-intro{margin-bottom:14px!important;color:#6e7b70;font-size:11px;line-height:1.55}
.data-privacy-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.data-privacy-sections section{padding:11px 12px;border:1px solid #e6e4d9;border-radius:6px;background:#fbfaf5}
.data-privacy-sections h3{margin:0 0 5px;color:#344b3d;font-size:10px}
.data-privacy-sections p{margin:0;color:#69766b;font-size:9px;line-height:1.55}
.data-privacy-notice{margin:12px 0 0!important;padding:9px 10px;border-left:3px solid #c3a45d;background:#f6f1e4;color:#746643;font-size:8px;line-height:1.5}
.account-error{min-height:14px;margin:7px 0 0;color:#b94d43;font-size:10px}
.account-user-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e7e5dc;border-radius:5px;background:#f5f4ed}
.account-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e8dfc8;color:#887142;font-size:19px}
.account-user-card small,.account-user-card strong{display:block}.account-user-card small{font-size:7px;letter-spacing:1.2px;color:#969b90}.account-user-card strong{margin-top:4px;color:#354a3d;font-size:12px}
.account-save-status{margin:12px 0;color:#59745f;font-size:9px}.account-save-status.error{color:#a85c4e}
.account-sync-button{width:100%;justify-content:center}.account-logout-button{margin-top:5px}
.account-modal :is(button,input):focus-visible{outline:2px solid #b49a5c;outline-offset:2px}
.account-button:disabled,.account-submit:disabled,.account-sync-button:disabled,.account-logout-button:disabled{opacity:.6;cursor:wait}
@media(max-width:760px){
  .account-button{max-width:92px;padding:7px 8px;font-size:8px}
  #account-backdrop:not([hidden]){display:flex;align-items:center;justify-content:center;padding:12px}
  .account-modal{width:calc(100vw - 24px);max-width:440px;padding:21px 18px}
  .data-privacy-modal{width:calc(100vw - 24px);padding:21px 18px}
}
@media(max-width:520px){
  .topbar .account-button{width:27px;height:27px;max-width:27px;flex:0 0 27px;overflow:hidden;padding:0;font-size:0}
  .topbar .account-button::before{content:'♙';font-size:14px}
  .data-privacy-sections{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:360px){
  .topbar .account-button{width:23px;height:23px;max-width:23px;flex-basis:23px}
}
@media(max-height:580px) and (max-width:760px){
  .topbar .account-button{width:30px;height:30px;max-width:30px;flex-basis:30px}
}
.save-mode-note { margin: 5px 0 0; color: #64755e; font-size: 10px; line-height: 1.4; }
.welcome-secondary-actions { flex-wrap: wrap; }
.account-save-history { font-size: 11px; color: #53674d; }
.account-modal > .modal-close { z-index: 3; background: #fbfaf5; }
.account-save-history summary { cursor: pointer; padding: 7px 0; }
.account-save-history button, .account-save-history select, .results-save-account { max-width: 100%; border: 1px solid #c8ba91; border-radius: 6px; background: #f6f1e2; color: #35543e; padding: 7px; font: inherit; cursor: pointer; }
.account-save-history p { font-size: 10px; }
.results-save-account { margin-top: 8px; font-size: 11px; }

/* Account navigation keeps the current action and feedback visible. */
#account-backdrop { padding: 12px; }
#account-backdrop .account-modal { width: min(560px, 100%); max-width: 560px; max-height: calc(100dvh - 24px); display: flex; flex-direction: column; gap: 10px; padding: 24px; overflow: hidden; border-radius: 16px; }
#account-backdrop [hidden] { display: none !important; }
.account-heading { display: flex; align-items: center; gap: 12px; padding-right: 25px; flex: none; }
.account-heading-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid #ccb77e; border-radius: 50%; color: #9e7d3b; background: #f6efd9; font-size: 25px; }
#account-backdrop .account-heading h2 { margin: 3px 0 0; font: 500 30px/1.1 'Playfair Display', Georgia, serif; color: #254d39; }
#account-backdrop .account-description { margin: 0 !important; font-size: 12px; line-height: 1.4; flex: none; }
#account-signed-out, #account-signed-in { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.account-auth-tabs, .account-section-tabs { display: flex; flex: none; gap: 4px; padding: 4px; background: #eeeee3; border-radius: 9px; }
#account-backdrop :is(.account-auth-tabs,.account-section-tabs) button { flex: 1; width: auto; border: 0; margin: 0; padding: 9px 5px; border-radius: 6px; background: transparent; color: #697563; font: 600 12px 'DM Sans', sans-serif; cursor: pointer; text-decoration: none; }
#account-backdrop :is(.account-auth-tabs,.account-section-tabs) [aria-pressed="true"] { color: #244e38; background: #fffdf7; box-shadow: 0 1px 4px #273d2010; }
.account-auth-body, .account-panels { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.account-auth-body::-webkit-scrollbar, .account-panels::-webkit-scrollbar { display: none; }
#account-backdrop .google-auth-section { margin: 0; }
#account-backdrop .google-auth-status { font-size: 10px; margin-top: 4px; }
#account-backdrop .google-account-privacy { text-align: center; font-size: 10px; margin: 5px 0 0; }
#account-backdrop .google-auth-section:has(#google-signin-button[hidden]) .google-account-privacy { display: none; }
#account-backdrop .account-divider { margin: 12px 0; font-size: 9px; }
#account-backdrop #account-form { gap: 10px; }
#account-backdrop .online-field { font-size: 12px; }
#account-backdrop #account-form input { height: 40px; font-size: 14px; }
#account-backdrop .account-submit { height: 40px; font-size: 12px; }
#account-backdrop .account-privacy { font-size: 10px; line-height: 1.4; }
.account-access-note { margin: 7px 0 0; font-size: 10px; line-height: 1.4; color: #81745b; }
.account-guest-note { margin: 0; flex: none; padding: 8px 10px; border-radius: 7px; background: #f4eddc; color: #7c6b45; font-size: 11px; line-height: 1.4; }
#account-backdrop .account-user-card { flex: none; padding: 10px 12px; gap: 10px; border-radius: 10px; background: #eff3e9; border-color: #dce4d3; }
.account-user-card > div { min-width: 0; flex: 1; }
#account-backdrop .account-user-card strong { font-size: 15px; overflow-wrap: anywhere; }
#account-backdrop .account-user-card small { font-size: 8px; }
#account-backdrop .account-avatar { width: 36px; height: 36px; flex: none; font: 700 14px 'DM Sans', sans-serif; background: #dce8d3; color: #35543e; }
.account-sync-indicator { flex: none; font-size: 10px; color: #47663e; }
.account-sync-indicator[data-state="pending"], .account-sync-indicator[data-state="conflict"] { color: #946328; }
.account-info-block + .account-info-block { margin-top: 14px; }
#account-backdrop :is(.account-info-block,.account-danger-zone) h3 { margin: 0 0 5px; color: #36503c; font-size: 13px; }
#account-backdrop :is(.account-info-block,.account-danger-zone) p { margin: 0 0 9px; color: #77806f; font-size: 12px; line-height: 1.45; }
.account-identifier { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #ded8c5; border-radius: 8px; background: #fffcf3; }
.account-identifier strong { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 15px; color: #3b523f; }
.account-identifier button { flex: none; border: 0; padding: 6px 8px; border-radius: 5px; background: #e8ecdd; color: #4b6245; font: 600 11px 'DM Sans', sans-serif; cursor: pointer; }
.account-edit-name { border: 0; background: none; color: #657845; padding: 7px 0; font: 600 11px 'DM Sans', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.account-name-editor { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.account-name-intro { margin: 0 0 14px; color: #65745f; font-size: 12px; line-height: 1.5; }
#account-name-form { display: grid; gap: 8px; }
#account-new-name { width: 100%; min-width: 0; height: 42px; border: 1px solid #c8bea3; border-radius: 7px; padding: 0 12px; color: #2d4e39; background: #fff; font: 500 16px 'DM Sans', sans-serif; }
#account-backdrop .account-name-editor .account-privacy { margin: 0 0 6px; }
#account-backdrop :is(.account-sync-button,.account-export-button,.account-admin-link) { min-height: 38px; padding: 9px 12px; font-size: 12px; margin-top: 8px; justify-content: center; }
#account-backdrop .account-sync-button { background: #244d3a; color: #fff9e9; border-color: #244d3a; }
.account-save-history { margin-top: 12px; border-top: 1px solid #e4ddcc; padding-top: 5px; }
.account-save-history summary { font-size: 12px; }
.account-data-download { font-size: 11px; color: #53674d; }
.account-data-download summary { cursor: pointer; padding: 7px 0; }
.account-save-history select { display: block; width: 100%; margin: 8px 0; font-size: 12px; }
.account-save-history button { font-size: 11px; }
.account-role-note { margin: 8px 0 0; color: #8c763f; font-size: 11px; }
.account-danger-zone { margin-top: 15px; padding: 12px; background: #fcf1ec; border: 1px solid #ecd7cf; border-radius: 9px; }
#account-backdrop .account-danger-zone h3 { color: #914e3f; }
#account-backdrop .account-delete-button { margin: 0; font-size: 11px; padding: 8px; }
#account-backdrop .account-save-status { flex: none; margin: 0; padding-top: 8px; border-top: 1px solid #e8e1d3; font-size: 11px; line-height: 1.4; }
#account-backdrop .account-logout-button { flex: none; margin: 0; padding: 5px; font-size: 11px; }
#account-backdrop .account-error { margin: 0; min-height: 0; flex: none; line-height: 1.4; }
#account-backdrop .account-error:empty { display: none; }
#account-backdrop .account-privacy-link { flex: none; margin: 0 auto; padding: 3px; font-size: 10px; }
.dashboard-account-login { border: 0; background: none; padding: 7px 0; color: #536b4e; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: 500 12px 'DM Sans', sans-serif; }
@media (max-width: 480px), (max-height: 650px) {
  #account-backdrop .account-modal { padding: 15px; gap: 8px; }
  #account-backdrop .account-heading h2 { font-size: 25px; }
  .account-heading-icon { width: 34px; height: 34px; font-size: 20px; }
  #account-signed-out, #account-signed-in { gap: 8px; }
  #account-backdrop .account-description { font-size: 11px; }
  #account-backdrop :is(.account-auth-tabs,.account-section-tabs) button { padding: 7px 3px; font-size: 11px; }
  #account-backdrop .account-user-card { padding: 8px; }
  .account-info-block + .account-info-block { margin-top: 10px; }
  #account-backdrop :is(.account-info-block,.account-danger-zone) p { font-size: 11px; margin-bottom: 6px; }
  #account-backdrop .account-save-status { font-size: 10px; padding-top: 6px; }
}
@media (max-height: 420px) and (min-width: 480px) {
  #account-backdrop .account-modal { width: min(760px, 100%); max-width: 760px; padding: 10px 16px; gap: 5px; }
  #account-backdrop .account-heading h2 { font-size: 22px; }
  #account-backdrop .account-heading .section-label, #account-backdrop .account-description, #account-backdrop .account-heading-icon { display: none; }
  #account-signed-out, #account-signed-in { gap: 5px; }
  .account-auth-body { display: grid; grid-template-columns: 1fr 1.15fr; gap: 5px 18px; }
  .account-auth-body > .google-auth-section { grid-column: 1; grid-row: 1; align-self: center; }
  #account-backdrop .account-divider { display: none; }
  .account-auth-body > #account-form { grid-column: 2; grid-row: 1 / span 3; }
  .account-auth-body > :is(#account-form-help,#account-access-note) { grid-column: 1; }
  #account-backdrop #account-form { gap: 3px; }
  #account-backdrop #account-form .online-field { gap: 4px; }
  #account-backdrop #account-form input, #account-backdrop .account-submit { height: 30px; }
  #account-backdrop .account-name-intro { margin-bottom: 8px; font-size: 11px; line-height: 1.35; }
  #account-backdrop #account-name-form { gap: 5px; }
  #account-backdrop #account-new-name { height: 34px; }
  #account-backdrop .account-access-note, #account-backdrop .account-privacy { font-size: 9px; margin-top: 0; }
  .account-guest-note { padding: 4px 8px; font-size: 10px; }
  #account-backdrop .account-user-card { padding: 5px 8px; }
  #account-backdrop .account-avatar { display: none; }
  #account-backdrop .account-user-card strong { margin-top: 0; font-size: 13px; }
  #account-backdrop .account-user-card small { display: none; }
  #account-backdrop :is(.account-auth-tabs,.account-section-tabs) button { padding: 5px 3px; }
  #account-profile-view, #account-data-view { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #account-profile-view .account-info-block, #account-data-view .account-danger-zone { margin: 0; }
  .account-identifier { padding: 5px 8px; }
  .account-identifier strong { font-size: 12px; }
  .account-danger-zone { padding: 8px; }
  #account-backdrop .account-save-status { padding-top: 4px; }
  #account-backdrop .account-logout-button { padding: 2px; }
  #account-backdrop :is(.account-info-block,.account-danger-zone) p { font-size: 10px; line-height: 1.3; }
  #account-backdrop :is(.account-export-button,.account-delete-button) { min-height: 29px; padding: 6px; font-size: 10px; }
}
@media (max-height: 650px) and (max-width: 479px) {
  #account-backdrop .account-modal { gap: 6px; }
  #account-signed-out { gap: 6px; }
  #account-backdrop .account-description { font-size: 10px; }
  #account-backdrop:has(#account-signed-out:not([hidden])) .account-description { display: none; }
  #account-backdrop #account-form { gap: 6px; }
  #account-backdrop #account-form input { height: 35px; }
  #account-backdrop .account-submit { height: 36px; }
  #account-backdrop .account-divider { margin: 8px 0; }
  #account-backdrop :is(.account-access-note,.account-privacy) { font-size: 9px; margin-top: 5px; }
  #account-backdrop .account-guest-note { font-size: 10px; padding: 6px 8px; }
}