.wy-shell { min-height: 100vh; overflow: clip; }

/* Sticky, full-width header with a frosted background. The home page uses the
   overlay variant: transparent above the hero, frosted once scrolled. */
.wy-site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  min-height: var(--wy-header-h);
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
  align-items: center;
  gap: var(--wy-space-4);
  padding-inline: max(24px, calc((100% - 1360px) / 2));
  border-bottom: 1px solid var(--wy-line);
  background: rgba(6, 8, 10, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  transition: background-color 260ms ease, border-color 260ms ease;
}
.wy-site-header--overlay { position: fixed; inset: 0 0 auto; border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wy-site-header--overlay::before { position: absolute; z-index: -1; inset: 0 0 -40px; content: ""; background: linear-gradient(rgba(0, 0, 0, 0.55), transparent); pointer-events: none; transition: opacity 260ms ease; }
.wy-site-header--overlay.is-scrolled { border-color: var(--wy-line); background: rgba(6, 8, 10, 0.72); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.wy-site-header--overlay.is-scrolled::before { opacity: 0; }

.wy-brand { display: inline-flex; align-items: center; width: fit-content; }
.wy-brand img { display: block; width: min(150px, 100%); height: auto; }

.wy-nav { display: flex; align-items: center; justify-content: center; gap: 2rem; }
.wy-nav__link {
  position: relative;
  padding: 0.45rem 0;
  color: var(--wy-text-muted);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 180ms ease;
}
.wy-nav__link:hover, .wy-nav__link[aria-current="page"] { color: var(--wy-text); }
.wy-nav__link::after {
  position: absolute;
  right: 50%;
  bottom: -2px;
  left: 50%;
  height: 2px;
  content: "";
  border-radius: 2px;
  background: var(--wy-cyan);
  transition: left 220ms ease, right 220ms ease;
}
.wy-nav__link:hover::after, .wy-nav__link[aria-current="page"]::after { right: 0; left: 0; }

/* Login sits alone at the far right as a solid pill. */
.wy-header-actions { justify-self: end; display: flex; align-items: center; gap: var(--wy-space-2); }
.wy-header-login {
  border: 1px solid var(--wy-text);
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  background: var(--wy-text);
  color: #0a0c0e;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.wy-header-login:hover { background: transparent; color: var(--wy-text); }
.wy-header-login:active { transform: scale(0.97); }

.wy-header-action { justify-self: end; color: var(--wy-text-muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; }
.wy-header-action:hover { color: var(--wy-cyan); }
.wy-admin-header { position: relative; }

.wy-footer { width: var(--wy-page); margin: 0 auto; padding: var(--wy-space-6) 0 var(--wy-space-4); border-top: 1px solid var(--wy-line); color: var(--wy-text-muted); font-size: 0.78rem; }
.wy-footer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--wy-space-4); margin-bottom: var(--wy-space-5); }
.wy-footer__links { display: flex; flex-wrap: wrap; gap: var(--wy-space-4); }
.wy-footer__links a:hover { color: var(--wy-text); }
.wy-footer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--wy-space-3); border-top: 1px solid var(--wy-line); padding-top: var(--wy-space-3); }
.wy-footer__brand { color: var(--wy-text); font-weight: 800; letter-spacing: 0.16em; }

@media (max-width: 760px) {
  .wy-site-header { grid-template-columns: 1fr auto; gap: var(--wy-space-2); padding-inline: 16px; }
  .wy-brand img { width: 118px; }
  .wy-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.7rem; }
  .wy-nav__link { font-size: 0.78rem; }
  .wy-header-actions { grid-column: 2; grid-row: 1; }
  .wy-header-login { padding: 0.45rem 1rem; font-size: 0.76rem; }
  .wy-header-action { font-size: 0.72rem; }
  .wy-footer__top { flex-direction: column; align-items: start; }
}

