:root {
  --bg: #0b0d10;
  --panel: #12151a;
  --text: #f3efe6;
  --muted: #8b8680;
  --line: #232830;
  --accent: #e8c36a;
  --wp-gap: 14px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

body.wp-theme {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "SF Pro Text", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", sans-serif;
  line-height: 1.45;
}

.wp-theme * { box-sizing: border-box; }
.wp-theme a { color: inherit; text-decoration: none; }

.wp-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.wp-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(1440px, calc(100% - (2 * var(--wp-gap))));
  margin: 0 auto;
  padding: 12px 0;
}

.wp-brand img { display: block; height: 28px; width: auto; }
.wp-brand span { font-weight: 700; letter-spacing: 0.22em; }

.wp-search {
  flex: 1;
  display: flex;
  max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.wp-search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 10px 16px;
  font-size: 15px;
}
.wp-search button,
.wp-hero-search button,
.wp-save {
  border: 0;
  background: var(--accent);
  color: #111;
  font-weight: 650;
  padding: 10px 16px;
  cursor: pointer;
}

.wp-account { display: flex; align-items: center; gap: 12px; margin-left: auto; font-size: 13px; color: var(--muted); }
.wp-account a:hover { color: var(--text); }
/* Upgrade entry for members without VIP, as in the other themes. */
.wp-upgrade-link { color: var(--accent); font-weight: 650; }
.wp-upgrade-link:hover,
.wp-upgrade-link.active { color: var(--text); }
.wp-signup-link {
  background: var(--accent);
  color: #111 !important;
  font-weight: 650;
  padding: 8px 14px;
  border-radius: 999px;
}
.wp-burger { display: none; width: 40px; height: 40px; border: 0; background: none; }
.wp-burger span { display: block; height: 1.5px; background: var(--text); margin: 7px 8px; }

.wp-cats {
  display: flex;
  gap: 18px;
  width: min(1440px, calc(100% - (2 * var(--wp-gap))));
  margin: 0 auto;
  padding: 0 0 12px;
  overflow-x: auto;
  font-size: 13px;
  color: var(--muted);
}
.wp-cats a:hover { color: var(--text); }
.wp-cats-account { display: none; }

.wp-hero {
  width: min(1440px, calc(100% - (2 * var(--wp-gap))));
  margin: 28px auto 20px;
}
.wp-hero-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(32px, 5vw, 56px);
  letter-spacing: -0.03em;
  font-weight: 650;
}
.wp-hero-copy p { margin: 0 0 18px; color: var(--muted); max-width: 40rem; }
.wp-hero-search {
  display: flex;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.wp-hero-search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 14px 16px;
  font-size: 16px;
}

.wp-chips {
  width: min(1440px, calc(100% - (2 * var(--wp-gap))));
  margin: 0 auto 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wp-chips a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted);
}
.wp-chips a:hover { color: var(--text); border-color: var(--accent); }
.wp-chips a.is-active { color: var(--text); border-color: var(--accent); }

.wp-pagehead,
.wp-crumb,
.wp-shot,
.wp-photos,
.wp-empty {
  width: min(1440px, calc(100% - (2 * var(--wp-gap))));
  margin-left: auto;
  margin-right: auto;
}

.wp-feed,
.wp-related,
.wp-thumbs {
  width: 100%;
  padding-left: var(--wp-gap);
  padding-right: var(--wp-gap);
}

.wp-masonry {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--wp-gap);
}
.wp-tile {
  display: grid;
  grid-template-rows: auto 40px;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--panel);
}
.wp-tile::after {
  content: "";
  grid-row: 2;
  height: 40px;
}
.wp-tile:has(.wp-photo-topics)::after { content: none; }
/* The empty row keeps cards equal in a grid where some photos carry topic
   chips. A grid where none do (homepage and album grids of covers) has
   nothing to line up with, so there it was only a blank strip under every
   thumbnail: collapse it. */
