.task-group {
  grid-column: 1/-1;
  margin: 14px 0 0;
  color: var(--pink);
}
:root {
  color-scheme: dark;
  --bg: #292929;
  --panel: #30302e;
  --panel2: #2d2d2b;
  --line: #50504d;
  --ink: #f5f3f4;
  --muted: #aaa6a7;
  --pink: #f353ad;
  --pink2: #dc438f;
  --soft: #3b2632;
  --green: #cceecb;
  font:
    14px/1.5 Manrope,
    Arial,
    sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}
button,
input,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 26px;
  letter-spacing: -0.04em;
}
h2 {
  font-size: 22px;
  letter-spacing: -0.04em;
  line-height: 1.25;
}
h3 {
  font-size: 17px;
}
p {
  color: var(--muted);
}
.shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 2px solid var(--pink);
  padding: 28px 20px;
  background: #272727;
  display: flex;
  flex-direction: column;
}
.logo {
  display: block;
  width: 195px;
  max-width: 100%;
  height: auto;
  margin: 0 0 35px;
}
.side-nav {
  display: grid;
  gap: 5px;
}
.side-nav button,
.mobile-nav button {
  border: 0;
  background: transparent;
  color: #bcb8ba;
  text-align: left;
}
.side-nav button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 45px;
  padding: 10px 13px;
  border-left: 3px solid transparent;
  border-radius: 9px;
  font-weight: 700;
}
.side-nav button:hover,
.side-nav button.active {
  background: #35232e;
  color: #fff;
  border-left-color: var(--pink);
}
.nav-icon {
  width: 15px;
  color: var(--pink);
  font-size: 18px;
  line-height: 1;
}
.side-bottom {
  margin-top: auto;
  border-top: 1px solid #484747;
  padding-top: 16px;
}
.profile {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 17px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pink);
  color: #281421;
  font-weight: 800;
}
.profile strong,
.profile small {
  display: block;
}
.profile small {
  color: var(--muted);
  font-size: 11px;
}
.outline,
.ghost,
.tiny,
.periods button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
}
.outline {
  width: 100%;
  min-height: 40px;
}
.main {
  min-width: 0;
  max-width: 1580px;
  width: 100%;
  padding: 30px 34px 70px;
}
.preview-strip {
  padding: 9px 13px;
  margin-bottom: 20px;
  border: 1px solid #714c60;
  border-radius: 9px;
  background: #372631;
  color: #e8b8d2;
  font:
    11px/1.5 "DM Mono",
    monospace;
  letter-spacing: 0.02em;
}
.lang-drop select {
  background: #2a2228;
  color: var(--ink, #fff);
  border: 1px solid #6c4a5c;
  border-radius: 999px;
  padding: 8px 12px;
  max-width: 220px;
}
.page-head h1 {
  margin-bottom: 1px;
}
.page-head p {
  margin: 0;
}
.pill {
  border: 1px solid #6c4a5c;
  background: #382b33;
  color: var(--pink);
  padding: 8px 13px;
  border-radius: 999px;
  font:
    11px "DM Mono",
    monospace;
  white-space: nowrap;
}
.page {
  display: none;
}
.page.active {
  display: block;
}
.card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(145deg, #373735, #30302f);
  padding: 20px;
  box-shadow: 0 8px 22px #00000010;
  min-width: 0;
}
.card + .card {
  margin-top: 18px;
}
.eyebrow {
  color: var(--pink);
  font:
    500 11px/1.4 "DM Mono",
    monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.section-head h2 {
  margin: 6px 0 4px;
}
.section-head p {
  margin: 0;
}
.hero-link {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(190px, 0.72fr) 190px auto;
  align-items: center;
  gap: 12px;
  border-color: #a9507a;
  box-shadow: 5px 6px 0 #76425e;
}
.hero-link h2 {
  max-width: 420px;
  margin: 7px 0 10px;
}
.hero-link p {
  margin: 0;
}
.hero-link input {
  min-width: 0;
  width: 100%;
  height: 43px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #292927;
  color: var(--pink);
  font:
    500 13px "DM Mono",
    monospace;
}
.primary {
  min-height: 43px;
  border: 1px solid var(--pink2);
  border-radius: 8px;
  background: var(--pink);
  color: #24131d;
  font-weight: 800;
  padding: 9px 16px;
}
.primary:hover {
  background: #ff70bf;
}
.ghost {
  min-height: 40px;
  padding: 8px 12px;
}
.ghost:hover,
.outline:hover,
.tiny:hover {
  border-color: var(--pink);
  color: var(--pink);
}
.status-pill {
  color: var(--pink);
  border: 1px solid #715366;
  background: #402d37;
  padding: 7px 11px;
  border-radius: 999px;
  font:
    11px "DM Mono",
    monospace;
  white-space: nowrap;
}
.connect-card {
  margin-top: 18px;
}
.connection-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.connection {
  min-width: 0;
  min-height: 185px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 15px;
  background: #30302e;
  display: flex;
  flex-direction: column;
}
.connection-top {
  display: flex;
  justify-content: space-between;
  color: var(--pink);
  font:
    500 13px "DM Mono",
    monospace;
}
.connection-top small {
  color: var(--muted);
  font-size: 10px;
}
.connection h3 {
  margin: 25px 0 8px;
}
.connection p {
  font-size: 12px;
  margin-bottom: 14px;
}
.connection .connection-action {
  margin-top: auto;
}
.tiny {
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
}
.score-card {
  margin-top: 18px;
}
.metric-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.metric {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #2b2b29;
}
.metric.major {
  background: linear-gradient(135deg, var(--pink), #db4b9d);
  color: #271521;
  border-color: transparent;
}
.metric span,
.metric strong,
.metric small {
  display: block;
}
.metric span {
  font-size: 12px;
  color: #bdb8ba;
}
.metric.major span,
.metric.major small {
  color: #593148;
}
.metric strong {
  margin: 7px 0;
  font:
    700 24px/1.2 "DM Mono",
    monospace;
  overflow-wrap: anywhere;
}
.metric.major strong {
  font-size: 29px;
}
.metric small {
  color: var(--muted);
  font-size: 11px;
}
.metric .meter {
  height: 7px;
  border-radius: 10px;
  background: #ffd8ec;
  margin: 10px 0 7px;
}
.metric .meter i {
  display: block;
  width: 82%;
  height: 100%;
  border-radius: 10px;
  background: #fff;
}
.metric-label {
  display: inline-block;
  margin-bottom: 5px;
}
.periods {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.periods button {
  min-height: 38px;
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 700;
}
.periods button.active {
  background: var(--pink);
  border-color: var(--pink);
  color: #251521;
}
.score-feature {
  display: grid;
  grid-template-columns: minmax(230px, 0.9fr) repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
  padding: 15px;
  border: 1px solid #8f4b6e;
  border-radius: 10px;
  background: #30252b;
}
.feature-total {
  border-radius: 8px;
  padding: 17px;
  background: linear-gradient(135deg, var(--pink), #dc4999);
  color: #251521;
}
.feature-total .eyebrow {
  color: #66364f;
}
.feature-total strong {
  display: block;
  margin: 10px 0;
  font:
    700 30px "DM Mono",
    monospace;
}
.feature-total p {
  margin: 0;
  color: #61344b;
  font-size: 12px;
}
.feature-source {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #343432;
}
.feature-source span,
.feature-source strong,
.feature-source small {
  display: block;
}
.feature-source span {
  font-size: 12px;
  color: var(--muted);
}
.feature-source strong {
  font:
    700 20px "DM Mono",
    monospace;
  margin: 10px 0;
}
.feature-source small {
  color: var(--muted);
  font-size: 11px;
}
.formula {
  padding: 12px 14px;
  border-radius: 7px;
  background: #2a2228;
  color: #f2dae7;
  font:
    12px/1.6 "DM Mono",
    monospace;
  overflow-wrap: anywhere;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 14px;
  margin-top: 15px;
}
.inner {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 17px;
  background: #2c2c2a;
}
.inner h3 {
  margin-bottom: 12px;
}
.chart {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  min-height: 180px;
  padding: 18px 8px 4px;
  border-bottom: 1px solid var(--line);
}
.chart-col {
  min-width: 0;
  flex: 1;
  text-align: center;
}
.bar {
  height: 115px;
  width: min(45px, 95%);
  background: #242423;
  margin: 6px auto;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.bar i {
  width: 100%;
  background: var(--pink);
  display: block;
  border-radius: 5px 5px 0 0;
}
.chart-col small {
  font:
    10px "DM Mono",
    monospace;
  color: var(--muted);
}
.chart-col b {
  font:
    11px "DM Mono",
    monospace;
}
.how-row {
  padding: 9px 10px;
  margin: 7px 0;
  background: #342b30;
  border-left: 3px solid var(--pink);
  font:
    12px/1.5 "DM Mono",
    monospace;
}
.table-scroll {
  overflow-x: auto;
  margin-top: 16px;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  font-size: 12px;
}
th,
td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
th {
  color: var(--muted);
  font:
    11px "DM Mono",
    monospace;
  text-transform: uppercase;
}
td:last-child,
th:last-child {
  text-align: right;
}
.secondary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.secondary-grid .card strong {
  display: block;
  margin: 10px 0;
  font:
    700 27px "DM Mono",
    monospace;
}
.secondary-grid .card p {
  font-size: 12px;
  margin-bottom: 0;
}
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}
.mission-card {
  min-height: 286px;
  display: flex;
  flex-direction: column;
}
.mission-card .section-head {
  margin-bottom: 5px;
}
.mission-card h2 {
  margin: 8px 0;
}
.mission-card p {
  font-size: 13px;
}
.mission-card .primary {
  align-self: flex-start;
  margin-top: auto;
}
.mode {
  border: 1px solid;
  padding: 4px 9px;
  border-radius: 99px;
  font:
    10px "DM Mono",
    monospace;
  white-space: nowrap;
}
.mode.manual {
  color: #f4cbab;
  border-color: #9b7150;
}
.mode.api {
  color: var(--green);
  border-color: #609167;
}
.select-label {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  color: var(--muted);
  font-size: 12px;
}
.select-label select,
.select-label input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #292927;
  color: var(--ink);
  padding: 8px 11px;
}
.keyword {
  display: inline-block;
  margin: 3px 0 13px;
  padding: 6px 10px;
  background: #432c39;
  border-radius: 999px;
  color: #ffd4ec;
  font:
    12px "DM Mono",
    monospace;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 17px 0;
}
.step {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #302f2e;
}
.step b,
.step small {
  display: block;
}
.step b {
  color: var(--pink);
  font:
    11px "DM Mono",
    monospace;
}
.step small {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}
.task-section {
  margin-top: 23px;
}
.task-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.task {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #2f2f2d;
}
.task small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}
.task .ghost {
  margin-top: 11px;
  font-size: 11px;
  min-height: 33px;
}
.notice {
  padding: 12px 14px;
  margin: 16px 0;
  border: 1px solid #754b61;
  border-radius: 8px;
  background: #392b33;
  color: #e5c5d5;
  font-size: 12px;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.calc-answer {
  margin-top: 16px;
  padding: 17px;
  border: 1px solid #9c557b;
  border-radius: 9px;
  background: #3b2933;
}
.calc-answer strong {
  display: block;
  font:
    700 30px "DM Mono",
    monospace;
  color: var(--pink);
}
.deck-hero {
  min-height: 275px;
  padding: 27px;
  background: radial-gradient(
    circle at 80% 20%,
    #8c3c67,
    #472839 35%,
    #272727 70%
  );
  border: 1px solid #975674;
  border-radius: 10px;
}
.deck-hero h2 {
  font-size: 38px;
  max-width: 480px;
  margin: 15px 0;
}
.deck-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}
.deck-cols li {
  margin: 9px 0;
}
.mobile-nav {
  display: none;
}
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483646;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 14px 18px;
  border: 1px solid #8c5472;
  border-radius: 8px;
  background: #3b2632;
  color: #fff;
  box-shadow: 0 8px 30px #0008;
  text-align: center;
}
.toast:not(.show) {
  display: none;
}
.toast.show,
.toast:popover-open {
  display: block;
}
.mission-brief {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.mission-brief strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dialog {
  width: min(500px, calc(100vw - 24px));
  padding: 21px;
  border: 1px solid #8e5874;
  border-radius: 12px;
  background: #30302f;
  color: var(--ink);
}
.dialog::backdrop {
  background: #000a;
}
.dialog-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.dialog .outline {
  width: auto;
  padding: 6px 12px;
}
.dialog p {
  font-size: 12px;
}
.dialog .primary {
  margin-top: 10px;
}
.source-note {
  font-size: 11px;
  color: var(--muted);
}
@media (max-width: 1200px) {
  .hero-link {
    grid-template-columns: 1fr 1fr;
  }
  .hero-link .status-pill {
    justify-self: start;
  }
  .connection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .metric.major {
    grid-column: span 2;
  }
  .score-feature {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .shell {
    display: block;
  }
  .sidebar {
    display: none;
  }
  .main {
    padding: 19px 15px 88px;
  }
  .page-head h1 {
    font-size: 24px;
  }
  .page-head {
    flex-direction: column;
  }
  .hero-link,
  .metric-grid,
  .score-feature,
  .split,
  .mission-grid,
  .secondary-grid,
  .calc-grid,
  .deck-cols {
    grid-template-columns: 1fr;
  }
  .metric.major {
    grid-column: auto;
  }
  .connection-grid,
  .task-list {
    grid-template-columns: 1fr 1fr;
  }
  .steps {
    grid-template-columns: 1fr 1fr;
  }
  .mobile-nav {
    display: flex;
    position: fixed;
    z-index: 40;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    padding: 6px;
    gap: 2px;
    border: 1px solid #754b61;
    border-radius: 14px;
    background: rgba(32, 20, 28, 0.96);
    backdrop-filter: blur(14px);
    justify-content: space-around;
    align-items: stretch;
    box-shadow: 0 8px 28px #0008;
  }
  .mobile-nav button {
    flex: 1 1 0;
    min-height: 44px;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 800;
    color: #bcb8ba;
    border: 0;
    background: transparent;
    border-radius: 10px;
    text-align: center;
  }
  .mobile-nav button.active {
    color: #fff;
    background: #35232e;
  }
  .mobile-nav button.mobile-profile {
    color: var(--pink);
  }
  #hub-view .site-footer {
    padding-bottom: 8px;
  }
  @media (max-width: 760px) {
    #hub-view .site-footer {
      margin-bottom: 78px;
    }
  }
  .deck-hero h2 {
    font-size: 29px;
  }
}
@media (max-width: 480px) {
  .connection-grid,
  .task-list,
  .steps {
    grid-template-columns: 1fr;
  }
  .pill {
    white-space: normal;
  }
  .section-head {
    flex-direction: column;
  }
  .periods button {
    flex: 1;
  }
}

/* One UI typeface, including numbers, labels, inputs and buttons. */
html,
body,
body *,
body *::before,
body *::after {
  font-family: Arial, Helvetica, sans-serif !important;
}

:root {
  font-family: Arial, Helvetica, sans-serif;
}
.preview-strip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
}
.eyebrow,
.pill,
.status-pill {
  font-weight: 700;
}
.page-head {
  margin-bottom: 22px;
}
.page-head p {
  max-width: 680px;
}
.connect-card .connection {
  min-height: 198px;
  padding: 16px;
  text-align: left;
  background: linear-gradient(150deg, #343432, #2c2c2a);
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.connect-card .connection:hover {
  border-color: #82657a;
  transform: translateY(-2px);
}
.connect-card .connection.is-connected {
  border-color: #54705c;
}
.connect-card .connection.needs-follow {
  border-color: #9b784d;
}
.connection-top {
  width: 100%;
  align-items: center;
  gap: 12px;
}
.connection-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid #595956;
  border-radius: 999px;
  color: #d5d1d2;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.connection-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.connection-badge.ready {
  color: #b9e8c2;
  background: #26372c;
  border-color: #54705c;
}
.connection-badge.waiting {
  color: #bcb7b9;
  background: #30302e;
}
.connection-badge.action-needed {
  color: #f3d7a9;
  background: #403525;
  border-color: #8b7349;
}
.connection-body {
  width: 100%;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid #464643;
}
.connection-body strong,
.connection-body small {
  display: block;
}
.connection-body strong {
  color: var(--ink);
  font-size: 13px;
}
.connection-body small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.35;
}
.connection-action {
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  gap: 7px;
}
.connection-action button,
.connection-action .official-link {
  width: 100%;
  min-height: 35px;
  font-size: 12px;
}
.connection-action .official-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}
.connection-action .tiny.primary {
  background: var(--pink);
  color: #24131d;
  border-color: var(--pink2);
  font-weight: 800;
}
.connection-action .tiny.primary:hover {
  background: #ff70bf;
}
.connection-disconnect {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 11px !important;
  min-height: 25px !important;
}
.connection-disconnect:hover {
  color: var(--pink);
}
.official-missing {
  display: block;
  color: #d5b69a;
  font-size: 11px;
  text-align: center;
}
.platform-logo {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  color: #fff;
  background: #1e1e1e;
}
.platform-logo svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}
.platform-ig {
  background: radial-gradient(circle at 30% 110%, #feda77 0%, #f58529 25%, #dd2a7b 50%, #8134af 75%, #515bd4 100%);
}
.platform-x {
  background: #000;
}
.platform-tg {
  background: #2aabee;
}
.platform-yt {
  background: #e51c3a;
}
.score-card .metric-grid {
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
}
.score-card .metric strong {
  font-size: 22px;
}
.score-card .metric.major strong {
  font-size: 29px;
}

/* The two weekly cards have the same structure and share a bottom action row. */
.mission-intro {
  margin-bottom: 16px;
}
.mission-intro h2 {
  margin: 5px 0;
}
.mission-intro p {
  margin: 0;
}
.mission-grid.simple {
  align-items: stretch;
}
.mission-grid.simple .card + .card {
  margin-top: 0;
}
.mission-grid.simple .mission-card {
  min-height: 322px;
  height: 100%;
  padding: 21px;
}
.mission-grid.simple .mission-card h2 {
  margin: 7px 0 10px;
}
.mission-card .mission-brief {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  min-height: 44px;
  margin: 2px 0 16px;
}
.mission-workspace {
  min-height: 161px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.weekly-asset {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #292929;
  min-height: 118px;
}
.weekly-asset video {
  width: 42%;
  min-width: 115px;
  height: 96px;
  flex: 0 0 42%;
  object-fit: cover;
  border-radius: 6px;
  background: #171717;
}
.weekly-asset > div {
  min-width: 0;
}
.weekly-asset strong,
.weekly-asset small {
  display: block;
}
.weekly-asset strong {
  margin: 3px 0;
  font-size: 13px;
}
.weekly-asset small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.download-video {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid var(--pink);
  border-radius: 7px;
  color: #ffd1e9;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.download-video:hover {
  background: #4a2c3c;
}
.mission-workspace .select-label {
  margin: 0;
}
.mission-grid.simple .video-field {
  margin-bottom: 0;
}
.mission-requirement {
  margin: 0 0 13px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #292929;
}
.mission-requirement span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.mission-requirement strong {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--ink);
}
.mission-grid.simple .select-label {
  margin: 0 0 13px;
}
.mission-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.mission-action small {
  color: var(--muted);
  font-size: 11px;
}
.mission-action .primary {
  flex: 0 0 auto;
  align-self: auto;
  margin-top: 0;
}
.submission-receipt {
  display: grid;
  gap: 3px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid #6c9a75;
  border-radius: 8px;
  background: #253629;
}
.submission-receipt[hidden] {
  display: none;
}
.submission-receipt strong {
  color: #d6f2d8;
  font-size: 12px;
}
.submission-receipt span {
  color: #c3d8c6;
  font-size: 11px;
}
.submission-receipt a {
  color: #e4fae5;
  font-size: 11px;
}
.mission-locked {
  border-color: #6c9a75;
}
.mission-locked .mode.manual {
  border-color: #6c9a75;
  color: #d6f2d8;
}
.mission-locked .mission-action button:disabled {
  opacity: 1;
  background: #2d4734;
  border-color: #6c9a75;
  color: #d6f2d8;
}
.demo-controls {
  margin-top: 14px;
  border: 1px dashed #76546a;
  border-radius: 8px;
  padding: 11px 14px;
  background: #302a2e;
}
.demo-controls summary {
  cursor: pointer;
  color: #f0c5dc;
  font-size: 12px;
  font-weight: 800;
}
.demo-controls p {
  margin: 9px 0;
  font-size: 11px;
}
.demo-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.demo-control-actions button {
  min-height: 34px;
  padding: 6px 10px;
}
.mission-help {
  margin-top: 12px;
}
.mission-help summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
}
.mission-help p {
  margin: 8px 0 0;
  font-size: 12px;
}
.weekly-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #76546a;
  border-radius: 999px;
  color: #f7cde2;
  background: #382a33;
  font-size: 12px;
  font-weight: 700;
}

