body #noticeBell { position:relative; flex-shrink:0; width:36px; height:36px; padding:0; justify-content:center; }
#noticeBell svg { width:18px; height:18px; margin:0; }
#noticeBell .notice-dot { position:absolute; top:4px; right:4px; width:7px; height:7px; border-radius:50%; background:#41bc78; border:2px solid var(--mn-surface); }
#noticeBell .notice-dot[hidden] { display:none; }
#noticesDialog { box-sizing:border-box; width:420px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 92px); margin:72px 16px 16px auto; padding:20px; border:1px solid var(--mn-line); border-radius:20px; background:var(--mn-surface); color:var(--mn-ink); box-shadow:0 16px 64px #10251b33; overflow:auto; }
#noticesDialog::backdrop { background:#10251b30; }
.notices-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.notices-heading h2 { font-size:18px; margin:0; }
.notices-close { width:36px; height:36px; display:grid; place-items:center; background:var(--mn-soft); color:var(--mn-ink); border:1px solid var(--mn-line); border-radius:12px; cursor:pointer; }
.notice-card { border:1px solid var(--mn-line); border-radius:14px; padding:14px; background:var(--mn-soft); margin-top:10px; }
.notice-card summary { cursor:pointer; list-style:none; }
.notice-card summary::-webkit-details-marker { display:none; }
.notice-meta { display:flex; align-items:center; gap:8px; color:var(--mn-muted); font-size:12px; margin-bottom:8px; }
.notice-category { color:var(--mn-accent); font-weight:600; }
.notice-title { display:flex; align-items:start; justify-content:space-between; gap:10px; font-size:15px; font-weight:700; line-height:1.6; }
.notice-title::after { content:'⌄'; color:var(--mn-muted); }
.notice-card[open] .notice-title::after { content:'⌃'; }
.notice-summary,.notice-body,.notices-empty { font-size:13px; line-height:1.8; margin:8px 0 0; color:var(--mn-muted); overflow-wrap:anywhere; }
.notice-body { color:var(--mn-ink); border-top:1px solid var(--mn-line); padding-top:12px; margin-top:12px; white-space:pre-line; }
.notice-login { width:100%; margin-top:14px; }
@media (min-width:769px) and (max-width:1120px) {
  .right-header:has(#ratioUnitContainer[style*="display: block"]) > #noticeBell { grid-column:4; grid-row:1; }
}
@media(max-width:768px) {
  body #noticeBell { width:34px; height:34px; order:2; }
  #noticesDialog { margin:64px 12px 12px auto; padding:16px; }
}