.account-panel { max-width: 620px; margin-inline: auto; }
.profile-sections { display: grid; gap: 24px; max-width: 840px; }
.profile-sections > .panel { width: 100%; max-width: none; margin: 0; }
.profile-sections .profile-identity { margin-bottom: 18px; }
.profile-identity .profile-photo-trigger { flex-shrink: 0; }
.profile-edit-details { border-top: 1px solid var(--line); padding-top: 6px; }
.profile-edit-details > summary { display: flex; align-items: center; gap: 10px; min-height: 52px; color: var(--green); font-weight: 700; font-size: .875rem; cursor: pointer; }
.profile-edit-details > summary svg { width: 18px; height: 18px; }
.profile-edit-details > form { padding-block: 14px 6px; }
.profile-sections .profile-password { margin-top: 6px; }
.profile-sections .account-data { margin-top: 6px; }
.profile-menu { position: relative; flex-shrink: 0; }
.profile-menu-trigger { width: 44px; height: 44px; padding: 0; box-shadow: 0 0 0 1px var(--line); }
.profile-menu-trigger > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit; }
.profile-menu-trigger[aria-expanded=true] { box-shadow: 0 0 0 3px var(--green); }
.profile-menu-options { position: absolute; top: calc(100% + 14px); right: 0; z-index: 60; width: min(310px, calc(100vw - 36px)); padding: 8px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); box-shadow: 0 16px 44px #081b3430; }
.profile-menu-options[hidden] { display: none; }
.profile-menu-identity { display: grid; gap: 4px; padding: 12px 12px 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.profile-menu-identity strong { font-size: .95rem; }
.profile-menu-identity small { color: var(--muted); font-size: .75rem; }
.profile-menu-options > button { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; padding: 12px; border-radius: 14px; background: transparent; text-align: left; color: var(--ink); font-size: .875rem; }
.profile-menu-options > button:hover, .profile-menu-options > button:focus-visible { background: var(--mint); color: var(--green); }
.profile-menu-options > button svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--green); }
.profile-menu-options .profile-menu-logout { border-top: 1px solid var(--line); border-radius: 0 0 14px 14px; margin-top: 6px; }
.nutrition-reminder-form { display: grid; grid-template-columns: minmax(0, 220px) auto; align-items: end; gap: 12px; margin-top: 24px; }
.nutrition-reminder-form .field { margin: 0; }
.nutrition-reminder-form > button { justify-self: start; min-height: 48px; }
@media (max-width: 480px) { .profile-sections { gap: 18px; } .nutrition-reminder-form { grid-template-columns: minmax(0, 1fr); } .nutrition-reminder-form > button { width: 100%; } }
.account-panel h2 { margin-top: 0; }
.account-panel form { display: grid; gap: 16px; }
.account-panel .field { margin: 0; }
.account-links, .account-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.account-links .text-button, .account-actions .text-button { min-height: 44px; }
.account-notice { padding: 14px 16px; border-radius: 16px; background: var(--mint); color: var(--ink); line-height: 1.6; }
.account-summary { margin-bottom: 24px; }
.account-summary h2 { margin-top: 0; }
.account-summary .text-button { margin-inline-start: 16px; min-height: 44px; }
.account-actions [hidden], .auth-panel [hidden], .profile-account [hidden] { display: none; }
.user-chip > span:last-child { min-width: 0; }
.user-chip strong, .user-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding-inline-start: 56px; }
.sidebar { overflow-y: auto; }
.sidebar-action { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 14px; text-align: left; background: transparent; color: var(--muted); font-size: .875rem; font-weight: 600; }
.sidebar-action svg { width: 18px; height: 18px; }
.sidebar-action:hover { background: var(--mint); color: var(--green); }
.account-action-icon { position: relative; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border-radius: 13px; }
.account-action-icon svg { width: 20px; height: 20px; }
.account-action-icon::after { content: attr(data-tooltip); position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); max-width: 190px; width: max-content; padding: 8px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--ink); box-shadow: 0 6px 24px #102b4026; font-size: .75rem; font-weight: 600; line-height: 1.5; text-align: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .15s; }
.account-action-icon:focus-visible::after { opacity: 1; visibility: visible; }
@media (hover: hover) { .account-action-icon:hover::after { opacity: 1; visibility: visible; } }
.account-action-error { width: 100%; color: var(--food-changed-ink); font-size: .75rem; line-height: 1.5; margin-top: 10px; }
.profile-account { max-width: 800px; }
.profile-identity { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.profile-identity .avatar { width: 56px; height: 56px; font-size: 1.2rem; }
.avatar[data-account-avatar] { padding: 0; }
.avatar img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.profile-identity .profile-photo-trigger { position: relative; width: 80px; height: 80px; padding: 0; font-size: 1.6rem; }
.profile-photo-image { width: 100%; height: 100%; border-radius: inherit; display: grid; place-items: center; }
.profile-photo-camera { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid var(--paper); border-radius: 50%; background: var(--green); color: var(--paper); }
.profile-photo-camera svg { width: 14px; height: 14px; }
.profile-photo-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.profile-photo-actions .text-button { font-size: .75rem; padding-block: 8px; }
.profile-photo-hint { display: block; color: var(--muted); font-size: .7rem; line-height: 1.5; }
#profile-photo-feedback .error-message { margin: 0 0 22px; }
.profile-photo-preview { margin: 24px auto; width: 176px; height: 176px; border: 5px solid var(--paper); border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 1px var(--line),0 10px 30px #102b401a; overflow: hidden; }
.profile-photo-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-dialog-help { text-align: center; }
.profile-photo-dialog .dialog-actions .button { min-height: 48px; }
@media (max-width:480px) { .profile-identity { gap: 14px; } .profile-identity .profile-photo-trigger { width: 68px; height: 68px; } .profile-photo-dialog .dialog-actions { flex-direction: column-reverse; } .profile-photo-dialog .dialog-actions .button { width: 100%; } }
.profile-identity > div { min-width: 0; }
.profile-identity p { overflow-wrap: anywhere; color: var(--muted); font-size: .875rem; }
.profile-account form { display: grid; gap: 16px; }
.profile-account form > .button { justify-self: start; }
.profile-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; }
.profile-account .field { margin: 0; }
.profile-account .account-notice { margin: 0 0 22px; font-size: .875rem; overflow-wrap: anywhere; }
.profile-account .account-notice .text-button { min-height: 44px; }
.profile-email-auth { display: grid; gap: 10px; }
.profile-sync-actions { display: flex; gap: 12px; }
.profile-sync-actions:has(button:not([hidden])) { margin-bottom: 22px; }
.profile-password { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 8px; }
.profile-password summary { display: flex; align-items: center; gap: 16px; cursor: pointer; min-height: 56px; font-size: .875rem; }
.profile-password summary > span:first-child { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.profile-password summary svg { width: 18px; height: 18px; color: var(--muted); }
.profile-password-mask { letter-spacing: .16em; color: var(--muted); }
.profile-password-change { margin-left: auto; color: var(--green); text-decoration: underline; }
.profile-password form { margin-top: 16px; }
.profile-mobile-actions { display: none; }
@media (max-width: 760px) { .profile-mobile-actions { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px; padding-block: 8px; } .profile-mobile-actions .account-action-icon:first-child::after { left: 0; transform: none; } }
@media (max-width: 600px) { .profile-fields { grid-template-columns: minmax(0,1fr); gap: 18px; } .profile-account { padding: 24px 20px; } .profile-password summary { gap: 12px; } }
.account-data { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 12px; }
.account-data summary { cursor: pointer; min-height: 44px; padding-block: 12px; color: var(--muted); font-size: .875rem; font-weight: 700; }
.account-data p { margin: 4px 0 16px; }
.account-panel > p { overflow-wrap: anywhere; }

.auth-shell { min-height: 100svh; padding: 30px 48px; background: radial-gradient(ellipse at 5% 90%, #65ddb51a, transparent 55%), radial-gradient(ellipse at 95% 0%, #378fee15, transparent 50%); }
.auth-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1200px; margin: auto; }
.auth-header .brand-logo { width: 152px; }
.auth-header .topbar-actions { gap: 16px; }
.auth-header .language button { min-height: 36px; min-width: 40px; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; max-width: 460px; margin: 68px auto 48px; }
.auth-story { max-width: 500px; }
.auth-symbol { display: block; width: 76px; height: 76px; object-fit: contain; margin-bottom: 26px; }
.auth-story h2 { max-width: 15ch; font-size: clamp(2rem, 3.5vw, 3.1rem); line-height: 1.2; font-weight: 800; letter-spacing: -.045em; }
.auth-story > p { max-width: 39ch; margin-top: 22px; color: var(--muted); }
.auth-benefits { list-style: none; display: grid; gap: 18px; padding: 0; margin: 32px 0 0; }
.auth-benefits li { display: flex; align-items: center; gap: 14px; font-size: .875rem; font-weight: 600; }
.auth-benefits li > span { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 14px; background: var(--mint); color: var(--green); }
.auth-benefits svg { width: 20px; height: 20px; }
.auth-panel { width: 100%; padding: 36px; margin: 0; box-shadow: 0 12px 44px #173a4d0b; }
.auth-panel h1 { font-size: 1.7rem; }
.auth-intro { color: var(--muted); font-size: .875rem; margin: 12px 0 26px; }
.auth-panel .account-notice { margin: 18px 0; font-size: .875rem; }
.auth-panel form { margin-top: 22px; gap: 16px; }
.auth-panel input { min-height: 52px; }
.auth-field-hint { color: var(--muted); font-size: .75rem; line-height: 1.5; }
.auth-panel input[aria-invalid="true"] { border-color: var(--food-changed-line); }
#account-error { color: var(--food-changed-ink); background: var(--food-changed-bg); scroll-margin-block: 24px; }
.auth-panel .text-button { min-height: 44px; }
.auth-forgot { justify-self: end; margin-top: -8px; font-size: .875rem; }
.auth-switch { margin-top: 22px; text-align: center; color: var(--muted); font-size: .875rem; }
.auth-switch .text-button { margin-inline-start: 5px; font-weight: 700; }
.auth-resend { display: block; margin: 6px auto 0; color: var(--muted); font-size: .75rem; }
.auth-verification { text-align: center; }
.auth-footer { text-align: center; color: var(--muted); font-size: .75rem; padding-bottom: 10px; }
@media (max-width: 900px) { .auth-shell { padding: 26px; } .auth-layout { gap: 36px; margin-top: 48px; } .auth-panel { padding: 28px; } }
@media (max-width: 680px) { .auth-shell { padding: 20px 18px; } .auth-header .brand-logo { width: 118px; } .auth-header .topbar-actions { gap: 6px; } .auth-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 460px; margin: 34px auto 26px; } .auth-story { text-align: center; } .auth-story h2 { font-size: 1.65rem; max-width: 21ch; margin: auto; } .auth-story > p { font-size: .875rem; margin: 12px auto 0; } .auth-symbol, .auth-benefits { display: none; } .auth-panel { padding: 26px 22px; } .auth-panel h1 { font-size: 1.5rem; } }
.auth-shell-confirmation { display: flex; flex-direction: column; gap: 40px; }
.auth-shell-confirmation .auth-header { width: 100%; }
.auth-shell-confirmation .auth-layout { width: 100%; max-width: 500px; grid-template-columns: minmax(0, 1fr); margin: auto; }
.auth-confirmation { text-align: center; padding-block: 44px; }
.auth-mail-icon { position: relative; display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 28px; border-radius: 26px; background: var(--mint); color: var(--green); }
.auth-mail-icon > svg { width: 40px; height: 40px; }
.auth-mail-icon > span { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid var(--paper); border-radius: 50%; background: var(--green); color: white; }
.auth-mail-icon > span svg { width: 16px; height: 16px; }
.auth-confirmation .eyebrow { color: var(--green); margin-bottom: 10px; }
.auth-confirmation h1 { font-size: clamp(1.5rem, 4vw, 1.9rem); }
.auth-confirmation-copy { margin-top: 18px; font-size: .9375rem; }
.auth-confirmation-hint { margin-top: 16px; color: var(--muted); font-size: .8125rem; }
.auth-confirmation-action { display: grid; gap: 18px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.auth-confirmation-action p { color: var(--muted); font-size: .8125rem; }
[data-sync-status] { font-size: 14px; line-height: 1.5; color: var(--muted); }
[data-sync-status][data-status="offline"], [data-sync-status][data-status="conflict"], [data-sync-status][data-status="expired"] { color: #a45d12; }
.sync-conflict-list { display: grid; gap: 18px; max-height: 50vh; overflow-y: auto; padding: 4px; }
.account-loading { padding: 40px; text-align: center; }
[data-theme="dark"] .account-notice { background: #20372c; color: #e5ede8; }
[data-theme="dark"] [data-sync-status][data-status="offline"], [data-theme="dark"] [data-sync-status][data-status="conflict"], [data-theme="dark"] [data-sync-status][data-status="expired"] { color: #f0b971; }
@media (max-width: 600px) { .account-panel { padding: 22px 18px; } .account-actions .button { width: 100%; } .account-links { gap: 6px 14px; } }