/* Compact notices stay in context: no overlay, countdown or disappearing error. */
.account-page :is(#feedback,#settings-feedback,#code-feedback,#auth-feedback,.auth-method-feedback).hb-account-notice{display:flex;align-items:flex-start;gap:10px;position:relative;max-width:100%;margin:12px 0!important;padding:12px 10px 12px 13px;border:1px solid #ffffff20;border-radius:14px;background:#ffffff05;color:#eeeef0;text-align:left;line-height:1.5;font-size:12px;box-sizing:border-box;box-shadow:0 3px 12px #0000000a}
.account-page .hb-account-notice[data-state=error]{border-color:#ffb4ab40!important;background:#ffb4ab08!important;color:#ffcdc6!important}
.account-page .hb-notice-mark{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;margin-top:1px;border:1px solid currentColor;border-radius:50%;font-size:12px;font-weight:700;color:var(--yellow,#ffd23f)}
.account-page .hb-account-notice[data-state=error] .hb-notice-mark{color:#ffb4ab}
.account-page .hb-notice-copy{display:grid;gap:3px;min-width:0;flex:1;overflow-wrap:anywhere}
.account-page .hb-notice-copy strong{font-size:12px;color:#f6f6f7;font-weight:650}
.account-page .hb-notice-copy>span{font-size:12px;color:inherit}
.account-page button.hb-notice-close{display:grid;place-items:center;align-self:flex-start;flex:0 0 44px;min-width:44px;min-height:44px;margin:-8px -3px -8px 0;padding:0;background:transparent;border:0;border-radius:9px;color:inherit;font-size:23px;font-weight:400;line-height:1;cursor:pointer}
.account-page button.hb-notice-close:hover{background:#ffffff09}
.account-page button.hb-notice-close:focus-visible{outline:2px solid var(--yellow,#ffd23f);outline-offset:2px}
.account-page .hb-account-notice[data-state=loading] .hb-notice-mark{border-color:#ffffff20;border-top-color:var(--yellow,#ffd23f)}
.account-page #register-username-field[data-state=unavailable]::after{content:'Später prüfen'}
@media(prefers-reduced-motion:no-preference){.account-page .hb-account-notice{animation:hb-notice-in .16s ease-out}.account-page .hb-account-notice[data-state=loading] .hb-notice-mark{animation:hb-notice-spin .9s linear infinite}@keyframes hb-notice-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}@keyframes hb-notice-spin{to{transform:rotate(360deg)}}}
@media(max-width:380px){.account-page :is(#feedback,#settings-feedback,#code-feedback,#auth-feedback,.auth-method-feedback).hb-account-notice{gap:8px;padding-left:10px}.account-page .hb-notice-mark{flex-basis:20px;width:20px;height:20px}}