:is(.wp-masonry, .lumen-album-grid):not(:has(.wp-photo-topics)) .wp-tile { grid-template-rows: auto; }
:is(.wp-masonry, .lumen-album-grid):not(:has(.wp-photo-topics)) .wp-tile::after { content: none; }
.wp-tile > a {
  position: relative;
  display: block;
  min-width: 0;
  /* The image zooms to 1.05 on hover. Clip it here, not only at the card,
     or it spills below the link: past the bottom of the overlay and over
     the tag row. */
  overflow: hidden;
}
.wp-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform .35s ease;
}
.wp-tile:hover img { transform: scale(1.05); }
.wp-tile-overlay {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  padding: 28px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  opacity: 0;
  transition: opacity .2s ease;
}
.wp-tile:hover .wp-tile-overlay,
.wp-tile:focus-within .wp-tile-overlay { opacity: 1; }
.wp-tile-overlay h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  /* Long captions: three lines, so the overlay never covers the whole image. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.wp-tile-overlay span { font-size: 12px; color: var(--muted); }

.wp-crumb { padding: 20px 0 8px; color: var(--muted); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.wp-pagehead { padding: 12px 0 20px; }
.wp-pagehead h1 { margin: 4px 0 8px; font-size: 32px; letter-spacing: -.03em; }
.wp-pagehead p { margin: 0; color: var(--muted); }

.wp-shot-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.wp-shot-head h1 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.03em; }
.wp-shot.is-photo .wp-shot-head h1 { font-size: clamp(22px, 2.2vw, 32px); max-width: 52rem; }
.wp-shot-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wp-view-switch, .wp-photo-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wp-view-switch a, .wp-photo-nav a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted);
}
.wp-view-switch a.is-active, .wp-tile.is-current {
  border-color: var(--accent);
  color: var(--text);
}
.wp-tile.is-current {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.wp-thumbs { padding-bottom: 48px; }
.wp-thumbs h2 { margin: 0 0 14px; font-size: 16px; color: var(--muted); font-weight: 600; }
.wp-lede { color: var(--muted); max-width: 46rem; }
.wp-facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 16px 0 28px; list-style: none; }
.wp-facts li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
}
.wp-facts li.is-link {
  padding: 0;
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
}
.wp-facts li.is-link a {
  display: inline-block;
  padding: 4px 10px;
  color: var(--accent);
}
.wp-facts li.is-link a:hover {
  color: var(--text);
}

.wp-photos { display: grid; gap: 20px; padding-bottom: 48px; }
.wp-photos figure { margin: 0; background: #000; border-radius: 16px; overflow: hidden; }
/* Never wider than the image itself (width/height attributes carry its real
   size), centred on the black frame. The attributes also reserve the space
   before load, so the page does not shift. Very tall wallpapers are capped
   at the viewport and letterboxed instead of distorted. */
