:root {
  color-scheme: dark;
  --bg: #030611;
  --panel: rgba(10, 18, 38, .82);
  --panel-2: rgba(17, 28, 55, .78);
  --line: rgba(63, 234, 255, .25);
  --line-strong: rgba(63, 234, 255, .48);
  --text: #f4fbff;
  --muted: #b7c7e4;
  --cyan: #39f7ff;
  --green: #43ff9b;
  --pink: #ff49cc;
  --danger: #ff5f80;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow: 0 18px 58px rgba(0,0,0,.34);
  --max: 1040px;
  --safe: clamp(12px, 3vw, 24px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 20%, rgba(255,73,204,.28), transparent 28rem),
    radial-gradient(circle at 95% 75%, rgba(57,247,255,.25), transparent 34rem),
    linear-gradient(135deg, #050016 0%, #071024 48%, #02040b 100%);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
  opacity: .35;
}
#fxCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
input, textarea, select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(90, 236, 255, .28);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.075);
  color: var(--text);
  outline: none;
  padding: 12px 13px;
}
textarea { resize: vertical; line-height: 1.45; overflow-wrap: anywhere; }
select option { background: #0a1024; color: #f4fbff; }
input:focus, textarea:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(57,247,255,.13); }

.topbar {
  position: sticky;
  top: 8px;
  z-index: 10;
  width: min(var(--max), calc(100% - var(--safe) * 2));
  margin: 8px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(3, 5, 17, .84);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; }
