/* GWfan UI components — "Néon nocturne" (lot 1, 2026-10-23).
   Every class is prefixed gw2- so nothing here can collide with KVS or with
   the legacy theme in gwfan.css. Values come from gw-tokens.css only:
   no colour literals, no !important (enforced by stylelint). */

/* Type ------------------------------------------------------------------ */

.gw2-display {
  margin: 0;
  font-family: var(--gw2-font-display);
  font-size: var(--gw2-fs-xl);
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  line-height: 1.05;
  color: var(--gw2-text);
}

.gw2-display--lg { font-size: var(--gw2-fs-2xl); line-height: 1; }
.gw2-display--md { font-size: var(--gw2-fs-lg); font-weight: var(--gw2-fw-semibold); }

.gw2-gradient-text {
  background: var(--gw2-gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.gw2-meta { font-size: var(--gw2-fs-xs); color: var(--gw2-muted); }

/* Buttons --------------------------------------------------------------- */

.gw2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gw2-space-2);
  min-height: var(--gw2-tap);
  padding: 0 var(--gw2-space-4);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-sm);
  background: var(--gw2-surface);
  color: var(--gw2-text);
  font: var(--gw2-fw-semibold) var(--gw2-fs-sm) / 1.2 var(--gw2-font-ui);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--gw2-dur-fast) ease, background-color var(--gw2-dur-fast) ease, border-color var(--gw2-dur-fast) ease;
}

.gw2-btn:hover { border-color: var(--gw2-line-strong); color: var(--gw2-text); }
.gw2-btn:active { transform: scale(0.98); }
.gw2-btn:focus-visible { outline: none; box-shadow: var(--gw2-focus-ring); }
.gw2-btn[disabled], .gw2-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.gw2-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.gw2-btn--primary {
  min-height: 56px;
  border: 0;
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-gradient);
  box-shadow: var(--gw2-shadow-cta);
  color: var(--gw2-on-accent);
  font-size: var(--gw2-fs-md);
  font-weight: var(--gw2-fw-black);
}

.gw2-btn--primary:hover { color: var(--gw2-on-accent); filter: brightness(1.06); }

.gw2-btn--secondary {
  min-height: 48px;
  border-color: var(--gw2-line-strong);
  background: var(--gw2-surface-2);
  font-weight: var(--gw2-fw-black);
}

.gw2-btn--ghost { border-color: transparent; background: transparent; color: var(--gw2-text-2); }
.gw2-btn--ghost:hover { border-color: transparent; color: var(--gw2-text); }
.gw2-btn--block { display: flex; width: 100%; }

.gw2-btn__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--gw2-fs-xs);
  font-weight: var(--gw2-fw-regular);
  opacity: 0.9;
}

.gw2-btn--stack { flex-direction: column; gap: 0; }

/* Chips and badges ------------------------------------------------------ */

.gw2-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--gw2-space-4);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-pill);
  background: transparent;
  color: var(--gw2-text-2);
  font: var(--gw2-fw-semibold) 13px / 1 var(--gw2-font-ui);
  cursor: pointer;
}

.gw2-chip[aria-pressed="true"], .gw2-chip.is-active, .gw2-chip[aria-current="page"] {
  border-color: var(--gw2-text);
  background: var(--gw2-text);
  color: var(--gw2-bg);
}

.gw2-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gw2-space-1);
  height: 22px;
  padding: 0 var(--gw2-space-2);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-glass);
  color: var(--gw2-text);
  font-size: 11px;
  font-weight: var(--gw2-fw-semibold);
}

.gw2-badge--light { background: var(--gw2-text); color: var(--gw2-bg); font-weight: var(--gw2-fw-black); }
.gw2-badge--success { background: var(--gw2-success-bg); color: var(--gw2-success); font-weight: var(--gw2-fw-black); }

/* Fields ---------------------------------------------------------------- */

.gw2-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--gw2-text-2);
  font: var(--gw2-fw-semibold) 13px / 1.3 var(--gw2-font-ui);
}

.gw2-input {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-sm);
  background: var(--gw2-surface-sunken);
  color: var(--gw2-text);
  font: var(--gw2-fw-regular) 15px / 1.2 var(--gw2-font-ui);
  outline: none;
}

.gw2-input::placeholder { color: var(--gw2-faint); }
.gw2-input:focus { border-color: var(--gw2-pink); box-shadow: var(--gw2-focus-ring); }

/* Avatars --------------------------------------------------------------- */

.gw2-avatar {
  --gw2-avatar-size: 52px;
  --gw2-avatar-ring: 2px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--gw2-avatar-size);
  height: var(--gw2-avatar-size);
  padding: var(--gw2-avatar-ring);
  border-radius: 50%;
  background: var(--gw2-line);
}

.gw2-avatar--ring { background: var(--gw2-gradient); }
.gw2-avatar--lg { --gw2-avatar-size: 92px; --gw2-avatar-ring: 3px; box-shadow: var(--gw2-shadow-glow); }
.gw2-avatar--sm { --gw2-avatar-size: 36px; }

.gw2-avatar img, .gw2-avatar__initial {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: var(--gw2-avatar-ring) solid var(--gw2-bg);
  border-radius: 50%;
  object-fit: cover;
  background: var(--gw2-surface-2);
}

.gw2-avatar__initial {
  color: var(--gw2-pink-text);
  font-family: var(--gw2-font-display);
  font-weight: var(--gw2-fw-black);
  font-size: calc(var(--gw2-avatar-size) * 0.38);
}

/* Media cards ----------------------------------------------------------- */

@keyframes gw2-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.gw2-placeholder,
.gw2-media {
  background-color: var(--gw2-surface);
  background-image: linear-gradient(110deg, var(--gw2-surface) 30%, var(--gw2-surface-2) 45%, var(--gw2-line) 50%, var(--gw2-surface-2) 55%, var(--gw2-surface) 70%);
  background-size: 300% 100%;
  animation: gw2-shimmer 1.6s linear infinite;
}

.gw2-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--gw2-radius-sm);
  color: var(--gw2-text);
  text-decoration: none;
}

.gw2-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gw2-media--locked img { filter: blur(14px); transform: scale(1.2); }

.gw2-media__lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--gw2-glass);
  background: color-mix(in srgb, var(--gw2-bg) 35%, transparent);
  font-size: var(--gw2-fs-xs);
  font-weight: var(--gw2-fw-semibold);
}

.gw2-media__corner-top { position: absolute; top: var(--gw2-space-2); right: var(--gw2-space-2); }
.gw2-media__corner-bottom { position: absolute; bottom: var(--gw2-space-2); left: var(--gw2-space-2); }
.gw2-media__title { margin-top: var(--gw2-space-2); font-size: var(--gw2-fs-sm); font-weight: var(--gw2-fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sheet ------------------------------------------------------------------ */

@keyframes gw2-sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.gw2-scrim { position: fixed; inset: 0; z-index: 9000; background: var(--gw2-scrim); backdrop-filter: blur(4px); }

.gw2-sheet {
  box-sizing: border-box;
  position: relative;
  z-index: 9001;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 10px 20px 28px;
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-sheet);
  background: var(--gw2-surface);
  box-shadow: var(--gw2-shadow-sheet);
  color: var(--gw2-text);
  font-family: var(--gw2-font-ui);
  animation: gw2-sheet-up var(--gw2-dur-sheet) var(--gw2-ease-spring);
}

.gw2-sheet__handle { width: 40px; height: 5px; margin: 0 auto; border-radius: var(--gw2-radius-pill); background: var(--gw2-line-strong); }
.gw2-sheet__header { display: flex; flex-direction: column; align-items: center; gap: var(--gw2-space-2); margin-top: 18px; text-align: center; }
.gw2-sheet__body { display: flex; flex-direction: column; gap: var(--gw2-space-3); margin-top: 18px; }
.gw2-sheet__footer { display: flex; flex-direction: column; gap: var(--gw2-space-2); margin-top: var(--gw2-space-4); text-align: center; }

.gw2-sheet__panel {
  margin: 0;
  padding: var(--gw2-space-4);
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-surface-sunken);
  list-style: none;
}

@media (max-width: 599px) {
  .gw2-sheet--bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9001;
    max-width: none;
    border-bottom: 0;
    border-radius: var(--gw2-radius-sheet) var(--gw2-radius-sheet) 0 0;
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

/* Steps ----------------------------------------------------------------- */

.gw2-steps { display: grid; grid-template-columns: repeat(var(--gw2-steps, 3), minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.gw2-steps li { color: var(--gw2-faint); font-size: 11px; font-weight: var(--gw2-fw-semibold); }
.gw2-steps li::before { content: ""; display: block; height: 4px; margin-bottom: 6px; border-radius: var(--gw2-radius-pill); background: var(--gw2-line); }
.gw2-steps li.is-done { color: var(--gw2-text-2); }
.gw2-steps li.is-done::before { background: var(--gw2-pink); }
.gw2-steps li[aria-current="step"] { color: var(--gw2-text); }
.gw2-steps li[aria-current="step"]::before { background: var(--gw2-gradient); }

/* Bottom tab bar -------------------------------------------------------- */

.gw2-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 800;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--gw2-surface-2);
  background: var(--gw2-glass);
  backdrop-filter: blur(18px);
}

.gw2-tabbar a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gw2-space-1);
  color: var(--gw2-muted);
  font: var(--gw2-fw-semibold) 11px / 1 var(--gw2-font-ui);
  text-decoration: none;
}

.gw2-tabbar a[aria-current="page"] { color: var(--gw2-text); }
.gw2-tabbar a[aria-current="page"] svg { stroke: var(--gw2-pink-text); }
.gw2-tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.gw2-tabbar__count {
  position: absolute;
  top: 8px;
  left: calc(50% + 6px);
  min-width: 16px;
  height: 16px;
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-pink-strong);
  color: var(--gw2-on-accent);
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.gw2-tabbar .gw2-tabbar__plus {
  justify-self: center;
  align-self: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: var(--gw2-gradient);
  box-shadow: var(--gw2-shadow-glow);
  color: var(--gw2-on-accent);
}

.gw2-tabbar .gw2-tabbar__plus svg { width: 24px; height: 24px; stroke-width: 2.5; }

@media (max-width: 899px) {
  .gw2-has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

@media (min-width: 900px) {
  .gw2-tabbar { display: none; }
}

/* Shell: header, menus, sub-navigation, footer (lot 4) -------------------- */

.gw2-skip {
  position: absolute;
  top: -100px;
  left: var(--gw2-space-4);
  z-index: 1000;
  padding: var(--gw2-space-2) var(--gw2-space-3);
  border-radius: var(--gw2-radius-sm);
  background: var(--gw2-text);
  color: var(--gw2-bg);
}

.gw2-skip:focus { top: var(--gw2-space-2); }

.gw2-header {
  position: sticky;
  top: 0;
  z-index: 700;
  border-bottom: 1px solid var(--gw2-surface-2);
  background: var(--gw2-glass);
  backdrop-filter: blur(18px);
}

.gw2-header__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--gw2-space-2);
  max-width: 1280px;
  height: 56px;
  margin: 0 auto;
  padding: 0 var(--gw2-space-4);
}

.gw2-header__spacer { flex-grow: 1; }

.gw2-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.26em;
  flex-shrink: 0;
  margin-right: var(--gw2-space-3);
  color: var(--gw2-text);
  font-family: var(--gw2-font-display);
  font-size: 24px;
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  line-height: 1;
  text-decoration: none;
}

.gw2-brand:hover { color: var(--gw2-text); }
.gw2-brand__mark { flex-shrink: 0; width: 1.08em; height: 1.08em; }

.gw2-header__nav { display: none; gap: var(--gw2-space-1); }

.gw2-header__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 var(--gw2-space-3);
  border-radius: var(--gw2-radius-sm);
  color: var(--gw2-muted);
  font: var(--gw2-fw-semibold) var(--gw2-fs-sm) / 1 var(--gw2-font-ui);
  text-decoration: none;
}

.gw2-header__nav a:hover { color: var(--gw2-text); background: var(--gw2-surface); }
.gw2-header__nav a[aria-current="page"] { color: var(--gw2-text); }