.wp-photos img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 88vh;
  margin: 0 auto;
  object-fit: contain;
}
.wp-photos figcaption {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 14px;
  color: var(--muted);
  font-size: 13px;
}
.wp-caption-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.wp-photos .wp-caption { flex: 1; min-width: 0; }
.wp-download {
  flex: none;
  color: var(--accent);
  white-space: nowrap;
  font-weight: 650;
}
.wp-download:hover { text-decoration: underline; }
.wp-photo-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wp-photo-topics a {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--muted);
  font-size: 12px;
}
.wp-photo-topics a:hover { color: var(--text); border-color: var(--text); }
.wp-tile .wp-photo-topics {
  position: relative;
  z-index: 1;
  grid-row: 2;
  height: 40px;
  margin: 0;
  padding: 6px 10px;
  /* One row that scrolls sideways. Wrapping inside the fixed 40px row cut
     the second line of chips in half; the fixed height is what keeps the
     cards in a grid the same size. The fade marks chips beyond the edge. */
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.wp-tile .wp-photo-topics::-webkit-scrollbar { display: none; }
.wp-tile .wp-photo-topics li { flex: none; }
.wp-tile .wp-photo-topics a { white-space: nowrap; }


.wp-related { padding: 12px 0 64px; }
.wp-related h2 { font-size: 16px; color: var(--muted); font-weight: 600; }

.wp-empty { text-align: center; padding: 48px 0; color: var(--muted); }
.wp-not-found { padding: 72px 0 40px; }
.wp-not-found-code {
  margin: 0 0 8px;
  font-size: 56px;
  font-weight: 650;
  letter-spacing: -0.04em;
  color: var(--text);
}
.wp-not-found h1 { margin: 0 0 12px; font-size: 28px; }
.wp-not-found a { color: var(--accent); }
.wp-footer { border-top: 1px solid var(--line); margin-top: 24px; }
.wp-footer-inner {
  width: min(1440px, calc(100% - (2 * var(--wp-gap))));
  margin: 0 auto;
  padding: 24px 0 40px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 13px;
}
.wp-footer-inner nav { display: flex; flex-wrap: wrap; gap: 12px; }

.wp-auth {
  width: min(440px, calc(100% - 40px));
  margin: 48px auto 80px;
}
.wp-auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px 24px;
}
.wp-auth-card h1 { margin: 0 0 20px; font-size: 28px; letter-spacing: -.03em; }
.wp-auth-alert {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #3a2420;
  color: #f3d2c8;
  font-size: 14px;
}
.wp-field { display: block; margin: 0 0 14px; }
.wp-field > span { display: block; margin: 0 0 6px; color: var(--muted); font-size: 13px; }
.wp-input,
.wp-auth input[type="email"],
.wp-auth input[type="password"],
.wp-auth input[type="text"],
.wp-auth .form-control {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0b0d10;
  color: var(--text);
  padding: 11px 12px;
  font-size: 15px;
}
.wp-auth .message,
.wp-auth .help-block,
.wp-field em {
  display: block;
  margin-top: 6px;
  color: #e08a7a;
  font-size: 12px;
  font-style: normal;
}
.wp-auth-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 8px;
}
.wp-btn {
  border: 0;
  background: var(--accent);
  color: #111;
  font-weight: 650;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
}
.wp-remember { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.wp-auth-links { display: flex; gap: 16px; margin: 16px 0 0; font-size: 13px; color: var(--muted); }
.wp-auth-links a:hover { color: var(--text); }
.wp-legal { padding-bottom: 64px; max-width: 46rem; }
.wp-legal-body { color: var(--muted); line-height: 1.7; }
.wp-legal-body p { margin: 0 0 1em; }
.wp-legal-body h2, .wp-legal-body h3 { color: var(--text); margin: 1.6em 0 .6em; font-size: 18px; }
.wp-legal-body a { color: var(--accent); }

.lumen-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: min(1440px, calc(100% - (2 * var(--wp-gap))));
  margin: 0 auto;
  padding: 24px 0 48px;
}
.lumen-pagination a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--muted);
}
.lumen-pagination a.active { color: var(--text); border-color: var(--accent); }
/* Phones: only Previous and Next, pushed to either edge like the other themes.
   On the first page Next stays on the right; on the last, Previous on the left. */
@media (max-width: 700px) {
  .lumen-pagination { justify-content: space-between; gap: 12px; }
  .lumen-pagination .page-first,
  .lumen-pagination .page-last,
  .lumen-pagination .page-num { display: none; }
  .lumen-pagination .page-prev,
  .lumen-pagination .page-next {
    flex: 0 1 auto;
    min-width: 120px;
    padding: 10px 18px;
    text-align: center;
    color: var(--text);
    border-color: var(--line);
  }
  .lumen-pagination .page-next { margin-left: auto; }
  .lumen-pagination .page-prev:active,
  .lumen-pagination .page-next:active { border-color: var(--accent); }
}