.brand img { width: 45px; height: 45px; object-fit: contain; border-radius: 13px; filter: drop-shadow(0 0 18px rgba(57,247,255,.38)); }
.brand span { min-width: 0; display: grid; gap: 1px; }
.brand strong { font-size: clamp(.78rem, 1.8vw, .96rem); line-height: 1.05; overflow-wrap: anywhere; }
.brand small { color: var(--muted); font-size: .72rem; line-height: 1.1; overflow-wrap: anywhere; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a { padding: 8px 10px; border-radius: 999px; color: var(--muted); font-weight: 900; font-size: .82rem; text-decoration: none; }
.nav a:hover { color: var(--text); background: rgba(255,255,255,.08); }

main { width: min(var(--max), calc(100% - var(--safe) * 2)); margin: 0 auto; }
.panel {
  position: relative;
  z-index: 1;
  margin: 22px 0;
  padding: clamp(15px, 3.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(145deg, var(--panel), rgba(5, 6, 24, .72));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(57,247,255,.055), transparent);
  pointer-events: none;
}
.hero { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: clamp(15px, 3vw, 28px); align-items: center; }
.logo-tile {
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  min-height: 160px;
  background: radial-gradient(circle at 50% 45%, rgba(57,247,255,.16), rgba(255,255,255,.04));
}
.logo-tile img { width: 88%; max-height: 150px; object-fit: contain; filter: drop-shadow(0 0 22px rgba(57,247,255,.28)); }
.eyebrow { margin: 0 0 7px; color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-size: .73rem; font-weight: 1000; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(2rem, 6vw, 4.6rem); line-height: .94; letter-spacing: -.05em; text-wrap: balance; }
h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.03em; }
h3 { margin: 0; font-size: clamp(1rem, 2vw, 1.24rem); }
.subline { margin: 8px 0 16px; color: var(--muted); font-size: clamp(.98rem, 2.1vw, 1.08rem); }
.paste-label { display: block; margin: 0 0 7px; color: var(--text); font-weight: 950; font-size: .84rem; }
#linkBox { min-height: 78px; font-weight: 850; }
.status-line { margin-top: 8px; min-height: 22px; color: var(--green); font-weight: 900; font-size: .86rem; }
.status-line.bad { color: #ffb9c8; }
.status-line.warn { color: #ffe1a8; }

.key-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.small-copy { margin: 6px 0 0; color: var(--muted); line-height: 1.45; font-size: .92rem; }
.key-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.key-box { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

.players-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 430px); gap: 12px; align-items: end; }
.filters { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 8px; }
.stats { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.stats span { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(57,247,255,.09); color: var(--text); font-size: .76rem; font-weight: 1000; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.player-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(63,234,255,.25);
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}
.card-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.card-title-wrap { min-width: 0; display: grid; gap: 5px; }
.badge { justify-self: start; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(57,247,255,.1); color: var(--cyan); text-transform: uppercase; font-weight: 1000; font-size: .68rem; letter-spacing: .06em; }
.url-line, .owner-line { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.25; }
.owner-line { color: #d6f7ff; }
.icon-btn { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(255,255,255,.08); color: var(--text); font-size: 1.35rem; line-height: 1; }
.icon-btn[hidden] { display: none; }
.soundcloud-frame { border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: hidden; background: #080808; }
.soundcloud-frame iframe { display: block; width: 100%; height: 230px; border: 0; }
.player-card[data-type="song"] .soundcloud-frame iframe { height: 170px; }
.actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  text-decoration: none;
  font-weight: 950;
  font-size: .82rem;
  line-height: 1.1;
  white-space: normal;
  text-align: center;
}
.btn:hover { border-color: var(--line-strong); box-shadow: 0 0 20px rgba(57,247,255,.11); transform: translateY(-1px); }
.btn.fire-btn.active { background: linear-gradient(135deg, rgba(255,107,41,.25), rgba(255,73,204,.16)); border-color: rgba(255,177,71,.5); }
.btn.danger { color: #ffd6df; border-color: rgba(255,95,128,.5); background: rgba(255,95,128,.1); }
.btn.small { min-height: 35px; padding: 7px 10px; }
.comments { display: grid; gap: 9px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 10px; }
.comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.comment-list { display: grid; gap: 8px; }
.comment { display: grid; gap: 4px; padding: 8px 9px; border-radius: 12px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); }
.comment-top { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .74rem; font-weight: 850; }
.comment p { margin: 0; line-height: 1.38; font-size: .86rem; }
.comment button { justify-self: end; width: auto; min-height: 28px; padding: 4px 7px; font-size: .72rem; }
.empty { grid-column: 1 / -1; display: grid; place-items: center; gap: 8px; padding: 26px 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; text-align: center; }
.empty img { width: 70px; max-width: 32vw; opacity: .94; }
.footer { width: min(var(--max), calc(100% - var(--safe) * 2)); margin: 0 auto 26px; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .82rem; text-align: center; flex-wrap: wrap; }
.footer img { width: 38px; height: 38px; object-fit: contain; }

@media (max-width: 820px) {
  .hero, .key-panel, .players-head, .filters { grid-template-columns: 1fr; }
  .key-actions { justify-content: stretch; }
  .key-actions .btn { flex: 1 1 120px; }
  .cards { grid-template-columns: 1fr; }
  .logo-tile { min-height: 120px; }
  .logo-tile img { max-height: 115px; }
}
@media (max-width: 560px) {
  :root { --safe: 10px; }
  .topbar { border-radius: 18px; align-items: flex-start; }
  .brand img { width: 40px; height: 40px; }
  .brand small { display: none; }
  .nav { gap: 2px; }
  .nav a { padding: 8px 7px; font-size: .76rem; }
  .panel { padding: 12px; border-radius: 18px; margin: 14px 0; }
  h1 { font-size: clamp(1.9rem, 11vw, 3rem); }
  .actions, .comment-form { grid-template-columns: 1fr; display: grid; }
  .btn { width: 100%; min-height: 40px; }
  .key-box { grid-template-columns: 1fr; }
  .soundcloud-frame iframe, .player-card[data-type="song"] .soundcloud-frame iframe { height: 180px; }
}


/* WWCFAM SCD updates: one-time family gate, repost page, hidden key login */
body.gate-locked {
  overflow: hidden;
}
body.gate-locked main,
body.gate-locked .topbar,
body.gate-locked .footer {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}
.family-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vw, 32px);
  background:
    radial-gradient(circle at 30% 15%, rgba(57,247,255,.15), transparent 28rem),
    radial-gradient(circle at 70% 85%, rgba(255,73,204,.16), transparent 30rem),
    rgba(1, 3, 12, .88);
  backdrop-filter: blur(16px);
}
body.gate-locked .family-gate { display: flex; }
.family-card {
  width: min(620px, 100%);
  max-height: min(92vh, 740px);
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(13, 19, 45, .96), rgba(14, 7, 31, .94));
  box-shadow: 0 30px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
  padding: clamp(18px, 4vw, 30px);
  text-align: center;
}
.family-card img {
  width: clamp(82px, 18vw, 128px);
  height: clamp(82px, 18vw, 128px);
  object-fit: contain;
  margin: 0 auto 10px;
  filter: drop-shadow(0 0 22px rgba(57,247,255,.35));
}
.family-card h1 {
  font-size: clamp(1.8rem, 6vw, 3.1rem);
  line-height: .98;
  letter-spacing: -.045em;
  max-width: 100%;
}
.family-card p {
  margin: 12px auto;
  max-width: 52ch;
  color: var(--muted);
  line-height: 1.55;
}
.agree-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 16px 0 12px;
  padding: 12px;
  border: 1px solid rgba(57,247,255,.30);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.34;
  text-align: left;
  cursor: pointer;
}
.agree-line input { width: 20px; min-width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--cyan); }
.family-enter {
  width: min(330px, 100%);
  margin: 2px auto 0;
  background: linear-gradient(135deg, rgba(57,247,255,.23), rgba(255,73,204,.14));
}
.family-enter:disabled {
  opacity: .46;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.login-panel {
  display: grid;
  grid-template-columns: minmax(110px, 190px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}
.login-panel .key-actions,
.login-box {
  grid-column: 1 / -1;
}
.login-box {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(57,247,255,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}
.btn.repost-btn.active {
  border-color: rgba(57,247,255,.62);
  background: linear-gradient(135deg, rgba(57,247,255,.24), rgba(255,73,204,.13));
  box-shadow: 0 0 20px rgba(57,247,255,.12);
}
.reposted-card {
  position: relative;
  overflow: hidden;
}
.reposted-card::after {
  content: "REPOSTED";
  position: absolute;
  top: 14px;
  right: 52px;
  padding: 5px 8px;
  border: 1px solid rgba(57,247,255,.38);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(57,247,255,.08);
  font-size: .65rem;
  font-weight: 1000;
  letter-spacing: .08em;
}
.url-line,
.owner-line,
.status-line,
.small-copy {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.btn.loading {
  opacity: .8;
  pointer-events: none;
}
@media (max-width: 820px) {
  .login-panel { grid-template-columns: 1fr; }
  .family-card { border-radius: 20px; }
}
@media (max-width: 560px) {
  .family-gate { padding: 10px; align-items: center; }
  .family-card { max-height: 94vh; padding: 16px; }
  .agree-line { font-size: .82rem; }
  .family-card h1 { font-size: clamp(1.55rem, 8vw, 2.3rem); }
  .topbar { width: min(var(--max), calc(100% - 14px)); }
}

/* Login page cleanup/fix: keeps the old SCD look but stops the oversized logo/page overlap */
body[data-page="login"] {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,73,204,.22), transparent 27rem),
    radial-gradient(circle at 88% 78%, rgba(57,247,255,.23), transparent 32rem),
    linear-gradient(135deg, #050016 0%, #071024 50%, #02040b 100%) !important;
}
body[data-page="login"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
body[data-page="login"] .topbar {
  margin-top: 10px;
}
.login-main {
  min-height: calc(100vh - 170px);
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vw, 58px) 0 clamp(22px, 4vw, 46px);
}
.login-panel {
  width: min(780px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 22px);
  align-items: center;
  padding: clamp(16px, 3vw, 24px);
  overflow: hidden;
}
.login-panel > * {
  position: relative;
  z-index: 1;
}
.login-logo-card {
  min-height: 132px;
  border-radius: 24px;
}
.login-logo-card img {
  width: 92%;
  max-height: 126px;
}
.login-copy h1 {
  font-size: clamp(1.75rem, 5vw, 3.3rem);
  line-height: .98;
  max-width: 100%;
}
.login-copy .small-copy {
  max-width: 58ch;
}
.login-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  justify-content: stretch;
}
.login-actions .btn {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
}
.login-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(67,255,155,.22);
  border-radius: 14px;
  background: rgba(67,255,155,.065);
  color: #dffff0;
}
.login-status.bad {
  border-color: rgba(255,95,128,.34);
  background: rgba(255,95,128,.09);
}
.login-status.warn {
  border-color: rgba(255,210,100,.34);
  background: rgba(255,210,100,.08);
}
.login-box {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(57,247,255,.20);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}
.login-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.login-input-row .btn {
  min-width: 110px;
}
.login-note {
  margin: 0;
  font-size: .84rem;
}
body[data-page="login"] .footer {
  padding-bottom: 24px;
}
@media (max-width: 820px) {
  .login-main { min-height: auto; place-items: start center; padding-top: 20px; }
  .login-panel { grid-template-columns: 1fr; }
  .login-logo-card { min-height: 126px; }
  .login-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  body[data-page="login"] .topbar { top: 6px; }
  .login-main { padding-top: 14px; }
  .login-panel { border-radius: 18px; padding: 13px; gap: 12px; }
  .login-logo-card { min-height: 105px; }
  .login-logo-card img { max-height: 98px; }
  .login-copy h1 { font-size: clamp(1.8rem, 9vw, 2.5rem); }
  .login-actions,
  .login-input-row { grid-template-columns: 1fr; }
  .login-input-row .btn { width: 100%; }
  .login-status { font-size: .82rem; }
}

/* Final SCD live/mobile/header fixes */
.topbar {
  position: relative !important;
  top: auto !important;
  overflow: visible;
  align-items: center !important;
}
.menu-toggle {
  display: inline-flex;
  width: 42px;
  min-width: 42px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(57,247,255,.34);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: var(--text);
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 99px;
  background: var(--text);
}
.nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 8px;
  z-index: 50;
  display: none !important;
  min-width: min(260px, calc(100vw - 28px));
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(57,247,255,.28);
  border-radius: 18px;
  background: rgba(3, 5, 17, .96);
  box-shadow: 0 22px 60px rgba(0,0,0,.42);
  backdrop-filter: blur(16px);
}
.nav.open { display: flex !important; }
.nav a {
  display: block;
  width: 100%;
  padding: 11px 12px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
}
.actions .btn,
.comment-form .btn,
.login-actions .btn,
.login-input-row .btn {
  touch-action: manipulation;
}
.toast-wrap {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1200;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}
.toast {
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  padding: 11px 12px;
  border: 1px solid rgba(57,247,255,.27);
  border-radius: 14px;
  background: rgba(7, 14, 32, .95);
  color: var(--text);
  box-shadow: 0 14px 38px rgba(0,0,0,.35);
  font-weight: 900;
  overflow-wrap: anywhere;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast.warn { border-color: rgba(255,215,100,.38); color: #ffe9b8; }
.toast.bad { border-color: rgba(255,95,128,.38); color: #ffd5df; }
.toast.good { border-color: rgba(67,255,155,.34); color: #ddffef; }
@media (max-width: 820px) {
  .topbar {
    width: min(var(--max), calc(100% - 18px));
    border-radius: 20px;
    padding: 8px 10px;
  }
  .brand { flex: 1 1 auto; max-width: calc(100% - 54px); }
  .brand strong { font-size: clamp(.74rem, 3.4vw, .9rem); }
  .players-head,
  .filters { gap: 9px; }
  .stats span { flex: 1 1 calc(50% - 7px); text-align: center; }
  .player-card { padding: 10px; border-radius: 16px; }
  .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions .btn { width: 100%; min-height: 40px; }
}
@media (max-width: 560px) {
  .topbar { margin-top: 7px; }
  .brand img { width: 38px; height: 38px; }
  .panel { padding: 11px; }
  .hero { gap: 10px; }
  .logo-tile { min-height: 92px; }
  .logo-tile img { max-height: 86px; }
  #linkBox { min-height: 70px; }
  .stats { gap: 6px; }
  .stats span { flex-basis: 100%; }
  .actions { grid-template-columns: 1fr; }
  .comment-form { display: grid; grid-template-columns: 1fr; }
  .comment-top { display: grid; gap: 2px; }
  .soundcloud-frame iframe,
  .player-card[data-type="song"] .soundcloud-frame iframe { height: 166px; }
  .login-actions { grid-template-columns: 1fr !important; }
}

.player-card.just-published {
  border-color: rgba(67,255,155,.65);
  box-shadow: 0 0 0 3px rgba(67,255,155,.12), 0 18px 58px rgba(0,0,0,.34);
  animation: publishedPulse 1.35s ease both;
}
@keyframes publishedPulse {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-2px) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}
.player-card[data-type="album"] .badge,
.player-card[data-type="playlist"] .badge {
  color: #b8fff0;
  border-color: rgba(57,247,255,.48);
  background: rgba(57,247,255,.10);
}


/* FINAL MOBILE HEADER REPAIR - prevents vertical brand text and uses a clean hamburger menu */
.topbar {
  position: relative !important;
  top: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: min(var(--max), calc(100% - var(--safe) * 2)) !important;
  min-height: 64px;
  padding: 8px 10px !important;
  overflow: visible !important;
  border-radius: 22px !important;
}
.brand {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 56px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.brand img {
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
}
.brand span {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.brand strong,
.brand small {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  max-width: 100% !important;
}
.brand strong {
  font-size: clamp(.78rem, 2.3vw, .96rem) !important;
  line-height: 1.05 !important;
  letter-spacing: .01em !important;
}
.brand small {
  font-size: .72rem !important;
  line-height: 1.15 !important;
}
.menu-toggle {
  display: inline-flex !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 5px !important;
  border: 1px solid rgba(57,247,255,.38) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.menu-toggle span {
  display: block !important;
  width: 21px !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: var(--text) !important;
}
.nav {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 10px !important;
  left: auto !important;
  z-index: 100 !important;
  display: none !important;
  width: min(280px, calc(100vw - 24px)) !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  padding: 10px !important;
  border: 1px solid rgba(57,247,255,.30) !important;
  border-radius: 18px !important;
  background: rgba(3, 5, 17, .98) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.48) !important;
  backdrop-filter: blur(18px) !important;
}
.nav.open { display: flex !important; }
.nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.052) !important;
  color: var(--text) !important;
  font-size: .88rem !important;
  text-align: center !important;
  white-space: nowrap !important;
}
@media (max-width: 560px) {
  :root { --safe: 8px; }
  .topbar {
    width: calc(100% - 16px) !important;
    min-height: 58px !important;
    margin-top: 8px !important;
    padding: 7px 8px !important;
    border-radius: 18px !important;
  }
  .brand { max-width: calc(100% - 52px) !important; gap: 7px !important; }
  .brand img { width: 40px !important; height: 40px !important; }
  .brand strong { font-size: clamp(.72rem, 3.2vw, .84rem) !important; }
  .brand small { display: block !important; font-size: .64rem !important; }
  .menu-toggle { width: 42px !important; min-width: 42px !important; height: 40px !important; }
  .nav { right: 0 !important; width: min(260px, calc(100vw - 16px)) !important; }
}
@media (max-width: 380px) {
  .brand small { display: none !important; }
  .brand strong { font-size: .72rem !important; }
  .brand img { width: 38px !important; height: 38px !important; }
}

/* WWCFAM SCD HEADER VISIBILITY + HAMBURGER FINAL FIX
   Keeps the full header visible at the top of every page, uses hamburger on every device,
   and prevents the brand/menu from disappearing or stacking wrong. */
body:not(.gate-locked) .topbar {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  user-select: auto !important;
}
.topbar {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 1000 !important;
  width: min(var(--max), calc(100% - var(--safe) * 2)) !important;
  min-height: 64px !important;
  margin: 10px auto 18px !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  overflow: visible !important;
  border-radius: 24px !important;
  border: 1px solid rgba(57,247,255,.28) !important;
  background: rgba(3, 5, 17, .92) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.34) !important;
}
.brand {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 58px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  overflow: hidden !important;
}
.brand img {
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  border-radius: 13px !important;
}
.brand span {
  min-width: 0 !important;
  max-width: 100% !important;
  display: grid !important;
  gap: 2px !important;
  overflow: hidden !important;
}
.brand strong,
.brand small {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}
.brand strong {
  font-size: clamp(.78rem, 2.1vw, .96rem) !important;
  line-height: 1.05 !important;
  letter-spacing: .01em !important;
}
.brand small {
  font-size: .72rem !important;
  line-height: 1.12 !important;
  color: var(--muted) !important;
}
.menu-toggle {
  display: inline-flex !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 43px !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 5px !important;
  border: 1px solid rgba(57,247,255,.42) !important;
  border-radius: 15px !important;
  background: linear-gradient(135deg, rgba(57,247,255,.12), rgba(255,73,204,.08)) !important;
  color: var(--text) !important;
  cursor: pointer !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.menu-toggle span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--text) !important;
  transition: transform .18s ease, opacity .18s ease !important;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
.nav {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 10px !important;
  left: auto !important;
  z-index: 5000 !important;
  display: none !important;
  width: min(286px, calc(100vw - 20px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 20px) !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px solid rgba(57,247,255,.34) !important;
  border-radius: 18px !important;
  background: rgba(3,5,17,.98) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 25px 72px rgba(0,0,0,.55) !important;
}
.nav.open { display: flex !important; }
.nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--text) !important;
  font-size: .88rem !important;
  font-weight: 950 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.nav a:hover,
.nav a:focus-visible {
  background: rgba(57,247,255,.12) !important;
  border-color: rgba(57,247,255,.32) !important;
}
@media (max-width: 560px) {
  :root { --safe: 8px; }
  .topbar {
    width: calc(100% - 16px) !important;
    min-height: 58px !important;
    margin: 8px auto 12px !important;
    padding: 7px 8px !important;
    border-radius: 18px !important;
  }
  .brand { max-width: calc(100% - 50px) !important; gap: 7px !important; }
  .brand img { width: 39px !important; height: 39px !important; }
  .brand strong { font-size: clamp(.70rem, 3.25vw, .83rem) !important; }
  .brand small { display: block !important; font-size: .62rem !important; }
  .menu-toggle { flex-basis: 42px !important; width: 42px !important; min-width: 42px !important; height: 40px !important; }
  .nav { right: 0 !important; width: min(260px, calc(100vw - 16px)) !important; }
}
@media (max-width: 370px) {
  .brand small { display: none !important; }
  .brand strong { font-size: .70rem !important; }
  .brand img { width: 37px !important; height: 37px !important; }
}

/* CARD DROP electric UI upgrade — WWCFAM SCD */
:root {
  --electric-blue: #00cfff;
  --electric-cyan: #42fff4;
  --electric-purple: #b148ff;
  --electric-pink: #ff3bd4;
  --electric-orange: #ff8a22;
  --dark-card: rgba(6, 15, 34, .78);
  --dark-card-2: rgba(9, 7, 30, .84);
}
body {
  background:
    radial-gradient(circle at 4% 15%, rgba(0, 207, 255, .22), transparent 25rem),
    radial-gradient(circle at 97% 20%, rgba(177, 72, 255, .26), transparent 27rem),
    radial-gradient(circle at 10% 82%, rgba(255, 59, 212, .18), transparent 30rem),
    linear-gradient(135deg, #020712 0%, #061328 48%, #02030a 100%);
}
body::before {
  background-image:
    linear-gradient(rgba(66,255,244,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(177,72,255,.028) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, transparent 1.5px);
  background-size: 44px 44px, 44px 44px, 90px 90px;
  opacity: .42;
}
.topbar {
  border-radius: 0 0 22px 22px !important;
  border-color: rgba(66,255,244,.28) !important;
  background: linear-gradient(90deg, rgba(2,7,18,.96), rgba(7,16,38,.90), rgba(9,5,30,.95)) !important;
  box-shadow: 0 0 0 1px rgba(0,207,255,.08), 0 18px 55px rgba(0,0,0,.42), inset 0 -1px 0 rgba(66,255,244,.18) !important;
}
.brand strong { letter-spacing: .04em; text-transform: uppercase; }
.brand small { color: #bde9ff; }
.menu-toggle:hover, .nav a:hover {
  border-color: rgba(66,255,244,.42);
  box-shadow: 0 0 20px rgba(0,207,255,.12);
}
main { width: min(1420px, calc(100% - var(--safe) * 2)); }
.panel {
  border-color: rgba(66,255,244,.24);
  background: linear-gradient(145deg, rgba(4,13,31,.86), rgba(5,7,22,.76) 56%, rgba(15,8,39,.64));
  box-shadow: 0 20px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.055);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(0,207,255,.32), transparent 22%, transparent 74%, rgba(177,72,255,.28)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}
.hero {
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  min-height: 360px;
  background:
    radial-gradient(circle at 18% 50%, rgba(0,207,255,.14), transparent 22rem),
    radial-gradient(circle at 88% 42%, rgba(177,72,255,.22), transparent 26rem),
    linear-gradient(145deg, rgba(4,13,31,.88), rgba(6,8,26,.72));
}
.hero .eyebrow { color: #43fff3; }
.hero h1 {
  font-size: clamp(3.25rem, 9vw, 7rem);
  line-height: .82;
  letter-spacing: -.07em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, #cfffff 0%, #24eaff 42%, #2479ff 62%, #b148ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 22px rgba(0,207,255,.35), 0 0 45px rgba(177,72,255,.22);
}
.hero .subline {
  font-size: clamp(.98rem, 2vw, 1.18rem);
  max-width: 720px;
}
.hero .subline strong {
  display: inline-block;
  color: #fff;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: .8em;
  margin-bottom: 3px;
}
.logo-tile {
  position: relative;
  background:
    radial-gradient(circle at 50% 36%, rgba(66,255,244,.22), transparent 48%),
    radial-gradient(circle at 50% 80%, rgba(177,72,255,.16), transparent 46%),
    rgba(255,255,255,.04);
  box-shadow: inset 0 0 34px rgba(0,207,255,.11), 0 0 28px rgba(0,207,255,.08);
}
.logo-tile::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(66,255,244,.34);
  box-shadow: 0 0 22px rgba(0,207,255,.16), inset 0 0 20px rgba(177,72,255,.10);
}
.paste-label { color: #55fff4; letter-spacing: .08em; text-transform: uppercase; }
#linkBox {
  min-height: 102px;
  border-radius: 16px;
  border-color: rgba(66,255,244,.42);
  background: linear-gradient(180deg, rgba(9,24,46,.78), rgba(9,12,32,.78));
  box-shadow: inset 0 0 25px rgba(0,207,255,.08), 0 0 18px rgba(0,207,255,.08);
}
.status-line {
  color: #4dffad;
  text-shadow: 0 0 12px rgba(67,255,155,.26);
}
.players-panel .players-head {
  align-items: center;
}
.players-head .eyebrow::before {
  content: "⚡ ";
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.stats span {
  border-radius: 14px;
  padding: 11px 12px;
  background: linear-gradient(135deg, rgba(0,207,255,.10), rgba(177,72,255,.055));
  border-color: rgba(66,255,244,.26);
  text-transform: uppercase;
  letter-spacing: .045em;
  box-shadow: inset 0 0 22px rgba(0,207,255,.055);
}
.stats span:nth-child(1)::before { content: "▣ "; color: var(--electric-blue); }
.stats span:nth-child(2)::before { content: "◉ "; color: #43ff9b; }
.stats span:nth-child(3)::before { content: "♫ "; color: var(--electric-purple); }
.stats span:nth-child(4)::before { content: "▤ "; color: #ffb13b; }
.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 18px;
  align-items: start;
}
.player-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(66,255,244,.36);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(8, 20, 42, .90), rgba(8, 9, 32, .76) 56%, rgba(23, 9, 44, .72)),
    radial-gradient(circle at 20% 0%, rgba(66,255,244,.16), transparent 17rem);
  box-shadow: 0 0 0 1px rgba(0,207,255,.06), 0 25px 75px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.player-card::before,
.player-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.player-card::before {
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(66,255,244,.72) 18%, transparent 22% 47%, rgba(177,72,255,.62) 51%, transparent 56% 100%),
    linear-gradient(180deg, transparent 0 18%, rgba(0,207,255,.68) 21%, transparent 25% 72%, rgba(255,59,212,.52) 75%, transparent 80%);
  filter: blur(10px);
  opacity: .55;
  animation: cardElectricFlow 6.8s linear infinite;
}
.player-card::after {
  inset: 1px;
  border: 1px solid rgba(66,255,244,.20);
  box-shadow: inset 0 0 22px rgba(0,207,255,.09), 0 0 28px rgba(0,207,255,.16);
}
.player-card:hover {
  transform: translateY(-3px);
  border-color: rgba(66,255,244,.62);
  box-shadow: 0 0 0 1px rgba(66,255,244,.12), 0 28px 90px rgba(0,0,0,.48), 0 0 34px rgba(0,207,255,.16);
}
.player-card[data-type="playlist"] {
  border-color: rgba(177,72,255,.42);
}
.player-card[data-type="playlist"]::after {
  box-shadow: inset 0 0 22px rgba(177,72,255,.12), 0 0 32px rgba(177,72,255,.16);
}
@keyframes cardElectricFlow {
  0% { transform: translateX(-40%) translateY(-18%) rotate(0deg); opacity: .24; }
  45% { opacity: .72; }
  100% { transform: translateX(42%) translateY(18%) rotate(1deg); opacity: .24; }
}
.badge {
  background: linear-gradient(135deg, rgba(0,207,255,.22), rgba(177,72,255,.10));
  box-shadow: 0 0 18px rgba(0,207,255,.12);
}
.player-card[data-type="playlist"] .badge {
  color: #f5d3ff;
  border-color: rgba(177,72,255,.52);
  background: linear-gradient(135deg, rgba(177,72,255,.28), rgba(255,59,212,.10));
  box-shadow: 0 0 20px rgba(177,72,255,.15);
}
.player-card h3 {
  font-size: clamp(1.16rem, 2vw, 1.46rem);
  line-height: 1.08;
}
.soundcloud-frame {
  border-radius: 16px;
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(180deg, #080b13, #050505);
  box-shadow: inset 0 0 18px rgba(0,207,255,.08), 0 0 22px rgba(0,0,0,.28);
}
.actions {
  display: grid;
  grid-template-columns: minmax(76px, .7fr) repeat(3, minmax(90px, 1fr)) minmax(130px, 1.25fr);
  gap: 8px;
}
.btn {
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.fire-btn {
  color: #ffd7a0;
  border-color: rgba(255,138,34,.35);
  background: radial-gradient(circle at 50% 30%, rgba(255,138,34,.26), rgba(255,255,255,.045));
}
.fire-btn.active, .fire-btn:hover {
  box-shadow: 0 0 28px rgba(255,138,34,.25), inset 0 0 20px rgba(255,138,34,.08);
}
.repost-btn.active {
  box-shadow: 0 0 28px rgba(66,255,244,.20), inset 0 0 20px rgba(177,72,255,.08);
}
.open-btn {
  color: #ffcf9d;
  border-color: rgba(255,138,34,.25);
}
.comments {
  border-top-color: rgba(66,255,244,.20);
}
.comment {
  border-color: rgba(66,255,244,.12);
  background: rgba(3, 9, 24, .55);
}
.player-card.just-published {
  border-color: rgba(67,255,155,.84) !important;
  box-shadow: 0 0 0 3px rgba(67,255,155,.12), 0 0 50px rgba(67,255,155,.22), 0 25px 75px rgba(0,0,0,.36) !important;
}
.footer { color: #bde9ff; }
@media (max-width: 920px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions .open-btn { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  main { width: min(100%, calc(100% - 16px)); }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero h1 { font-size: clamp(2.55rem, 15vw, 4rem); }
  .logo-tile { min-height: 92px; }
  .stats { grid-template-columns: 1fr; }
  .actions { grid-template-columns: 1fr; }
  .soundcloud-frame iframe,
  .player-card[data-type="song"] .soundcloud-frame iframe { height: 176px; }
}


/* CARD DROP electric mockup closer pass + overlap/cutoff fixes */
:root{
  --max: 1520px;
  --electric-blue:#1bdcff;
  --electric-purple:#b854ff;
  --electric-pink:#ff4fd7;
  --electric-gold:#ffbf4d;
}
html, body { overflow-x: hidden; }
body {
  background:
    radial-gradient(circle at 8% 22%, rgba(20, 120, 255, .26), transparent 24rem),
    radial-gradient(circle at 88% 24%, rgba(184, 84, 255, .24), transparent 25rem),
    radial-gradient(circle at 48% 72%, rgba(31, 255, 255, .11), transparent 36rem),
    linear-gradient(180deg, #020611 0%, #07142a 48%, #030914 100%) !important;
}
body::before {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:0;
  opacity:.65;
  background:
    linear-gradient(90deg, transparent 0 49%, rgba(57,247,255,.10) 49.5% 50%, transparent 50.5% 100%),
    linear-gradient(0deg, transparent 0 49%, rgba(184,84,255,.08) 49.5% 50%, transparent 50.5% 100%),
    radial-gradient(circle at 15% 36%, transparent 0 16rem, rgba(27,220,255,.08) 16.2rem 16.35rem, transparent 16.6rem),
    radial-gradient(circle at 93% 18%, rgba(255,79,215,.15), transparent 30rem);
  background-size: 520px 520px, 520px 520px, auto, auto;
}
.topbar {
  width: min(1600px, calc(100% - 28px)) !important;
  max-width: none !important;
  border-radius: 18px !important;
  padding: 10px 16px !important;
  margin-top: 14px !important;
  background: linear-gradient(90deg, rgba(2, 8, 23, .93), rgba(9, 8, 31, .88), rgba(17, 4, 34, .92)) !important;
  border-color: rgba(88, 228, 255, .34) !important;
  box-shadow: 0 0 0 1px rgba(255,79,215,.12), 0 18px 52px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.brand img { width: 54px !important; height: 54px !important; border-radius: 16px !important; }
.brand strong { letter-spacing:.08em; font-size: clamp(.8rem, 1.55vw, 1.15rem) !important; white-space: normal; }
.brand small { color: #8beeff !important; font-size: .74rem !important; }
.menu-toggle { order: -1; margin-right: 8px; border-radius: 14px !important; width: 48px !important; height: 46px !important; background: rgba(255,255,255,.035) !important; }
.nav { right: 16px !important; top: calc(100% + 10px) !important; }
.nav a { font-size: .92rem !important; letter-spacing:.04em; }
@media (min-width: 900px) {
  .nav {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    min-width: auto !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .nav a { background: rgba(255,255,255,.035) !important; padding: 10px 14px !important; }
  .menu-toggle { display: inline-flex !important; }
}
main { width: min(1560px, calc(100% - var(--safe) * 2)); }
.panel {
  border-color: rgba(57,247,255,.26) !important;
  background: linear-gradient(145deg, rgba(5,15,35,.82), rgba(5, 8, 24, .74), rgba(16,5,34,.62)) !important;
  box-shadow: 0 18px 58px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.hero {
  grid-template-columns: minmax(140px, 240px) minmax(0, 1fr) !important;
  align-items:center;
  min-height: 300px;
}
.logo-tile { border-color: rgba(57,247,255,.44) !important; background: radial-gradient(circle at 50% 45%, rgba(57,247,255,.18), rgba(184,84,255,.08), rgba(255,255,255,.025)) !important; }
.hero-copy { min-width:0; }
.hero h1 {
  font-size: clamp(3rem, 8.3vw, 8rem) !important;
  line-height:.8 !important;
  letter-spacing:.02em !important;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg, #effbff 0%, #4eeaff 35%, #236dff 58%, #ff4fd7 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow: 0 0 22px rgba(57,247,255,.38), 0 0 42px rgba(255,79,215,.18);
}
.subline { max-width: 820px; font-size: clamp(1rem, 2vw, 1.25rem) !important; }
#linkBox {
  min-height: 88px !important;
  border-color: rgba(57,247,255,.40) !important;
  background: rgba(0, 9, 24, .68) !important;
  box-shadow: inset 0 0 20px rgba(57,247,255,.06);
}
.status-line { color:#40ffb0 !important; }
.players-head { grid-template-columns:minmax(0,1fr) minmax(260px, 520px) !important; }
.filters select, .filters input { min-width:0; }
.stats {
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px !important;
}
.stats span {
  border-radius:14px !important;
  padding: 13px 10px !important;
  text-align:center;
  background: linear-gradient(145deg, rgba(57,247,255,.12), rgba(255,79,215,.055)) !important;
  border-color: rgba(57,247,255,.30) !important;
  text-transform: capitalize;
}
.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)) !important; gap: 18px !important; }
.player-card {
  position:relative;
  overflow: visible !important;
  padding: 16px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(57,247,255,.54) !important;
  background: linear-gradient(145deg, rgba(5,20,42,.86), rgba(7,11,29,.86), rgba(22,7,39,.74)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035),
    0 0 30px rgba(27,220,255,.18),
    inset 0 0 24px rgba(57,247,255,.055) !important;
}
.player-card::before {
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:24px;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(90deg, transparent, rgba(57,247,255,.9), transparent) 0 0/70% 3px no-repeat,
    linear-gradient(180deg, transparent, rgba(57,247,255,.7), transparent) 0 0/3px 75% no-repeat,
    linear-gradient(270deg, transparent, rgba(255,79,215,.8), transparent) 100% 100%/70% 3px no-repeat,
    linear-gradient(0deg, transparent, rgba(184,84,255,.7), transparent) 100% 100%/3px 75% no-repeat;
  filter: drop-shadow(0 0 12px rgba(57,247,255,.65));
  animation: borderPulse 2.9s ease-in-out infinite alternate;
}
@keyframes borderPulse { from{opacity:.65} to{opacity:1; filter:drop-shadow(0 0 20px rgba(255,79,215,.58));} }
.player-card[data-type="playlist"]::before { filter: drop-shadow(0 0 16px rgba(255,79,215,.62)); }
.player-card[data-type="playlist"] { border-color: rgba(184,84,255,.58) !important; }
.card-top { min-width:0; }
.card-title-wrap { min-width:0; max-width:100%; }
.player-card h3 { font-size: clamp(1rem, 1.8vw, 1.45rem) !important; line-height:1.16; }
.badge { background: linear-gradient(135deg, rgba(57,247,255,.20), rgba(184,84,255,.13)) !important; }
.soundcloud-frame { border-radius:16px !important; border-color:rgba(255,255,255,.14) !important; max-width:100%; }
.soundcloud-frame iframe { height: clamp(190px, 24vw, 330px) !important; max-width:100%; }
.player-card[data-type="song"] .soundcloud-frame iframe { height: clamp(150px, 17vw, 190px) !important; }
.actions { display:grid !important; grid-template-columns: minmax(64px,.65fr) repeat(4, minmax(0,1fr)); gap:8px !important; }
.actions .btn { min-width:0; width:100%; border-radius:12px !important; }
.fire-btn { color:#ffd9aa !important; border-color:rgba(255,177,59,.50) !important; background:linear-gradient(135deg, rgba(255,95,27,.20), rgba(255,177,59,.08)) !important; box-shadow:0 0 18px rgba(255,108,30,.16); }
.fire-btn.active { box-shadow:0 0 24px rgba(255,108,30,.35) !important; }
.toast-wrap { right: 14px !important; bottom: 14px !important; top:auto !important; }
.reposted-card::after { display:none !important; }
.footer { margin-top: 34px; }
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr !important; text-align:center; min-height:auto; }
  .logo-tile { width:min(190px, 72vw); margin:0 auto; }
  .players-head { grid-template-columns:1fr !important; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .actions { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .fire-btn { grid-column: span 2; }
}
@media (max-width: 620px) {
  :root { --safe: 10px; }
  .topbar { width: calc(100% - 14px) !important; border-radius: 16px !important; padding: 8px !important; gap: 8px !important; }
  .brand { min-width:0; flex: 1 1 auto; }
  .brand img { width: 40px !important; height:40px !important; }
  .brand strong { font-size:.72rem !important; letter-spacing:.03em !important; }
  .brand small { display:none !important; }
  .nav { right: 0 !important; left: auto !important; width: min(280px, calc(100vw - 20px)) !important; }
  .panel { border-radius:18px !important; padding:12px !important; margin:14px 0 !important; }
  .hero h1 { font-size: clamp(2.5rem, 16vw, 4.2rem) !important; }
  .stats { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr !important; gap:14px !important; }
  .player-card { padding:12px !important; border-radius:18px !important; }
  .actions { grid-template-columns: 1fr !important; }
  .fire-btn { grid-column: auto; }
  .comment-form { grid-template-columns: 1fr !important; }
  .soundcloud-frame iframe, .player-card[data-type="song"] .soundcloud-frame iframe { height: 176px !important; }
  .toast-wrap { width: calc(100vw - 20px) !important; right:10px !important; bottom:10px !important; }
}

.drop-input-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(150px, 210px); gap:10px; align-items:stretch; }
.drop-input-wrap textarea { min-width:0; }
.drop-card-btn { min-height:100%; border-color:rgba(57,247,255,.55) !important; background:linear-gradient(135deg, rgba(27,220,255,.42), rgba(184,84,255,.35)) !important; box-shadow:0 0 24px rgba(57,247,255,.18); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:720px){ .drop-input-wrap{ grid-template-columns:1fr; } .drop-card-btn{ min-height:44px; } }


/* === WWCFAM SCD Card Drop Lightning Upgrade v3 === */
:root {
  --electric-blue: #2df3ff;
  --electric-purple: #b960ff;
  --electric-pink: #ff45cf;
  --electric-gold: #ffb84a;
}
body {
  background:
    radial-gradient(circle at 4% 26%, rgba(31, 191, 255, .22), transparent 24rem),
    radial-gradient(circle at 91% 18%, rgba(178, 73, 255, .25), transparent 27rem),
    radial-gradient(circle at 55% 86%, rgba(0, 237, 255, .15), transparent 29rem),
    linear-gradient(135deg, #03040d 0%, #061026 45%, #02030a 100%) !important;
}
body::after {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(120deg, transparent 0 47%, rgba(45,243,255,.14) 49%, transparent 52% 100%),
    linear-gradient(60deg, transparent 0 60%, rgba(255,69,207,.10) 62%, transparent 65% 100%);
  opacity: .22;
  mix-blend-mode: screen;
  animation: cardDropSkyPulse 8s ease-in-out infinite alternate;
}
@keyframes cardDropSkyPulse { from { opacity: .14; transform: scale(1); } to { opacity: .33; transform: scale(1.025); } }
.topbar {
  position: relative !important;
  top: auto !important;
  overflow: visible !important;
  border: 1px solid rgba(45,243,255,.46) !important;
  box-shadow: 0 0 0 1px rgba(185,96,255,.18), 0 0 34px rgba(45,243,255,.12), inset 0 0 26px rgba(45,243,255,.045) !important;
}
.topbar::before {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(45,243,255,.65), transparent 22%, transparent 70%, rgba(255,69,207,.58));
  opacity:.32;
  filter: blur(7px);
  z-index:-1;
}
.hero h1 {
  color: transparent !important;
  background: linear-gradient(90deg, #60f6ff 0%, #c9faff 23%, #3ea5ff 45%, #b960ff 70%, #ff55d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 20px rgba(45,243,255,.42), 0 0 42px rgba(185,96,255,.32);
  letter-spacing: .04em !important;
}
.drop-input-wrap {
  position: relative;
  border: 1px solid rgba(45,243,255,.38);
  border-radius: 19px;
  padding: 10px;
  background: rgba(4, 12, 30, .50);
  box-shadow: inset 0 0 28px rgba(45,243,255,.08), 0 0 28px rgba(45,243,255,.10);
}
.drop-input-wrap::before {
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: 22px;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(45,243,255,.8), transparent) 0 0/48% 2px no-repeat,
    linear-gradient(270deg, transparent, rgba(255,69,207,.65), transparent) 100% 100%/48% 2px no-repeat;
  filter: drop-shadow(0 0 12px rgba(45,243,255,.55));
  animation: electricFrameDrift 3.4s linear infinite;
}
@keyframes electricFrameDrift {
  0% { background-position: -70% 0, 170% 100%; opacity:.65; }
  50% { opacity:1; }
  100% { background-position: 170% 0, -70% 100%; opacity:.72; }
}
.players-panel, .reposts-panel { overflow: visible !important; }
.cards {
  overflow: visible !important;
  padding: 14px !important;
  margin: -8px !important;
  gap: clamp(18px, 2.4vw, 30px) !important;
}
.player-card {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
  transform-style: preserve-3d;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  border-color: rgba(45,243,255,.56) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(45,243,255,.14), transparent 15rem),
    radial-gradient(circle at 100% 0%, rgba(185,96,255,.14), transparent 14rem),
    linear-gradient(145deg, rgba(6, 17, 40, .92), rgba(3, 8, 22, .9) 62%, rgba(17, 8, 34, .88)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035),
    0 0 22px rgba(45,243,255,.23),
    0 18px 46px rgba(0,0,0,.34),
    inset 0 0 24px rgba(45,243,255,.065) !important;
}
.player-card:hover, .player-card.electric-hover {
  transform: translateY(-3px) scale(1.006);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 0 35px rgba(45,243,255,.32),
    0 24px 62px rgba(0,0,0,.42),
    inset 0 0 30px rgba(45,243,255,.09) !important;
}
.player-card[data-type="playlist"] {
  border-color: rgba(185,96,255,.62) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035),
    0 0 24px rgba(185,96,255,.25),
    0 18px 46px rgba(0,0,0,.34),
    inset 0 0 26px rgba(185,96,255,.07) !important;
}
.player-card > :not(.electric-svg):not(.electric-sparks) { position: relative; z-index: 3; }
.electric-svg {
  position: absolute;
  inset: -12px;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  pointer-events: none;
  overflow: visible;
  z-index: 2;
  mix-blend-mode: screen;
}
.electric-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 10 24;
  animation: electricDash 1.35s linear infinite, electricPulse 1.4s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 12px currentColor);
}
.electric-path.main { stroke: var(--electric-blue); stroke-width: 1.45; opacity: .96; }
.electric-path.hot { stroke: var(--electric-pink); stroke-width: .92; opacity: .74; animation-duration: 1.05s, 1.1s; }
.electric-path.ghost { stroke: #ffffff; stroke-width: .48; opacity: .52; stroke-dasharray: 4 18; animation-duration: .82s, .9s; }
.player-card[data-type="playlist"] .electric-path.main { stroke: var(--electric-purple); }
.player-card[data-type="playlist"] .electric-path.hot { stroke: var(--electric-pink); }
.player-card.reposted-card .electric-path.main { stroke: var(--electric-gold); }
@keyframes electricDash { to { stroke-dashoffset: -96; } }
@keyframes electricPulse { from { opacity: .46; } to { opacity: 1; } }
.electric-sparks {
  position:absolute;
  inset:-10px;
  pointer-events:none;
  z-index:2;
  overflow:visible;
}
.electric-sparks i {
  position:absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  color: var(--electric-blue);
  box-shadow: 0 0 10px currentColor, 0 0 18px currentColor;
  opacity: 0;
  animation: sparkOrbit 2.2s linear infinite;
}
.player-card[data-type="playlist"] .electric-sparks i { color: var(--electric-purple); }
.electric-sparks i:nth-child(1) { left: 4%; top: -2px; animation-delay: 0s; }
.electric-sparks i:nth-child(2) { left: 96%; top: 9%; animation-delay: .45s; }
.electric-sparks i:nth-child(3) { right: 6%; bottom: -2px; animation-delay: .9s; }
.electric-sparks i:nth-child(4) { left: -1px; bottom: 12%; animation-delay: 1.35s; }
@keyframes sparkOrbit {
  0%, 100% { opacity: 0; transform: scale(.6) translate(0,0); }
  18%, 60% { opacity: .95; }
  50% { transform: scale(1.45) translate(8px,-5px); }
}
.player-card .actions .btn {
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045)) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 16px rgba(45,243,255,.035);
}
.player-card .actions .btn:hover {
  border-color: rgba(45,243,255,.58) !important;
  box-shadow: 0 0 18px rgba(45,243,255,.18), inset 0 0 18px rgba(45,243,255,.08) !important;
}
.fire-btn {
  position: relative;
  border-color: rgba(255,184,74,.58) !important;
  box-shadow: 0 0 16px rgba(255,111,41,.24), inset 0 0 14px rgba(255,177,59,.10) !important;
}
.fire-btn::after {
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  pointer-events:none;
  border:1px solid rgba(255,184,74,.55);
  opacity:.6;
  filter: drop-shadow(0 0 10px rgba(255,98,29,.8));
  animation: fireButtonPulse 1.1s ease-in-out infinite alternate;
}
@keyframes fireButtonPulse { from { transform:scale(.97); opacity:.32; } to { transform:scale(1.04); opacity:.88; } }
.just-published .electric-svg { animation: newCardZap .95s ease-in-out 2; }
@keyframes newCardZap { 0%,100% { filter:none; } 50% { filter: brightness(1.8) drop-shadow(0 0 22px var(--electric-blue)); } }
@media (prefers-reduced-motion: reduce) {
  .electric-path, .electric-sparks i, .drop-input-wrap::before, .fire-btn::after, body::after { animation: none !important; }
}
@media (max-width: 620px) {
  .cards { padding: 9px !important; margin: 0 !important; gap: 18px !important; }
  .electric-svg { inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); }
  .player-card { transform:none !important; }
  .player-card:hover { transform:none !important; }
}


/* =========================================================
   WWCFAM SCD UNIVERSAL HEADER MENU FIX
   Same front-end header on every page. Hamburger controls the
   menu on ALL device sizes. Links stay hidden until opened.
   ========================================================= */
:root { --wwc-header-max: 1600px; }
.topbar,
body[data-page="home"] .topbar,
body[data-page="reposts"] .topbar,
body[data-page="login"] .topbar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 1000 !important;
  width: min(var(--wwc-header-max), calc(100% - 28px)) !important;
  max-width: var(--wwc-header-max) !important;
  margin: 14px auto 18px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 20px !important;
  overflow: visible !important;
  background: linear-gradient(90deg, rgba(3,8,22,.96), rgba(9,8,31,.94), rgba(17,4,34,.95)) !important;
  border: 1px solid rgba(88, 228, 255, .36) !important;
  box-shadow: 0 0 0 1px rgba(255,79,215,.10), 0 18px 52px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.gate-locked .topbar { display: none !important; }
.brand,
body[data-page="home"] .brand,
body[data-page="reposts"] .brand,
body[data-page="login"] .brand {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 64px) !important;
  text-decoration: none !important;
  overflow: hidden !important;
}
.brand img {
  flex: 0 0 52px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  object-fit: contain !important;
}
.brand span {
  display: grid !important;
  min-width: 0 !important;
  line-height: 1.08 !important;
}
.brand strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  letter-spacing: .055em !important;
  font-size: clamp(.82rem, 1.22vw, 1.08rem) !important;
}
.brand small {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #8beeff !important;
  font-size: .72rem !important;
}
.menu-toggle,
body[data-page="home"] .menu-toggle,
body[data-page="reposts"] .menu-toggle,
body[data-page="login"] .menu-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 5px !important;
  flex: 0 0 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 46px !important;
  margin: 0 !important;
  order: 2 !important;
  cursor: pointer !important;
  border-radius: 15px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--text) !important;
  z-index: 1002 !important;
}
.menu-toggle span {
  display: block !important;
  width: 23px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #eaf9ff !important;
  box-shadow: 0 0 10px rgba(45,243,255,.55) !important;
  transition: transform .18s ease, opacity .18s ease !important;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
.nav,
body[data-page="home"] .nav,
body[data-page="reposts"] .nav,
body[data-page="login"] .nav {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 12px !important;
  left: auto !important;
  width: min(310px, calc(100vw - 28px)) !important;
  min-width: 0 !important;
  display: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(88, 228, 255, .34) !important;
  background: linear-gradient(180deg, rgba(3,8,22,.98), rgba(12,8,34,.98)) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 30px rgba(45,243,255,.16) !important;
  z-index: 1001 !important;
}
.nav.open,
body[data-page="home"] .nav.open,
body[data-page="reposts"] .nav.open,
body[data-page="login"] .nav.open {
  display: flex !important;
}
.nav a,
body[data-page="home"] .nav a,
body[data-page="reposts"] .nav a,
body[data-page="login"] .nav a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.045) !important;
  color: #eef9ff !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  font-size: .9rem !important;
  letter-spacing: .045em !important;
  white-space: normal !important;
}
.nav a:hover,
.nav a:focus-visible {
  border-color: rgba(45,243,255,.58) !important;
  background: rgba(45,243,255,.10) !important;
  color: white !important;
  outline: none !important;
}
@media (max-width: 620px) {
  .topbar,
  body[data-page="home"] .topbar,
  body[data-page="reposts"] .topbar,
  body[data-page="login"] .topbar {
    width: calc(100% - 14px) !important;
    margin-top: 7px !important;
    margin-bottom: 12px !important;
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 16px !important;
  }
  .brand { gap: 8px !important; max-width: calc(100% - 52px) !important; }
  .brand img { flex-basis: 42px !important; width: 42px !important; height: 42px !important; border-radius: 13px !important; }
  .brand strong { font-size: .76rem !important; letter-spacing: .025em !important; }
  .brand small { font-size: .62rem !important; }
  .menu-toggle { flex-basis: 42px !important; width: 42px !important; min-width: 42px !important; height: 40px !important; border-radius: 13px !important; }
  .nav { right: 0 !important; top: calc(100% + 8px) !important; width: min(280px, calc(100vw - 16px)) !important; }
}
@media (max-width: 390px) {
  .brand small { display: none !important; }
  .brand strong { font-size: .70rem !important; }
}

/* Phase 1: lock Card Drop publishing until WWCFAM family agreement is accepted */
body.publish-locked #publish .paste-label,
body.publish-locked #publish .drop-input-wrap,
body.publish-locked #publish .status-line {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.publish-locked #linkBox,
body.publish-locked #dropCardBtn {
  pointer-events: none !important;
}
body:not(.publish-locked) #publish .paste-label,
body:not(.publish-locked) #publish .drop-input-wrap,
body:not(.publish-locked) #publish .status-line {
  visibility: visible !important;
}