.gw2-header__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: var(--gw2-space-3);
  bottom: 2px;
  left: var(--gw2-space-3);
  height: 2px;
  border-radius: 2px;
  background: var(--gw2-gradient);
}

.gw2-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-pink-strong);
  color: var(--gw2-on-accent);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.gw2-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--gw2-radius-sm);
  color: var(--gw2-text);
  cursor: pointer;
  list-style: none;
}

.gw2-icon-btn::-webkit-details-marker { display: none; }
.gw2-icon-btn svg, .gw2-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.gw2-search { position: relative; display: flex; align-items: center; }

.gw2-search input {
  box-sizing: border-box;
  width: 280px;
  height: 40px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-surface);
  color: var(--gw2-text);
  font: var(--gw2-fw-regular) var(--gw2-fs-sm) / 1 var(--gw2-font-ui);
  outline: none;
}

.gw2-search input::placeholder { color: var(--gw2-faint); }
.gw2-search input:focus { border-color: var(--gw2-pink); box-shadow: var(--gw2-focus-ring); }

.gw2-search button {
  position: absolute;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gw2-muted);
  cursor: pointer;
}

.gw2-search--desktop { display: none; }
.gw2-search-mobile { position: static; }
.gw2-search-mobile > summary::-webkit-details-marker { display: none; }

.gw2-search--sheet {
  position: absolute;
  flex-wrap: wrap;
  top: 56px;
  right: 0;
  left: 0;
  padding: var(--gw2-space-3) var(--gw2-space-4);
  border-bottom: 1px solid var(--gw2-surface-2);
  background: var(--gw2-bg);
}

.gw2-search--sheet input { width: 100%; }
.gw2-search--sheet button { top: calc(var(--gw2-space-3) + 4px); right: 20px; }

.gw2-token-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-surface-2);
  color: var(--gw2-text);
  font: var(--gw2-fw-semibold) 13px / 1 var(--gw2-font-ui);
  cursor: pointer;
}

.gw2-token-pill:hover { background: var(--gw2-line); }

.gw2-token-pill__coin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gw2-gradient);
  color: var(--gw2-on-accent);
  font-family: var(--gw2-font-display);
  font-size: 11px;
  font-weight: var(--gw2-fw-black);
}

.gw2-menu { position: relative; }

.gw2-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gw2-surface-2);
  cursor: pointer;
  list-style: none;
}

.gw2-menu__trigger::-webkit-details-marker { display: none; }
.gw2-menu__trigger img { width: 100%; height: 100%; object-fit: cover; }
.gw2-menu__initial { color: var(--gw2-pink-text); font-family: var(--gw2-font-display); font-weight: var(--gw2-fw-black); }

.gw2-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 800;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-surface);
  box-shadow: var(--gw2-shadow-sheet);
}

.gw2-menu__panel a {
  display: flex;
  align-items: center;
  min-height: var(--gw2-tap);
  padding: 0 var(--gw2-space-3);
  border-radius: 10px;
  color: var(--gw2-text-2);
  font: var(--gw2-fw-semibold) var(--gw2-fs-sm) / 1 var(--gw2-font-ui);
  text-decoration: none;
}

.gw2-menu__panel a:hover { background: var(--gw2-surface-2); color: var(--gw2-text); }

.gw2-header__login {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--gw2-space-2);
  color: var(--gw2-text-2);
  font: var(--gw2-fw-semibold) var(--gw2-fs-sm) / 1 var(--gw2-font-ui);
  text-decoration: none;
}

.gw2-header__signup {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--gw2-space-4);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-gradient);
  color: var(--gw2-on-accent);
  font: var(--gw2-fw-black) 13px / 1 var(--gw2-font-ui);
  text-decoration: none;
}

.gw2-header__signup:hover, .gw2-header__login:hover { color: var(--gw2-text); }

@media (min-width: 900px) {
  .gw2-header__nav { display: flex; }
  .gw2-search--desktop { display: flex; }
  .gw2-search-mobile { display: none; }
}

.gw2-subnav {
  display: flex;
  gap: var(--gw2-space-2);
  margin: 0 0 var(--gw2-space-5); /* rendered inside the page container, which already has side padding */
  padding: var(--gw2-space-3) 0 var(--gw2-space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.gw2-subnav::-webkit-scrollbar { display: none; }
.gw2-subnav .gw2-chip { flex-shrink: 0; text-decoration: none; }

.gw2-footer { margin-top: var(--gw2-space-6); border-top: 1px solid var(--gw2-surface-2); }

.gw2-footer__inner {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gw2-space-3) var(--gw2-space-5);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--gw2-space-6) var(--gw2-space-4);
}

.gw2-footer__inner p { flex-grow: 1; margin: 0; color: var(--gw2-muted); font-size: 13px; }
.gw2-footer__inner nav { display: flex; flex-wrap: wrap; gap: var(--gw2-space-2) var(--gw2-space-4); }
.gw2-footer__inner nav a { color: var(--gw2-muted); font-size: 13px; text-decoration: none; }
.gw2-footer__inner nav a:hover { color: var(--gw2-text); }

/* Bridge to the legacy theme --------------------------------------------- */
/* Existing cards get the branded placeholder while their image loads, instead
   of an empty black frame. Removed once each screen moves to gw2-media.
   `.gwfan .gw-card` matches the most specific legacy rule; this file loads
   after gwfan.css, so equal specificity is enough. */

.gw-card,
.gwfan .gw-card,
.gw-card-portrait {
  background-color: var(--gw2-surface);
  background-image: linear-gradient(110deg, var(--gw2-surface) 30%, var(--gw2-surface-2) 45%, var(--gw2-line) 50%, var(--gw2-surface-2) 55%, var(--gw2-surface) 70%);
  background-size: 300% 100%;
  animation: gw2-shimmer 1.6s linear infinite;
}

/* Locked content offer (lot 3) -------------------------------------------- */

.gw2-lock-offer {
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--gw2-space-4);
  border: 1px solid var(--gw2-line);
  border-radius: 20px;
  background: radial-gradient(120% 100% at 50% 0%, var(--gw2-pink-bg), var(--gw2-surface) 70%);
  color: var(--gw2-text);
  font-family: var(--gw2-font-ui);
}

.gw2-lock-offer--video { min-height: 320px; }

.gw2-lock-offer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px) brightness(0.6);
  transform: scale(1.2);
}

.gw2-lock-offer__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gw2-space-2);
  max-width: 420px;
  margin: 0 auto;
  padding: var(--gw2-space-6) var(--gw2-space-5);
  text-align: center;
}

.gw2-lock-offer__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gw2-glass);
  backdrop-filter: blur(10px);
}

.gw2-lock-offer__icon svg { width: 22px; height: 22px; }

.gw2-lock-offer__title {
  margin: var(--gw2-space-1) 0 0;
  font-family: var(--gw2-font-display);
  font-size: 26px;
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  line-height: 1.1;
}

.gw2-lock-offer__text { margin: 0 0 var(--gw2-space-2); color: var(--gw2-text-soft); font-size: var(--gw2-fs-sm); line-height: 1.5; }
.gw2-lock-offer__login { color: var(--gw2-pink-text); font-size: 13px; font-weight: var(--gw2-fw-semibold); }

/* Auth, error and legal pages (lot 11) ------------------------------------ */

.gw2-auth-sub { margin: -2px 0 var(--gw2-space-4); color: var(--gw2-muted); font-size: 13px; }

.gwfan .gw-direct-auth-page > h1 {
  font-family: var(--gw2-font-display);
  font-size: var(--gw2-fs-xl);
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
}

/* When the card carries its own title, the page heading stays for screen readers only. */
.gwfan .gw-direct-auth-page:has(.gw-direct-auth-card .title__modal) > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gw2-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gw2-space-3);
  max-width: 520px;
  margin: 0 auto;
  padding: var(--gw2-space-6) var(--gw2-space-4) var(--gw2-space-5);
  text-align: center;
}

.gw2-error__code {
  margin: 0;
  font-family: var(--gw2-font-display);
  font-size: 72px;
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  line-height: 1;
  background: var(--gw2-gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.gw2-error__text { margin: 0; color: var(--gw2-text-2); font-size: var(--gw2-fs-sm); }
.gw2-error__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gw2-space-2); margin-top: var(--gw2-space-2); }

.gwfan .text-block .container {
  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--gw2-space-6) var(--gw2-space-4);
  color: var(--gw2-text-soft);
  font-family: var(--gw2-font-ui);
  font-size: 15px;
  line-height: 1.7;
}

.gwfan .text-block h1 {
  margin: 0 0 var(--gw2-space-5);
  color: var(--gw2-text);
  font-family: var(--gw2-font-display);
  font-size: var(--gw2-fs-xl);
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  line-height: 1.1;
  text-align: left;
  text-transform: none;
}

.gwfan .text-block :is(h2, h3) {
  margin: var(--gw2-space-6) 0 var(--gw2-space-2);
  color: var(--gw2-text);
  font-family: var(--gw2-font-display);
  font-size: var(--gw2-fs-lg);
  font-weight: var(--gw2-fw-semibold);
  text-transform: none;
}

.gwfan .text-block :is(p, li) { color: var(--gw2-text-soft); }
.gwfan .text-block a { color: var(--gw2-pink-text); }

/* Messages (lot 9) --------------------------------------------------------- */
/* The legacy inbox/thread layout (bounded scroll, sticky composer) is kept for now.
   Its colours come from legacy --gw-* variables, some behind !important, so they are
   remapped to the new tokens inside the messaging blocks only. */

.gw-messages-page,
.gw-inbox,
.gw-thread {
  --gw-bg: var(--gw2-bg);
  --gw-card: var(--gw2-surface);
  --gw-surface: var(--gw2-surface);
  --gw-surface-raised: var(--gw2-surface-2);
  --gw-surface-hover: var(--gw2-surface-2);
  --gw-line: var(--gw2-line);
  --gw-line-hover: var(--gw2-line-strong);
  --gw-text: var(--gw2-text);
  --gw-muted: var(--gw2-muted);
  --gw-pink: var(--gw2-pink);
  --gw-pink-hover: var(--gw2-pink-text);
  --gw-pink-subtle: var(--gw2-pink-bg);
  --gw-on-accent: var(--gw2-on-accent);
  --gw-font: var(--gw2-font-ui);
  font-family: var(--gw2-font-ui);
}

.gw-inbox-header h1,
.gw-thread-header h1 {
  font-family: var(--gw2-font-display);
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
}

.gw-thread-header h1 { font-size: var(--gw2-fs-lg); }

.gw-conversation-avatar,
.gw-thread-avatar {
  border: 2px solid transparent;
  background: linear-gradient(var(--gw2-surface-2), var(--gw2-surface-2)) padding-box, var(--gw2-gradient) border-box;
  color: var(--gw2-pink-text);
  font-family: var(--gw2-font-display);
}

.gw-conversation-name { font-weight: var(--gw2-fw-semibold); }

.gw-conversation-badge,
.gw-inbox-unread {
  background: var(--gw2-gradient);
  color: var(--gw2-on-accent);
}

/* Sent bubbles and the send button take the gradient through the remapped variables. */
.gw-thread .list-messages .gw-message--sent .message-text {
  --gw-pink-subtle: var(--gw2-gradient);
  border-color: transparent;
}

.gw-composer .gw-send-button {
  --gw-pink: var(--gw2-gradient);
  --gw-pink-hover: var(--gw2-gradient);
  box-shadow: var(--gw2-shadow-cta);
}

.gw-composer textarea { font-family: var(--gw2-font-ui); }

/* Studio (lot 10) ---------------------------------------------------------- */
/* The profile editor keeps its legacy layout; its --gw-* colours are remapped to the new tokens.
   Upload and Content have their own token-based stylesheet since lot 3 (gwfan-create.css). */

.gw-editor,
.gw2-studio-editor,
.gw2-earnings {
  --gw-bg: var(--gw2-bg);
  --gw-surface: var(--gw2-surface);
  --gw-surface-hover: var(--gw2-surface-2);
  --gw-line: var(--gw2-line);
  --gw-line-hover: var(--gw2-line-strong);
  --gw-text: var(--gw2-text);
  --gw-muted: var(--gw2-muted);
  --gw-pink: var(--gw2-pink);
  --gw-pink-hover: var(--gw2-pink-text);
  --gw-pink-subtle: var(--gw2-pink-bg);
  font-family: var(--gw2-font-ui);
}

