/* Explicit contrasting colours, including hover and keyboard focus. */
.draw-panel .btn[data-action="draw-rules"]{background:#fff;color:#173954;border-color:#b9cddf}
.draw-panel .btn[data-action="draw-rules"]:hover{background:#eaf2f9;color:#173954;border-color:#24679c}
.draw-panel .btn[data-action="draw-rules"]:focus-visible{outline:3px solid #ffad17;outline-offset:3px}
.member-mail-panel{margin:24px 0;padding:22px;border:1px solid var(--line);border-radius:12px;background:white}
.member-mail-panel h2{font-size:1.2rem;margin:0 0 12px}
.member-mail-actions{display:flex;flex-wrap:wrap;gap:10px}
.member-mail-actions .btn,.friend-actions .btn[data-action^="member-mail-"]{min-height:44px;font-size:.875rem}
.members .member-message{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.mail-recipient-list{max-height:180px;overflow:auto;list-style:none;padding:10px 0;margin:12px 0;border-block:1px solid var(--line)}
.mail-recipient-list li{padding:6px 2px;font-size:.875rem}
.mail-preview{padding:20px;border:1px solid #dce5ed;border-top:4px solid #ffad17;border-radius:10px;background:white;color:#25394d;margin-top:18px;overflow-wrap:anywhere}
.mail-preview .mail-brand{font-size:24px;font-weight:700;color:#24679c;margin-bottom:16px}
.mail-preview .mail-brand span{color:#a96900}
.mail-preview h3{font-size:1.15rem;margin-bottom:16px}
.mail-preview-body{white-space:pre-wrap;font-size:1rem;line-height:1.65}
.mail-counts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;font-size:.875rem}
.mail-counts span{padding:5px 9px;background:#edf3f8;border-radius:8px}
.mail-history{display:grid;gap:12px}.mail-history article{border:1px solid var(--line);padding:16px;border-radius:10px}
.mail-history article p{margin:8px 0}
@media(max-width:600px){.member-mail-panel{padding:16px}.member-mail-actions>.btn{width:100%}.mail-preview{padding:16px}.members .member-message .btn{font-size:.8125rem}}