.notice, .success, .warning {
  position: relative; padding: 18px 20px 18px 58px; margin: 20px 0;
  border: 1px solid var(--message-border); border-radius: 13px;
  background: var(--message-background); color: var(--message-color);
  font-size: 14px; line-height: 1.75; overflow-wrap: anywhere;
}
.notice, .success { --message-border: #bfdfcf; --message-background: #edf8f1; --message-color: #245e44; }
.warning { --message-border: #ecd8ad; --message-background: #fff8e9; --message-color: #79591e; }
.warning[role="alert"] { --message-border: #ebcccc; --message-background: #fff3f2; --message-color: #8d3535; }
.notice::before, .success::before, .warning::before {
  content: ''; position: absolute; left: 20px; top: 20px; width: 20px; height: 20px;
  background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.warning::before { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' d='m12 3 10 18H2Z M12 9v5 M12 17v1'/%3E%3C/svg%3E"); }
.notice a, .success a, .warning a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.notice p, .success p, .warning p { color: inherit; }
.notice > :first-child, .success > :first-child, .warning > :first-child { margin-top: 0; }
.notice > :last-child, .success > :last-child, .warning > :last-child { margin-bottom: 0; }
.warning ul { padding-left: 20px; }
.authenticated .main > .notice:first-child { margin-top: 0; margin-bottom: 24px; }
.error-page { width: calc(100% - 32px); max-width: 740px; margin: 8vh auto 40px; border: 1px solid #dfe8f1; border-radius: 20px; background: #fff; overflow: hidden; }
.error-banner { padding: 32px; color: #fff; background: radial-gradient(ellipse at 95% 5%, #309cdd55, transparent 65%), linear-gradient(135deg, #092a50, #125287 65%, #08335e); }
.error-brand { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: 1px; color: #ffc58f; }
.error-brand img { object-fit: contain; background: #fff; padding: 7px; border-radius: 12px; flex-shrink: 0; }
.error-banner h1 { color: #fff; font-size: clamp(25px, 4vw, 34px); margin: 24px 0 0; line-height: 1.3; overflow-wrap: anywhere; }
.error-content { padding: 30px 32px; }
.error-content .error-message { margin-top: 0; }
.error-help { font-size: 14px; line-height: 1.7; color: #4f6376; margin: 22px 0; }
.error-content .button { border-radius: 10px; min-height: 46px; }
@media (max-width: 650px) {
  .notice, .success, .warning { padding: 16px 16px 16px 48px; }
  .notice::before, .success::before, .warning::before { left: 16px; top: 18px; width: 18px; height: 18px; }
  .error-page { margin-top: 24px; }
  .error-banner, .error-content { padding: 24px 20px; }
  .error-content .button { width: 100%; }
}