.gw-editor h2 {
  font-family: var(--gw2-font-display);
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
}

.gw-editor .gw-create-primary {
  --gw-pink: var(--gw2-gradient);
  --gw-pink-hover: var(--gw2-gradient);
  border: 0;
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-gradient);
  box-shadow: var(--gw2-shadow-cta);
  color: var(--gw2-on-accent);
}


.gw-editor input[type="file"]::file-selector-button {
  margin-right: var(--gw2-space-3);
  padding: 10px 14px;
  border: 1px solid var(--gw2-line-strong);
  border-radius: var(--gw2-radius-sm);
  background: var(--gw2-surface-2);
  color: var(--gw2-text);
  font: var(--gw2-fw-semibold) 13px / 1 var(--gw2-font-ui);
  cursor: pointer;
}

/* Studio home */

.gw2-studio-hero { display: flex; align-items: center; gap: var(--gw2-space-4); margin: var(--gw2-space-2) 0 var(--gw2-space-4); }
.gw2-studio-hero h1 { margin: 0; }
.gw2-studio-hero .gw2-meta { margin: 4px 0 0; }
.gw2-studio-hero a { color: var(--gw2-pink-text); text-decoration: none; }
.gw2-studio-post { margin-bottom: var(--gw2-space-3); }

.gw2-studio-share {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gw2-pink-text);
  font: inherit;
  cursor: pointer;
}

.gw2-studio-fans { margin-bottom: var(--gw2-space-4); }
.gw2-studio-fans h2 { margin: 0 0 var(--gw2-space-1); font-family: var(--gw2-font-display); font-size: var(--gw2-fs-lg); letter-spacing: var(--gw2-tracking-tight); }
.gw2-studio-fans .gw2-activity__meta a { color: var(--gw2-pink-text); text-decoration: none; }
.gw2-studio-fans__empty { margin: 0; padding: var(--gw2-space-4); border: 1px dashed var(--gw2-line-strong); border-radius: var(--gw2-radius-md); color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }
.gw2-activity__amount--earned { color: var(--gw2-success); }

.gw2-studio-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gw2-space-2);
  margin-bottom: var(--gw2-space-4);
}

.gw2-studio-stats a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gw2-space-3);
  border: 1px solid var(--gw2-surface-2);
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-surface);
  color: var(--gw2-text);
  text-decoration: none;
}

.gw2-studio-stats strong { font-family: var(--gw2-font-display); font-size: 22px; font-weight: var(--gw2-fw-black); }
.gw2-studio-stats span { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-studio-stats em { color: var(--gw2-muted); font-size: 11px; font-style: normal; font-weight: var(--gw2-fw-semibold); }
.gw2-studio-stats em.is-up { color: var(--gw2-success); }

.gw2-studio-editor ::placeholder { color: var(--gw2-faint); }

.gw2-studio-editor { border: 1px solid var(--gw2-surface-2); border-radius: var(--gw2-radius-md); background: var(--gw2-surface); }

.gw2-studio-editor > summary {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gw2-space-4) 48px var(--gw2-space-4) var(--gw2-space-4);
  color: var(--gw2-text);
  font-weight: var(--gw2-fw-semibold);
  cursor: pointer;
  list-style: none;
}

.gw2-studio-editor > summary::-webkit-details-marker { display: none; }
.gw2-studio-editor[open] > summary { border-bottom: 1px solid var(--gw2-surface-2); }

/* Earnings */

.gw2-earnings { display: flex; flex-direction: column; gap: var(--gw2-space-3); max-width: 720px; }
.gw2-earnings > h1 { margin: var(--gw2-space-2) 0; }
.gw2-earnings__label { margin: 0; color: var(--gw2-text-2); font-size: 13px; font-weight: var(--gw2-fw-semibold); }

.gw2-earnings__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gw2-space-2);
  padding: 18px;
  border: 1px solid var(--gw2-line);
  border-radius: 22px;
  background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--gw2-violet) 35%, transparent) 0%, var(--gw2-pink-bg) 40%, var(--gw2-surface) 75%);
}

.gw2-earnings__amount { margin: 0; color: var(--gw2-text-2); font-size: 15px; font-weight: var(--gw2-fw-semibold); }

.gw2-earnings__amount strong {
  margin-right: 6px;
  color: var(--gw2-text);
  font-family: var(--gw2-font-display);
  font-size: 46px;
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  line-height: 1;
}

.gw2-earnings__trend { margin: 0; }
.gw2-earnings__chart { display: flex; align-items: flex-end; gap: 4px; width: 100%; height: 78px; margin-top: var(--gw2-space-2); }
.gw2-earnings__bar { flex: 1 1 0; min-height: 3px; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, var(--gw2-text) 22%, transparent); }
.gw2-earnings__bar.is-empty { background: var(--gw2-surface-2); }
.gw2-earnings__bar.is-today { background: var(--gw2-gradient); }
.gw2-earnings__axis { display: flex; justify-content: space-between; width: 100%; color: var(--gw2-faint); font-size: 11px; }
.gw2-earnings__hint { margin: 0; color: var(--gw2-text-2); font-size: var(--gw2-fs-sm); }

.gw2-earnings__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gw2-space-2); margin: 0; }

.gw2-earnings__stats > div {
  padding: var(--gw2-space-3);
  border: 1px solid var(--gw2-surface-2);
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-surface);
}

.gw2-earnings__stats dt { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-earnings__stats dd { margin: 2px 0 0; font-family: var(--gw2-font-display); font-size: 22px; font-weight: var(--gw2-fw-black); }

.gw2-earnings__payout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gw2-space-3);
  padding: 14px;
  border: 1px solid var(--gw2-surface-2);
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-surface);
}

.gw2-earnings__note { margin: 2px 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-earnings__history h2 { margin: var(--gw2-space-3) 0 var(--gw2-space-2); font-family: var(--gw2-font-display); font-size: var(--gw2-fs-lg); }
.gw2-earnings__history ul { display: flex; flex-direction: column; gap: var(--gw2-space-2); margin: 0; padding: 0; list-style: none; }

.gw2-earnings__history li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gw2-space-2);
  padding: var(--gw2-space-3);
  border-radius: var(--gw2-radius-sm);
  background: var(--gw2-surface);
}

/* Fan space (lot 8) -------------------------------------------------------- */
/* Feed, Subscriptions, Collection and Activity keep their layout; colours remapped. */

.gw-purchase-history,
.gw-collection-page,
.gw-home-following,
.gw-home-media,
.gw-connected-heading {
  --gw-bg: var(--gw2-bg);
  --gw-surface: var(--gw2-surface);
  --gw-surface-hover: var(--gw2-surface-2);
  --gw-line: var(--gw2-line);
  --gw-line-hover: var(--gw2-line-strong);
  --gw-text: var(--gw2-text);
  --gw-muted: var(--gw2-muted);
  --gw-pink: var(--gw2-pink);
  --gw-pink-hover: var(--gw2-pink-text);
  --gw-pink-subtle: var(--gw2-pink-bg);
  font-family: var(--gw2-font-ui);
}

.gw-connected-heading h1,
.gw-collection-page h2,
.gw-home-following h2,
.gw-home-media h2 {
  font-family: var(--gw2-font-display);
  letter-spacing: var(--gw2-tracking-tight);
}

/* Renewal management stays available but no longer competes with "See posts". */


/* Activity (lot 13) ------------------------------------------------------ */

.gw2-activity { margin: 0 0 var(--gw2-space-4); padding: 0; list-style: none; }

.gw2-activity__item {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--gw2-space-3);
  padding: var(--gw2-space-3) 0;
  border-bottom: 1px solid var(--gw2-line);
}

.gw2-activity__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-surface-2);
  color: var(--gw2-pink-text);
  font-size: 15px;
}

.gw2-activity__item--credit .gw2-activity__icon { background: var(--gw2-success-bg); color: var(--gw2-success); }

.gw2-activity__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.gw2-activity__title { overflow: hidden; color: var(--gw2-text-soft); font-size: var(--gw2-fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.gw2-activity__title a,
.gw2-activity__title strong { color: var(--gw2-text); font-weight: var(--gw2-fw-semibold); text-decoration: none; }
.gw2-activity__title a:hover { color: var(--gw2-pink-text); }

.gw2-activity__meta { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }

.gw2-activity__amount { color: var(--gw2-text); font-size: var(--gw2-fs-sm); font-variant-numeric: tabular-nums; font-weight: var(--gw2-fw-semibold); }
.gw2-activity__item--credit .gw2-activity__amount { color: var(--gw2-success); }

/* Post card (lot 5) ------------------------------------------------------ */
/* One card for every post list: 4:5 image, access badge, length, title and date below. */

.gw2-post {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--gw2-text);
  font-family: var(--gw2-font-ui);
  text-decoration: none;
}

.gw2-post[hidden] { display: none; }
.gw2-post:focus-visible { outline: 2px solid var(--gw2-pink); outline-offset: 3px; border-radius: var(--gw2-radius-sm); }

.gw2-post__badge,
.gw2-post__fact {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 var(--gw2-space-2);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-glass);
  background: color-mix(in srgb, var(--gw2-bg) 72%, transparent);
  color: var(--gw2-text);
  font: var(--gw2-fw-semibold) 11px / 1 var(--gw2-font-ui);
  font-variant-numeric: tabular-nums;
}

.gw2-post__badge { top: var(--gw2-space-2); left: var(--gw2-space-2); }
.gw2-post__fact { right: var(--gw2-space-2); bottom: var(--gw2-space-2); }
.gw2-post__badge svg,
.gw2-post__fact svg { width: 12px; height: 12px; }
.gw2-post__badge--free { background: var(--gw2-text); color: var(--gw2-bg); }
.gw2-post__badge--ppv { background: var(--gw2-violet-strong); color: var(--gw2-on-accent); }

.gw2-post__title {
  margin-top: var(--gw2-space-2);
  overflow: hidden;
  font-size: var(--gw2-fs-sm);
  font-weight: var(--gw2-fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gw2-post__date { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-post:hover .gw2-post__title { color: var(--gw2-pink-text); }

/* Post grids: legacy grids were sized for 16:9 cards (one column on phones). The :has()
   selectors outrank those rules, so no !important is needed; removed with the legacy grid in lot 12. */

.gw-grid:has(> .gw2-post) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gw2-space-4) var(--gw2-space-3);
}

@media (min-width: 768px) {
  .gw-grid:has(> .gw2-post) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .gw-grid:has(> .gw2-post) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Discover (lot 5) -------------------------------------------------------- */

.gw2-discover {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--gw2-space-4) var(--gw2-space-4) var(--gw2-space-6);
  color: var(--gw2-text);
  font-family: var(--gw2-font-ui);
}

.gw2-discover__head { display: flex; flex-direction: column; gap: var(--gw2-space-3); margin-bottom: var(--gw2-space-5); }
.gw2-discover__head h1 { margin: 0; }
.gw2-discover__filters { display: flex; gap: var(--gw2-space-2); overflow-x: auto; scrollbar-width: none; }
.gw2-discover__filters .gw2-chip { flex-shrink: 0; }

.gw2-discover__creators { display: flex; flex-direction: column; gap: var(--gw2-space-6); }
.gw2-creator-row[hidden] { display: none; }

.gw2-creator-row__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--gw2-space-3);
  margin-bottom: var(--gw2-space-3);
}

.gw2-creator-row__id h2 {
  margin: 0;
  overflow: hidden;
  font-family: var(--gw2-font-display);
  font-size: var(--gw2-fs-lg);
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gw2-creator-row__id h2 a { color: inherit; text-decoration: none; }
.gw2-creator-row__id p { margin: 2px 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }

.gw2-creator-row__offer {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--gw2-space-4);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-gradient);
  box-shadow: var(--gw2-shadow-cta);
  color: var(--gw2-on-accent);
  font: var(--gw2-fw-semibold) 13px / 1 var(--gw2-font-ui);
  text-decoration: none;
  white-space: nowrap;
}