@media (max-width: 1500px) {
  .wp-masonry { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .wp-masonry { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .wp-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wp-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .wp-bar { flex-wrap: wrap; }
  .wp-search { order: 3; flex: 1 0 100%; max-width: none; }
  .wp-account { display: none; }
  .wp-burger { display: block; margin-left: auto; }
  .wp-cats { display: none; flex-direction: column; padding-bottom: 16px; }
  .wp-cats.is-open { display: flex; }
  .wp-cats-account {
    display: flex;
    gap: 12px;
    padding-top: 8px;
    align-items: center;
  }
  .wp-footer-inner { flex-direction: column; }
}
.wp-account-page {
  width: min(1440px, calc(100% - (2 * var(--wp-gap))));
  margin: 24px auto 40px;
}
.wp-account-page + .wp-account-page { margin-top: 0; }
.lumen-account-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.lumen-account-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
}
.lumen-account-nav a.active,
.lumen-account-nav a:hover { color: var(--text); border-color: var(--accent); }
.lumen-section-header,
.lumen-page-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
}
.lumen-section-header h2,
.lumen-page-heading h1,
.wp-account-page h1,
.wp-account-page h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -.03em;
}
.lumen-section-link { color: var(--muted); font-size: 13px; }
.lumen-section-note { margin: 0 0 16px; color: var(--muted); }
.lumen-auth { max-width: 560px; }
.lumen-auth-card,
.lumen-info-panel,
.lumen-settings-panel {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.lumen-auth .form-group { margin: 0 0 14px; }
.lumen-auth .form-label,
.lumen-form label {
  display: block;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
}
.lumen-auth input[type="text"],
.lumen-auth input[type="email"],
.lumen-auth input[type="password"],
.lumen-auth .form-control,
.lumen-form input,
.lumen-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0b0d10;
  color: var(--text);
  padding: 11px 12px;
  font-size: 15px;
}
.lumen-auth button[type="submit"],
.lumen-danger-button,
.lumen-secondary-button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 650;
  cursor: pointer;
}
.lumen-auth button[type="submit"] {
  border: 0;
  background: var(--accent);
  color: #111;
}
.lumen-danger-button { border: 0; background: #b42318; color: #fff; }
.lumen-secondary-button { border: 1px solid var(--line); background: transparent; color: var(--muted); }
.lumen-info-panel p,
.lumen-warning { margin: 8px 0 0; color: var(--muted); }
.lumen-panel-actions { display: flex; gap: 10px; margin-top: 16px; }
.lumen-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.lumen-modal.is-open { display: flex; }
.lumen-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.lumen-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.lumen-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.lumen-toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 90;
  max-width: min(360px, calc(100% - 36px));
  padding: 12px 16px;
  border-radius: 10px;
  background: #1c2430;
  color: var(--text);
  border: 1px solid var(--accent);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.lumen-toast.is-visible { opacity: 1; transform: none; }
.wp-photo-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 560px) {
  .wp-masonry { grid-template-columns: minmax(0, 1fr); }
  .wp-tile { grid-template-rows: auto auto; }
  .wp-tile .wp-photo-topics {
    height: auto;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 12px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .wp-tile-overlay { opacity: 1; }
  .wp-tile-overlay h3 { font-size: 16px; }
}

/* ------------------------------------------------------------------------
   Pages whose templates came from the lumen theme (upgrade and payment,
   subscription, favorites, history, account overview, model / studio /
   country pages, notices). Their lumen-* classes had no rules here, so
   those pages rendered unstyled. Ported from lumen, recoloured for the
   dark wp palette: panels use --panel, links and buttons the gold accent.
   ------------------------------------------------------------------------ */
.lumen-muted { color: var(--muted); }
.lumen-footer-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.lumen-footer-row a { color: var(--accent); }

.lumen-section { margin-top: 28px; }
.lumen-page-heading + .lumen-section { margin-top: 8px; }
.lumen-section h2 { margin: 0; font-size: 24px; font-weight: 800; }
/* Album cards are the same wp-tile cards as the photo grid. */
.lumen-album-grid,
.lumen-actor-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--wp-gap);
}
.lumen-actor-card {
  position: relative;
  overflow: hidden;
  padding-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  text-align: center;
}
.lumen-actor-card > a { display: block; aspect-ratio: 1 / 1; margin-bottom: 10px; background: #1a1e24; }
.lumen-actor-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.lumen-actor-card h3 { margin: 0; padding: 0 8px; font-size: 15px; line-height: 1.32; font-weight: 750; }
.lumen-actor-card p { margin: 6px 0 0; padding: 0 8px; color: var(--muted); font-size: 13px; }
.lumen-actor-card p a { color: var(--accent); font-weight: 700; }

.lumen-empty {
  margin: 18px 0;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.lumen-empty h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.lumen-empty p { margin: 0; color: var(--muted); }

.lumen-primary-link,
.lumen-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.lumen-primary-link { border: 0; background: var(--accent); color: #111; }
.lumen-primary-link:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); color: #111; }
.lumen-button-secondary { border: 1px solid var(--line); background: transparent; color: var(--accent); }
.lumen-button-secondary:hover { border-color: var(--accent); }

.lumen-profile-hero {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
  margin-top: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}
.lumen-company-hero { grid-template-columns: 1fr; }
.lumen-profile-image { align-self: start; overflow: hidden; border-radius: 12px; background: #1a1e24; }
.lumen-profile-image img { display: block; width: 100%; height: auto; object-fit: contain; }
.lumen-profile-body > p { margin: 0 0 8px; color: var(--accent); font-size: 14px; font-weight: 800; }
.lumen-profile-body h1 { margin: 0; font-size: clamp(28px, 5vw, 50px); line-height: 1.05; font-weight: 850; }
.lumen-profile-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.lumen-profile-facts span,
.lumen-profile-links span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
.lumen-profile-facts strong { color: var(--text); font-size: 14px; font-weight: 750; overflow-wrap: anywhere; }
.lumen-profile-intro { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.7; }
.lumen-profile-links { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.lumen-profile-links a { display: inline-flex; margin: 0 12px 8px 0; color: var(--accent); font-size: 14px; font-weight: 750; overflow-wrap: anywhere; }

.lumen-directory-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.lumen-directory-card {
  display: flex;
  min-height: 104px;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.lumen-directory-card:hover { border-color: var(--accent); }
.lumen-directory-card strong { font-size: 16px; line-height: 1.25; font-weight: 800; }
.lumen-directory-card span { margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }

.lumen-auth-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.lumen-auth-links-left { justify-content: flex-start; margin: -4px 0 14px; }
.lumen-auth-links a,
.lumen-link-list a { color: var(--accent); font-weight: 750; }
.lumen-link-list { margin: 14px 0 0; padding-left: 20px; }
.lumen-link-list li { margin: 8px 0; }

.lumen-page-card {
  max-width: 760px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}
.lumen-page-card h1,
.lumen-page-card h2 { margin-top: 0; }

.lumen-stat-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
}
.lumen-stat-panel span { font-weight: 750; }
.lumen-stat-panel strong { font-size: 22px; }

/* Upgrade and payment */
.lumen-upgrade-hero { max-width: 840px; margin: 8px auto 22px; text-align: center; }
.lumen-upgrade-hero h1 { margin: 0 0 8px; font-size: 38px; letter-spacing: -.03em; }
.lumen-upgrade-hero p { margin: 0; color: var(--muted); font-size: 18px; font-weight: 650; }
.lumen-upgrade-tabs { max-width: 980px; margin: 0 auto 24px; }
.lumen-tab-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lumen-tab-list button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.lumen-tab-list button.is-active,
.lumen-tab-list button:hover { border-color: var(--accent); color: var(--text); }
[x-cloak] { display: none !important; }
.lumen-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
.lumen-pricing-grid-single { max-width: 380px; margin: 0 auto; }
.lumen-pricing-grid-single .lumen-price-card { min-height: 300px; }
.lumen-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 360px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  text-align: center;
}
.lumen-price-card.is-featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 24px 58px rgba(0, 0, 0, .45);
}
.lumen-price-badge {
  align-self: center;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}
.lumen-price-months { font-size: 58px; line-height: 1; font-weight: 900; }
.lumen-price-monthly { margin: 18px 0 6px; font-size: 22px; font-weight: 850; }
.lumen-price-total { margin-bottom: 20px; color: var(--muted); font-weight: 650; }
.lumen-payment-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: auto;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #111;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.lumen-payment-button:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.lumen-pricing-grid-single .lumen-payment-button { margin-top: 28px; }
.lumen-payment-button span { position: relative; z-index: 2; }
.lumen-payment-button:disabled,
.lumen-payment-button.disabled { opacity: .72; cursor: wait; }
.lumen-progress { position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease; }
.lumen-progress div {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.4), rgba(255,255,255,.12));
  background-size: 220% 100%;
}
.lumen-payment-button.is-loading .lumen-progress { opacity: 1; }
.lumen-payment-button.is-loading .lumen-progress div { animation: lumen-progress 1s linear infinite; }
@keyframes lumen-progress {
  from { background-position: 0 0; }
  to { background-position: 220% 0; }
}
.lumen-paypal-buttons { margin-top: auto; }
.lumen-upgrade-support { margin: 0 auto 48px; }

