.notice-list{display:grid;gap:12px;min-width:0}.notice-list[hidden]{display:none}.notice-item{--notice-color:#317b70;--notice-bg:#edf6f3;--notice-border:#c7e1da;background:var(--notice-bg);border:1px solid var(--notice-border);border-radius:12px;overflow:hidden;color:var(--c-text);box-shadow:var(--shadow-xs)}.notice-notice{--notice-color:#3d72b7;--notice-bg:#f0f5fc;--notice-border:#d2dff3}.notice-maintenance{--notice-color:#7860aa;--notice-bg:#f6f3fb;--notice-border:#e0d8f1}.notice-summary{display:flex;align-items:center;gap:12px;padding:12px 16px;min-width:0}.notice-tag{flex:0 0 auto;padding:4px 9px;border-radius:20px;font-size:11px;color:var(--notice-color);background:var(--c-paper);font-weight:700}.notice-excerpt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.7}.notice-toggle{flex:0 0 auto;border:0;border-radius:6px;padding:5px 8px;background:transparent;color:var(--notice-color);font:inherit;font-size:12px;cursor:pointer}.notice-toggle:hover{background:rgba(255,255,255,.7)}.notice-content{white-space:pre-wrap;overflow-wrap:anywhere;padding:14px 18px;border-top:1px solid var(--notice-border);font-size:13px;line-height:1.9}.notice-content[hidden]{display:none}.notice-time{display:block;color:var(--c-text-dim);font-size:11px;padding:0 18px 12px}.notice-list-empty{color:var(--c-text-dim);padding:16px}.task-center-page #taskAnnouncements{margin:12px 0 0}.task-center-page #taskAnnouncements .notice-item{box-shadow:none}.task-center-page .card-compact{overflow:visible}@media(max-width:600px){.notice-summary{gap:8px;padding:10px}.notice-content{padding:12px}.notice-excerpt{font-size:12px}}

.notice-toggle{width:32px;height:32px;display:grid;place-items:center;padding:6px}.notice-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}.notice-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}@media(prefers-reduced-motion:reduce){.notice-toggle svg{transition:none}}

.notice-item{cursor:pointer}.notice-item:hover{border-color:var(--notice-color)}