.gw2-creator-row__offer.is-subscribed { background: var(--gw2-surface-2); box-shadow: none; color: var(--gw2-text-2); }

.gw2-creator-row__nav { display: none; }

.gw2-rail {
  display: grid;
  grid-auto-columns: 44%;
  grid-auto-flow: column;
  gap: var(--gw2-space-3);
  margin: 0 calc(var(--gw2-space-4) * -1);
  padding: 0 var(--gw2-space-4);
  overflow-x: auto;
  scroll-padding: 0 var(--gw2-space-4);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gw2-rail::-webkit-scrollbar { display: none; }
.gw2-rail > .gw2-post { scroll-snap-align: start; }
.gw2-rail__empty { margin: 0; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }

.gw2-discover__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gw2-space-1) var(--gw2-space-3);
  margin-top: var(--gw2-space-6);
  padding: var(--gw2-space-4);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-surface);
  color: var(--gw2-text);
  text-decoration: none;
}

.gw2-discover__cta strong { font-family: var(--gw2-font-display); font-weight: var(--gw2-fw-black); }
.gw2-discover__cta span { flex-grow: 1; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }
.gw2-discover__cta span[aria-hidden] { flex-grow: 0; color: var(--gw2-pink-text); }

@media (min-width: 768px) {
  .gw2-discover { padding-top: var(--gw2-space-6); }
  .gw2-discover__head { flex-direction: row; align-items: center; justify-content: space-between; }
  .gw2-creator-row__head { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .gw2-creator-row__nav { display: flex; gap: var(--gw2-space-2); }

  .gw2-creator-row__nav button {
    width: 36px;
    height: 36px;
    border: 1px solid var(--gw2-line);
    border-radius: var(--gw2-radius-pill);
    background: transparent;
    color: var(--gw2-text);
    font-size: 18px;
    cursor: pointer;
  }

  .gw2-creator-row__nav button:disabled { opacity: 0.35; cursor: default; }
  .gw2-rail { grid-auto-columns: 210px; margin: 0; padding: 0; scroll-padding: 0; }
}

/* Creator profile (lot 6) ------------------------------------------------- */

.gw2-profile { color: var(--gw2-text); font-family: var(--gw2-font-ui); }

.gw2-profile__banner {
  position: relative;
  height: 168px;
  overflow: hidden;
  background: radial-gradient(120% 140% at 20% 0%, var(--gw2-pink-bg), var(--gw2-surface) 70%);
}

.gw2-profile__banner img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Halo: the banner melts into the page and carries a hint of the brand gradient. */
.gw2-profile__banner::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, var(--gw2-bg)), radial-gradient(80% 60% at 50% 100%, var(--gw2-pink-bg), transparent 70%);
  content: "";
}

.gw2-profile__inner { position: relative; max-width: 720px; margin: 0 auto; padding: 0 var(--gw2-space-4); }
.gw2-profile__avatar { margin-top: -46px; }
.gw2-profile__name { margin: var(--gw2-space-2) 0 0; font-family: var(--gw2-font-display); font-size: 30px; font-weight: var(--gw2-fw-black); letter-spacing: var(--gw2-tracking-tight); line-height: 1.1; }
.gw2-profile__meta { margin: 2px 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }
.gw2-profile__bio { margin: var(--gw2-space-3) 0 0; color: var(--gw2-text-soft); font-size: 15px; line-height: 1.5; }
.gw2-profile__counts { margin: var(--gw2-space-3) 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }
.gw2-profile__counts strong { color: var(--gw2-text); font-weight: var(--gw2-fw-semibold); }
.gw2-profile__counts a { color: var(--gw2-pink-text); text-decoration: none; }
.gw2-profile__offer { margin-top: var(--gw2-space-4); }
.gw2-profile__offer:empty { display: none; }

.gw2-profile__state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gw2-space-3);
  min-height: var(--gw2-tap);
  padding: var(--gw2-space-2) var(--gw2-space-4);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-surface);
  font-size: var(--gw2-fs-sm);
}

.gw2-profile__state strong { color: var(--gw2-success); }
.gw2-profile__state a { color: var(--gw2-pink-text); font-weight: var(--gw2-fw-semibold); text-decoration: none; }

.gw2-profile__actions { display: flex; gap: var(--gw2-space-2); margin-top: var(--gw2-space-3); }
.gw2-profile__actions .gw2-btn { flex: 1 1 0; min-width: 0; padding-right: var(--gw2-space-2); padding-left: var(--gw2-space-2); }
.gw2-profile .gw-share-status,
.gw2-profile .gw-form-status { margin: var(--gw2-space-2) 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-profile .gw-share-status:empty,
.gw2-profile .gw-form-status:empty { display: none; }

.gw2-tabs {
  display: flex;
  max-width: 720px;
  margin: var(--gw2-space-5) auto 0;
  padding: 0 var(--gw2-space-4);
  border-bottom: 1px solid var(--gw2-line);
}

.gw2-tabs__tab {
  flex: 1 1 0;
  min-height: var(--gw2-tap);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--gw2-muted);
  font: var(--gw2-fw-semibold) var(--gw2-fs-sm) / 1 var(--gw2-font-ui);
  cursor: pointer;
}

.gw2-tabs__tab.is-active { border-bottom-color: var(--gw2-pink); color: var(--gw2-text); }

/* Post lists of the profile (the "Posts" tab here, Videos and Albums are the KVS blocks after it). */
main:has(.gw2-profile) > .gw-feed,
.gw2-profile .gw-feed-all { box-sizing: border-box; max-width: 720px; margin: 0 auto; padding: var(--gw2-space-3) var(--gw2-space-1) var(--gw2-space-6); }

main:has(.gw2-profile) .gw-feed .gw-grid:has(> .gw2-post) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
main:has(.gw2-profile) .gw-feed .gw2-post .gw2-media { border-radius: 4px; }
main:has(.gw2-profile) .gw-feed .gw2-post__title,
main:has(.gw2-profile) .gw-feed .gw2-post__date { display: none; }
main:has(.gw2-profile) .gw-empty { padding: var(--gw2-space-6) var(--gw2-space-4); color: var(--gw2-muted); text-align: center; }
main:has(.gw2-profile) .gw-empty a { color: var(--gw2-pink-text); }

@media (min-width: 768px) {
  .gw2-profile__banner { height: 260px; }
  .gw2-profile__avatar { --gw2-avatar-size: 112px; margin-top: -56px; }
  main:has(.gw2-profile) .gw-feed .gw-grid:has(> .gw2-post) { gap: var(--gw2-space-2); }
}

/* Video and album pages (lot 7) -------------------------------------------- */
/* KVS controls keep their classes (rating-container, info-bar__button, data-action); only the layout around them is new. */

.gw2-content .gw-content-post { max-width: 760px; margin: 0 auto; }

.gw2-post-head { padding: var(--gw2-space-4) var(--gw2-space-4) 0; color: var(--gw2-text); font-family: var(--gw2-font-ui); }
.gw2-post-head__title { margin: 0; font-family: var(--gw2-font-display); font-size: 22px; font-weight: var(--gw2-fw-black); letter-spacing: var(--gw2-tracking-tight); line-height: 1.2; }
.gw2-post-head__meta { margin: 4px 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-xs); font-variant-numeric: tabular-nums; }
.gw2-post-head__caption { margin: var(--gw2-space-3) 0 0; color: var(--gw2-text-soft); font-size: 15px; line-height: 1.5; }

.gw2-post-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gw2-space-2);
  padding: var(--gw2-space-3) var(--gw2-space-4) var(--gw2-space-4);
  border-bottom: 1px solid var(--gw2-line);
  font-family: var(--gw2-font-ui);
}

.gw2-post-actions .info-bar__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gw2-space-2); }
.gw2-post-actions .info-bar__cell { margin: 0; padding: 0; border: 0; }
.gw2-post-actions .gw-media-like-control { display: flex; align-items: center; gap: var(--gw2-space-2); }

.gw2-post-actions .gw-like-trigger,
.gw2-post-actions .info-bar__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--gw2-space-4);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-surface);
  color: var(--gw2-text);
  font: var(--gw2-fw-semibold) 13px / 1 var(--gw2-font-ui);
  text-decoration: none;
  cursor: pointer;
}

.gw2-post-actions .gw-like-trigger:hover,
.gw2-post-actions .info-bar__button:hover { border-color: var(--gw2-line-strong); }
.gw2-post-actions .gw-like-trigger.voted,
.gw2-post-actions .info-bar__button.subscribed { border-color: var(--gw2-pink); color: var(--gw2-pink-text); }
.gw2-post-actions .gw-like-trigger.is-disabled { opacity: 0.5; cursor: default; }
.gw2-post-actions .gw-like-count { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-post-actions .gw-like-count [data-gw-like-label] { margin-left: 3px; }
.gw2-post-actions .gw2-post-actions__tip { border-color: transparent; background: var(--gw2-pink-bg); color: var(--gw2-pink-text); }

.gw2-post-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gw2-post-actions .gw-like-trigger.voted svg { fill: currentColor; }

.gw2-post-actions__report { flex-basis: 100%; }
.gw2-post-actions__report .gw-report-link { color: var(--gw2-faint); font-size: var(--gw2-fs-xs); text-decoration: none; }

.gw2-content .media-info { padding: 0 var(--gw2-space-4); }
/* The # on each tag already says what they are (polish 2026-10-26). */
.gw2-content .media-info__label { display: none; }
.gw2-content .media-info__buttons { display: flex; flex-wrap: wrap; gap: var(--gw2-space-2); }

.gw2-content .media-info__buttons .btn {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--gw2-space-3);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-pill);
  background: transparent;
  color: var(--gw2-text-2);
  font: var(--gw2-fw-semibold) 12px / 1 var(--gw2-font-ui);
  text-decoration: none;
}

.gw2-content .album-gallery-holder { position: relative; }

.gw2-gallery-count {
  position: absolute;
  z-index: 5;
  top: var(--gw2-space-3);
  right: var(--gw2-space-3);
  padding: 4px var(--gw2-space-2);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-glass);
  background: color-mix(in srgb, var(--gw2-bg) 70%, transparent);
  color: var(--gw2-text);
  font: var(--gw2-fw-semibold) 12px / 1.2 var(--gw2-font-ui);
  font-variant-numeric: tabular-nums;
}

/* "More from …" under the post */
.gw-content-related .gw-related-heading h2 { margin: 0 0 var(--gw2-space-3); font-family: var(--gw2-font-display); font-size: var(--gw2-fs-lg); font-weight: var(--gw2-fw-black); letter-spacing: var(--gw2-tracking-tight); }
.gw-content-related .gw-related-heading h2 a { color: var(--gw2-pink-text); text-decoration: none; }

/* Comments: brand colours; a bottom sheet on phones, the side panel on wider screens. */
.gw-comments-panel { border-color: var(--gw2-line); background: var(--gw2-surface); color: var(--gw2-text); font-family: var(--gw2-font-ui); }
.gw-comments-panel__header { border-color: var(--gw2-line); background: var(--gw2-surface); }
.gw-comments-panel__header h2 { font-family: var(--gw2-font-display); font-weight: var(--gw2-fw-black); }
.gw-comments-panel__count { border-color: var(--gw2-line); background: var(--gw2-surface-2); color: var(--gw2-text-2); }
.gw-comments-panel__close { border-color: var(--gw2-line); background: var(--gw2-surface-2); color: var(--gw2-text); }
.gw-comments-backdrop { background: var(--gw2-scrim); }

@media (max-width: 767px) {
  .gw-comments-panel {
    top: auto;
    bottom: 0;
    width: 100%;
    height: min(82vh, var(--gw-comments-vvh, 82vh));
    border-left: 0;
    border-radius: var(--gw2-radius-sheet) var(--gw2-radius-sheet) 0 0;
    box-shadow: var(--gw2-shadow-sheet);
    animation: gw2-sheet-up var(--gw2-dur-sheet) var(--gw2-ease-spring);
  }
}

