/* ======================= STRUCTURAL COMPONENTS ======================= */
:root {
  color-scheme: dark;
  --bg: #050506;
  --panel: #0e0f12;
  --panel2: #15161a;
  --panel3: #09090b;
  --line: rgba(255,255,255,.07);
  --line2: rgba(255,255,255,.11);
  --text: #f4f5f7;
  --muted: #9a9ca3;
  --faint: #6b6e76;
  --red: #e5333c;
  --red2: #ff4b54;
  --gold: #c9ccd3;
  --green: #3ddc84;
  --sky: #7cc4ff;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow: 0 12px 32px -18px rgba(0,0,0,.8);
  --shadow-lg: 0 30px 80px -30px rgba(0,0,0,.9);
  --ring: 0 0 0 3px rgba(229,51,60,.25);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
  background:
    radial-gradient(1100px 520px at 82% -6%, rgba(224,27,36,.14), transparent 60%),
    radial-gradient(900px 480px at 6% 4%, rgba(227,196,127,.08), transparent 60%),
    linear-gradient(180deg, #0a0d13, var(--bg));
  background-attachment: fixed;
  color: var(--text);
}

/* Premium scrollbars */
* { scrollbar-width: thin; scrollbar-color: #2c3340 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2c3340; border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #3b4453; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(5,7,10,.92), rgba(5,7,10,.72)),
    linear-gradient(180deg, rgba(5,7,10,.4), rgba(5,7,10,.94)),
    var(--promotion-bg-image);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .25s ease;
}
body.hasPromotionBackground::before { opacity: 1; }
.shell {
  position: relative;
  z-index: 1;
}

button, input, textarea, select { font: inherit; letter-spacing: inherit; }
button {
  height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--red2), var(--red));
  color: #fff;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 0 16px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px rgba(224,27,36,.24);
  transition: filter .16s var(--ease), transform .06s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
