/* Settings › Platform owner › Announcements, and the New announcement
   dialog, drawn by /ui/settings-announce.js (approved canvas "Notifications
   bell": the Announcements and New announcement boards). The preview inside
   the dialog is the bell's own card, styled by rl-bell.css. */
.rlx .an-eye{display:block;margin-bottom:6px;font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#b93520}
.rlx .an-main .rl-pg-hd p{max-width:720px}

/* filters */
.rlx .an-filters{display:flex;flex-wrap:wrap;gap:8px}
.rlx .an-f{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:10px;border:1px solid #dfe2ea!important;background:#fff!important;color:var(--rl-ink2);font-size:12.5px;font-weight:800;transition:background .15s,border-color .15s}
.rlx .an-f span{font-size:11.5px;font-weight:700;color:var(--rl-ink3)}
.rlx .an-f.is-on{background:#161a24!important;border-color:#161a24!important;color:#fff}
.rlx .an-f.is-on span{color:rgba(255,255,255,.7)}
.rlx .an-f:focus-visible{outline:2px solid var(--rl-acc);outline-offset:2px}

/* the table */
.rlx .an-table{border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--rl-line),0 1px 2px rgba(16,24,40,.05);overflow:hidden}
.rlx .an-head,.rlx .an-row{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1.1fr) minmax(0,1.4fr) 124px 36px;gap:18px;align-items:center}
.rlx .an-head{padding:12px 18px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#646c7f}
.rlx .an-row{padding:16px 18px;border-top:1px solid var(--rl-line);cursor:pointer;transition:background .12s}
.rlx .an-row:hover{background:#fafbfc}
.rlx .an-what{display:flex;align-items:center;gap:12px;min-width:0}
.rlx .an-what .t{display:flex;flex-direction:column;gap:5px;min-width:0}
.rlx .an-what .t>b{font-size:14px;font-weight:800;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .an-what .t>span{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:#646c7f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .an-tile{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--rl-surface3);color:var(--rl-ink2)}
.rlx .an-tile.is-sm{width:28px;height:28px;border-radius:8px}
.rlx .an-tile.is-acc{background:#fff1ed;color:#b93520}
.rlx .an-tile.is-info{background:#eef3ff;color:#1d4ed8}
.rlx .an-tile.is-warn{background:#fff5e6;color:#a15c07}
.rlx .an-chip{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:var(--rl-surface3);color:var(--rl-ink2);font-style:normal;font-size:11px;font-weight:800}
.rlx .an-chip.is-acc{background:#fff1ed;color:#b93520}
.rlx .an-chip.is-info{background:#eef3ff;color:#1d4ed8}
.rlx .an-chip.is-warn{background:#fff5e6;color:#a15c07}
.rlx .an-who{display:flex;flex-direction:column;gap:3px;min-width:0}
.rlx .an-who b{font-size:13px;font-weight:700;color:var(--rl-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlx .an-who span{font-size:12px;color:#646c7f}
.rlx .an-seen{display:flex;flex-direction:column;gap:6px;min-width:0}
.rlx .an-seen .n{font-size:12.5px;font-weight:600;color:var(--rl-ink2);white-space:nowrap}
.rlx .an-seen .n b{font-size:14px;color:var(--rl-ink);font-variant-numeric:tabular-nums}
.rlx .an-seen .n span{color:#646c7f}
.rlx .an-seen .bar{display:block;height:6px;border-radius:99px;background:var(--rl-surface3);overflow:hidden}
.rlx .an-seen .bar i{display:block;height:6px;border-radius:99px;background:var(--rl-ok)}
.rlx .an-seen .bar i.is-ended{background:var(--rl-ink3)}
.rlx .an-seen em{font-style:normal;font-size:12px;color:#646c7f}
.rlx .an-seen.is-none{font-size:12.5px;font-weight:600;color:#646c7f}
.rlx .an-st{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.rlx .an-st em{font-style:normal;font-size:11.5px;color:#646c7f;white-space:nowrap}
.rlx .an-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:99px;background:var(--rl-surface3);color:var(--rl-ink2);font-size:11.5px;font-weight:800}
.rlx .an-pill i{width:6px;height:6px;border-radius:50%;background:var(--rl-ink3)}
.rlx .an-pill.is-ok{background:#e7f7f0;color:#067a55}
.rlx .an-pill.is-ok i{background:var(--rl-ok)}
.rlx .an-pill.is-info{background:#eef3ff;color:#1d4ed8}
.rlx .an-pill.is-info i{background:var(--rl-info)}
.rlx .an-more{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--rl-line)!important;background:#fff!important;color:var(--rl-ink2)}
.rlx .an-more:hover{background:#fafbfc!important;border-color:#d5d9e3!important}
.rlx .an-none{margin:0;padding:18px;border-top:1px solid var(--rl-line);font-size:13px;color:#646c7f}
.rlx .an-skel{display:flex;flex-direction:column;gap:10px}
.rlx .an-skel span{display:block;height:64px;border-radius:14px;background:linear-gradient(90deg,#eef0f4 0%,#f7f8fa 50%,#eef0f4 100%);background-size:200% 100%;animation:rl-shimmer 1.2s infinite linear}

/* the dialog: the form, and the bell's own card beside it */
.rlx .rl-dlg.an-dlg{width:min(960px,calc(100vw - 32px))}
.rlx .an-comp{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.rlx .an-form{display:flex;flex-direction:column;gap:16px;min-width:0}
.rlx .an-side{position:sticky;top:0;display:flex;flex-direction:column;gap:10px}
.rlx .an-side .an-eye{color:#646c7f;margin:0}
.rlx .an-prev{padding:6px;border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 32px 64px -16px rgba(16,24,40,.28),0 8px 20px -8px rgba(16,24,40,.12),0 0 0 1px rgba(16,24,40,.05)}
.rlx .an-prev .blx-card{cursor:default}
.rlx .an-note{margin:0;font-size:12px;line-height:1.5;color:#646c7f}
.rlx .an-fld{display:flex;flex-direction:column;gap:8px;min-width:0}
.rlx .an-fld .lbl{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rlx .an-fld .lbl b{font-size:12.5px;font-weight:700;color:var(--rl-ink2)}
.rlx .an-fld .lbl span{font-size:12px;color:#646c7f;font-variant-numeric:tabular-nums}
.rlx .an-fld textarea{resize:vertical;min-height:72px;line-height:1.5}
.rlx .an-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.rlx .an-kinds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.rlx .an-kind{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 11px;border-radius:12px;border:1.5px solid #dfe2ea!important;background:#fff!important;transition:border-color .15s,background .15s}
.rlx .an-kind b{font-size:13px;font-weight:800;color:var(--rl-ink);white-space:nowrap}
.rlx .an-kind.is-on{border-color:#161a24!important;background:var(--rl-bg)!important}
.rlx .an-kind:focus-visible,.rlx .an-radio:focus-visible,.rlx .an-cb:focus-visible,.rlx .an-seg button:focus-visible,.rlx .an-sw:focus-visible{outline:2px solid var(--rl-acc);outline-offset:2px}
.rlx .an-err{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;background:#fff0f3;box-shadow:inset 0 0 0 1px #f7c6d2;color:#be123c;font-size:13px;font-weight:600;line-height:1.45}
.rlx .an-err[hidden]{display:none}
.rlx .an-pic{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;background:var(--rl-bg);box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .an-pic img{flex:none;width:96px;height:48px;border-radius:8px;object-fit:cover}
.rlx .an-pic>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rlx .an-pic>span b{font-size:13px;font-weight:700;color:var(--rl-ink)}
.rlx .an-pic>span small{font-size:12px;color:#646c7f}
.rlx .an-pic.is-empty{cursor:pointer;border:1.5px dashed #c3c9d5;box-shadow:none;background:#fff;padding:12px}
.rlx .an-pic.is-empty:hover{border-color:var(--rl-ink3)}
.rlx .an-pic.is-empty>.rl-ic{flex:none;color:var(--rl-ink2)}
.rlx .an-pic.is-busy{padding:14px 12px;font-size:13px;font-weight:600;color:var(--rl-ink2)}
.rlx .an-pic label.rl-btn{cursor:pointer}
.rlx .an-spin{width:16px;height:16px;border-radius:50%;border:2px solid #d5d9e3;border-top-color:var(--rl-ink);animation:an-spin .8s linear infinite}
@keyframes an-spin{to{transform:rotate(360deg)}}
.rlx .an-radios{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px #dfe2ea}
.rlx .an-radio{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;background:#fff!important}
.rlx .an-radio+.an-radio{border-top:1px solid var(--rl-line)!important}
.rlx .an-radio.is-on{background:var(--rl-bg)!important}
.rlx .an-radio>i{flex:none;width:18px;height:18px;box-sizing:border-box;border-radius:50%;background:#fff;border:1.5px solid #c3c9d5}
.rlx .an-radio.is-on>i{border:5.5px solid #161a24}
.rlx .an-radio>span{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left}
.rlx .an-radio b{font-size:13.5px;font-weight:800;color:var(--rl-ink)}
.rlx .an-radio small{font-size:12px;color:#646c7f}
.rlx .an-filt{display:flex;flex-direction:column;gap:10px;padding:4px 14px 14px 44px;background:var(--rl-bg)}
.rlx .an-filt[hidden]{display:none}
.rlx .an-frow{display:flex;align-items:flex-start;gap:6px}
.rlx .an-frow>span{flex:0 0 96px;padding-top:7px;font-size:12px;font-weight:700;color:#646c7f}
.rlx .an-frow>div{display:flex;flex-wrap:wrap;gap:6px}
.rlx .an-cb{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:99px;border:1px solid #dfe2ea!important;background:#fff!important;color:var(--rl-ink2);font-size:12.5px;font-weight:700;white-space:nowrap}
.rlx .an-cb.is-on{background:#161a24!important;border-color:#161a24!important;color:#fff}
.rlx .an-hint{margin:0;font-size:12px;color:#646c7f}
.rlx .an-reach{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--rl-ink)}
.rlx .an-reach>.rl-ic{color:var(--rl-ink2)}
.rlx .an-seg{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--rl-surface3)}
.rlx .an-seg button{flex:1 1 0;height:36px;border-radius:9px;font-size:13px;font-weight:600;color:var(--rl-ink2);text-align:center}
.rlx .an-seg button.is-on{background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.12);font-weight:800;color:var(--rl-ink)}
.rlx .an-fld input[hidden]{display:none!important}
.rlx .an-ban{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .an-ban>span{flex:1;display:flex;flex-direction:column;gap:2px}
.rlx .an-ban b{font-size:13.5px;font-weight:800;color:var(--rl-ink)}
.rlx .an-ban small{font-size:12px;color:#646c7f}
.rlx .an-sw{position:relative;flex:none;width:40px;height:24px;border-radius:99px;background:#cfd4de!important;transition:background .18s}
.rlx .an-sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.25);transition:transform .18s}
.rlx .an-sw.is-on{background:#161a24!important}
.rlx .an-sw.is-on i{transform:translateX(16px)}
.rlx .an-foot-note{font-size:12.5px;color:#646c7f}

/* narrower: the table folds, the dialog stacks, a phone gets cards */
@media (max-width:1180px){
  .rlx .an-head,.rlx .an-row{grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) 118px 36px}
  .rlx .an-head>span:nth-child(2),.rlx .an-who{display:none}
}
@media (max-width:900px){
  .rlx .an-comp{grid-template-columns:minmax(0,1fr)}
  .rlx .an-side{position:static}
}
@media (max-width:760px){
  .rlx .an-head{display:none}
  .rlx .an-row{grid-template-columns:minmax(0,1fr) 36px;row-gap:10px}
  .rlx .an-what{grid-column:1}
  .rlx .an-more{grid-column:2;grid-row:1}
  .rlx .an-seen,.rlx .an-st{grid-column:1 / -1}
  .rlx .an-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rlx .an-two{grid-template-columns:minmax(0,1fr)}
  .rlx .an-filt{padding-left:14px}
  .rlx .an-frow{flex-direction:column}
  .rlx .an-frow>span{flex:none;padding-top:0}
  .rlx .an-foot-note{display:none}
}
@media (prefers-reduced-motion:reduce){.rlx .an-skel span,.rlx .an-spin{animation:none}}