/* Lists: search, categories, tags, latest (2026-10-24) -------------------- */

.thumbs:has(.gw2-list, .empty-content) .heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gw2-space-3);
  margin: var(--gw2-space-4) 0;
  padding: 0;
  border: 0;
}

.thumbs:has(.gw2-list, .empty-content) .heading .title {
  margin: 0;
  color: var(--gw2-text);
  font-family: var(--gw2-font-display);
  font-size: var(--gw2-fs-xl);
  font-weight: var(--gw2-fw-black);
  letter-spacing: var(--gw2-tracking-tight);
  text-transform: none;
}

.thumbs:has(.gw2-list, .empty-content) .heading .buttons { display: flex; flex-wrap: wrap; gap: var(--gw2-space-2); float: none; }

.thumbs:has(.gw2-list, .empty-content) .heading .btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  padding: 0 var(--gw2-space-4);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-pill);
  background: transparent;
  color: var(--gw2-text-2);
  font: var(--gw2-fw-semibold) 13px / 1 var(--gw2-font-ui);
  letter-spacing: normal;
  text-transform: none;
}

.thumbs:has(.gw2-list, .empty-content) .heading .btn:hover { border-color: var(--gw2-line-strong); color: var(--gw2-text); }
.thumbs .empty-content { padding: var(--gw2-space-6) var(--gw2-space-4); color: var(--gw2-muted); font-family: var(--gw2-font-ui); text-align: center; }

/* 18+ gate (brand lot 1) ------------------------------------------------- */

body.gw2-age-open { overflow: hidden; }

.gw2-age {
  position: fixed;
  z-index: 30000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--gw2-scrim);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.gw2-age__card {
  display: grid;
  gap: var(--gw2-space-3);
  width: 100%;
  max-width: 400px;
  padding: var(--gw2-space-6) var(--gw2-space-5) var(--gw2-space-5);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-sheet);
  background: radial-gradient(120% 80% at 50% 0%, var(--gw2-pink-bg), var(--gw2-surface) 60%);
  box-shadow: var(--gw2-shadow-sheet);
  color: var(--gw2-text);
  font-family: var(--gw2-font-ui);
  text-align: center;
}

.gw2-age__brand { justify-self: center; font-size: 28px; }
.gw2-age__title { margin: var(--gw2-space-2) 0 0; font-family: var(--gw2-font-display); font-size: var(--gw2-fs-2xl); font-weight: var(--gw2-fw-black); letter-spacing: var(--gw2-tracking-tight); }
.gw2-age__text { margin: 0 0 var(--gw2-space-2); color: var(--gw2-text-soft); font-size: 15px; line-height: 1.5; }
.gw2-age__legal { margin: var(--gw2-space-1) 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-age__legal a { color: var(--gw2-pink-text); }

/* Content pages, lot 2 (2026-10-25) --------------------------------------- */

/* Player: GWfan colours on the KVS player (its own skin file stays untouched). */
#kt_player .fp-progress { background: var(--gw2-gradient); }
#kt_player .fp-buffer { background: var(--gw2-line-strong); }
#kt_player .fp-volumelevel { background: var(--gw2-pink); }

.gw2-content .media-container { position: relative; }

.gw2-endcard {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--gw2-space-4);
  background: var(--gw2-scrim);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--gw2-text);
  font-family: var(--gw2-font-ui);
  text-align: center;
}

.gw2-endcard__inner { display: grid; justify-items: center; gap: var(--gw2-space-2); max-width: 340px; }
.gw2-endcard__kicker { margin: var(--gw2-space-1) 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-endcard__title { font-family: var(--gw2-font-display); font-size: var(--gw2-fs-lg); font-weight: var(--gw2-fw-black); letter-spacing: var(--gw2-tracking-tight); }
.gw2-endcard__sub { color: var(--gw2-text-soft); font-size: var(--gw2-fs-sm); }

/* Phones: the player is about 210 px high; the banner under the post repeats the details. */
@media (max-width: 599px) {
  .gw2-endcard { padding: var(--gw2-space-2); }
  .gw2-endcard__inner { gap: var(--gw2-space-1); }
  .gw2-endcard .gw2-avatar,
  .gw2-endcard__sub { display: none; }
  .gw2-endcard .gw2-btn { min-height: 38px; }
}

/* Album gallery */
.gw2-gallery { position: relative; background: var(--gw2-bg); }

.gw2-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}

.gw2-gallery__track::-webkit-scrollbar { display: none; }
.gw2-gallery__track:focus-visible { box-shadow: inset 0 0 0 2px var(--gw2-pink); }

.gw2-gallery__slide {
  display: grid;
  flex: 0 0 100%;
  place-items: center;
  height: min(125vw, 78vh);
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: var(--gw2-surface-sunken);
}

.gw2-gallery__slide img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }

.gw2-gallery .gw2-gallery-count { position: absolute; z-index: 2; top: var(--gw2-space-3); right: var(--gw2-space-3); }

.gw2-gallery__arrow,
.gw2-gallery__expand {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-glass);
  background: color-mix(in srgb, var(--gw2-bg) 70%, transparent);
  color: var(--gw2-text);
  cursor: pointer;
}

.gw2-gallery__arrow svg,
.gw2-gallery__expand svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gw2-gallery__arrow { top: 50%; transform: translateY(-50%); }
.gw2-gallery__arrow--prev { left: var(--gw2-space-3); }
.gw2-gallery__arrow--next { right: var(--gw2-space-3); }
.gw2-gallery__arrow:disabled { opacity: 0; pointer-events: none; }
.gw2-gallery__expand { right: var(--gw2-space-3); bottom: var(--gw2-space-3); }

@media (hover: none) {
  .gw2-gallery__arrow { display: none; }
}

/* Full-screen viewer */
body.gw2-viewer-open { overflow: hidden; }

.gw2-viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--gw2-bg);
  color: var(--gw2-text);
}

.gw2-viewer::backdrop { background: var(--gw2-bg); }

.gw2-viewer__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none;
}

.gw2-viewer__track::-webkit-scrollbar { display: none; }

.gw2-viewer__slide {
  display: grid;
  flex: 0 0 100%;
  place-items: center;
  height: 100%;
  margin: 0;
  overflow: hidden;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.gw2-viewer__slide img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.gw2-viewer__slide.is-zoomed { overflow: auto; place-items: start; }
.gw2-viewer__slide.is-zoomed img { max-width: none; max-height: none; width: 220%; cursor: zoom-out; }

.gw2-viewer__count,
.gw2-viewer__close {
  position: fixed;
  z-index: 2;
  top: max(var(--gw2-space-3), env(safe-area-inset-top, 0px));
}

.gw2-viewer__count {
  left: 50%;
  padding: 4px var(--gw2-space-3);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-glass);
  font: var(--gw2-fw-semibold) 13px / 1.4 var(--gw2-font-ui);
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}

.gw2-viewer__close {
  right: max(var(--gw2-space-3), env(safe-area-inset-right, 0px));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-glass);
  color: var(--gw2-text);
  cursor: pointer;
}

.gw2-viewer__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Subscribe banner on free posts */
.gw2-upsell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--gw2-space-3);
  margin: var(--gw2-space-4) var(--gw2-space-4) 0;
  padding: var(--gw2-space-4);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-md);
  background: radial-gradient(120% 140% at 0% 0%, var(--gw2-pink-bg), var(--gw2-surface) 65%);
  color: var(--gw2-text);
  font-family: var(--gw2-font-ui);
}

.gw2-upsell__copy { display: grid; gap: 2px; min-width: 0; }
.gw2-upsell__copy strong { font-family: var(--gw2-font-display); font-size: var(--gw2-fs-md); font-weight: var(--gw2-fw-black); }
.gw2-upsell__copy span { color: var(--gw2-text-soft); font-size: var(--gw2-fs-sm); }
.gw2-upsell .gw2-btn { grid-column: 1 / -1; }

@media (min-width: 640px) {
  .gw2-upsell { grid-template-columns: auto minmax(0, 1fr) auto; }
  .gw2-upsell .gw2-btn { grid-column: auto; }
}

/* Previous / next post */
.gw2-adjacent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gw2-space-2);
  margin: var(--gw2-space-4) var(--gw2-space-4) 0;
  font-family: var(--gw2-font-ui);
}

.gw2-adjacent__link {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--gw2-space-3);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-md);
  color: var(--gw2-text);
  text-decoration: none;
}

.gw2-adjacent__link span { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-adjacent__link strong { overflow: hidden; font-size: var(--gw2-fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.gw2-adjacent__link:hover { border-color: var(--gw2-line-strong); }
.gw2-adjacent__link--next { grid-column: 2; text-align: right; }

/* Actions: no zeros, a "…" menu */
.gw2-post-actions .gw-like-count.is-zero,
.gw2-post-actions [data-favourites="count"]:empty { display: none; }

.gw2-post-actions__more { position: relative; margin-left: auto; }
.gw2-more summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-surface);
  color: var(--gw2-text);
  cursor: pointer;
  list-style: none;
}

.gw2-more summary::-webkit-details-marker { display: none; }
.gw2-more summary svg { width: 18px; height: 18px; fill: currentColor; }

.gw2-more__menu {
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: calc(100% + var(--gw2-space-2));
  display: grid;
  min-width: 190px;
  padding: var(--gw2-space-1);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-surface-2);
  box-shadow: var(--gw2-shadow-sheet);
}

.gw2-more__menu a,
.gw2-more__menu button {
  padding: var(--gw2-space-3);
  border: 0;
  border-radius: var(--gw2-radius-sm);
  background: none;
  color: var(--gw2-text);
  font: var(--gw2-fw-semibold) var(--gw2-fs-sm) / 1.2 var(--gw2-font-ui);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.gw2-more__menu a:hover,
.gw2-more__menu button:hover { background: var(--gw2-surface); }
.gw2-post-actions__more .gw-share-status { position: absolute; right: 0; top: 100%; color: var(--gw2-muted); font-size: var(--gw2-fs-xs); white-space: nowrap; }
.gw2-post-actions__more .gw-share-status:empty { display: none; }

/* Tags as lowercase hashtags */
.gw2-content .media-info .media-info__lists .media-info__buttons a.btn { letter-spacing: normal; text-transform: none; }
.gw2-content .media-info .media-info__lists .media-info__buttons a.btn::before { content: "#"; color: var(--gw2-muted); }

/* "More from …": a swipeable rail on phones */
@media (max-width: 767px) {
  .gw-content-related .gw-grid:has(> .gw2-post) {
    grid-auto-columns: 44%;
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .gw-content-related .gw-grid > .gw2-post { scroll-snap-align: start; }
}

/* Motion preferences ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gw2-placeholder, .gw2-media, .gw2-sheet, .gw-card, .gwfan .gw-card, .gw-card-portrait { animation: none; }
  .gw2-rail { scroll-behavior: auto; }
  .gw-comments-panel { animation: none; }
  .gw2-btn { transition: none; }
}

/* Feed, lot 4 (2026-10-25) --------------------------------------------------- */
/* One column of posts, like a social feed: creator, text, media, actions. */

.gw2-feedpage { box-sizing: border-box; width: 100%; max-width: 600px; margin: 0 auto; padding: var(--gw2-space-4) 0 96px; color: var(--gw2-text); font-family: var(--gw2-font-ui); }
.gw2-feedpage *, .gw2-feedpage *::before, .gw2-feedpage *::after { box-sizing: border-box; }
.gw2-feedpage__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gw2-space-3); padding: 0 var(--gw2-space-4); }
.gw2-feedpage__head a { color: var(--gw2-muted); font-size: var(--gw2-fs-sm); font-weight: var(--gw2-fw-semibold); text-decoration: none; }
.gw2-feedpage__head a:hover { color: var(--gw2-text); }