/* Optional tasks remain hidden until their connected platform is opened. */
.platform-section {
  margin-top: 22px;
}
.platform-section h2 {
  margin-bottom: 4px;
}
.platform-empty {
  border: 1px dashed #74616b;
  border-radius: 9px;
  padding: 22px;
  background: #302b2e;
}
.platform-empty p {
  margin-bottom: 12px;
}
.platform-drawer {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #30302e;
  margin: 10px 0;
  overflow: hidden;
}
.platform-drawer summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 18px;
  cursor: pointer;
  font-weight: 800;
}
.drawer-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.drawer-title .platform-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.drawer-title .platform-logo svg {
  width: 19px;
  height: 19px;
}
.drawer-title small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.platform-drawer summary::-webkit-details-marker {
  display: none;
}
.platform-drawer summary::after {
  content: "Show tasks ▾";
  color: var(--pink);
  font-size: 12px;
  white-space: nowrap;
}
.platform-drawer[open] summary::after {
  content: "Hide tasks ▴";
}
.platform-drawer .platform-task-list {
  border-top: 1px solid var(--line);
  padding: 5px 18px 9px;
}
.follow-complete {
  margin: 4px 0 0;
  padding: 8px 0;
  color: #b9e8c2;
  font-size: 11px;
  border-bottom: 1px solid #474744;
}
.platform-task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #474744;
}
.platform-task-row:last-child {
  border-bottom: 0;
}
.platform-task-row strong {
  font-size: 13px;
}
.platform-task-row small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.platform-task-row button {
  flex: 0 0 auto;
}

