.xf-sound-control{display:inline-flex;align-items:center;font-family:inherit}
.xf-sound-menu{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:4px 6px;border:0;background:transparent;color:#63738c;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.xf-sound-menu svg{width:18px;height:18px;flex-shrink:0}
.xf-sound-menu:hover{color:#376dff}
.xf-sound-menu .sound-slash,.xf-sound-menu.is-muted .sound-waves{display:none}
.xf-sound-menu.is-muted .sound-slash{display:block}
.xf-sound-menu.is-muted{color:#98a2b3}
.xf-sound-panel{display:none;position:fixed;inset:auto;margin:0;box-sizing:border-box;width:290px;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:16px;border:1px solid #e2e7ef;border-radius:14px;background:#fff;color:#344054;box-shadow:0 12px 32px #18274224;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;z-index:100}
.xf-sound-panel:popover-open,.xf-sound-panel.is-open{display:block}
.xf-sound-panel::backdrop{background:transparent}
.xf-sound-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.xf-sound-head strong{font-size:15px}
.xf-sound-hint,.xf-sound-status{margin:9px 0 12px;font-size:12px;color:#8490a2}
.xf-sound-status{margin-bottom:0}
.xf-sound-switch{position:relative;flex-shrink:0;width:34px;height:20px;padding:0;border:0;border-radius:12px;background:#cbd2dd;cursor:pointer}
.xf-sound-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .15s}
.xf-sound-switch[aria-checked=true]{background:#376dff}
.xf-sound-switch[aria-checked=true]::after{transform:translateX(14px)}
.xf-sound-effects{max-height:min(420px,52dvh);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.xf-sound-option{display:flex;align-items:center;justify-content:space-between;min-height:46px;gap:8px}
.xf-sound-option label{display:flex;align-items:center;gap:9px;flex:1;cursor:pointer}
.xf-sound-option input{margin:0;accent-color:#376dff}
.xf-sound-option small{display:block;color:#98a2b3;font-size:11px;margin-top:1px}
.xf-sound-option:has(input:checked) label{color:#376dff}
.xf-sound-option button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;padding:0;border:0;background:transparent;color:#637892;font-size:12px;cursor:pointer}
.xf-sound-option button:hover{color:#376dff;background:#f4f7ff;border-radius:8px}
.xf-sound-volume{display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:12px;border-top:1px solid #edf0f5;color:#667085;font-size:12px}
.xf-sound-volume input{flex:1;min-width:0;width:100px;accent-color:#376dff}
.xf-sound-volume span{min-width:32px;text-align:right}
.xf-sound-control button:focus-visible{outline:2px solid #9bb8ff;outline-offset:2px}
.xf .purchase-sound-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.xf #purchaseSound .xf-sound-menu span{display:none}
@media(max-width:600px){.xf-sound-menu{min-height:40px}.xf-sound-menu span{font-size:12px}}
/* Two-tab notification settings, used by the existing purchase sheet and header dialog. */
.xf .sheet:has(.xf-notify){max-width:480px;position:relative;z-index:101}
.xf .mask:has(.xf-notify){z-index:110}
.xf-notify [hidden]{display:none!important}
.xf-notify-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.xf-notify-head h2{font-size:21px!important;line-height:1.4;margin:0 0 5px!important;color:#202735}
.xf-notify-head p{margin:0 0 20px;color:#8c97a7;font-size:12px!important}
.xf-notify .xf-notify-close{padding:0 0 5px 8px;min-height:0;border:0;background:none;color:#8c97a7;font-size:24px;line-height:1;cursor:pointer}
.xf-notify-tabs{display:flex;gap:24px;border-bottom:1px solid #e7ecf3;margin-bottom:20px}
.xf-notify .xf-notify-tabs button{position:relative;border:0;border-radius:0;background:none;padding:0 0 12px;min-height:0;color:#8a96a8;font-size:13px}
.xf-notify .xf-notify-tabs button[aria-selected=true]{color:#376dff;font-weight:600}
.xf-notify-tabs button[aria-selected=true]:after{position:absolute;content:'';bottom:-1px;left:0;right:0;height:2px;border-radius:2px;background:#376dff}
.xf-notify .xf-sound-head strong{font-size:15px;color:#344054}
.xf-notify .xf-sound-switch{padding:0;min-height:20px;height:20px;max-height:20px;min-width:34px;border-radius:12px;background:#cbd2dd}
.xf-notify .xf-sound-switch[aria-checked=true]{background:#376dff}
.xf-notify .xf-sound-hint{font-size:12px;margin:7px 0 13px;color:#8c97a7;line-height:1.7}
.xf-notify .xf-sound-types{display:flex;flex-direction:column;gap:10px;border:0;padding:0;margin:0 0 18px}
.xf-notify .xf-sound-types label{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13px;color:#5d6d84;font-weight:400;line-height:1.5;cursor:pointer}
.xf-notify .xf-sound-types small{display:block;margin:2px 0 0;font-size:11px;color:#8c97a7;font-weight:400;line-height:1.6}
.xf-notify .xf-sound-types input,.xf-notify .xf-sound-option input{flex-shrink:0;width:15px!important;height:15px!important;min-height:15px!important;padding:0!important;margin:2px 0 0;accent-color:#376dff}
.xf-notify .xf-sound-effects{border:1px solid #e5eaf2;border-radius:10px;max-height:none;overflow:hidden}
.xf-notify .xf-sound-option{padding:8px 12px;min-height:54px;border-bottom:1px solid #edf0f5}
.xf-notify .xf-sound-option:last-child{border:0}
.xf-notify .xf-sound-option:has(input:checked){background:#f4f7ff}
.xf-notify .xf-sound-option label{font-size:14px;font-weight:400;margin:0;color:#48566c}
.xf-notify .xf-sound-option:has(input:checked) label{color:#376dff;font-weight:600}
.xf-notify .xf-sound-option button{width:auto;min-height:34px;height:34px;padding:0 5px;white-space:nowrap;background:none;border:0;font-size:11px;color:#68809f}
.xf-notify .xf-sound-volume{border:0;margin:16px 0 0;padding:0;font-size:12px;font-weight:400;color:#738096}
.xf-notify .xf-sound-volume input{width:100px;min-height:18px;height:18px;padding:0;border:0;accent-color:#376dff}
.xf-notify .xf-sound-status{font-size:11px;color:#8b97a8;margin:6px 0 0}
.xf-notify .xf-notify-note{padding:11px 12px;border-radius:8px;background:#f7f9fc;color:#8a96a8;font-size:11px;line-height:1.7;margin:18px 0}
.xf-notify-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.xf-notify .xf-notify-actions button{padding:8px 17px;min-height:36px;border:0;border-radius:8px;background:#eff3f9;color:#788599;font:inherit;font-size:13px;cursor:pointer}
.xf-notify .xf-notify-actions .xf-notify-save{background:#376dff;color:#fff}
.xf-notify .xf-bark-caption{font-size:13px;color:#8490a2;margin:0 0 15px}
.xf-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.xf-sound-toast{position:fixed;z-index:150;left:50%;bottom:26px;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 18px;border-radius:10px;background:#253147;color:white;font:14px/1.6 -apple-system,BlinkMacSystemFont,sans-serif;box-shadow:0 6px 25px #16223a24}
.xf-sound-toast[hidden]{display:none}
.site-dialog.xf-notify-dialog{width:min(480px,calc(100vw - 24px))}
@media(max-width:600px){.xf .sheet:has(.xf-notify){padding:20px}.xf-notify .xf-sound-option{padding:8px 10px}.xf-notify .xf-sound-option label{font-size:13px}.xf-notify .xf-sound-hint{font-size:11px}}
.xf-notify .xf-sound-volume{display:flex;align-items:center;gap:10px}

.xf-bark-master{margin-bottom:18px}.xf-bark-master .xf-sound-hint{margin-bottom:0}

/* Bark 图文教程（通知设置弹窗内） */
.xf-notify .bg { margin-top:18px; border-top:1px solid #e9edf3; padding-top:14px; }
.xf-notify .bg summary { cursor:pointer; color:#2f6ff5; font-weight:600; font-size:14px; list-style:none; }
.xf-notify .bg summary::-webkit-details-marker { display:none; }
.xf-notify .bg summary::before { content:"▸ "; }
.xf-notify .bg[open] summary::before { content:"▾ "; }
.xf-notify .bg-list { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.xf-notify .bg-head { display:flex; align-items:center; gap:8px; font-size:15px; }
.xf-notify .bg-n { width:22px; height:22px; border-radius:50%; background:#2f6ff5; color:#fff; display:inline-grid; place-items:center; font-size:12px; flex:none; }
.xf-notify .bg-step p { margin:6px 0 8px; color:#4b5563; font-size:13px; line-height:1.6; }
.xf-notify .bg-img { display:block; width:100%; max-width:360px; border-radius:12px; border:1px solid #e9edf3; }
.xf-notify .bg-ai { margin-top:16px; padding:14px; border-radius:14px; background:#f5f7fa; }
.xf-notify .bg-ai p { margin:6px 0 10px; color:#4b5563; font-size:13px; line-height:1.6; }
.xf-notify .bg-ai button{padding:8px 14px;min-height:36px;border:1px solid #dce4f0;border-radius:8px;background:#fff;color:#376dff;font:inherit;font-size:13px;cursor:pointer}
.xf-notify .bg-ai textarea{box-sizing:border-box;width:100%;min-height:145px;padding:10px;border:1px solid #dce4f0;border-radius:8px;font:inherit;font-size:13px;line-height:1.6}
.xf-notify [data-bark-guide-status]:empty{display:none}

/* The web and Bark tabs share category spacing, type and checkbox geometry. */
.xf-notify .xf-sound-types{min-width:0}
.xf-notify .xf-sound-types label{padding:0}
.xf-notify .xf-sound-types input[type=checkbox]{flex:0 0 15px;margin:2px 0 0}
.xf-notify .xf-bark-master{margin:0}
.xf-notify .xf-bark-master .xf-sound-hint{margin:7px 0 13px}
.xf-notify .xf-notify-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

.xf-notify #siteNotifyStatus:empty{display:none}