.gw2-stories {
  display: flex;
  gap: var(--gw2-space-3);
  margin-top: var(--gw2-space-4);
  padding: 2px var(--gw2-space-4) var(--gw2-space-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--gw2-line);
  scroll-padding-inline: var(--gw2-space-4);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.gw2-stories::-webkit-scrollbar { display: none; }
.gw2-story { display: grid; flex: 0 0 68px; justify-items: center; gap: 6px; color: var(--gw2-text-2); text-decoration: none; scroll-snap-align: start; }
.gw2-story__ring { display: grid; place-items: center; width: 64px; height: 64px; padding: 2px; border: 2px solid var(--gw2-line-strong); border-radius: 50%; }
.gw2-story.is-new .gw2-story__ring { border-color: transparent; background: var(--gw2-gradient) border-box; }
.gw2-story__ring img,
.gw2-story__initial { display: grid; place-items: center; width: 100%; height: 100%; border: 2px solid var(--gw2-bg); border-radius: 50%; background: var(--gw2-surface-2); object-fit: cover; color: var(--gw2-text); font-weight: var(--gw2-fw-black); }
.gw2-story__name { max-width: 68px; overflow: hidden; font-size: 11px; font-weight: var(--gw2-fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.gw2-story.is-new .gw2-story__name { color: var(--gw2-text); }
.gw2-story.is-inactive { opacity: 0.55; }
.gw2-story--more .gw2-story__ring { border-style: dashed; color: var(--gw2-muted); }
.gw2-story--more svg { width: 22px; height: 22px; }
.gw2-story:hover .gw2-story__name { color: var(--gw2-text); }
.gw2-story:focus-visible { outline: none; }
.gw2-story:focus-visible .gw2-story__ring { box-shadow: var(--gw2-focus-ring); }

.gw2-feed { display: grid; }
.gw2-feedpost { display: grid; gap: var(--gw2-space-3); padding: var(--gw2-space-4) 0 var(--gw2-space-3); border-bottom: 1px solid var(--gw2-line); }
.gw2-feedpost__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gw2-space-3); padding: 0 var(--gw2-space-4); }
.gw2-feedpost__creator { display: flex; align-items: center; gap: var(--gw2-space-3); min-width: 0; color: var(--gw2-text); text-decoration: none; }
.gw2-feedpost__avatar { display: grid; flex: none; place-items: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: var(--gw2-gradient); color: var(--gw2-on-accent); font-weight: var(--gw2-fw-black); }
.gw2-feedpost__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gw2-feedpost__creator span:last-child { display: grid; min-width: 0; gap: 1px; }
.gw2-feedpost__creator strong { overflow: hidden; font-size: var(--gw2-fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.gw2-feedpost__creator small { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-feedpost__creator:hover strong { color: var(--gw2-pink-text); }
.gw2-feedpost__new { padding: 3px var(--gw2-space-2); border-radius: var(--gw2-radius-pill); background: var(--gw2-pink-bg); color: var(--gw2-pink-text); font-size: 11px; font-weight: var(--gw2-fw-black); }

.gw2-feedpost__text { display: grid; gap: 4px; padding: 0 var(--gw2-space-4); }
.gw2-feedpost__text h2 { margin: 0; font-size: var(--gw2-fs-md); font-weight: var(--gw2-fw-semibold); line-height: 1.3; }
.gw2-feedpost__text h2 a { color: var(--gw2-text); text-decoration: none; }
.gw2-feedpost__text h2 a:hover { color: var(--gw2-pink-text); }
.gw2-feedpost__text p { margin: 0; color: var(--gw2-text-soft); font-size: var(--gw2-fs-sm); line-height: 1.5; }

.gw2-feedpost__media { border-radius: 0; animation: none; background-image: none; }
.gw2-feedpost__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* KVS thumbnail formats (288x230 video, 288x380 album): shown uncropped until 2x formats exist. */
.gw2-feedpost__media--video { aspect-ratio: 288 / 230; }
.gw2-feedpost__media--album { aspect-ratio: 288 / 380; }
.gw2-feedpost__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gw2-bg) 55%, transparent);
  color: var(--gw2-text);
  transform: translate(-50%, -50%);
}

.gw2-feedpost__play svg { width: 30px; height: 30px; margin-left: 3px; }
.gw2-feedpost__lock {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--gw2-space-2);
  padding: 10px var(--gw2-space-4);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-gradient);
  box-shadow: var(--gw2-shadow-cta);
  color: var(--gw2-on-accent);
  font-size: var(--gw2-fs-sm);
  font-weight: var(--gw2-fw-black);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.gw2-feedpost__lock svg { width: 18px; height: 18px; }
.gw2-feedpost__media .gw2-post__fact { right: var(--gw2-space-3); bottom: var(--gw2-space-3); }

.gw2-feedpost__actions { display: flex; gap: var(--gw2-space-1); padding: 0 var(--gw2-space-2); }
.gw2-feedpost__actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--gw2-tap);
  padding: 0 var(--gw2-space-3);
  border-radius: var(--gw2-radius-pill);
  color: var(--gw2-text-2);
  font-size: var(--gw2-fs-sm);
  font-weight: var(--gw2-fw-semibold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.gw2-feedpost__actions a:hover { background: var(--gw2-surface); color: var(--gw2-text); }
.gw2-feedpost__actions a:focus-visible { outline: none; box-shadow: var(--gw2-focus-ring); }
.gw2-feedpost__actions svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.gw2-feedpost__actions .gw2-feedpost__tip { margin-left: auto; color: var(--gw2-pink-text); }

.gw2-feed__pages { display: flex; justify-content: center; gap: var(--gw2-space-3); margin-top: var(--gw2-space-5); }
.gw2-feed__empty { display: grid; justify-items: center; gap: var(--gw2-space-3); margin: var(--gw2-space-6) var(--gw2-space-4) 0; padding: var(--gw2-space-6) var(--gw2-space-4); border: 1px dashed var(--gw2-line-strong); border-radius: var(--gw2-radius-md); text-align: center; }
.gw2-feed__empty p { max-width: 380px; margin: 0; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); line-height: 1.5; }
.gw2-feed__empty small { color: var(--gw2-faint); font-size: var(--gw2-fs-xs); }

@media (min-width: 640px) {
  .gw2-feedpage { padding-top: var(--gw2-space-5); }
  .gw2-feedpost__media { border-radius: var(--gw2-radius-md); margin: 0 var(--gw2-space-4); }
}

/* Search layer, lot 4: creators and tags under the header search field. */
.gw2-suggest {
  position: absolute;
  z-index: 60;
  top: calc(100% + var(--gw2-space-2));
  right: 0;
  left: 0;
  display: grid;
  gap: var(--gw2-space-2);
  min-width: 300px;
  max-height: min(70vh, 520px);
  padding: var(--gw2-space-3);
  overflow-y: auto;
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-md);
  background: var(--gw2-surface-2);
  box-shadow: var(--gw2-shadow-sheet);
  font-family: var(--gw2-font-ui);
  text-align: left;
}

.gw2-suggest[hidden] { display: none; }
.gw2-suggest__label { margin: var(--gw2-space-1) 0 0; color: var(--gw2-faint); font-size: 11px; font-weight: var(--gw2-fw-black); letter-spacing: 0.08em; text-transform: uppercase; }
.gw2-suggest__creators { display: grid; }
.gw2-suggest__creator { display: flex; align-items: center; gap: var(--gw2-space-3); padding: 6px var(--gw2-space-2); border-radius: var(--gw2-radius-sm); color: var(--gw2-text); text-decoration: none; }
.gw2-suggest__creator:hover,
.gw2-suggest__creator:focus-visible { outline: none; background: var(--gw2-surface); }
.gw2-suggest__avatar { display: grid; flex: none; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; background: var(--gw2-gradient); color: var(--gw2-on-accent); font-weight: var(--gw2-fw-black); }
.gw2-suggest__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gw2-suggest__creator span:last-child { display: grid; gap: 1px; }
.gw2-suggest__creator strong { font-size: var(--gw2-fs-sm); }
.gw2-suggest__creator small { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-suggest__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gw2-suggest__tags .gw2-chip { min-height: 32px; padding: 0 12px; text-decoration: none; }
.gw2-suggest__tags .gw2-chip:focus-visible { outline: none; box-shadow: var(--gw2-focus-ring); }
.gw2-suggest__empty { margin: 0; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }
.gw2-suggest__all { margin-top: var(--gw2-space-1); padding: var(--gw2-space-2); border-top: 1px solid var(--gw2-line); color: var(--gw2-pink-text); font-size: var(--gw2-fs-sm); font-weight: var(--gw2-fw-semibold); text-decoration: none; }
.gw2-suggest__all:hover,
.gw2-suggest__all:focus-visible { outline: none; color: var(--gw2-text); }
.gw2-search--sheet .gw2-suggest { position: static; flex-basis: 100%; min-width: 0; margin-top: var(--gw2-space-2); box-shadow: none; }

/* Me screens, lot 5 (2026-10-25): Subscriptions, Collection, Account ------------- */

.gw2-me { box-sizing: border-box; width: 100%; max-width: 640px; margin: 0 auto; color: var(--gw2-text); font-family: var(--gw2-font-ui); }
.gw2-me *, .gw2-me *::before, .gw2-me *::after { box-sizing: border-box; }
.gw2-me__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px var(--gw2-space-3); margin: var(--gw2-space-4) 0 var(--gw2-space-4); }
.gw2-me__head h1 { margin: 0; }
.gw2-me__head p { grid-column: 1; margin: 0; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }
.gw2-me__head a { grid-column: 2; grid-row: 1; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); font-weight: var(--gw2-fw-semibold); text-decoration: none; }
.gw2-me__head a:hover { color: var(--gw2-text); }
.gw2-me__count { color: var(--gw2-faint); font-size: 0.6em; font-variant-numeric: tabular-nums; vertical-align: 0.2em; }
.gw2-me__flash { margin: 0 0 var(--gw2-space-4); padding: var(--gw2-space-3); border-radius: var(--gw2-radius-sm); background: var(--gw2-success-bg); color: var(--gw2-success); font-size: var(--gw2-fs-sm); }
.gw2-me__flash--error { background: var(--gw2-pink-bg); color: var(--gw2-pink-text); }
.gw2-me__foot { margin: var(--gw2-space-4) 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }
.gw2-me__foot a { color: var(--gw2-pink-text); }
.gw2-me__empty { display: grid; justify-items: center; gap: var(--gw2-space-3); padding: var(--gw2-space-6) var(--gw2-space-4); border: 1px dashed var(--gw2-line-strong); border-radius: var(--gw2-radius-md); text-align: center; }
.gw2-me__empty h2 { margin: 0; }
/* Beats the legacy .gw-account-page h2 rule (gwfan.css) without !important. */
.gw2-me h2.gw2-display--md { font-size: var(--gw2-fs-lg); font-weight: var(--gw2-fw-black); line-height: 1.1; }
.gw2-me__empty p { max-width: 380px; margin: 0; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); line-height: 1.5; }
.gw2-me__tabs { display: flex; gap: var(--gw2-space-2); margin: 0 0 var(--gw2-space-4); }
.gw2-me__tabs .gw2-chip { text-decoration: none; }