/* Performance: one total, a plain-language source list and optional detail. */
.simple-performance .section-head {
  margin-bottom: 12px;
}
.score-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border: 1px solid #ad5985;
  border-radius: 11px;
  background: linear-gradient(135deg, #f355aa, #d74695);
  color: #281722;
}
.score-total span {
  display: block;
  font-size: 13px;
  font-weight: 800;
}
.score-total strong {
  display: block;
  margin: 5px 0;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
}
.score-total p {
  margin: 0;
  max-width: 450px;
  color: #543146;
  font-size: 13px;
}
.score-total .score-mark {
  width: 45px;
  height: 45px;
  border: 2px solid #6d3450;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 800;
}
.plain-head {
  margin: 26px 0 12px;
}
.plain-head h2 {
  margin-bottom: 3px;
}
.plain-head p {
  margin: 0;
}
.earning-list {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: #30302e;
}
.earning-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}
.earning-row:last-child {
  border-bottom: 0;
}
.earning-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #49303d;
  color: var(--pink);
  font-weight: 800;
}
.earning-row strong,
.earning-row small {
  display: block;
}
.earning-row strong {
  font-size: 14px;
}
.earning-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.earning-row .points {
  font-size: 16px;
  color: #ffd1e9;
  font-weight: 800;
  white-space: nowrap;
}
.result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.result-card {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 18px;
  background: #30302e;
}
.result-card h3 {
  margin-bottom: 12px;
}
.result-card p {
  margin: 0;
  font-size: 12px;
}
.result-card .flow-numbers {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.flow-numbers b {
  font-size: 26px;
  line-height: 1;
}
.flow-numbers span {
  color: var(--muted);
  font-size: 12px;
}
.flow-numbers .flow-arrow {
  font-size: 24px;
  color: var(--pink);
}
.rules {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 13px 16px;
  background: #2b2b29;
}
.rules summary {
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
}
.rules p,
.rules li {
  color: var(--muted);
  font-size: 12px;
}
.rules p {
  margin: 12px 0 0;
}
.rules ul {
  margin: 9px 0 4px;
  padding-left: 20px;
}
.simple-calculator .formula {
  margin-top: 15px;
}
.deck-clarity {
  margin-top: 15px;
  border-left: 4px solid var(--pink);
  padding: 13px 15px;
  background: #382a33;
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 1050px) {
  .score-card .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .score-card .metric.major {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  .mission-grid.simple,
  .result-grid,
  .score-card .metric-grid {
    grid-template-columns: 1fr;
  }
  .score-card .metric.major {
    grid-column: auto;
  }
  .mission-grid.simple .mission-card {
    min-height: 0;
  }
  .mission-card .mission-brief {
    min-height: 0;
  }
  .score-total {
    padding: 19px;
  }
  .score-total .score-mark {
    display: none;
  }
  .mission-action {
    align-items: flex-start;
    flex-direction: column;
  }
  .mission-action .primary {
    width: 100%;
  }
  .weekly-asset video {
    width: 100%;
    height: auto;
    flex-basis: auto;
  }
  .platform-task-row {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 400px) {
  .weekly-asset {
    align-items: flex-start;
    flex-direction: column;
  }
  .weekly-asset video {
    width: 100%;
    height: auto;
  }
}

/* Shared User + KOL campaign preview. Keep the existing Bunny Warriors shell. */
.preview-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.preview-strip span:last-child {
  font-size: 10px;
  color: #c8a1b5;
}
.page-head {
  margin-bottom: 16px;
}
.page-head p {
  max-width: 700px;
}
.campaign-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 21px;
  margin-bottom: 19px;
  border: 1px solid #945373;
  border-radius: 10px;
  background: linear-gradient(110deg, #452c3a, #302b2e);
}
.campaign-banner h2 {
  margin: 5px 0 5px;
  font-size: 20px;
}
.campaign-banner p {
  margin: 0;
  font-size: 12px;
  color: #d3bac7;
}
.campaign-dates {
  text-align: right;
  flex-shrink: 0;
}
.campaign-dates strong {
  display: block;
  font-size: 19px;
  color: #ffd5eb;
}
.campaign-dates small {
  display: block;
  margin-top: 4px;
  color: #cab2bf;
  font-size: 11px;
}
.campaign-status {
  display: inline-flex;
  padding: 4px 9px;
  border: 1px solid #9f7590;
  border-radius: 999px;
  color: #f7d5e7;
  font-size: 10px;
  font-weight: 700;
}
.campaign-banner .eyebrow {
  margin-right: 7px;
}
.start-here {
  margin: 5px 0 15px;
}
.start-here h2 {
  margin-bottom: 4px;
}
.start-here p {
  margin: 0;
}
.setup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.setup-grid .card + .card {
  margin-top: 0;
}
.setup-card {
  display: flex;
  flex-direction: column;
  padding: 18px;
}
.setup-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 15px;
}
.setup-number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #4b2e3e;
  color: #ffb8de;
  font-size: 14px;
  font-weight: 800;
}
.setup-status {
  font-size: 10px;
  color: #cbb7c2;
}
.setup-card h3 {
  font-size: 17px;
  line-height: 1.35;
  min-height: 46px;
  margin: 0 0 7px;
}
.setup-card > p {
  font-size: 12px;
  min-height: 38px;
  margin: 0 0 17px;
}
.setup-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.setup-actions .primary,
.setup-actions .ghost {
  width: 100%;
  min-height: 39px;
  font-size: 12px;
}
.setup-link {
  display: grid;
  place-items: center;
  text-decoration: none;
}
.setup-card .select-label {
  margin: 0;
  font-size: 11px;
}
.setup-card input {
  min-height: 39px;
  font-size: 12px;
}
.setup-card input:disabled {
  opacity: 0.6;
}
.setup-done {
  border-color: #5e7f66;
}
.setup-done .setup-number {
  background: #304b37;
  color: #ccefd0;
}
.setup-done .setup-status {
  color: #bfe4c5;
}
.setup-note {
  color: #c4b4bd;
  font-size: 11px;
  margin: 12px 0 0;
}
.setup-complete {
  border: 1px solid #5e7f66;
  border-radius: 10px;
  padding: 14px 18px;
  background: #2d352f;
}
.setup-complete summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #ccefd0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.setup-complete summary span:last-child {
  color: #f9c7e2;
}
.setup-complete[open] summary {
  margin-bottom: 16px;
}
.setup-restart {
  margin-top: 12px;
  padding: 7px 11px;
  font-size: 11px;
}
.ready-links-head {
  margin-top: 20px;
}
.link-awaiting-setup p {
  margin: 8px 0 14px;
  font-size: 12px;
}
.link-awaiting-setup button {
  margin-top: auto;
  align-self: flex-start;
}
.invite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.invite-grid .card + .card {
  margin-top: 0;
}
.invite-card {
  display: flex;
  flex-direction: column;
  padding: 21px;
}
.invite-card .section-head {
  margin-bottom: 13px;
  align-items: center;
}
.invite-card .section-head > div {
  min-width: 0;
}
.invite-card h2 {
  font-size: 20px;
  margin: 0 0 5px;
}
.invite-card p {
  font-size: 13px;
  margin: 0;
}
.invite-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 11px;
  background: #452f3c;
  color: #ffd0e7;
  font-size: 24px;
}
.invite-card .official-destination {
  color: #ffcae5;
  font-size: 11px;
  text-decoration: none;
  margin: 0 0 17px;
  align-self: flex-start;
}
.official-destination:hover {
  text-decoration: underline;
}
.link-label {
  font-size: 11px;
  font-weight: 700;
  color: #d1c8ce;
  margin-bottom: 6px;
}
.personal-link {
  display: flex;
  gap: 8px;
}
.personal-link input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  background: #282828;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #f6d8e8;
  font-size: 12px;
}
.personal-link button {
  flex-shrink: 0;
}
.invite-card .link-note {
  font-size: 11px;
  margin-top: 9px;
  min-height: 33px;
}
.invite-count {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid #4b4549;
}
.invite-count strong {
  font-size: 24px;
}
.invite-count span {
  font-size: 12px;
  color: #c7bfc3;
}
.next-step {
  margin: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 19px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #2d2d2c;
}
.next-step h3 {
  font-size: 15px;
  margin: 0 0 4px;
}
.next-step p {
  margin: 0;
  font-size: 12px;
}
.overview-points {
  margin-top: 18px;
}
.overview-points .section-head {
  margin-bottom: 14px;
}
.overview-score-grid {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.6fr);
  gap: 18px;
}
.overview-score {
  border-radius: 10px;
  padding: 22px;
  background: #f353ad;
  color: #24121d;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.overview-score span {
  font-size: 12px;
  font-weight: 700;
}
.overview-score strong {
  display: block;
  font-size: 39px;
  line-height: 1.2;
  margin: 8px 0;
}
.overview-score small {
  color: #513044;
  font-size: 12px;
}
.overview-sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.source-tile {
  background: #2d2d2c;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
}
.source-tile span,
.source-tile small {
  display: block;
  color: #c8bec3;
  font-size: 11px;
}
.source-tile strong {
  display: block;
  font-size: 22px;
  margin: 3px 0;
}
.source-tile.is-future {
  border-style: dashed;
}
.source-tile.is-future strong {
  font-size: 18px;
  color: #e1b8ce;
}
.preview-settings {
  margin: 0 0 18px;
}
.preview-settings summary {
  color: #c7b0bc;
  font-size: 11px;
}
.preview-settings .demo-control-actions {
  align-items: center;
  margin-top: 10px;
}
.preview-settings select {
  background: #282828;
  border: 1px solid #66525d;
  color: var(--ink);
  border-radius: 7px;
  padding: 8px;
  font-size: 12px;
}
.preview-settings label {
  font-size: 12px;
  color: #d8c1ce;
}
.mission-intro {
  margin-top: 5px;
}
.mission-intro h2 {
  font-size: 22px;
}
.mission-grid.simple .mission-card .mission-brief {
  min-height: 44px;
}
.mission-grid.simple .mission-card h2 {
  font-size: 21px;
}
.mission-action button:disabled {
  opacity: 1;
  background: #2d4734;
  border-color: #6c9a75;
  color: #d6f2d8;
}
.submission-receipt.needs-changes {
  border-color: #b78552;
  background: #443726;
}
.submission-receipt.needs-changes strong,
.submission-receipt.needs-changes span {
  color: #f4d2a6;
}
.mission-requirement strong {
  font-size: 12px;
}
.campaign-invites {
  margin-top: 23px;
}
.campaign-invites .invite-card {
  padding: 18px;
}
.campaign-invites .invite-card h2 {
  font-size: 18px;
}
.campaign-invites .section-head {
  margin-bottom: 9px;
}
.future-card {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px dashed #856778;
  border-radius: 10px;
  background: #342c31;
}
.future-card h3 {
  margin: 0 0 5px;
  font-size: 16px;
}
.future-card p {
  margin: 0;
  font-size: 12px;
}
.qap-rules {
  margin-top: 12px;
}
.qap-rules summary {
  cursor: pointer;
  color: #f1cde0;
  font-size: 12px;
  font-weight: 700;
}
.qap-rules ol {
  padding-left: 19px;
  color: #cec4c9;
  font-size: 12px;
  line-height: 1.65;
  margin: 10px 0 0;
}
.qap-rules p {
  margin-top: 10px;
}
.point-weight-note {
  margin-top: 14px;
  font-size: 11px;
  color: #d2b8c6;
}
.earning-row.is-future .points {
  color: #b6a9b0;
  font-size: 12px;
}
.result-statuses {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.result-statuses span {
  padding: 5px 8px;
  border: 1px solid #575150;
  border-radius: 999px;
  color: #ccc3c6;
  font-size: 10px;
}
.result-statuses span:first-child {
  color: #c8e8ce;
  border-color: #58705d;
}
.performance-note {
  margin: 14px 0 0;
  color: #bdb4b8;
  font-size: 12px;
}
.sample-badge {
  font-size: 10px;
  color: #cfb6c3;
  border: 1px solid #76546a;
  border-radius: 999px;
  padding: 5px 9px;
  white-space: nowrap;
}
.login-brand .sample-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b6f5c4;
  border-color: #2f8f55;
  background: #163322;
}
.login-brand .sample-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc6a;
  box-shadow: 0 0 0 0 rgba(61, 220, 106, 0.7);
  animation: live-rec 1.4s ease-out infinite;
}
@keyframes live-rec {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 220, 106, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(61, 220, 106, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 106, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .login-brand .sample-badge::before {
    animation: none;
  }
}
.site-footer {
  margin: 28px 0 0;
  padding: 16px 0 4px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.site-footer .footer-legal {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.site-footer .footer-legal a {
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
.site-footer .footer-legal a:hover {
  color: #fff;
}
.score-total .score-mark {
  font-size: 17px;
}
.deck-cols .card + .card {
  margin-top: 0;
}
.deck-cols .card p {
  font-size: 13px;
}
.caption-copy {
  margin-top: 12px;
}
@media (max-width: 1050px) {
  .setup-grid {
    grid-template-columns: 1fr;
  }
  .setup-card h3,
  .setup-card > p {
    min-height: 0;
  }
  .setup-card {
    padding: 17px;
  }
  .setup-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .setup-actions .primary,
  .setup-actions .ghost {
    flex: 1;
    width: auto;
  }
  .setup-actions .select-label {
    flex: 1;
    min-width: 180px;
  }
  .personal-link {
    flex-direction: column;
  }
  .overview-score-grid {
    grid-template-columns: 1fr;
  }
  .overview-score {
    padding: 19px;
  }
}
@media (max-width: 760px) {
  .setup-complete summary {
    flex-direction: column;
    gap: 5px;
  }
  .setup-actions {
    flex-direction: column;
  }
  .setup-actions .primary,
  .setup-actions .ghost {
    width: 100%;
  }
  .campaign-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }
  .campaign-dates {
    text-align: left;
  }
  .campaign-dates strong {
    font-size: 19px;
  }
  .invite-grid {
    grid-template-columns: 1fr;
  }
  .next-step {
    flex-direction: column;
    align-items: flex-start;
  }
  .overview-sources {
    gap: 8px;
  }
  .overview-score strong {
    font-size: 34px;
  }
  .preview-strip span:last-child {
    display: none;
  }
  .mission-action {
    flex-direction: column;
    align-items: stretch;
  }
  .mission-action .primary {
    width: 100%;
  }
  .invite-card .link-note {
    min-height: 0;
    margin-bottom: 12px;
  }
  .personal-link {
    flex-direction: row;
  }
}
@media (max-width: 390px) {
  .personal-link {
    flex-direction: column;
  }
  .overview-sources {
    grid-template-columns: 1fr;
  }
}

/* Revision 3: actions first; explanations open only when needed. */
.campaign-banner {
  padding: 14px 18px;
  gap: 14px;
  margin-bottom: 13px;
}
.campaign-banner h2 {
  font-size: 21px;
  margin: 8px 0 0;
}
.campaign-dates strong {
  font-size: 17px;
}
.preview-settings {
  margin: 0 0 17px;
  padding: 9px 13px;
}
.start-here {
  margin: 6px 0 12px;
}
.start-here h2 {
  font-size: 20px;
  margin: 0;
}
.setup-card {
  padding: 17px;
}
.setup-card-head {
  margin-bottom: 9px;
}
.setup-card h3 {
  min-height: 0;
  margin: 0 0 15px;
}
.setup-actions {
  gap: 7px;
}
.setup-actions .ghost {
  min-height: 32px;
  background: transparent;
}
.setup-grid .setup-actions .primary {
  min-height: 40px;
}
.setup-card .select-label {
  font-size: 12px;
}
.setup-card input {
  margin-top: 5px;
}
.setup-card .select-label:has(input:disabled) {
  opacity: 0.7;
}
.next-step {
  padding: 14px 18px;
  margin: 16px 0;
}
.next-step h3 {
  font-size: 17px;
}
.overview-points {
  padding: 19px;
}
.overview-points h2 {
  font-size: 20px;
  margin: 0;
}
.overview-score-grid {
  grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.8fr);
}
.overview-score {
  padding: 19px;
}
.overview-score strong {
  font-size: 36px;
}
.source-tile {
  padding: 11px 13px;
}
.source-tile span {
  font-size: 12px;
}
.source-tile strong {
  font-size: 22px;
  margin: 7px 0 0;
}
.source-tile.is-future strong {
  font-size: 17px;
}
.overview-points .rules {
  margin-top: 13px;
  padding: 10px 13px;
}
.compact-invite {
  padding: 17px;
}
.invite-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.compact-invite h2 {
  font-size: 17px;
  margin: 0;
}
.compact-invite .platform-logo,
.compact-invite .invite-icon {
  width: 33px;
  height: 33px;
  border-radius: 9px;
}
.compact-invite .platform-logo svg {
  width: 21px;
  height: 21px;
}
.invite-mini-count {
  font-size: 12px;
  color: var(--pink);
  white-space: nowrap;
}
.compact-invite .section-head {
  margin-bottom: 14px;
}
.personal-link input {
  min-height: 40px;
}
.compact-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}
.compact-section-head h2 {
  font-size: 20px;
  margin: 0;
}
.weekly-progress {
  padding: 6px 10px;
}
.mission-grid.simple .mission-card {
  min-height: 0;
  padding: 19px;
}
.mission-grid.simple .mission-card h2 {
  font-size: 21px;
  margin: 8px 0 10px;
}
.mission-steps {
  color: #e4c4d4;
  font-size: 13px;
  margin-bottom: 18px;
}
.mission-grid.simple .mission-workspace {
  min-height: 215px;
  gap: 12px;
}
.mission-grid.simple .select-label {
  margin: 0;
  font-size: 12px;
}
.video-field > span {
  display: block;
  margin-bottom: 8px;
}
.mission-workspace label input {
  margin-top: 8px;
}
.weekly-asset {
  min-height: 110px;
}
.weekly-asset video {
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 16/9;
}
.mission-requirement {
  margin: 0;
  padding: 10px 12px;
}
.mission-requirement strong {
  font-size: 13px;
}
.mission-action {
  justify-content: flex-end;
  padding-top: 15px;
}
.mission-action .primary {
  min-height: 42px;
}
.mission-help {
  padding: 10px 0;
}
.campaign-invites {
  margin-top: 14px;
}
.campaign-invites .next-step {
  margin: 0;
}
.compact-future {
  margin-top: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: #d8c1cd;
  font-size: 13px;
}
.compact-future .qap-rules {
  margin-top: 8px;
}
.compact-future .qap-rules p {
  font-size: 12px;
}
.simple-performance {
  padding: 21px;
}
.simple-performance .section-head h2 {
  font-size: 20px;
  margin: 0;
}
.score-total {
  padding: 20px 22px;
}
.score-total strong {
  margin: 7px 0 0;
  font-size: 39px;
}
.score-total .sample-badge {
  color: #532b42;
  border-color: #8a4066;
  align-self: flex-start;
}
.simple-results-wrap {
  overflow-x: auto;
  margin-top: 18px;
}
.simple-results {
  width: 100%;
  border-collapse: collapse;
}
.simple-results thead th {
  color: #c8bec3;
  font-weight: 400;
  font-size: 12px;
  padding: 10px 0;
}
.simple-results th {
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.simple-results tbody th {
  font-weight: 600;
}
.simple-results tbody th,
.simple-results td {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.simple-results th:nth-child(2),
.simple-results td:nth-child(2) {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}
.simple-results th:last-child,
.simple-results td:last-child {
  text-align: right;
  white-space: nowrap;
}
.simple-results td:last-child {
  color: #ffd1e9;
  font-weight: 700;
}
.simple-results td {
  font-variant-numeric: tabular-nums;
}
.pending-summary {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.pending-summary > div {
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pending-summary strong {
  font-size: 13px;
}
.pending-summary span {
  color: #c8bec3;
  font-size: 12px;
}
.campaign-checklist h2 {
  font-size: 21px;
}
.checklist-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.checklist-row strong {
  font-size: 15px;
}
.campaign-checklist .compact-future {
  border: 0;
  margin-top: 8px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 761px) and (max-width: 1050px) {
  .setup-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .setup-actions {
    flex-direction: column;
  }
  .setup-actions .select-label {
    min-width: 0;
  }
  .overview-score-grid {
    grid-template-columns: minmax(180px, 0.85fr) minmax(0, 1.8fr);
  }
  .personal-link {
    flex-direction: row;
  }
}
@media (max-width: 760px) {
  .campaign-banner {
    gap: 10px;
  }
  .campaign-banner h2 {
    font-size: 19px;
  }
  .setup-card h3 {
    margin-bottom: 10px;
  }
  .setup-card-head {
    margin-bottom: 7px;
  }
  .overview-score-grid {
    grid-template-columns: 1fr;
  }
  .mission-grid.simple .mission-workspace {
    min-height: 0;
  }
  .mission-card .mission-action {
    margin-top: 12px;
  }
  .compact-invite .section-head {
    gap: 7px;
  }
  .compact-invite h2 {
    font-size: 15px;
  }
  .invite-mini-count {
    font-size: 11px;
  }
  .simple-performance {
    padding: 17px;
  }
  .simple-performance > .section-head {
    flex-wrap: wrap;
    gap: 13px;
  }
  .simple-results tbody th,
  .simple-results td {
    font-size: 13px;
  }
  .checklist-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }
  .checklist-row button {
    grid-column: 2;
    justify-self: start;
  }
}

/* Revision 4: Privy signup is complete; confirm an editable referral code. */
.campaign-banner h2 {
  margin: 0;
  font-size: 23px;
}
.campaign-banner .campaign-kicker {
  display: block;
  margin: 0 0 8px;
}
.campaign-banner p {
  margin: 7px 0 0;
  font-size: 14px;
  color: #efc8dc;
}
.campaign-dates .campaign-status {
  margin-bottom: 7px;
}
.referral-name-card {
  padding: 19px;
}
.referral-name-card h2 {
  font-size: 20px;
  margin: 0;
}
.referral-name-card .section-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.referral-name-card > p {
  margin: 0 0 15px;
  font-size: 13px;
}
.account-ready {
  display: inline-flex;
  align-items: center;
  border: 1px solid #55715d;
  border-radius: 999px;
  padding: 6px 9px;
  background: #293a2e;
  color: #c3e9ca;
  font-size: 12px;
  white-space: nowrap;
}
.referral-name-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.referral-name-form .select-label {
  flex: 1 1 250px;
  margin: 0;
  font-size: 12px;
}
.referral-name-form input {
  margin-top: 7px;
  min-height: 43px;
}
.referral-name-form button {
  min-height: 43px;
}
.referral-name-card > small {
  display: block;
  margin-top: 9px;
  color: #ccc0c7;
  font-size: 12px;
}
.referral-saved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 17px;
  background: #2d352f;
  border: 1px solid #5e7f66;
  border-radius: 10px;
}
.referral-saved > div {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  color: #cfebd4;
  font-size: 14px;
}
.referral-saved strong {
  color: #ffd1e9;
}
.referral-check {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  background: #3e5744;
  border-radius: 50%;
}
.referral-saved button {
  flex: 0 0 auto;
  padding: 7px 12px;
}
.join-to-invite > p,
.referral-awaiting-name > p {
  margin: 0 0 14px;
  font-size: 13px;
  color: #d3c7ce;
}
.channel-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.channel-actions > * {
  flex: 1;
  min-height: 40px;
  font-size: 12px;
}
.waiting-link {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 12px;
  background: #2b292a;
  border: 1px dashed #665861;
  border-radius: 8px;
  color: #c5b1be;
  font-size: 12px;
}
.referral-awaiting-name button {
  margin-top: 12px;
  align-self: flex-start;
}
.ready-links-head {
  margin-top: 15px;
}
@media (max-width: 760px) {
  .campaign-banner h2 {
    font-size: 21px;
  }
  .campaign-banner p {
    font-size: 13px;
  }
  .referral-name-card {
    padding: 17px;
  }
  .referral-name-card > .section-head {
    flex-wrap: wrap;
  }
  .referral-name-form button {
    flex: 1;
  }
  .referral-name-form .select-label {
    flex-basis: 100%;
  }
  .referral-saved {
    align-items: flex-start;
  }
  .referral-saved > div {
    font-size: 13px;
  }
  .channel-actions {
    flex-wrap: wrap;
  }
}

/* Revision 7: login, required referral onboarding, and the four-card Overview. */
#login-view[hidden],
#hub-view[hidden] {
  display: none !important;
}
.login-view {
  min-height: 100vh;
  padding: 32px 28px 42px;
  background:
    radial-gradient(ellipse at 50% 0, #462c3b 0, transparent 52%), #292929;
}
.login-shell {
  max-width: 1000px;
  margin: 0 auto;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 23px;
  margin-bottom: 22px;
  border-bottom: 1px solid #55434d;
}
.login-brand .logo,
.login-brand img {
  display: block;
  width: 190px;
  max-width: 40%;
  height: auto;
  margin: 0;
}
.login-brand-copy {
  padding-left: 24px;
  border-left: 1px solid #6c4c5d;
}
.login-brand-copy strong,
.login-brand-copy span {
  display: block;
}
.login-brand-copy strong {
  font-size: 20px;
  line-height: 1.2;
}
.login-brand-copy span,
.login-brand-copy p {
  margin: 5px 0 0;
  font-size: 12px;
  color: #cbbfc6;
}
.login-video {
  overflow: hidden;
  border: 1px solid #755567;
  border-radius: 14px;
  background: #111;
}
.login-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
  background: #111;
}
.intro-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 290px;
  padding: 28px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 70%, #4d3040 0, #2b2729 65%);
}
.intro-play {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding-left: 4px;
  margin-bottom: 21px;
  border: 1px solid #b37498;
  border-radius: 50%;
  background: #f353ad;
  color: #2c1823;
  font-size: 25px;
  box-shadow: 0 0 0 9px #f353ad10;
}
.intro-placeholder h1 {
  margin: 0 0 10px;
  font-size: 32px;
  letter-spacing: -0.035em;
}
.intro-placeholder p {
  max-width: 480px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #d0c0c8;
}
.intro-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 19px;
  background: #302a2e;
  border-top: 1px solid #55414c;
  color: #cbbcc4;
  font-size: 12px;
}
.intro-caption strong {
  color: #f6d2e6;
}
.login-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 19px 0;
}
.login-benefit {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid #55474f;
  border-radius: 11px;
  background: #30302e;
}
.benefit-number {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-bottom: 12px;
  border: 1px solid #7b4e66;
  border-radius: 8px;
  background: #422c37;
  color: #ffbfdf;
  font-size: 12px;
  font-weight: 700;
}
.login-benefit h2 {
  margin: 0 0 7px;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.login-benefit p {
  margin: 0;
  color: #c0b8bc;
  font-size: 13px;
  line-height: 1.5;
}
.privy-signin {
  text-align: center;
  padding: 22px 26px 19px;
  border: 1px solid #a75a82;
  border-radius: 12px;
  background: #352b30;
}
.privy-label {
  display: inline-block;
  margin-bottom: 8px;
  color: #f0a6cd;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.privy-signin h2 {
  margin: 0 0 17px;
  font-size: 22px;
}
.privy-signin > p {
  margin: 0 auto 17px;
  max-width: 550px;
  color: #cdbfc6;
  font-size: 13px;
}
.privy-button {
  width: min(100%, 330px);
  min-height: 45px;
  font-size: 14px;
}
.demo-login-note {
  display: block;
  margin: 11px 0 0 !important;
  color: #aa9ba3 !important;
  font-size: 11px !important;
}
.referral-onboarding {
  width: min(510px, calc(100vw - 32px));
  padding: 28px;
  border-color: #a96388;
  box-shadow: 0 24px 90px #0009;
}
.referral-onboarding::backdrop {
  background: #161116cf;
  backdrop-filter: blur(6px);
}
.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.onboarding-header .logo,
.onboarding-header img {
  width: 130px;
  height: auto;
  margin: 0;
}
.onboarding-step {
  color: #e7b2ce;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.referral-onboarding h2 {
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: -0.035em;
}
.referral-onboarding > p {
  margin: 0 0 19px;
  color: #d0c0c8;
  font-size: 14px;
  line-height: 1.55;
}
.referral-onboarding .referral-name-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.referral-onboarding .referral-name-form label {
  display: grid;
  gap: 7px;
  color: #e6dce1;
  font-size: 12px;
  font-weight: 700;
}
.referral-onboarding .referral-name-form input {
  width: 100%;
  min-height: 46px;
  margin: 0;
  border: 1px solid #846276;
  border-radius: 8px;
  background: #252325;
  padding: 10px 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}
.referral-onboarding .referral-name-form button {
  width: 100%;
  min-height: 45px;
  margin: 0;
}
.referral-onboarding .referral-name-form input.is-invalid {
  border-color: #e23b6a;
}
.referral-onboarding small,
.referral-onboarding .helper {
  display: block;
  color: #bfb0b8;
  font-size: 11px;
  line-height: 1.5;
}
.onboarding-error {
  margin: 9px 0 0;
  color: #ffb4c4 !important;
  font-size: 12px !important;
}
.onboarding-error[hidden] {
  display: none;
}
.locked-referral-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid #775268;
  border-radius: 999px;
  background: #382b33;
  color: #ebc7db;
  font-size: 12px;
  white-space: nowrap;
}
.locked-referral-pill strong {
  color: #ffb8de;
}

