/* Compact silver titlebar with static surfaces and native controls. */
:root { --topbar-h:52px; }
body:not(.cv-editor-open) .topbar {
  isolation:isolate; height:var(--topbar-h); min-height:var(--topbar-h);
  gap:clamp(8px,1vw,18px); padding-inline:24px;
  background:linear-gradient(115deg,#0c141f,#060a12 46%,#0a101b);
  border-bottom:1px solid #b8d6ff30;
  box-shadow:inset 0 1px #e0edff12,0 10px 36px #0004;
}
.topbar::after { display:block; content:''; position:absolute; inset:auto 0 -1px; height:1px; pointer-events:none; background:linear-gradient(90deg,transparent,#b1e9f582 30%,#c5b5ff88 58%,transparent); }
.topbar .logo { flex:none; padding:4px 0; }
.topbar .logo>svg { width:26px; height:26px; filter:drop-shadow(0 0 12px #a4ddff55); }
.topbar .logo .name { color:#eaf5ff; text-shadow:0 2px 18px #a7d4f233; }
.topbar .brand-caption { color:#9aadc5; font-size:8px; letter-spacing:2px; margin-left:3px; }
.topbar .crumb { color:#a2b5cd; border-color:#adcaff26; white-space:nowrap; }
.topbar .crumb b { color:#d1e2f5; font-weight:500; }
.topbar .app-link { height:32px; border-radius:8px; padding-inline:16px; font-weight:600; transition:transform .22s,box-shadow .22s,background .22s; }
.topbar .app-link-silver { background:linear-gradient(125deg,#edf6ff,#bdd1ed 58%,#c5bde6); border-color:#e1eeffb0; box-shadow:inset 0 1px #fff,0 3px 18px #bed9ff20; }
.topbar .app-link.app-link-free { background:linear-gradient(120deg,#a5e9dc16,#7897cf12); color:#b8eddf; border-color:#adebdb40; }
.topbar .app-link:hover { transform:translateY(-2px); box-shadow:0 5px 24px #acd2ff30; }

/* 风尚产品入口（/products 发布所）：青→紫→粉宝石玻璃 + 周期流光 + 图标轨道动效 */
.topbar .fs-entry {
  position:relative; overflow:hidden; isolation:isolate;
  height:32px; border-radius:9px; padding-inline:13px;
  color:#dbf4ff; font-weight:600; letter-spacing:.01em;
  border:1px solid #86d6ff30;
  background:linear-gradient(125deg,#42e8ff14,#865cff14 55%,#ff3ca61c);
  box-shadow:inset 0 1px #eafcff14;
}
.topbar .fs-entry::before { /* 低频扫过的银青流光 */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg,transparent 34%,rgba(234,250,255,.2) 47%,rgba(255,182,224,.14) 53%,transparent 66%);
  transform:translateX(-140%);
  animation:fsSheen 5.6s cubic-bezier(.45,0,.2,1) infinite;
}
@keyframes fsSheen { 0%,54% { transform:translateX(-140%); } 90%,100% { transform:translateX(140%); } }
.topbar .fs-entry::after { /* 顶缘青粉高光 */
  content:""; position:absolute; inset:0 0 auto; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,#b9f4ff66 32%,#ffb0e066 62%,transparent);
}
.topbar .fs-entry:hover { border-color:#9fe4ff5c; box-shadow:0 6px 24px #58c8ff30, inset 0 1px #eafcff1f; }
.topbar .fs-entry .fs-gem { width:17px; height:17px; filter:drop-shadow(0 0 6px #7fd8ff4d); }
.topbar .fs-entry .fs-gem-orbit { transform-box:view-box; transform-origin:13px 13px; animation:fsRing 22s linear infinite reverse; }
.topbar .fs-entry .fs-gem-sat { transform-box:view-box; transform-origin:13px 13px; animation:fsSat 9s linear infinite; }
.topbar .fs-entry .fs-gem-spark { transform-box:fill-box; transform-origin:center; animation:fsSpark 3s ease-in-out infinite; }
@keyframes fsRing { to { transform:rotate(1turn); } }
@keyframes fsSat { to { transform:rotate(1turn); } }
@keyframes fsSpark { 0%,100% { opacity:.35; transform:scale(.62); } 50% { opacity:1; transform:scale(1.12); } }
.topbar .membership-entry { border-radius:8px; min-height:32px; background:linear-gradient(125deg,#d7ba8520,#d7ba8506); border-color:#d9c69a38; color:#e5d4b2; }
.topbar .lang-toggle,.topbar .help-menu-btn { border-radius:9px; }
.topbar .avatar { border-radius:50%; outline:1px solid #c1dafb40; outline-offset:2px; margin-inline:6px; }
.topbar :is(button,a):focus-visible { outline:2px solid #c2e9ff; outline-offset:4px; }
/* Use the entire workspace; gutters stay bounded even on ultrawide monitors. */
.page .home-blacksite { --atelier-gutter:clamp(24px,3vw,56px); }
.home-blacksite :is(.creation-hub,.plugin-hub,.home-community,.site-footer) { width:100%; max-width:none; margin-inline:0; }
.home-blacksite .creation-hub { padding-top:64px; }
.home-blacksite .creation-offers { gap:24px; }
.home-blacksite .creation-offer { min-height:400px; padding:clamp(28px,3vw,52px); box-shadow:inset 0 1px #d4e7ff0b,0 18px 48px #0002; }
.home-blacksite .offer-art { right:3%; opacity:.5; }
.home-blacksite .plugin-hub,.home-blacksite .home-community { padding-top:72px; }
.home-blacksite .plugin-band { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:clamp(32px,4vw,64px); }
.home-blacksite .home-output-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); overflow:visible; }
.home-blacksite .home-output-strip .work-card { width:100%; min-width:0; }
.home-blacksite .site-footer { margin-top:72px; }
@media(max-width:1150px) { body:not(.cv-editor-open) .topbar { padding-inline:16px; gap:9px; } }
@media(max-width:980px) { .home-blacksite .plugin-band { grid-template-columns:1fr; } }
@media(max-width:760px) {
  :root { --topbar-h:50px; }
  .page .home-blacksite { --atelier-gutter:24px; }
  .home-blacksite .creation-hub { padding-top:44px; }
  .home-blacksite .creation-offer { min-height:370px; padding:30px; }
  .home-blacksite .plugin-hub,.home-blacksite .home-community { padding-top:48px; }
  .home-blacksite .site-footer { margin-top:48px; }
  .topbar .app-link { padding-inline:11px; }
}
@media(max-width:520px) {
  body:not(.cv-editor-open) .topbar { padding-inline:10px; gap:7px; }
  .topbar .app-link { padding-inline:9px; height:34px; border-radius:8px; }
  .topbar .membership-entry { min-height:34px; }
  .topbar .avatar { outline-offset:2px; margin-inline:3px; }
  .page .home-blacksite { --atelier-gutter:16px; }
  .home-blacksite .creation-offer { padding:26px; }
  .home-blacksite .plugin-band { padding:28px 24px; }
}
@media(max-width:360px) {
  body:not(.cv-editor-open) .topbar { padding-inline:8px; gap:5px; }
  .topbar .app-link { padding-inline:6px; }
  .topbar .membership-entry { padding-inline:6px; }
  .topbar .logo .name { font-size:15px; }
  .topbar .avatar { margin-inline:2px; }
}
.user-menu .mobile-workspace-entry { display:none; }
@media(min-width:681px) and (max-width:1100px) {
  .topbar :is(.brand-caption,.crumb,#user-chip) { display:none; }
  .topbar .app-link { flex:none; width:34px; padding-inline:0; justify-content:center; }
  .topbar .app-link :is(span,small) { display:none; }
  .topbar .app-link > svg { display:block; }
  .topbar :is(.invite-entry,.membership-entry) { flex:none; width:34px; padding-inline:0; justify-content:center; }
  .topbar :is(.invite-entry,.membership-entry) > span { display:none; }
  .topbar .tier-pill > span { display:none; }
}
@media(max-width:680px) {
  body:not(.cv-editor-open) .topbar { gap:8px; padding-inline:12px; }
  .topbar :is(.fs-entry,.invite-entry,.membership-entry,.lang-toggle,.brand-caption,.crumb,#user-chip,#tier-pill) { display:none; }
  .topbar .logo { min-width:0; }
  .topbar .logo > svg { display:none; }
  .topbar .logo .name { font-size:17px; }
  .topbar .app-link { flex:none; width:34px; height:34px; justify-content:center; padding:0; }
  .topbar .app-link :is(span,small) { display:none; }
  .topbar .app-link > svg { display:block; width:16px; height:16px; }
  .topbar :is(.icon-btn,.comm-bell) { flex:none; width:32px; height:34px; min-width:0; padding:6px; }
  .topbar .user-menu-wrap { flex:none; }
  .topbar .avatar { margin-inline:2px; }
  .user-menu .mobile-workspace-entry { display:flex; }
  #user-menu { width:min(290px,calc(100vw - 24px)); max-height:calc(100dvh - 80px); overflow-y:auto; overscroll-behavior:contain; }
}
@media(prefers-reduced-motion:reduce) {
  .topbar .app-link { transition:none; } .topbar .app-link:hover { transform:none; }
  .topbar .fs-entry::before, .topbar .fs-entry .fs-gem-orbit, .topbar .fs-entry .fs-gem-sat, .topbar .fs-entry .fs-gem-spark { animation:none; }
}