.gw2-subs { display: grid; gap: var(--gw2-space-3); margin: 0; padding: 0; list-style: none; }
.gw2-sub { display: grid; gap: var(--gw2-space-3); padding: var(--gw2-space-4); border: 1px solid var(--gw2-line); border-radius: var(--gw2-radius-md); background: var(--gw2-surface); }
.gw2-sub--expired { background: transparent; }
.gw2-sub__top { display: flex; align-items: center; justify-content: space-between; gap: var(--gw2-space-3); }
.gw2-sub__creator { display: flex; align-items: center; gap: var(--gw2-space-3); min-width: 0; color: var(--gw2-text); text-decoration: none; }
.gw2-sub__creator span:last-child { display: grid; min-width: 0; gap: 1px; }
.gw2-sub__creator strong { overflow: hidden; font-family: var(--gw2-font-display); font-size: var(--gw2-fs-md); font-weight: var(--gw2-fw-black); text-overflow: ellipsis; white-space: nowrap; }
.gw2-sub__creator small { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
a.gw2-sub__creator:hover strong { color: var(--gw2-pink-text); }
.gw2-sub__avatar { display: grid; flex: none; place-items: center; width: 52px; height: 52px; overflow: hidden; border: 2px solid var(--gw2-pink); border-radius: 50%; background: var(--gw2-surface-2); font-weight: var(--gw2-fw-black); }
.gw2-sub--cancelled .gw2-sub__avatar,
.gw2-sub--expired .gw2-sub__avatar { border-color: var(--gw2-line-strong); }
.gw2-sub__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gw2-sub__status { flex: none; padding: 4px var(--gw2-space-2); border-radius: var(--gw2-radius-pill); background: var(--gw2-success-bg); color: var(--gw2-success); font-size: 11px; font-weight: var(--gw2-fw-black); }
.gw2-sub--cancelled .gw2-sub__status { background: var(--gw2-surface-2); color: var(--gw2-text-2); }
.gw2-sub--expired .gw2-sub__status { background: var(--gw2-surface-2); color: var(--gw2-muted); }
.gw2-sub__detail { margin: 0; color: var(--gw2-text-2); font-size: var(--gw2-fs-sm); line-height: 1.5; }
.gw2-sub__actions { display: flex; flex-wrap: wrap; gap: var(--gw2-space-2); }
.gw2-sub__actions form { margin: 0; }
.gw2-sub__actions .gw2-btn--secondary { min-height: 44px; }
.gw2-sub__actions .gw2-btn--ghost { min-height: 44px; color: var(--gw2-muted); }
.gw2-sub__actions .gw2-sub__renew { min-height: 44px; font-size: var(--gw2-fs-sm); }

.gw2-me__profile { display: flex; align-items: center; gap: var(--gw2-space-3); padding: var(--gw2-space-4); border: 1px solid var(--gw2-line); border-radius: var(--gw2-radius-md); background: var(--gw2-surface); color: var(--gw2-text); text-decoration: none; }
.gw2-me__profile:hover { border-color: var(--gw2-line-strong); }
.gw2-me__profile span:nth-child(2) { display: grid; flex: 1; min-width: 0; gap: 2px; }
.gw2-me__profile strong { font-family: var(--gw2-font-display); font-size: var(--gw2-fs-lg); font-weight: var(--gw2-fw-black); }
.gw2-me__profile small { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-me__avatar { display: grid; flex: none; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 50%; background: var(--gw2-gradient); color: var(--gw2-on-accent); font-size: 24px; font-weight: var(--gw2-fw-black); }
.gw2-me__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gw2-me__edit { color: var(--gw2-pink-text); font-size: var(--gw2-fs-sm); font-weight: var(--gw2-fw-semibold); }
.gw2-me h2.gw2-me__section { margin: var(--gw2-space-5) 0 var(--gw2-space-2); color: var(--gw2-faint); font-size: 11px; font-weight: var(--gw2-fw-black); letter-spacing: 0.08em; text-transform: uppercase; }

.gw2-settings { margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--gw2-line); border-radius: var(--gw2-radius-md); background: var(--gw2-surface); list-style: none; }
.gw2-settings li + li { border-top: 1px solid var(--gw2-line); }
.gw2-settings a,
.gw2-settings button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gw2-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--gw2-space-3) var(--gw2-space-4);
  border: 0;
  background: none;
  color: var(--gw2-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.gw2-settings a::after,
.gw2-settings button::after { width: 8px; height: 8px; flex: none; border-top: 2px solid var(--gw2-faint); border-right: 2px solid var(--gw2-faint); content: ""; transform: rotate(45deg); }
.gw2-settings a:hover,
.gw2-settings button:hover { background: var(--gw2-surface-2); }
.gw2-settings a:focus-visible,
.gw2-settings button:focus-visible { outline: none; box-shadow: inset var(--gw2-focus-ring); }
.gw2-settings span { display: grid; gap: 2px; }
.gw2-settings strong { font-size: var(--gw2-fs-sm); font-weight: var(--gw2-fw-semibold); }
.gw2-settings small { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-settings small span { display: inline; }
.gw2-me__logout { margin-top: var(--gw2-space-5); color: var(--gw2-muted); }

/* Inbox previews, lot 5 */
.gw-inbox-cost { color: var(--gw2-faint); }
.gw-conversation-copy { min-width: 0; }
.gw-conversation-preview { display: block; overflow: hidden; color: var(--gw2-muted); text-overflow: ellipsis; white-space: nowrap; }
.is-unread .gw-conversation-preview { color: var(--gw2-text); font-weight: var(--gw2-fw-semibold); }
.gw-conversation-date { flex: none; margin-left: auto; color: var(--gw2-faint); font-size: var(--gw2-fs-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Polish (2026-10-26) ----------------------------------------------------------- */

/* Round icon button (creator bar). */
.gw2-icon-btn--round { flex: none; padding: 0; border: 1px solid var(--gw2-line); border-radius: 50%; background: var(--gw2-surface); color: var(--gw2-text-2); }
.gw2-icon-btn--round:hover { border-color: var(--gw2-line-strong); color: var(--gw2-text); }
.gw2-icon-btn--round:focus-visible { outline: none; box-shadow: var(--gw2-focus-ring); }
.gw2-icon-btn--round svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Creator bar on video and album pages, aligned with the 760 px post column. */
.gw2-creatorbar { border-bottom: 1px solid var(--gw2-line); background: var(--gw2-bg); font-family: var(--gw2-font-ui); }
.gw2-creatorbar__inner { display: flex; align-items: center; gap: var(--gw2-space-3); box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: var(--gw2-space-3) var(--gw2-space-4); }
.gw2-creatorbar__who { display: flex; flex: 1; align-items: center; gap: var(--gw2-space-3); min-width: 0; color: var(--gw2-text); text-decoration: none; }
.gw2-creatorbar__avatar { display: grid; flex: none; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 2px solid var(--gw2-pink); border-radius: 50%; background: var(--gw2-surface-2); font-weight: var(--gw2-fw-black); }
.gw2-creatorbar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gw2-creatorbar__name { display: grid; min-width: 0; gap: 1px; }
.gw2-creatorbar__name strong { overflow: hidden; font-family: var(--gw2-font-display); font-size: var(--gw2-fs-md); font-weight: var(--gw2-fw-black); text-overflow: ellipsis; white-space: nowrap; }
.gw2-creatorbar__name small { overflow: hidden; color: var(--gw2-muted); font-size: var(--gw2-fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.gw2-creatorbar__who:hover strong { color: var(--gw2-pink-text); }
.gw2-creatorbar__actions { display: flex; flex: none; align-items: center; gap: 6px; }
.gw2-creatorbar__actions .gw2-icon-btn--round { width: 40px; height: 40px; }
.gw2-creatorbar__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-left: 2px;
  padding: 0 var(--gw2-space-4);
  border: 0;
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-gradient);
  box-shadow: var(--gw2-shadow-cta);
  color: var(--gw2-on-accent);
  font: var(--gw2-fw-black) var(--gw2-fs-sm) / 1 var(--gw2-font-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.gw2-creatorbar__cta:hover { color: var(--gw2-on-accent); filter: brightness(1.06); }
.gw2-creatorbar__cta:focus-visible { outline: none; box-shadow: var(--gw2-focus-ring); }
.gw2-creatorbar__cta--quiet { border: 1px solid var(--gw2-line-strong); background: var(--gw2-surface-2); box-shadow: none; color: var(--gw2-text); }
.gw2-creatorbar__cta--quiet:hover { color: var(--gw2-text); }
.gw2-creatorbar__cta.is-disabled { color: var(--gw2-muted); cursor: default; }
.gw2-creatorbar__status { box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: 0 var(--gw2-space-4) var(--gw2-space-2); color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-creatorbar__status:empty { display: none; }

@media (max-width: 599px) {
  .gw2-creatorbar__price,
  .gw2-creatorbar__member { display: none; }
  .gw2-creatorbar__actions .gw2-icon-btn--round { width: 36px; height: 36px; }
}

/* Post page: media edge to edge on phones, actions on one row. */
@media (max-width: 599px) {
  .gw2-content .gw2-lock-offer { margin-bottom: 0; border-right: 0; border-left: 0; border-radius: 0; }
  .gw2-post-actions { flex-wrap: nowrap; }
  .gw2-post-actions .info-bar__buttons { flex-wrap: nowrap; }
  .gw2-post-actions a[data-gw-comments-open] { justify-content: center; min-width: 44px; padding: 0; }
  .gw2-post-actions a[data-gw-comments-open] > svg + span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gw2-post-actions__more { margin-left: auto; }
}

/* Locked album: four blurred photos instead of the old slider strip. */
.gw2-teaser { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gw2-space-2); margin: 0; padding: var(--gw2-space-3) var(--gw2-space-4); list-style: none; }
.gw2-teaser li { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--gw2-radius-sm); background: var(--gw2-surface-2); }
.gw2-teaser img { display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(12px); transform: scale(1.2); }
.gw2-teaser span { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--gw2-bg) 45%, transparent); color: var(--gw2-text); font-family: var(--gw2-font-display); font-size: var(--gw2-fs-lg); font-weight: var(--gw2-fw-black); }

/* KVS pagination in the gw2 look (markup from include_pagination_block_common.tpl). */
.pagination .pagination-holder ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gw2-space-2); margin: var(--gw2-space-6) 0 0; padding: 0; list-style: none; }
.pagination .pagination-holder li { margin: 0; }
.pagination .pagination-holder li a {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--gw2-space-3);
  border: 1px solid var(--gw2-line);
  border-radius: var(--gw2-radius-pill);
  background: var(--gw2-surface);
  color: var(--gw2-text-2);
  font: var(--gw2-fw-semibold) var(--gw2-fs-sm) / 1 var(--gw2-font-ui);
  text-decoration: none;
}

.pagination .pagination-holder li a:hover { border-color: var(--gw2-line-strong); color: var(--gw2-text); }
.pagination .pagination-holder li.active a { border-color: var(--gw2-text); background: var(--gw2-text); color: var(--gw2-bg); }
.pagination .pagination-holder li:not(.active) a.disabled { opacity: 0.4; }

/* Discover: one line for visitors on what GWfan is. */
.gw2-discover__pitch { max-width: 520px; margin: var(--gw2-space-1) 0 0; color: var(--gw2-text-2); font-size: var(--gw2-fs-sm); line-height: 1.5; }

/* Tap targets: header log-in link and footer links. */
.gw2-footer nav a { display: inline-flex; align-items: center; min-height: 40px; }

/* Search: matching creators above the posts. */
.gw2-search-creators { box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: var(--gw2-space-4) var(--gw2-space-4) 0; font-family: var(--gw2-font-ui); }
.gw2-search-creators h2 { margin: 0 0 var(--gw2-space-3); color: var(--gw2-faint); font-size: 11px; font-weight: var(--gw2-fw-black); letter-spacing: 0.08em; text-transform: uppercase; }
.gw2-search-creators ul { display: flex; gap: var(--gw2-space-3); margin: 0; padding: 0 0 var(--gw2-space-2); overflow-x: auto; list-style: none; scrollbar-width: none; }
.gw2-search-creators ul::-webkit-scrollbar { display: none; }
.gw2-search-creators a { display: flex; align-items: center; gap: var(--gw2-space-3); min-height: 56px; padding: 6px var(--gw2-space-4) 6px 6px; border: 1px solid var(--gw2-line); border-radius: var(--gw2-radius-pill); background: var(--gw2-surface); color: var(--gw2-text); text-decoration: none; white-space: nowrap; }
.gw2-search-creators a:hover { border-color: var(--gw2-pink); }
.gw2-search-creators img,
.gw2-search-creators b { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gw2-gradient); color: var(--gw2-on-accent); object-fit: cover; }
.gw2-search-creators strong { display: block; font-size: var(--gw2-fs-sm); }
.gw2-search-creators small { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }

/* Browse (the /categories/ page shows tags while no category exists). */
.gw2-browse { box-sizing: border-box; max-width: 900px; margin: 0 auto; padding: var(--gw2-space-5) var(--gw2-space-4) var(--gw2-space-6); color: var(--gw2-text); font-family: var(--gw2-font-ui); }
.gw2-browse h1 { margin: 0; }
.gw2-browse > p { margin: var(--gw2-space-2) 0 var(--gw2-space-5); color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }
.gw2-browse__tags { display: flex; flex-wrap: wrap; gap: var(--gw2-space-2); margin: 0; padding: 0; list-style: none; }
.gw2-browse__tags a { min-height: 44px; text-decoration: none; }
.gw2-browse__tags small { margin-left: 6px; color: var(--gw2-faint); font-variant-numeric: tabular-nums; }

