.xq-topbar .notification-center { position:relative; }
.xq-topbar .notification-center[hidden],.notification-popup-backdrop[hidden] { display:none !important; }
.xq-topbar .notification-trigger { position:relative; }
.xq-topbar .notification-trigger.has-unread { border-color:rgba(248,113,113,.45); }
.xq-topbar .notification-badge { position:absolute; top:-5px; right:-6px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 4px; border:2px solid #101827; border-radius:9px; color:#fff; background:#ef4444; font-size:10px; font-weight:800; line-height:1; }
.xq-topbar .notification-badge[hidden] { display:none !important; }
:root[data-theme="light"] .xq-topbar .notification-badge { border-color:#fff; }
.xq-topbar .notification-panel { position:absolute; top:calc(100% + 10px); right:0; z-index:30000; width:min(390px, calc(100vw - 24px)); max-height:min(560px, calc(100vh - 82px)); overflow:hidden; border:1px solid rgba(148,163,184,.32); border-radius:8px; color:#f3f6fb; background:#181e29; box-shadow:0 24px 70px rgba(0,0,0,.42); opacity:0; visibility:hidden; transform:translateY(-6px); pointer-events:none; transition:opacity .14s ease, transform .14s ease, visibility .14s ease; }
:root[data-theme="light"] .xq-topbar .notification-panel { border-color:#d9e1ec; color:#172033; background:#fff; box-shadow:0 24px 70px rgba(15,23,42,.18); }
.xq-topbar .notification-panel.open { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.xq-topbar .notification-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 14px; border-bottom:1px solid rgba(148,163,184,.18); }
.xq-topbar .notification-panel-head strong { font-size:16px; font-weight:750; }
.xq-topbar .notification-read-all { min-height:32px; padding:0 8px; border:0; border-radius:6px; color:#8bd8ff; background:transparent; cursor:pointer; font:inherit; font-size:13px; font-weight:650; }
.xq-topbar .notification-read-all:hover { background:rgba(92,243,255,.10); }
:root[data-theme="light"] .xq-topbar .notification-read-all { color:#315fd5; }
.xq-topbar .notification-list { max-height:min(500px, calc(100vh - 136px)); overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.45) transparent; }
.xq-topbar .notification-list::-webkit-scrollbar { width:6px; }
.xq-topbar .notification-list::-webkit-scrollbar-track { background:transparent; }
.xq-topbar .notification-list::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(148,163,184,.42); }
.notification-level-info { --notification-accent:#4f8cff; --notification-accent-soft:rgba(79,140,255,.13); }
.notification-level-important { --notification-accent:#f59e0b; --notification-accent-soft:rgba(245,158,11,.13); }
.notification-level-maintenance { --notification-accent:#f43f5e; --notification-accent-soft:rgba(244,63,94,.13); }
.xq-topbar .notification-item { position:relative; display:block; width:100%; min-height:102px; padding:13px 15px 12px; border:0; border-bottom:1px solid rgba(148,163,184,.18); border-radius:0; color:inherit; background:transparent; cursor:pointer; text-align:left; font:inherit; }
.xq-topbar .notification-item:last-child { border-bottom:0; }
.xq-topbar .notification-item:hover { background:rgba(148,163,184,.09); }
.xq-topbar .notification-item.is-unread::after { content:""; position:absolute; top:17px; right:14px; width:6px; height:6px; border-radius:50%; background:#5c8dff; box-shadow:0 0 0 3px rgba(79,140,255,.12); }
.xq-topbar .notification-item.is-read { opacity:.78; }
.xq-topbar .notification-item-head,.xq-topbar .notification-item-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.xq-topbar .notification-item-title-wrap { display:flex; align-items:center; gap:9px; min-width:0; padding-right:14px; }
.xq-topbar .notification-item-level-icon { display:grid; flex:0 0 26px; width:26px; height:26px; place-items:center; border:1px solid var(--notification-accent-soft); border-radius:7px; color:var(--notification-accent); background:var(--notification-accent-soft); }
.xq-topbar .notification-level-icon-svg { width:15px; height:15px; }
.xq-topbar .notification-item-title { overflow:hidden; color:#f3f6fb; font-size:15px; font-weight:750; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.xq-topbar .notification-item-content { display:-webkit-box; min-height:36px; margin-top:6px; padding-left:35px; overflow:hidden; color:#c7d2e4; font-size:13px; line-height:1.45; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.xq-topbar .notification-item-meta { margin-top:6px; padding-left:35px; color:#9fb0c9; font-size:12px; }
:root[data-theme="light"] .xq-topbar .notification-item-title { color:#172033; }
:root[data-theme="light"] .xq-topbar .notification-item-content { color:#405069; }
:root[data-theme="light"] .xq-topbar .notification-item-meta { color:#64748b; }
.xq-topbar .notification-empty { display:grid; min-height:160px; place-items:center; color:var(--muted, #9aa8c7); font-size:13px; }
.notification-popup-open { overflow:hidden; }
.notification-popup-backdrop { position:fixed; inset:0; z-index:40000; display:grid; box-sizing:border-box; place-items:center; padding:18px; background:rgba(2,6,23,.58); backdrop-filter:blur(8px); opacity:0; transition:opacity .16s ease; }
.notification-popup-backdrop.open { opacity:1; }
.notification-popup { position:relative; box-sizing:border-box; width:500px; max-width:100%; max-height:calc(100vh - 36px); overflow-y:auto; border:1px solid rgba(148,163,184,.34); border-radius:8px; color:#f8fafc; background:#151b26; box-shadow:0 28px 90px rgba(0,0,0,.48); scrollbar-width:thin; scrollbar-color:rgba(148,163,184,.45) transparent; transform:translateY(8px) scale(.99); transition:transform .18s ease; }
.notification-popup::-webkit-scrollbar { width:6px; }
.notification-popup::-webkit-scrollbar-track { background:transparent; }
.notification-popup::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(148,163,184,.42); }
.notification-popup-backdrop.open .notification-popup { transform:translateY(0) scale(1); }
:root[data-theme="light"] .notification-popup { border-color:#d7dee8; color:#0f172a; background:#fff; box-shadow:0 28px 80px rgba(15,23,42,.22); }
.notification-popup-backdrop.notification-style-simple { background:rgba(2,6,23,.40); backdrop-filter:blur(3px); }
.notification-style-simple .notification-popup { width:430px; box-shadow:0 18px 52px rgba(0,0,0,.36); }
.notification-style-simple .notification-popup-header { padding:18px 54px 15px 18px; }
.notification-style-simple .notification-popup-level-icon { width:34px; height:34px; }
.notification-style-simple .notification-popup-title { font-size:19px; }
.notification-style-simple .notification-popup-body { padding:16px 18px; }
.notification-style-simple .notification-popup-content { font-size:15px; line-height:1.55; }
.notification-style-simple .notification-popup-actions { padding:14px 18px; }
.notification-style-featured .notification-popup { width:540px; box-shadow:0 32px 100px rgba(0,0,0,.56); }
.notification-style-featured .notification-popup-header { padding:26px 62px 21px 26px; }
.notification-style-featured .notification-popup-level-icon { width:44px; height:44px; }
.notification-style-featured .notification-popup-level-icon .notification-level-icon-svg { width:22px; height:22px; }
.notification-style-featured .notification-popup-title { font-size:25px; }
.notification-style-featured .notification-popup-body { padding:24px 26px; }
.notification-style-featured .notification-popup-content { font-size:16px; line-height:1.7; }
.notification-style-featured .notification-popup-actions { padding:18px 26px; }
.notification-popup-header { position:relative; display:flex; align-items:flex-start; gap:13px; padding:22px 58px 18px 22px; }
.notification-popup-heading { flex:1; min-width:0; padding-top:1px; }
.notification-popup-level { flex:none; }
.notification-popup-level-icon { display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--notification-accent-soft); border-radius:8px; color:var(--notification-accent); background:var(--notification-accent-soft); }
.notification-popup-level-icon .notification-level-icon-svg { width:20px; height:20px; }
.notification-popup-close { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:34px; height:34px; padding:0; border:1px solid rgba(148,163,184,.18); border-radius:8px; color:#aebbd0; background:rgba(148,163,184,.06); cursor:pointer; }
.notification-popup-close:hover { background:rgba(148,163,184,.12); }
.notification-popup-close:focus-visible { outline:2px solid var(--notification-accent); outline-offset:2px; }
.notification-popup-close-icon { width:18px; height:18px; }
.notification-popup-title { margin:0; color:#f8fafc; font-size:22px; line-height:1.35; overflow-wrap:anywhere; }
.notification-popup-time { display:block; margin-top:5px; color:#aebbd0; font-size:12px; }
.notification-popup-body { padding:20px 22px; border-top:1px solid rgba(148,163,184,.16); border-bottom:1px solid rgba(148,163,184,.16); background:rgba(148,163,184,.035); }
.notification-popup-content { min-height:42px; padding:2px 0 2px 16px; border-left:3px solid var(--notification-accent); color:#e2e8f0; font-size:16px; line-height:1.65; overflow-wrap:anywhere; white-space:pre-wrap; }
:root[data-theme="light"] .notification-popup-title { color:#0f172a; }
:root[data-theme="light"] .notification-popup-time { color:#64748b; }
:root[data-theme="light"] .notification-popup-content { color:#334155; }
:root[data-theme="light"] .notification-popup-body { border-color:#e6eaf0; background:#fbfcfe; }
:root[data-theme="light"] .notification-popup-close { border-color:#e1e6ee; color:#64748b; background:#f8fafc; }
.notification-popup-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; padding:16px 22px; }
.notification-popup-button { min-height:40px; padding:0 17px; border:1px solid #4f6fff; border-radius:6px; color:#fff; background:#4f6fff; cursor:pointer; font:inherit; font-size:14px; font-weight:700; }
.notification-popup-button.primary { border-color:#4f6fff; color:#fff; background:#4f6fff; }
.notification-popup-button:hover { border-color:#6682ff; background:#6682ff; }
.notification-popup-button:focus-visible { outline:0; box-shadow:0 0 0 3px rgba(102,130,255,.3); }
.notification-popup-button[hidden] { display:none; }
@media (max-width:760px) {
  .xq-topbar .notification-panel { position:fixed; top:66px; right:12px; left:12px; width:auto; max-height:calc(100vh - 78px); }
  .xq-topbar .notification-list { max-height:calc(100vh - 132px); }
  .notification-popup-backdrop { padding:12px; }
  .notification-popup,.notification-style-simple .notification-popup,.notification-style-featured .notification-popup { width:100%; max-width:100%; }
  .notification-popup-header,.notification-style-featured .notification-popup-header { padding:18px 52px 16px 16px; }
  .notification-popup-level-icon,.notification-style-featured .notification-popup-level-icon { width:36px; height:36px; }
  .notification-popup-level-icon .notification-level-icon-svg,.notification-style-featured .notification-popup-level-icon .notification-level-icon-svg { width:18px; height:18px; }
  .notification-popup-title,.notification-style-featured .notification-popup-title { font-size:21px; }
  .notification-popup-body,.notification-style-featured .notification-popup-body { padding:17px 16px; }
  .notification-popup-content,.notification-style-featured .notification-popup-content { font-size:15px; line-height:1.6; }
  .notification-popup-actions,.notification-style-featured .notification-popup-actions { align-items:stretch; flex-direction:column-reverse; padding:14px 16px 16px; }
  .notification-popup-button { width:100%; }
}
@media (max-width:560px) {
  .xq-topbar .nav-actions { display:flex; }
  .xq-topbar #themeToggleButton,.xq-topbar #themePopover,.xq-topbar #langToggleButton,.xq-topbar #languagePopover { display:none; }
  .xq-topbar .account-trigger { width:38px; min-width:38px; padding:3px; }
  .xq-topbar .account-name,.xq-topbar .account-chevron { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .xq-topbar .notification-panel,.notification-popup-backdrop,.notification-popup { transition:none; }
}