.score-period-note {
  margin: 12px 0 0;
  color: var(--pink);
  font-size: 12px;
  line-height: 1.4;
}
.dashboard-score-card {
  min-width: 0;
}
.dashboard-score-card .rules {
  margin-top: auto;
}
.mission-card,
.invite-card,
.guide-section,
.dashboard-link,
.personal-link,
.plan-actions {
  min-width: 0;
}
.mission-card .mission-brief {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  min-height: 44px;
  margin: 2px 0 16px;
}
.mission-card .mission-workspace,
.mission-card .weekly-asset,
.mission-card .mission-requirement {
  min-width: 0;
  max-width: 100%;
}
.mission-card .mission-action {
  display: block;
  width: 100%;
  margin-top: auto;
}
.mission-card .mission-action .primary {
  width: 100%;
  align-self: stretch;
}
.invite-card .invite-brief {
  display: block;
  margin: 0 0 12px;
  color: #c6b7bf;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.invite-card .personal-link,
.invite-card .channel-actions {
  width: 100%;
  max-width: 100%;
  margin-top: auto;
}
.invite-card .channel-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.invite-card .channel-actions > *,
.invite-card .personal-link button,
.referral-awaiting-name button {
  width: 100%;
  min-width: 0;
}
.invite-card .personal-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
.invite-card .personal-link input,
.card input[readonly] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.referral-awaiting-name .waiting-link {
  width: 100%;
  margin-top: auto;
  overflow-wrap: anywhere;
}
.guide-sections > .guide-section {
  background: linear-gradient(145deg, #373735, #30302f);
}
.guide-section,
.guide-post-block,
.guide-points-table {
  max-width: 100%;
}
.platform-reg {
  background: #4a3944;
}
.dashboard-join .dashboard-link-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  color: #d9ced4;
  font-size: 12px;
  font-weight: 700;
}
.dashboard-join .platform-logo,
.dashboard-link .platform-logo {
  width: 23px;
  height: 23px;
  border-radius: 6px;
}
.dashboard-join .platform-logo svg,
.dashboard-link .platform-logo svg {
  width: 15px;
  height: 15px;
}
.dashboard-link-label {
  min-width: 0;
}
.dashboard-link-label label {
  min-width: 0;
  margin: 0;
  color: inherit;
  font: inherit;
}
.dashboard-join .dashboard-link-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  color: #d9ced4;
  font-size: 12px;
  font-weight: 700;
}
.dashboard-join .platform-logo,
.dashboard-link .platform-logo {
  width: 23px;
  height: 23px;
  border-radius: 6px;
}
.dashboard-join .platform-logo svg,
.dashboard-link .platform-logo svg {
  width: 15px;
  height: 15px;
}
.dashboard-link-label {
  min-width: 0;
}
.dashboard-link-label label {
  min-width: 0;
  margin: 0;
  color: inherit;
  font: inherit;
}