/* Become a creator: pitch, steps and the form. */
.gw2-become { display: grid; gap: var(--gw2-space-6); box-sizing: border-box; max-width: 1040px; margin: 0 auto; padding: var(--gw2-space-5) var(--gw2-space-4) var(--gw2-space-6); color: var(--gw2-text); font-family: var(--gw2-font-ui); }
.gw2-become__kicker { margin: 0 0 var(--gw2-space-2); color: var(--gw2-pink-text); font-size: 11px; font-weight: var(--gw2-fw-black); letter-spacing: 0.1em; text-transform: uppercase; }
.gw2-become__pitch h1 { margin: 0; }
.gw2-become__lead { max-width: 460px; margin: var(--gw2-space-3) 0 0; color: var(--gw2-text-2); font-size: var(--gw2-fs-md); line-height: 1.5; }
.gw2-become__perks { display: grid; gap: var(--gw2-space-3); margin: var(--gw2-space-5) 0 0; padding: 0; list-style: none; }
.gw2-become__perks li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: var(--gw2-space-3); }
.gw2-become__perks i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gw2-pink-bg); color: var(--gw2-pink-text); font-style: normal; }
.gw2-become__perks svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gw2-become__perks strong { display: block; font-size: var(--gw2-fs-sm); }
.gw2-become__perks span { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); line-height: 1.45; }
.gw2-become__steps { display: flex; flex-wrap: wrap; gap: var(--gw2-space-2) var(--gw2-space-4); margin: var(--gw2-space-5) 0 0; padding: 0; color: var(--gw2-text-2); font-size: var(--gw2-fs-xs); font-weight: var(--gw2-fw-semibold); list-style: none; counter-reset: gw2-step; }
.gw2-become__steps li { display: inline-flex; align-items: center; gap: 6px; counter-increment: gw2-step; }
.gw2-become__steps li::before { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gw2-surface-2); color: var(--gw2-text); content: counter(gw2-step); font-size: 11px; font-weight: var(--gw2-fw-black); }
.gw2-become__card { padding: var(--gw2-space-5); border: 1px solid var(--gw2-line); border-radius: var(--gw2-radius-md); background: var(--gw2-surface); }
.gw2-become__card h2 { margin: 0 0 var(--gw2-space-2); font-family: var(--gw2-font-display); font-size: var(--gw2-fs-lg); font-weight: var(--gw2-fw-black); }
.gw2-become__url { margin: 0 0 var(--gw2-space-4); color: var(--gw2-muted); font-size: var(--gw2-fs-xs); overflow-wrap: anywhere; }
.gw2-become__url strong { color: var(--gw2-text-2); }
.gw2-become__errors { margin: 0 0 var(--gw2-space-4); padding: var(--gw2-space-3) var(--gw2-space-4); border-radius: var(--gw2-radius-sm); background: var(--gw2-pink-bg); color: var(--gw2-pink-text); font-size: var(--gw2-fs-sm); list-style: none; }
.gw2-become__form { display: grid; gap: var(--gw2-space-4); }
.gw2-become__form .gw2-field textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.gw2-become__form .gw2-input { font-size: 16px; }
.gw2-become__check { display: flex; align-items: flex-start; gap: var(--gw2-space-2); color: var(--gw2-text-2); font-size: var(--gw2-fs-sm); line-height: 1.45; }
.gw2-become__check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--gw2-pink); }
.gw2-become__note { margin: var(--gw2-space-3) 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-xs); line-height: 1.5; }
.gw2-become__note a { color: var(--gw2-pink-text); }
.gw2-become__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 900px) {
  .gw2-become { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: start; padding-top: var(--gw2-space-6); }
  .gw2-become__pitch { position: sticky; top: 96px; }
}

/* Field labels shared by the composer, become-creator and other forms. */
.gw2-field__label { display: flex; align-items: baseline; gap: var(--gw2-space-2); color: var(--gw2-text-2); font-size: 13px; font-weight: var(--gw2-fw-semibold); }
.gw2-optional { color: var(--gw2-faint); font-size: var(--gw2-fs-xs); font-weight: var(--gw2-fw-regular); }

/* Search: result tabs as chips under the creators. */
.gw2-search-tabs { max-width: 1240px; margin: var(--gw2-space-4) auto 0; padding: 0 var(--gw2-space-4); }
.gw2-search-tabs .gw2-chip { text-decoration: none; }

/* Polish 3 (2026-10-26) ---------------------------------------------------------- */

/* Visually hidden but still focusable (file inputs behind a styled label). */
.gw2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* List pages (latest, search, tags): same 16 px gutter as the rest of the site. */
.thumbs:has(.gw2-list, .empty-content) > .container { padding-right: var(--gw2-space-4); padding-left: var(--gw2-space-4); }

/* Inbox: flat page title and a grouped list, like the other Me screens. */
.gw-inbox { border: 0; background: none; box-shadow: none; }
.gw-inbox .gw-inbox-header { padding: var(--gw2-space-4) 0; border: 0; background: none; }
.gw-inbox .gw-conversation-list { overflow: hidden; border: 1px solid var(--gw2-line); border-radius: var(--gw2-radius-md); background: var(--gw2-surface); }
.gw-inbox .gw-conversation-preview { font-size: 13px; }

/* Conversation on phones: the whole screen, no frame, no footer. */
@media (max-width: 767px) {
  .gw-messages-page:has(.gw-thread) { margin: 0; padding: 0; }
  .gw-messages-page .gw-thread { height: calc(100dvh - 57px); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  body:has(.gw-thread) .gw2-footer { display: none; }
}

/* Studio: the folded editor reads as a row you can open. */
.gw2-studio-editor > summary::after { position: absolute; top: 50%; right: var(--gw2-space-4); width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--gw2-faint); border-bottom: 2px solid var(--gw2-faint); content: ""; transform: rotate(45deg); transition: transform var(--gw2-dur-fast) ease; }
.gw2-studio-editor[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }

/* Public profile editor. */
.gw2-editor { display: grid; gap: var(--gw2-space-4); padding: var(--gw2-space-4); font-family: var(--gw2-font-ui); }
.gw2-editor form { display: grid; gap: var(--gw2-space-4); }
.gw2-editor__note { margin: 0; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }
.gw2-editor__note a { color: var(--gw2-pink-text); }
.gw2-editor__images { display: grid; gap: var(--gw2-space-5); }
.gw2-editor__image { display: grid; justify-items: start; gap: var(--gw2-space-2); }
.gw2-editor__frame { position: relative; overflow: hidden; border: 1px solid var(--gw2-line); border-radius: var(--gw2-radius-md); background: var(--gw2-surface-sunken); }
.gw2-editor__frame--photo { width: 160px; aspect-ratio: 1; }
.gw2-editor__frame--banner { width: 100%; aspect-ratio: 3 / 1; }
.gw2-editor__frame img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; object-fit: cover; }
.gw2-editor__empty { position: absolute; inset: 0; display: none; place-items: center; color: var(--gw2-faint); font-size: var(--gw2-fs-xs); }
.gw2-editor__frame img[hidden] + .gw2-editor__empty { display: grid; }
.gw2-editor__buttons { display: flex; flex-wrap: wrap; gap: var(--gw2-space-2); }
.gw2-editor__buttons .gw2-btn { min-height: 40px; cursor: pointer; }
.gw2-editor .gw2-sr:focus-visible + .gw2-editor__buttons label { box-shadow: var(--gw2-focus-ring); }
.gw2-editor .gw2-input { font-size: 16px; }
.gw2-editor .gw2-input--area { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.gw2-editor__details { display: grid; gap: var(--gw2-space-3); }
.gw2-editor__status { margin: 0; color: var(--gw2-text-2); font-size: var(--gw2-fs-sm); }
.gw2-editor__status:empty { display: none; }

@media (min-width: 600px) {
  .gw2-editor__details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Polish 4 (2026-10-26) ---------------------------------------------------------- */

/* Hints under fields, shared by every form. */
.gw2-hint { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); line-height: 1.45; }

/* Studio home: latest posts. */
.gw2-studio-posts { margin-bottom: var(--gw2-space-5); font-family: var(--gw2-font-ui); }
.gw2-studio-posts__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--gw2-space-3); margin-bottom: var(--gw2-space-3); }
.gw2-studio-posts__head h2 { margin: 0; font-family: var(--gw2-font-display); font-size: var(--gw2-fs-lg); letter-spacing: var(--gw2-tracking-tight); }
.gw2-studio-posts__head a { color: var(--gw2-pink-text); font-size: var(--gw2-fs-sm); font-weight: var(--gw2-fw-semibold); text-decoration: none; }
.gw2-studio-posts ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gw2-space-3); margin: 0; padding: 0; list-style: none; }
.gw2-studio-posts li a { display: grid; gap: 2px; color: var(--gw2-text); text-decoration: none; }
.gw2-studio-posts__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: var(--gw2-space-1); border-radius: var(--gw2-radius-sm); background: var(--gw2-surface-2); }
.gw2-studio-posts__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gw2-studio-posts__state { position: absolute; top: var(--gw2-space-2); left: var(--gw2-space-2); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 var(--gw2-space-2); border-radius: var(--gw2-radius-pill); background: color-mix(in srgb, var(--gw2-bg) 72%, transparent); font-size: 11px; font-weight: var(--gw2-fw-semibold); }
.gw2-studio-posts__state::before { width: 6px; height: 6px; border-radius: 50%; background: var(--gw2-muted); content: ""; }
.gw2-studio-posts__state--live::before { background: var(--gw2-success); }
.gw2-studio-posts__state--review::before,
.gw2-studio-posts__state--scheduled::before { background: var(--gw2-violet); }
.gw2-studio-posts__state--attention { background: var(--gw2-pink-strong); color: var(--gw2-on-accent); }
.gw2-studio-posts strong { overflow: hidden; font-size: var(--gw2-fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.gw2-studio-posts small { color: var(--gw2-muted); font-size: var(--gw2-fs-xs); }
.gw2-studio-posts li a:hover strong { color: var(--gw2-pink-text); }

@media (min-width: 768px) {
  .gw2-studio-posts ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Polish 5 (2026-10-26): tag pages. */
.gw2-taghead { box-sizing: border-box; max-width: 1240px; margin: 0 auto; padding: var(--gw2-space-4) var(--gw2-space-4) 0; color: var(--gw2-text); font-family: var(--gw2-font-ui); }
.gw2-taghead h1 { margin: 2px 0 0; }
.gw2-taghead p { margin: var(--gw2-space-1) 0 0; color: var(--gw2-muted); font-size: var(--gw2-fs-sm); }
.gw2-taghead__back { color: var(--gw2-muted); font-size: var(--gw2-fs-sm); font-weight: var(--gw2-fw-semibold); text-decoration: none; }
.gw2-taghead__back::before { content: "← "; }
.gw2-taghead__back:hover { color: var(--gw2-text); }
/* Videos then albums: one continuous grid, not two separated by the tab-bar space. */
.gw-feed:has(+ .gw-feed) { padding-bottom: 0; }
.gw-feed + .gw-feed { padding-top: var(--gw2-space-4); }

/* Polish 6 (2026-10-26) */
/* Me screens and messages: the same 16 px gutter as every other page (12 px came from the old theme). */
.gw-account-page:not(:has(.gw-thread)) { padding-right: var(--gw2-space-4); padding-left: var(--gw2-space-4); }
/* Conversation: one time stamp at the end of each series of messages; the others show on hover or focus. */
.gw-thread .list-messages .item:has(+ .item.grouped) .added { display: none; }
.gw-thread .list-messages .item:hover .added,
.gw-thread .list-messages .item:focus-within .added { display: block; }

/* Small phones: the creator name stays readable; messaging remains on her profile. */
@media (max-width: 399px) {
  .gw2-creatorbar [data-gw-operation="message"] { display: none; }
}