button:hover { filter: brightness(1.08); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 8px 22px rgba(224,27,36,.34); }
button:active { transform: translateY(1px); filter: brightness(.98); }
button.secondary { background: linear-gradient(180deg, #232a35, #1a212b); border: 1px solid #333c49; color: #e9edf4; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; }
button.secondary:hover { background: linear-gradient(180deg, #2b3340, #212836); border-color: #45505f; filter: none; }
button.ghost { background: transparent; border: 1px solid #363f4d; color: #cfd6e1; box-shadow: none; }
button.ghost:hover { background: rgba(255,255,255,.04); border-color: #4a5568; filter: none; }
button:disabled { opacity: .5; cursor: not-allowed; filter: none; box-shadow: none; transform: none; }
button.smallBtn { height: 32px; padding: 0 12px; font-size: 12px; }
:focus-visible { outline: none; }
button:focus-visible, a:focus-visible { box-shadow: var(--ring); }

input, textarea, select {
  width: 100%;
  border: 1px solid #2b3340;
  border-radius: var(--radius-sm);
  background: #0a0e14;
  color: var(--text);
  outline: none;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
input:hover, textarea:hover, select:hover { border-color: #3a4453; }
input, select { height: 42px; padding: 0 13px; }
textarea { min-height: 104px; resize: vertical; padding: 12px 13px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { border-color: var(--red2); box-shadow: var(--ring); background: #0b0f16; }
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .005em; }
.titleInput {
  height: 36px;
  padding: 0 11px;
  font-weight: 800;
  background: #080c12;
}

.hidden { display: none !important; }
html.embeddedMasterFrame #loginView,
html.embeddedMasterFrame #loginPanel {
  display: none !important;
}
.shell { min-height: 100vh; display: grid; grid-template-columns: 288px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 16px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(11,14,20,.94), rgba(7,9,13,.96));
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
}
.brand { display: flex; gap: 13px; align-items: center; padding: 4px 6px 20px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.05); }
.mark {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.02em;
  background: linear-gradient(150deg, var(--red2), #96121a);
  box-shadow: 0 12px 30px rgba(224,27,36,.34), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.brandTitle { font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.brandSub { margin-top: 2px; color: var(--muted); font-size: 12px; }

.nav { display: grid; gap: 4px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.navItem {
  justify-content: flex-start;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: #b9c1cd;
  font-weight: 600;
  height: 42px;
  box-shadow: none;
  transition: background .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.navItem:hover { background: rgba(255,255,255,.045); color: #eef1f6; filter: none; }
.navItem.active {
  background: linear-gradient(90deg, rgba(224,27,36,.18), rgba(224,27,36,.05));
  border-color: rgba(224,27,36,.4);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--red2);
}
.sidebarFoot { margin-top: auto; display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.05); }
.miniText { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

.main { min-width: 0; padding: 26px 28px; }
.loginWrap { min-height: calc(100vh - 52px); display: grid; place-items: center; }
.loginCard {
  width: min(760px, 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(23,29,39,.97), rgba(10,13,18,.98));
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.03) inset;
  padding: 38px;
}
.loginCard h1 { margin: 12px 0 12px; font-size: 40px; line-height: 1.06; letter-spacing: -.02em; font-weight: 800; }
.loginCard p { color: var(--muted); max-width: 620px; line-height: 1.6; }
.loginGrid, .formGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 18px; }
.full { grid-column: 1 / -1; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.message { margin-top: 14px; color: var(--muted); line-height: 1.5; font-size: 13.5px; }
.message:not(:empty) { padding: 11px 13px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.message.error { color: #ffb3b3; background: rgba(224,27,36,.1); border-color: rgba(224,27,36,.32); }

.metadataEditor {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(3, 5, 8, .74);
  backdrop-filter: blur(6px);
  overflow: auto;
  padding: 26px;
  display: grid;
  align-items: start;
  animation: overlayFade .2s var(--ease);
}
.metadataEditor.hidden { display: none !important; }
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
.metadataPanel {
  width: min(1040px, 100%);
  margin: 24px auto;
  border: 1px solid var(--line2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #131822, #0a0d13);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  animation: modalRise .24s var(--ease);
}
@keyframes modalRise { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
.metadataGrid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 16px;
}
.metadataFields {
  display: grid;
  gap: 12px;
}
.metadataThumbPreview {
  aspect-ratio: 16 / 9;
  border: 1px solid #465164;
  border-radius: 8px;
  background: #111722 center / cover no-repeat;
  display: grid;
  place-items: center;
  color: rgba(246,248,251,.68);
  font-weight: 900;
  margin-bottom: 12px;
}
.metadataThumbPreview.hasImage {
  color: transparent;
}

.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pageKicker, .eyebrow { color: var(--gold); text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.topbar h2 { margin: 7px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.topActions { display: flex; gap: 10px; align-items: center; }
.compactSelect {
  width: 260px;
  display: grid;
  gap: 5px;
}
.compactSelect select { height: 38px; }
.pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); color: var(--muted); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12.5px; font-weight: 600; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.good { color: var(--green); border-color: rgba(52,209,125,.4); background: rgba(52,209,125,.08); }

.view { display: none; }
.view.active { display: block; animation: viewFade .28s var(--ease); }
@keyframes viewFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.heroPanel, .panel, .stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(23,29,39,.85), rgba(12,15,21,.9));
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.heroPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  min-height: 270px;
  padding: 28px;
  overflow: hidden;
}
.heroPanel h3 { margin: 10px 0 10px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; }
.heroPanel p, .panelHead p, .softText { color: var(--muted); line-height: 1.5; }
.heroArt {
  position: relative;
  min-height: 220px;
  border: 1px solid #4a2630;
  border-radius: 8px;
  background: linear-gradient(135deg, #111822, #2a1116);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ringLines {
  position: absolute;
  inset: 24px;
  border: 2px solid rgba(215,183,109,.55);
}
.ringLines::before, .ringLines::after {
  content: "";
  position: absolute;
  left: -28px;
  right: -28px;
  height: 2px;
  background: rgba(255,255,255,.22);
}
.ringLines::before { top: 42%; }
.ringLines::after { top: 58%; }
.artText { position: relative; font-size: 34px; font-weight: 900; text-align: center; color: #fff; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.stat { padding: 18px; min-height: 96px; transition: border-color .16s var(--ease), transform .16s var(--ease); }
.stat:hover { border-color: var(--line2); transform: translateY(-2px); }
.stat span { color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 600; letter-spacing: .1em; }
.stat strong { display: block; margin-top: 10px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; }
.panel { padding: 20px; }
.panel.wide { min-height: 520px; }
.panelHead { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.panelHead h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.panelHead p { margin: 6px 0 0; font-size: 13.5px; }
.checklist { display: grid; gap: 9px; }
.check { position: relative; border: 1px solid var(--line); background: rgba(255,255,255,.02); border-radius: var(--radius-sm); padding: 13px 13px 13px 40px; color: #d5dbe5; font-size: 14px; }
.check::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--faint); }
.check.done { border-color: rgba(52,209,125,.32); background: rgba(52,209,125,.06); color: var(--green); }
.check.done::before { border-color: var(--green); background: var(--green); }
.check.done::after { content: ""; position: absolute; left: 19px; top: 50%; width: 4px; height: 8px; border: solid #05231b; border-width: 0 2px 2px 0; transform: translateY(-60%) rotate(45deg); }

.fileBox input { padding: 10px; height: auto; }
.durationBox {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.durationInputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.durationInputs label { gap: 5px; font-size: 11px; }
.durationInputs input { height: 42px; padding: 0 8px; }
.durationInputs input[readonly] {
  color: var(--green);
  border-color: rgba(74,222,128,.35);
  background: #08110d;
  font-weight: 900;
}
.uploadThumbnailPreview {
  aspect-ratio: 16 / 9;
  min-height: 180px;
  border: 1px solid #465164;
  border-radius: 8px;
  background: #090c11 center / cover no-repeat;
  display: grid;
  place-items: center;
  color: rgba(246,248,251,.72);
  font-weight: 900;
  overflow: hidden;
}
.uploadThumbnailPreview.hasImage { color: transparent; }
.artPreviewGrid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  margin: 10px 0 4px;
}
.artPreviewCard {
  border: 1px solid #333d4c;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(12,16,22,.98), rgba(7,9,13,.98));
  padding: 12px;
}
.artPreviewHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
}
.artPreviewHead strong {
  color: var(--green);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.artPreview {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #465164;
  border-radius: 8px;
  background-color: #090c11;
  background-position: center;
  background-size: cover;
  color: rgba(246,248,251,.72);
  font-weight: 900;
  overflow: hidden;
}
.thumbnailPreview { aspect-ratio: 16 / 9; min-height: 132px; }
.backgroundPreview { aspect-ratio: 16 / 7; min-height: 176px; }
.artPreview.hasImage { color: transparent; }
.uploadMeter { height: 12px; background: #0a0e14; border: 1px solid #2b3340; border-radius: var(--radius-pill); overflow: hidden; margin: 16px 0; }
#uploadBar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--red), var(--gold)); box-shadow: 0 0 14px rgba(224,27,36,.5); transition: width .2s ease; }

.importQueue { display: grid; gap: 10px; margin-top: 16px; }
.importJob {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 15px 13px 17px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--faint);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.025);
  overflow: hidden;
}
.importJob strong, .importJob span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.importJob strong { font-size: 14px; font-weight: 700; }
.importJob span { margin-top: 3px; color: var(--muted); font-size: 12px; font-weight: 400; }
.importJob em {
  font-style: normal;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
/* In-progress: queued / running */
.importJob.queued { border-left-color: var(--gold); }
.importJob.queued em { color: var(--gold); }
.importJob.running { border-left-color: var(--sky); }
.importJob.running em { color: var(--sky); }
.importJob.running::after,
.importJob.queued::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: currentColor;
  color: var(--sky);
  animation: jobPulse 1.3s var(--ease) infinite;
}
.importJob.queued::after { color: var(--gold); }
@keyframes jobPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.importJob.succeeded { border-left-color: var(--green); background: rgba(52,209,125,.05); }
.importJob.succeeded em { color: var(--green); }
.importJob.failed { border-left-color: var(--red2); background: rgba(224,27,36,.06); }
.importJob.failed em { color: #ff8f8f; }
/* Background video-upload queue states (reuse the import-queue look). */
.importJob.uploading { border-left-color: var(--sky); }
.importJob.uploading em { color: var(--sky); }
.importJob.saving { border-left-color: var(--sky); }
.importJob.saving em { color: var(--sky); }
.importJob.uploading::after,
.importJob.saving::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: currentColor;
  color: var(--sky);
  animation: jobPulse 1.3s var(--ease) infinite;
}
.importJob.done { border-left-color: var(--green); background: rgba(52,209,125,.05); }
.importJob.done em { color: var(--green); }
.uploadJobBar { margin-top: 7px; height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.uploadJobBarFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .2s ease; }
.uploadJobPct { color: var(--text); font-weight: 700; }
/* Admin-only Resend / Delete buttons in the Promotion Access list. */
.accessRowActions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.importQueueHead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 2px 2px 2px; color: var(--muted); font-size: 12px; font-weight: 600; }
.importJobEnd { display: flex; align-items: center; gap: 10px; }
.importJobRemove {
  height: 26px; width: 26px; min-width: 26px; padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line2);
  color: var(--muted);
  font-size: 17px; line-height: 1;
  box-shadow: none; flex: 0 0 auto;
  display: grid; place-items: center;
}
.importJobRemove:hover { background: rgba(224,27,36,.2); border-color: var(--red2); color: #fff; filter: none; }

.gridList { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 15px; }
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.pager span {
  min-width: 100px;
  text-align: center;
}
.videoCard, .builderRow, .tableRow {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
  overflow: hidden;
  transition: border-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.videoCard:hover { border-color: var(--line2); transform: translateY(-3px); box-shadow: var(--shadow); }
.thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1a2130, #391016);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
  background-size: cover;
  background-position: center;
}
.videoCard:hover .thumb { opacity: .94; }
.videoBody, .builderBody { padding: 14px; }
.videoTitle, .builderTitle { font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.rankNumber {
  display: inline-block;
  min-width: 28px;
  margin-right: 10px;
  color: var(--gold);
  font-weight: 950;
}
.videoMeta { margin-top: 6px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.cardActions, .miniActions, .inlinePicker {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cardActions { margin-top: 12px; }
.inlinePicker {
  margin-top: 13px;
  padding: 10px;
  border: 1px solid #2d3645;
  border-radius: 6px;
  background: #090d13;
}
.inlinePicker select { flex: 1 1 280px; min-width: 0; }
.channelEditor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #3f3340;
  border-radius: 8px;
  background: linear-gradient(180deg, #10151d, #090d13);
}
.channelEditor .full { grid-column: 1 / 2; }
.channelThumb {
  width: 180px;
  aspect-ratio: 16 / 9;
  border: 1px solid #4b5567;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
  background: #0a0f16 center / cover no-repeat;
}
.rowBuilder { display: grid; gap: 12px; }
/* While a rows/FAST mutation is in flight, dim + block the builder lists so the
   serialized request finishes before another action starts. */
body.builderBusy #rowList,
body.builderBusy #fastList { opacity: .7; pointer-events: none; transition: opacity .15s var(--ease); }
body.builderBusy #rowList .titleInput,
body.builderBusy #fastList input,
body.builderBusy #fastList textarea { pointer-events: auto; }
.builderRow { padding: 14px; }
.builderTop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.builderVideos { display: grid; gap: 8px; margin-top: 12px; }
.playlistItem {
  width: 100%;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #2f3948;
  border-radius: 8px;
  background: #070b10;
  padding: 10px;
}
.playlistThumb {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: linear-gradient(135deg, #1a2130, #391016) center / cover no-repeat;
  display: grid;
  place-items: center;
  color: var(--gold);
  font-weight: 900;
}
.playlistInfo { min-width: 0; }
.chip { border: 1px solid #3d4757; background: #111720; border-radius: 999px; padding: 8px 10px; color: var(--muted); font-size: 12px; }
.chipBtn {
  height: auto;
  padding: 0 0 0 8px;
  border: 0;
  background: transparent;
  color: #ff9da1;
  font-size: 11px;
}
.chipBtn:hover { background: transparent; color: #fff; }
.tableLite { display: grid; gap: 8px; }
.tableRow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 12px; align-items: center; }
.tableRow span { color: var(--muted); font-size: 12px; }
.analyticsCard {
  border: 1px solid #343e4e;
  border-radius: 8px;
  background: linear-gradient(180deg, #111720, #090d13);
  padding: 14px;
  cursor: pointer;
}
.analyticsCard:hover { border-color: #5a6577; }
.analyticsCard.notClickable { cursor: default; }
.analyticsCard.notClickable:hover { border-color: #343e4e; }
.analyticsCard.currentPromotion {
  border-color: rgba(74,222,128,.65);
  box-shadow: 0 0 0 1px rgba(74,222,128,.18), 0 18px 55px rgba(0,0,0,.24);
}
.analyticsCard.currentPromotion .builderTitle { color: var(--green); }
.videoAnalytic.fastChannelRow { background: rgba(74,222,128,.08); border-left: 3px solid var(--green); border-radius: 6px; }
.top10Tag { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #f5d90a; border: 1px solid rgba(245,217,10,.5); border-radius: 999px; padding: 1px 7px; vertical-align: middle; margin-left: 6px; }
.metricStrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.metricStrip span {
  border: 1px solid #2e3848;
  border-radius: 6px;
  background: #0b1017;
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
}
.metricStrip strong { display: block; color: var(--gold); font-size: 20px; margin-bottom: 3px; }
.analyticsDetails {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #2e3848;
}
.videoAnalytic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 6px;
  background: #070b10;
  color: var(--muted);
  font-size: 12px;
}
.videoAnalytic span:first-child { color: var(--text); font-weight: 800; }

@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; }
  .heroPanel, .split, .loginGrid, .formGrid, .stats, .channelEditor, .metricStrip, .videoAnalytic, .playlistItem, .artPreviewGrid, .metadataGrid { grid-template-columns: 1fr; }
  .metadataEditor { padding: 14px; }
}

/* --- Messages / message board -------------------------------------------- */
.navBadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: var(--radius-pill); background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle;
}
.navBadge.hidden { display: none; }

.messageThread {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 460px; overflow-y: auto; padding: 6px 4px 2px;
}
.messageRow { display: flex; }
.messageRow.mine { justify-content: flex-end; }
.messageRow.theirs { justify-content: flex-start; }
.messageBubble {
  max-width: 74%; padding: 10px 13px; border-radius: 14px;
  background: var(--panel2); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.messageRow.mine .messageBubble {
  background: rgba(52,209,125,.16); border-color: rgba(52,209,125,.36);
}
.messageSender { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.messageRow.mine .messageSender { color: var(--green); }
.messageBody { font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.messageTime { font-size: 10.5px; color: var(--faint); margin-top: 5px; }
.messageImages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.messageImage { position: relative; }
.messageImages img {
  width: 132px; height: 88px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--line); display: block;
}
.messageImageDl {
  position: absolute; bottom: 6px; right: 6px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.62); color: #fff; border-radius: 6px; text-decoration: none;
  font-size: 15px; line-height: 1; border: 1px solid rgba(255,255,255,.2);
}
.messageImageDl:hover { background: rgba(0,0,0,.86); }
.messageEmpty { color: var(--muted); font-size: 13.5px; text-align: center; padding: 34px 10px; }

/* Downloadable non-image attachment (PDF/JotForm, contract, doc, video) */
.messageFile {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; color: var(--text); max-width: 260px;
}
.messageFile:hover { border-color: #556; background: rgba(255,255,255,.08); }
.messageFileIcon { font-size: 18px; flex: 0 0 auto; }
.messageFileMeta { display: flex; flex-direction: column; min-width: 0; }
.messageFileName { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messageFileSize { font-size: 11px; color: var(--faint); }
.messageFileDl { margin-left: auto; color: var(--muted); font-size: 15px; flex: 0 0 auto; }
.messageReceipt { font-size: 10.5px; color: var(--faint); margin-top: 3px; text-align: right; }
.messageReceipt.read { color: var(--red); font-weight: 700; }
/* Inline video attachment (Bunny) */
.messageVideo { width: 260px; max-width: 100%; cursor: pointer; }
.messageVideoPoster {
  position: relative; width: 100%; aspect-ratio: 16/9; background: #000 center/cover no-repeat;
  border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden;
}
.messageVideoPlay {
  width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(0,0,0,.55);
  color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center;
}
.messageVideo:hover .messageVideoPlay { background: var(--red); }
.messageVideoName { font-size: 12px; color: var(--muted); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messageVideoFrame { width: 320px; max-width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.messageVideoFrame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* YouTube import queue: stalled state + action buttons */
.importQueueActions { display: inline-flex; gap: 8px; align-items: center; }
.importJob.stalled { border-color: var(--gold); }
.importJob.stalled em { color: var(--gold); }

/* Admin: Add From Master Media Library picker */
.pickerOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; padding: 22px; z-index: 60; }
.pickerOverlay.hidden { display: none; }
.pickerPanel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); width: 100%; max-width: 820px; max-height: 86vh; display: flex; flex-direction: column; padding: 20px; box-shadow: var(--shadow-lg); }
.pickerHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pickerHead h3 { margin: 0; font-size: 18px; }
.pickerHead p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.pickerTools { margin-bottom: 12px; }
.pickerTools .searchInput { width: 100%; background: var(--panel3); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; }
.masterPickerGrid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-content: start; }
.masterPickerCard { display: flex; flex-direction: column; gap: 8px; background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px; }
.masterPickerThumb { width: 100%; aspect-ratio: 16/9; background: #000 center/cover no-repeat; border-radius: 6px; border: 1px solid var(--line); }
.masterPickerInfo { min-width: 0; }
.masterPickerTitle { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.masterPickerCat { font-size: 11.5px; color: var(--faint); }
.masterPickerAdd.added { background: var(--green); color: #04120a; border-color: var(--green); }
@media (max-width: 560px) { .masterPickerGrid { grid-template-columns: 1fr 1fr; } }
.pendingFile {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  background: var(--card2, rgba(255,255,255,.04)); border: 1px solid var(--line2);
  border-radius: 8px; padding: 8px 12px 8px 10px; max-width: 220px;
}
.pendingFile .messageFileName { font-size: 12.5px; }

.messageAttachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.messageAttachments.hidden { display: none; }
.pendingImage { position: relative; }
.pendingImage img {
  width: 74px; height: 74px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--line2); display: block;
}
.pendingImageRemove {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; padding: 0;
  border-radius: 50%; background: var(--red); color: #fff; border: none; cursor: pointer;
  font-size: 14px; line-height: 18px; display: flex; align-items: center; justify-content: center;
}
.messageComposer {
  display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.messageComposer textarea { width: 100%; resize: vertical; min-height: 52px; }
.messageComposerActions { display: flex; align-items: center; gap: 10px; }
.messageComposerActions .fileBtn { cursor: pointer; margin: 0; display: inline-flex; align-items: center; }
.messageComposerActions #messageSendBtn { margin-left: auto; }

/* ==================================================================== */
/* Phone refinements. Only applies at <= 640px, so the desktop and       */
/* tablet layouts (the existing 1000px rules) are completely unchanged.  */
/* ==================================================================== */
@media (max-width: 640px) {
  .main { padding: 16px 14px; }


  /* Topbar stacks; smaller heading; actions wrap to full width */
  .topbar { flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding-bottom: 14px; }
  .topbar h2 { font-size: 22px; }
  .topActions { width: 100%; flex-wrap: wrap; }
  .compactSelect { width: 100%; }

  /* Panels and card grids go single column and tighten up */
  .panel { padding: 15px; }
  .panelHead { flex-direction: column; align-items: stretch; }
  .gridList { grid-template-columns: 1fr; }
  .tableRow { padding: 10px; gap: 8px; }

  /* Login */
  .loginCard { padding: 22px; }
  .loginCard h1 { font-size: 26px; }
  .loginCard p { font-size: 14px; }

  /* Full-screen overlays / modals / pickers */
  .metadataEditor { padding: 10px; }
  .metadataPanel { padding: 16px; margin: 8px auto; }
  .pickerOverlay { padding: 12px; }
  .pickerPanel { padding: 14px; max-height: 90vh; }

  /* Message board */
  .messageBubble { max-width: 90%; }
  .messageThread { max-height: 58vh; }
}

/* ---- Promotion Rows builder (admin) ---- */
.prRow { border: 1px solid rgba(255,255,255,.09); border-radius: 12px; padding: 12px 14px; margin: 12px 0; background: rgba(255,255,255,.02); }
.prRowHead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.prTiles { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; }
.prTile { flex: 0 0 auto; width: 150px; }
.prThumb { width: 150px; height: 84px; border-radius: 8px; background: #1b2130 center/cover no-repeat; display: flex; align-items: center; justify-content: center;  font-size: 12px; color: #6b7688; }
.prTileName { font-size: 12px; margin: 6px 0 4px; line-height: 1.25; max-height: 2.5em; overflow: hidden; }
.prTileBtns { display: flex; gap: 4px; }
.prTileBtns .smallBtn { padding: 2px 7px; }
.prRowFoot { margin-top: 6px; }
.prRowFoot select { max-width: 320px; }

/* ---- Direct connect-link box (Promotion Access) ---- */
.connectLinkBox{ margin:12px 0; padding:14px 16px; border:1px solid #d9b23a; border-radius:10px; background:#fff8e6; }
.connectLinkBox.hidden{ display:none; }
.connectLinkBox .clbHead{ font-weight:700; font-size:14px; color:#7a5a00; margin-bottom:8px; }
.connectLinkBox .clbHead span{ font-weight:400; color:#96762a; }
.connectLinkBox .clbRow{ display:flex; gap:8px; }
.connectLinkBox .clbRow input{ flex:1; min-width:0; padding:8px 10px; border:1px solid #cbb26a; border-radius:8px; font-size:13px; background:#fff; color:#333; }
.connectLinkBox .clbRow button{ flex:0 0 auto; padding:8px 16px; border:0; border-radius:8px; background:#d71920; color:#fff; font-weight:700; cursor:pointer; }
.connectLinkBox .clbRow button:hover{ filter:brightness(1.05); }
.connectLinkBox .clbNote{ margin-top:8px; font-size:12px; color:#96762a; }

/* ===== "Your WSN+" — Promotion Partner subscription tab ===== */
.navItem.wpNav { color: var(--gold); font-weight: 700; }
.navItem.wpNav.active { color: #fff; }
.wpWrap { display: grid; gap: 22px; }
.wpHero {
  position: relative; overflow: hidden; border: 1px solid var(--line2); border-radius: var(--radius-lg);
  padding: 30px 32px; background:
    radial-gradient(120% 140% at 100% 0%, rgba(224,27,36,.20), transparent 55%),
    linear-gradient(180deg, #14181f, #0b0e14);
}
.wpBadge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #0b0e14; background: linear-gradient(180deg, #f2d795, var(--gold));
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.wpHeadline { margin: 14px 0 8px; font-size: 30px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.wpSubhead { margin: 0; color: var(--muted); max-width: 640px; line-height: 1.6; font-size: 14.5px; }
.wpSubhead strong { color: #fff; }

.wpGrid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .wpGrid { grid-template-columns: 1fr; } }

.wpCard {
  position: relative; border: 1px solid rgba(224,27,36,.45); border-radius: var(--radius-lg);
  padding: 30px 30px 26px; background: linear-gradient(180deg, #161b24, #0c1017);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02);
}
.wpRibbon {
  position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 800; letter-spacing: .1em;
  color: #fff; background: linear-gradient(180deg, var(--red2), var(--red)); padding: 6px 12px; border-radius: var(--radius-pill);
  box-shadow: 0 6px 16px rgba(224,27,36,.4);
}
.wpPriceRow { display: flex; align-items: flex-end; gap: 14px; margin-top: 4px; }
.wpPrice { font-size: 62px; font-weight: 900; line-height: .9; color: #fff; letter-spacing: -.03em; }
.wpPrice .wpCur { font-size: 30px; font-weight: 800; vertical-align: super; color: #cfd6e2; margin-right: 2px; }
.wpPrice .wpDec { font-size: 34px; font-weight: 800; }
.wpPer { color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.35; padding-bottom: 8px; }
.wpPer span { color: #6f7889; font-weight: 600; }
.wpTrialLine {
  margin: 16px 0 4px; color: var(--gold); font-weight: 700; font-size: 14px;
  background: rgba(227,196,127,.08); border: 1px solid rgba(227,196,127,.28); border-radius: var(--radius); padding: 11px 14px;
}
.wpFeats { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 11px; }
.wpFeats li { position: relative; padding-left: 30px; color: #dfe4ec; font-size: 14.5px; line-height: 1.45; }
.wpFeats li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, var(--red2), var(--red));
}
.wpCta {
  width: 100%; padding: 16px 20px; border: 0; border-radius: 12px; cursor: pointer;
  font-size: 16px; font-weight: 800; letter-spacing: .01em; color: #fff;
  background: linear-gradient(180deg, var(--red2), var(--red)); box-shadow: 0 12px 30px rgba(224,27,36,.4);
}
.wpCta:hover { filter: brightness(1.05); }
.wpCta:disabled { opacity: .65; cursor: default; filter: none; }
.wpFine { margin-top: 14px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.wpFine strong { color: #cfd6e2; }
.wpMessage { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--red2); min-height: 0; }
.wpMessage.good { color: var(--green); }

.wpSide { display: grid; gap: 16px; }
.wpStatusCard, .wpNote {
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px;
  background: linear-gradient(180deg, #12161f, #0b0e14);
}
.wpStatusHead, .wpNoteTitle { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.wpStatusPill {
  display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 10px; padding: 8px 14px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; color: var(--muted); border: 1px solid var(--line2); background: rgba(255,255,255,.03);
}
.wpStatusPill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wpStatusPill.active { color: var(--green); border-color: rgba(52,209,125,.4); background: rgba(52,209,125,.09); }
.wpStatusPill.trial { color: var(--gold); border-color: rgba(227,196,127,.4); background: rgba(227,196,127,.09); }
.wpStatusDetail { color: #cfd6e2; font-size: 13.5px; line-height: 1.55; }
.wpGhost {
  margin-top: 14px; padding: 9px 16px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13px;
  color: var(--muted); background: transparent; border: 1px solid var(--line2);
}
.wpGhost:hover { color: #fff; border-color: var(--red2); }
.wpNote p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.wpNote strong { color: #fff; }

/* My WSN+ Member Hub — web-app launch + top analytics + top 10 videos */
.wpHub { margin-top: 22px; display: grid; gap: 18px; }
.wpHub.hidden { display: none; }
.wpHubHead {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--line2); border-radius: var(--radius-lg); padding: 22px 24px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(224,27,36,.16), transparent 55%), linear-gradient(180deg, #14181f, #0b0e14);
}
.wpOpenApp { text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; padding: 15px 22px; }
.wpStatStrip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 900px) { .wpStatStrip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .wpStatStrip { grid-template-columns: repeat(2, 1fr); } }
.wpStat { border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; background: linear-gradient(180deg, #12161f, #0b0e14); }
.wpStatVal { font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.wpStatLbl { margin-top: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wpTopCard { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, #12161f, #0b0e14); overflow: hidden; }
.wpTopHead { padding: 16px 20px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 15px; color: #fff; }
.wpTopHead span { font-weight: 600; font-size: 12px; color: var(--muted); margin-left: 8px; }
.wpTopList { display: grid; }
.wpTopRow { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid rgba(255,255,255,.04); }
.wpTopRow:last-child { border-bottom: 0; }
.wpTopRank { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #fff; background: linear-gradient(180deg, var(--red2), var(--red)); }
.wpTopName { font-weight: 700; font-size: 14px; color: #eef1f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpTopMetrics { display: flex; gap: 16px; color: var(--muted); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.wpTopEmpty { padding: 22px 20px; color: var(--muted); font-size: 13.5px; }

/* ===== My WSN+ hub sub-tabs ===== */
.wpHubTabs { display: flex; gap: 8px; margin: 20px 0 16px; border-bottom: 1px solid var(--line); }
.wpHubTab { position: relative; background: transparent; border: 0; color: var(--muted); font-weight: 800; font-size: 14px; padding: 10px 4px; margin-right: 14px; cursor: pointer; letter-spacing: .01em; }
.wpHubTab.active { color: #fff; }
.wpHubTab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--red2), var(--red)); }
.wpHubBadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; margin-left: 4px; }
.wpHubBadge.hidden { display: none; }
.wpHubPane.hidden { display: none; }
.wpCtaSm { padding: 10px 16px; font-size: 14px; }
.wpFull { width: 100%; }

/* ===== Partner Calendar ===== */
.wpCalCard { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, #12161f, #0b0e14); padding: 18px 18px 20px; }
.wpCalHead { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.wpCalNav { display: flex; align-items: center; gap: 10px; }
.wpCalMonth { font-size: 19px; font-weight: 900; color: #fff; min-width: 170px; text-align: center; }
.wpCalHint { color: var(--muted); font-size: 12.5px; }
.wpCalHint strong { color: var(--gold); }
.wpIconBtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line2); background: #12161f; color: #fff; font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.wpIconBtn:hover { border-color: var(--red2); }
.wpCalWeekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.wpCalWeekdays span { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.wpCalGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wpCalCell { position: relative; min-height: 62px; border: 1px solid var(--line); border-radius: 10px; background: #0d1118; color: #dfe4ec; cursor: pointer; padding: 7px 8px; text-align: left; display: flex; flex-direction: column; gap: 4px; transition: border-color .12s, background .12s; }
.wpCalCell.empty { background: transparent; border: 0; cursor: default; min-height: 0; }
.wpCalCell:hover:not(.empty) { border-color: var(--line2); background: #12161f; }
.wpCalCell.today { border-color: rgba(215,183,109,.5); }
.wpCalCell.has { background: radial-gradient(120% 130% at 100% 0%, rgba(224,27,36,.16), transparent 60%), #0f141c; }
.wpCalCell.sel { border-color: var(--red2); box-shadow: inset 0 0 0 1px var(--red2); }
.wpCalNum { font-size: 13px; font-weight: 800; }
.wpCalCount { position: absolute; top: 6px; right: 7px; font-size: 11px; font-weight: 800; color: #fff; background: linear-gradient(180deg, var(--red2), var(--red)); border-radius: 999px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; }
.wpCalDots { margin-top: auto; display: flex; gap: 3px; }
.wpCalDots i { width: 5px; height: 5px; border-radius: 50%; background: var(--red2); }
.wpCalDay { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, #12161f, #0b0e14); overflow: hidden; }
.wpCalDay.hidden, .wpEventForm.hidden { display: none; }
.wpCalDayHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 800; color: #fff; }
.wpEventRow { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: start; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.04); }
.wpEventRow:last-child { border-bottom: 0; }
.wpEventTime { color: var(--gold); font-weight: 800; font-size: 13px; }
.wpEventTitle { font-weight: 800; color: #eef1f6; font-size: 15px; }
.wpEventType { font-size: 10px; font-weight: 900; letter-spacing: .06em; padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; background: #2a2130; color: #d7b76d; border: 1px solid rgba(215,183,109,.3); }
.wpEventType.t-ppv { background: rgba(224,27,36,.16); color: #ff8f93; border-color: rgba(224,27,36,.4); }
.wpEventMeta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.wpEventDesc { color: #cfd6e2; font-size: 13px; margin-top: 6px; line-height: 1.5; }
.wpEventDel { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line2); background: transparent; color: var(--muted); cursor: pointer; }
.wpEventDel:hover { border-color: var(--red2); color: #fff; }
.wpEventForm { margin-top: 16px; border: 1px solid var(--line2); border-radius: var(--radius-lg); background: linear-gradient(180deg, #141922, #0c1017); padding: 18px 20px; }
.wpEventFormTitle { font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; margin-bottom: 14px; }
.wpEventGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wpEventGrid label { display: grid; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.wpEventGrid .wpEventFull { grid-column: 1 / -1; }
.wpEventGrid input, .wpEventGrid select, .wpEventGrid textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #0a0e14; color: var(--text); font-size: 14px; }
.wpEventActions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
@media (max-width: 640px) { .wpEventGrid { grid-template-columns: 1fr; } .wpCalCell { min-height: 50px; } }

/* ===== Partner Messenger ===== */
.wpMsgLayout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; height: 520px; }
.wpMsgSide { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.wpContactPicker { border: 1px solid var(--line2); border-radius: 12px; background: #12161f; padding: 8px; display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.wpContactPicker.hidden { display: none; }
.wpContact { text-align: left; background: transparent; border: 0; color: #dfe4ec; padding: 10px 12px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px; }
.wpContact:hover { background: rgba(255,255,255,.05); }
.wpThreadList { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #12161f, #0b0e14); overflow: auto; flex: 1; min-height: 0; }
.wpThread { position: relative; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.04); color: #dfe4ec; padding: 13px 15px; cursor: pointer; }
.wpThread:hover { background: rgba(255,255,255,.04); }
.wpThread.active { background: rgba(224,27,36,.1); }
.wpThreadTop { display: flex; justify-content: space-between; gap: 8px; }
.wpThreadName { font-weight: 800; font-size: 14px; color: #fff; }
.wpThreadTime { color: var(--muted); font-size: 11.5px; }
.wpThreadPrev { color: var(--muted); font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpThreadDot { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--red2); }
.wpMsgMain { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #12161f, #0b0e14); min-height: 0; overflow: hidden; }
.wpMsgHeader { padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.wpMsgWith { font-weight: 800; font-size: 16px; color: #fff; }
.wpMsgSub { font-size: 12px; color: var(--muted); }
.wpMsgBody { flex: 1; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.wpBubbleRow { display: flex; }
.wpBubbleRow.me { justify-content: flex-end; }
.wpBubble { max-width: 78%; border-radius: 14px; padding: 10px 13px; font-size: 14px; line-height: 1.45; }
.wpBubbleRow.them .wpBubble { background: #1a212c; border: 1px solid var(--line); color: #eef1f6; border-top-left-radius: 5px; }
.wpBubbleRow.me .wpBubble { background: linear-gradient(180deg, #c1121f, #8b0f16); color: #fff; border-top-right-radius: 5px; }
.wpBubbleFrom { font-size: 11.5px; font-weight: 800; color: var(--gold); margin-bottom: 3px; }
.wpBubbleMeta { font-size: 10.5px; opacity: .72; margin-top: 5px; text-align: right; }
.wpBubbleAtts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.wpBubbleAtts img { max-width: 200px; max-height: 160px; border-radius: 8px; display: block; }
.wpAttFile { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 8px 11px; color: inherit; text-decoration: none; font-size: 13px; font-weight: 700; }
.wpMsgComposer { border-top: 1px solid var(--line); padding: 12px 14px; }
.wpMsgComposer.hidden { display: none; }
.wpAttachRow { display: flex; flex-wrap: wrap; gap: 8px; }
.wpAttachRow:not(:empty) { margin-bottom: 10px; }
.wpAttChip { font-size: 12px; font-weight: 700; color: var(--muted); background: #12161f; border: 1px solid var(--line2); border-radius: 999px; padding: 6px 12px; }
.wpAttChip.ready { color: #eef1f6; border-color: rgba(52,209,125,.4); }
.wpComposerRow { display: flex; align-items: flex-end; gap: 10px; }
.wpComposerRow textarea { flex: 1; resize: none; max-height: 120px; padding: 11px 13px; border: 1px solid var(--line2); border-radius: 12px; background: #0a0e14; color: var(--text); font-size: 14px; font-family: inherit; }
@media (max-width: 760px) { .wpMsgLayout { grid-template-columns: 1fr; height: auto; } .wpThreadList { max-height: 220px; } .wpMsgBody { max-height: 340px; } }

/* ===== My WSN+ member bar + notification box ===== */
.wpMemberBar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #12161f, #0b0e14); }
.wpMemberStatus { display: flex; align-items: center; gap: 12px; }
.wpMbDetail { color: var(--muted); font-size: 13px; font-weight: 600; }
.wpGhostSm { padding: 7px 12px; font-size: 12.5px; }

.wpNotifBox { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, #12161f, #0b0e14); overflow: hidden; }
.wpNotifHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.wpNotifTitle { font-weight: 800; font-size: 15px; color: #fff; display: flex; align-items: center; gap: 8px; }
.wpNotifActions { display: flex; gap: 8px; }
.wpNotifList { max-height: 300px; overflow-y: auto; }
.wpNotif { position: relative; display: grid; grid-template-columns: 34px 1fr 30px; gap: 12px; align-items: start; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: background .12s; }
.wpNotif:last-child { border-bottom: 0; }
.wpNotif:hover { background: rgba(255,255,255,.03); }
.wpNotif.unread { background: rgba(224,27,36,.06); }
.wpNotif.unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--red2), var(--red)); }
.wpNotifIcon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: #12161f; border: 1px solid var(--line2); }
.wpNotifTitleRow { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wpNotifName { font-weight: 800; font-size: 14px; color: #eef1f6; }
.wpNotifTime { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.wpNotifBody { color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.45; }
.wpNotifDel { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line2); background: transparent; color: var(--muted); cursor: pointer; font-size: 12px; }
.wpNotifDel:hover { border-color: var(--red2); color: #fff; }

/* Calendar billing marker + billing row + video attachment */
.wpCalCell.bill { border-color: rgba(215,183,109,.55); }
.wpCalBill { position: absolute; bottom: 6px; right: 7px; font-size: 12px; }
.wpBillRow { background: rgba(215,183,109,.06); }
.wpBillRow .wpEventTime { font-size: 18px; }
.wpAttVideo { width: 260px; max-width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.wpAttVideo iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ===== My WSN+ Payouts tab ===== */
.wpPayCard { border: 1px solid var(--line2); border-radius: var(--radius-lg); padding: 24px 24px 22px; background: radial-gradient(120% 140% at 0% 0%, rgba(52,209,125,.12), transparent 55%), linear-gradient(180deg, #14181f, #0b0e14); }
.wpPayHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wpPayStatus { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line2); color: var(--muted); background: rgba(255,255,255,.03); white-space: nowrap; }
.wpPayStatus::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wpPayStatus.on { color: var(--green); border-color: rgba(52,209,125,.4); background: rgba(52,209,125,.09); }
.wpPayStatus.pending { color: var(--gold); border-color: rgba(227,196,127,.4); background: rgba(227,196,127,.09); }
.wpPayBody { margin-top: 18px; }
.wpPaySub { color: #cfd6e2; font-size: 14px; line-height: 1.55; margin: 0 0 16px; max-width: 640px; }
.wpOwed { border: 1px solid rgba(245, 197, 66, .45); border-radius: var(--radius-lg); padding: 16px 18px; margin: 0 0 16px; background: linear-gradient(180deg, rgba(245,197,66,.12), rgba(245,197,66,.04)); }
.wpOwed .wpOwedAmt { font-size: 20px; font-weight: 800; color: #f5c542; letter-spacing: .2px; }
.wpOwed .wpOwedSub { color: #e4e9f1; font-size: 13.5px; line-height: 1.5; margin-top: 5px; max-width: 620px; }
.wpOwedPaid { border-color: rgba(74, 222, 128, .5); background: linear-gradient(180deg, rgba(74,222,128,.14), rgba(74,222,128,.04)); }
.wpOwedPaid .wpOwedAmt { color: #4ade80; }
.wpPayStats { display: grid; grid-template-columns: repeat(2, minmax(140px, 220px)); gap: 12px; margin-bottom: 16px; }
.wpPayActions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wpPayNote { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; background: linear-gradient(180deg, #12161f, #0b0e14); }
.wpPayNote p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.wpPayNote strong { color: #fff; }

/* ===== My WSN+ Revenue Share Pool (in Payouts tab) ===== */
.wpPoolCard { margin-top: 16px; border: 1px solid var(--line2); border-radius: var(--radius-lg); padding: 24px; background: radial-gradient(120% 140% at 100% 0%, rgba(215,183,109,.12), transparent 55%), linear-gradient(180deg, #14181f, #0b0e14); }
.wpPoolHead { margin-bottom: 4px; }
.wpPoolBody { margin-top: 16px; }
.wpPoolStats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.wpPoolHist { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #12161f, #0b0e14); overflow: hidden; }
.wpPoolHistHead { padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 13.5px; color: #fff; }
.wpPoolHistRow { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13.5px; color: #dfe4ec; }
.wpPoolHistRow:last-child { border-bottom: 0; }
.wpPoolAmt { font-weight: 800; color: var(--green); }
@media (max-width: 520px) { .wpPoolStats { grid-template-columns: 1fr; } }

/* ===== Partner Calendar v2 — day list (thumbnails) + poster picker + event detail modal ===== */
.wpDayItem { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: background .12s; }
.wpDayItem:last-child { border-bottom: 0; }
.wpDayItem:hover { background: rgba(255,255,255,.04); }
.wpDayThumb { flex: 0 0 auto; width: 64px; height: 44px; border-radius: 8px; background: #12161f center/cover no-repeat; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #cfd6e2; letter-spacing: .04em; }
.wpDayThumb.ph.t-ppv { background: linear-gradient(180deg,#3a1418,#1a0d10); color: #ff9a9e; }
.wpDayThumb.ph.t-event { background: linear-gradient(180deg,#181d27,#0e1218); }
.wpDayThumb.bill { background: rgba(215,183,109,.14); border-color: rgba(215,183,109,.4); font-size: 18px; }
.wpDayMain { flex: 1; min-width: 0; }
.wpDayName { font-weight: 800; font-size: 14.5px; color: #eef1f6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpDayMeta { color: var(--muted); font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpDayType { flex: 0 0 auto; font-size: 10px; font-weight: 900; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; background: #2a2130; color: var(--gold); border: 1px solid rgba(215,183,109,.3); }
.wpDayType.t-ppv { background: rgba(224,27,36,.16); color: #ff8f93; border-color: rgba(224,27,36,.4); }

/* Poster picker in the add/edit form */
.wpPosterPick { display: flex; align-items: center; gap: 14px; }
.wpPosterPreview { flex: 0 0 auto; width: 132px; height: 88px; border-radius: 10px; border: 1px dashed var(--line2); background: #0a0e14 center/cover no-repeat; display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; overflow: hidden; }
.wpPosterPreview.empty { border-style: dashed; }
.wpPosterPreview:not(.empty) { border-style: solid; }
.wpPosterBtns { display: flex; flex-direction: column; gap: 8px; }

/* Event detail modal (PPV-style) */
.wpEventModal { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; }
.wpEventModal.hidden { display: none; }
.wpEventSheet { position: relative; width: min(760px, 100%); margin: auto; border: 1px solid var(--line2); border-radius: var(--radius-lg); background: linear-gradient(180deg, #161b24, #0c1017); box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; }
.wpEventCloseBtn { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; cursor: pointer; z-index: 3; }
.wpEvDetail { display: flex; gap: 22px; padding: 22px; }
.wpEvPoster { flex: 0 0 auto; border-radius: 12px; background: var(--bg2, #12161f) center/cover no-repeat; border: 1px solid var(--line2); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.wpEvPoster.port { width: 220px; aspect-ratio: 2/3; }
.wpEvPoster.land { width: 300px; aspect-ratio: 16/9; }
.wpEvPoster.ph { display: grid; place-items: center; }
.wpEvPoster.ph span { font-size: 13px; font-weight: 900; letter-spacing: .1em; color: var(--gold); }
.wpEvPoster.ph.t-ppv span { color: #ff9a9e; }
.wpEvInfo { flex: 1; min-width: 0; }
.wpEvKicker { color: var(--red); font-weight: 900; font-size: 12px; letter-spacing: .1em; margin-bottom: 6px; }
.wpEvTitle { font-size: 26px; font-weight: 900; margin: 0 0 12px; color: #fff; line-height: 1.15; }
.wpEvMetaRow { color: #dfe4ec; font-size: 14px; margin-bottom: 8px; }
.wpEvDesc { color: #cfd6e2; font-size: 14px; line-height: 1.6; margin: 14px 0 0; white-space: pre-wrap; }
.wpEvActions { display: flex; gap: 12px; margin-top: 20px; }
@media (max-width: 620px) {
  .wpEvDetail { flex-direction: column; align-items: center; text-align: center; }
  .wpEvPoster.port { width: min(200px, 60%); }
  .wpEvPoster.land { width: 100%; }
  .wpEvInfo { width: 100%; }
  .wpEvActions { justify-content: center; }
  .wpPosterPick { flex-direction: column; align-items: stretch; }
  .wpPosterPreview { width: 100%; height: 120px; }
  .wpPosterBtns { flex-direction: row; }
}

/* video upload-health badge (promotion portal) */
.upBadge { font-size: 12.5px; font-weight: 700; border-radius: 8px; padding: 7px 10px; margin: 6px 0 8px; line-height: 1.35; }
.upBadge.fail { color: #ff8fa3; background: rgba(255,90,118,.12); border: 1px solid rgba(255,90,118,.4); }
.upBadge.proc { color: #ffcf7a; background: rgba(255,180,84,.1); border: 1px solid rgba(255,180,84,.35); }
.videoCard.vcBad { border-color: rgba(255,90,118,.5); box-shadow: 0 0 0 1px rgba(255,90,118,.25) inset; }

/* ============================================================================
   COLOR SWITCHER UI  (injected into the sidebar footer by the theme module)
   ============================================================================ */
.themePicker{ display:grid; gap:8px; padding:12px; border:1px solid var(--line); border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }
.themePicker .tpLabel{ font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; }
.themeSwatches{ display:flex; gap:8px; flex-wrap:wrap; }
.themeSwatch{ width:24px; height:24px; border-radius:50%; cursor:pointer; border:2px solid transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14); transition: transform .12s var(--ease), box-shadow .15s; padding:0; }
.themeSwatch:hover{ transform: scale(1.12); }
.themeSwatch.on{ border-color:#fff; box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 0 16px -2px currentColor; }
.themeSwatch.sw-blue{ background:#3d7bff; color:#3d7bff; }
.themeSwatch.sw-red{ background:#ff2d3f; color:#ff2d3f; }
.themeSwatch.sw-purple{ background:#9b6bff; color:#9b6bff; }
.themeSwatch.sw-green{ background:#2fd48a; color:#2fd48a; }
.themeSwatch.sw-gold{ background:#f5c542; color:#f5c542; }
.themeSwatch.sw-mono{ background:#cfd4de; color:#cfd4de; }

/* ============================================================================
   MY WSN+ — PREMIUM DASHBOARD (Phase 2): Top 10 Promotions, Upcoming Shows,
   Messages quick-view. Layout on top of the existing wpTopCard styling.
   ============================================================================ */
.wpDashGrid{ display:grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap:16px; margin-top:16px; align-items:start; }
.wpDashMain, .wpDashSide{ display:grid; gap:16px; min-width:0; }
.wpTopHead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wpTopHead .wpLinkBtn{ margin-left:auto; }
.wpLinkBtn{ height:auto; padding:4px 2px; background:none; border:none; box-shadow:none; color:var(--portal); font-weight:700; font-size:12px; cursor:pointer; letter-spacing:.01em; }
.wpLinkBtn:hover{ filter:none; text-decoration:underline; }

/* --- WSN Top 10 Promotions --- */
.wpRankList{ display:grid; gap:2px; margin-top:12px; }
.wpRankRow{ display:grid; grid-template-columns:30px 40px 1fr auto; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; border:1px solid transparent; transition: background .14s var(--ease), border-color .14s; cursor:pointer; }
.wpRankRow:hover{ background:rgba(255,255,255,.04); }
.wpRankAv{ width:40px; height:40px; border-radius:10px; background:#12161f center/cover no-repeat; display:grid; place-items:center; font-weight:900; font-size:14px; color:var(--portal,var(--red)); border:1px solid var(--line2); }
.wpRankRow.me{ background:var(--portal-soft); border-color:var(--portal-line); box-shadow: inset 3px 0 0 var(--portal); }
.wpRankNo{ font-family:var(--fdisplay); font-size:20px; line-height:1; text-align:center; color:var(--muted); font-variant-numeric:tabular-nums; }
.wpRankNo.g{ color:#f5c542; text-shadow:0 0 14px rgba(245,197,66,.5); }
.wpRankNo.s{ color:#cfd4de; text-shadow:0 0 12px rgba(207,212,222,.4); }
.wpRankNo.b{ color:#e08b4c; text-shadow:0 0 12px rgba(224,139,76,.4); }
.wpRankName{ font-weight:700; font-size:14px; color:#eef1f6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wpRankMe{ font-size:9.5px; font-weight:800; letter-spacing:.08em; color:var(--portal-ink); background:var(--portal); padding:2px 6px; border-radius:999px; vertical-align:middle; margin-left:6px; }
.wpRankMetrics{ display:flex; gap:12px; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.wpRankMetrics span:first-child{ color:#cdd4df; font-weight:700; }

/* --- Upcoming Shows --- */
.wpUpcomingList{ display:grid; gap:8px; margin-top:12px; }
.wpUpRow{ display:grid; grid-template-columns:auto 44px 1fr; align-items:center; gap:11px; padding:8px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.015); }
.wpUpDate{ display:grid; justify-items:center; align-content:center; width:42px; height:46px; border-radius:9px; background:linear-gradient(180deg, var(--portal-soft), transparent); border:1px solid var(--portal-line); }
.wpUpMon{ font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--portal); font-weight:800; }
.wpUpDay{ font-family:var(--fdisplay); font-size:22px; line-height:1; color:#fff; }
.wpUpThumb{ width:44px; height:44px; border-radius:8px; background-size:cover; background-position:center; background-color:var(--panel2); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:var(--muted); }
.wpUpThumb.ph{ border:1px solid var(--line); }
.wpUpMain{ min-width:0; }
.wpUpName{ font-weight:700; font-size:13.5px; color:#eef1f6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wpUpMeta{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --- Messages quick-view --- */
.wpMsgQuick{ display:grid; gap:6px; margin-top:12px; }
.wpMqRow{ position:relative; display:grid; gap:3px; text-align:left; padding:9px 11px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.015); box-shadow:none; color:inherit; cursor:pointer; }
.wpMqRow:hover{ filter:none; border-color:var(--line2); background:rgba(255,255,255,.04); }
.wpMqRow.unread{ border-color:var(--portal-line); }
.wpMqTop{ display:flex; justify-content:space-between; gap:8px; }
.wpMqName{ font-weight:700; font-size:13px; color:#eef1f6; }
.wpMqTime{ font-size:11px; color:var(--faint); }
.wpMqPrev{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wpMqRow .wpThreadDot{ position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--portal); box-shadow:0 0 10px -1px var(--portal-glow); }

@media (max-width: 900px){ .wpDashGrid{ grid-template-columns:1fr; } }

/* ============================================================================
   MY WSN+ — BACKSTAGE-GRADE DASHBOARD (Phase 2.1). Ported Backstage dashboard
   building blocks, SCOPED to #wpHub so the rest of the portal is untouched.
   ============================================================================ */
:root{ --r:12px; --r-lg:14px; --r-sm:9px; --bg2:#0a0a0b; }

/* --- compact member hero (replaces the big head + member bar) --- */
#wpHub .wpHubHead{ display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 22px; margin-bottom:14px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, var(--panel), var(--bg2)); box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
#wpHub .wpHubHead > div:first-child{ min-width:0; }
#wpHub .wpHubHead .wpBadge{ margin-bottom:6px; }
#wpHub .wpHeadline{ font-family:var(--fdisplay); font-weight:400; font-size:26px; letter-spacing:.02em; margin:0 0 3px; }
#wpHub .wpSubhead{ font-size:12.5px; color:var(--muted); max-width:560px; margin:0; }
/* smaller Open App button */
#wpHub .wpOpenApp.wpCta{ height:36px; width:auto; padding:0 15px; font-size:12.5px; border-radius:10px;
  display:inline-flex; align-items:center; white-space:nowrap; flex:none;
  background:linear-gradient(180deg, var(--portal), var(--portal-2)); color:var(--portal-ink);
  box-shadow:0 8px 20px -8px var(--portal-glow); }
/* member status bar — compact, small cancel */
#wpHub .wpMemberBar{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; margin-bottom:14px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel), var(--bg2)); }
#wpHub .wpMbDetail{ font-size:12px; color:var(--muted); }
#wpHub #wpMbManage.wpGhost{ height:30px; padding:0 12px; font-size:11.5px; }
.wpStatusPill.active{ background:rgba(47,212,138,.14); color:#5cf0a6; border:1px solid rgba(47,212,138,.34); }

/* --- notifications as a clean panel --- */
#wpHub .wpNotifBox{ border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg, var(--panel), var(--bg2)); padding:16px 18px; margin-bottom:14px; }
#wpHub .wpNotifTitle{ font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-weight:800; }
#wpHub .wpGhostSm{ height:28px; padding:0 10px; font-size:11px; }

/* --- tabs: clean underline row --- */
#wpHub .wpHubTabs{ display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--line); }
#wpHub .wpHubTab{ height:auto; background:none; border:none; box-shadow:none; color:var(--muted);
  font-weight:700; font-size:13px; padding:10px 14px; border-bottom:2px solid transparent; border-radius:0; cursor:pointer; }
#wpHub .wpHubTab:hover{ filter:none; color:#e8ebf1; }
#wpHub .wpHubTab.active{ color:#fff; border-bottom-color:var(--portal); }

/* --- stat row: centered premium tiles (no icon system needed) --- */
#wpHub .wpStatStrip{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-bottom:16px; }
#wpHub .wpStat.wpStatTune{ border:1px solid rgba(255,59,67,.5); background:radial-gradient(120% 120% at 50% 0%, rgba(255,59,67,.18), rgba(255,255,255,.02)); box-shadow:0 0 26px -8px rgba(255,59,67,.55), 0 0 0 1px rgba(255,59,67,.25) inset; }
#wpHub .wpStat.wpStatTune .wpStatVal{ color:#ff6a72; text-shadow:0 0 18px rgba(255,59,67,.6); }
#wpHub .wpStat.wpStatTune .wpStatLbl{ color:#ffb3b7; }
#wpHub .wpStat{ display:grid; place-items:center; text-align:center; gap:5px; padding:16px 10px;
  background:linear-gradient(180deg, var(--panel), var(--bg2)); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:none; }
#wpHub .wpStatVal{ font-family:var(--fdisplay); font-weight:400; font-size:30px; line-height:1; letter-spacing:.01em;
   }
#wpHub .wpStatLbl{ font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; }

/* --- dashboard panels + rows (Backstage look) --- */
#wpHub .wpDashGrid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; margin-top:0; align-items:start; }
#wpHub .wpTopCard{ background:linear-gradient(180deg, var(--panel), var(--bg2)); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:0 1px 0 rgba(255,255,255,.03) inset; }
#wpHub .wpTopHead{ display:flex; align-items:center; gap:8px; font-size:13px; letter-spacing:.04em; text-transform:uppercase; font-weight:800; color:#eef1f6; margin-bottom:6px; }
#wpHub .wpTopHead span{ text-transform:none; letter-spacing:0; font-weight:600; font-size:11.5px; color:var(--muted); }
#wpHub .wpTopHead .wpLinkBtn{ margin-left:auto; }

/* rank list → clean rows */
#wpHub .wpRankRow{ grid-template-columns:28px 38px 1fr auto; padding:9px 6px; border-top:1px solid var(--line); border-radius:0; border-left:0; border-right:0; border-bottom:0; background:none; }
#wpHub .wpRankList .wpRankRow:first-child{ border-top:0; }
#wpHub .wpRankRow:hover{ background:rgba(255,255,255,.02); }
#wpHub .wpRankRow.me{ background:var(--portal-soft); border-top-color:transparent; box-shadow:inset 3px 0 0 var(--portal); border-radius:8px; }
#wpHub .wpRankRow.me + .wpRankRow{ border-top-color:transparent; }

/* upcoming + messages already styled above; tighten inside panel */
#wpHub .wpUpcomingList, #wpHub .wpMsgQuick{ margin-top:6px; }
#wpHub .wpUpRow, #wpHub .wpMqRow{ border:0; border-top:1px solid var(--line); border-radius:0; background:none; padding-left:2px; padding-right:2px; }
#wpHub .wpUpcomingList .wpUpRow:first-child, #wpHub .wpMsgQuick .wpMqRow:first-child{ border-top:0; }

@media (max-width: 1024px){ #wpHub .wpStatStrip{ grid-template-columns:repeat(3,1fr); } #wpHub .wpDashGrid{ grid-template-columns:1fr; } }
@media (max-width: 560px){ #wpHub .wpStatStrip{ grid-template-columns:repeat(2,1fr); } #wpHub .wpHubHead{ flex-direction:column; align-items:flex-start; } }

/* smaller "Begin Membership" CTA on the offer card */
#wpSubscribeBtn.wpCta{ height:46px; font-size:14px; padding:0 20px; }

/* ============================================================================
   MY WSN+ — HERO (avatar + name + inline actions), NOTEPAD, MINI CALENDAR
   ============================================================================ */
/* Premium profile-header hero: faded cover art + portal glow, rounded-square avatar,
   gradient display name, status chip, and a clean action row. */
#wpHub .wpHubHero{ position:relative; overflow:hidden; margin-bottom:16px; border:1px solid var(--line2); border-radius:20px;
  background:linear-gradient(180deg, var(--panel), var(--bg2));
  box-shadow:0 28px 70px -34px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.05) inset; }
#wpHub .wpHeroCover{ position:absolute; inset:0; z-index:0; background:#0a0c12 center/cover no-repeat; opacity:.30; }
#wpHub .wpHubHero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, var(--panel) 28%, rgba(18,18,20,.55) 66%, rgba(18,18,20,.15)),
    radial-gradient(760px 320px at 94% -35%, var(--portal-glow-soft), transparent 70%); }
#wpHub .wpHeroInner{ position:relative; z-index:2; display:flex; align-items:center; gap:26px; width:100%; padding:34px 32px; min-height:184px; }
#wpHub .wpHeroAvatar{ width:108px; height:108px; border-radius:24px; flex:none; background:#0a0c12 center/cover no-repeat;
  border:2px solid var(--portal-line); display:grid; place-items:center; font-family:var(--fdisplay); font-size:34px; color:var(--portal);
  box-shadow:0 16px 40px -12px var(--portal-glow), 0 0 0 6px rgba(0,0,0,.28); }
#wpHub .wpHeroAvatar.hasImg span{ display:none; }
#wpHub .wpHeroBody{ min-width:0; flex:1; }
#wpHub .wpHeroBadge{ margin-bottom:9px; }
#wpHub .wpHeroName{ font-family:var(--fdisplay); font-weight:400; font-size:40px; letter-spacing:.02em; line-height:.96; margin:0 0 11px;
   }
#wpHub .wpHeroMeta{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
#wpHub .wpMbDetail{ font-size:12.5px; color:var(--muted); }
#wpHub .wpHeroActions{ display:flex; gap:9px; flex:none; align-items:center; }
#wpHub .wpHeroBtn{ height:40px; padding:0 17px; border-radius:11px; font-weight:700; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; cursor:pointer;
  text-decoration:none; border:1px solid var(--line2); background:var(--panel2); color:var(--text);
  transition:filter .14s, border-color .14s, box-shadow .14s, transform .1s; }
#wpHub .wpHeroBtn:active{ transform:translateY(1px); }
#wpHub .wpHeroBtn.primary{ background:linear-gradient(180deg, var(--portal), var(--portal-2)); color:var(--portal-ink);
  border-color:transparent; box-shadow:0 12px 26px -8px var(--portal-glow), 0 0 24px -10px var(--portal-glow); }
#wpHub .wpHeroBtn.primary:hover{ filter:brightness(1.07); }
#wpHub .wpHeroBtn.notes:hover, #wpHub .wpHeroBtn.ghost:hover{ border-color:var(--portal-line); box-shadow:0 0 18px -8px var(--portal-glow); }
#wpHub .wpHeroBtn.ghost{ background:transparent; color:var(--muted); }
#wpHub .wpHeroBtn.ghost:hover{ color:#fff; }
@media (max-width:820px){ #wpHub .wpHeroInner{ flex-wrap:wrap; gap:16px; padding:24px; min-height:0; } #wpHub .wpHeroBody{ flex-basis:100%; order:3; } #wpHub .wpHeroActions{ flex-wrap:wrap; } }

/* notepad */
#wpHub .wpNoteSaved{ margin-left:auto; font-size:11px; color:#5cf0a6; text-transform:none; letter-spacing:0; font-weight:600; }
#wpHub .wpNotepad{ width:100%; min-height:150px; margin-top:10px; resize:vertical; border:1px solid var(--line);
  border-radius:10px; background:#0a0c12; color:var(--text); padding:12px 13px; font:inherit; line-height:1.55; }
#wpHub .wpNotepad::placeholder{ color:var(--faint); }
#wpHub .wpNotepad:focus{ border-color:var(--portal); box-shadow:0 0 0 3px var(--portal-soft); outline:none; }

/* mini calendar */
#wpHub .wpMiniCal{ margin-top:10px; }
#wpHub .wpMcHead{ font-size:13px; font-weight:800; margin-bottom:8px; text-align:center; color:#eef1f6; }
#wpHub .wpMcGrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
#wpHub .wpMcDow{ text-align:center; font-size:9.5px; font-weight:800; color:var(--faint); padding:2px 0 4px; }
#wpHub .wpMcDay{ position:relative; aspect-ratio:1; display:grid; place-items:center; font-size:12px; color:var(--muted); border-radius:8px; cursor:pointer; }
#wpHub .wpMcDay.out{ visibility:hidden; cursor:default; }
#wpHub .wpMcDay:hover{ background:rgba(255,255,255,.05); color:#fff; }
#wpHub .wpMcDay.today{ background:var(--portal-soft); color:var(--portal); font-weight:800; box-shadow:inset 0 0 0 1px var(--portal-line); }
#wpHub .wpMcDay.has{ color:#fff; font-weight:700; }
#wpHub .wpMcDot{ position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:999px; background:var(--portal); box-shadow:0 0 8px -1px var(--portal-glow); }
@media (max-width:560px){ #wpHub .wpHubHero{ flex-direction:column; align-items:flex-start; text-align:left; } #wpHub .wpHeroActions{ flex-direction:row; } }

/* ============================================================================
   MY WSN+ — 3-COLUMN DASHBOARD GRID
   Row 1: Notifications · Notepad · Messenger  |  Row 2: Analytics bar (full)
   Row 3: Calendar · WSN Top 10 · Upcoming Shows
   ============================================================================ */
#wpHub .wpDash3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:stretch; }
#wpHub .wpDash3 > .wpStatStrip{ grid-column:1 / -1; margin:0; }
/* Row-1 cards fill their equal-height cell so they meet the analytics bar (no empty space). */
#wpHub .wpNotifCard, #wpHub .wpNotepadCard, #wpHub .wpMsgQuickCard{ display:flex; flex-direction:column; }
#wpHub .wpNotifCard .wpNotifActions{ margin-left:auto; display:inline-flex; gap:6px; }
#wpHub .wpNotifCard .wpNotifList{ flex:1; min-height:120px; overflow:auto; margin-top:6px; }
#wpHub .wpNotif{ cursor:pointer; }
#wpHub .wpNotif:hover{ background:rgba(255,255,255,.03); }
#wpHub .wpNotepadCard .wpNotepad{ flex:1; min-height:150px; margin-top:8px; }
#wpHub .wpMsgQuickCard .wpMsgQuick{ flex:1; overflow:auto; }
#wpHub .wpMiniCalCard, #wpHub .wpRankCard, #wpHub .wpUpcomingCard{ min-height:290px; }
@media (max-width:1024px){ #wpHub .wpDash3{ grid-template-columns:1fr; } }

/* Notepad "Save to Notes" row */
#wpHub .wpNoteBar{ display:flex; align-items:center; gap:8px; margin-top:8px; }
#wpHub .wpNoteBar .wpNoteSave{ height:30px; padding:0 12px; font-size:12px; border-radius:8px; border:none; cursor:pointer;
  background:linear-gradient(180deg,var(--portal),var(--portal-2)); color:var(--portal-ink); box-shadow:0 6px 16px -6px var(--portal-glow); }
#wpHub .wpNoteBar .wpNoteSave:hover{ filter:brightness(1.06); }

/* Hero "Notes" button */
#wpHub .wpHeroBtn.notes{ background:var(--panel2); color:var(--text); }
#wpHub .wpHeroBtn.notes:hover{ border-color:var(--portal-line); }

/* ===== Notes modal ===== */
.wpNotesModal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.6); backdrop-filter:blur(4px); }
.wpNotesModal.hidden{ display:none; }
.wpNotesSheet{ width:min(560px,100%); max-height:82vh; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line2); border-radius:16px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.7), 0 0 40px -16px var(--portal-glow); }
.wpNotesHead{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); }
.wpNotesHead h3{ font-family:var(--fdisplay); font-weight:400; font-size:22px; letter-spacing:.02em; margin:0; }
.wpNotesClose{ margin-left:auto; width:32px; height:32px; border-radius:8px; border:1px solid var(--line2); background:var(--panel2); color:var(--muted); cursor:pointer; font-size:14px; }
.wpNotesClose:hover{ color:#fff; }
.wpNotesBody{ padding:14px 18px; overflow:auto; }
.wpNoteRow{ border:1px solid var(--line); border-radius:11px; padding:12px 13px; margin-bottom:10px; background:rgba(255,255,255,.015); }
.wpNoteRowText{ font-size:13px; color:#e8ebf1; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.wpNoteRowMeta{ display:flex; align-items:center; gap:8px; margin-top:9px; }
.wpNoteRowDate{ font-size:11px; color:var(--faint); margin-right:auto; }
.wpNoteMini{ height:28px; padding:0 11px; font-size:11.5px; border-radius:7px; border:1px solid var(--line2); background:var(--panel2); color:var(--text); cursor:pointer; }
.wpNoteMini:hover{ border-color:var(--portal-line); }
.wpNoteMini.danger:hover{ border-color:rgba(255,90,118,.5); color:#ff8fa3; }
.wpNoteEdit{ width:100%; min-height:90px; border:1px solid var(--portal-line); border-radius:9px; background:#0a0c12; color:var(--text); padding:10px; font:inherit; line-height:1.5; margin-bottom:8px; }
.wpNotesEmpty{ text-align:center; color:var(--muted); padding:30px 10px; font-size:13px; }

/* ===== Color wheel (custom theme color) ===== */
.themePicker .tpCustom{ display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
.themePicker .tpCustom label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; }
.themePicker .tpCustom input[type=color]{ width:30px; height:26px; padding:0; border:1px solid var(--line2); border-radius:8px; background:none; cursor:pointer; }
.themeSwatch.sw-custom{ background:conic-gradient(from 0deg, #ff2d3f, #f5c542, #2fd48a, #3d7bff, #9b6bff, #ff2d3f); }

/* ===== Notification detail modal ===== */
.wpNotifModal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.62); backdrop-filter:blur(4px); }
.wpNotifModal.hidden{ display:none; }
.wpNotifSheet{ position:relative; width:min(460px,100%); background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--portal-line); border-radius:18px; padding:24px 24px 22px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,.7), 0 0 50px -14px var(--portal-glow); }
.wpNmHead{ display:flex; align-items:center; gap:14px; margin-bottom:14px; padding-right:34px; }
.wpNmIcon{ width:48px; height:48px; border-radius:14px; flex:none; display:grid; place-items:center; font-size:22px;
  background:var(--portal-soft); box-shadow:inset 0 0 0 1px var(--portal-line), 0 0 20px -8px var(--portal-glow); }
.wpNmTitle{ font-weight:800; font-size:17px; color:#fff; }
.wpNmTime{ font-size:12px; color:var(--faint); margin-top:2px; }
.wpNmBody{ font-size:14px; color:#e8ebf1; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.wpNmActions{ margin-top:20px; }
.wpNmActions .wpMemCta{ height:44px; font-size:14px; }

/* ===== Membership modal (WSN+ Free Month info) ===== */
.wpMemberModal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.62); backdrop-filter:blur(4px); }
.wpMemberModal.hidden{ display:none; }
.wpMemberSheet{ width:min(520px,100%); max-height:86vh; overflow:auto; position:relative;
  background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--portal-line); border-radius:18px;
  padding:26px 26px 24px; box-shadow:0 40px 100px -20px rgba(0,0,0,.7), 0 0 50px -14px var(--portal-glow); }
.wpMemberClose{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:8px; border:1px solid var(--line2); background:var(--panel2); color:var(--muted); cursor:pointer; font-size:14px; }
.wpMemberClose:hover{ color:#fff; }
.wpMemRibbon{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--portal-ink); background:linear-gradient(180deg,var(--portal),var(--portal-2)); padding:5px 12px; border-radius:999px; box-shadow:0 0 20px -6px var(--portal-glow); }
.wpMemTitle{ font-family:var(--fdisplay); font-weight:400; font-size:30px; letter-spacing:.02em; margin:14px 0 6px; }
.wpMemPrice{ font-size:14px; color:var(--muted); margin-bottom:16px; }
.wpMemPrice strong{ color:#fff; font-size:26px; font-family:var(--fdisplay); font-weight:400; }
.wpMemFeats{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:10px; }
.wpMemFeats li{ position:relative; padding-left:26px; font-size:13.5px; color:#e8ebf1; line-height:1.45; }
.wpMemFeats li::before{ content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:999px; background:var(--portal-soft); color:var(--portal); display:grid; place-items:center; font-size:11px; font-weight:800; box-shadow:0 0 12px -4px var(--portal-glow); }
.wpMemCta{ width:100%; height:48px; border:none; border-radius:11px; font-weight:800; font-size:15px; cursor:pointer;
  background:linear-gradient(180deg,var(--portal),var(--portal-2)); color:var(--portal-ink); box-shadow:0 12px 28px -8px var(--portal-glow); }
.wpMemCta:hover{ filter:brightness(1.06); }
.wpMemFine{ font-size:11.5px; color:var(--muted); margin-top:12px; line-height:1.5; text-align:center; }

/* ===== Overview page — Promotion Partner banner ===== */
.ovPartner{ display:flex; align-items:center; gap:16px; padding:18px 20px; margin-bottom:18px; border-radius:14px;
  border:1px solid var(--portal-line); background:linear-gradient(120deg, var(--portal-soft), transparent 70%), linear-gradient(180deg,var(--panel),var(--bg2));
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 0 40px -18px var(--portal-glow); }
.ovPartnerIco{ width:46px; height:46px; border-radius:12px; flex:none; display:grid; place-items:center; font-size:22px; background:var(--portal-soft); box-shadow:inset 0 0 0 1px var(--portal-line), 0 0 20px -8px var(--portal-glow); }
.ovPartnerMain{ flex:1; min-width:0; }
.ovPartnerTitle{ font-weight:800; font-size:15px; color:#fff; }
.ovPartnerSub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.ovPartnerBtn{ flex:none; height:40px; padding:0 18px; border:none; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
  background:linear-gradient(180deg,var(--portal),var(--portal-2)); color:var(--portal-ink); box-shadow:0 10px 24px -8px var(--portal-glow); }
.ovPartnerBtn:hover{ filter:brightness(1.06); }
.ovPartner.isMember{ border-color:rgba(47,212,138,.34); }
.ovPartner.isMember .ovPartnerIco{ background:rgba(47,212,138,.14); box-shadow:inset 0 0 0 1px rgba(47,212,138,.34); }
@media (max-width:640px){ .ovPartner{ flex-direction:column; align-items:flex-start; text-align:left; } }

/* ===== Collapsible side menu ===== */
.topLeft{ display:flex; align-items:center; gap:14px; min-width:0; }
.sideToggle{ width:40px; height:40px; flex:none; border-radius:10px; border:1px solid var(--line2); background:var(--panel2); color:var(--text); cursor:pointer; font-size:17px; line-height:1; display:grid; place-items:center; transition:border-color .14s, background .14s, box-shadow .14s; }
.sideToggle:hover{ border-color:var(--portal-line); box-shadow:0 0 18px -8px var(--portal-glow); }
body.sideCollapsed .shell{ grid-template-columns:1fr; }
body.sideCollapsed .sidebar{ display:none; }

/* ============================================================================
   UPLOAD STUDIO / LIBRARY / ROWS / FAST — premium polish (function unchanged)
   ============================================================================ */
.uploadPanel .dropZone{ position:relative; display:block; margin:6px 0 22px; border:2px dashed var(--line2); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent); cursor:pointer; text-align:center; padding:40px 20px;
  transition:border-color .15s, background .15s, box-shadow .15s; }
.uploadPanel .dropZone:hover, .uploadPanel .dropZone.drag{ border-color:var(--portal); background:var(--portal-soft); box-shadow:0 0 44px -16px var(--portal-glow); }
.uploadPanel .dropZone input[type=file]{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.dzIcon{ width:58px; height:58px; margin:0 auto 12px; border-radius:16px; display:grid; place-items:center; font-size:25px;
  background:var(--portal-soft); color:var(--portal); box-shadow:inset 0 0 0 1px var(--portal-line), 0 0 26px -8px var(--portal-glow); }
.dzTitle{ font-weight:800; font-size:16px; color:#eef1f6; }
.dzTitle span{ color:var(--portal); }
.dzHint{ font-size:12.5px; color:var(--muted); margin-top:7px; }
.uploadPanel .uploadFields{ margin-top:4px; }
#uploadBar{ background:linear-gradient(90deg, var(--portal-2), var(--portal)); box-shadow:0 0 14px -2px var(--portal-glow); }
.uploadThumbnailPreview{ border-color:var(--line); }

/* Library grid */
.gridList{ grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:16px; }
.videoCard{ border-radius:14px; overflow:hidden; }
.videoCard:hover{ border-color:var(--portal-line); transform:translateY(-3px);
  box-shadow:0 24px 56px -26px rgba(0,0,0,.75), 0 0 30px -14px var(--portal-glow); }

/* Rows / FAST builder */
.rowBuilder{ gap:14px; }
.builderRow{ border-radius:14px; transition:border-color .14s, box-shadow .14s; }
.builderRow:hover{ border-color:var(--portal-line); box-shadow:0 0 26px -14px var(--portal-glow); }
.playlistItem{ border-radius:11px; }
.playlistItem:hover{ border-color:var(--portal-line); }
.fastInfoBox{ background:var(--portal-soft); border:1px solid var(--portal-line); }

/* ==========================================================================
   POWER FEATURES — Autopilot, Bulk, Health, History, Schedule, A/B
   ========================================================================== */
.headActions{ display:flex; gap:8px; align-items:center; }
.autopilotBar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 14px; padding:10px 12px; border:1px dashed var(--portal-line); border-radius:var(--radius); background:var(--portal-soft); }
.autopilotBar .fieldHint{ color:var(--muted); font-size:12px; }

/* Bulk toolbar */
.bulkBar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px; padding:12px 14px; border:1px solid var(--portal-line); border-radius:var(--radius); background:var(--portal-soft); box-shadow:0 0 30px -20px var(--portal-glow); }
.bulkCount{ font-weight:800; color:var(--text); font-size:13px; }
.bulkAll{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:12.5px; margin:0; }
.bulkAll input{ width:auto; height:auto; }
.bulkActions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.bulkSelect{ height:32px; min-width:150px; font-size:12.5px; padding:0 30px 0 10px; }
.vcCheck{ position:absolute; top:10px; left:10px; z-index:3; margin:0; background:rgba(5,7,11,.7); border-radius:6px; padding:4px; display:inline-flex; }
.vcCheck input{ width:18px; height:18px; accent-color:var(--red); }
.videoCard{ position:relative; }
.videoCard.vcSel{ border-color:var(--red); box-shadow:0 0 0 1px var(--red), 0 0 30px -12px var(--portal-glow); }
.schBadge{ display:inline-block; margin:4px 0; padding:3px 9px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:700; color:#d9e6ff; background:rgba(111,211,255,.12); border:1px solid rgba(111,211,255,.35); }
.abBadge{ display:inline-block; margin:4px 0; padding:3px 9px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:700; color:#ffe6b0; background:rgba(227,196,127,.12); border:1px solid rgba(227,196,127,.4); }

/* Page Health */
.healthScore{ display:flex; align-items:center; gap:18px; margin:6px 0 20px; }
.hsRing{ position:relative; width:96px; height:96px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:conic-gradient(var(--green) 0 100%, var(--line) 0); box-shadow:inset 0 0 0 10px var(--panel); }
.hsRing.warn{ background:conic-gradient(var(--gold) 0 100%, var(--line) 0); }
.hsRing.bad{ background:conic-gradient(var(--red2) 0 100%, var(--line) 0); }
.hsPct{ font-size:30px; font-weight:900; color:var(--text); line-height:1; }
.hsLbl{ position:absolute; bottom:24px; font-size:10px; color:var(--muted); }
.hsGrade{ font-size:18px; font-weight:800; }
.hsGrade.good{ color:var(--green); } .hsGrade.warn{ color:var(--gold); } .hsGrade.bad{ color:var(--red2); }
.hsSub{ color:var(--muted); font-size:13px; margin-top:3px; }
.healthBody{ display:grid; gap:14px; }
.healthAllClear{ padding:24px; text-align:center; color:var(--green); font-weight:700; border:1px solid rgba(52,209,125,.3); border-radius:var(--radius-lg); background:rgba(52,209,125,.08); }
.healthCard{ border:1px solid var(--line2); border-radius:var(--radius-lg); padding:16px 18px; background:var(--panel2); }
.healthCardHead{ display:flex; align-items:center; gap:10px; }
.healthCardHead h4{ margin:0; font-size:15px; }
.hcIcon{ font-size:18px; }
.hcCount{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--red); color:#fff; font-size:12px; font-weight:800; }
.healthCardHead .smallBtn{ margin-left:auto; }
.hcDesc{ color:var(--muted); font-size:13px; margin:8px 0 12px; line-height:1.5; }
.hcList{ display:flex; flex-wrap:wrap; gap:8px; }
.hcItem{ display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:5px 10px 5px 5px; border:1px solid var(--line); border-radius:var(--radius-pill); background:rgba(255,255,255,.02); }
.hcThumb{ width:26px; height:26px; border-radius:6px; background:#0c1016 center/cover no-repeat; flex:none; border:1px solid var(--line); }
.hcTitle{ font-size:12.5px; color:#d5dbe5; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; }

/* History */
.historyBody{ display:grid; gap:9px; }
.histRow{ display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel2); }
.histRow.undone{ opacity:.55; }
.histMain{ flex:1; min-width:0; }
.histAction{ font-weight:700; font-size:13.5px; color:var(--text); }
.histTarget{ font-weight:600; color:var(--muted); }
.histDetail{ font-size:12.5px; color:#c3ccda; margin-top:2px; overflow-wrap:anywhere; }
.histMeta{ font-size:11.5px; color:var(--faint); margin-top:3px; }
.histUndoneTag{ color:var(--gold); font-weight:700; }
.histRow .smallBtn{ flex:none; }

/* Schedule + A/B modals (reuse .metadataEditor overlay) */
.metadataPanel.narrow{ max-width:460px; }
.metadataThumbPreview.small{ height:120px; }
.abtestVariants{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.abtestVar span{ display:block; font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:6px; }
.abtestExisting{ margin:0 0 14px; }
.abRunning{ padding:12px 14px; border:1px solid rgba(227,196,127,.4); border-radius:var(--radius); background:rgba(227,196,127,.1); color:#ffe6b0; font-size:13px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
@media(max-width:640px){ .bulkActions{ margin-left:0; } .abtestVariants{ grid-template-columns:1fr; } .healthScore{ flex-direction:row; } }

/* ==========================================================================
   COMMUNITY — promotions & creators connect (social)
   ========================================================================== */
.communityRoot{ max-width:900px; }
.commTabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:18px; flex-wrap:wrap; }
.commTab{ background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); font-weight:800; font-size:14px; padding:10px 6px; margin-bottom:-1px; cursor:pointer; }
.commTab:hover{ color:var(--text); }
.commTab.on{ color:#fff; border-bottom-color:var(--red); }
.commLoad,.commEmpty{ color:var(--muted); text-align:center; padding:34px 16px; border:1px dashed var(--line2); border-radius:14px; font-size:13.5px; }
.commAv{ width:44px; height:44px; border-radius:12px; flex:none; background:#12161f center/cover no-repeat; display:grid; place-items:center; font-weight:900; color:var(--red2); border:1px solid var(--line2); font-size:15px; }
.commAv.sm{ width:34px; height:34px; border-radius:9px; font-size:12px; }
.commAv.lg{ width:64px; height:64px; border-radius:16px; font-size:18px; }
.commTypeBadge{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#8fb4ff; border:1px solid rgba(87,160,255,.4); border-radius:6px; padding:1px 6px; }
.commTypeBadge.cr{ color:#ff9aa6; border-color:rgba(255,90,110,.45); }
/* Composer */
.commComposer{ display:flex; gap:12px; padding:14px; border:1px solid var(--line2); border-radius:16px; background:var(--panel2); margin-bottom:14px; }
.commComposerMain{ flex:1; }
.commComposerMain textarea{ width:100%; min-height:52px; resize:vertical; background:#0b0f16; border:1px solid var(--line2); border-radius:11px; color:var(--text); padding:10px 12px; font:inherit; }
.commComposerFoot{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.commPhotoBtn{ cursor:pointer; font-size:13px; font-weight:700; color:var(--muted); border:1px solid var(--line2); border-radius:9px; padding:6px 11px; display:inline-flex; margin:0; }
.commScope{ display:inline-flex; gap:6px; margin-bottom:14px; }
.commScopeBtn{ background:rgba(255,255,255,.03); border:1px solid var(--line2); color:var(--muted); border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:700; cursor:pointer; }
.commScopeBtn.on{ background:var(--red); border-color:var(--red); color:#fff; }
/* Feed posts */
.commFeed{ display:grid; gap:12px; }
.commPost{ border:1px solid var(--line); border-radius:16px; padding:14px 16px; background:var(--panel2); }
.commPostHead{ display:flex; align-items:center; gap:10px; }
.commPostName{ font-weight:800; font-size:14px; cursor:pointer; }
.commPostTime{ font-size:11.5px; color:var(--faint); margin-top:2px; display:flex; gap:8px; align-items:center; }
.commKind{ text-transform:uppercase; letter-spacing:.05em; color:var(--gold); font-weight:700; }
.commDel{ margin-left:auto; background:none; border:none; color:var(--faint); cursor:pointer; font-size:14px; }
.commPostText{ margin-top:10px; font-size:14.5px; line-height:1.5; white-space:pre-wrap; }
.commPostImg img{ width:100%; border-radius:12px; margin-top:10px; }
.commPostFoot{ margin-top:10px; }
.commLike{ background:none; border:1px solid var(--line2); border-radius:999px; color:var(--muted); font-weight:700; font-size:12.5px; padding:5px 13px; cursor:pointer; }
.commLike.on{ color:#ff6a72; border-color:rgba(255,59,67,.5); background:rgba(255,59,67,.08); }
/* Discover */
.commSearch{ width:100%; margin-bottom:14px; }
.commTeamCard{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid rgba(227,196,127,.35); border-radius:16px; background:rgba(227,196,127,.07); margin-bottom:16px; }
.commTeamAvs{ display:flex; } .commTeamAvs .commAv{ margin-right:-10px; box-shadow:0 0 0 2px var(--panel); }
.commTeamMain{ flex:1; } .commTeamName{ font-weight:800; font-size:15px; }
.commGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.commDir{ border:1px solid var(--line); border-radius:16px; padding:16px 14px; background:var(--panel2); text-align:center; cursor:pointer; transition:border-color .12s, transform .12s; }
.commDir:hover{ border-color:var(--red); transform:translateY(-2px); }
.commDir .commAv{ margin:0 auto 10px; }
.commDirName{ font-weight:800; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.commDirMeta{ font-size:11.5px; color:var(--muted); margin:4px 0 12px; }
.commFollowBtn.following{ background:rgba(255,255,255,.04); border:1px solid var(--line2); color:var(--muted); }
/* Profile page */
.commBackTop{ background:none; border:none; color:var(--muted); font-weight:700; font-size:13.5px; cursor:pointer; margin-bottom:12px; }
.commProfile{ border:1px solid var(--line2); border-radius:18px; overflow:hidden; background:var(--panel2); }
.commBanner{ height:150px; background:linear-gradient(135deg,var(--portal-soft,rgba(255,46,58,.2)),rgba(10,12,18,.3)),#12161f center/cover no-repeat; }
.commProfHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:0 20px; margin-top:-40px; }
.commProfAv{ width:96px; height:96px; border-radius:22px; border:3px solid var(--panel2); background:#12161f center/cover no-repeat; display:grid; place-items:center; font-weight:900; font-size:28px; color:var(--red2); box-shadow:var(--shadow); }
.commProfActions{ display:flex; gap:8px; padding-bottom:8px; }
.commProfBtn{ height:38px; padding:0 16px; border-radius:11px; border:1px solid var(--line2); background:rgba(255,255,255,.04); color:var(--text); font-weight:800; font-size:13.5px; cursor:pointer; }
.commProfBtn.primary{ background:var(--red); border-color:var(--red); color:#fff; }
.commProfBody{ padding:14px 20px 22px; }
.commProfName{ font-size:24px; font-weight:900; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.commTop10{ font-size:12px; font-weight:800; color:var(--gold); border:1px solid rgba(227,196,127,.4); border-radius:999px; padding:3px 10px; }
.commProfBio{ color:var(--muted); font-size:14px; margin-top:8px; line-height:1.5; }
.commProfStats{ display:flex; gap:24px; margin:16px 0 20px; }
.commStat b{ font-size:20px; font-weight:900; } .commStat span{ display:block; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.commProfPostsHead{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:12px; }
/* Full-screen, theme-colored profile (--pt = the party's chosen theme color) */
.communityRoot.commProfileOpen{ max-width:1180px; }
.commProfileFull{ --ptSoft:rgba(255,255,255,.08); }
.commProfileFull .commBanner{ height:200px; background:linear-gradient(135deg, var(--ptSoft), rgba(10,12,18,.5)), #10141c center/cover no-repeat; }
.commProfileFull .commProfAv{ width:112px; height:112px; border:3px solid var(--panel2); box-shadow:0 0 0 2px var(--pt); color:var(--pt); }
.commProfileFull .commProfHead{ margin-top:-48px; }
.commProfileFull .commProfBtn.primary{ background:var(--pt); border-color:var(--pt); color:#fff; }
.commProfileFull .commProfName .commTypeBadge{ color:#fff; background:var(--pt); border-color:transparent; }
.commProfileFull .commTop10{ color:var(--pt); border-color:var(--pt); }
.commProfileFull .commProfBody{ padding:16px 26px 28px; }
.commProfileFull .commLike.on{ color:var(--pt); border-color:var(--pt); background:transparent; }
.commProfStats .commStat[data-ptab]{ cursor:pointer; }
.commProfStats .commStat[data-ptab]:hover b{ color:var(--pt); }
/* Profile sub-tabs */
.commProfTabs{ display:flex; gap:8px; border-bottom:1px solid var(--line); margin:18px 0 16px; }
.commProfTab{ background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); font-weight:800; font-size:14px; padding:9px 4px; margin-bottom:-1px; cursor:pointer; }
.commProfTab:hover{ color:var(--text); }
.commProfTab.on{ color:#fff; border-bottom-color:var(--pt); }
.commProfPane{ display:none; }
.commProfPane.on{ display:block; }
/* Followers / following lists */
.commConnList{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.commConnRow{ display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); cursor:pointer; }
.commConnRow:hover{ border-color:var(--pt); }
.commConnName{ font-weight:800; font-size:13.5px; }
.commConnType{ font-size:11.5px; color:var(--muted); }
@media(max-width:640px){ .commConnList{ grid-template-columns:1fr; } }
/* DMs */
.commDmWrap{ display:grid; grid-template-columns:280px 1fr; gap:14px; min-height:420px; }
.commDmList{ border:1px solid var(--line); border-radius:14px; overflow:auto; max-height:520px; }
.commDmRow{ display:flex; gap:10px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--line); cursor:pointer; }
.commDmRow:hover{ background:rgba(255,255,255,.02); }
.commDmMain{ min-width:0; } .commDmName{ font-weight:800; font-size:13.5px; display:flex; align-items:center; gap:6px; }
.commDmLast{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.commDot{ width:8px; height:8px; border-radius:50%; background:var(--red2); }
.commDmThread{ border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; }
.commDmHead{ padding:12px 16px; border-bottom:1px solid var(--line); font-weight:800; }
.commDmMsgs{ flex:1; overflow:auto; padding:14px 16px; display:flex; flex-direction:column; gap:8px; max-height:400px; }
.commMsg{ max-width:78%; align-self:flex-start; padding:9px 13px; border-radius:14px; background:#151b26; border:1px solid var(--line2); font-size:13.5px; }
.commMsg.mine{ align-self:flex-end; background:var(--red); border-color:var(--red); color:#fff; }
.commDmCompose{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.commDmCompose input{ flex:1; }
@media(max-width:640px){ .commDmWrap{ grid-template-columns:1fr; } .commProfStats{ gap:16px; } }

/* ===== Premium social-media profile ===== */
.commProfileFull{ border:1px solid var(--line2); border-radius:20px; overflow:hidden; background:linear-gradient(180deg,var(--panel2),var(--panel3,#0c1016)); box-shadow:0 30px 80px -40px #000; }
.commProfileFull .commBanner{ height:230px; position:relative; background:linear-gradient(140deg, var(--pt), rgba(8,10,16,.55) 78%), radial-gradient(120% 140% at 80% -10%, var(--ptSoft), transparent 60%), #0c1016; background-size:cover; background-position:center; }
.commProfileFull .commBanner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%, rgba(8,10,16,.65)); }
.commProfileFull .commProfHead{ position:relative; z-index:2; display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:0 28px; margin-top:-58px; }
.commProfileFull .commProfAv{ width:128px; height:128px; border-radius:26px; border:4px solid var(--panel2); background:#12161f center/cover no-repeat; display:grid; place-items:center; font-weight:900; font-size:34px; color:var(--pt); box-shadow:0 0 0 2px var(--pt), 0 18px 40px -18px #000; }
.commProfileFull .commProfActions{ display:flex; gap:9px; padding-bottom:12px; }
.commProfBtn{ height:40px; padding:0 20px; border-radius:12px; border:1px solid var(--line2); background:rgba(255,255,255,.05); color:var(--text); font-weight:800; font-size:14px; cursor:pointer; transition:filter .12s, transform .06s; }
.commProfBtn:hover{ filter:brightness(1.08); } .commProfBtn:active{ transform:translateY(1px); }
.commProfileFull .commProfBtn.primary{ background:var(--pt); border-color:var(--pt); color:#fff; box-shadow:0 10px 26px -12px var(--pt); }
.commProfileFull .commProfBody{ padding:16px 28px 30px; }
.commProfName{ font-size:27px; font-weight:900; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.commProfHandle{ color:var(--muted); font-size:13.5px; font-weight:600; margin-top:3px; }
.commTypeBadge.admin{ color:#1a1204; background:var(--gold); border-color:transparent; }
.commProfBio{ color:#d7deea; font-size:14.5px; margin-top:12px; line-height:1.55; max-width:640px; }
.commProfStats{ display:flex; gap:0; margin:18px 0 4px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.02); }
.commProfStats .commStat{ flex:1; text-align:center; padding:14px 8px; border-right:1px solid var(--line); }
.commProfStats .commStat:last-child{ border-right:none; }
.commProfStats .commStat b{ font-size:21px; font-weight:900; display:block; } .commProfStats .commStat span{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-top:3px; }
.commProfStats .commStat[data-ptab]{ cursor:pointer; } .commProfStats .commStat[data-ptab]:hover b{ color:var(--pt); }
.commProfTabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin:22px 0 18px; }
.commProfTab{ background:none; border:none; border-bottom:2px solid transparent; color:var(--muted); font-weight:800; font-size:14.5px; padding:11px 6px; margin-bottom:-1px; cursor:pointer; }
.commProfTab:hover{ color:var(--text); } .commProfTab.on{ color:#fff; border-bottom-color:var(--pt); }
.commProfileFull .commFeed{ display:grid; gap:14px; }
.commProfileFull .commPost{ border:1px solid var(--line2); border-radius:16px; padding:16px 18px; background:rgba(255,255,255,.025); transition:border-color .12s; }
.commProfileFull .commPost:hover{ border-color:var(--pt); }
.commProfileFull .commComposer{ border:1px solid var(--line2); border-radius:16px; background:rgba(255,255,255,.03); margin-bottom:16px; }
.commProfileFull .commComposer textarea{ min-height:64px; }
.commProfileFull .commComposerFoot .smallBtn, .commProfileFull #cpPostBtn{ background:var(--pt); color:#fff; border:none; }
.commPostImg img{ width:100%; height:auto; border-radius:12px; margin-top:10px; display:block; }
.commTop10{ font-size:12px; font-weight:800; color:var(--pt); border:1px solid var(--pt); border-radius:999px; padding:3px 11px; }

/* ===== ESPN-style premium leaderboard rows (shared by hub + master) ===== */
.lbEspnList{ display:flex; flex-direction:column; }
.lbEspn{ display:grid; grid-template-columns:34px 52px 1fr 30px; align-items:center; gap:13px; padding:11px 12px; border-radius:12px; cursor:pointer;
  border:1px solid transparent; border-bottom:1px solid var(--line); transition:background .12s, border-color .12s; }
.lbEspn:last-child{ border-bottom:1px solid transparent; }
.lbEspn:hover{ background:rgba(255,255,255,.035); border-color:var(--line2); }
.lbEspn.me{ background:var(--portal-soft,rgba(224,27,36,.1)); box-shadow:inset 3px 0 0 var(--portal,var(--red)); border-radius:10px; }
.lbEspnRank{ font-family:var(--fdisplay,inherit); font-size:22px; font-weight:900; text-align:center; color:var(--faint); font-variant-numeric:tabular-nums; }
.lbEspnRank.g{ color:#f5c542; text-shadow:0 0 16px rgba(245,197,66,.55); }
.lbEspnRank.s{ color:#d3d9e4; text-shadow:0 0 12px rgba(211,217,228,.4); }
.lbEspnRank.b{ color:#e08b4c; text-shadow:0 0 12px rgba(224,139,76,.4); }
.lbEspnThumb{ width:52px; height:34px; border-radius:7px; background:#0c1016 center/cover no-repeat; display:grid; place-items:center; font-weight:900; font-size:13px; color:var(--muted); border:1px solid var(--line2); overflow:hidden; }
.lbEspnMain{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.lbEspnName{ font-weight:800; font-size:14.5px; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lbEspnYou{ font-size:9.5px; font-weight:900; color:#fff; background:var(--portal,var(--red)); border-radius:4px; padding:1px 5px; margin-left:5px; vertical-align:middle; }
.lbEspnSub{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.lbEspnMove{ text-align:center; font-size:13px; }
.lbArrowUp{ color:#2fe08f; text-shadow:0 0 12px rgba(47,224,143,.75); font-weight:900; }
.lbArrowDown{ color:#ff5a63; text-shadow:0 0 12px rgba(255,90,99,.7); font-weight:900; }
.lbArrowSame{ color:var(--faint); }
/* Live Viewers tile — pulsing live dot */
#wpHub .wpStat.wpStatLive .wpStatLbl::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#ff3b43; box-shadow:0 0 8px #ff3b43; margin-right:6px; vertical-align:middle; animation:wpLivePulse 1.6s infinite; }
@keyframes wpLivePulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.analyticsProfileBtn{ background:rgba(255,255,255,.05); border:1px solid var(--line2); color:var(--text); border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.analyticsProfileBtn:hover{ border-color:var(--red); background:rgba(224,27,36,.1); }
.stats.stats5{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.statMove strong{ font-size:16px; }
.moveUp{ color:#3ee08f; font-weight:900; text-shadow:0 0 12px rgba(62,224,143,.6); }
.moveDown{ color:#ff5a63; font-weight:900; text-shadow:0 0 12px rgba(255,90,99,.55); }
.moveSame{ color:var(--muted); font-weight:800; }
/* Last-Move tile glows green (moved up) / red (moved down) so a promotion sees their direction at a glance. */
#wpHub .wpStat.wpMoveUp{ border:1px solid rgba(62,224,143,.55); background:radial-gradient(120% 120% at 50% 0%, rgba(62,224,143,.16), rgba(255,255,255,.02)); box-shadow:0 0 26px -8px rgba(62,224,143,.55), 0 0 0 1px rgba(62,224,143,.22) inset; }
#wpHub .wpStat.wpMoveUp .wpStatVal{ text-shadow:0 0 16px rgba(62,224,143,.6); }
#wpHub .wpStat.wpMoveDown{ border:1px solid rgba(255,90,99,.55); background:radial-gradient(120% 120% at 50% 0%, rgba(255,90,99,.16), rgba(255,255,255,.02)); box-shadow:0 0 26px -8px rgba(255,90,99,.55), 0 0 0 1px rgba(255,90,99,.22) inset; }
#wpHub .wpStat.wpMoveDown .wpStatVal{ text-shadow:0 0 16px rgba(255,90,99,.6); }
.analyticsCard.clickable{ cursor:pointer; transition:border-color .12s, transform .1s; }
.analyticsCard.clickable:hover{ border-color:var(--portal, var(--red)); transform:translateY(-1px); }
.ovActions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.ovActionBtn{ height:44px; padding:0 20px; border-radius:12px; border:none; font-weight:800; font-size:14px; cursor:pointer; color:var(--portal-ink,#fff); background:var(--portal,var(--red)); box-shadow:0 8px 22px -12px var(--portal-glow,rgba(224,27,36,.5)); }
.ovActionBtn.secondary{ background:rgba(255,255,255,.04); border:1px solid var(--line2); color:var(--text); box-shadow:none; }
.ovActionBtn:hover{ filter:brightness(1.06); }
.commAdminGrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:10px 0 20px; }
.commAdminCard{ text-align:center; border:1px solid var(--line); border-radius:14px; padding:14px 10px; background:var(--panel2); cursor:pointer; }
.commAdminCard:hover{ border-color:var(--gold); }
.commAdminCard .commAv{ margin:0 auto 8px; }
.commSectionHead{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:6px 0 10px; }

/* View-as / impersonate banner */
.impersonateBanner{ display:flex; align-items:center; gap:14px; justify-content:space-between; flex-wrap:wrap;
  margin:0 0 18px; padding:11px 16px; border-radius:var(--radius); font-size:13px; color:#0b0b0b; font-weight:700;
  background:linear-gradient(180deg,var(--gold),#cfa752); box-shadow:0 10px 30px -14px rgba(227,196,127,.5); }
.impersonateBanner strong{ font-weight:900; }
.impersonateBanner .smallBtn{ background:rgba(0,0,0,.82); color:#fff; border:none; }
body.impersonating .topbar{ box-shadow:inset 0 -2px 0 var(--gold); }

/* =======================================================================
   MOBILE APP SHELL — real mobile experience (drawer nav + sticky app bar),
   not a shrunk-down desktop page. Kicks in at phone/tablet widths (≤1000px).
   ======================================================================= */
.navScrim{ display:none; }
@media (max-width: 1000px){
  html, body{ overflow-x:hidden; }
  /* Off-canvas drawer: the sidebar slides in from the left over a dimmed page. */
  .sidebar{
    position:fixed; top:0; left:0; z-index:220;
    width:min(85vw, 320px); height:100vh; height:100dvh;
    padding:18px 14px calc(18px + env(safe-area-inset-bottom,0px));
    transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1);
    will-change:transform; overflow-y:auto;
    box-shadow:0 0 60px rgba(0,0,0,.62); border-right:1px solid var(--line);
  }
  body.navOpen .sidebar{ transform:none; }
  body.navOpen{ overflow:hidden; }             /* lock page scroll while drawer is open */
  /* On mobile the drawer transform controls visibility — a desktop "collapsed" state must not hide it. */
  body.sideCollapsed .sidebar{ display:flex; }
  body.sideCollapsed .shell{ grid-template-columns:1fr; }
  .navScrim{ display:block; position:fixed; inset:0; z-index:210;
    background:rgba(0,0,0,.5); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; transition:opacity .26s, visibility .26s; }
  body.navOpen .navScrim{ opacity:1; visibility:visible; }
  .nav{ gap:6px; }
  .navItem{ height:50px; font-size:15.5px; }   /* bigger tap targets */
  .brand .mark{ width:46px; height:46px; }

  /* Sticky, full-bleed mobile app bar */
  .main{ padding:14px; }
  .sideToggle{ display:grid; }
  .topbar{
    position:sticky; top:0; z-index:120;
    margin:-14px -14px 14px; padding:10px 14px;
    padding-top:max(10px, env(safe-area-inset-top,0px));
    background:rgba(8,9,12,.9); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line); border-radius:0;
    flex-wrap:wrap; gap:10px;
  }
  .topbar h2{ font-size:21px; margin-top:2px; }
  .pageKicker{ font-size:11px; }
  .topActions{ flex-wrap:wrap; gap:8px; width:100%; }
  .topActions .secondary, .topActions .smallBtn, #refreshBtn{ min-height:40px; }
  .compactSelect{ flex:1 1 auto; min-width:0; }
  .compactSelect select{ width:100%; }
  .statusPill, .pill{ order:-1; }

  /* Comfortable content: no fixed desktop widths, no side overflow */
  .loginWrap{ min-height:auto; padding:24px 0; }
  .loginCard{ padding:22px; border-radius:16px; }
  .loginCard h1{ font-size:24px; }
  .panel, .heroPanel, .wpTopCard, .wpCalCard, .analyticsCard{ padding:16px; }

  /* iOS: 16px inputs stop Safari from auto-zooming the page on focus */
  input, select, textarea{ font-size:16px; }

  /* Anything intrinsically wide scrolls inside its own box instead of the page */
  table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  pre{ overflow-x:auto; }
}
@media (max-width: 560px){
  .topbar h2{ font-size:19px; }
  .main{ padding:12px; }
  .topbar{ margin:-12px -12px 12px; }
  .brand .brandSub{ display:none; }
}

/* =======================================================================
   MOBILE CONTENT — premium spacing & sizing so the page reads as a mobile
   app, not desktop components crammed into a narrow column.
   ======================================================================= */
@media (max-width: 640px){
  /* --- App bar: title row, then a tidy full-width actions row --- */
  .topbar{ align-items:center; }
  .topLeft{ gap:11px; flex:1 1 auto; min-width:0; }
  .topLeft > div{ min-width:0; }
  .topbar h2{ font-size:20px; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topActions{ order:5; width:100%; margin-top:2px; gap:8px; align-items:stretch; }
  .topActions .secondary, .topActions .smallBtn, #refreshBtn, #viewAsBtn{ flex:1 1 auto; min-height:44px; border-radius:12px; }
  .compactSelect{ flex:1 1 100%; display:flex; flex-direction:column; gap:4px; font-size:11px; }
  #statusPill{ order:-1; align-self:center; }

  /* --- Generous cards: bigger radius + breathing room so nothing feels pinched --- */
  .panel, .heroPanel, .wpTopCard, .wpCalCard, .analyticsCard, #wpHub .wpHubHero,
  #wpHub .wpStat, #wpHub .wpNotifCard, #wpHub .wpNotepadCard, #wpHub .wpMsgQuickCard,
  #wpHub .wpMiniCalCard, #wpHub .wpRankCard, #wpHub .wpUpcomingCard{ border-radius:18px; }
  .panel, .heroPanel, .wpTopCard, .wpCalCard, .analyticsCard{ padding:18px; }
  .view.active > * + *{ margin-top:14px; }        /* vertical rhythm between stacked blocks */

  /* --- Primary action buttons: full-width, tall, easy to hit --- */
  .actions{ display:flex; flex-direction:column; gap:10px; }
  .actions > button{ width:100%; min-height:48px; font-size:15px; }
  .loginCard{ padding:24px 20px; }
  .loginCard h1{ font-size:23px; line-height:1.2; }
  .loginGrid{ gap:12px; }
  .loginCard input{ min-height:48px; }

  /* --- My WSN+ hero: centered premium profile header --- */
  #wpHub .wpHeroInner{ flex-direction:column; align-items:center; text-align:center; gap:14px; padding:26px 18px 20px; min-height:0; }
  #wpHub .wpHeroCover{ opacity:.36; }
  #wpHub .wpHeroAvatar{ width:92px; height:92px; border-radius:24px; font-size:30px; }
  #wpHub .wpHeroBody{ flex-basis:auto; order:2; width:100%; }
  #wpHub .wpHeroName{ font-size:30px; margin-bottom:9px; }
  #wpHub .wpHeroMeta{ justify-content:center; }
  #wpHub .wpHeroBadge{ display:flex; justify-content:center; }
  #wpHub .wpHeroActions{ order:3; width:100%; justify-content:center; gap:9px; flex-wrap:wrap; }
  #wpHub .wpHeroActions .wpHeroBtn{ flex:1 1 calc(50% - 5px); min-width:0; height:46px; font-size:13.5px; }

  /* --- Stat tiles: two big, legible premium tiles per row --- */
  #wpHub .wpStatStrip{ grid-template-columns:repeat(2,1fr); gap:11px; }
  #wpHub .wpStat{ padding:18px 10px; border-radius:16px; }
  #wpHub .wpStatVal{ font-size:28px; }
  #wpHub .wpStatLbl{ font-size:10px; }

  /* --- Section tabs scroll horizontally instead of wrapping into a mess --- */
  #wpHub .wpHubTabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-wrap:nowrap; }
  #wpHub .wpHubTabs::-webkit-scrollbar{ display:none; }
  #wpHub .wpHubTab{ flex:none; white-space:nowrap; }

  /* --- Leaderboard / rank rows: comfortable height --- */
  .lbEspn, #wpHub .wpRankRow{ padding-top:12px; padding-bottom:12px; }
}
@media (max-width: 380px){
  #wpHub .wpHeroActions .wpHeroBtn{ flex:1 1 100%; }   /* one button per row on the smallest phones */
}

/* ============================================================================
   WSN+ SUPPORT CHAT BUBBLE
   ============================================================================ */
.wpSupport{ position:fixed; right:20px; bottom:20px; z-index:400; }
.wpSupport.hidden{ display:none; }
.wpSupportFab{ width:60px; height:60px; border-radius:50%; border:none; cursor:pointer; position:relative;
  background:linear-gradient(180deg,var(--portal,#e01b24),var(--portal-2,#9d0f16)); color:#fff; font-size:26px;
  box-shadow:0 14px 34px -10px var(--portal-glow,rgba(224,27,36,.6)), 0 0 0 1px rgba(255,255,255,.08) inset;
  display:grid; place-items:center; transition:transform .14s ease, box-shadow .14s ease; }
.wpSupportFab:hover{ transform:translateY(-2px) scale(1.04); }
.wpSupport.isOpen .wpSupportFab{ display:none; }
.wpSupportFabDot{ position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:#3ee08f; border:2px solid #0b0e14; box-shadow:0 0 8px #3ee08f; }
.wpSupportFabDot.hidden{ display:none; }

.wpSupportPanel{ position:absolute; right:0; bottom:0; width:370px; max-width:calc(100vw - 32px); height:560px; max-height:calc(100vh - 40px);
  display:flex; flex-direction:column; overflow:hidden; border-radius:20px; border:1px solid var(--line2,#2a3342);
  background:linear-gradient(180deg,#12161f,#0b0e14); box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset; }
.wpSupportPanel[hidden]{ display:none; }
.wpSupportHead{ display:flex; align-items:center; gap:11px; padding:13px 14px; border-bottom:1px solid var(--line,#232b37);
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent); }
.wpSupportAvatar{ width:54px; height:54px; flex:none; border-radius:50%; background:#0a0c12 center/cover no-repeat;
  display:grid; place-items:center; font-weight:800; color:#fff; font-size:16px; border:1px solid var(--line2,#2a3342);
  box-shadow:0 0 0 2px var(--portal-line,rgba(224,27,36,.4)); }
.wpSupportAvatar.hasPhoto span{ display:none; }
.wpSupportWho{ flex:1; min-width:0; }
.wpSupportName{ font-weight:800; font-size:14.5px; color:#fff; }
.wpSupportStatus{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted,#97a1b2); margin-top:1px; }
.wpSupportOnline{ width:7px; height:7px; border-radius:50%; background:#3ee08f; box-shadow:0 0 7px #3ee08f; }
.wpSupportClose{ width:32px; height:32px; flex:none; border-radius:9px; border:1px solid var(--line2,#2a3342); background:rgba(255,255,255,.03); color:var(--muted,#97a1b2); cursor:pointer; font-size:14px; }
.wpSupportClose:hover{ color:#fff; border-color:var(--portal-line,rgba(224,27,36,.5)); }

.wpSupportBody{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; }
.wpSupMsg{ display:flex; max-width:100%; }
.wpSupMsg.wpSupThem{ justify-content:flex-start; }
.wpSupMsg.wpSupMe{ justify-content:flex-end; }
.wpSupBubble{ max-width:80%; padding:10px 13px; border-radius:15px; font-size:14px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.wpSupThem .wpSupBubble{ background:#1b212c; color:#eef1f6; border:1px solid var(--line,#232b37); border-bottom-left-radius:5px; }
.wpSupMe .wpSupBubble{ background:linear-gradient(180deg,var(--portal,#e01b24),var(--portal-2,#9d0f16)); color:#fff; border-bottom-right-radius:5px; }
.wpSupDots{ display:flex; gap:4px; align-items:center; }
.wpSupDots span{ width:7px; height:7px; border-radius:50%; background:var(--muted,#97a1b2); opacity:.5; animation:wpSupBlink 1.2s infinite; }
.wpSupDots span:nth-child(2){ animation-delay:.2s; } .wpSupDots span:nth-child(3){ animation-delay:.4s; }
@keyframes wpSupBlink{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-2px); } }

.wpSupportForm{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line,#232b37); background:rgba(255,255,255,.02); }
.wpSupportInput{ flex:1; min-width:0; height:44px; border-radius:12px; border:1px solid var(--line2,#2a3342); background:#0a0c12; color:#fff; padding:0 13px; font-size:15px; }
.wpSupportInput:focus{ outline:none; border-color:var(--portal,#e01b24); box-shadow:0 0 0 3px var(--portal-soft,rgba(224,27,36,.16)); }
.wpSupportSend{ width:44px; height:44px; flex:none; border-radius:12px; border:none; cursor:pointer; font-size:16px;
  background:linear-gradient(180deg,var(--portal,#e01b24),var(--portal-2,#9d0f16)); color:#fff; box-shadow:0 8px 20px -8px var(--portal-glow,rgba(224,27,36,.6)); }
.wpSupportSend:disabled{ opacity:.55; cursor:default; }
/* Small upload button + preview + in-bubble image */
.wpSupportAttach{ width:34px; height:44px; flex:none; border:none; background:none; cursor:pointer; font-size:22px; line-height:44px;
  color:var(--muted,#97a1b2); padding:0; opacity:.75; }
.wpSupportAttach:hover{ color:var(--portal,#e01b24); opacity:1; }
/* Post to WSN+ Socials (portal Community tab) */
.wsnSocWrap{ padding:4px 2px; }
.wsnSocHead{ margin:0 0 12px; font-size:17px; }
.wsnSocForm{ background:var(--card,#12161f); border:1px solid var(--line,#232b37); border-radius:14px; padding:14px; }
.wsnSocIntro{ font-size:13px; color:var(--muted,#97a1b2); line-height:1.5; margin-bottom:10px; }
.wsnSocForm textarea{ width:100%; min-height:90px; resize:vertical; border-radius:10px; border:1px solid var(--line2,#2a3342); background:#0a0c12; color:#fff; padding:10px 12px; font:inherit; font-size:14px; }
.wsnSocFoot{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.wsnSocSub{ margin:18px 0 8px; font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--muted,#97a1b2); }
.wsnSocList{ display:flex; flex-direction:column; gap:8px; }
.wsnSocItem{ display:flex; align-items:center; gap:10px; background:var(--card,#12161f); border:1px solid var(--line,#232b37); border-radius:11px; padding:9px 12px; }
.wsnSocCap{ flex:1; min-width:0; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wsnSocStatus{ flex:none; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:2px 9px; border-radius:999px; border:1px solid var(--line2,#2a3342); color:var(--muted,#97a1b2); }
.wsnSocStatus.s-pending{ color:#fff; background:rgba(224,27,36,.85); border-color:transparent; }
.wsnSocStatus.s-approved,.wsnSocStatus.s-scheduled,.wsnSocStatus.s-published{ color:#0b0e14; background:#3ee08f; border-color:#3ee08f; }
/* How am I doing? star rating */
.wpSupRate{ display:flex; align-items:center; gap:8px; padding:8px 12px 0; flex-wrap:wrap; }
.wpSupRateLabel{ font-size:12.5px; color:var(--muted,#97a1b2); font-weight:600; }
.wpSupStars{ display:inline-flex; gap:2px; }
.wpSupStar{ border:none; background:none; cursor:pointer; font-size:19px; line-height:1; padding:0 1px; color:#3a4353; transition:color .12s; }
.wpSupStar:hover, .wpSupStar.on{ color:#ffc53d; }
.wpSupRateThanks{ font-size:12px; color:#3ee08f; font-weight:700; }
.wpSupportPreview{ position:relative; display:inline-block; margin:0 12px 8px; }
.wpSupportPreview img{ max-width:120px; max-height:90px; border-radius:10px; border:1px solid var(--line2,#2a3342); display:block; }
.wpSupportPreview button{ position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; border:none; cursor:pointer;
  background:#0a0c12; color:#fff; font-size:12px; line-height:22px; padding:0; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.wpSupImg{ max-width:100%; border-radius:10px; display:block; }
.wpSupText{ margin-top:6px; }
.wpSupBubble .wpSupImg + .wpSupText:empty{ display:none; }

@media (max-width:560px){
  .wpSupport{ right:14px; bottom:14px; }
  .wpSupportFab{ width:54px; height:54px; font-size:23px; }
  .wpSupportPanel{ width:calc(100vw - 20px); height:calc(100dvh - 90px); right:-4px; }
}

/* Support chat: End Chat button + centered system lines */
.wpSupportEnd{ flex:none; height:30px; padding:0 11px; border-radius:9px; cursor:pointer; font-size:12px; font-weight:700;
  border:1px solid var(--line2,#2a3342); background:rgba(255,255,255,.03); color:var(--muted,#97a1b2); }
.wpSupportEnd:hover{ color:#fff; border-color:var(--portal-line,rgba(224,27,36,.5)); background:rgba(224,27,36,.12); }
.wpSupSystem{ align-self:center; text-align:center; max-width:88%; margin:4px auto; padding:6px 12px; border-radius:999px;
  font-size:11.5px; color:var(--muted,#97a1b2); background:rgba(255,255,255,.04); border:1px solid var(--line,#232b37); }
.wpSupportInput:disabled{ opacity:.6; }

/* Customer Support contacts in Discover: On Duty / Off duty mini pills */
.dutyPillMini{ display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.03em; color:#07130c; background:linear-gradient(180deg,#54f295,#20c06d); border-radius:999px; padding:1px 8px; box-shadow:0 0 10px -1px rgba(62,224,143,.85); animation:wpDutyGlow 2s ease-in-out infinite; }
@keyframes wpDutyGlow{ 0%,100%{ box-shadow:0 0 7px -2px rgba(62,224,143,.7);} 50%{ box-shadow:0 0 14px 0 rgba(62,224,143,.95);} }
.offPillMini{ display:inline-block; font-size:9.5px; font-weight:700; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line2); border-radius:999px; padding:1px 8px; }

/* Customer Support strip in the main Messages tab */
.messagesSupport{ margin:0 0 14px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.03),transparent); }
.messagesSupport.hidden{ display:none; }
.msSupHead{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px; }
.msSupRow{ display:flex; gap:10px; flex-wrap:wrap; }
.msSupCard{ display:flex; align-items:center; gap:9px; padding:8px 12px 8px 8px; border-radius:999px; border:1px solid var(--line2); background:var(--panel2); color:var(--text); cursor:pointer; font:inherit; font-weight:700; font-size:13px; }
.msSupCard:hover{ border-color:var(--portal-line,rgba(224,27,36,.5)); }
.msSupAv{ width:34px; height:34px; border-radius:50%; flex:none; background:#0a0c12 center/cover no-repeat; display:grid; place-items:center; font-weight:800; font-size:13px; border:1px solid var(--line2); }
.msSupName{ margin-right:2px; }

/* ===== Go Live — live event stream (FAST Channel page) ===== */
.liveDot{ display:inline-block; width:11px; height:11px; border-radius:50%; vertical-align:middle; margin-right:6px; }
.liveDotOff{ background:#6b7280; box-shadow:0 0 0 3px rgba(107,114,128,.18); }
.liveDotOn{ background:#ef4444; box-shadow:0 0 0 0 rgba(239,68,68,.6); animation:liveThrob 1.4s infinite; }
@keyframes liveThrob{ 0%{ box-shadow:0 0 0 0 rgba(239,68,68,.55);} 70%{ box-shadow:0 0 0 9px rgba(239,68,68,0);} 100%{ box-shadow:0 0 0 0 rgba(239,68,68,0);} }
.liveStatusPill{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px; font-weight:800; font-size:13px; border:1px solid var(--line2); }
.liveStatusPill.on{ color:#fecaca; border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.12); }
.liveStatusPill.off{ color:#cbd5e1; background:var(--panel2); }
.keyRow{ margin:12px 0; }
.keyRow label{ display:block; font-weight:700; font-size:13px; margin-bottom:5px; opacity:.9; }
.keyField{ display:flex; gap:8px; align-items:stretch; }
.keyField input{ flex:1; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; padding:11px 12px; border-radius:9px; border:1px solid var(--line2); background:var(--panel2); color:var(--text); }
.keyField .copyBtn{ flex:none; padding:0 15px; border-radius:9px; border:1px solid var(--line2); background:var(--panel2); color:var(--text); font-weight:800; cursor:pointer; }
.keyField .copyBtn:hover{ border-color:var(--portal-line,rgba(88,140,255,.5)); }
.keyField .copyBtn.copied{ color:#4ade80; border-color:#4ade80; }
.liveActions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.liveBtnGo{ background:#ef4444; border:none; color:#fff; font-weight:900; padding:12px 22px; border-radius:10px; cursor:pointer; font-size:15px; }
.liveBtnGo:hover{ filter:brightness(1.08); }
.liveBtnStop{ background:transparent; border:1px solid rgba(239,68,68,.55); color:#fecaca; font-weight:800; padding:12px 22px; border-radius:10px; cursor:pointer; font-size:15px; }
.liveBtnStop:hover{ background:rgba(239,68,68,.12); }
.liveSetupCards{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
@media(max-width:720px){ .liveSetupCards{ grid-template-columns:1fr; } }
.setupCard{ background:var(--panel2); border:1px solid var(--line2); border-radius:11px; padding:14px 15px; line-height:1.5; }
.setupCard h4{ margin:0 0 7px; font-size:14px; }
.setupCard ol{ margin:0; padding-left:18px; font-size:13.5px; opacity:.9; }
.setupCard code{ background:rgba(255,255,255,.06); padding:1px 5px; border-radius:5px; font-size:12.5px; }
.liveNote{ background:rgba(88,140,255,.10); border:1px solid rgba(88,140,255,.35); border-radius:10px; padding:13px 15px; line-height:1.5; font-size:13.5px; margin-top:6px; }
.liveOffline{ text-align:center; padding:8px 4px; }

/* ===== Go Live mode chooser (Manual / Automatic) ===== */
.liveModeChooser{ margin:2px 0 16px; }
.liveModeHead{ font-weight:800; font-size:14px; margin-bottom:8px; opacity:.9; }
.liveModeOpts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:620px){ .liveModeOpts{ grid-template-columns:1fr; } }
.liveModeBtn{ display:flex; flex-direction:column; gap:5px; text-align:left; padding:13px 15px; border-radius:11px; border:1.5px solid var(--line2); background:var(--panel2); color:var(--text); cursor:pointer; font:inherit; transition:border-color .15s,background .15s; }
.liveModeBtn:hover{ border-color:rgba(88,140,255,.5); }
.liveModeBtn.on{ border-color:#588cff; background:rgba(88,140,255,.12); box-shadow:0 0 0 1px #588cff inset; }
.liveModeTitle{ font-weight:800; font-size:15px; }
.liveModeDesc{ font-size:12.5px; opacity:.82; line-height:1.4; }
.liveBtnGo.secondaryGo{ background:transparent; border:1px solid rgba(239,68,68,.55); color:#fecaca; }
.liveBtnGo.secondaryGo:hover{ background:rgba(239,68,68,.12); filter:none; }

/* ============================================================
   Go Live — PREMIUM broadcast console (FAST Channel page)
   ============================================================ */
#liveEventPanel{ position:relative; overflow:hidden; }
#liveEventBody{ margin-top:4px; }

/* Hero status band */
.lvHero{ position:relative; overflow:hidden; border-radius:18px; padding:26px 24px; margin-bottom:22px;
  border:1px solid var(--line2); background:linear-gradient(155deg, rgba(30,36,48,.92), rgba(14,18,26,.94)); }
.lvHeroGlow{ position:absolute; top:-120px; left:-60px; width:340px; height:280px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,59,67,.30), transparent 70%); filter:blur(6px); }
.lvHeroReady .lvHeroGlow{ background:radial-gradient(closest-side, rgba(74,222,128,.20), transparent 70%); }
.lvHeroLive{ border-color:rgba(255,59,67,.55); background:linear-gradient(155deg, rgba(74,20,26,.95), rgba(24,12,16,.96)); }
.lvHeroLive .lvHeroGlow{ background:radial-gradient(closest-side, rgba(255,59,67,.5), transparent 70%); }
.lvHeroSetup{ text-align:center; padding:38px 24px; }
.lvHeroIcon{ font-size:42px; margin-bottom:10px; filter:drop-shadow(0 6px 16px rgba(255,59,67,.4)); }
.lvHeroTitle{ font-size:24px; font-weight:900; letter-spacing:-.02em; margin-bottom:8px; }
.lvHeroSub{ color:var(--muted); font-size:14.5px; line-height:1.55; max-width:540px; margin:0 auto 20px; }
.lvStatusRow{ position:relative; display:flex; align-items:center; gap:15px; margin-bottom:18px; }
.lvStatusDot{ width:16px; height:16px; border-radius:50%; background:#6b7280; flex:none; }
.lvStatusDot.live{ background:var(--red2); box-shadow:0 0 0 0 rgba(255,59,67,.6); animation:lvThrob 1.5s infinite; }
@keyframes lvThrob{ 0%{box-shadow:0 0 0 0 rgba(255,59,67,.55);}70%{box-shadow:0 0 0 13px rgba(255,59,67,0);}100%{box-shadow:0 0 0 0 rgba(255,59,67,0);} }
.lvStatusTitle{ font-size:21px; font-weight:900; letter-spacing:-.01em; }
.lvStatusSub{ color:var(--muted); font-size:13.5px; margin-top:3px; }
.lvAutoHint{ position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:700; color:#ffd7d9; font-size:14px; }
.lvOverride{ background:none; border:none; color:var(--red2); text-decoration:underline; cursor:pointer; font:inherit; font-weight:700; padding:0; }

/* Sections + numbered steps */
.lvSection{ margin-bottom:24px; }
.lvSecHead{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:15.5px; margin-bottom:13px; letter-spacing:-.01em; }
.lvStep{ display:grid; place-items:center; width:27px; height:27px; border-radius:50%; flex:none; color:#fff;
  font-size:14px; font-weight:900; background:linear-gradient(160deg, var(--red2), var(--red)); box-shadow:0 4px 12px rgba(224,27,36,.45); }

/* Mode chooser */
.lvModes{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
@media(max-width:640px){ .lvModes{ grid-template-columns:1fr; } }
.lvMode{ position:relative; text-align:left; padding:17px 17px 16px; border-radius:15px; cursor:pointer; font:inherit; color:var(--text);
  border:1.5px solid var(--line2); background:var(--panel2); transition:transform .15s, border-color .15s, box-shadow .15s;
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"icon name" "desc desc"; gap:2px 13px; }
.lvMode:hover{ border-color:rgba(255,59,67,.5); transform:translateY(-2px); }
.lvMode.on{ border-color:var(--red2); background:linear-gradient(155deg, rgba(255,59,67,.14), rgba(224,27,36,.05));
  box-shadow:0 0 0 1px var(--red2) inset, 0 10px 26px rgba(224,27,36,.18); }
.lvModeIcon{ grid-area:icon; font-size:23px; align-self:center; }
.lvModeName{ grid-area:name; align-self:center; font-weight:800; font-size:16px; }
.lvModeDesc{ grid-area:desc; color:var(--muted); font-size:12.5px; line-height:1.5; margin-top:7px; }
.lvModeCheck{ position:absolute; top:15px; right:15px; width:21px; height:21px; border-radius:50%; border:2px solid var(--line2); transition:.15s; }
.lvMode.on .lvModeCheck{ border-color:var(--red2); background:var(--red2); }
.lvMode.on .lvModeCheck::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:900; }

/* Connection card */
.lvConn{ background:var(--panel2); border:1px solid var(--line2); border-radius:16px; padding:18px; display:grid; gap:15px; }
.lvField label{ display:block; font-weight:700; font-size:13px; margin-bottom:7px; }
.lvHintTxt{ font-weight:500; color:var(--muted); font-size:12px; }
.lvInput{ display:flex; gap:9px; }
.lvInput input{ flex:1; min-width:0; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; padding:13px 14px;
  border-radius:11px; border:1px solid var(--line2); background:var(--bg); color:var(--text); transition:.15s; }
.lvInput input:focus{ outline:none; border-color:var(--red2); box-shadow:0 0 0 3px rgba(255,59,67,.18); }
.lvCopy{ flex:none; padding:0 17px; border-radius:11px; border:1px solid var(--line2); background:var(--panel); color:var(--text);
  font-weight:800; font-size:14px; cursor:pointer; transition:.15s; }
.lvCopy:hover{ border-color:var(--red2); color:#fff; }
.lvCopy.copied{ color:#4ade80; border-color:#4ade80; }
.lvCopy.lvGhost{ background:transparent; }

/* Encoder cards */
.lvEncoders{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }
@media(max-width:640px){ .lvEncoders{ grid-template-columns:1fr; } }
.lvEncoder{ background:var(--panel2); border:1px solid var(--line2); border-radius:16px; padding:17px 18px; }
.lvEncoderTop{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:15px; margin-bottom:13px; }
.lvEncoderIcon{ font-size:20px; }
.lvSteps{ margin:0; padding:0; list-style:none; counter-reset:lvs; display:grid; gap:10px; }
.lvSteps li{ counter-increment:lvs; position:relative; padding-left:31px; font-size:13.5px; line-height:1.45; color:var(--text); opacity:.94; }
.lvSteps li::before{ content:counter(lvs); position:absolute; left:0; top:-1px; width:22px; height:22px; border-radius:50%;
  background:rgba(255,59,67,.16); color:#ff9aa0; display:grid; place-items:center; font-size:12px; font-weight:800; }
.lvSteps code{ background:rgba(255,255,255,.08); padding:1px 6px; border-radius:6px; font-size:12.5px; }

/* Buttons */
.lvBtn{ font:inherit; font-weight:800; cursor:pointer; border-radius:13px; padding:12px 22px; border:1px solid var(--line2);
  background:var(--panel2); color:var(--text); transition:transform .15s, box-shadow .15s, border-color .15s; }
.lvBtnLg{ padding:15px 32px; font-size:16px; font-weight:900; letter-spacing:.01em; }
.lvBtnPrimary{ border:none; color:#fff; background:linear-gradient(160deg, var(--red2), var(--red)); box-shadow:0 12px 28px rgba(224,27,36,.42); }
.lvBtnPrimary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(224,27,36,.52); }
.lvBtnStop{ border:none; color:#fff; background:linear-gradient(160deg, #556074, #363f4f); box-shadow:0 10px 24px rgba(0,0,0,.4); }
.lvBtnStop:hover{ transform:translateY(-2px); }
.lvBtnGhost{ background:transparent; }
.lvBtnGhost:hover{ border-color:var(--red2); color:#fff; }

/* Footer note */
.lvFootRow{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:17px 18px; border-radius:15px; background:rgba(255,59,67,.06); border:1px solid rgba(255,59,67,.2); }
.lvFootNote{ flex:1; min-width:230px; font-size:13px; line-height:1.55; color:var(--text); opacity:.92; }

/* Override the portal's global button{height:40px} for the multi-line Go Live controls */
.lvMode, .lvBtn, .lvCopy, .lvOverride{ height:auto !important; min-height:0; }
.lvInput{ align-items:stretch; }

/* ============================================================================
   LANDING SITE (signed-out promotionportal.wsnplus.tv) + login/request modals
   2026-09-29. Full marketing website; portal chrome hidden while logged out.
   ============================================================================ */
body.loggedOut .sidebar,
body.loggedOut #logoutBtn,
body.loggedOut .navScrim { display:none !important; }
body.loggedOut .shell { grid-template-columns:1fr !important; display:block !important; }
body.loggedOut .main { padding:0 !important; min-width:0; }
body.loggedOut { overflow-x:hidden; }
body.lModalOpen { overflow:hidden; }

.landing{ display:block; color:var(--text); }
.landing .lEyebrow{ color:var(--portal); font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }

/* ---- top nav ---- */
.lnav{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:18px;
  padding:16px clamp(18px,5vw,56px); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:linear-gradient(180deg, rgba(6,7,10,.86), rgba(6,7,10,.5)); border-bottom:1px solid var(--line); }
.lnavBrand{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:16px; }
.lnavMark{ display:inline-grid; place-items:center; width:40px; height:40px; border-radius:11px; color:#fff; font-weight:900; font-size:15px; font-family:var(--fdisplay); letter-spacing:.02em; background:linear-gradient(150deg,var(--portal),var(--portal-2)); box-shadow:0 10px 26px -8px var(--portal-glow); }
.lnavName{ opacity:.92; }
.lnavLinks{ display:flex; gap:6px; margin-left:auto; }
.lnavGhost{ background:transparent !important; border:none !important; box-shadow:none !important; color:var(--muted) !important; font-weight:700; padding:8px 12px; border-radius:9px; height:auto !important; }
.lnavGhost:hover{ color:#fff !important; background:rgba(255,255,255,.06) !important; filter:none; }
.lnavLogin{ height:auto !important; padding:11px 20px; border-radius:11px; font-weight:800; }
@media(max-width:820px){ .lnavLinks{ display:none; } .lnavLogin{ margin-left:auto; } }

/* ---- hero ---- */
.lHero{ position:relative; overflow:hidden; padding:clamp(56px,11vw,120px) clamp(18px,5vw,56px) clamp(50px,8vw,90px); text-align:center; }
.lHeroGlow{ position:absolute; inset:-30% -10% auto -10%; height:640px; pointer-events:none;
  background:radial-gradient(720px 460px at 50% 0%, var(--portal-glow-soft), transparent 62%),
            radial-gradient(560px 420px at 18% 30%, rgba(227,196,127,.06), transparent 60%); filter:blur(6px); }
.lHeroInner{ position:relative; max-width:900px; margin:0 auto; }
.lHeroTitle{ font-family:var(--fdisplay); font-weight:400; letter-spacing:.01em; line-height:.98;
  font-size:clamp(44px,8vw,86px); margin:16px 0 18px;
  background:linear-gradient(180deg,#fff,#c3c8d2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lHeroSub{ color:var(--muted); font-size:clamp(15px,2.1vw,19px); line-height:1.6; max-width:680px; margin:0 auto 30px; }
.lHeroCtas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center; }
.lHeroCtasCenter{ justify-content:center; }
.lCtaPrimary{ height:auto !important; padding:16px 32px; font-size:16px; font-weight:800; border-radius:13px;
  box-shadow:0 14px 34px -10px var(--portal-glow), 0 1px 0 rgba(255,255,255,.14) inset; }
.lCtaPrimary:hover{ transform:translateY(-2px); }
.lCtaSecondary{ height:auto !important; padding:16px 26px; font-size:15px; font-weight:700; border-radius:13px;
  background:rgba(255,255,255,.05) !important; border:1px solid var(--line2) !important; color:#fff !important; box-shadow:none !important; }
.lCtaSecondary:hover{ background:rgba(255,255,255,.09) !important; border-color:var(--portal-line) !important; filter:none; }
.lHeroBadges{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
.lBadge{ padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--muted); font-weight:700; font-size:13px; }

/* ---- sections ---- */
.lSection{ padding:clamp(48px,7vw,84px) clamp(18px,5vw,56px); max-width:1180px; margin:0 auto; }
.lSectionAlt{ max-width:none; background:linear-gradient(180deg, rgba(255,255,255,.018), transparent); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lSectionAlt > *{ max-width:1180px; margin-left:auto; margin-right:auto; }
.lSecHead{ text-align:center; max-width:760px; margin:0 auto 34px; }
.lSecHead h2, .lAppCopy h2, .lFinalCta h2{ font-family:var(--fdisplay); font-weight:400; letter-spacing:.01em; font-size:clamp(28px,4.4vw,46px); line-height:1.05; margin:12px 0 0; }
.lLead{ text-align:center; max-width:780px; margin:0 auto 34px; color:var(--muted); font-size:clamp(15px,2vw,18px); line-height:1.65; }

.lMissionGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.lMissionCard{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; }
.lMcNum{ font-family:var(--fdisplay); font-size:34px; color:var(--portal); opacity:.9; }
.lMissionCard h3{ margin:8px 0 8px; font-size:19px; }
.lMissionCard p{ color:var(--muted); line-height:1.55; margin:0; }

.lPerksGrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.lPerk{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; transition:transform .16s var(--ease), border-color .16s var(--ease), box-shadow .18s var(--ease); }
.lPerk:hover{ transform:translateY(-3px); border-color:var(--portal-line); box-shadow:0 24px 50px -26px rgba(0,0,0,.8), 0 0 34px -16px var(--portal-glow); }
.lPerkIco{ font-size:30px; }
.lPerk h3{ margin:12px 0 7px; font-size:17px; }
.lPerk p{ color:var(--muted); line-height:1.5; margin:0; font-size:14px; }

/* ---- app section ---- */
.lAppWrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; max-width:1180px; margin:0 auto; }
.lAppList{ margin:18px 0 0; padding:0; list-style:none; display:grid; gap:11px; }
.lAppList li{ position:relative; padding-left:30px; color:var(--muted); font-size:15px; line-height:1.5; }
.lAppList li::before{ content:"\2713"; position:absolute; left:0; top:0; width:21px; height:21px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:900; color:#fff; background:linear-gradient(150deg,var(--portal),var(--portal-2)); }
.lAppArt{ display:grid; place-items:center; }
.lAppScreens{ position:relative; width:100%; max-width:420px; aspect-ratio:4/3; }
.lScreenTv{ position:absolute; inset:0 20px 30px 0; border-radius:18px; background:linear-gradient(160deg,#1a1f2b,#0d1017); border:1px solid var(--line2); display:grid; place-items:center; gap:8px; font-size:52px; box-shadow:0 40px 80px -30px rgba(0,0,0,.9), 0 0 60px -30px var(--portal-glow); }
.lScreenTv span, .lScreenPhone span{ font-size:14px; color:var(--muted); font-weight:700; }
.lScreenPhone{ position:absolute; right:0; bottom:0; width:120px; height:180px; border-radius:20px; background:linear-gradient(160deg,#232838,#0d1017); border:1px solid var(--line2); display:grid; place-items:center; gap:6px; font-size:30px; box-shadow:0 30px 60px -24px rgba(0,0,0,.9); }

/* ---- steps ---- */
.lSteps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.lStep{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 24px; }
.lStepNo{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-family:var(--fdisplay); font-size:24px; color:#fff; background:linear-gradient(150deg,var(--portal),var(--portal-2)); box-shadow:0 12px 26px -8px var(--portal-glow); }
.lStep h3{ margin:14px 0 8px; font-size:19px; }
.lStep p{ color:var(--muted); line-height:1.55; margin:0; }

/* ---- final cta + footer ---- */
.lFinalCta{ position:relative; overflow:hidden; text-align:center; padding:clamp(56px,9vw,100px) clamp(18px,5vw,56px); }
.lFinalGlow{ position:absolute; inset:auto -10% -40% -10%; height:520px; pointer-events:none; background:radial-gradient(640px 420px at 50% 100%, var(--portal-glow-soft), transparent 62%); }
.lFinalCta p{ color:var(--muted); max-width:600px; margin:12px auto 26px; font-size:16px; line-height:1.6; position:relative; }
.lFinalCta h2{ position:relative; }
.lFooter{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:26px clamp(18px,5vw,56px); border-top:1px solid var(--line); color:var(--muted); }
.lFootBrand{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--text); }
.lFootNote{ font-size:13.5px; }

@media(max-width:900px){ .lMissionGrid,.lSteps{ grid-template-columns:1fr; } .lPerksGrid{ grid-template-columns:1fr 1fr; } .lAppWrap{ grid-template-columns:1fr; } .lAppArt{ order:-1; } }
@media(max-width:560px){ .lPerksGrid{ grid-template-columns:1fr; } }

/* ---- modals (login + request) ---- */
.lModal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; }
.lModal.hidden{ display:none; }
.lModalScrim{ position:absolute; inset:0; background:rgba(3,4,7,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.lModalCard{ position:relative; z-index:1; width:min(460px,100%); max-height:92vh; overflow:auto;
  background:linear-gradient(180deg, rgba(26,27,32,.98), rgba(14,14,17,.99)); border:1px solid var(--line2); border-radius:22px;
  padding:30px 28px; box-shadow:0 44px 120px -30px rgba(0,0,0,.95), 0 0 70px -34px var(--portal-glow);
  animation:lModalIn .22s var(--ease); }
@keyframes lModalIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.lModalClose{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.06) !important; border:1px solid var(--line) !important; color:var(--muted) !important; box-shadow:none !important; font-size:14px; display:grid; place-items:center; padding:0; height:34px !important; }
.lModalClose:hover{ color:#fff !important; background:rgba(255,255,255,.12) !important; filter:none; }
.lModalMark{ display:inline-grid; place-items:center; width:46px; height:46px; border-radius:13px; color:#fff; font-family:var(--fdisplay); font-weight:900; margin-bottom:12px; background:linear-gradient(150deg,var(--portal),var(--portal-2)); box-shadow:0 12px 28px -8px var(--portal-glow); }
.lModalTitle{ font-family:var(--fdisplay); font-weight:400; font-size:30px; margin:8px 0 6px; }
.lModalSub{ color:var(--muted); font-size:14px; line-height:1.5; margin:0 0 18px; }
.lField{ display:block; font-weight:600; font-size:12.5px; color:var(--muted); margin-bottom:14px; }
.lField input, .lField textarea{ display:block; width:100%; margin-top:6px; padding:13px 14px; border-radius:11px; background:rgba(0,0,0,.4); border:1px solid var(--line2); color:var(--text); font-size:15px; height:auto; }
.lField2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:460px){ .lField2{ grid-template-columns:1fr; } }
.lModalActions{ display:flex; gap:10px; margin-top:4px; }
.lModalActions button{ flex:1; height:auto !important; padding:14px 20px; font-weight:800; border-radius:12px; }
.lModalAlt{ margin-top:16px; text-align:center; color:var(--muted); font-size:13.5px; }
.lLinkBtn{ background:none !important; border:none !important; box-shadow:none !important; color:var(--portal) !important; font-weight:800; padding:0 !important; height:auto !important; }
.lLinkBtn:hover{ filter:none; text-decoration:underline; }
.lHoneypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

/* ============================================================================
   LANDING V2 + RED/SILVER/WHITE/BLACK THEME + SHINE (2026-09-29)
   Overrides the earlier landing block; appended last so it wins the cascade.
   Real imagery, metallic shine display type, cinematic depth, WSN+ chat bot.
   ============================================================================ */
/* ---- red is the brand accent everywhere (default; picker still works) ---- */
body{
  --portal:#e01b24; --portal-2:#b0141b; --portal-soft:rgba(224,27,36,.16);
  --portal-line:rgba(255,45,63,.42); --portal-ink:#fff;
  --portal-glow:rgba(255,45,63,.6); --portal-glow-soft:rgba(255,45,63,.18);
  --silver:#cfd3db; --silver2:#eef0f4;
}

/* ---- metallic silver/white SHINE on display headings ---- */
.lShine{
  background:linear-gradient(100deg,#ffffff 0%,#c4c9d2 18%,#ffffff 34%,#aeb4bf 50%,#ffffff 66%,#d7dbe3 84%,#ffffff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:lShineSweep 7s linear infinite;
  text-shadow:0 1px 0 rgba(255,255,255,.04);
}
@keyframes lShineSweep{ to{ background-position:-220% 0; } }

/* ---- HERO with real in-ring imagery ---- */
.lHero{ position:relative; overflow:hidden; min-height:min(86vh,760px); display:flex; align-items:center; justify-content:center; text-align:center;
  padding:clamp(80px,12vw,150px) clamp(18px,5vw,56px) clamp(60px,9vw,110px); }
.lHeroBg{ position:absolute; inset:0; z-index:0; background:url('/landing/hero-action.png') center 22%/cover no-repeat; transform:scale(1.04); animation:lHeroZoom 24s ease-in-out infinite alternate; }
@keyframes lHeroZoom{ to{ transform:scale(1.14); } }
.lHeroFade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 0%, rgba(4,5,8,.5) 55%, rgba(4,5,8,.92) 100%),
    linear-gradient(180deg, rgba(4,5,8,.55) 0%, rgba(4,5,8,.35) 40%, rgba(4,5,8,.96) 100%),
    radial-gradient(60% 60% at 50% 30%, rgba(224,27,36,.16), transparent 60%); }
.lHero .lHeroInner{ position:relative; z-index:2; max-width:940px; }
.lHeroTitle{ font-size:clamp(48px,9vw,102px) !important; line-height:.94 !important; margin:14px 0 20px !important; text-shadow:0 6px 40px rgba(0,0,0,.6); }
.lHeroSub{ color:#d7dbe3 !important; text-shadow:0 2px 12px rgba(0,0,0,.7); }
.lEyebrow{ color:#ff5760 !important; text-shadow:0 0 20px rgba(255,45,63,.4); }

/* CTAs: red primary with glow, glass silver secondary */
.lCtaPrimary{ background:linear-gradient(180deg,#ff2d3f,#c00d16) !important; color:#fff !important;
  box-shadow:0 16px 40px -12px rgba(255,45,63,.6), 0 1px 0 rgba(255,255,255,.22) inset !important; border:none !important; }
.lCtaPrimary:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -14px rgba(255,45,63,.7), 0 1px 0 rgba(255,255,255,.22) inset !important; }
.lCtaSecondary{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(207,211,219,.28) !important; color:var(--silver2) !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lCtaSecondary:hover{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,45,63,.5) !important; }
.lBadge{ background:rgba(255,255,255,.05); border:1px solid rgba(207,211,219,.2); color:var(--silver); }

.lnav{ background:linear-gradient(180deg, rgba(4,5,8,.92), rgba(4,5,8,.5)) !important; }
.lnavMark{ background:linear-gradient(150deg,#ff2d3f,#8f0a10) !important; box-shadow:0 10px 26px -8px rgba(255,45,63,.6) !important; }
.lnavLogin{ background:linear-gradient(180deg,#ff2d3f,#c00d16) !important; color:#fff !important; box-shadow:0 10px 26px -10px rgba(255,45,63,.6) !important; }

/* ---- scrolling marquee band (silver text on red-black) ---- */
.lMarquee{ overflow:hidden; white-space:nowrap; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg, rgba(224,27,36,.14), rgba(0,0,0,0) 40%, rgba(224,27,36,.14)); padding:14px 0; }
.lMarqueeTrack{ display:inline-block; animation:lMarq 26s linear infinite; }
.lMarqueeTrack span{ font-family:var(--fdisplay); font-size:22px; letter-spacing:.04em; color:var(--silver2); margin:0 6px; opacity:.9; }
.lMarqueeTrack b{ color:#ff2d3f; margin:0 4px; }
@keyframes lMarq{ to{ transform:translateX(-50%); } }

/* ---- section polish (silver headings via .lShine; red eyebrows) ---- */
.lSection .lEyebrow, .lAppCopy .lEyebrow{ color:#ff5760 !important; }
.lMcNum{ color:#ff5760 !important; -webkit-text-fill-color:initial; }
.lPerk:hover{ border-color:rgba(255,45,63,.5) !important; box-shadow:0 24px 50px -26px rgba(0,0,0,.85), 0 0 40px -16px rgba(255,45,63,.5) !important; }
.lPerkIco{ filter:drop-shadow(0 4px 14px rgba(255,45,63,.35)); }
.lStepNo, .lMissionCard .lMcNum{ }
.lStepNo{ background:linear-gradient(150deg,#ff2d3f,#8f0a10) !important; box-shadow:0 12px 26px -8px rgba(255,45,63,.55) !important; }
.lAppList li::before{ background:linear-gradient(150deg,#ff2d3f,#8f0a10) !important; }

/* ---- app section image ---- */
.lAppArt{ position:relative; }
.lAppImg{ position:relative; z-index:1; width:100%; aspect-ratio:16/10; border-radius:18px; background-position:center; background-size:cover;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 90px -34px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset; }
.lAppImgGlow{ position:absolute; inset:-12% -8% -18% -8%; z-index:0; background:radial-gradient(closest-side, rgba(255,45,63,.4), transparent 70%); filter:blur(10px); }

/* ---- final CTA with ring imagery ---- */
.lFinalCta{ position:relative; overflow:hidden; text-align:center; padding:clamp(70px,10vw,120px) clamp(18px,5vw,56px); }
.lFinalBg{ position:absolute; inset:0; z-index:0; background:url('/landing/ring.png') center/cover no-repeat; opacity:.5; }
.lFinalFade{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(4,5,8,.86), rgba(4,5,8,.7) 50%, rgba(4,5,8,.96)); }
.lFinalInner{ position:relative; z-index:2; max-width:720px; margin:0 auto; }
.lFinalCta p{ color:#d7dbe3; }

.lFooter{ background:#05060a; }
.lFootBrand .lnavMark{ }

/* ============================================================================
   WSN+ TRAINED BOT — landing greeter widget (scripted, no API, never says AI)
   ============================================================================ */
.wsnBot{ position:fixed; right:20px; bottom:20px; z-index:400; }
.wsnBotLauncher{ position:relative; width:66px; height:66px; border-radius:50%; padding:0 !important; overflow:hidden; cursor:pointer;
  border:2px solid rgba(255,255,255,.85) !important; background:#111 !important;
  box-shadow:0 14px 34px -8px rgba(255,45,63,.6), 0 0 0 4px rgba(255,45,63,.18) !important; height:66px !important; transition:transform .16s var(--ease); }
.wsnBotLauncher:hover{ transform:scale(1.06); }
.wsnBotLauncher img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block; }
.wsnBotPing{ position:absolute; top:3px; right:3px; width:14px; height:14px; border-radius:50%; background:#2fd48a; border:2px solid #0a0b10; box-shadow:0 0 0 0 rgba(47,212,138,.6); animation:lPing 1.8s infinite; }
@keyframes lPing{ 0%{box-shadow:0 0 0 0 rgba(47,212,138,.55);}70%{box-shadow:0 0 0 8px rgba(47,212,138,0);}100%{box-shadow:0 0 0 0 rgba(47,212,138,0);} }
.wsnBotPanel{ position:absolute; right:0; bottom:82px; width:min(374px,calc(100vw - 32px)); height:min(560px,72vh); display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,#12141b,#0a0b10); border:1px solid rgba(255,255,255,.14); border-radius:20px;
  box-shadow:0 40px 100px -24px rgba(0,0,0,.9), 0 0 60px -30px rgba(255,45,63,.5); animation:lModalIn .2s var(--ease); }
.wsnBotPanel.hidden{ display:none; }
.wsnBotHead{ display:flex; align-items:center; gap:11px; padding:13px 14px; background:linear-gradient(180deg,#1a1c24,#141620); border-bottom:1px solid rgba(255,255,255,.1); }
.wsnBotAv{ width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:center 28%; border:2px solid rgba(255,45,63,.6); }
.wsnBotWho{ flex:1; min-width:0; }
.wsnBotName{ font-weight:800; font-size:15px; color:#fff; }
.wsnBotRole{ font-size:11.5px; color:#9aa6b8; display:flex; align-items:center; gap:6px; }
.wsnBotDot{ width:8px; height:8px; border-radius:50%; background:#2fd48a; box-shadow:0 0 8px #2fd48a; }
.wsnBotClose{ background:transparent !important; border:none !important; box-shadow:none !important; color:#9aa6b8 !important; font-size:15px; width:30px; height:30px !important; padding:0 !important; border-radius:8px; }
.wsnBotClose:hover{ color:#fff !important; background:rgba(255,255,255,.08) !important; }
.wsnBotBody{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; background:#0a0b10; }
.wsnMsg{ max-width:82%; padding:10px 13px; border-radius:15px; font-size:14px; line-height:1.5; white-space:pre-wrap; }
.wsnMsg.bot{ align-self:flex-start; background:#1b1e28; color:#e9edf3; border-bottom-left-radius:5px; }
.wsnMsg.me{ align-self:flex-end; background:linear-gradient(180deg,#ff2d3f,#c00d16); color:#fff; border-bottom-right-radius:5px; }
.wsnTyping{ align-self:flex-start; display:inline-flex; gap:4px; padding:12px 14px; background:#1b1e28; border-radius:15px; border-bottom-left-radius:5px; }
.wsnTyping i{ width:7px; height:7px; border-radius:50%; background:#8a94a6; animation:lDot 1.2s infinite; }
.wsnTyping i:nth-child(2){ animation-delay:.18s; } .wsnTyping i:nth-child(3){ animation-delay:.36s; }
@keyframes lDot{ 0%,60%,100%{opacity:.3;transform:translateY(0);} 30%{opacity:1;transform:translateY(-3px);} }
.wsnBotChips{ display:flex; gap:7px; flex-wrap:wrap; padding:0 14px 6px; background:#0a0b10; }
.wsnChip{ background:rgba(255,45,63,.12) !important; border:1px solid rgba(255,45,63,.4) !important; color:#ffb3b8 !important; box-shadow:none !important;
  font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:999px; height:auto !important; cursor:pointer; }
.wsnChip:hover{ background:rgba(255,45,63,.2) !important; color:#fff !important; filter:none; }
.wsnBotForm{ display:flex; gap:8px; padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(255,255,255,.1); background:#12141b; }
.wsnBotForm input{ flex:1; min-width:0; padding:11px 13px; border-radius:11px; border:1px solid rgba(255,255,255,.14); background:#0a0b10; color:#fff; font-size:15px; }
.wsnBotForm input:focus{ outline:none; border-color:#ff2d3f; box-shadow:0 0 0 3px rgba(255,45,63,.18); }
.wsnBotForm button{ flex:none; width:44px; height:44px !important; border-radius:11px; background:linear-gradient(180deg,#ff2d3f,#c00d16) !important; color:#fff !important; border:none !important; padding:0 !important; font-size:15px; }
@media(max-width:560px){ .wsnBot{ right:14px; bottom:14px; } .wsnBotPanel{ bottom:78px; } }
/* landing hero scrim */
/* darker scrim over the landing hero image for text legibility */
.lHeroFade{ background:
    radial-gradient(120% 90% at 50% 40%, rgba(4,5,8,.35) 0%, rgba(4,5,8,.7) 55%, rgba(4,5,8,.96) 100%),
    linear-gradient(180deg, rgba(4,5,8,.72) 0%, rgba(4,5,8,.55) 40%, rgba(4,5,8,.98) 100%),
    radial-gradient(60% 60% at 50% 30%, rgba(224,27,36,.18), transparent 60%) !important; }
/* landing greeter bot must never show inside the logged-in portal */
body:not(.loggedOut) #wsnBot{ display:none !important; }

/* ---- Schedule a Premiere (2026-10-08) ---- */
#premierePanel{ margin-bottom:18px; }
.premiereForm{ display:grid; grid-template-columns:minmax(220px,2fr) minmax(200px,1fr) auto; gap:12px; align-items:end; margin:6px 0 14px; }
.premiereForm label{ display:flex; flex-direction:column; gap:6px; }
.premiereForm select, .premiereForm input{ width:100%; }
.premiereList{ display:flex; flex-direction:column; gap:8px; }
.premiereRow{ display:flex; align-items:center; gap:14px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.premiereRow.isLive{ border-color:rgba(229,9,20,.75); box-shadow:0 0 0 1px rgba(229,9,20,.35), 0 0 18px rgba(229,9,20,.25); }
.premiereThumb{ width:112px; height:63px; flex:0 0 auto; border-radius:6px; background:#111 center/cover no-repeat; }
.premiereInfo{ flex:1; min-width:0; }
.premiereTitle{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.premiereStatus{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#c9c9cf; display:inline-flex; align-items:center; gap:6px; }
.premiereStatus.st-live{ color:#ff3b44; }
.premiereStatus.st-missed{ color:#8e8e92; }
.premiereDot{ width:8px; height:8px; border-radius:50%; background:#ff2a33; box-shadow:0 0 8px #e50914; animation:premPulse 1.2s ease-in-out infinite; }
@keyframes premPulse{ 50%{ opacity:.35; } }
@media (max-width:760px){ .premiereForm{ grid-template-columns:1fr; } .premiereThumb{ width:84px; height:47px; } }

/* ============================================================================
   WSN+ PORTAL DESIGN SYSTEM v6 (2026-10-09)  ·  the ONE authoritative layer
   ----------------------------------------------------------------------------
   Promotion Portal + Creator Portal (same files). Everything above this block is
   structural component CSS; every older "re-skin / premium vN / final" override
   block was REMOVED in this rebuild, so nothing below needs to fight !important.
   Rules:  black ground · glass surfaces lit by a slow ambient light field ·
   silver/white type · CHROME (metallic) type only through the --chrome tokens
   below (background-image + background-clip:text, never a background shorthand
   on the same element) · accent = the --portal family (red by default; the
   color switcher + any-color wheel re-skin it, glows included).
   Motion: transform/opacity only (plus the tiny chrome sweep), and nothing
   moves under prefers-reduced-motion.
   ============================================================================ */

/* ---------- accent family (default red; presets + wheel override on <body>) ---------- */
:root{ --fdisplay:"Bebas Neue","Anton",var(--font); --silver:#cfd3db; --silver2:#eef0f4; --r:12px; --r-lg:16px; --r-sm:10px; --bg2:#0a0a0c; }
body{
  --portal:#e5333c; --portal-2:#c4222b; --portal-soft:rgba(229,51,60,.12);
  --portal-line:rgba(229,51,60,.38); --portal-ink:#fff;
  --portal-glow:rgba(229,51,60,.45); --portal-glow-soft:rgba(229,51,60,.12);
}
body[data-accent="blue"]  { --portal:#3d7bff; --portal-2:#2560e6; --portal-soft:rgba(61,123,255,.13);  --portal-line:rgba(61,123,255,.38);  --portal-ink:#fff; --portal-glow:rgba(61,123,255,.45);  --portal-glow-soft:rgba(61,123,255,.12); }
body[data-accent="red"]   { --portal:#e5333c; --portal-2:#c4222b; --portal-soft:rgba(229,51,60,.12);   --portal-line:rgba(229,51,60,.38);   --portal-ink:#fff; --portal-glow:rgba(229,51,60,.45);   --portal-glow-soft:rgba(229,51,60,.12); }
body[data-accent="purple"]{ --portal:#9b6bff; --portal-2:#7a44e6; --portal-soft:rgba(155,107,255,.13); --portal-line:rgba(155,107,255,.38); --portal-ink:#fff; --portal-glow:rgba(155,107,255,.45); --portal-glow-soft:rgba(155,107,255,.12); }
body[data-accent="green"] { --portal:#2fd48a; --portal-2:#1fae6f; --portal-soft:rgba(47,212,138,.13);  --portal-line:rgba(47,212,138,.38);  --portal-ink:#04170f; --portal-glow:rgba(47,212,138,.4); --portal-glow-soft:rgba(47,212,138,.12); }
body[data-accent="gold"]  { --portal:#f5c542; --portal-2:#e0a92a; --portal-soft:rgba(245,197,66,.13);  --portal-line:rgba(245,197,66,.38);  --portal-ink:#1a1204; --portal-glow:rgba(245,197,66,.4); --portal-glow-soft:rgba(245,197,66,.12); }
body[data-accent="mono"]  { --portal:#d5d8df; --portal-2:#a7abb5; --portal-soft:rgba(213,216,223,.11); --portal-line:rgba(213,216,223,.32); --portal-ink:#0a0a0b; --portal-glow:rgba(213,216,223,.3); --portal-glow-soft:rgba(213,216,223,.08); }

/* ---------- design tokens (logged-in portal) ---------- */
body:not(.loggedOut){
  --bg:#050506; --surface:#0e0f12; --surface-2:#15161a; --surface-3:#1c1d22; --well:#09090b;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.11); --line3:rgba(255,255,255,.17);
  --text:#f4f5f7; --text-2:#d6d8dd; --muted:#9a9ca3; --faint:#6b6e76;
  --panel:var(--surface); --panel2:var(--surface-2); --panel3:var(--well);
  --red:var(--portal); --red2:var(--portal); --gold:#c9ccd3; --green:#3ddc84; --sky:#7cc4ff;
  --radius:14px; --radius-sm:10px; --radius-lg:20px; --r:14px; --r-lg:20px; --r-sm:10px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --hi:inset 0 1px 0 rgba(255,255,255,.045);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.8);
  --shadow-lg:0 30px 80px -30px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.4);
  --ring:0 0 0 3px var(--portal-soft);
  --t:180ms cubic-bezier(.2,.7,.2,1);
  --out:cubic-bezier(.16,.84,.3,1);
  /* materials */
  --glass:rgba(17,18,22,.58); --glass-2:rgba(24,25,30,.66); --glass-deep:rgba(8,8,10,.55);
  --edge:linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.07) 26%, rgba(255,255,255,.035) 55%, rgba(255,255,255,.09));
  --edge-hi:linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.12) 30%, rgba(255,255,255,.05) 55%, var(--portal-line));
  --lift:inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(0,0,0,.5), 0 26px 60px -34px rgba(0,0,0,.95);
  --lift-hi:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.5), 0 34px 70px -34px rgba(0,0,0,1), 0 18px 44px -30px var(--portal-glow);
  --chrome:linear-gradient(180deg, #ffffff 0%, #f4f5f7 18%, #c9ccd3 44%, #8c9099 52%, #b9bdc5 64%, #eef0f4 84%, #ffffff 100%);
  --chrome-sweep:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%);
  --glow-btn:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -8px 16px -10px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.25), 0 8px 22px -10px var(--portal-glow), 0 0 22px -8px var(--portal-glow);
  --glow-btn-hi:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -8px 16px -10px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.25), 0 12px 30px -10px var(--portal-glow), 0 0 34px -6px var(--portal-glow);
  /* stroke icons for KPI chips (CSS masks; color comes from the accent) */
  --i-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.75'/%3E%3C/svg%3E");
  --i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.75'/%3E%3Cpath d='M12 7.5v4.75l3 1.75'/%3E%3C/svg%3E");
  --i-trophy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 4h9v5a4.5 4.5 0 0 1-9 0z'/%3E%3Cpath d='M7.5 6H4.5a3 3 0 0 0 3 4M16.5 6h3a3 3 0 0 1-3 4'/%3E%3Cpath d='M12 13.5V17M8.5 20h7M9.5 17h5v3h-5z'/%3E%3C/svg%3E");
  --i-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8.5' r='3.25'/%3E%3Cpath d='M3 20a6 6 0 0 1 12 0'/%3E%3Cpath d='M15.5 5.5a3.25 3.25 0 0 1 0 6'/%3E%3Cpath d='M17.5 14.5A6 6 0 0 1 21 20'/%3E%3C/svg%3E");
  --i-trend:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5 9 11l4 4 7.5-7.5'/%3E%3Cpath d='M15 7.5h5.5V13'/%3E%3C/svg%3E");
  --i-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='3.5' width='7' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
  --i-rows:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E");
  --i-tv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='12.5' rx='2'/%3E%3Cpath d='M8.5 21h7'/%3E%3Cpath d='m10.5 9 4 2.25-4 2.25z'/%3E%3C/svg%3E");
  --i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E");
  --i-live:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.25'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M5 5a10 10 0 0 0 0 14M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
  background:var(--bg);
  letter-spacing:-.006em;
  color:var(--text);
}
body.hasPromotionBackground:not(.loggedOut)::before{ opacity:.28; }

/* ---------- ambient light field (fixed, behind everything; transform/opacity only) ---------- */
@property --pxA{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.pxAmbient{ display:none; }
body:not(.loggedOut) .pxAmbient{ display:block; position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; contain:strict; }
.pxAmbient i{ position:absolute; display:block; border-radius:50%; will-change:transform; }
.pxAmbient .pxA1{ width:78vmax; height:78vmax; right:-26vmax; top:-38vmax; opacity:.55;
  background:radial-gradient(closest-side, var(--portal-glow), transparent 72%); animation:pxDrift1 34s ease-in-out infinite alternate; }
.pxAmbient .pxA2{ width:64vmax; height:64vmax; left:-14vmax; top:-30vmax; opacity:.85;
  background:radial-gradient(closest-side, rgba(176,190,214,.14), transparent 70%); animation:pxDrift2 42s ease-in-out infinite alternate; }
.pxAmbient .pxA3{ width:70vmax; height:70vmax; left:18vw; bottom:-48vmax; opacity:.38;
  background:radial-gradient(closest-side, var(--portal-glow), rgba(60,62,72,.25) 45%, transparent 72%); animation:pxDrift3 38s ease-in-out infinite alternate; }
.pxAmbient::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 55% 40%, transparent 55%, rgba(0,0,0,.55) 100%),
             linear-gradient(180deg, rgba(5,5,6,0) 60%, rgba(5,5,6,.5)); }
@keyframes pxDrift1{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-9vw,7vh,0) scale(1.12); } }
@keyframes pxDrift2{ from{ transform:translate3d(0,0,0) scale(1.05); } to{ transform:translate3d(12vw,10vh,0) scale(.92); } }
@keyframes pxDrift3{ from{ transform:translate3d(0,0,0) scale(.95); } to{ transform:translate3d(-14vw,-6vh,0) scale(1.1); } }

/* ---------- chrome / metallic type (letters, never bars: see header) ---------- */
.pxChrome, #portalView .topbar h2, #portalView .heroPanel h3, #wpHub .wpHeroName,
#portalView .stat:not(.statMove) strong, .wpStatVal:not(#wpTileMove), .hsPct, .commProfName, .wpMemTitle,
#wpHub .wpHeadline, .wpPayCard .wpHeadline, .wpPoolCard .wpHeadline, .lbtKicker, #portalView .panelHead h3{
  display:inline-block; max-width:100%;
  background-color:transparent;
  background-image:var(--chrome-sweep), var(--chrome);
  background-size:260% 100%, 100% 100%; background-repeat:no-repeat; background-position:160% 0, 0 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-bottom:.1em; margin-bottom:-.1em; /* room for descenders inside the clipped box */
  text-shadow:none;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
}
#portalView .panelHead h3{ display:flex; }
/* the slow light sweep: hero titles + page title + KPI numbers, each on its own beat */
#portalView .topbar h2, #portalView .heroPanel h3, #wpHub .wpHeroName{ animation:pxSweep 9s var(--out) 1.2s infinite; }
#portalView .stat strong, .wpStatVal{ animation:pxSweep 11s var(--out) infinite; }
#portalView .stat:nth-child(2) strong, .wpStat:nth-child(2) .wpStatVal{ animation-delay:.6s; }
#portalView .stat:nth-child(3) strong, .wpStat:nth-child(3) .wpStatVal{ animation-delay:1.2s; }
#portalView .stat:nth-child(4) strong, .wpStat:nth-child(4) .wpStatVal{ animation-delay:1.8s; }
#portalView .stat:nth-child(5) strong, .wpStat:nth-child(5) .wpStatVal{ animation-delay:2.4s; }
.wpStat:nth-child(6) .wpStatVal{ animation-delay:3s; }
.wpStat:nth-child(7) .wpStatVal{ animation-delay:3.6s; }
@keyframes pxSweep{ 0%, 72%{ background-position:160% 0, 0 0; } 100%{ background-position:-60% 0, 0 0; } }

/* ---------- glass cards + light-edge border (shared material) ---------- */
#portalView .panel, #portalView .heroPanel, #portalView .stat,
#wpHub .wpHubHero, #wpHub .wpTopCard, #wpHub .wpStat, .wpCalCard, .wpCalDay, .wpEventForm, .wpPayCard, .wpPoolCard, .wpPayNote, .wpMsgMain, .wpThreadList,
.wpCard, .wpStatusCard, .wpNote, .commAdminCard, .commDir, .commComposer, .commPost, .commProfileFull, .commProfile, .wsnSocForm, .wsnSocItem,
#portalView .builderRow, #portalView .videoCard, .lvHero, .healthCard, .resItem{
  border:1px solid transparent;
  background:linear-gradient(var(--glass), var(--glass)) padding-box, var(--edge) border-box;
  box-shadow:var(--lift);
  -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35);
}
/* the many small repeated cards skip the blur (cheap to scroll) but keep the lit edge */
#portalView .videoCard, #portalView .builderRow, .commDir, .commPost, .resItem, .wsnSocItem, .healthCard{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background:linear-gradient(var(--glass-2), var(--glass-2)) padding-box, var(--edge) border-box;
}
/* hover: lift 2px with a brighter edge + accent underglow (cards only, not big form panels) */
#portalView .stat, #wpHub .wpStat, #wpHub .wpTopCard, #portalView .videoCard, .commDir, .commAdminCard, .resItem, .healthCard{
  transition:transform 220ms var(--out), box-shadow 220ms var(--out);
}
#portalView .stat:hover, #wpHub .wpStat:hover, #portalView .videoCard:hover, .commDir:hover, .commAdminCard:hover, .resItem:hover, .healthCard:hover{
  transform:translateY(-2px);
  background:linear-gradient(var(--glass-2), var(--glass-2)) padding-box, var(--edge-hi) border-box;
  box-shadow:var(--lift-hi);
}
#wpHub .wpTopCard:hover, #portalView .panel:hover, #portalView .builderRow:hover{
  background:linear-gradient(var(--glass), var(--glass)) padding-box, var(--edge-hi) border-box;
}
#portalView .builderRow:hover{ background:linear-gradient(var(--glass-2), var(--glass-2)) padding-box, var(--edge-hi) border-box; }

/* animated light running along a hero card's border (one element per hero: <i class="pxEdge">) */
.pxEdge{ position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; padding:1px;
  background:conic-gradient(from var(--pxA), transparent 0deg 250deg, rgba(255,255,255,.0) 262deg, rgba(255,255,255,.85) 300deg, var(--portal) 322deg, transparent 345deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:pxSpin 12s linear infinite; opacity:.8; }
@keyframes pxSpin{ to{ --pxA:360deg; } }

/* status dots pulse */
@keyframes pxPulse{ 0%{ box-shadow:0 0 0 0 var(--pc, rgba(61,220,132,.55)); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
.pill.good::before{ --pc:rgba(61,220,132,.6); background:var(--green); animation:pxPulse 2.2s ease-out infinite; border-radius:50%; }
#analyticsUpdatedAt:not(:empty)::before{ animation:pxPulse 2.2s ease-out infinite; }
#wpHub .wpStat.wpStatLive .wpStatLbl::before{ --pc:var(--portal-glow); animation:pxPulse 1.8s ease-out infinite; }
.lvHeroReady .lvStatusDot{ animation:pxPulse 2.2s ease-out infinite; }
.lvHeroLive .lvStatusDot{ --pc:var(--portal-glow); background:var(--portal); animation:pxPulse 1.4s ease-out infinite; }

/* page entrance: staggered fade-up each time a view opens (fill backwards only, so no lasting
   transform/stacking context is left on ancestors of fixed modals) */
@keyframes pxRise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
#portalView > .view.active > *{ animation:pxRise 460ms var(--out) backwards; }
#portalView > .view.active > *:nth-child(2){ animation-delay:60ms; }
#portalView > .view.active > *:nth-child(3){ animation-delay:120ms; }
#portalView > .view.active > *:nth-child(4){ animation-delay:180ms; }
#portalView > .view.active > *:nth-child(n+5){ animation-delay:240ms; }
#portalView .view.active .stats > .stat, #wpHub .wpHubPane:not(.hidden) .wpDash3 > *{ animation:pxRise 480ms var(--out) backwards; }
#portalView .view.active .stats > .stat:nth-child(2), #wpHub .wpDash3 > *:nth-child(2){ animation-delay:50ms; }
#portalView .view.active .stats > .stat:nth-child(3), #wpHub .wpDash3 > *:nth-child(3){ animation-delay:100ms; }
#portalView .view.active .stats > .stat:nth-child(4), #wpHub .wpDash3 > *:nth-child(4){ animation-delay:150ms; }
#portalView .view.active .stats > .stat:nth-child(5), #wpHub .wpDash3 > *:nth-child(5){ animation-delay:200ms; }
#wpHub .wpDash3 > *:nth-child(n+6){ animation-delay:250ms; }
#wpHub .wpHubPane:not(.hidden){ animation:pxFade 260ms var(--out) backwards; }
@keyframes pxFade{ from{ opacity:0; } to{ opacity:1; } }
/* loading placeholders shimmer */
.wpTopEmpty:only-child{ position:relative; overflow:hidden; }
@keyframes pxShimmer{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

/* ============================ APP SHELL ============================ */
body:not(.loggedOut) .shell{ grid-template-columns:256px minmax(0,1fr); }
body:not(.loggedOut) .main{ padding:0; }
#portalView{ padding:0 clamp(20px,3vw,40px) 72px; }
#portalView > .view{ max-width:1280px; margin-left:auto; margin-right:auto; }
#portalView > .impersonateBanner{ max-width:1280px; margin:0 auto 20px; }

/* ---- sidebar ---- */
.sidebar{
  padding:0; background:#08080a; border-right:1px solid var(--line); backdrop-filter:none;
  display:flex; flex-direction:column;
}
.sidebar .brand{ order:0; display:flex; align-items:center; gap:12px; padding:20px 18px 18px; margin:0; border-bottom:1px solid var(--line); }
.sidebar .mark{
  width:38px; height:38px; border-radius:10px; font-size:12.5px; font-weight:800; letter-spacing:-.01em; color:var(--portal-ink);
  background:var(--portal); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px -8px var(--portal-glow);
}
.sidebar .brandTitle{ font-family:var(--font); font-size:14.5px; font-weight:650; letter-spacing:-.01em; color:var(--text); text-transform:none; }
.sidebar .brandSub{ margin-top:1px; font-size:11.5px; font-weight:500; color:var(--faint); letter-spacing:0; text-transform:none; }
.sidebar .nav{ order:1; flex:1 1 auto; display:flex; flex-direction:column; gap:1px; padding:10px 10px 16px; overflow-y:auto; }
.navLabel{ padding:16px 10px 6px; font-size:10.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); }
.navLabel:first-child{ padding-top:6px; }
.navLabel.adminLabel:has(+ #accessNavBtn.hidden){ display:none; }
.sidebar .navItem{
  position:relative; display:flex; align-items:center; gap:11px; width:100%; height:36px; min-height:0; padding:0 10px;
  border:0; border-radius:8px; background:transparent; box-shadow:none; transform:none;
  color:var(--muted); font-size:13.5px; font-weight:500; letter-spacing:-.005em; text-align:left; white-space:nowrap;
  transition:background var(--t), color var(--t);
}
.sidebar .navItem:hover{ background:rgba(255,255,255,.04); color:var(--text); filter:none; }
.sidebar .navItem:active{ transform:none; }
.sidebar .navItem.active{ background:linear-gradient(90deg, var(--portal-soft), rgba(255,255,255,.015)); color:#fff; box-shadow:inset 0 0 0 1px var(--portal-line), 0 0 22px -10px var(--portal-glow); }
.sidebar .navItem.active::before{ content:""; position:absolute; left:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--portal); box-shadow:0 0 12px 1px var(--portal-glow); }
.navIco{ width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.sidebar .navItem.active .navIco{ color:var(--portal); opacity:1; filter:drop-shadow(0 0 6px var(--portal-glow)); }
.navItem.wpNav{ color:var(--muted); font-weight:500; }
.navItem .navBadge{ margin-left:auto; min-width:18px; height:18px; padding:0 6px; border-radius:9px; background:var(--portal); color:var(--portal-ink); font-size:10.5px; font-weight:700; box-shadow:none; }
.navItem .navBadge.hidden{ display:none; }
#portalLangWrap{ order:2; margin:0 !important; padding:10px 14px; border-top:1px solid var(--line); }
#portalLangIcon{ opacity:.6; filter:grayscale(1); }
#portalLang{ height:32px !important; padding:0 10px !important; border-radius:8px !important; background:var(--surface) !important; border:1px solid var(--line2) !important; color:var(--text-2) !important; font-size:12.5px !important; }
.sidebar .sidebarFoot{ order:3; margin:0; display:grid; gap:10px; padding:12px 14px 16px; border-top:1px solid var(--line); }
.sidebar .miniText{ color:var(--faint); font-size:12px; padding:0 2px; }
#logoutBtn{ height:34px; font-size:13px; }

/* theme picker (built in index.html) */
.themePicker{ gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.themePicker .tpLabel{ font-size:10.5px; font-weight:650; letter-spacing:.08em; color:var(--faint); }
.themeSwatches{ gap:7px; }
.themeSwatch, .themeSwatch:hover{ width:18px; height:18px; padding:0; border:0; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,.12); filter:none; }
.themeSwatch:hover{ transform:scale(1.1); }
.themeSwatch.on{ box-shadow:0 0 0 2px #08080a, 0 0 0 3.5px rgba(255,255,255,.85); }
.themePicker .tpCustom{ margin-top:4px; padding-top:8px; }
.themePicker .tpCustom label{ font-size:10.5px; color:var(--faint); font-weight:600; letter-spacing:.06em; }
.themePicker .tpCustom input[type=color]{ width:26px; height:22px; padding:0 !important; border-radius:6px; background:none; }

/* ---- top bar (sticky glass) ---- */
#portalView .topbar{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:none; margin:0 calc(-1 * clamp(20px,3vw,40px)) 28px; padding:14px clamp(20px,3vw,40px);
  min-height:72px; border-bottom:1px solid var(--line);
  background:rgba(7,7,9,.72); -webkit-backdrop-filter:blur(18px) saturate(1.2); backdrop-filter:blur(18px) saturate(1.2);
}
.topLeft{ display:flex; align-items:center; gap:14px; min-width:0; }
#portalView .pageKicker{ font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); margin:0 0 2px; }
#portalView .pageKicker::after{ content:"  /"; color:var(--faint); }
#portalView .topbar h2{ margin:0; font-family:var(--font); font-size:22px; font-weight:650; letter-spacing:-.02em; line-height:1.2; color:var(--text); }
.topActions{ display:flex; align-items:center; gap:8px; }
.compactSelect{ width:230px; display:flex; flex-direction:row; align-items:center; gap:8px; font-size:0; }
.compactSelect select{ height:36px; font-size:13px; }
.sideToggle{
  width:36px; height:36px; flex:none; display:grid; place-items:center; padding:0; border-radius:9px;
  border:1px solid var(--line2); background:var(--surface); color:var(--text-2); box-shadow:none; font-size:15px;
}
.sideToggle:hover{ background:var(--surface-2); border-color:var(--line3); filter:none; box-shadow:none; }
#statusPill{ order:-1; }

/* ============================ TYPE + BUTTONS ============================ */
h1, h2, h3, h4{ letter-spacing:-.02em; }
button{
  height:40px; padding:0 16px; border-radius:10px; border:1px solid transparent;
  background:var(--portal); color:var(--portal-ink); font-size:13.5px; font-weight:600; letter-spacing:-.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.4);
  transition:background var(--t), border-color var(--t), color var(--t), filter var(--t), box-shadow var(--t), transform 80ms ease;
}
button:hover{ filter:brightness(1.1); box-shadow:var(--glow-btn-hi); }
button:active{ transform:translateY(1px); }
button:focus-visible, a:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--portal); }
button.secondary, .secondary{
  background:var(--surface-2); border:1px solid var(--line2); color:var(--text); box-shadow:var(--hi);
}
button.secondary:hover, .secondary:hover{ background:var(--surface-3); border-color:var(--line3); filter:none; box-shadow:var(--hi); }
button.ghost, .ghost{ background:transparent; border:1px solid transparent; color:var(--muted); box-shadow:none; }
button.ghost:hover, .ghost:hover{ background:rgba(255,255,255,.05); color:var(--text); filter:none; box-shadow:none; }
button.primary, .ovPartnerBtn, .wpCta, #wpHub .wpHeroBtn.primary, .lvBtnPrimary, .wpMemCta, .wpNoteBar .wpNoteSave, .connectLinkBox .clbRow button, #addPpvBtn, #uploadBtn{ box-shadow:var(--glow-btn) !important; }
button.primary:hover, .ovPartnerBtn:hover, .wpCta:hover, #wpHub .wpHeroBtn.primary:hover, .lvBtnPrimary:hover, .wpMemCta:hover, .wpNoteBar .wpNoteSave:hover, #addPpvBtn:hover, #uploadBtn:hover{ box-shadow:var(--glow-btn-hi) !important; filter:brightness(1.1); }
button.primary{ background:var(--portal); color:var(--portal-ink); border-color:transparent; }
button.smallBtn, .smallBtn{ height:32px; padding:0 12px; border-radius:8px; font-size:12.5px; }
button:disabled, button:disabled:hover{ opacity:.45; filter:none; box-shadow:none; transform:none; cursor:not-allowed; }
.ghost[data-video-delete], .ghost[data-row-delete], .ghost[data-ppv-remove], .wpNoteMini.danger{ color:#f0868c !important; }
.ghost[data-video-delete]:hover, .ghost[data-row-delete]:hover, .ghost[data-ppv-remove]:hover{ background:rgba(240,80,90,.1); }
label.secondary.smallBtn{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; color:var(--text); font-weight:600; }

/* pills / chips / badges */
.pill{ height:28px; padding:0 11px; gap:7px; border-radius:999px; border:1px solid var(--line2); background:var(--surface); color:var(--muted); font-size:12px; font-weight:600; }
.pill::before{ width:6px; height:6px; }
.pill.good{ color:var(--green); border-color:rgba(61,220,132,.3); background:rgba(61,220,132,.08); }
.chip{ display:inline-flex; align-items:center; height:28px; padding:0 12px; border:1px dashed var(--line2); background:transparent; border-radius:999px; color:var(--faint); font-size:12px; }
.fieldHint{ display:block; margin-top:2px; color:var(--faint); font-size:12px; font-weight:400; }

/* ============================ FORMS ============================ */
input, textarea, select{
  height:44px; padding:0 14px; border-radius:10px; border:1px solid var(--line2); background:var(--well); color:var(--text);
  font-size:14px; box-shadow:inset 0 1px 2px rgba(0,0,0,.35); transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
textarea{ height:auto; min-height:104px; padding:12px 14px; line-height:1.55; }
input:hover, textarea:hover, select:hover{ border-color:var(--line3); }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--portal); box-shadow:0 0 0 3px var(--portal-soft), 0 0 22px -6px var(--portal-glow); background:#0b0b0d; }
input::placeholder, textarea::placeholder{ color:var(--faint); }
input[type=file]{ height:auto; padding:10px; font-size:13px; color:var(--muted); background:var(--well); border-style:dashed; }
input[type=file]::file-selector-button{ height:30px; margin-right:12px; padding:0 12px; border-radius:7px; border:1px solid var(--line2); background:var(--surface-3); color:var(--text); font:600 12.5px var(--font); cursor:pointer; }
input[type=checkbox]{ width:16px; height:16px; padding:0; accent-color:var(--portal); box-shadow:none; }
input[disabled], input[readonly]{ color:var(--muted); }
select{ background-color:var(--well); background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px; }
label{ gap:8px; color:var(--text-2); font-size:12.5px; font-weight:550; letter-spacing:0; }
.formGrid, .loginGrid{ gap:18px 16px; margin:4px 0 20px; }
.titleInput{ height:38px; font-size:14.5px; font-weight:600; background:transparent; border-color:transparent; box-shadow:none; padding:0 10px; margin-left:-10px; }
.titleInput:hover{ border-color:var(--line2); background:var(--well); }
.message:not(:empty){ margin-top:14px; padding:11px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); color:var(--text-2); }
.message.error{ color:#ffb3b6; background:rgba(229,51,60,.08); border-color:rgba(229,51,60,.3); }

/* ============================ SURFACES ============================ */
#portalView .panel, #portalView .heroPanel, #portalView .stat{ border-radius:16px; }
.metadataPanel, .pickerPanel{ background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--hi), var(--shadow); }
#portalView .panel{ padding:24px; }
#portalView .panel.wide{ min-height:0; }
#portalView .view > * + *{ margin-top:20px; }
#portalView .panelHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:0 0 22px; padding:0; border:0; }
#portalView .panelHead h3{ margin:0; font-size:17px; font-weight:650; letter-spacing:-.015em; color:var(--text); display:flex; align-items:center; gap:8px; }
#portalView .panelHead p{ margin:6px 0 0; max-width:72ch; color:var(--muted); font-size:13.5px; line-height:1.55; }
#portalView .panelHead > button, #portalView .panelHead .headActions, #portalView .panelHead > .actions{ flex:none; }
.softText{ color:var(--muted); line-height:1.6; font-size:14px; }
.muted{ color:var(--muted); }
.videoMeta{ color:var(--muted); font-size:12.5px; }
.subPanel{ padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--well); }

/* callouts */
.fastInfoBox, .liveNote{ display:flex; gap:12px; padding:14px 16px; margin:0 0 18px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--text-2); font-size:13.5px; line-height:1.55; }
.fastInfoBox strong, .liveNote strong{ color:var(--text); font-weight:600; }
.calloutTitle{ font-weight:600; color:var(--text); margin-bottom:2px; }
.calloutIco{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--portal); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ============================ OVERVIEW ============================ */
#portalView .ovPartner{
  display:flex; align-items:center; gap:16px; padding:16px 18px 16px 20px; margin:0; border-radius:14px;
  border:1px solid var(--portal-line); background:linear-gradient(90deg, var(--portal-soft), transparent 60%), var(--surface); box-shadow:var(--hi);
}
.ovPartnerIco{ width:38px; height:38px; border-radius:10px; font-size:16px; color:var(--portal); background:var(--portal-soft); box-shadow:inset 0 0 0 1px var(--portal-line); }
.ovPartnerTitle{ font-size:14.5px; font-weight:600; color:var(--text); }
.ovPartnerSub{ font-size:13px; color:var(--muted); margin-top:2px; }
.ovPartnerBtn{ height:36px; padding:0 16px; border-radius:9px; font-size:13px; font-weight:600; background:var(--portal); color:var(--portal-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.ovPartner.isMember{ border-color:var(--line2); background:var(--surface); }
.ovPartner.isMember .ovPartnerIco{ color:var(--green); background:rgba(61,220,132,.1); box-shadow:inset 0 0 0 1px rgba(61,220,132,.28); }

#portalView .heroPanel{
  position:relative; overflow:hidden; isolation:isolate; grid-template-columns:minmax(0,1fr) 400px; gap:36px; align-items:center; min-height:0; padding:36px 36px 36px 40px; border-radius:22px;
}
#portalView .heroPanel::before{ content:""; position:absolute; inset:-60px; z-index:-1; pointer-events:none;
  background:radial-gradient(520px 320px at 88% 40%, var(--portal-glow-soft), transparent 70%), radial-gradient(900px 400px at 0% 0%, rgba(190,200,220,.06), transparent 60%); }
#portalView .heroPanel.hasHeroArt::before{
  background:linear-gradient(90deg, rgba(8,8,10,.92) 30%, rgba(8,8,10,.55) 70%, rgba(8,8,10,.35)), var(--hero-art) 75% 50% / cover no-repeat;
  filter:blur(38px) saturate(1.5); opacity:.9; }
#portalView .heroPanel > *:not(.pxEdge){ position:relative; z-index:1; }
.heroPanel .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:#ff8a90; }
.heroPanel .eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--portal); --pc:var(--portal-glow); animation:pxPulse 2s ease-out infinite; }
#portalView .heroPanel h3{ margin:14px 0 12px; font-family:var(--font); font-size:42px; font-weight:800; line-height:1.06; letter-spacing:-.04em; }
#portalView .heroPanel p{ margin:0; max-width:52ch; color:#b4b7be; font-size:15.5px; line-height:1.6; }
.heroArt{ position:relative; min-height:220px; aspect-ratio:16/9; border:0; border-radius:16px; background:var(--well) center/cover no-repeat;
  transform:perspective(1100px) rotateY(-9deg) rotateX(2deg); transform-origin:100% 50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.16), inset 0 1px 0 rgba(255,255,255,.35), -10px 0 40px -18px var(--portal-glow), 0 0 60px -20px var(--portal-glow), 0 40px 70px -30px rgba(0,0,0,1);
  -webkit-box-reflect:below 6px linear-gradient(transparent 62%, rgba(255,255,255,.16)); }
.heroArt::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 28%, transparent 45%), linear-gradient(0deg, rgba(229,51,60,.18), transparent 40%); mix-blend-mode:screen; }
.heroArt .ringLines{ border-color:rgba(255,255,255,.08); inset:28px; }
.heroArt.hasPromotionArt .ringLines{ display:none; }

#portalView .stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:20px 0; }
#portalView .stats.stats5{ grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:0; }
#portalView .stat{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:12px; min-height:0; padding:20px 22px 22px; }
#portalView .stat > span{ order:0; margin:0; padding-right:44px; font-size:11.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
#portalView .stat strong{ order:1; align-self:flex-start; margin:0; font-family:var(--font); font-size:36px; font-weight:750; line-height:1.05; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.statMove strong{ font-size:24px !important; color:var(--text); }
#portalView .stats.stats5 .stat strong{ font-size:32px; white-space:nowrap; }
#portalView .stats .stat > span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#portalView .stats.stats5 .stat > span{ padding-right:38px; font-size:10.5px; letter-spacing:.05em; }
/* tile texture + underglow (shared by Overview/Analytics .stat and My WSN+ .wpStat) */
#portalView .stat, #wpHub .wpStat{ isolation:isolate; }
#portalView .stat::before, #wpHub .wpStat::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120% 70% at 50% 120%, var(--portal-glow-soft), transparent 60%),
             linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0 / 100% 14px;
  -webkit-mask:linear-gradient(180deg, transparent 10%, #000); mask:linear-gradient(180deg, transparent 10%, #000); }
#portalView .stat::after, #wpHub .wpStat::after{ content:""; position:absolute; top:16px; right:16px; z-index:1; width:32px; height:32px; border-radius:10px; pointer-events:none;
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.12), transparent 70%), var(--portal-soft);
  box-shadow:inset 0 0 0 1px var(--portal-line), inset 0 1px 0 rgba(255,255,255,.18), 0 0 20px -4px var(--portal-glow); }
#portalView .stat > span::after, #wpHub .wpStat > .wpStatLbl::after{ content:""; position:absolute; top:24px; right:24px; width:16px; height:16px; z-index:2; pointer-events:none;
  background:#ff9aa0; -webkit-mask:var(--ico, var(--i-trend)) center/contain no-repeat; mask:var(--ico, var(--i-trend)) center/contain no-repeat; filter:drop-shadow(0 0 4px var(--portal-glow)); }
#portalView .stat > span, #wpHub .wpStat > .wpStatLbl{ position:static; }
/* My WSN+ strip is 7 across: chip sits on its own row above the label so labels never wrap */
#wpHub .wpStatStrip .wpStat{ padding-top:54px !important; }
#wpHub .wpStat::after{ top:16px; left:16px; right:auto; width:28px; height:28px; border-radius:9px; }
#wpHub .wpStat > .wpStatLbl::after{ width:14px; height:14px; left:23px; right:auto; top:23px; }
#overview .stats .stat:nth-child(1) > span{ --ico:var(--i-play); }
#overview .stats .stat:nth-child(2) > span{ --ico:var(--i-rows); }
#overview .stats .stat:nth-child(3) > span{ --ico:var(--i-tv); }
#overview .stats .stat:nth-child(4) > span{ --ico:var(--i-eye); }
#analytics .stats .stat:nth-child(1) > span, .wpStat:has(#wpTileViews) > .wpStatLbl{ --ico:var(--i-eye); }
#analytics .stats .stat:nth-child(2) > span, .wpStat:has(#wpTileWatch) > .wpStatLbl{ --ico:var(--i-clock); }
#analytics .stats .stat:nth-child(3) > span, .wpStat:has(#wpTileRank) > .wpStatLbl{ --ico:var(--i-trophy); }
#analytics .stats .stat:nth-child(4) > span, .wpStat:has(#wpTileFollowers) > .wpStatLbl{ --ico:var(--i-users); }
#analytics .stats .stat:nth-child(5) > span, .wpStat:has(#wpTileMove) > .wpStatLbl{ --ico:var(--i-trend); }
.wpStat:has(#wpTileLib) > .wpStatLbl{ --ico:var(--i-grid); }
.wpStat:has(#wpTileTune) > .wpStatLbl{ --ico:var(--i-live); }
#portalView .stat{ box-shadow:var(--lift), 0 22px 40px -32px var(--portal-glow); }
.moveUp, .lbArrowUp{ color:var(--green); text-shadow:none; }
.moveDown, .lbArrowDown{ color:#ff6b72; text-shadow:none; }

.split{ gap:20px; }
.checklist{ gap:2px; }
.check{ display:flex; align-items:center; min-height:46px; padding:10px 12px 10px 42px; border:0; border-radius:10px; background:transparent; color:var(--text-2); font-size:14px; }
.check + .check{ box-shadow:0 -1px 0 var(--line); border-radius:0; }
.check::before{ left:12px; width:18px; height:18px; border:1.5px solid var(--line3); }
.check.done{ color:var(--text-2); background:transparent; border:0; }
.check.done::before{ background:var(--green); border-color:var(--green); }
.check.done::after{ left:18px; border-color:#04170c; }

/* ============================ MODALS / OVERLAYS ============================ */
.metadataEditor, .pickerOverlay{ background:rgba(3,3,5,.66); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.metadataEditor{ align-items:center; }
.metadataPanel{ background:rgba(18,19,23,.94); border-color:var(--line2); border-radius:20px; padding:26px; box-shadow:var(--shadow-lg), var(--hi); }
.pickerPanel{ background:rgba(18,19,23,.96); border-radius:20px; padding:22px; }
.metadataThumbPreview, .uploadThumbnailPreview{ border:1px solid var(--line2); border-radius:12px; background-color:var(--well); color:var(--faint); font-weight:600; font-size:13px; }
.uploadThumbnailPreview{ min-height:0; max-width:420px; }
.masterPickerCard{ background:var(--surface-2); border-color:var(--line); border-radius:12px; }
.wpNotesModal, .wpNotifModal, .wpMemberModal, .wpEventModal{ background:rgba(3,3,5,.66); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.wpNotesSheet, .wpNotifSheet, .wpMemberSheet, .wpEventSheet{ background:rgba(18,19,23,.96); border:1px solid var(--line2); border-radius:20px; box-shadow:var(--shadow-lg), var(--hi); }
.wpNotesHead h3{ font-family:var(--font); font-size:16px; font-weight:650; }
.wpNotesClose, .wpMemberClose, .wpEventCloseBtn{ width:32px; height:32px; padding:0; border-radius:8px; border:1px solid var(--line2); background:var(--surface-2); color:var(--muted); box-shadow:none; }
.wpMemTitle{ font-family:var(--font); font-size:24px; font-weight:700; letter-spacing:-.02em; }
.wpMemPrice strong{ font-family:var(--font); font-size:24px; font-weight:700; }
.wpMemRibbon{ background:var(--portal-soft); color:var(--portal); box-shadow:inset 0 0 0 1px var(--portal-line); letter-spacing:.06em; }
.wpMemCta, .wpNoteBar .wpNoteSave{ background:var(--portal) !important; color:var(--portal-ink) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important; }
.wpNmIcon{ box-shadow:inset 0 0 0 1px var(--portal-line); }
.wpEvTitle{ font-weight:700; letter-spacing:-.02em; }
.wpEvKicker{ color:var(--portal); font-weight:700; }

/* ============================ UPLOAD STUDIO ============================ */
.uploadPanel .dropZone{
  display:block; margin:0 0 20px; padding:44px 20px; text-align:center; cursor:pointer;
  border:1.5px dashed var(--line3); border-radius:14px; background:var(--well); transition:border-color var(--t), background var(--t);
}
.uploadPanel .dropZone:hover, .uploadPanel .dropZone.drag{ border-color:var(--portal); background:var(--portal-soft); box-shadow:none; }
.dzIcon{ width:56px; height:56px; margin:0 auto 16px; border-radius:16px; font-size:20px; color:#fff; background:radial-gradient(circle at 50% 25%, rgba(255,255,255,.16), transparent 70%), var(--portal-soft); box-shadow:inset 0 0 0 1px var(--portal-line), inset 0 1px 0 rgba(255,255,255,.25), 0 0 34px -8px var(--portal-glow); }
.dzIcon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dzTitle{ font-size:15px; font-weight:600; color:var(--text); }
.dzTitle span{ color:var(--portal); }
.dzHint{ font-size:12.5px; color:var(--faint); margin-top:6px; }
.autopilotBar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 22px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.autopilotBar .fieldHint{ margin:0; }
.durationBox > span{ color:var(--text-2); font-size:12.5px; font-weight:550; }
.durationInputs label{ color:var(--muted); font-weight:500; font-size:11.5px; }
.durationInputs input[readonly]{ color:var(--text); background:var(--surface-2); border-color:var(--line2); font-weight:650; }
.uploadMeter{ height:6px; margin:4px 0 20px; border:0; background:var(--surface-3); }
#uploadBar{ background:var(--portal); box-shadow:none; }
.importJob{ border:1px solid var(--line); border-left-width:3px; border-radius:10px; background:var(--surface-2); }
.uploadJobBarFill{ background:var(--portal); }

/* ============================ MEDIA LIBRARY ============================ */
.gridList{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
#portalView .videoCard{
  display:flex; flex-direction:column; border-radius:16px;
}
.videoCard .thumb{ position:relative; margin:8px 8px 0; border-radius:11px; background-color:var(--well); color:var(--faint); font-size:12px; font-weight:700; letter-spacing:.06em;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px -14px rgba(0,0,0,1); transition:box-shadow 220ms var(--out); }
#portalView .videoCard:hover .thumb{ box-shadow:0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.3), 0 0 24px -6px var(--portal-glow), 0 14px 28px -14px rgba(0,0,0,1); }
.videoCard .videoBody{ flex:1; display:flex; flex-direction:column; padding:12px 14px 14px; }
.videoCard .videoTitle{ font-size:14px; font-weight:600; line-height:1.35; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.videoCard .videoMeta{ margin-top:4px; font-size:12px; color:var(--faint); }
.videoCard .videoMeta + .videoMeta{ margin-top:2px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; opacity:.8; }
.videoCard .cardActions{ margin-top:auto; padding-top:12px; gap:6px; }
.videoCard .cardActions .smallBtn{ height:28px; padding:0 10px; font-size:12px; border-radius:7px; }
.videoCard.vcBad{ border-color:rgba(240,90,100,.35); }
.videoCard.vcSel{ border-color:var(--portal) !important; box-shadow:0 0 0 1px var(--portal) !important; }
.vcCheck{ top:16px; left:16px; border-radius:6px; background:rgba(0,0,0,.6); }
.upBadge{ margin:8px 0 2px; padding:6px 9px; border-radius:7px; font-size:12px; font-weight:550; }
.schBadge, .abBadge{ align-self:flex-start; margin:8px 0 0; padding:3px 9px; font-size:11.5px; font-weight:600; border-radius:999px; color:var(--text-2); background:var(--surface-3); border:1px solid var(--line2); }
.pager{ margin-top:24px; gap:10px; font-weight:500; color:var(--muted); }
.headActions{ display:flex; gap:8px; align-items:center; }
.bulkBar{ border:1px solid var(--portal-line); background:var(--portal-soft); box-shadow:none; border-radius:12px; }
.bulkSelect{ height:32px; }

/* ============================ ROWS / FAST BUILDER ============================ */
.rowBuilder{ gap:16px; }
#portalView .builderRow{ padding:18px 18px 10px; border-radius:16px; overflow:visible; }
.builderTop{ align-items:flex-start; padding-bottom:14px; border-bottom:1px solid var(--line); }
.builderTitle{ font-size:15px; font-weight:600; color:var(--text); }
.miniActions{ gap:6px; }
.miniActions .smallBtn{ height:30px; padding:0 11px; font-size:12px; border-radius:7px; }
.inlinePicker{ margin:12px 0 0; padding:0; border:0; background:transparent; }
.builderVideos{ gap:0; margin-top:6px; }
#portalView .playlistItem{
  grid-template-columns:112px minmax(0,1fr) auto; gap:14px; padding:10px 6px; margin:0;
  background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none;
  transition:background var(--t);
}
#portalView .playlistItem:last-child{ border-bottom:0; }
#portalView .playlistItem:hover{ background:rgba(255,255,255,.025); border-color:var(--line); }
.playlistThumb{ border-radius:8px; background-color:var(--well); color:var(--faint); font-size:12px; font-weight:700; box-shadow:0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px -8px rgba(0,0,0,1); }
#portalView .playlistItem:hover .playlistThumb{ box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 0 18px -5px var(--portal-glow); }
.playlistItem .videoTitle{ font-size:13.5px; font-weight:600; }
.playlistItem .videoMeta{ font-size:12px; color:var(--faint); margin-top:3px; }
.builderVideos > .chip{ margin:12px 0 8px; }
#portalView .channelEditor{ grid-template-columns:minmax(0,1fr) 200px; gap:14px 18px; align-items:start; margin:16px 0 0; padding:18px; background:var(--well); border:1px solid var(--line); border-radius:12px; box-shadow:none; }
.channelEditor .full{ grid-column:1 / 2; }
.channelThumb{ grid-column:2; grid-row:1 / span 2; width:100%; border:1px solid var(--line2); border-radius:9px; background-color:var(--surface-2); color:var(--faint); font-weight:700; }
.channelEditor .fileBox{ grid-column:2; }
.channelEditor > button{ grid-column:1; justify-self:start; }

/* ---- Go Live console ---- */
.liveDot{ width:9px; height:9px; margin:0; }
.lvHero{ padding:22px 24px; margin-bottom:24px; border-radius:16px; }
.lvHeroGlow{ background:radial-gradient(closest-side, var(--portal-glow-soft), transparent 70%); }
.lvHeroReady .lvHeroGlow{ background:radial-gradient(closest-side, rgba(61,220,132,.12), transparent 70%); }
.lvHero.lvHeroLive{ background:linear-gradient(135deg, var(--portal-soft), transparent 60%) padding-box, linear-gradient(var(--glass), var(--glass)) padding-box, linear-gradient(145deg, var(--portal), rgba(255,255,255,.1) 40%, var(--portal-line)) border-box; box-shadow:var(--lift), 0 0 40px -12px var(--portal-glow); }
.lvStatusRow{ margin-bottom:16px; gap:14px; }
.lvStatusDot{ width:12px; height:12px; background:var(--faint); box-shadow:0 0 0 4px rgba(255,255,255,.05); }
.lvHeroReady .lvStatusDot{ background:var(--green); box-shadow:0 0 0 4px rgba(61,220,132,.14); }
.lvStatusTitle{ font-size:18px; font-weight:650; letter-spacing:-.02em; }
.lvStatusSub{ font-size:13.5px; }
.lvHeroTitle{ font-size:20px; font-weight:650; }
.lvHeroIcon{ font-size:30px; filter:none; }
.lvSection{ margin-bottom:26px; }
.lvSecHead{ font-size:14px; font-weight:600; gap:10px; margin-bottom:12px; }
.lvStep{ width:22px; height:22px; font-size:11.5px; font-weight:700; color:var(--text); background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line2); }
.lvModes{ gap:12px; }
.lvMode{ padding:16px; border-radius:12px; border:1px solid var(--line2); background:var(--surface-2); box-shadow:var(--hi); color:var(--text); }
.lvMode:hover{ border-color:var(--line3); transform:none; filter:none; }
.lvMode.on{ border-color:var(--portal); background:linear-gradient(135deg, var(--portal-soft), transparent 70%), var(--surface-2); box-shadow:0 0 0 1px var(--portal) inset; }
.lvModeIcon{ font-size:18px; }
.lvModeName{ font-size:14.5px; font-weight:600; }
.lvModeDesc{ font-size:12.5px; }
.lvModeCheck{ width:18px; height:18px; border-width:1.5px; }
.lvMode.on .lvModeCheck{ border-color:var(--portal); background:var(--portal); }
.lvConn{ padding:18px; border-radius:12px; background:var(--well); border:1px solid var(--line); gap:16px; }
.lvField label{ font-size:12.5px; font-weight:550; color:var(--text-2); }
.lvInput input{ height:44px; padding:0 14px; font-size:14px; border-radius:10px; background:var(--surface); border:1px solid var(--line2); }
.lvInput input:focus{ border-color:var(--portal); box-shadow:0 0 0 3px var(--portal-soft), 0 0 22px -6px var(--portal-glow); }
.lvCopy{ height:44px !important; padding:0 16px; border-radius:10px; font-size:13px; font-weight:600; background:var(--surface-2); border:1px solid var(--line2); color:var(--text); box-shadow:var(--hi); }
.lvCopy:hover{ border-color:var(--line3); filter:none; box-shadow:var(--hi); }
.lvEncoders{ gap:12px; }
.lvEncoder{ border-radius:12px; padding:16px 18px; background:var(--surface-2); border-color:var(--line); }
.lvEncoderTop{ font-size:14px; font-weight:600; }
.lvSteps li{ font-size:13px; color:var(--text-2); }
.lvSteps li::before{ background:var(--surface-3); color:var(--text-2); box-shadow:inset 0 0 0 1px var(--line2); font-weight:600; }
.lvBtn{ height:auto; padding:11px 20px; border-radius:10px; font-weight:600; box-shadow:var(--hi); }
.lvBtnLg{ padding:12px 22px; font-size:14px; font-weight:600; }
.lvBtnPrimary{ background:var(--portal); color:var(--portal-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.lvBtnPrimary:hover{ transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 8px 22px -10px var(--portal-glow); }
.lvBtnStop{ background:var(--surface-3); border:1px solid var(--line3); color:var(--text); }
.lvBtnGhost{ background:transparent; border:1px solid var(--line2); color:var(--text-2); }
.lvFootRow{ border-radius:12px; padding:16px 18px; background:var(--surface-2); border:1px solid var(--line); }
.lvFootNote{ color:var(--muted); }
.lvOverride{ color:var(--portal); }
.lvAutoHint{ color:var(--text-2); }

/* ---- Premieres ---- */
#premierePanel{ margin-bottom:0; }
.premiereForm{ gap:14px; margin:0 0 18px; align-items:end; }
.premiereForm > button{ height:44px; }
.premiereList{ gap:0; }
.premiereRow{ padding:12px 6px; gap:16px; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; }
.premiereRow.isLive{ border-color:var(--line); box-shadow:none; background:linear-gradient(90deg, var(--portal-soft), transparent 50%); border-radius:10px; }
.premiereThumb{ width:104px; height:58px; border-radius:8px; box-shadow:0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.22), 0 0 16px -6px var(--portal-glow); }
.premiereTitle{ font-size:14px; font-weight:600; }
.premiereStatus{ font-size:11px; font-weight:650; letter-spacing:.06em; color:var(--muted); }
.premiereStatus.st-live{ color:var(--portal); }

/* ============================ PPV ============================ */
.ppvModes{ display:flex; gap:8px; margin:0 0 18px; }
.ppvModes button{ flex:1; }
.ppvCreator .field{ margin-bottom:16px; }
.ppvCreator .field > label{ display:block; margin-bottom:8px; }
.ppvThumbRow{ display:flex; gap:14px; align-items:flex-start; }
.ppvThumbRow input{ flex:1; }
#ppvThumbPreview{ width:70px; height:105px; object-fit:cover; border-radius:8px; border:1px solid var(--line2); }
.ppvPriceRow{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding-top:16px; margin-top:4px; border-top:1px solid var(--line); }
.ppvPriceField{ display:inline-flex; align-items:center; gap:8px; color:var(--text-2); font-size:13.5px; font-weight:550; }
.ppvPriceField input{ width:120px; }
#ppvAddViewer{ color:var(--green); font-weight:600; font-size:13.5px; }
.ppvPriceRow #addPpvBtn{ margin-left:auto; }
#ppvList .accessRow{ padding:12px 4px !important; border-bottom:1px solid var(--line) !important; }
#ppvList .accessRow > div:first-child{ border-radius:7px !important; background-color:var(--well) !important; box-shadow:inset 0 0 0 1px var(--line); }
#ppvList .titleInput{ background:var(--well); border-color:var(--line2); margin:0; }

/* ============================ PAGE DESIGN ============================ */
.artPreviewGrid{ grid-template-columns:300px minmax(0,1fr); gap:16px; margin:4px 0 0; }
.artPreviewCard{ padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--well); }
.artPreviewHead{ font-size:12.5px; color:var(--muted); margin-bottom:12px; }
.artPreviewHead strong{ font-size:11px; font-weight:650; letter-spacing:.06em; color:var(--muted); padding:3px 8px; border-radius:999px; border:1px solid var(--line2); }
.artPreview{ border:1px solid var(--line2); border-radius:9px; background-color:var(--surface-2); color:var(--faint); font-weight:700; }
.fileBox input{ height:auto; }

/* ============================ PAGE PREVIEW ============================ */
.pp-h{ font-size:12px !important; font-weight:650 !important; letter-spacing:.07em !important; color:var(--text-2) !important; }
.pp-note{ color:var(--faint) !important; }
.pp-gridStrip{ background:var(--well) !important; border:1px solid var(--line) !important; border-radius:14px !important; }
.pp-tv{ border:1px solid var(--line2) !important; border-radius:14px !important; box-shadow:var(--shadow-lg); }
.pp-tile.mine{ border-color:var(--portal) !important; box-shadow:0 0 0 3px var(--portal-soft) !important; }
.pp-tileTag{ color:var(--text-2) !important; }

/* ============================ ANALYTICS ============================ */
.tableLite{ gap:0; border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; background:var(--glass-deep); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
#portalView .analyticsCard{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; padding:14px 18px;
  border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; transition:background var(--t);
}
#portalView .analyticsCard:last-child{ border-bottom:0; }
#portalView .analyticsCard:hover{ background:rgba(255,255,255,.03); transform:none; border-color:var(--line); }
#portalView .analyticsCard:hover{ background:linear-gradient(90deg, rgba(255,255,255,.045), rgba(255,255,255,.01)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 30px -14px var(--portal-glow); }
#portalView .analyticsCard.currentPromotion{ background:linear-gradient(90deg, var(--portal-soft), rgba(229,51,60,0) 70%); box-shadow:inset 3px 0 0 var(--portal), inset 0 0 0 1px var(--portal-line), 0 0 34px -14px var(--portal-glow); }
.analyticsCard.currentPromotion .builderTitle{ color:var(--text); }
.analyticsCard .builderTitle{ font-size:14px; font-weight:600; }
.analyticsCard .videoMeta{ margin-top:3px; font-size:12px; color:var(--faint); }
.rankNumber{ min-width:26px; margin-right:8px; color:var(--faint); font-weight:600; font-variant-numeric:tabular-nums; }
#analyticsList > .analyticsCard:nth-child(-n+3) .rankNumber{ display:inline-grid; place-items:center; min-width:0; width:24px; height:24px; margin-right:10px; border-radius:50%; font-size:11px; font-weight:800; vertical-align:middle; }
#analyticsList > .analyticsCard:nth-child(-n+3) .rankNumber{ font-size:0; }
#analyticsList > .analyticsCard:nth-child(1) .rankNumber::before{ content:"1"; font-size:11px; }
#analyticsList > .analyticsCard:nth-child(2) .rankNumber::before{ content:"2"; font-size:11px; }
#analyticsList > .analyticsCard:nth-child(3) .rankNumber::before{ content:"3"; font-size:11px; }
#analyticsList > .analyticsCard:nth-child(1) .rankNumber{ color:#3a2600; background:radial-gradient(circle at 32% 26%, #fff8d8 0%, #ffd866 24%, #e0a526 52%, #9a6a0c 82%, #5e3f04 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 1px rgba(255,214,102,.45), 0 0 14px -2px rgba(255,196,60,.55); }
#analyticsList > .analyticsCard:nth-child(2) .rankNumber{ color:#22252b; background:radial-gradient(circle at 32% 26%, #ffffff 0%, #e9ecf1 26%, #b4b9c2 54%, #7d838d 82%, #4d525a 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1px rgba(230,234,240,.4), 0 0 14px -2px rgba(220,226,236,.45); }
#analyticsList > .analyticsCard:nth-child(3) .rankNumber{ color:#2e1404; background:radial-gradient(circle at 32% 26%, #ffe6cc 0%, #f0a868 26%, #c06a2c 54%, #82410f 82%, #4d2306 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(240,168,104,.4), 0 0 14px -2px rgba(230,140,70,.5); }
.top10Tag{ font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--text-2); border:1px solid var(--line2); background:var(--surface-2); padding:2px 7px; }
.metricStrip{ display:flex; align-items:center; gap:22px; margin:0; }
.metricStrip span{ padding:0; border:0; background:none; font-size:12px; color:var(--faint); text-align:right; }
.metricStrip strong{ display:block; margin:0 0 1px; font-size:15px; font-weight:650; color:var(--text); font-variant-numeric:tabular-nums; }
.analyticsProfileBtn{ height:30px; padding:0 12px; border-radius:7px; font-size:12px; font-weight:600; background:var(--surface-2); border:1px solid var(--line2); color:var(--text); box-shadow:none; }
.analyticsProfileBtn:hover{ border-color:var(--line3); background:var(--surface-3); filter:none; box-shadow:none; }
.analyticsDetails{ grid-column:1 / -1; border-top-color:var(--line); }
.videoAnalytic{ background:transparent; border-bottom:1px solid var(--line); border-radius:0; padding:10px 4px; }
.tableRow{ grid-template-columns:1fr auto auto; padding:14px 18px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.tableRow:last-child{ border-bottom:0; }
.tableRow strong{ font-weight:600; font-size:14px; }
#analyticsUpdatedAt{ display:inline-flex; align-items:center; gap:7px; color:var(--muted); }
#analyticsUpdatedAt:not(:empty)::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(61,220,132,.15); }

/* ============================ HEALTH / HISTORY ============================ */
.healthScore{ gap:20px; margin:0 0 24px; padding:20px; border:1px solid var(--line); border-radius:14px; background:var(--well); }
.hsRing{ width:84px; height:84px; box-shadow:inset 0 0 0 8px var(--well); }
.hsPct{ font-size:26px; font-weight:700; letter-spacing:-.03em; }
.hsGrade{ font-size:17px; font-weight:650; }
.hsGrade.bad, .hsRing.bad{ --c:#ff6b72; }
.healthCard{ padding:18px 20px; border-radius:14px; }
.healthCardHead h4{ font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px; }
.hcCount{ background:var(--surface-3); color:var(--text); box-shadow:inset 0 0 0 1px var(--line2); font-weight:650; }
.hcItem{ background:var(--well); border-color:var(--line); }
.healthAllClear{ color:var(--green); background:rgba(61,220,132,.06); border-color:rgba(61,220,132,.25); font-weight:600; }
.historyBody{ gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.histRow{ padding:14px 18px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.histRow:last-child{ border-bottom:0; }
.histRow:hover{ background:rgba(255,255,255,.02); }
.histAction{ font-size:14px; font-weight:600; }
.histDetail{ color:var(--text-2); }
.histUndoneTag{ color:var(--muted); }

/* ============================ MESSAGES (admin thread) ============================ */
.messagesSupport{ border-radius:12px; background:var(--surface-2); border-color:var(--line); }
.msSupHead{ font-weight:650; color:var(--faint); }
.msSupCard{ background:var(--surface-3); border-color:var(--line2); box-shadow:none; height:auto; }
.messageThread{ gap:10px; padding:18px; max-height:520px; border:1px solid var(--line); border-radius:12px; background:var(--well); }
.messageBubble{ max-width:68%; padding:11px 14px; border-radius:16px; background:var(--surface-2); border:1px solid var(--line); box-shadow:none; }
.messageRow.theirs .messageBubble{ border-bottom-left-radius:5px; }
.messageRow.mine .messageBubble{ background:var(--portal); border-color:transparent; color:var(--portal-ink); border-bottom-right-radius:5px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px -14px var(--portal-glow); }
.messageRow.mine .messageSender, .messageRow.mine .messageTime, .messageRow.mine .messageReceipt, .messageRow.mine .messageBody{ color:inherit; }
.messageRow.mine .messageTime, .messageRow.mine .messageReceipt{ opacity:.75; }
.messageSender{ font-size:11.5px; font-weight:600; color:var(--muted); }
.messageBody{ font-size:14px; line-height:1.5; }
.messageReceipt.read{ color:inherit; }
.messageComposer{ border-top:0; padding-top:0; margin-top:14px; }
.messageComposer textarea{ min-height:76px; }
.messageEmpty{ color:var(--faint); }

/* ============================ RESOURCES ============================ */
.resGroupLabel{ color:var(--faint) !important; font-weight:650 !important; letter-spacing:.08em !important; }
.resGroupLabel::after{ background:var(--line) !important; }
.resItem{ border-radius:12px !important; padding:12px 14px !important; height:auto; }
.resItem::before{ display:none; }
.resItem:hover{ filter:none; }
.resItem.on{ background:linear-gradient(90deg, var(--portal-soft), transparent 70%) padding-box, linear-gradient(var(--glass-2), var(--glass-2)) padding-box, linear-gradient(145deg, var(--portal), rgba(255,255,255,.08) 45%, var(--portal-line)) border-box; box-shadow:var(--lift), 0 0 28px -14px var(--portal-glow); }
.resItemIcon{ width:38px !important; height:38px !important; border-radius:10px !important; font-size:17px !important; background:var(--surface-3) !important; box-shadow:inset 0 0 0 1px var(--line2) !important; }
.resItemTitle{ font-size:14px !important; font-weight:600 !important; color:var(--text); }
.resItemPill{ background:transparent !important; border-color:var(--line2) !important; color:var(--muted) !important; }
.resItemDesc{ color:var(--faint) !important; }
.resReader{ background:var(--well) !important; border:1px solid var(--line) !important; border-radius:14px !important; box-shadow:none !important; }
.resReaderBar{ background:var(--surface) !important; border-bottom-color:var(--line) !important; }
.resReaderBody{ background:var(--well) !important; }
.resReaderEmpty, .resTocEmpty{ color:var(--faint) !important; }

/* ============================ HELP ============================ */
#help .panel{ padding:0 !important; overflow:hidden; }
#helpFrame{ display:block; width:100%; height:calc(100vh - 150px); min-height:560px; border:0; background:var(--well); }

/* ============================ ADMIN ============================ */
.connectLinkBox{ border:1px solid var(--line2); border-radius:12px; background:var(--surface-2); }
.connectLinkBox .clbHead{ color:var(--text); font-weight:600; }
.connectLinkBox .clbHead span, .connectLinkBox .clbNote{ color:var(--muted); }
.connectLinkBox .clbRow input{ background:var(--well); color:var(--text); border:1px solid var(--line2); }
.connectLinkBox .clbRow button{ background:var(--portal); color:var(--portal-ink); }
.prRow{ border-color:var(--line); border-radius:12px; background:var(--surface-2); }
.prThumb{ background-color:var(--well); }
.promoRowsAdd{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.promoRowsAdd input{ flex:1; min-width:260px; }
.impersonateBanner{ border-radius:12px; background:var(--surface-2); color:var(--text); border:1px solid var(--line2); box-shadow:inset 3px 0 0 var(--silver); font-weight:500; }
.impersonateBanner .smallBtn{ background:var(--surface-3); border:1px solid var(--line2); color:var(--text); }
body.impersonating .topbar{ box-shadow:inset 0 -2px 0 var(--silver); }

/* ============================ MY WSN+ HUB ============================ */
.wpHub{ margin-top:0; gap:20px; }
#wpHub .wpHubHero{ margin:0; border-radius:22px; isolation:isolate; }
#wpHub .wpHubHero{ overflow:hidden; }
#wpHub .wpHeroCover{ opacity:.85; filter:blur(30px) saturate(1.5) brightness(.75); transform:scale(1.25); border-radius:inherit; }
#wpHub .wpHubHero::after{ border-radius:inherit; background:linear-gradient(90deg, rgba(8,8,10,.9) 18%, rgba(8,8,10,.55) 60%, rgba(8,8,10,.25)), radial-gradient(600px 260px at 12% 120%, var(--portal-glow-soft), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%); }
#wpHub .wpHeroInner{ gap:28px; padding:34px 34px 38px; min-height:0; }
#wpHub .wpHeroAvatar{ position:relative; width:104px; height:104px; border-radius:24px; border:0; font-family:var(--font); font-weight:700; font-size:26px; color:var(--text); background-color:var(--surface-2);
  box-shadow:0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 4px rgba(255,255,255,.03), 0 0 36px -6px var(--portal-glow), 0 24px 40px -18px rgba(0,0,0,1);
  -webkit-box-reflect:below 4px linear-gradient(transparent 70%, rgba(255,255,255,.14)); }
#wpHub .wpHeroAvatar::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(135deg, rgba(255,255,255,.28), transparent 42%); mix-blend-mode:screen; }
.wpBadge, #wpHub .wpBadge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:none; color:var(--text-2); background:rgba(255,255,255,.05); border:1px solid var(--line2); }
#wpHub .wpHeroBadge{ margin-bottom:10px; }
#wpHub .wpHeroName{ margin:0 0 12px; font-family:var(--font); font-size:40px; font-weight:800; letter-spacing:-.045em; line-height:1.06; }
#wpHub .wpHeroMeta{ gap:12px; }
.wpStatusPill{ margin:0; height:26px; padding:0 10px; font-size:12px; font-weight:600; }
.wpStatusPill.active{ color:var(--green); background:rgba(61,220,132,.08); border:1px solid rgba(61,220,132,.28); }
#wpHub .wpMbDetail{ font-size:13px; color:var(--muted); }
#wpHub .wpHeroActions{ gap:8px; }
#wpHub .wpHeroBtn{ height:38px; padding:0 15px; border-radius:10px; font-size:13px; font-weight:600; background:var(--surface-2); border:1px solid var(--line2); color:var(--text); box-shadow:var(--hi); }
#wpHub .wpHeroBtn:hover{ border-color:var(--line3); background:var(--surface-3); box-shadow:var(--hi); filter:none; }
#wpHub .wpHeroBtn.primary{ background:var(--portal); color:var(--portal-ink); border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
#wpHub .wpHeroBtn.primary:hover{ filter:brightness(1.08); background:var(--portal); }
#wpHub .wpHeroBtn.ghost{ background:transparent; border-color:transparent; color:var(--muted); box-shadow:none; }
#wpHub .wpHubTabs{ display:flex; gap:4px; margin:0; padding:4px; width:max-content; max-width:100%; border:1px solid transparent; border-radius:14px;
  background:linear-gradient(var(--glass), var(--glass)) padding-box, var(--edge) border-box; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--lift); }
#wpHub .wpHubTab{ height:34px; padding:0 14px; margin:0; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:13px; font-weight:550; box-shadow:none; display:inline-flex; align-items:center; gap:6px; }
#wpHub .wpHubTab::after{ display:none; }
#wpHub .wpHubTab:hover{ color:var(--text); background:rgba(255,255,255,.04); filter:none; box-shadow:none; }
#wpHub .wpHubTab{ position:relative; transition:color var(--t), background var(--t); }
#wpHub .wpHubTab.active{ color:#fff; background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.07), 0 6px 18px -10px rgba(0,0,0,.9); }
#wpHub .wpHubTab.active::after{ display:block; content:""; position:absolute; left:22%; right:22%; bottom:-1px; top:auto; height:2px; border-radius:2px; background:var(--portal); box-shadow:0 0 10px 1px var(--portal-glow); }
.wpHubBadge, #wpHub .wpHubBadge{ min-width:18px; height:18px; padding:0 5px; margin:0; font-size:10.5px; font-weight:700; background:var(--portal); color:var(--portal-ink); }
.wpHubBadge.hidden{ display:none !important; }

#wpHub .wpDash3{ gap:16px; }
#wpHub .wpTopCard, .wpCalCard, .wpCalDay, .wpEventForm, .wpPayCard, .wpPoolCard, .wpPayNote, .wpMsgMain, .wpThreadList{ border-radius:18px !important; }
#wpHub .wpTopCard{ padding:18px 18px 16px !important; }
#wpHub .wpTopHead{ display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:0; border:0; font-size:14px; font-weight:600; letter-spacing:-.01em; text-transform:none; color:var(--text); }
#wpHub .wpTopHead > span:not([class]){ font-size:12px; font-weight:400; color:var(--faint); }
.wpLinkBtn, #wpHub .wpLinkBtn{ height:auto; padding:2px 0; margin-left:auto; background:none !important; border:0; box-shadow:none !important; color:var(--muted) !important; font-size:12.5px; font-weight:550; }
.wpLinkBtn:hover{ color:var(--text) !important; text-decoration:none; filter:none; }
.wpTopEmpty{ padding:20px 4px; color:var(--faint); font-size:13px; }
.wpGhost, .wpGhostSm, #wpHub .wpGhostSm{ height:28px; padding:0 10px; border-radius:7px; border:1px solid var(--line2); background:transparent; color:var(--muted); font-size:12px; font-weight:550; box-shadow:none; }
.wpGhost:hover{ color:var(--text); border-color:var(--line3); filter:none; box-shadow:none; }
.wpGhost.wpGhost{ height:32px; padding:0 12px; }
#wpHub .wpNotifActions{ display:inline-flex; gap:6px; margin-left:auto; }
#wpHub .wpNotifCard .wpNotifList{ margin:0 -6px; }
.wpNotif, #wpHub .wpNotif{ grid-template-columns:32px 1fr 26px; gap:12px; padding:11px 8px; border-bottom:1px solid var(--line); border-radius:8px; }
.wpNotif:last-child{ border-bottom:0; }
.wpNotif.unread{ background:transparent; }
.wpNotif.unread::before{ left:-2px; top:16px; bottom:auto; width:6px; height:6px; border-radius:50%; background:var(--portal); }
.wpNotifIcon{ width:32px; height:32px; border-radius:9px; font-size:14px; background:var(--surface-2); border:1px solid var(--line); }
.wpNotifName{ font-size:13.5px; font-weight:600; }
.wpNotifBody{ font-size:12.5px; }
.wpNotifDel{ width:26px; height:26px; padding:0; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--faint); font-size:11px; box-shadow:none; opacity:0; transition:opacity var(--t); }
.wpNotif:hover .wpNotifDel{ opacity:1; }
.wpNotifDel:hover{ border-color:var(--line2); color:var(--text); filter:none; box-shadow:none; }
#wpHub .wpNotepad{ border-radius:10px; background:var(--well); border:1px solid var(--line2); font-size:14px; }
#wpHub .wpNoteBar .wpNoteSave{ height:32px; padding:0 12px; font-size:12.5px; border-radius:8px; }
#wpHub .wpNoteBar .wpLinkBtn{ margin-left:4px; }
#wpHub .wpNoteSaved{ color:var(--green); }
.wpMqRow, #wpHub .wpMqRow{ height:auto; padding:10px 6px !important; border:0 !important; border-top:1px solid var(--line) !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:var(--text) !important; font-weight:400; }
#wpHub .wpMsgQuick .wpMqRow:first-child{ border-top:0 !important; }
.wpMqRow:hover{ background:rgba(255,255,255,.025) !important; filter:none; }
.wpMqName{ font-size:13.5px; font-weight:600; }
.wpMqRow.unread .wpMqName{ color:var(--text); }
.wpMqRow .wpThreadDot{ top:16px; right:6px; box-shadow:none; }

#wpHub .wpStatStrip{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
#wpHub .wpStat, .wpPayStats .wpStat, .wpPoolStats .wpStat{
  position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:10px; text-align:left; padding:16px 16px 18px !important; border-radius:16px !important;
}
#wpHub .wpStatVal, .wpStatVal{ order:1; font-family:var(--font) !important; font-size:26px !important; font-weight:700; line-height:1.1; letter-spacing:-.035em; font-variant-numeric:tabular-nums; text-shadow:none !important; }
#wpTileMove{ color:var(--text); }
#wpHub .wpStatLbl, .wpStatLbl{ order:0; margin:0; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); }
#wpHub .wpStat.wpStatTune .wpStatLbl{ color:var(--muted); }
#wpHub .wpStat.wpStatLive .wpStatLbl::before{ background:var(--portal); box-shadow:none; width:6px; height:6px; }
#wpHub .wpStat.wpMoveUp{ background:linear-gradient(180deg, rgba(61,220,132,.10), rgba(61,220,132,0) 70%) padding-box, linear-gradient(var(--glass), var(--glass)) padding-box, linear-gradient(145deg, rgba(61,220,132,.55), rgba(255,255,255,.06) 40%, rgba(61,220,132,.2)) border-box; box-shadow:var(--lift), 0 18px 40px -26px rgba(61,220,132,.7); }
#wpHub .wpStat.wpMoveDown{ background:linear-gradient(180deg, rgba(255,107,114,.10), rgba(255,107,114,0) 70%) padding-box, linear-gradient(var(--glass), var(--glass)) padding-box, linear-gradient(145deg, rgba(255,107,114,.55), rgba(255,255,255,.06) 40%, rgba(255,107,114,.2)) border-box; box-shadow:var(--lift), 0 18px 40px -26px rgba(255,107,114,.7); }
#wpTileMove{ font-size:26px !important; text-shadow:none !important; }
#wpTileMove .moveUp{ color:#4ff09a; filter:drop-shadow(0 0 10px rgba(61,220,132,.75)); }
#wpTileMove .moveDown{ color:#ff6b72; filter:drop-shadow(0 0 10px rgba(255,107,114,.75)); }

#wpHub .wpMcHead{ font-size:13px; font-weight:600; text-align:left; margin:0 0 10px; color:var(--text-2); }
#wpHub .wpMcDow{ font-size:10.5px; font-weight:600; color:var(--faint); }
#wpHub .wpMcDay{ font-size:12.5px; border-radius:8px; color:var(--muted); }
#wpHub .wpMcDay.today{ background:var(--portal); color:var(--portal-ink); box-shadow:none; font-weight:650; }
#wpHub .wpMcDay.has{ color:var(--text); font-weight:600; }
#wpHub .wpMcDot{ background:var(--portal); box-shadow:none; }
#wpHub .wpMcDay.today .wpMcDot{ background:var(--portal-ink); }

.lbEspnList{ margin:0 -6px; }
.lbEspn{ grid-template-columns:24px 46px 1fr 20px; gap:12px; padding:9px 6px; border:0; border-bottom:1px solid var(--line); border-radius:8px; }
.lbEspn:last-child{ border-bottom:0; }
.lbEspn{ transition:background var(--t), box-shadow var(--t); }
.lbEspn:hover{ background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 0 26px -12px var(--portal-glow); }
.lbEspn.me{ background:linear-gradient(90deg, var(--portal-soft), rgba(255,255,255,.01) 80%); box-shadow:inset 0 0 0 1px var(--portal-line), 0 0 26px -12px var(--portal-glow); }
.lbEspnRank{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; font-family:var(--font); font-size:12px; font-weight:750; color:var(--muted); text-shadow:none !important;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); }
.lbEspnThumb{ width:46px; height:28px; border-radius:7px; border:0; box-shadow:0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px -4px rgba(0,0,0,.9), 0 0 12px -4px var(--portal-glow); }
/* metallic medals (also used by the ticker + analytics top 3) */
.lbEspnRank.g, .lbtRank.g, .pxMedal.g{ color:#3a2600; background:radial-gradient(circle at 32% 26%, #fff8d8 0%, #ffd866 24%, #e0a526 52%, #9a6a0c 82%, #5e3f04 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.35), 0 0 0 1px rgba(255,214,102,.45), 0 0 14px -2px rgba(255,196,60,.55); }
.lbEspnRank.s, .lbtRank.s, .pxMedal.s{ color:#22252b; background:radial-gradient(circle at 32% 26%, #ffffff 0%, #e9ecf1 26%, #b4b9c2 54%, #7d838d 82%, #4d525a 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 3px rgba(0,0,0,.35), 0 0 0 1px rgba(230,234,240,.4), 0 0 14px -2px rgba(220,226,236,.45); }
.lbEspnRank.b, .lbtRank.b, .pxMedal.b{ color:#2e1404; background:radial-gradient(circle at 32% 26%, #ffe6cc 0%, #f0a868 26%, #c06a2c 54%, #82410f 82%, #4d2306 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 3px rgba(0,0,0,.35), 0 0 0 1px rgba(240,168,104,.4), 0 0 14px -2px rgba(230,140,70,.5); }
.lbEspnName{ font-size:13.5px; font-weight:600; }
.lbEspnSub{ font-size:11.5px; color:var(--faint); }
.lbEspnYou{ background:var(--portal); color:var(--portal-ink); font-size:9px; padding:1px 5px; border-radius:4px; }
.lbArrowUp, .lbArrowDown{ text-shadow:none; font-size:11px; }

#wpHub .wpUpRow{ grid-template-columns:42px 42px 1fr; padding:9px 2px !important; }
.wpUpDate{ width:42px; height:44px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line2); }
.wpUpMon{ font-size:9.5px; font-weight:650; color:var(--portal); letter-spacing:.06em; }
.wpUpDay{ font-family:var(--font); font-size:17px; font-weight:650; color:var(--text); }
.wpUpThumb{ border-radius:8px; }
.wpUpName{ font-size:13.5px; font-weight:600; }
.wpUpMeta{ color:var(--faint); }

/* calendar tab */
.wpCalCard{ padding:20px !important; }
.wpCalHead{ margin-bottom:16px; }
.wpCalMonth{ font-size:16px; font-weight:650; min-width:150px; letter-spacing:-.01em; }
.wpCalHint{ color:var(--faint); }
.wpCalHint strong{ color:var(--text-2); font-weight:550; }
.wpIconBtn{ width:34px; height:34px; padding:0; border-radius:9px; border:1px solid var(--line2); background:var(--surface-2); color:var(--text); box-shadow:var(--hi); font-size:16px; }
.wpIconBtn:hover{ border-color:var(--line3); filter:none; box-shadow:var(--hi); }
.wpCalWeekdays span{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--faint); }
.wpCalCell{ height:auto; min-height:72px; padding:8px 9px; border-radius:10px; border:1px solid var(--line); background:var(--well); color:var(--text-2); box-shadow:none; font-weight:400; }
.wpCalCell:hover:not(.empty){ background:var(--surface-2); border-color:var(--line2); filter:none; box-shadow:none; }
.wpCalCell.has{ background:linear-gradient(180deg, var(--portal-soft), transparent 80%), var(--well); }
.wpCalCell.today{ border-color:var(--line3); }
.wpCalCell.today .wpCalNum{ display:inline-grid; place-items:center; width:22px; height:22px; margin:-3px 0 0 -4px; border-radius:50%; background:var(--portal); color:var(--portal-ink); }
.wpCalCell.sel{ border-color:var(--portal); box-shadow:inset 0 0 0 1px var(--portal); }
.wpCalNum{ font-size:12.5px; font-weight:600; }
.wpCalCount{ background:var(--surface-3); color:var(--text); box-shadow:inset 0 0 0 1px var(--line2); }
.wpCalDots i{ background:var(--portal); }
.wpCalDayHead{ padding:14px 18px; font-size:14px; font-weight:600; border-bottom-color:var(--line); }
.wpDayItem{ border-bottom-color:var(--line); }
.wpDayName{ font-weight:600; }
.wpDayType, .wpEventType{ background:var(--surface-2); color:var(--text-2); border-color:var(--line2); font-weight:650; }
.wpDayType.t-ppv, .wpEventType.t-ppv{ background:var(--portal-soft); color:var(--text); border-color:var(--portal-line); }
.wpEventFormTitle{ color:var(--text); text-transform:none; letter-spacing:-.01em; font-size:15px; font-weight:650; }
.wpEventGrid label{ color:var(--text-2); font-weight:550; }
.wpEventGrid input, .wpEventGrid select, .wpEventGrid textarea{ height:44px; padding:0 14px; border:1px solid var(--line2); border-radius:10px; background:var(--well); }
.wpEventGrid textarea{ height:auto; padding:12px 14px; }
.wpPosterPreview{ border-color:var(--line3); background-color:var(--well); }
.wpCta, .wpCtaSm{ height:36px; width:auto; padding:0 14px; border-radius:9px; font-size:13px; font-weight:600; background:var(--portal); color:var(--portal-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.wpCta.wpFull{ width:100%; height:40px; }

/* messenger tab */
.wpMsgLayout{ gap:16px; height:560px; }
.wpThreadList{ padding:6px !important; }
.wpThread{ height:auto; padding:12px 12px; border:0; border-radius:10px; background:transparent; box-shadow:none; color:var(--text-2); font-weight:400; }
.wpThread + .wpThread{ margin-top:2px; }
.wpThread:hover{ background:rgba(255,255,255,.035); filter:none; box-shadow:none; }
.wpThread.active{ background:var(--surface-3); }
.wpThreadName{ font-size:13.5px; font-weight:600; color:var(--text); }
.wpThreadTime{ color:var(--faint); }
.wpThreadDot{ background:var(--portal); }
.wpContactPicker{ background:var(--surface); border-color:var(--line2); }
.wpContact{ height:36px; background:transparent; box-shadow:none; color:var(--text-2); font-weight:500; }
.wpContact:hover{ background:rgba(255,255,255,.05); filter:none; box-shadow:none; }
.wpMsgMain{ overflow:hidden; }
.wpMsgHeader{ padding:14px 18px; border-bottom-color:var(--line); }
.wpMsgWith{ font-size:15px; font-weight:650; }
.wpMsgSub{ color:var(--faint); }
.wpMsgBody{ padding:18px; background:var(--well); }
.wpBubble{ max-width:72%; border-radius:16px; padding:10px 14px; }
.wpBubbleRow.them .wpBubble{ background:var(--surface-2); border:1px solid var(--line); border-top-left-radius:16px; border-bottom-left-radius:5px; }
.wpBubbleRow.me .wpBubble{ background:var(--portal); color:var(--portal-ink); border-top-right-radius:16px; border-bottom-right-radius:5px; box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px -14px var(--portal-glow); }
.wpBubbleFrom{ color:var(--muted); font-weight:600; }
.wpMsgComposer{ border-top-color:var(--line); background:var(--surface); }
.wpComposerRow textarea{ height:40px; min-height:40px; padding:10px 14px; border-radius:10px; border:1px solid var(--line2); background:var(--well); }
.wpComposerRow .wpIconBtn{ width:40px; height:40px; }
.wpComposerRow .wpCta{ height:40px; }

/* payouts tab */
.wpPayCard, .wpPoolCard{ padding:24px !important; }
#wpHub .wpHeadline, .wpPayCard .wpHeadline, .wpPoolCard .wpHeadline{ margin:12px 0 6px; font-family:var(--font); font-size:20px; font-weight:650; letter-spacing:-.02em; }
.wpSubhead{ color:var(--muted); font-size:13.5px; }
.wpPayStatus{ height:28px; padding:0 11px; font-size:12px; font-weight:600; }
.wpPayStatus.on{ color:var(--green); border-color:rgba(61,220,132,.28); background:rgba(61,220,132,.08); }
.wpPayStats{ grid-template-columns:repeat(2, minmax(160px, 240px)); }
.wpOwed{ border-color:var(--line2); background:var(--surface-2); }
.wpOwed .wpOwedAmt{ color:var(--text); }
.wpPoolHist{ border-color:var(--line); border-radius:12px; background:var(--well); }
.wpPoolHistHead{ border-bottom-color:var(--line); font-weight:600; }
.wpPoolHistRow{ border-bottom-color:var(--line); }
.wpPoolAmt{ color:var(--text); font-weight:650; font-variant-numeric:tabular-nums; }
.wpPayNote{ padding:20px 22px !important; }
.wpNoteTitle, .wpStatusHead{ color:var(--text); text-transform:none; letter-spacing:-.01em; font-size:14px; font-weight:600; }

/* ============================ DISCOVER / COMMUNITY ============================ */
.communityRoot{ max-width:960px; }
.commTabs{ display:flex; gap:4px; margin:0 0 20px; padding:4px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow-x:auto; }
.commTab{ height:34px; padding:0 14px; margin:0; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:13px; font-weight:550; box-shadow:none; white-space:nowrap; }
.commTab:hover{ color:var(--text); background:rgba(255,255,255,.04); filter:none; box-shadow:none; }
.commTab.on{ color:#fff; background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 -2px 0 var(--portal); }
.commSearch{ margin-bottom:20px; }
.commSectionHead{ font-size:11px; font-weight:650; letter-spacing:.08em; color:var(--faint); margin:8px 0 12px; }
.commAdminGrid{ gap:12px; margin:0 0 24px; }
.commAdminCard, .commDir{ padding:18px 14px; border-radius:16px; }
.commAv{ border-color:var(--line2); background-color:var(--surface-2); color:var(--text-2); font-weight:650; }
.commDirName{ font-size:14px; font-weight:600; }
.commDirMeta{ color:var(--faint); }
.commTypeBadge{ border-radius:5px; font-weight:650; color:var(--text-2); border-color:var(--line2); }
.commTypeBadge.cr{ color:var(--text-2); border-color:var(--portal-line); }
.commFollowBtn{ width:100%; }
.commFollowBtn.following{ background:transparent !important; border:1px solid var(--line2) !important; color:var(--muted) !important; box-shadow:none !important; }
.commComposer, .commPost, .wsnSocForm, .wsnSocItem{ border-radius:16px; }
.commConnRow{ background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--hi); }
.commComposerMain textarea, .wsnSocForm textarea{ background:var(--well); border-color:var(--line2); border-radius:10px; }
.commPhotoBtn{ height:32px; align-items:center; border-color:var(--line2); color:var(--text-2); font-weight:550; border-radius:8px; }
.commScope{ padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.commScopeBtn{ height:28px; padding:0 14px; border:0; background:transparent; box-shadow:none; color:var(--muted); font-weight:550; }
.commScopeBtn.on{ background:var(--surface-3); color:var(--text); border:0; }
.commPostName{ font-weight:600; }
.commKind{ color:var(--muted); }
.commLike{ height:30px; padding:0 12px; background:transparent; box-shadow:none; color:var(--muted); font-weight:550; }
.commLike.on{ color:var(--portal); border-color:var(--portal-line); background:var(--portal-soft); }
.commDel{ height:auto; padding:4px; box-shadow:none; background:none; }
.commBackTop{ height:auto; padding:0; background:none; box-shadow:none; color:var(--muted); font-weight:550; }
.commLoad, .commEmpty{ border-color:var(--line2); color:var(--faint); }
.commProfileFull, .commProfile{ border-radius:20px; }
.commProfBtn{ height:38px; font-weight:600; box-shadow:none; }
.commProfName{ font-size:26px; font-weight:700; letter-spacing:-.03em; }
.commProfStats{ border-color:var(--line); background:var(--well); }
.commProfStats .commStat b{ font-weight:650; }
.commProfTab, .commTab{ height:34px; }
.commProfTab{ background:none; box-shadow:none; font-weight:550; }
.commDmList, .commDmThread{ border-color:var(--line); background:var(--surface); }
.commMsg{ background:var(--surface-2); border-color:var(--line); }
.commMsg.mine{ background:var(--portal); border-color:transparent; color:var(--portal-ink); }
.wsnSocHead{ font-size:16px; font-weight:650; }
.wsnSocStatus.s-pending{ background:var(--portal-soft); color:var(--text); border-color:var(--portal-line); }
.wsnSocStatus.s-approved, .wsnSocStatus.s-scheduled, .wsnSocStatus.s-published{ color:var(--green); background:rgba(61,220,132,.08); border-color:rgba(61,220,132,.28); }

/* ============================ SUPPORT CHAT ============================ */
.wpSupportFab{ width:52px; height:52px; padding:0; border-radius:16px; font-size:21px; background:var(--portal); color:var(--portal-ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 14px 30px -12px rgba(0,0,0,.9), 0 10px 24px -14px var(--portal-glow); }
.wpSupportFab svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.wpSupportFab:hover{ transform:translateY(-1px); }
.wpSupportFabDot{ top:-3px; right:-3px; width:12px; height:12px; background:var(--green); border:2px solid var(--bg); box-shadow:none; }
.wpSupportPanel{ border-radius:20px; border-color:var(--line2); background:rgba(16,17,21,.97); box-shadow:var(--shadow-lg), var(--hi); }
.wpSupportHead{ background:var(--surface); border-bottom-color:var(--line); }
.wpSupportAvatar{ width:42px; height:42px; box-shadow:none; border-color:var(--line2); }
.wpSupportClose, .wpSupportEnd{ box-shadow:none; background:transparent; }
.wpSupThem .wpSupBubble{ background:var(--surface-2); border-color:var(--line); }
.wpSupMe .wpSupBubble{ background:var(--portal); color:var(--portal-ink); }
.wpSupportForm{ background:var(--surface); border-top-color:var(--line); }
.wpSupportInput{ background:var(--well); border-color:var(--line2); }
.wpSupportSend{ background:var(--portal); box-shadow:none; }
.wpSupportAttach{ box-shadow:none; background:none; height:44px; }
.wpSupStar{ height:auto; padding:0 1px; background:none; box-shadow:none; }

/* ============================ LEADERBOARD TICKER ============================ */
/* Slim broadcast bar under the top bar on every view (#lbTicker, filled by lbTickerRender in app.js). */
#portalView .topbar:has(+ .lbTicker:not(.hidden)){ margin-bottom:0; border-bottom-color:rgba(255,255,255,.04); }
.lbTicker{
  position:relative; z-index:2; isolation:isolate; display:flex; align-items:stretch; height:58px; overflow:hidden;
  margin:0 calc(-1 * clamp(20px,3vw,40px)) 28px;
  background:linear-gradient(90deg, #3a0609 0%, #1c0305 16%, #0a0506 34%, #060607 52%, #101115 74%, #1b1d23 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.8), 0 18px 40px -26px rgba(0,0,0,1);
}
.lbTicker.hidden{ display:none; }
html.embeddedMasterFrame .lbTicker{ display:none; }
/* accent hairline on top + chrome hairline on the bottom */
.lbTicker::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; z-index:4; pointer-events:none;
  background:linear-gradient(90deg, var(--portal) 0%, rgba(255,120,128,.9) 18%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.08) 75%, transparent); }
.lbTicker::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:4; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18) 30%, rgba(255,255,255,.06) 70%, transparent); }
/* moving sheen across the whole bar */
.lbtTrack::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:38%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.07) 45%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.07) 55%, transparent);
  transform:translateX(-120%); animation:lbtSheen 9s var(--out) infinite; }
@keyframes lbtSheen{ 0%, 35%{ transform:translateX(-120%); } 100%{ transform:translateX(300%); } }
/* the angled glossy label plate */
.lbtPlate{
  position:relative; z-index:3; flex:none; display:flex; align-items:center; gap:11px; padding:0 40px 0 22px;
  background:linear-gradient(180deg, #34363d 0%, #1c1d22 46%, #0d0d10 54%, #16171b 100%);
  clip-path:polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.lbtPlate::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:30px; pointer-events:none;
  background:linear-gradient(180deg, #ff5961, var(--portal) 50%, #8f141b);
  clip-path:polygon(22px 0, 30px 0, 8px 100%, 0 100%); box-shadow:0 0 18px var(--portal-glow); }
.lbtDot{ position:relative; width:9px; height:9px; flex:none; border-radius:50%; background:#ff3b45; --pc:rgba(255,59,69,.7);
  box-shadow:0 0 10px 1px rgba(255,59,69,.8); animation:pxPulse 1.6s ease-out infinite; }
.lbtLabel{ display:flex; flex-direction:column; line-height:1; gap:4px; }
.lbtKicker{ font-family:var(--fdisplay); font-size:21px; font-weight:400; letter-spacing:.06em; line-height:.9; padding-top:2px; }
.lbtTitle{ font-size:9.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#ff8a90; white-space:nowrap; }
/* scrolling reel: two identical sets, slide exactly one set, loop */
.lbtTrack{ position:relative; flex:1 1 auto; min-width:0; overflow:hidden; margin-left:-14px;
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 70px), transparent); mask:linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 70px), transparent); }
.lbtReel{ display:flex; width:max-content; height:100%; animation:lbtScroll var(--lbt-dur, 60s) linear infinite; will-change:transform; }
.lbTicker:hover .lbtReel{ animation-play-state:paused; }
.lbtSet{ display:flex; align-items:center; flex:none; }
@keyframes lbtScroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.lbtItem{ position:relative; display:flex; align-items:center; gap:11px; height:100%; padding:0 26px 0 22px; cursor:pointer; white-space:nowrap; transition:background var(--t); }
.lbtItem::after{ content:""; position:absolute; right:0; top:16px; bottom:16px; width:1px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent); }
.lbtItem:hover{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)); }
.lbtRank{ display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; font-family:var(--font); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums;
  color:#e8eaee; background:linear-gradient(180deg, #3a3c43, #17181c); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.1); }
.lbtThumb{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:#15161a center/cover no-repeat;
  color:var(--muted); font-size:14px; font-weight:800;
  box-shadow:0 0 0 1px rgba(255,255,255,.2), inset 0 1px 0 rgba(255,255,255,.35), 0 0 14px -3px var(--portal-glow), 0 6px 12px -6px rgba(0,0,0,1); }
.lbtMain{ display:flex; flex-direction:column; gap:3px; line-height:1.1; }
.lbtName{ font-size:13.5px; font-weight:700; letter-spacing:-.01em; color:#f4f5f7; }
.lbtSub{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:500; color:#8e9199; font-variant-numeric:tabular-nums; }
.lbtSub i{ width:3px; height:3px; border-radius:50%; background:#5c5f67; }
.lbtItem.me .lbtName{ color:#fff; }
.lbtItem.me .lbtThumb{ box-shadow:0 0 0 1.5px var(--portal), 0 0 18px -2px var(--portal-glow); }
.lbtMove{ font-size:10px; line-height:1; }
.lbtMove:empty{ display:none; }
.lbtMove.up{ color:#4ff09a; filter:drop-shadow(0 0 5px rgba(61,220,132,.8)); }
.lbtMove.down{ color:#ff6b72; filter:drop-shadow(0 0 5px rgba(255,107,114,.8)); }

/* ---- top bar: chrome page title + a faint lit underline ---- */
#portalView .topbar h2{ font-size:24px; font-weight:750; letter-spacing:-.03em; }
#portalView .topbar::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12) 30%, var(--portal-line) 70%, transparent); }

/* ---- motion off for people who ask for it ---- */
@media (prefers-reduced-motion: reduce){
  .pxAmbient i, .pxEdge, .lbtReel, .lbtTrack::before, .lbtDot, .pill.good::before, .heroPanel .eyebrow::before,
  #portalView > .view.active > *, #portalView .view.active .stats > .stat, #wpHub .wpDash3 > *, #wpHub .wpHubPane:not(.hidden),
  .pxChrome, #portalView .topbar h2, #portalView .heroPanel h3, #wpHub .wpHeroName, #portalView .stat strong, .wpStatVal,
  #analyticsUpdatedAt::before, #wpHub .wpStat.wpStatLive .wpStatLbl::before, .lvStatusDot{ animation:none !important; }
  .lbtTrack{ overflow-x:auto; scrollbar-width:none; }
  .lbtSet + .lbtSet{ display:none; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1280px){
  #wpHub .wpStatStrip{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  #portalView .stats.stats5{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1100px){
  #portalView .heroPanel{ grid-template-columns:1fr; }
  #portalView .heroPanel .heroArt{ display:none; }
}
@media (max-width:1000px){
  body:not(.loggedOut) .shell{ grid-template-columns:1fr; }
  .sidebar{ width:min(84vw,300px); background:#0a0a0c; box-shadow:0 0 80px rgba(0,0,0,.7); }
  .sidebar .nav{ display:flex; flex-direction:column; flex-wrap:nowrap; overflow-x:hidden; overflow-y:auto; gap:1px; }
  .sidebar .navItem{ flex:none; height:44px !important; min-height:0; font-size:14.5px; padding:0 12px; border-radius:10px; }
  .sidebar .navItem.active::before{ left:-10px; }
  .navScrim{ background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
  #portalView{ padding:0 16px 96px; }
  #portalView .topbar{ margin:0 -16px 20px; padding:10px 16px; padding-top:max(10px, env(safe-area-inset-top,0px)); min-height:60px; flex-wrap:wrap; gap:10px; background:rgba(7,7,9,.86); box-shadow:none; }
  #portalView .topbar h2{ font-size:18px; }
  #portalView .pageKicker{ font-size:11.5px; }
  .topActions{ width:auto; flex-wrap:nowrap; margin-left:auto; }
  .topActions .compactSelect{ display:none; }
  #portalView .stats, #portalView .stats.stats5{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  #wpHub .wpStatStrip{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wpMsgLayout{ height:auto; }
  .lbTicker{ margin:0 -16px 20px; height:52px; }
  #portalView .topbar h2{ font-size:20px; }
}
@media (max-width:640px){
  #portalView .topbar{ flex-wrap:nowrap; }
  .topLeft{ flex:1 1 auto; min-width:0; }
  .topLeft > div{ min-width:0; }
  #portalView .topbar h2{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .topActions{ order:0; width:auto; margin:0; gap:6px; }
  .topActions #viewAsBtn{ display:none; }
  .topActions #refreshBtn{ height:34px; padding:0 12px; font-size:12.5px; min-height:0; flex:none; border-radius:9px; }
  #statusPill{ display:none; }
  #portalView .pageKicker::after{ content:""; }
  #portalView .panel{ padding:18px; border-radius:16px; }
  #portalView .panelHead{ flex-direction:column; gap:12px; margin-bottom:18px; }
  #portalView .panelHead > button, #portalView .panelHead .headActions{ align-self:stretch; }
  #portalView .panelHead > button{ width:100%; }
  #portalView .heroPanel{ padding:24px 22px; }
  #portalView .heroPanel h3{ font-size:30px; }
  #portalView .stat{ padding:16px 16px 18px; }
  #portalView .stat strong{ font-size:28px; }
  #portalView .stat > span{ font-size:10.5px; }
  #portalView .stat::after{ top:12px; right:12px; width:28px; height:28px; }
  #portalView .stat > span::after{ top:18px; right:18px; }
  .lbTicker{ height:50px; margin-bottom:16px; }
  .lbtPlate{ padding:0 30px 0 14px; gap:9px; }
  .lbtTitle{ display:none; }
  .lbtKicker{ font-size:17px; }
  .lbtItem{ padding:0 18px 0 16px; gap:9px; }
  .lbtThumb{ width:30px; height:30px; border-radius:8px; }
  .lbtRank{ width:22px; height:22px; font-size:11px; }
  .lbtName{ font-size:12.5px; }
  .lbtSub{ font-size:10.5px; }
  #portalView .view > * + *{ margin-top:14px; }
  #portalView .ovPartner{ flex-direction:row; flex-wrap:wrap; text-align:left; align-items:center; }
  .ovPartnerMain{ flex:1 1 200px; }
  .ovPartnerBtn{ width:100%; justify-content:center; }
  .actions{ flex-direction:row; flex-wrap:wrap; }
  .actions > button{ flex:1 1 auto; min-height:44px; font-size:14px; width:auto; }
  #portalView .analyticsCard{ grid-template-columns:1fr; gap:10px; }
  .metricStrip{ justify-content:flex-start; }
  .metricStrip span{ text-align:left; }
  .videoCard .cardActions .smallBtn{ flex:1 1 auto; }
  #portalView .playlistItem{ grid-template-columns:88px minmax(0,1fr); }
  #portalView .playlistItem .miniActions{ grid-column:1 / -1; }
  #portalView .channelEditor{ grid-template-columns:1fr; }
  .channelEditor .full, .channelThumb, .channelEditor .fileBox, .channelEditor > button{ grid-column:1; grid-row:auto; }
  .builderTop{ flex-direction:column; align-items:stretch; }
  .ppvPriceRow #addPpvBtn{ margin-left:0; width:100%; }
  .artPreviewGrid{ grid-template-columns:1fr; }
  #wpHub .wpHeroInner{ padding:22px 18px; gap:14px; }
  #wpHub .wpHeroName{ font-size:30px; }
  #wpHub .wpHeroAvatar{ width:80px; height:80px; border-radius:20px; }
  #wpHub .wpHubTabs, .commTabs{ width:100%; overflow-x:auto; scrollbar-width:none; }
  #wpHub .wpHubTab{ flex:1 0 auto; }
  .wpCalCell{ min-height:46px; padding:5px; }
  .wpCalCount{ display:none; }
  .messageBubble, .wpBubble{ max-width:86%; }
  .wpSupport{ right:14px; bottom:14px; }
}

/* ---- refinements (pass 2) ---- */
.sidebar .navItem{ flex:none; }
.sidebar .mark{ font-size:10.5px; letter-spacing:-.03em; }
#wpHub .wpMsgQuick{ align-content:start; }
.wpMqTop{ padding-right:14px; }
#wpHub .wpStatVal, .wpStatVal{ white-space:nowrap; font-size:22px !important; }
.premiereForm .fieldHint{ display:inline; margin:0 0 0 6px; }
.durationBox .durationInputs input{ text-align:left; }
.hsRing{ position:relative; box-shadow:none; }
.hsRing::before{ content:""; position:absolute; inset:7px; border-radius:50%; background:var(--well); }
.hsPct, .hsLbl{ position:relative; z-index:1; }
.hsLbl{ position:absolute; bottom:20px; }
.commFollowBtn{ background:var(--surface-2); border:1px solid var(--line2); color:var(--text); box-shadow:var(--hi); }
.commFollowBtn:hover{ background:var(--surface-3); border-color:var(--line3); filter:none; box-shadow:var(--hi); }
.sidebar .navItem{ height:34px; }
.navLabel{ padding:14px 10px 4px; }
.sidebar .nav{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.themePicker{ padding:9px 11px; }
.sidebar .sidebarFoot{ gap:8px; padding:10px 14px 14px; }
input, textarea, select{ font-weight:400; }
.wpPayActions .wpGhost{ height:36px; }
.wpThreadTime{ white-space:nowrap; }
.pp-gridStrip{ overflow:hidden; }
body.hasPromotionBackground:not(.loggedOut)::before{ opacity:.14; }
@media (max-width:640px){
  .premiereRow{ flex-wrap:wrap; row-gap:10px; }
  .premiereInfo{ flex:1 1 calc(100% - 120px); }
  .premiereRow .premiereStatus{ margin-left:120px; }
  .premiereRow > button{ margin-left:auto; }
  #portalView .panelHead > button.secondary{ width:auto; align-self:flex-start; }
}
body.sideCollapsed:not(.loggedOut) .shell{ grid-template-columns:1fr; }

/* ============================ COMPACT SIDEBAR FOOTER (single row) ============================ */
.sidebar .sidebarFoot{ order:3; display:block; margin:0; padding:10px 12px 12px; border-top:1px solid var(--line); }
.footRow{ display:flex; align-items:center; gap:6px; min-width:0; }
.footLang{ position:relative; flex:none; width:58px; height:32px; }
.footLangFace{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); color:var(--text-2); font-size:11.5px; font-weight:650; letter-spacing:.04em; pointer-events:none; transition:border-color var(--t), background var(--t); }
.footLang:hover .footLangFace, .footLang:focus-within .footLangFace{ border-color:var(--line3); background:var(--surface-2); }
.footLang:focus-within .footLangFace{ box-shadow:0 0 0 2px var(--portal-soft); }
.footIco{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
/* the real i18n select sits invisibly on top of the face, so clicking opens the native list */
.footLang #portalLangWrap{ position:absolute; inset:0; margin:0 !important; padding:0; border:0; display:block !important; width:100% !important; }
.footLang #portalLangIcon{ display:none; }
.footLang #portalLang{ position:absolute; inset:0; width:100% !important; height:100% !important; opacity:0; cursor:pointer; padding:0 !important; }
#portalLangWrap:not(.footLang #portalLangWrap){ order:2; }
.footColor{ position:relative; flex:none; }
.footIconBtn, .footIconBtn:hover{ width:32px; height:32px; padding:0; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line2); background:var(--surface); box-shadow:none; filter:none; }
.footIconBtn:hover, .footIconBtn[aria-expanded="true"]{ border-color:var(--line3); background:var(--surface-2); }
.footDot{ width:13px; height:13px; border-radius:50%; background:var(--portal); box-shadow:0 0 0 2px rgba(255,255,255,.08); }
.footPop{ position:absolute; left:0; bottom:calc(100% + 8px); z-index:80; width:210px; padding:4px; border:1px solid var(--line2); border-radius:12px; background:rgba(20,21,25,.98); box-shadow:var(--shadow-lg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); animation:modalRise .16s var(--ease); }
.footPop.hidden{ display:none; }
.footPop .themePicker{ border:0; background:transparent; padding:8px 10px; }
.footRow #userEmail{ flex:1 1 auto; min-width:0; padding:0 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--faint); }
.footRow #logoutBtn{ flex:none; width:32px; height:32px; padding:0; display:grid; place-items:center; border-radius:8px; color:var(--muted); }
.footRow #logoutBtn.hidden{ display:none; }
.footRow #logoutBtn:hover{ color:var(--text); background:rgba(255,255,255,.06); }
/* nav fits at 900px tall; on shorter screens it scrolls inside the sidebar */
.sidebar .nav{ padding:8px 10px 10px; }
.sidebar .navItem{ height:32px; }
.navLabel{ padding:12px 10px 4px; }
.navLabel:first-child{ padding-top:4px; }
.sidebar .brand{ padding:16px 18px 14px; }
@media (min-height:900px){ .sidebar .nav{ -webkit-mask-image:none; mask-image:none; } }
@media (max-width:1000px){
  .sidebar .navItem{ height:44px !important; }
  .footPop{ width:230px; }
}
@media (min-width:1001px){
  .sidebar .navItem{ height:31px; }
  .navLabel{ padding:9px 10px 3px; }
}

/* Payouts: tier progress, eligibility, PPV sales (2026-10-17) */
.wpPoolProg { margin: 0 0 12px; }
.wpPoolProgBar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.wpPoolProgBar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #d7b76d, #f5d98a); }
.wpPoolProgTxt { font-size: 12.5px; color: #aeb7c4; margin-top: 6px; }
.wpPoolElig { border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #e4e9f1; border: 1px solid var(--line); }
.wpPoolElig.on { border-color: rgba(74,222,128,.4); background: linear-gradient(180deg, rgba(74,222,128,.10), rgba(74,222,128,.03)); }
.wpPoolElig.off { border-color: rgba(245,197,66,.45); background: linear-gradient(180deg, rgba(245,197,66,.10), rgba(245,197,66,.03)); }
.wpPoolFine { font-size: 12.5px; color: #9aa4b2; line-height: 1.5; margin: 0 0 14px; }
.wpPpvState { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin-left: 6px; }
.wpPpvState.ok { color: #4ade80; background: rgba(74,222,128,.12); }
.wpPpvState.wait { color: #f5c542; background: rgba(245,197,66,.12); }

/* Upload Studio drop zone: the file input sits on top and always takes the click (2026-10-21 fix). */
.uploadPanel .dropZone{ position:relative; isolation:isolate; z-index:2; }
.uploadPanel .dropZone .dzInner{ position:relative; z-index:1; pointer-events:none; }
.uploadPanel .dropZone input[type=file]{ position:absolute; inset:0; z-index:3; opacity:0; width:100%; height:100%; cursor:pointer; pointer-events:auto; display:block; }
.uploadPanel .dropZone .dzBrowseBtn{ position:relative; z-index:4; pointer-events:auto; margin-top:14px; padding:10px 18px; border-radius:10px; border:0; font-weight:700; color:#fff; background:var(--portal, #e5333c); cursor:pointer; }
.uploadPanel .dropZone .dzPicked{ margin-top:10px; font-size:13px; font-weight:600; color:var(--text); }
/* WSN Shop merch earnings (Payouts tab) */
.wpMerchCard .wpPoolStats { grid-template-columns: repeat(3, 1fr); }
.wpMerchCard .wpSubhead a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.wpMerchMath { font-size: 11.5px; color: var(--muted, #9aa3b2); margin-top: 3px; }
@media (max-width: 620px) { .wpMerchCard .wpPoolStats { grid-template-columns: 1fr; } }