.overview-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  align-items: stretch;
}
.overview-dashboard > .card {
  min-width: 0;
  margin: 0;
  padding: 21px;
}
.overview-dashboard > .card + .card {
  margin-top: 0;
}
.growth-plan-card {
  display: flex;
  flex-direction: column;
  border-color: var(--line);
  background: linear-gradient(145deg, #373735, #30302f);
}
.growth-plan-heading {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.growth-plan-heading .eyebrow {
  font-size: 10px;
}
.growth-plan-heading h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.plan-meta {
  display: flex;
  align-items: center;
  gap: 8px 11px;
  flex-wrap: wrap;
  margin: 15px 0 18px;
  color: #cfbdc6;
  font-size: 11px;
}
.plan-meta .campaign-status {
  padding: 3px 8px;
  font-size: 10px;
}
.plan-meta small {
  color: #a998a2;
  font-size: 10px;
}
.plan-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: auto;
}
.plan-action {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #292929;
}
.plan-number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 11px;
  border-radius: 8px;
  background: #2b1823;
  color: var(--pink);
  font:
    500 12px/1 "DM Mono",
    monospace;
}
.plan-action h3 {
  margin: 0 0 5px;
  font-size: 14px;
}
.plan-action p {
  margin: 0;
  color: #c6b7bf;
  font-size: 11px;
  line-height: 1.45;
}
.missions-plan {
  margin-bottom: 20px;
  padding: 21px;
}
.missions-plan .growth-plan-heading {
  flex-direction: row;
  align-items: center;
  gap: 13px;
}
.missions-plan .growth-plan-heading h2 {
  font-size: 23px;
}
.missions-plan .plan-meta {
  margin: 13px 0 17px;
}
.missions-plan .plan-action {
  padding: 13px 15px;
}
.missions-plan .plan-number {
  display: inline-block;
  margin: 0 7px 0 0;
}
.missions-plan .plan-action h3 {
  display: inline;
  font-size: 14px;
}
.missions-plan .plan-action p {
  margin-top: 5px;
}
.dashboard-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 19px;
}
.dashboard-card-head h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.025em;
}
.dashboard-card-head .periods {
  gap: 5px;
  flex-wrap: nowrap;
}
.dashboard-card-head .periods button {
  min-height: 31px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 10px;
  white-space: nowrap;
}
.dashboard-score-card {
  display: flex;
  flex-direction: column;
}
.dashboard-points {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1;
  min-height: 142px;
  padding: 19px 21px;
  border: 1px solid #a3557f;
  border-radius: 10px;
  background: #f353ad;
  color: #281520;
}
.dashboard-points strong {
  font-size: clamp(38px, 4vw, 51px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.dashboard-points span {
  margin-top: 9px;
  font-size: 12px;
  font-weight: 700;
  color: #593148;
}
.overview-dashboard .rules {
  margin: 14px 0 0;
  padding: 11px 13px;
  background: #2b292a;
}
.overview-dashboard .rules summary {
  font-size: 12px;
  color: #d9cbd2;
}
.overview-dashboard .rules p,
.overview-dashboard .rules li {
  color: #c1b4bc;
}
.acquisition-card,
.participation-card {
  display: flex;
  flex-direction: column;
}
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-bottom: 17px;
}
.dashboard-metric {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #292929;
}
.dashboard-metric label,
.dashboard-metric > span {
  display: block;
  color: var(--muted);
  font:
    500 11px/1.3 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dashboard-metric strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--ink);
  font:
    500 29px/1.1 "DM Mono",
    monospace;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.dashboard-metric small {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  color: var(--pink);
  font-size: 11px;
  line-height: 1.4;
}
.dashboard-metric small .metric-rate {
  color: var(--muted);
  text-align: left;
}
.dashboard-metric small .metric-total {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
.dashboard-links {
  display: grid;
  gap: 11px;
  margin-top: auto;
  padding-top: 2px;
}
.dashboard-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 8px;
}
.dashboard-link > label,
.dashboard-link > span,
.dashboard-link > .link-label,
.dashboard-link > .dashboard-link-label {
  display: flex;
  grid-column: 1/-1;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #d9ced4;
  font-size: 12px;
  font-weight: 700;
}
.dashboard-link .platform-logo {
  width: 23px;
  height: 23px;
  border-radius: 6px;
}
.dashboard-link .platform-logo svg {
  width: 15px;
  height: 15px;
}
.dashboard-link .personal-link {
  display: contents;
}
.dashboard-link input {
  width: 100%;
  min-width: 0;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid #62515b;
  border-radius: 7px;
  background: #252325;
  color: var(--pink);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-link button {
  min-height: 39px;
  padding: 7px 12px;
  font-size: 11px;
}
.dashboard-join {
  margin: 0 0 12px;
  color: #c9bac2;
  font-size: 12px;
  line-height: 1.5;
}
.acquisition-card .channel-actions,
.dashboard-join .channel-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: auto;
}
.acquisition-card .channel-actions > *,
.dashboard-join .channel-actions > * {
  width: 100%;
  min-width: 0;
}
.post-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #292929;
}
.post-progress > div {
  min-width: 0;
}
.post-progress span {
  display: block;
  color: var(--muted);
  font:
    500 11px/1.3 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.post-progress strong {
  display: block;
  margin: 6px 0 0;
  color: var(--ink);
  font:
    500 29px/1.1 "DM Mono",
    monospace;
  font-variant-numeric: tabular-nums;
}
.post-progress .primary {
  flex-shrink: 0;
  align-self: center;
  margin: 0;
  min-height: 40px;
  font-size: 12px;
}
.participation-card > .primary {
  align-self: flex-start;
  min-height: 40px;
  font-size: 12px;
}
.participation-card > .rules {
  margin-top: auto;
}
.participation-card > .primary + .rules {
  margin-top: 15px;
}
@media (max-width: 1150px) and (min-width: 761px) {
  .overview-dashboard {
    gap: 14px;
  }
  .overview-dashboard > .card {
    padding: 17px;
  }
  .dashboard-card-head {
    flex-wrap: wrap;
    gap: 10px;
  }
  .growth-plan-heading h2 {
    font-size: 22px;
  }
  .plan-actions {
    gap: 7px;
  }
  .plan-action {
    padding: 11px 9px;
  }
  .plan-action h3 {
    font-size: 13px;
  }
}
@media (max-width: 900px) {
  .intro-placeholder {
    min-height: 260px;
  }
  .login-view {
    padding: 25px 20px 35px;
  }
}
@media (max-width: 760px) {
  .overview-dashboard {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .overview-dashboard > .card {
    padding: 18px;
  }
  .dashboard-card-head {
    gap: 10px;
    flex-wrap: wrap;
  }
  .dashboard-points {
    min-height: 140px;
  }
  .dashboard-points strong {
    font-size: 42px;
  }
  .growth-plan-heading h2 {
    font-size: 23px;
  }
  .missions-plan .growth-plan-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  .locked-referral-pill {
    font-size: 11px;
  }
  .login-brand {
    gap: 17px;
  }
  .login-brand-copy {
    padding-left: 17px;
  }
  .login-benefits {
    gap: 10px;
  }
  .login-benefit {
    padding: 14px;
  }
  .login-benefit h2 {
    font-size: 15px;
  }
  .login-benefit p {
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .login-view {
    padding: 20px 15px 30px;
  }
  .login-brand {
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 18px;
  }
  .login-brand img,
  .login-brand .logo {
    width: 142px;
    max-width: 46%;
  }
  .login-brand-copy {
    padding-left: 14px;
  }
  .login-brand-copy strong {
    font-size: 17px;
  }
  .login-brand-copy span,
  .login-brand-copy p {
    font-size: 11px;
  }
  .intro-placeholder {
    min-height: 245px;
    padding: 23px 20px;
  }
  .intro-placeholder h1 {
    font-size: 27px;
  }
  .intro-placeholder p {
    font-size: 12px;
  }
  .intro-play {
    width: 51px;
    height: 51px;
    margin-bottom: 19px;
    font-size: 21px;
  }
  .intro-caption {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    padding: 11px 14px;
    font-size: 11px;
  }
  .login-benefits {
    grid-template-columns: 1fr;
  }
  .login-benefit {
    padding: 15px 16px 15px 56px;
  }
  .benefit-number {
    position: absolute;
    left: 16px;
    top: 16px;
    margin: 0;
  }
  .login-benefit h2 {
    font-size: 16px;
  }
  .privy-signin {
    padding: 21px 18px;
  }
  .privy-signin h2 {
    font-size: 20px;
  }
  .referral-onboarding {
    padding: 23px;
  }
  .referral-onboarding h2 {
    font-size: 24px;
  }
  .referral-onboarding > p {
    font-size: 13px;
  }
  .plan-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .plan-action {
    padding: 12px 14px;
  }
  .plan-number {
    display: inline-block;
    margin: 0 7px 0 0;
  }
  .plan-action h3 {
    display: inline;
  }
  .plan-action p {
    margin-top: 5px;
  }
  .dashboard-metrics {
    gap: 9px;
  }
  .dashboard-metric {
    padding: 12px;
  }
  .dashboard-metric strong {
    font-size: 26px;
  }
  .dashboard-card-head h2 {
    font-size: 19px;
  }
  .missions-plan {
    padding: 17px;
  }
}

/* Revision 8: detailed Campaign Guide, with readable sections and mobile tables. */
.campaign-guide-page {
  min-width: 0;
}
.campaign-guide-page .guide-intro {
  margin-bottom: 18px;
  padding: 24px;
  border-color: #87556f;
  background: linear-gradient(130deg, #3d2e36, #30302e);
}
.guide-intro h2 {
  margin: 8px 0 10px;
  font-size: 27px;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.guide-intro > p {
  max-width: 730px;
  margin: 0;
  color: #d2c4cc;
  font-size: 14px;
  line-height: 1.65;
}
.guide-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 30px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid #634c58;
}
.guide-facts > div {
  min-width: 140px;
}
.guide-facts strong,
.guide-facts span {
  display: block;
}
.guide-facts strong {
  margin-bottom: 3px;
  color: #ead6e1;
  font-size: 12px;
}
.guide-facts span {
  color: #bfb0b9;
  font-size: 12px;
  line-height: 1.5;
}
.guide-jump-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 17px 0 22px;
}
.guide-jump-links a {
  display: inline-flex;
  align-items: center;
  min-height: 33px;
  padding: 7px 12px;
  border: 1px solid #65505b;
  border-radius: 999px;
  color: #e6c6d8;
  background: #332b2f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
.guide-jump-links a:hover {
  color: #ffbde0;
  border-color: #b76e98;
  background: #422d38;
}
.guide-jump-links a:focus-visible,
.guide-cta a:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}
.guide-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.guide-sections > .guide-section {
  min-width: 0;
  margin: 0;
  padding: 23px;
  scroll-margin-top: 22px;
}
.guide-sections > .guide-section + .guide-section {
  margin-top: 0;
}
.guide-sections > .guide-section-wide {
  grid-column: 1/-1;
}
.guide-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.guide-step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid #5c334c;
  border-radius: 8px;
  background: #2b1823;
  color: var(--pink);
  font:
    500 11px/1 "DM Mono",
    monospace;
}
.guide-section-header h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.025em;
}
.guide-section > p,
.guide-section > ul,
.guide-section > ol {
  color: #c8bec4;
  font-size: 13px;
  line-height: 1.65;
}
.guide-section > p {
  margin: 0 0 13px;
}
.guide-section > p:last-child {
  margin-bottom: 0;
}
.guide-section > .guide-note + p,
.guide-section > table + p {
  margin-top: 13px;
}
.guide-section > ul,
.guide-section > ol {
  margin: 10px 0 16px;
  padding-left: 20px;
}
.guide-section li {
  padding-left: 3px;
  margin: 7px 0;
}
.guide-section li::marker {
  color: #dc94ba;
}
.guide-section strong {
  color: #eee3e9;
}
.guide-section a:not(.primary):not(.ghost) {
  color: #ffc1e2;
  text-underline-offset: 3px;
}
.guide-note {
  margin: 16px 0 0;
  padding: 13px 15px;
  border-left: 3px solid #d977ab;
  border-radius: 0 8px 8px 0;
  background: #3b2e35;
}
.guide-note > strong {
  display: block;
  margin: 0 0 5px;
  color: #f3cfe3;
  font-size: 12px;
}
.guide-note > p {
  margin: 0;
  color: #cbb8c3;
  font-size: 12px;
  line-height: 1.6;
}
.guide-post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 17px 0 0;
}
.guide-post-block {
  min-width: 0;
  padding: 17px;
  border: 1px solid #5d4d56;
  border-radius: 9px;
  background: #2b292a;
}
.guide-post-block h3 {
  margin: 0 0 10px;
  color: #f0d0e1;
  font-size: 16px;
  line-height: 1.35;
}
.guide-post-block p,
.guide-post-block li {
  color: #c6bac1;
  font-size: 12px;
  line-height: 1.65;
}
.guide-post-block p {
  margin: 0 0 10px;
}
.guide-post-block ul,
.guide-post-block ol {
  margin: 10px 0 0;
  padding-left: 19px;
}
.guide-post-block .guide-note {
  margin-top: 14px;
  padding: 11px 12px;
}
.guide-post-block .guide-note p {
  margin: 0;
}
table.guide-points-table,
.guide-points-table table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  margin: 13px 0 0;
  border-collapse: collapse;
  font-size: 12px;
}
.guide-points-table th,
.guide-points-table td {
  padding: 12px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #53494e;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  line-height: 1.5;
}
.guide-points-table th {
  color: #c3a9b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
.guide-points-table th:first-child,
.guide-points-table td:first-child {
  width: 44%;
  padding-left: 0;
}
.guide-points-table th:nth-child(2),
.guide-points-table td:nth-child(2) {
  width: 21%;
  text-align: center;
}
.guide-points-table th:last-child,
.guide-points-table td:last-child {
  width: 35%;
  padding-right: 0;
  text-align: left;
}
.guide-points-table td:nth-child(2) {
  color: #ffd1e9;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.guide-points-table td {
  color: #cfc2ca;
}
.guide-points-table tbody tr:last-child td {
  border-bottom: 0;
}
.guide-status-list {
  display: grid;
  gap: 0;
}
.guide-status-list > div {
  padding: 12px 0;
  border-bottom: 1px solid #544b50;
}
.guide-status-list > div:first-child {
  padding-top: 0;
}
.guide-status-list > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.guide-status-list strong {
  display: block;
  color: #ead4e0;
  font-size: 13px;
}
.guide-status-list p {
  margin: 4px 0 0;
  color: #bfb2ba;
  font-size: 12px;
  line-height: 1.6;
}
.guide-faq {
  display: grid;
  gap: 0;
}
.guide-faq details {
  border-top: 1px solid #574b51;
  padding: 14px 0;
}
.guide-faq details:last-child {
  padding-bottom: 0;
}
.guide-faq summary {
  color: #e9dbe3;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}
.guide-faq summary::marker {
  color: #df8aba;
}
.guide-faq details[open] summary {
  color: #ffc1e2;
}
.guide-faq p {
  max-width: 780px;
  margin: 10px 0 0;
  color: #c3b5bd;
  font-size: 13px;
  line-height: 1.65;
}
.guide-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #57464f;
}
.guide-cta > small {
  color: #bca9b4;
  font-size: 11px;
}
.guide-cta .primary,
.guide-cta .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 35px;
  padding: 7px 12px;
  font-size: 11px;
  text-decoration: none;
}
.guide-active-rules {
  margin: 13px 0 0;
  padding-left: 22px;
  color: #c8b9c2;
  font-size: 13px;
  line-height: 1.65;
}
.guide-active-rules li {
  margin: 10px 0;
  padding-left: 4px;
}
.guide-active-rules li::marker {
  color: #f0b4d5;
  font-weight: 700;
}
@media (max-width: 1050px) and (min-width: 761px) {
  .guide-sections {
    gap: 14px;
  }
  .guide-sections > .guide-section {
    padding: 19px;
  }
  .guide-section-header h2 {
    font-size: 18px;
  }
}
@media (max-width: 760px) {
  .campaign-guide-page .guide-intro {
    padding: 20px;
  }
  .guide-intro h2 {
    font-size: 24px;
  }
  .guide-intro > p {
    font-size: 13px;
  }
  .guide-facts {
    gap: 14px 23px;
  }
  .guide-sections {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .guide-sections > .guide-section,
  .guide-sections > .guide-section-wide {
    grid-column: auto;
    padding: 20px;
  }
  .guide-post-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .guide-section-header {
    gap: 10px;
  }
  .guide-section-header h2 {
    font-size: 20px;
  }
  .guide-jump-links {
    gap: 7px;
    margin-bottom: 19px;
  }
  .guide-jump-links a {
    padding: 6px 10px;
  }
}
@media (max-width: 420px) {
  .campaign-guide-page .guide-intro,
  .guide-sections > .guide-section {
    padding: 17px;
  }
  .guide-intro h2 {
    font-size: 23px;
  }
  .guide-facts {
    gap: 13px;
  }
  .guide-facts > div {
    min-width: 0;
    flex: 1 1 130px;
  }
  .guide-section-header h2 {
    font-size: 18px;
  }
  .guide-section > p,
  .guide-section > ul,
  .guide-section > ol,
  .guide-faq p {
    font-size: 12px;
  }
  .guide-points-table th,
  .guide-points-table td {
    padding: 10px 5px;
    font-size: 11px;
  }
  .guide-points-table th:first-child,
  .guide-points-table td:first-child {
    width: 42%;
  }
  .guide-points-table th:nth-child(2),
  .guide-points-table td:nth-child(2) {
    width: 23%;
  }
  .guide-post-block {
    padding: 15px;
  }
  .guide-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

#guide-definitions {
  margin: 0 0 18px;
  padding: 23px;
}
.guide-definitions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.guide-def {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #292929;
}
.guide-def span {
  color: var(--muted);
  font:
    500 11px/1.3 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.guide-def strong {
  color: var(--pink);
  font:
    500 22px/1.15 "DM Mono",
    monospace;
  letter-spacing: -0.03em;
}
.guide-def p {
  margin: 0;
  color: #c8bec4;
  font-size: 13px;
  line-height: 1.55;
}
.guide-rules {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
}
.guide-rules-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 16px;
}
.guide-rule,
.guide-rules > div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #292929;
}
.guide-rules-wide > div {
  grid-template-columns: 1fr;
  gap: 8px;
}
.guide-rules dt {
  margin: 0;
  color: var(--pink);
  font:
    700 11px/1.35 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.guide-rules dd {
  margin: 0;
  color: #c8bec4;
  font-size: 13px;
  line-height: 1.55;
}
.guide-rules a {
  color: #ffc1e2;
}
.guide-formula {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #a3557f;
  border-radius: 9px;
  background: #3a2432;
  color: #f3d5e6;
  font-size: 14px;
  line-height: 1.45;
}
.guide-formula span {
  flex: 0 0 auto;
  color: var(--pink);
  font:
    700 11px/1 "DM Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.guide-def-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  color: #d7c8d0;
  font-size: 13px;
  line-height: 1.5;
}
.guide-def-line span {
  flex: 0 0 auto;
  color: var(--pink);
  font:
    700 11px/1 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.guide-points-table {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: #292929;
}
.guide-points-table caption {
  caption-side: top;
  padding: 12px 14px;
  text-align: left;
  color: var(--muted);
  font:
    500 11px/1.3 "DM Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.guide-points-table th,
.guide-points-table td {
  padding: 14px;
}
.guide-points-table th:first-child,
.guide-points-table td:first-child,
.guide-points-table th:last-child,
.guide-points-table td:last-child {
  padding-left: 14px;
  padding-right: 14px;
}
.guide-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.guide-faq details {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #292929;
}
.guide-faq details:last-child {
  padding-bottom: 14px;
}
@media (max-width: 900px) {
  .guide-definitions,
  .guide-rules-wide,
  .guide-faq {
    grid-template-columns: 1fr;
  }
  .guide-rules > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.shell > aside.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 2px solid var(--pink);
  padding: 28px 20px;
  background: #272727;
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
}
.shell .logo {
  display: block;
  width: 195px;
  max-width: 100%;
  height: auto;
  margin: 0 0 35px;
}
.shell .side-nav {
  display: grid;
  gap: 5px;
  margin-top: 0;
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
}
.shell .side-nav button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 45px;
  padding: 10px 13px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #bcb8ba;
  text-align: left;
  font:
    700 14px/1.2 Arial,
    Helvetica,
    sans-serif;
  box-shadow: none;
}
.shell .side-nav button:hover,
.shell .side-nav button.active {
  background: #35232e;
  color: #fff;
  border-left-color: var(--pink);
  box-shadow: none;
}
.shell .nav-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: var(--pink);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shell .side-nav button[data-page="overview"] .nav-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  font-size: 22px;
}
.shell .side-bottom {
  margin-top: auto !important;
  flex: 0 0 auto;
  width: 100%;
  border-top: 1px solid #484747;
  padding-top: 16px;
}
.shell .side-user {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
  display: block;
}
.shell .profile {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 17px;
  min-width: 0;
}
.shell .profile > div {
  min-width: 0;
}
.shell .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #2a0a18;
  background: linear-gradient(135deg, var(--pink), #ff9ad0);
  font-weight: 800;
  font-size: 13px;
}
.shell .profile strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.shell .profile small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.shell .outline.profile-open,
.profile-panel .logout {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font:
    700 14px/1 Arial,
    Helvetica,
    sans-serif;
}
.shell .outline.profile-open:hover,
.profile-panel .logout:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: transparent;
}
.shell .avatar.has-photo,
.profile-panel .avatar.has-photo {
  background-size: cover;
  background-position: center;
}
.profile-panel form {
  display: grid;
  gap: 12px;
}
.profile-panel .profile-picture {
  display: flex;
  align-items: center;
  gap: 12px;
}
.profile-panel .avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #2a0a18;
  background: linear-gradient(135deg, var(--pink), #ff9ad0);
  font-weight: 800;
  font-size: 18px;
}
.profile-panel .ghost {
  width: auto;
  min-height: 40px;
  padding: 8px 12px;
}
.profile-panel input[type="file"] {
  display: none;
}
.profile-panel .select-label {
  display: grid;
  gap: 7px;
  margin: 0;
  color: #e6dce1;
  font-size: 12px;
  font-weight: 700;
}
.profile-panel .select-label input {
  width: 100%;
  min-height: 46px;
  margin: 0;
  border: 1px solid #846276;
  border-radius: 8px;
  background: #252325;
  padding: 10px 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}
