.cos-system-notice { --notice-accent: #315f9f; --notice-bg: #f0f5fc; padding: 26px 28px; background: var(--notice-bg); border: 1px solid #dce5f2; border-radius: 16px; color: #334660; }
.cos-system-notice-warning { --notice-accent: #92630d; --notice-bg: #fff9ec; border-color: #efdfb6; color: #665331; }
.cos-system-notice-success { --notice-accent: #287452; --notice-bg: #edf8f2; border-color: #cce8d8; color: #365b48; }
.cos-system-notice-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--notice-accent); margin-bottom: 14px; }
.cos-system-notice-label span { font-size: 8px; }
.cos-system-notice h2 { font-size: 21px; letter-spacing: -.4px; line-height: 1.3; margin: 0 0 14px; color: var(--cos-text); overflow-wrap: anywhere; }
.cos-system-notice p { font-size: 14px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; margin: 0; }
.cos-auth-layout { gap: 38px; }
.cos-auth-layout > .cos-system-notice { width: 100%; max-width: 460px; }
.cos-notice-preview { margin-top: 20px; }
#system-notice:not(:empty) { margin: 20px 0 28px; }
@media(max-width:850px) { .cos-auth-layout { flex-direction: column; gap: 22px; padding: 28px 18px; } .cos-auth-layout > .cos-system-notice { max-width: 420px; } .cos-system-notice { padding: 22px; } .cos-system-notice h2 { font-size: 19px; } }