/* Subscription management */
.lumen-subscription-summary { display: grid; gap: 6px; }
.lumen-subscription-summary strong { font-size: 18px; font-weight: 850; }
.lumen-subscription-summary span,
.lumen-payment-row span,
.lumen-payment-row small { color: var(--muted); }
.lumen-payment-list { display: grid; gap: 10px; }
.lumen-payment-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.lumen-payment-row:first-child { border-top: 0; }
.lumen-payment-row span,
.lumen-payment-row small { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 750; }
.lumen-payment-row strong,
.lumen-payment-row code { overflow-wrap: anywhere; color: var(--text); font-size: 13px; font-weight: 750; }
.lumen-payment-action { display: flex; align-items: center; justify-content: flex-end; }
.lumen-modal-alert { margin-top: 12px; padding: 12px; border-radius: 10px; background: rgba(56, 189, 248, .12); color: #7dd3fc; font-weight: 750; }
.lumen-modal-alert.is-error { background: rgba(248, 113, 113, .12); color: #fca5a5; }

@media (max-width: 1500px) {
  .lumen-album-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .lumen-album-grid,
  .lumen-actor-grid,
  .lumen-directory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 950px) {
  .lumen-album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lumen-profile-hero { grid-template-columns: 180px minmax(0, 1fr); }
  .lumen-profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .lumen-album-grid,
  .lumen-actor-grid,
  .lumen-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lumen-profile-hero { grid-template-columns: 1fr; padding: 14px; }
  .lumen-profile-image { justify-self: center; max-width: 260px; }
  .lumen-payment-row { grid-template-columns: 1fr; }
  .lumen-payment-action { justify-content: flex-start; }
  .lumen-upgrade-hero h1 { font-size: 28px; }
  .lumen-upgrade-hero p { font-size: 16px; }
}

/* Flash messages. The flash service emits Bootstrap-style classes
   (alert alert-danger / -success / -info / -warning, see public/index.php);
   lumen and prime style them, wp did not, so messages rendered as bare text
   against the window edge. Same column as the page content, dark variants. */
.wp-theme .alert {
  width: min(1440px, calc(100% - (2 * var(--wp-gap))));
  margin: 16px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}
.wp-theme .alert a { color: inherit; text-decoration: underline; }
.wp-theme .alert-success {
  border-color: rgba(52, 211, 153, .35);
  border-left-color: #34d399;
  background: rgba(52, 211, 153, .08);
  color: #a7f3d0;
}
.wp-theme .alert-danger,
.wp-theme .alert-error {
  border-color: rgba(248, 113, 113, .35);
  border-left-color: #f87171;
  background: rgba(248, 113, 113, .08);
  color: #fecaca;
}
.wp-theme .alert-warning {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: #f5dfa6;
}
.wp-theme .alert-info {
  border-color: rgba(56, 189, 248, .35);
  border-left-color: #38bdf8;
  background: rgba(56, 189, 248, .08);
  color: #bae6fd;
}