/* notify：画面の上の帯（#banners .bnr）と、マイページの「通知」の欄（.ntf） */
#banners { position: fixed; top: calc(8px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 16px)); z-index: 35; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.bnr { pointer-events: auto; position: relative; display: flex; align-items: stretch; background: rgba(24, 34, 79, .97); border: 2px solid #000; border-radius: 16px; box-shadow: 0 6px 0 #000, 0 10px 28px rgba(0, 0, 0, .45); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; animation: bnr-in .26s cubic-bezier(.2, .9, .3, 1.15); transition: transform .2s, opacity .2s; }
.bnr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rainbow); }
.bnr.out { opacity: 0; transform: scale(.96); pointer-events: none; }
.bnr.up { opacity: 0; transform: translateY(-120%) !important; pointer-events: none; }
.bnr-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 4px 10px 14px; background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.bnr-main:focus-visible, .bnr-x:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
#banners img.bnr-ava { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 2px solid var(--line); }
#banners img.bnr-logo { border-radius: 10px; border: 0; background: none; }
.bnr-txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.bnr-t { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bnr-b { font-size: 13px; color: var(--sub); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.bnr-x { flex: none; width: 44px; background: none; border: 0; color: var(--dim); font-size: 22px; line-height: 1; cursor: pointer; }
.bnr-x:hover { color: var(--ink); }
@keyframes bnr-in { from { transform: translateY(-120%); opacity: 0; } }

.ntf-lead { font-size: 14px; margin: 4px 0 10px; }
.ntf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--bg2); border-radius: 12px; }
.ntf-label { display: flex; flex-direction: column; font-weight: 800; min-width: 0; }
.ntf-label small { font-weight: 500; font-size: 12px; color: var(--sub); }
.ntf-sw { flex: none; position: relative; width: 56px; height: 32px; border-radius: 999px; border: 2px solid #000; background: var(--line); cursor: pointer; transition: background .15s; }
.ntf-sw[aria-checked="true"] { background: var(--ok); }
.ntf-sw[aria-busy="true"] { opacity: .6; cursor: progress; }
.ntf-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .4); transition: transform .15s; }
.ntf-sw[aria-checked="true"] .ntf-knob { transform: translateX(24px); }
.ntf-sw:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.ntf-test { margin-top: 10px; }
.ntf-note { margin: 0; padding: 12px; background: var(--bg2); border: 1px dashed var(--line); border-radius: 12px; font-size: 14px; overflow-wrap: anywhere; }
.ntf-note .tiny { margin: 6px 0 0; }
.ntf-steps { margin: 6px 0 0; padding-left: 1.4em; }
.ntf-steps li { margin: 2px 0; }

@media (prefers-reduced-motion: reduce) { .bnr { animation: none; transition: opacity .2s; } .ntf-sw, .ntf-knob { transition: none; } }