/* Xero C++ — site-wide frosted glass (glassmorphism)
 * Values match the approved login page card style.
 * Dark mode glass:  html:not(.light)
 * Light mode glass: html.light (white translucent variant)
 * The particle canvas sits behind <body> (transparent), so panels
 * show blurred particles through the glass. border-radius is left
 * untouched so each element keeps its own shape. */

html:not(.light) .topbar,
html:not(.light) .panel,
html:not(.light) .global-settings-menu,
html:not(.light) .badge-modal,
html:not(.light) #announceBox,
html:not(.light) #xeroPromptBox,
html:not(.light) #xeroImgBox,
html:not(.light) .ai-panel{
  background:rgba(16,22,29,.58);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 64px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);
}

html.light .topbar,
html.light .panel,
html.light .global-settings-menu,
html.light .badge-modal,
html.light #announceBox,
html.light #xeroPromptBox,
html.light #xeroImgBox,
html.light .ai-panel{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(22px) saturate(1.25);
  backdrop-filter:blur(22px) saturate(1.25);
  border:1px solid rgba(15,35,45,.10);
  box-shadow:0 24px 64px rgba(20,40,60,.14),inset 0 1px 0 rgba(255,255,255,.65);
}

/* ===== 统一导航高亮（所有页面一致） ===== */
.topbar .links a.active{background:var(--fx-acc,#0e639c)!important;color:#fff!important;box-shadow:0 0 0 1px rgba(var(--green-rgb,78,201,176),.28),0 4px 14px rgba(var(--green-rgb,14,99,156),.35)!important}
.topbar .links a.active *{color:inherit!important}
:root.light .topbar .links a.active{background:var(--fx-acc,#1769aa)!important;color:#fff!important;box-shadow:0 2px 8px rgba(15,23,42,.12)!important}

/* settings menu: always opaque and above page content (20261019) */
.global-settings-menu{background:#10151c!important;background-color:#10151c!important;opacity:1!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;z-index:1000!important}
:root.light .global-settings-menu,.light .global-settings-menu{background:#ffffff!important;background-color:#ffffff!important}
.topbar{z-index:200!important}
@media(max-width:600px){.topbar{position:relative}}

/* DM unread badge anchors to its nav link (20261020) */
.topbar .links a{position:relative}
.topbar .links a #dmUnread{position:absolute;top:-6px;right:-6px}

/* ===== 竖版侧边导航（20261023i） ===== */
:root{--sbw:152px}
html.nav-collapsed{--sbw:58px}
.side-nav{position:fixed;left:0;top:0;bottom:0;width:var(--sbw);display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:2px;padding:12px 8px;margin:0;background:var(--panel2,#151b24);border-right:1px solid var(--line,#1f2833);overflow-y:auto;overflow-x:hidden;z-index:260;transition:width .18s ease,transform .2s ease;font:13px/1.5 Consolas,"Microsoft YaHei",monospace}
body{padding-left:var(--sbw)!important;transition:padding-left .18s ease}
.side-nav a,.nav-more>summary{display:flex!important;align-items:center;gap:10px;padding:8px 10px!important;border-radius:6px;white-space:nowrap;overflow:visible;color:var(--text);text-decoration:none;font-size:13px}
.side-nav a::before,.nav-more>summary::before{flex:0 0 20px;text-align:center;font-size:15px;line-height:1}
.side-nav a:hover,.nav-more>summary:hover{background:var(--line,#1f2833)}
.side-nav a #dmUnread{position:absolute;top:4px;left:24px;right:auto}
.nav-toggle{display:flex;align-items:center;justify-content:center;height:32px;margin:0 0 8px;border:1px solid var(--line,#1f2833);border-radius:6px;background:transparent;color:var(--muted,#8b98a9);cursor:pointer;font:inherit;font-size:14px}
.nav-toggle:hover{color:var(--text);border-color:var(--green,var(--green,#4ec9b0))}
.nav-more{position:static}
.nav-more>summary{list-style:none;cursor:pointer;user-select:none;color:var(--muted,#8b98a9)}
.nav-more>summary::-webkit-details-marker{display:none}
.nav-more>summary.active{background:transparent!important;color:var(--green,var(--green,#4ec9b0))!important;box-shadow:none}
.nav-more .nav-menu{display:flex;flex-direction:column;gap:2px;margin-top:2px}
html.nav-collapsed .side-nav a,html.nav-collapsed .nav-more>summary{font-size:0;justify-content:center;gap:0;padding:8px 0!important}
html.nav-collapsed .side-nav a #dmUnread{font-size:11px}
html.nav-collapsed .nav-toggle{font-size:14px}
.light .side-nav{background:#e8edf2;border-color:#cbd3dc}
.light .side-nav a,.light .nav-more>summary{color:#1f2933}
.light .side-nav a.active{color:#fff}
.light .nav-more>summary.active{color:#15785f!important}
.nav-burger{display:none}
.nav-shade{display:none}
@media(max-width:760px){
 body{padding-left:0!important}
 html.nav-collapsed{--sbw:152px}
 html.nav-collapsed .side-nav a,html.nav-collapsed .nav-more>summary{font-size:13px;justify-content:flex-start;gap:10px;padding:8px 10px!important}
 .side-nav{width:200px;transform:translateX(-100%);box-shadow:none}
 html.nav-open .side-nav{transform:none;box-shadow:8px 0 28px rgba(0,0,0,.35)}
 .nav-toggle{display:none}
 .nav-burger{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;border:1px solid var(--line,#1f2833);border-radius:6px;background:transparent;color:var(--text);font-size:16px;cursor:pointer;flex:0 0 auto}
 html.nav-open .nav-shade{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:255}
}
@media(prefers-reduced-motion:reduce){.side-nav,body{transition:none!important}}
.topbar .links:not(.side-nav){visibility:hidden;position:absolute;pointer-events:none}
.side-nav a.active{background:var(--fx-acc,#0e639c)!important;color:#fff!important;box-shadow:0 0 0 1px rgba(var(--green-rgb,78,201,176),.28),0 4px 14px rgba(var(--green-rgb,14,99,156),.35)!important}
.side-nav a.active *{color:inherit!important}
:root.light .side-nav a.active{background:var(--fx-acc,#1769aa)!important;color:#fff!important}
.side-nav a{position:relative}

/* user links + role tags */
.user-link,[data-user]{cursor:pointer}
.user-link:hover,[data-user]:hover{color:var(--green,var(--green,#4ec9b0))!important;text-decoration:underline}
.user-link:focus-visible{outline:1px solid var(--green,var(--green,#4ec9b0));outline-offset:2px}
.nav-right .role-tag,#whoRole{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:18px;vertical-align:middle}
.role-tag.role-owner{background:#8a6d1f;color:#fff5d6}
.role-tag.role-superadmin{background:#9b3b84;color:#fff}
.role-tag.role-admin{background:#386b5e;color:#eafff9}
.role-tag.role-volunteer{background:#2b4a6b;color:#d6e9ff}

/* 20261027i: page canvas is always the theme background, so the page never turns white when the particle layer is off (流畅模式 / 低配) */
html{background-color:var(--bg,#0a0e13)}
html.lite body,html.lite .wrap{background-color:transparent}

/* 顶部头像 */
.topbar .who-av{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.topbar .who-av .avatar-img,.topbar .who-av .avatar-fallback{width:28px!important;height:28px!important;line-height:28px!important;font-size:13px!important;border-radius:50%;box-shadow:0 0 0 2px rgba(var(--green-rgb,78,201,176),.35)}
.topbar #whoName{color:var(--text)!important;font-weight:600;opacity:.92}
.topbar .who-av{display:inline-flex}.topbar .who-av[hidden]{display:none}
.topbar .who-av .avatar-fallback{display:inline-block;text-align:center;color:#fff;font-weight:700;background:linear-gradient(135deg,var(--accent,#0e639c),var(--green,#4ec9b0))}
.topbar .who-av .avatar-img{object-fit:cover}

/* 统一导航 */
.side-nav a,.nav-more>summary{min-height:36px;box-sizing:border-box;line-height:20px!important}
.side-nav,.side-nav .nav-menu{gap:2px!important}
.topbar{background:var(--panel2,#161b22)!important;border-bottom:1px solid var(--line)!important}

/* 分屏 */
.xero-split{display:none}
html.xero-split-on body{padding-right:var(--split-w,40vw)!important}
html.xero-split-on .xero-split{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:var(--split-w,40vw);z-index:240;background:var(--bg);border-left:1px solid var(--line);box-shadow:-6px 0 24px rgba(0,0,0,.25)}
.xero-split-grip{position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:2}
.xero-split-grip:hover,html.xero-split-drag .xero-split-grip{background:var(--green);opacity:.6}
html.xero-split-drag iframe{pointer-events:none}html.xero-split-drag{user-select:none;cursor:col-resize}
.xero-split-bar{display:flex;gap:6px;align-items:center;padding:8px;background:var(--panel2);border-bottom:1px solid var(--line)}
.xero-split-sel,.xero-split-url{height:30px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);padding:0 8px;font:13px system-ui,"Microsoft YaHei",sans-serif;min-width:0}
.xero-split-url{flex:1}.xero-split-bar .btn{height:30px;padding:0 10px}
.xero-split-frame{flex:1;width:100%;border:0;background:var(--bg)}
.xero-split-btn.on{border-color:var(--green)!important;color:var(--green)!important}
html.xero-embed .side-nav,html.xero-embed .topbar,html.xero-embed .xero-split-btn,html.xero-embed .site-banner,html.xero-embed .nav-burger{display:none!important}
html.xero-embed body{padding-left:0!important}
@media(max-width:900px){.xero-split-btn{display:none}html.xero-split-on body{padding-right:0!important}html.xero-split-on .xero-split{width:100%}}
/* 20261028c: SVG nav icons (mask, currentColor) instead of emoji */
.side-nav a,.nav-more>summary{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}.nav-more>summary{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='19' cy='12' r='1.2'/%3E%3C/svg%3E")}
.side-nav a::before,.nav-more>summary::before{content:""!important;display:inline-block;width:18px;height:18px;flex:0 0 18px;background:currentColor;-webkit-mask:var(--ico) center/18px 18px no-repeat;mask:var(--ico) center/18px 18px no-repeat;opacity:.9}
.links a[href="/home.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E")}
.links a[href="/"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3Cpath d='M9 8l-2 2 2 2M15 8l2 2-2 2'/%3E%3C/svg%3E")}
.links a[href="/problems.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E")}
.links a[href="/templates.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h6a2 2 0 0 1 2 2v14a2 2 0 0 0-2-2H4z'/%3E%3Cpath d='M20 4h-6a2 2 0 0 0-2 2v14a2 2 0 0 1 2-2h6z'/%3E%3C/svg%3E")}
.links a[href="/contests.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3'/%3E%3C/svg%3E")}
.links a[href="/blog.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E")}
.links a[href="/chat.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E")}
.links a[href="/dm.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}
.links a[href="/files.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E")}
.links a[href="/tools.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E")}
.links a[href="/stress.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 21h14M4 7h16'/%3E%3Cpath d='M4 7l-2 6a3 3 0 0 0 4 0zM20 7l-2 6a3 3 0 0 0 4 0z'/%3E%3C/svg%3E")}
.links a[href="/team.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2 20a7 7 0 0 1 14 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18 13.5a7 7 0 0 1 4 6.5'/%3E%3C/svg%3E")}
.links a[href="/about.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E")}
.links a[href="/clubs.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='9' r='3'/%3E%3Ccircle cx='16' cy='9' r='3'/%3E%3Cpath d='M2 20a6 6 0 0 1 12 0M10 20a6 6 0 0 1 12 0'/%3E%3C/svg%3E")}
.links a[href="/discuss.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h12v9H8l-4 3z'/%3E%3Cpath d='M8 16v1h8l4 3V9h-4'/%3E%3C/svg%3E")}
.links a[href="/themes.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='8' cy='10' r='1.3'/%3E%3Ccircle cx='12' cy='7.5' r='1.3'/%3E%3Ccircle cx='16' cy='10' r='1.3'/%3E%3Cpath d='M12 21a2.5 2.5 0 0 1 0-5h2a3 3 0 0 0 3-3'/%3E%3C/svg%3E")}
.links a[href="/users.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M9 14.5L7 22l5-3 5 3-2-7.5'/%3E%3C/svg%3E")}
.links a[href="/draw.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 3l3 3-11 11-4 1 1-4z'/%3E%3Cpath d='M3 21c2 0 3-1 3-3'/%3E%3C/svg%3E")}
.links a[href="/guide.html"]{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 1-1 1.7M12 16.5v.5'/%3E%3C/svg%3E")}
/* 20261028c: collapsed sidebar expands as an overlay on hover (desktop) */
@media(min-width:761px) and (hover:hover){
 html.nav-collapsed:not(.nav-nohover) .side-nav:hover{width:152px;box-shadow:8px 0 28px rgba(0,0,0,.35)}
 html.nav-collapsed:not(.nav-nohover) .side-nav:hover a,html.nav-collapsed:not(.nav-nohover) .side-nav:hover .nav-more>summary{font-size:13px;justify-content:flex-start;gap:10px;padding:8px 10px!important}
}