.site-notification-button { position: relative; height: 48px; min-width: 58px; padding: 0 12px; border: 3px solid #171717; background: #fff8dd; box-shadow: 3px 3px 0 #171717; color: #171717; font: 900 11px "Arial Black", "Microsoft YaHei", sans-serif; cursor: pointer; }
.site-notification-button:hover { transform: translate(-1px,-1px); }
.site-notification-button i { position: absolute; top: -7px; right: -7px; width: 13px; height: 13px; border: 2px solid #171717; border-radius: 50%; background: #e53922; }
.site-notifications-modal { width: min(700px,calc(100% - 28px)); max-height: min(760px,calc(100vh - 28px)); display: flex; flex-direction: column; }
.site-notifications-modal .modal-head span { font-size: 12px; }
.site-notifications-modal .modal-head h2 { font-size: 25px; }
.site-notifications-modal .modal-head button { font-size: 30px; }
.site-notifications-list { min-height: 120px; max-height: min(480px,calc(100vh - 255px)); overflow: auto; border-top: 2px solid #171717; border-bottom: 2px solid #171717; }
.site-notification-item { padding: 15px 3px; border-bottom: 1px solid #cabf9d; }
.site-notification-item:last-child { border-bottom: 0; }
.site-notification-item.unread { padding-left: 11px; border-left: 5px solid #e53922; background: #fff0af; }
.site-notification-item > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.site-notification-item b { font-size: 18px; }
.site-notification-item time { flex: none; color: #776549; font-size: 12px; font-weight: 800; }
.site-notification-item p { margin: 11px 0 0; color: #342c21; font: 16px/1.8 "Microsoft YaHei", sans-serif; }
.site-notification-empty { margin: 0; padding: 35px 8px; color: #76654d; text-align: center; font-size: 15px; }
.site-notification-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.site-notification-actions button { min-height: 48px; padding: 0 19px; font-size: 14px; font-weight: 900; }
.comic-confirm-button { min-width: 110px; border: 3px solid #171717; background: #ffd72e; box-shadow: 3px 3px 0 #e53922; color: #171717; font-weight: 900; cursor: pointer; }
.low-balance-modal { width: min(520px,calc(100% - 28px)); }
.low-balance-modal #lowBalanceReminderText { margin: 0; padding: 18px; border: 3px solid #171717; background: #fff; color: #171717; font: 900 16px/1.7 "Microsoft YaHei",sans-serif; }
@media (max-width: 760px) { .site-notification-button { height: 42px; min-width: 48px; padding: 0 8px; } .site-notification-item > div { align-items: flex-start; flex-direction: column; gap: 4px; } }