.notice-container{border-radius:var(--radius-md);box-shadow:var(--shadow-2);background:#fff;margin:20px;overflow:hidden}.notice-header{border-bottom:1px solid #e5e7eb;padding:20px 24px}.notice-header h2{font-size:var(--font-size-xl);color:#1f2937;margin:0;font-weight:600}.notice-unread-count{font-size:var(--font-size-md);color:var(--text-danger-vivid);margin-left:12px;font-weight:600}html.dark .notice-unread-count{color:var(--text-danger)}.notice-tabs{background:#f9fafb;border-bottom:2px solid #e5e7eb;display:flex}.notice-tab{font-size:var(--font-size-base);color:#6b7280;cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:16px 24px;font-weight:500;transition:all .3s;display:flex;position:relative}.notice-tab:hover{color:#374151;background:#f3f4f6}.notice-tab.active{color:var(--accent-primary);background:#fff}.notice-tab.active:after{content:"";background:var(--accent-primary);height:2px;position:absolute;bottom:-2px;left:0;right:0}.notice-tab .badge{color:#fff;min-width:20px;height:20px;font-size:var(--font-size-xs);border-radius:var(--radius-md);background:#ef4444;justify-content:center;align-items:center;padding:0 6px;font-weight:600;display:inline-flex}.notice-list{flex-direction:column;min-height:550px;display:flex}.notice-empty{color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;padding:80px 20px;display:flex}.notice-empty svg{opacity:.5;margin-bottom:16px}.notice-empty p{font-size:var(--font-size-base);margin:0}.notice-item{cursor:pointer;background:#fff;border-bottom:1px solid #f3f4f6;align-items:flex-start;gap:16px;padding:20px 24px;transition:background .2s;display:flex;position:relative}.notice-item:hover{background:#f9fafb}.notice-item.unread{background:var(--accent-soft)}.notice-item.unread:hover{background:var(--accent-soft-strong)}.notice-icon{border-radius:var(--radius-round);color:#6b7280;background:#f3f4f6;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.notice-item.unread .notice-icon{background:var(--accent-soft-strong);color:var(--accent-primary)}.notice-content{flex:1;min-width:0}.notice-header-row{justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.notice-type{font-size:var(--font-size-md);color:#374151;font-weight:600}.notice-item.unread .notice-type{color:var(--accent-strong)}.notice-date{font-size:var(--font-size-xs);color:var(--text-secondary);white-space:nowrap}.notice-text{font-size:var(--font-size-md);color:var(--text-secondary);word-wrap:break-word;line-height:1.6}.notice-unread-dot{border-radius:var(--radius-round);background:#ef4444;flex-shrink:0;width:8px;height:8px;margin-top:6px}.notice-item-empty{border-bottom:1px solid #f3f4f6;flex-shrink:0;height:120px}.notice-action-bar{background:#f9fafb;border-bottom:1px solid #e5e7eb;justify-content:flex-end;padding:12px 24px;display:flex}.notice-mark-all-read-btn{background:var(--accent-solid);color:#fff;border-radius:var(--radius-xs);font-size:var(--font-size-md);cursor:pointer;border:none;padding:8px 16px;font-weight:500;transition:background .2s}.notice-mark-all-read-btn:hover{background:var(--accent-strong)}.notice-pagination{box-sizing:border-box;background:#f9fafb;border-top:1px solid #e5e7eb;justify-content:center;align-items:center;gap:6px;height:44px;margin:12px 0;padding:0 24px;display:flex}.notice-pagination .page-btn{border-radius:var(--radius-xs);color:#374151;cursor:pointer;vertical-align:middle;box-sizing:border-box;height:32px;line-height:normal;font-size:var(--font-size-md);background:#fff;border:1px solid #d1d5db;justify-content:center;align-items:center;min-width:32px;padding:6px 10px;font-weight:500;transition:background .2s,color .2s;display:inline-flex}.notice-pagination .page-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}.notice-pagination .page-btn.active{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}.notice-pagination .page-btn:disabled{opacity:.5;cursor:not-allowed}.notice-pagination .ellipsis{color:#6b7280;align-items:center;padding:6px 4px;display:inline-flex}@media (max-width:768px){.notice-container{margin:12px}.notice-header{padding:16px}.notice-header h2{font-size:var(--font-size-lg)}.notice-tab{font-size:var(--font-size-md);padding:12px 16px}.notice-item{gap:12px;padding:16px}.notice-icon{width:36px;height:36px}.notice-icon svg{width:20px;height:20px}.notice-header-row{flex-direction:column;align-items:flex-start;gap:4px}.notice-date{align-self:flex-start}}.notice-list::-webkit-scrollbar{width:6px}.notice-list::-webkit-scrollbar-track{background:#f3f4f6}.notice-list::-webkit-scrollbar-thumb{border-radius:var(--radius-xs);background:#d1d5db}.notice-list::-webkit-scrollbar-thumb:hover{background:#9ca3af}html.dark .notice-container,html.dark .notice-item,html.dark .notice-tab.active{background:var(--card-bg)}html.dark .notice-tabs,html.dark .notice-action-bar,html.dark .notice-pagination{background:var(--bg-input)}html.dark .notice-header,html.dark .notice-tabs,html.dark .notice-action-bar{border-bottom-color:var(--border-secondary)}html.dark .notice-pagination{border-top-color:var(--border-secondary)}html.dark .notice-item,html.dark .notice-item-empty{border-bottom-color:var(--border-divider)}html.dark .notice-header h2,html.dark .notice-type{color:var(--text-primary)}html.dark .notice-tab,html.dark .notice-text,html.dark .notice-pagination .ellipsis{color:var(--text-secondary)}html.dark .notice-empty{color:var(--text-muted)}html.dark .notice-date{color:var(--text-secondary)}html.dark .notice-tab:not(.active):hover,html.dark .notice-item:hover{background:var(--bg-hover);color:var(--text-primary)}html.dark .notice-tab.active{color:var(--accent-secondary)}html.dark .notice-item.unread{background:#6d45d61f}html.dark .notice-item.unread:hover{background:#6d45d633}html.dark .notice-icon{background:var(--bg-secondary);color:var(--text-secondary)}html.dark .notice-item.unread .notice-icon{color:var(--accent-secondary);background:#6d45d640}html.dark .notice-item.unread .notice-type{color:var(--accent-text)}html.dark .notice-pagination .page-btn{background:var(--bg-input);border-color:var(--border-secondary);color:var(--text-primary)}html.dark .notice-pagination .page-btn:hover:not(:disabled){background:var(--bg-hover);border-color:var(--border-hover)}html.dark .notice-pagination .page-btn.active{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}html.dark .notice-list::-webkit-scrollbar-track{background:var(--bg-input)}html.dark .notice-list::-webkit-scrollbar-thumb{background:#4b5563}html.dark .notice-list::-webkit-scrollbar-thumb:hover{background:#6b7280}.notice-mark-read-bar{justify-content:flex-end;padding:12px 24px;display:flex}.notice-mark-read-btn{color:var(--text-secondary);font-size:var(--font-size-xs);cursor:pointer;border-radius:var(--radius-xs);opacity:1;background:0 0;border:none;padding:4px 8px;transition:all .2s}.notice-mark-read-btn:hover{color:var(--accent-text);background:var(--accent-soft)}