.profile-panel .primary {
  margin-top: 0;
}

.head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.period-drop select {
  min-height: 31px;
  padding: 5px 26px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #292929
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23f353ad' d='M1 1.2 6 6.8 11 1.2'/%3E%3C/svg%3E")
    right 8px center / 10px 7px no-repeat;
  color: #fff;
  font:
    700 11px/1 Arial,
    sans-serif;
  appearance: none;
  cursor: pointer;
}
.info-pop {
  position: relative;
}
.info-pop > summary.info-btn {
  list-style: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font:
    700 13px/1 Georgia,
    serif;
  cursor: pointer;
}
.info-pop > summary.info-btn::-webkit-details-marker {
  display: none;
}
.info-pop > summary.info-btn::marker {
  content: "";
}
.info-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 12;
  width: min(340px, calc(100vw - 64px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #2b2b29;
  box-shadow: 0 12px 28px #00000066;
  text-align: left;
}
.info-panel strong {
  display: block;
  font-size: 12px;
  color: #fff;
}
.info-panel p,
.info-panel li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.info-panel p {
  margin: 8px 0 0;
}
.info-panel ol {
  margin: 8px 0 0;
  padding-left: 18px;
}
.growth-plan-kicker {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.plan-end {
  margin-left: auto;
  color: var(--pink);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.dashboard-join .dashboard-link-label,
.dashboard-link > .dashboard-link-label {
  font-size: 16px;
}
.dashboard-link.dashboard-link-logo .personal-link {
  display: flex;
  align-items: center;
  gap: 8px;
  grid-column: 1 / -1;
  min-width: 0;
}
.dashboard-link.dashboard-link-logo .platform-logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.dashboard-link.dashboard-link-logo .platform-logo svg {
  width: 28px;
  height: 28px;
}
.dashboard-link.dashboard-link-logo .platform-logo.platform-reg {
  background: transparent;
  overflow: hidden;
}
.dashboard-link.dashboard-link-logo .platform-logo.platform-reg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dashboard-link.dashboard-link-logo input {
  flex: 1 1 auto;
}

.dashboard-metric {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
}
.dashboard-metric strong {
  margin: 0;
}
.dashboard-metric small {
  margin: 0;
}
.growth-plan-card .plan-action {
  padding: 16px;
}
.growth-plan-card .plan-action h3 {
  display: block;
  margin: 0 0 10px;
}
.growth-plan-card .plan-action p {
  margin: 0;
  line-height: 1.55;
}

.mission-card .dashboard-card-head {
  align-items: flex-start;
  margin-bottom: 12px;
}
.mission-card-title {
  min-width: 0;
}
.mission-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mission-grid.simple .mission-card .dashboard-card-head h2 {
  margin: 0;
}
.mission-count {
  color: var(--ink);
  font:
    500 26px/1 "DM Mono",
    monospace;
  font-variant-numeric: tabular-nums;
}
.mission-card .mission-brief {
  min-height: 0;
  margin: 0 0 12px;
}
.mission-grid.simple .mission-workspace {
  min-height: 0;
  gap: 10px;
}
.mission-card .weekly-asset {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  min-height: 0;
}
.mission-card .weekly-asset video {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  min-width: 0;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 9px;
  background: #171717;
}
.weekly-asset-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #292929;
}
.weekly-asset-meta span {
  display: block;
  margin: 0;
  color: var(--muted);
  font:
    500 11px/1.3 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.weekly-asset-meta strong {
  display: block;
  margin: 6px 0 0;
  font-size: 15px;
}
.weekly-asset-meta .download-video {
  margin: 0;
  flex-shrink: 0;
}
.mission-card .mission-requirement {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 14px 12px;
  border-radius: 9px;
}
.mission-card .mission-requirement span {
  margin: 0;
  color: var(--muted);
  font:
    500 11px/1.3 "DM Mono",
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mission-card .mission-requirement strong {
  margin: 0;
  font-size: 16px;
}
.mission-card .select-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.mission-card .select-label input {
  margin-top: 0;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #292929;
  color: var(--ink);
}

.mission-grid.simple {
  align-items: start;
}
.mission-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.mission-side .mission-card {
  min-height: 0;
}
.mission-side .mission-action {
  margin-top: 12px;
}
.mission-invites {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mission-invites .card + .card {
  margin-top: 0;
}
.compact-invite .platform-logo.platform-reg {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}
.compact-invite .platform-logo.platform-reg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mission-grid.simple .mission-card .mission-brief {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}
.mission-grid.simple .mission-card .mission-brief span {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #292929;
  color: #fff;
  font:
    700 12px/1 Arial,
    sans-serif;
}
.mission-grid.simple .mission-card .mission-brief i {
  color: var(--pink);
  font-style: normal;
  font-weight: 700;
}

.mission-note-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mission-note-row .mission-note {
  flex: 1 1 auto;
  min-width: 0;
}
.mission-note-row .download-video {
  align-self: center;
  margin-left: auto;
}
.mission-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.mission-note span {
  margin-right: 8px;
  color: var(--pink);
  font:
    700 11px/1 "DM Mono",
    monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mission-note-row .download-video {
  margin: 0 0 0 auto;
  flex-shrink: 0;
}

#page-missions > .overview-dashboard {
  margin-bottom: 22px;
}

.mission-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.mission-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  min-height: 100%;
}
.mission-col > .card {
  margin-top: 0;
}
.mission-col > .card:last-child {
  flex: 1 1 auto;
}
.mission-columns .card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
  padding: 22px;
  box-sizing: border-box;
}
.growth-plan-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.growth-plan-title h2 {
  margin: 0;
  min-width: 0;
}
.growth-plan-title .head-tools {
  flex: 0 0 auto;
  margin-left: auto;
}
.mission-columns .growth-plan-heading {
  gap: 10px;
}
.mission-columns .growth-plan-card .dashboard-points {
  flex: 0 0 auto;
  width: 100%;
  min-height: 112px;
  margin: 0;
  padding: 20px 22px;
  justify-content: center;
  box-sizing: border-box;
}
.mission-columns .acquisition-card .dashboard-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mission-columns .link-box {
  grid-column: 1 / -1;
}
.mission-columns .link-box.like-slot {
  grid-column: auto;
}
.mission-columns .like-help,
.mission-columns .like-handle,
.mission-columns .like-status {
  margin: 0;
  color: #d9ced4;
  font-size: 13px;
  line-height: 1.4;
}
.mission-columns .like-status {
  color: var(--pink);
  font-weight: 700;
}
.mission-columns .like-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.mission-columns .like-box > .like-help,
.mission-columns .like-box > .personal-link {
  width: 100%;
  min-width: 0;
}
.mission-columns .like-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}
.mission-columns .like-card-head .dashboard-link-label {
  min-width: 0;
}
.mission-columns .like-points {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--pink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.mission-columns .like-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.mission-columns .like-identity .platform-logo {
  width: 36px;
  height: 36px;
}
.mission-columns .like-identity .platform-logo svg {
  width: 22px;
  height: 22px;
}
.mission-columns .like-identity input,
.mission-columns .like-identity .ghost,
.mission-columns .like-identity .like-handle {
  flex: 1 1 auto;
  min-width: 0;
}
.mission-columns .like-task {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.mission-columns .like-task-label {
  color: #d9ced4;
  font-size: 12px;
  font-weight: 700;
}
.mission-columns .like-proof {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.mission-columns .like-proof input[type="file"] {
  display: none;
}
@media (max-width: 1100px) {
  .mission-columns .link-box.like-slot {
    grid-column: 1 / -1;
  }
}
.mission-columns .link-box .dashboard-join,
.mission-columns .link-box .dashboard-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.mission-columns .link-box .dashboard-link-label {
  display: block;
  margin: 0;
  color: #d9ced4;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.mission-columns .link-box .dashboard-join p {
  margin: 0;
}
.mission-columns .link-box .dashboard-link-logo .personal-link {
  flex-direction: row;
  align-items: center;
}
.mission-columns .link-box .dashboard-link-logo .platform-logo {
  width: 40px;
  height: 40px;
}
.mission-columns .link-box .dashboard-link-logo input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.mission-columns .link-box .dashboard-link-logo .primary {
  flex: 0 0 auto;
  width: auto;
}
.mission-columns .link-box .dashboard-link-logo .personal-link.like-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.mission-columns .link-box .dashboard-link-logo .personal-link.like-actions .platform-logo {
  width: 36px;
  height: 36px;
}
.mission-columns .link-box .dashboard-link-logo .personal-link.like-actions .primary,
.mission-columns .link-box .dashboard-link-logo .personal-link.like-actions .ghost,
.mission-columns .link-box .dashboard-link-logo .personal-link.like-actions .setup-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-decoration: none;
}
.mission-columns .link-box .dashboard-link-logo .personal-link.like-actions input {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: left;
}
.mission-columns .link-box .dashboard-link-logo .personal-link.like-actions input[type="file"] {
  display: none;
}
.mission-columns .link-box .channel-actions,
.mission-columns .link-box .primary,
.mission-columns .link-box .ghost,
.mission-columns .link-box input {
  width: 100%;
}
.mission-columns .like-box .like-identity input {
  width: auto;
}
.mission-columns .link-box .join-actions .setup-link {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  padding: 6px 10px;
}
.mission-columns .link-box .join-actions .ghost {
  flex: 0 0 auto;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 6px 10px;
}
.mission-columns .plan-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  gap: 12px;
  align-items: stretch;
}
.mission-columns .plan-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  gap: 8px;
  padding: 16px;
  box-sizing: border-box;
}
.mission-columns .plan-action h3 {
  margin: 0;
  flex: none;
  white-space: normal;
}
.mission-columns .plan-action p {
  margin: 0;
}
.mission-columns .dashboard-card-head {
  margin: 0;
}
.mission-columns .mission-card .dashboard-card-head {
  display: block;
}
.mission-columns .mission-card-title {
  min-width: 0;
}
.mission-columns .mission-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0 0 8px;
}
.mission-columns .mission-count {
  margin-left: auto;
  color: var(--pink);
  font:
    500 11px/1.4 "DM Mono",
    monospace;
  letter-spacing: 0.13em;
  font-variant-numeric: tabular-nums;
}
.mission-columns .mission-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mission-columns .mission-title-row h2 {
  margin: 0;
  min-width: 0;
}
.mission-columns .mission-title-row .info-pop {
  flex: 0 0 auto;
  margin-left: auto;
}
.mission-columns .dashboard-metrics {
  margin: 0;
  gap: 12px;
}
.mission-columns .dashboard-metric {
  padding: 16px 14px;
  gap: 8px;
}
.mission-columns .dashboard-links {
  margin-top: 0;
  gap: 16px;
  padding-top: 0;
}
.mission-columns .mission-card .mission-brief {
  margin: 0;
}
.mission-columns .mission-workspace {
  min-height: 0;
  flex: 0 0 auto;
  gap: 14px;
}
.mission-columns .mission-action {
  margin-top: auto;
  padding-top: 0;
}
.mission-columns .mission-action .primary {
  width: 100%;
}
.mission-columns .mission-note-row {
  gap: 12px;
}
@media (max-width: 760px) {
  .shell > aside.sidebar {
    display: none;
  }
  .mission-columns {
    grid-template-columns: 1fr;
  }
  .mission-columns .plan-actions {
    grid-template-columns: 1fr;
  }
  .growth-plan-title,
  .mission-columns .mission-note-row,
  .mission-columns .dashboard-metric small {
    flex-wrap: wrap;
  }
  .mission-columns .link-box .join-actions .setup-link,
  .mission-columns .link-box .join-actions .ghost {
    white-space: nowrap;
  }
  .mission-columns .card {
    padding: 18px;
  }
}
.lang-drop {
  position: fixed;
  z-index: 30;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  margin: 0;
}
.lang-drop select {
  background: #2a2228;
  color: #fff;
  border: 1px solid #6c4a5c;
  border-radius: 999px;
  padding: 8px 12px;
  max-width: min(240px, 52vw);
}
.main,
.login-view {
  padding-top: max(68px, calc(env(safe-area-inset-top) + 56px));
}