/* Corner badge on media cards (home, gallery, workshop). */
.wy-kind-badge { position: absolute; z-index: 2; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; padding: 0.28rem 0.6rem; background: rgba(6, 8, 10, 0.62); color: var(--wy-text); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.wy-kind-badge--video { background: rgba(6, 8, 10, 0.72); }

/* Segmented control (gallery and workshop toolbars). */
.wy-segment { display: inline-flex; gap: 2px; border: 1px solid var(--wy-line); border-radius: 14px; padding: 4px; background: rgba(13, 18, 21, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.wy-segment__item { display: inline-flex; align-items: center; gap: 0.4rem; border: 0; border-radius: 10px; padding: 0.5rem 0.95rem; background: transparent; color: var(--wy-text-muted); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.wy-segment__item:hover { color: var(--wy-text); }
.wy-segment__item.is-active { background: var(--wy-text); color: #0a0c0e; }

/* Signed-in header: avatar + nickname linking to the personal center. */
.wy-avatar { display: inline-grid; flex: none; width: 36px; height: 36px; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(145deg, var(--wy-cyan), var(--wy-gold)); color: #0a0c0e; font-weight: 800; }
.wy-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wy-avatar--sm { width: 30px; height: 30px; font-size: 0.8rem; }
.wy-avatar--lg { width: 84px; height: 84px; font-size: 2rem; }
.wy-header-user { display: inline-flex; align-items: center; gap: 0.55rem; border: 1px solid var(--wy-line-strong); border-radius: 999px; padding: 0.25rem 0.9rem 0.25rem 0.3rem; color: var(--wy-text); font-size: 0.82rem; font-weight: 800; transition: border-color 180ms ease, background-color 180ms ease; }
.wy-header-user:hover { border-color: var(--wy-text); background: rgba(244, 240, 232, 0.08); }
.wy-header-user > span:last-child { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Admin: fixed left sidebar --------------------------------------- */
.wy-shell:has(> .wy-admin-side) { padding-left: 232px; }
.wy-shell:has(> .wy-admin-side) > .wy-footer { display: none; }
.wy-admin-side { position: fixed; z-index: 40; inset: 0 auto 0 0; display: flex; width: 232px; flex-direction: column; gap: var(--wy-space-3); overflow-y: auto; border-right: 1px solid var(--wy-line); padding: 1.25rem 0.9rem; background: #080b0d; }
.wy-admin-side .wy-brand img { width: 136px; }
.wy-admin-side__tag { align-self: flex-start; margin-top: -0.4rem; border: 1px solid rgba(217, 181, 115, 0.45); border-radius: 999px; padding: 0.15rem 0.55rem; color: var(--wy-gold); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; }
.wy-admin-nav { display: grid; gap: 2px; }
.wy-admin-nav__group { margin: 0.9rem 0 0.35rem; padding: 0 0.7rem; color: var(--wy-text-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; opacity: 0.7; }
.wy-admin-nav__link { display: flex; align-items: center; gap: 0.65rem; border-radius: 10px; padding: 0.6rem 0.7rem; color: var(--wy-text-muted); font-size: 0.88rem; font-weight: 700; transition: background-color 160ms ease, color 160ms ease; }
.wy-admin-nav__link svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wy-admin-nav__link:hover { background: rgba(244, 240, 232, 0.06); color: var(--wy-text); }
.wy-admin-nav__link[aria-current="page"] { background: rgba(112, 227, 237, 0.12); color: var(--wy-text); box-shadow: inset 3px 0 0 var(--wy-cyan); }
.wy-admin-nav__link[aria-current="page"] svg { color: var(--wy-cyan); }
.wy-admin-badge { margin-left: auto; min-width: 20px; border-radius: 999px; padding: 0.05rem 0.4rem; background: #e5484d; color: #fff; font-size: 0.7rem; font-weight: 800; text-align: center; }
.wy-admin-badge[hidden] { display: none; }
.wy-admin-side__foot { display: grid; gap: 0.6rem; margin-top: auto; border-top: 1px solid var(--wy-line); padding-top: var(--wy-space-3); }
.wy-admin-side__foot .wy-header-action { justify-self: start; padding: 0 0.3rem; }
.wy-admin-user { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; }
.wy-admin-user b, .wy-admin-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wy-admin-user b { font-size: 0.82rem; }
.wy-admin-user small { color: var(--wy-gold); font-size: 0.68rem; }
.wy-admin-user button { border: 1px solid var(--wy-line); border-radius: 8px; padding: 0.3rem 0.5rem; background: transparent; color: var(--wy-text-muted); font-size: 0.72rem; cursor: pointer; }
.wy-admin-user button:hover { border-color: var(--wy-danger); color: var(--wy-danger); }
@media (max-width: 900px) {
  .wy-shell:has(> .wy-admin-side) { padding-left: 0; }
  .wy-admin-side { position: sticky; top: 0; inset: auto; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; overflow: visible; border-right: 0; border-bottom: 1px solid var(--wy-line); padding: 0.7rem 16px; }
  .wy-admin-side__tag, .wy-admin-nav__group, .wy-admin-user small { display: none; }
  .wy-admin-nav { display: flex; width: 100%; order: 3; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .wy-admin-nav__link { flex: none; padding: 0.45rem 0.65rem; font-size: 0.78rem; }
  .wy-admin-side__foot { display: flex; align-items: center; margin: 0 0 0 auto; border: 0; padding: 0; }
}

/* Footer WeChat helper: the QR opens in a popover */
.wy-footer__wechat { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--wy-line-strong); border-radius: 999px; padding: .55rem 1rem; background: transparent; color: var(--wy-text); font-size: .84rem; font-weight: 700; cursor: pointer; }
.wy-footer__wechat:hover { border-color: #3fbf6f; color: #57d686; }
.wy-footer__wechat svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.wy-wechat-pop { margin: auto; border: 1px solid var(--wy-line-strong); border-radius: 20px; padding: 1.1rem 1.1rem .9rem; background: #fff; color: #17130d; text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.wy-wechat-pop::backdrop { background: rgba(3, 5, 7, .6); }
.wy-wechat-pop img { display: block; width: 220px; height: auto; }
.wy-wechat-pop p { margin: .5rem 0 0; font-size: .84rem; font-weight: 700; }

/* Credits badge next to the avatar (credits.js) */
.wy-header-credits { display: inline-flex; align-items: center; gap: .35rem; margin-right: .5rem; border: 1px solid rgba(217, 181, 115, .45); border-radius: 999px; padding: .38rem .8rem; background: rgba(217, 181, 115, .08); color: var(--wy-gold); font-family: var(--wy-mono); font-size: .8rem; font-weight: 800; white-space: nowrap; transition: border-color 180ms ease, background-color 180ms ease; }
.wy-header-credits:hover { border-color: var(--wy-gold); background: rgba(217, 181, 115, .16); }
.wy-header-credits b { color: var(--wy-text); font-weight: 800; }
@media (max-width: 600px) { .wy-header-credits { margin-right: .3rem; padding: .32rem .6rem; font-size: .72rem; } }
/* Narrow desktop widths: keep the header actions clear of the centred nav. */
@media (max-width: 1180px) and (min-width: 761px) {
  .wy-nav { gap: 1.1rem; }
  .wy-header-user { padding-right: .3rem; }
  .wy-header-user > span:last-child { display: none; }
}
.wy-footer__beian { display: inline-flex; flex-wrap: wrap; gap: .4rem 1rem; }
.wy-footer__beian a:hover { color: var(--wy-text); }
@media (max-width: 760px) { .wy-footer__row { flex-wrap: wrap; } }