/* WopBlockStudio — shared liquid surface tokens v0.3.
   Single visual standard for all sections; no extra WebGL contexts for tiny UI.
   Opaque/deprecated surfaces can be removed gradually only after QA. */
:root {
  --wbs-glass-bg: rgba(16, 15, 45, .22);
  --wbs-glass-border: rgba(185, 190, 255, .36);
  --wbs-glass-highlight: rgba(212, 222, 255, .24);
  --wbs-glass-shadow: 0 12px 40px rgba(5, 5, 25, .26), inset 0 1px 0 var(--wbs-glass-highlight);
  --wbs-glass-blur: blur(16px) saturate(1.5);
}
/* News, navigation, history, tools, project cards, account areas share a consistent
   surface system. Real WebGL is enhanced for a bounded number of focus surfaces
   through liquidglass_site.js, never one shader/context per item. */
.site-page :is(.liquid,.liquid-soft,.news-card-v5,.history-entry,.history-detail-card,.news-detail-card,.category-card,.feature-tool,.home-footer,.workspace-card),
.account-page :is(.topbar,.profile-card,.home-footer),
.wbs-projects-page :is(.topbar,.projects-intro,.project-card,.projects-footer) {
  border: 1px solid var(--wbs-glass-border);
  box-shadow: var(--wbs-glass-shadow);
  -webkit-backdrop-filter: var(--wbs-glass-blur);
  backdrop-filter: var(--wbs-glass-blur);
}
.site-page :is(.news-card-v5,.history-entry,.category-card,.feature-tool,.workspace-card,.top-modules-panel-v5,.home-footer),
.wbs-projects-page :is(.project-card,.projects-footer) {
  background-color: var(--wbs-glass-bg);
}
/* Individual news cards, full tool catalog and footer must not remain visually
   opaque while selected WebGL panels are enabled. */
.site-page :is(.news-card-v5,.history-entry-v2,.category-card,.feature-tool,.workspace-card,.top-modules-panel-v5,.home-footer),
.wbs-projects-page :is(.project-card,.projects-footer) {
  border-radius: 24px;
  border-color: var(--wbs-glass-border);
  box-shadow: var(--wbs-glass-shadow);
}
.site-page .home-footer,
.account-page .home-footer {
  width: 100%;
  max-width: 1260px;
  margin: 24px auto 26px;
  padding: 16px 20px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--wbs-glass-bg);
}
.site-page .home-footer p,
.account-page .home-footer p { color: #e1dcf6; margin: 4px 0 0; }
.site-page .home-footer .footer-links,
.account-page .home-footer .footer-links {display:flex;gap:15px;flex-wrap:wrap;align-items:center}
.site-page .home-footer a,
.account-page .home-footer a { color: #f2ebff; text-decoration:none; }
.site-page .home-footer a:hover,
.account-page .home-footer a:hover {color:#a9eafa}
/* Shared element fallback remains readable and keyboard accessible. */
.site-page a:focus-visible,.site-page button:focus-visible,
.account-page a:focus-visible,.wbs-projects-page a:focus-visible,
.wbs-projects-page button:focus-visible { outline: 2px solid #75dcff; outline-offset: 3px; }
.wbs-projects-page .empty-state {
  border-color: var(--wbs-glass-border);
  background: var(--wbs-glass-bg);
  box-shadow: var(--wbs-glass-shadow);
  -webkit-backdrop-filter: var(--wbs-glass-blur);
  backdrop-filter: var(--wbs-glass-blur);
}
.wbs-projects-page .projects-footer {
  padding: 14px 18px;
  text-align:center;
  background:var(--wbs-glass-bg);
  border-radius: 16px;
}
/* Contain WebGL roots in existing layouts; preserve click targets. */
body.site-page .wbs-optics-root--header {width:min(1580px,calc(100% - 20px));margin:14px auto 0; position:sticky;top:14px;z-index:1000}
body.site-page .wbs-optics-root--header > .topbar {width:100%;margin:0;top:auto;position:relative}
body.site-page .wbs-optics-root--feature,
body.site-page .wbs-optics-root--news,
body.site-page .wbs-optics-root--modules,
body.site-page .wbs-optics-root--project,
body.wbs-projects-page .wbs-optics-root--project,
body.account-page .wbs-optics-root--project {width:100%;min-width:0}
body.account-page .wbs-optics-root--header {width:min(1260px,calc(100% - 22px));margin:16px auto 0;z-index:1000}
body.account-page .wbs-optics-root--auth {width:min(750px,100%)}
.wbs-optics-root.wbs-webgl-active > :is(.liquid,.liquid-soft,.category-card,.news-card-v5,.project-card,.projects-intro,.profile-card,.topbar,.catalog-hero,.history-hero) {
  background-color: rgba(12,13,36,.20);
  -webkit-backdrop-filter: none;
  backdrop-filter:none;
}
@media(max-width:760px) {
 body.site-page .wbs-optics-root--header {width:calc(100vw - 12px);margin-top:8px;top:8px}
 .site-page .home-footer,.account-page .home-footer {margin:20px auto;padding:18px 14px;align-items:flex-start}
}
@media (prefers-reduced-motion: reduce) {
 .site-page *, .wbs-projects-page *, .account-page * {scroll-behavior:auto}
}

/* v0.4: clip real WebGL backdrops, shader canvas and panel to exactly the same radius.
   overflow:clip does not create the scrolling ancestor that would break sticky topbars. */
.wbs-optics-root {
  border-radius: var(--wbs-panel-radius, 26px);
  overflow: clip;
  clip-path: inset(0 round var(--wbs-panel-radius, 26px));
}
.wbs-optics-root > .wbs-optics-backdrop,
.wbs-optics-root > .wbs-optics-target { border-radius: inherit; }
/* CSS layer for every surface, with bounded GPU acceleration on selected roots. */
.site-page :is(.liquid,.liquid-soft,.category-card,.news-card-v5,.workspace-card,.feature-tool) {
  border-color: rgba(199,196,255,.42);
  box-shadow: 0 14px 46px rgba(3,5,23,.27), inset 0 1px 0 rgba(246,250,255,.30), inset 0 -1px 0 rgba(120,102,255,.17);
}
.site-page :is(.news-card-v5,.category-card,.feature-tool,.workspace-card) {
  background: linear-gradient(130deg,rgba(238,238,255,.12) 0%,rgba(49,39,90,.17) 33%,rgba(9,14,35,.28) 100%);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
}
.site-page :is(.news-card-v5,.category-card,.feature-tool,.workspace-card)::before {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(120deg,rgba(255,255,255,.13),transparent 40%,rgba(171,121,255,.06));
  border-radius:inherit;
}
.site-page :is(.news-card-v5,.category-card,.feature-tool,.workspace-card) > * {position:relative;z-index:1}