.xq-topbar { position:sticky; top:0; z-index:20000; width:100%; border-bottom:1px solid var(--line, rgba(148,163,184,.18)); background:rgba(7,11,22,.84); backdrop-filter:blur(18px); }
:root[data-theme="light"] .xq-topbar { background:rgba(255,255,255,.86); }
body .xq-topbar > .nav { display:flex; align-items:center; gap:20px; min-height:58px; width:100% !important; max-width:none !important; margin:0 !important; padding:0 18px !important; }
.xq-topbar .nav-left { display:flex; align-items:center; gap:24px; min-width:0; }
.xq-topbar .brand { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:650; white-space:nowrap; }
.xq-topbar .brand-mark { display:block; width:30px; height:30px; overflow:hidden; border:0; border-radius:10px; color:transparent; background:transparent; box-shadow:none; font-size:0; line-height:0; }
.xq-topbar .brand-mark img { display:block; width:100%; height:100%; object-fit:contain; }
.xq-topbar .nav-links { display:flex; align-items:center; gap:24px; margin-left:0; color:var(--muted, #9aa8c7); font-size:15px; font-weight:650; }
.xq-topbar .nav-links a { opacity:.88; white-space:nowrap; }
.xq-topbar .nav-links a:hover,.xq-topbar .nav-links a.active { color:var(--text, #eef4ff); opacity:1; }
.xq-topbar .nav-actions { margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:8px; width:312px; min-width:312px; }
.xq-topbar .nav-tools { position:relative; align-self:stretch; display:inline-flex; align-items:center; gap:7px; z-index:2; }
.xq-topbar .tool-button { display:inline-flex; align-items:center; justify-content:center; width:38px; min-width:38px; height:38px; min-height:38px; padding:0; border:1px solid rgba(148,163,184,.18); border-radius:999px; color:var(--text, #eef4ff); background:rgba(255,255,255,.10); box-shadow:none; cursor:pointer; }
.xq-topbar .tool-button svg { width:18px; height:18px; stroke:currentColor; }
.xq-topbar .tool-button:hover:not(:disabled) { border-color:rgba(92,243,255,.34); background:rgba(92,243,255,.12); }
.xq-topbar .tool-button.active { color:#04111f; background:linear-gradient(135deg,#5cf3ff,#b5fbff); }
.xq-topbar .theme-popover,.xq-topbar .language-popover,.xq-topbar .account-dropdown { position:absolute; top:calc(100% + 8px); right:0; border:1px solid rgba(148,163,184,.26); background:#323540; box-shadow:0 24px 70px rgba(0,0,0,.38); backdrop-filter:blur(20px); opacity:0; visibility:hidden; transform:translateY(-6px) scale(.96); transform-origin:top right; pointer-events:none; transition:opacity .14s ease, transform .14s ease, visibility .14s ease; z-index:30000; }
:root[data-theme="light"] .xq-topbar .theme-popover,:root[data-theme="light"] .xq-topbar .language-popover,:root[data-theme="light"] .xq-topbar .account-dropdown { background:rgba(255,255,255,.98); box-shadow:0 24px 70px rgba(15,23,42,.16); }
.xq-topbar #themePopover.theme-popover { right:46px; width:206px; padding:0; overflow:visible; border-radius:8px; background:#42444a; }
:root[data-theme="light"] .xq-topbar #themePopover.theme-popover { border-color:rgba(203,213,225,.9); background:rgba(255,255,255,.98); }
.xq-topbar #languagePopover.language-popover { width:176px; padding:8px; border-radius:12px; }
.xq-topbar .theme-popover::before,.xq-topbar .language-popover::before { content:""; position:absolute; left:0; right:0; top:-12px; height:12px; background:transparent; pointer-events:auto; }
.xq-topbar .theme-popover.open,.xq-topbar .language-popover.open,.xq-topbar .account-dropdown.open,.xq-topbar .theme-popover:hover,.xq-topbar #themeToggleButton:hover + .theme-popover,.xq-topbar .language-popover:hover,.xq-topbar #langToggleButton:hover + .language-popover,.xq-topbar .account-menu:hover .account-dropdown,.xq-topbar .account-menu:focus-within .account-dropdown { opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; }
.xq-topbar .theme-option { display:grid; grid-template-columns:26px minmax(0,1fr); align-items:center; gap:7px; width:100%; min-height:54px; padding:7px 12px; border:0; border-radius:0; color:#fff; background:transparent; box-shadow:none; cursor:pointer; text-align:left; }
.xq-topbar #themePopover .theme-option { grid-template-columns:26px minmax(0,1fr); align-items:center; gap:7px; min-height:54px; padding:7px 12px; color:#fff; }
.xq-topbar .theme-option:hover:not(.active) { color:#fff; background:rgba(148,163,184,.10); }
.xq-topbar .theme-option.active { color:#ffffff; background:linear-gradient(135deg, rgba(79,111,255,.70), rgba(92,243,255,.24)); }
.xq-topbar .theme-option.active:hover { background:linear-gradient(135deg, rgba(79,111,255,.70), rgba(92,243,255,.24)); }
:root[data-theme="light"] .xq-topbar .theme-option { color:#20242d; }
:root[data-theme="light"] .xq-topbar .theme-option:hover:not(.active) { color:#20242d; background:rgba(15,23,42,.06); }
:root[data-theme="light"] .xq-topbar .theme-option.active { color:#111827; background:linear-gradient(135deg,#9fb4ff,#d8f0ff); }
:root[data-theme="light"] .xq-topbar .theme-option.active:hover { background:linear-gradient(135deg,#9fb4ff,#d8f0ff); }
.xq-topbar .theme-option-icon { display:grid; place-items:center; width:20px; height:20px; flex:none; color:currentColor; }
.xq-topbar #themePopover .theme-option-icon { width:20px; height:20px; margin-top:0; color:currentColor; }
.xq-topbar .theme-option-icon svg { width:17px; height:17px; }
.xq-topbar #themePopover .theme-option-icon svg { width:17px; height:17px; }
.xq-topbar .theme-option > span:last-child { display:block; min-width:0; }
.xq-topbar .theme-option strong { display:block; font-size:14px; font-weight:720; line-height:1.16; letter-spacing:-.025em; }
.xq-topbar #themePopover .theme-option strong { font-size:14px; font-weight:720; line-height:1.16; letter-spacing:-.025em; }
.xq-topbar .theme-option > span:last-child > span { display:block; margin-top:1px; color:rgba(226,232,240,.76); font-size:11px; font-weight:600; line-height:1.22; }
.xq-topbar #themePopover .theme-option > span:last-child > span { display:block; margin-top:1px; color:rgba(226,232,240,.76); font-size:11px; font-weight:600; line-height:1.22; }
:root[data-theme="light"] .xq-topbar .theme-option > span:last-child > span { color:#6b7280; }
:root[data-theme="light"] .xq-topbar .theme-option.active > span:last-child > span { color:#4b5563; }
:root[data-theme="light"] .xq-topbar #themePopover .theme-option,
:root[data-theme="light"] .xq-topbar #themePopover .theme-option strong { color:#20242d; }
:root[data-theme="light"] .xq-topbar #themePopover .theme-option.active,
:root[data-theme="light"] .xq-topbar #themePopover .theme-option.active strong { color:#111827; }
:root[data-theme="light"] .xq-topbar #themePopover .theme-option > span:last-child > span { color:#6b7280; }
:root[data-theme="light"] .xq-topbar #themePopover .theme-option.active > span:last-child > span { color:#4b5563; }
.xq-topbar .theme-system-note { display:none; }
.xq-topbar .language-option,.xq-topbar .account-action { width:100%; min-height:38px; display:flex; align-items:center; gap:10px; padding:0 12px; border:0; border-radius:9px; color:var(--text, #eef4ff); background:transparent; cursor:pointer; text-align:left; font-size:13px; font-weight:400; }
.xq-topbar .language-option:hover { color:var(--text, #eef4ff); background:rgba(148,163,184,.10); }
.xq-topbar .language-option.active { color:#ffffff; background:linear-gradient(135deg, rgba(79,111,255,.70), rgba(92,243,255,.24)); }
.xq-topbar .language-option.active:hover { background:linear-gradient(135deg, rgba(79,111,255,.70), rgba(92,243,255,.24)); }
:root[data-theme="light"] .xq-topbar .language-option:hover { background:rgba(15,23,42,.06); }
:root[data-theme="light"] .xq-topbar .language-option.active { color:#ffffff; background:linear-gradient(135deg,#4f6fff,#78a6ff); }
:root[data-theme="light"] .xq-topbar .language-option.active:hover { background:linear-gradient(135deg,#4f6fff,#78a6ff); }
.xq-topbar .account-action:hover { background:rgba(126,149,194,.24); }
.xq-topbar .segmented-auth { display:inline-flex; overflow:hidden; min-height:38px; border-radius:999px; background:rgba(255,255,255,.12); }
:root[data-theme="light"] .xq-topbar .segmented-auth { background:rgba(15,23,42,.06); }
.xq-topbar .auth-pill { display:inline-flex; align-items:center; justify-content:center; min-width:68px; padding:0 14px; color:var(--text, #eef4ff); font-size:13px; font-weight:400; }
.xq-topbar .auth-pill.active { color:#04111f; background:linear-gradient(135deg,#b7ccff,#73a0ff); }
.xq-topbar .account-menu { position:relative; display:none; align-self:stretch; align-items:center; --account-dropdown-gap:8px; }
.xq-topbar .account-menu.logged-in { display:flex; }
.xq-topbar .account-trigger { display:inline-flex; align-items:center; justify-content:flex-start; gap:7px; width:134px; min-width:134px; min-height:38px; padding:4px 6px 4px 3px; border:1px solid rgba(148,163,184,.18); border-radius:999px; color:var(--text, #eef4ff); background:rgba(255,255,255,.10); cursor:pointer; }
.xq-topbar .account-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#04111f; background:linear-gradient(135deg,#5cf3ff,#b5fbff); font-size:12px; font-weight:500; }
.xq-topbar .account-name { display:block; flex:0 1 auto; min-width:0; max-width:67px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:400; line-height:1.2; text-align:left; }
.xq-topbar .account-chevron { display:block; width:14px; height:14px; flex:0 0 14px; color:currentColor; stroke:currentColor; }
.xq-topbar .account-dropdown { top:calc(100% + var(--account-dropdown-gap)); width:260px; overflow:visible; border-radius:18px; padding:8px 0; }
.xq-topbar .account-dropdown::before { content:""; position:absolute; left:0; right:0; top:calc(-1 * var(--account-dropdown-gap) - 1px); height:calc(var(--account-dropdown-gap) + 1px); background:transparent; }
.xq-topbar .account-head { padding:12px 12px 14px; border-bottom:1px solid rgba(148,163,184,.20); }
.xq-topbar .account-head strong,.xq-topbar .account-head span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xq-topbar .account-head span { margin-top:4px; color:var(--muted, #9aa8c7); font-size:13px; }
.xq-topbar .account-action { border-radius:0; justify-content:flex-start; }
.xq-topbar .account-action.danger-text { color:#ff8a8a; border-top:1px solid rgba(148,163,184,.20); }
@media (max-width:760px) { body .xq-topbar > .nav { gap:12px; width:100% !important; max-width:none !important; margin:0 !important; padding:0 12px !important; } .xq-topbar .brand span:last-child { display:none; } .xq-topbar .nav-left { gap:14px; min-width:0; } .xq-topbar .nav-links { max-width:calc(100vw - 170px); overflow:auto; gap:14px; font-size:13px; scrollbar-width:none; } .xq-topbar .nav-links::-webkit-scrollbar { display:none; } .xq-topbar .nav-actions { width:auto; min-width:0; } .xq-topbar .segmented-auth { display:none; } }