:root {
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f2f6f8;
  color: #183042;
}

.direct-file-warning {
  display: none;
}

.portal-direct-file .direct-file-warning {
  display: block;
  margin: 16px auto;
  padding: 14px 16px;
  border: 1px solid #e0bf74;
  border-radius: 10px;
  background: #fff8e8;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 280px;
  margin: 0;
  padding: 32px 20px 48px;
  background:
    radial-gradient(circle at top left, rgb(19 123 128 / 10%), transparent 32rem),
    #f2f6f8;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  padding: 10px 14px;
  border: 1px solid #9db0bb;
  border-radius: 8px;
  background: #fff;
  color: #183042;
  cursor: pointer;
  font-weight: 650;
}

button:hover:not(:disabled) {
  border-color: #137b80;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: #137b80;
  outline: 3px solid rgb(19 123 128 / 18%);
  outline-offset: 1px;
}

button.primary {
  border-color: #137b80;
  background: #137b80;
  color: #fff;
}

button.danger {
  border-color: #dfaaaa;
  color: #963838;
}

button:disabled {
  cursor: wait;
  opacity: 0.62;
}

[hidden] {
  display: none !important;
}

.portal-shell {
  width: min(1040px, 100%);
  margin: 0 auto;
}

.page-title,
.selected-creator-context {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.page-title {
  color: #137b80;
}

.selected-creator-context {
  margin-top: 5px;
  color: #597080;
}

.owner-readiness {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin-bottom: 18px;
  border-left: 5px solid #137b80;
}

.owner-readiness .section-heading {
  margin-bottom: 0;
}

.owner-readiness-alerts {
  grid-column: 1 / -1;
  color: #597080;
  font-size: 13px;
}

.owner-overview-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.owner-overview-grid div {
  padding: 11px 12px;
  border-radius: 10px;
  background: #eef5f6;
}

.owner-overview-grid dt {
  margin-bottom: 4px;
  color: #6a7d89;
  font-size: 12px;
}

.owner-overview-grid dd {
  margin: 0;
  font-weight: 700;
}

.pairing-wizard-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pairing-account-choice {
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #9ac3c8;
  border-radius: 10px;
  background: #eef8f8;
}

.pairing-account-choice strong,
.pairing-account-choice p {
  display: block;
  margin: 0;
}

.pairing-account-choice #pairing-account-choice-selected {
  margin-top: 5px;
  font-weight: 700;
}

.pairing-account-choice #pairing-account-choice-help {
  margin-top: 3px;
  color: #536b7a;
  font-size: 13px;
}

.pairing-wizard-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid #dce5ea;
  border-radius: 10px;
  background: #f8fafb;
}

.pairing-wizard-steps li > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #e6eef2;
  color: #536b7a;
  font-weight: 800;
}

.pairing-wizard-steps strong,
.pairing-wizard-steps p {
  display: block;
  margin: 0;
}

.pairing-wizard-steps p {
  margin-top: 3px;
  color: #597080;
  font-size: 13px;
}

.pairing-wizard-steps em {
  color: #6a7d89;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.pairing-wizard-steps li.complete {
  border-color: #a8d3c3;
  background: #f0faf6;
}

.pairing-wizard-steps li.complete > span {
  background: #2c8063;
  color: #fff;
}

.pairing-wizard-steps li.current {
  border-color: #e0bf74;
  background: #fffaf0;
}

.pairing-wizard-steps li.current > span {
  background: #9a741b;
  color: #fff;
}

.brand-header,
.dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.brand-header {
  margin-bottom: 20px;
}

.dashboard-header {
  align-items: center;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 5px;
  color: #137b80;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 6px;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -0.025em;
}

h2 {
  margin-bottom: 6px;
  font-size: 25px;
}

h3 {
  margin-bottom: 5px;
  font-size: 19px;
}

.intro,
.subtle,
.section-heading p,
.field-help,
.checklist-item p {
  color: #597080;
}

.intro,
.subtle,
.section-heading p {
  margin-bottom: 0;
}

.state-badge {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid #cbd9e2;
  border-radius: 999px;
  background: #fff;
  color: #536b7a;
  font-size: 13px;
  font-weight: 700;
}

.state-badge.ready {
  border-color: #8bc8b4;
  background: #ebf8f2;
  color: #236650;
}

.state-badge.attention {
  border-color: #e0bf74;
  background: #fff8e8;
  color: #765915;
}

.state-badge.error {
  border-color: #dfaaaa;
  background: #fff0f0;
  color: #963838;
}

.notice {
  min-height: 1.4em;
  margin: 0 0 16px;
  color: #236650;
  font-weight: 650;
}

.notice.error,
.form-status.error {
  color: #a33a3a;
}

.view-card {
  padding: 24px;
  border: 1px solid #cbd9e2;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 32px rgb(24 48 66 / 8%);
}

#login-view {
  width: min(480px, 100%);
  margin: 24px auto 0;
}

.invite-activation {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #dce5ea;
}

.invite-activation summary {
  cursor: pointer;
  color: #137b80;
  font-weight: 700;
}

.invite-activation form {
  margin-top: 12px;
}

.section-heading {
  margin-bottom: 20px;
}

.compact-heading {
  margin-bottom: 16px;
}

.stacked-form {
  display: grid;
  gap: 8px;
}

label {
  margin-top: 8px;
  font-weight: 650;
}

input,
select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #aebfc9;
  border-radius: 8px;
  background: #fff;
  color: #183042;
}

textarea {
  width: 100%;
  min-height: 76px;
  padding: 11px 12px;
  resize: vertical;
  border: 1px solid #aebfc9;
  border-radius: 8px;
  background: #fff;
  color: #183042;
  overflow-wrap: anywhere;
}

.field-help {
  margin: 0;
  font-size: 12px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.compact-actions {
  flex: 0 0 auto;
  margin-top: 0;
}

.form-status {
  min-height: 1.3em;
  margin: 4px 0 0;
  color: #236650;
  font-size: 13px;
  font-weight: 650;
}

.metadata-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.creator-scope-control {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin: 0 0 14px;
}

.creator-scope-control[hidden] {
  display: none;
}

.creator-scope-control label {
  font-weight: 700;
}

.creator-scope-control select {
  min-width: 0;
}

.creator-scope-row {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.creator-scope-row select {
  flex: 1 1 auto;
}

.creator-scope-row button {
  flex: 0 0 auto;
}

.creator-scope-control .field-help {
  grid-column: 2;
  margin: 0;
}

.creator-add-form {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid #c9d8df;
  border-radius: 10px;
  background: #f8fafb;
}

.creator-add-form[hidden] {
  display: none;
}

.metadata-grid div {
  min-width: 0;
  padding: 12px;
  border-radius: 10px;
  background: #eef5f6;
}

.metadata-grid dt {
  margin-bottom: 5px;
  color: #6a7d89;
  font-size: 12px;
}

.metadata-grid dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 700;
}

.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.extension-connection {
  margin-top: 16px;
}

.platform-account-section {
  margin-top: 16px;
}

.account-security-section {
  display: grid;
  gap: 18px;
}

.account-session-actions {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 10px;
  padding-top: 16px;
}

.control-center-section {
  margin-top: 16px;
}

.creator-voice-summary {
  padding: 14px;
  border: 1px solid #cbdde2;
  border-radius: 10px;
  background: #f5fafb;
}

.creator-voice-summary h4,
.control-center-scripts h4 {
  margin: 0 0 5px;
  font-size: 16px;
}

.voice-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.voice-metrics div {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
  background: #fff;
}

.voice-metrics dt {
  margin-bottom: 3px;
  color: #6a7d89;
  font-size: 12px;
}

.voice-metrics dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 700;
}

.control-center-form {
  margin-top: 16px;
}

.creator-profile-fields {
  display: grid;
  gap: 8px;
  margin: 12px 0 2px;
  padding: 12px 14px 14px;
  border: 1px solid #dce5ea;
  border-radius: 9px;
  background: #f8fafb;
}

.creator-profile-fields legend {
  padding: 0 5px;
  color: #183042;
  font-weight: 700;
}

.creator-profile-fields .field-help {
  margin: 0 0 2px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
}

.checkbox-label input {
  width: auto;
  margin: 0;
}

.control-center-details {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #dce5ea;
  border-radius: 9px;
  background: #f8fafb;
}

.control-center-details summary {
  cursor: pointer;
  color: #137b80;
  font-weight: 700;
}

.control-center-details > .stacked-form {
  margin-top: 12px;
}

.control-center-scripts {
  margin-top: 18px;
  padding-top: 2px;
}

.control-center-script-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.control-center-script-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #dce5ea;
  border-radius: 9px;
  background: #f8fafb;
}

.control-center-script-row strong,
.control-center-script-row span {
  display: block;
  overflow-wrap: anywhere;
}

.control-center-script-row span {
  margin-top: 3px;
  color: #597080;
  font-size: 12px;
}

.platform-account-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.platform-account-card {
  padding: 14px;
  border: 1px solid #dce5ea;
  border-radius: 10px;
  background: #f8fafb;
}

.platform-account-card h4,
.platform-account-card p {
  margin: 0 0 6px;
}

.platform-account-card .stacked-form {
  margin-top: 12px;
}

.platform-account-card .actions { margin-top: 8px; }

.team-section {
  margin-top: 16px;
}

.team-member-list {
  display: grid;
  gap: 8px;
}

.team-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid #dce5ea;
  border-radius: 9px;
  background: #f8fafb;
}

.team-member-row strong,
.team-member-row span {
  display: block;
  overflow-wrap: anywhere;
}

.team-member-row span {
  color: #597080;
  font-size: 12px;
  text-transform: capitalize;
}

.team-invite-form {
  margin-top: 14px;
}

.beta-admin-section {
  margin-top: 16px;
}

.beta-invite-form {
  max-width: 480px;
}

.beta-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.beta-admin-grid h4 {
  margin: 0 0 8px;
}

.beta-admin-list {
  display: grid;
  gap: 8px;
}

.beta-admin-row,
.beta-entitlement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #dce5ea;
  border-radius: 9px;
  background: #f8fafb;
}

.beta-admin-row strong,
.beta-admin-row span,
.beta-entitlement-row strong,
.beta-entitlement-row span {
  display: block;
  overflow-wrap: anywhere;
}

.beta-admin-row span,
.beta-entitlement-row span {
  color: #597080;
  font-size: 12px;
}

.beta-entitlement-row {
  align-items: stretch;
  flex-direction: column;
}

.beta-entitlement-controls {
  display: grid;
  grid-template-columns: minmax(100px, 0.7fr) minmax(150px, 1fr) auto;
  gap: 8px;
}

.extension-connection-heading,
.installation-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.extension-connection-heading .section-heading {
  margin-bottom: 0;
}

.pairing-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 0;
}

.release-metadata {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}

.release-metadata[hidden] {
  display: none;
}

.release-metadata div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #cbdde2;
  border-radius: 9px;
  background: #f5fafb;
}

.release-metadata .release-sha {
  grid-column: 1 / -1;
}

.release-metadata dt {
  margin-bottom: 4px;
  color: #6a7d89;
  font-size: 12px;
}

.release-metadata dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
}

.manual-install-details {
  margin-top: 14px;
}

.manual-install-details summary {
  cursor: pointer;
  font-weight: 700;
}

.manual-install-details summary:focus-visible {
  outline: 2px solid #5145d6;
  outline-offset: 3px;
}

.manual-install-steps {
  margin: 16px 0 0;
  padding-left: 22px;
}

.manual-install-steps li + li {
  margin-top: 8px;
}

.beta-install-warning {
  margin: 14px 0 0;
  padding: 11px 12px;
  border: 1px solid #e0bf74;
  border-radius: 9px;
  background: #fffaf0;
  color: #725618;
}

.pairing-context div {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: #eef5f6;
}

.pairing-context dt {
  margin-bottom: 4px;
  color: #6a7d89;
  font-size: 12px;
}

.pairing-context dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-weight: 700;
}

.pairing-result {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #a8d3c3;
  border-radius: 10px;
  background: #f0faf6;
}

.pairing-result label {
  display: block;
  margin: 0 0 7px;
}

.installation-heading {
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #dce5ea;
}

.installation-heading h4 {
  margin: 0;
  font-size: 16px;
}

.installation-heading button {
  padding: 7px 10px;
  font-size: 13px;
}

.installation-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.installation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #dce5ea;
  border-radius: 9px;
  background: #f8fafb;
}

.health-metadata {
  margin-top: 16px;
}

.health-section .installation-heading {
  align-items: flex-start;
}

.health-alert-section {
  margin-top: 18px;
}

.health-alert-section h4 {
  margin: 0 0 9px;
}

.health-alert-list {
  display: grid;
  gap: 8px;
}

.health-alert {
  padding: 11px 12px;
  border: 1px solid #d8b66b;
  border-radius: 9px;
  background: #fff9ea;
}

.health-alert-critical {
  border-color: #d99a9a;
  background: #fff1f1;
}

.health-alert strong,
.health-alert p {
  display: block;
  margin: 0;
}

.health-alert p {
  margin-top: 3px;
  color: #597080;
  font-size: 13px;
}

.installation-row strong,
.installation-row span {
  display: block;
}

.installation-row span {
  margin-top: 3px;
  color: #597080;
  font-size: 12px;
}

.installation-row button {
  padding: 7px 10px;
  color: #963838;
  font-size: 13px;
}

.shift-review {
  margin-top: 16px;
}

.shift-review-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.outcome-cost-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.outcome-cost-card {
  border: 1px solid #dce5ea;
  border-radius: 12px;
  background: #f7fafb;
  padding: 14px;
}

.outcome-cost-card h4,
.outcome-cost-card p {
  margin: 0 0 8px;
}

.outcome-cost-card p:last-child {
  margin-bottom: 0;
}

.outcome-cost-budget {
  max-width: 560px;
  margin-top: 18px;
}

.ai-budget-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.ai-budget-summary p {
  margin: 0;
  padding: 12px;
  border: 1px solid #dce5ea;
  border-radius: 10px;
  background: #f7fafb;
}

.ai-budget-form {
  max-width: 560px;
}

.shift-review-card {
  padding: 14px;
  border: 1px solid #dce5ea;
  border-radius: 10px;
  background: #f7fafb;
}

.shift-review-card h4 {
  margin: 0 0 4px;
  font-size: 15px;
}

.shift-review-card p {
  margin: 4px 0 0;
  font-size: 13px;
}

.checklist {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  padding: 11px;
  border: 1px solid #dce5ea;
  border-radius: 10px;
}

.checklist-item.complete {
  border-color: #a8d3c3;
  background: #f0faf6;
}

.checklist-item.attention {
  border-color: #e0bf74;
  background: #fffaf0;
}

.checklist-marker {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #e6eef2;
  color: #536b7a;
  font-size: 13px;
  font-weight: 800;
}

.checklist-item.complete .checklist-marker {
  background: #2c8063;
  color: #fff;
}

.checklist-item.attention .checklist-marker {
  background: #9a741b;
  color: #fff;
}

.checklist-item strong {
  display: block;
  margin: 3px 0 2px;
}

.checklist-item p {
  margin-bottom: 0;
  font-size: 13px;
}

@media (max-width: 800px) {
  .metadata-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-columns {
    grid-template-columns: 1fr;
  }

  .beta-admin-grid {
    grid-template-columns: 1fr;
  }

  .voice-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .extension-connection-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  body {
    padding: 22px 14px 36px;
  }

  .brand-header,
  .dashboard-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .state-badge {
    align-self: flex-start;
  }

  .view-card {
    padding: 19px;
  }

  .owner-readiness {
    display: block;
  }

  .owner-readiness .actions {
    margin-top: 14px;
  }

  .owner-overview-grid {
    grid-template-columns: 1fr;
    margin-top: 14px;
  }

  .pairing-wizard-steps li {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .pairing-wizard-steps em {
    grid-column: 2;
  }

  .metadata-grid {
    grid-template-columns: 1fr;
  }

  .voice-metrics {
    grid-template-columns: 1fr;
  }

  .creator-scope-control {
    grid-template-columns: 1fr;
  }

  .creator-scope-control .field-help {
    grid-column: 1;
  }

  .creator-scope-row {
    align-items: stretch;
    flex-direction: column;
  }

  .pairing-context {
    grid-template-columns: 1fr;
  }

  .release-metadata {
    grid-template-columns: 1fr;
  }

  .release-metadata .release-sha {
    grid-column: 1;
  }

  .beta-entitlement-controls {
    grid-template-columns: 1fr;
  }

  .compact-actions button {
    flex: 1 1 auto;
  }
}

/* Product shell */
:root {
  --ink: #17223b;
  --muted: #68738c;
  --line: #e2e7f0;
  --surface: #ffffff;
  --surface-soft: #f7f8fc;
  --nav: #121a2f;
  --nav-soft: #202a45;
  --brand: #6558e8;
  --brand-strong: #5145d6;
  --brand-soft: #efedff;
  --success: #19805d;
  --warning: #9a6814;
  background: #f4f6fa;
  color: var(--ink);
}

body {
  background:
    radial-gradient(circle at 12% 0, rgb(101 88 232 / 8%), transparent 28rem),
    #f4f6fa;
  color: var(--ink);
}

body.portal-dashboard {
  padding: 0;
  background: #f4f6fa;
}

body.portal-dashboard .brand-header {
  display: none;
}

body.portal-dashboard .portal-shell {
  width: 100%;
}

.portal-shell {
  width: min(1180px, 100%);
}

.brand-header {
  align-items: center;
  padding: 4px 0 12px;
}

.brand-header h1 {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: clamp(30px, 5vw, 46px);
}

.brand-header .eyebrow,
.eyebrow {
  color: var(--brand-strong);
}

#dashboard-view {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: stretch;
}

.portal-navigation {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 28px 18px 22px;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 20% 4%, rgb(125 114 255 / 26%), transparent 15rem),
    var(--nav);
  color: #fff;
}

.navigation-brand {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 0 8px 26px;
}

.navigation-brand > span:last-child {
  display: grid;
  gap: 2px;
}

.navigation-brand strong {
  font-size: 15px;
  letter-spacing: 0.01em;
}

.navigation-brand small {
  color: #aeb8d0;
  font-size: 11px;
}

.navigation-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 10px;
  background: linear-gradient(145deg, #7d72ff, #5145d6);
  box-shadow: 0 8px 24px rgb(22 15 101 / 36%);
  font-size: 17px;
  font-weight: 850;
}

.navigation-links {
  display: grid;
  gap: 5px;
}

button.navigation-link {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  flex: none;
  gap: 11px;
  padding: 11px 12px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: #b9c3da;
  text-align: left;
  font-size: 13px;
}

button.navigation-link:hover:not(:disabled) {
  border-color: rgb(255 255 255 / 7%);
  background: rgb(255 255 255 / 6%);
  color: #fff;
}

button.navigation-link.is-active {
  border-color: rgb(255 255 255 / 8%);
  background: var(--nav-soft);
  color: #fff;
  box-shadow: inset 3px 0 #7d72ff;
}

.navigation-icon {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 7px;
  background: rgb(255 255 255 / 7%);
  color: #9ea9c4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.navigation-link.is-active .navigation-icon {
  background: rgb(125 114 255 / 24%);
  color: #d8d4ff;
}

.navigation-note {
  margin: auto 8px 0;
  padding: 14px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 12px;
  background: rgb(255 255 255 / 4%);
  color: #9ea9c4;
  font-size: 11px;
  line-height: 1.55;
}

.dashboard-workspace {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 28px clamp(20px, 3.5vw, 48px) 52px;
}

.dashboard-header {
  align-items: center;
  margin-bottom: 4px;
}

.dashboard-header h1 {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: clamp(27px, 3vw, 36px);
  letter-spacing: -0.035em;
}

.dashboard-description {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 14px;
}

.dashboard-header #signed-in-user {
  font-size: 12px;
}

.dashboard-columns {
  display: block;
  margin: 0;
}

button.navigation-link[hidden],
.portal-page[hidden],
.view-card[hidden] {
  display: none !important;
}

button.navigation-link:focus-visible {
  outline: 3px solid #c6bdff;
  outline-offset: 2px;
}

.portal-page {
  display: none;
  min-width: 0;
}

.portal-page.is-active {
  display: grid;
  align-content: start;
  gap: 16px;
}

.portal-page > .view-card {
  min-width: 0;
  margin: 0;
}

.view-card {
  padding: clamp(20px, 2.3vw, 30px);
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgb(30 42 70 / 6%);
}

.overview-hero {
  overflow: hidden;
  border-color: #ddd9ff;
  background:
    linear-gradient(112deg, rgb(101 88 232 / 7%), transparent 58%),
    var(--surface);
}

.overview-hero .section-heading {
  max-width: 680px;
}

.section-heading h3 {
  color: var(--ink);
  font-size: 20px;
  letter-spacing: -0.015em;
}

.section-heading p,
.subtle,
.field-help {
  color: var(--muted);
}

.metadata-grid {
  gap: 10px;
}

.metadata-grid div,
.pairing-context div,
.voice-metrics div {
  border: 1px solid #e8ebf3;
  background: var(--surface-soft);
}

.metadata-grid dt,
.pairing-context dt,
.voice-metrics dt {
  color: #7b849a;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.metadata-grid dd,
.pairing-context dd,
.voice-metrics dd {
  color: var(--ink);
}

.technical-details {
  margin-top: 14px;
  padding-top: 2px;
}

.technical-details summary {
  width: fit-content;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.technical-details[open] summary {
  color: var(--brand-strong);
}

.technical-metadata {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

button {
  border-color: #d6dce8;
  border-radius: 9px;
  color: #35415c;
}

button:hover:not(:disabled) {
  border-color: #9c94f4;
  color: var(--brand-strong);
}

button.primary {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 7px 18px rgb(81 69 214 / 18%);
}

button.primary:hover:not(:disabled) {
  border-color: var(--brand-strong);
  background: var(--brand-strong);
  color: #fff;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--brand);
  outline-color: rgb(101 88 232 / 18%);
}

input,
textarea,
select {
  border-color: #cfd6e3;
  border-radius: 9px;
  color: var(--ink);
}

.state-badge.ready {
  border-color: #b9e1d2;
  background: #eefaf5;
  color: var(--success);
}

.state-badge.attention {
  border-color: #ead5a6;
  background: #fff9ed;
  color: var(--warning);
}

.creator-scope-control {
  padding: 14px;
  border: 1px solid #e3e0ff;
  border-radius: 12px;
  background: #f8f7ff;
}

.pairing-result {
  border-color: #cac4ff;
  background: #f6f4ff;
}

.checklist-item,
.installation-row,
.team-member-row,
.shift-review-card,
.platform-account-row,
.control-center-script-row {
  border-color: var(--line);
  background: var(--surface-soft);
}

.checklist-item.complete {
  border-color: #b9e1d2;
  background: #f1faf6;
}

.checklist-item.complete .checklist-marker {
  background: var(--success);
}

.outcome-cost-cards {
  margin-top: 18px;
}

.outcome-cost-card,
.ai-budget-summary,
.creator-voice-summary {
  border-color: #e5e8f1;
  background: var(--surface-soft);
}

.form-status:not(:empty),
.notice:not(:empty) {
  padding: 9px 11px;
  border-radius: 9px;
  background: #f0f8f5;
}

.notice {
  margin: 0;
}

body.portal-dashboard #global-status:not(:empty) {
  position: fixed;
  z-index: 20;
  right: 24px;
  bottom: 22px;
  max-width: min(440px, calc(100vw - 48px));
  border: 1px solid #cfe8de;
  background: #f3fbf7;
  box-shadow: 0 12px 36px rgb(20 40 70 / 15%);
}

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

}

@media (min-width: 981px) and (max-width: 1179px) {
  .metadata-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  #dashboard-view {
    grid-template-columns: 1fr;
  }

  .portal-navigation {
    position: sticky;
    z-index: 10;
    height: auto;
    padding: 12px 16px;
    overflow: hidden;
  }

  .navigation-brand,
  .navigation-note {
    display: none;
  }

  .navigation-links {
    display: flex;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  button.navigation-link {
    width: auto;
    flex: 0 0 auto;
    padding: 9px 11px;
  }

  button.navigation-link.is-active {
    box-shadow: inset 0 -2px #7d72ff;
  }

  .navigation-icon {
    display: none;
  }

  .dashboard-workspace {
    padding-top: 24px;
  }
}

@media (max-width: 620px) {
  body.portal-dashboard {
    padding: 0;
    overflow-x: hidden;
  }

  .dashboard-workspace {
    padding: 20px 14px 36px;
  }

  .dashboard-header {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
  }

  .dashboard-header .compact-actions {
    width: 100%;
  }

  .portal-navigation {
    padding: 8px;
  }

  .navigation-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  button.navigation-link {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 7px 3px;
    text-align: center;
    white-space: normal;
    font-size: 11px;
    line-height: 1.15;
  }

  button.navigation-service {
    grid-column: 1 / -1;
  }

  .dashboard-workspace .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-workspace .actions button {
    width: 100%;
  }

  .portal-page .actions button,
  .dashboard-header .actions button {
    min-height: 44px;
  }

  .view-card {
    padding: 19px;
    border-radius: 14px;
  }

  .metadata-grid {
    grid-template-columns: 1fr;
  }

  .outcome-cost-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .extension-connection-heading,
  .installation-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Connections-first creator workspace */
:root {
  color-scheme: dark;
  --ink: #f8f0f4;
  --muted: #bfaebc;
  --line: #493845;
  --surface: #281d2b;
  --surface-soft: #322333;
  --nav: #160f1d;
  --nav-soft: #352132;
  --brand: #ef8c9e;
  --brand-strong: #ffac9f;
  --brand-soft: #503040;
  --success: #8edac2;
  --warning: #efc385;
  background: #1a121f;
  color: var(--ink);
}

body,
body.portal-dashboard {
  background: radial-gradient(circle at 77% -8%, rgb(155 66 118 / 25%), transparent 36rem), #1a121f;
  color: var(--ink);
}

body:not(.portal-dashboard) .portal-shell { width: min(960px, 100%); }

#dashboard-view { grid-template-columns: 242px minmax(0, 1fr); }

.portal-navigation {
  background: radial-gradient(circle at 15% 5%, rgb(213 96 145 / 17%), transparent 17rem), #160f1d;
  border-right: 1px solid #392837;
}

.navigation-mark {
  border-color: #8b526e;
  border-radius: 12px;
  background: linear-gradient(145deg, #f4a1a9, #bd608b);
  color: #24121f;
  box-shadow: 0 9px 28px rgb(203 78 126 / 22%);
}

.navigation-brand strong { font-size: 17px; letter-spacing: -.025em; }
.navigation-brand small,
.navigation-note { color: #a899aa; }
.navigation-note { border-color: #493442; background: #241925; }
button.navigation-link { color: #c5b4c2; font-size: 14px; }
button.navigation-link:hover:not(:disabled) { border-color: #604252; background: #302132; }
button.navigation-link.is-active {
  border-color: #734459;
  background: linear-gradient(100deg, #533047, #392437);
  box-shadow: inset 3px 0 var(--brand);
}
.navigation-icon { background: #3b2a3a; color: #d6aec0; }
.navigation-link.is-active .navigation-icon { background: #75425b; color: #fff1f2; }

.dashboard-workspace { width: min(1220px, 100%); padding: 40px clamp(20px, 5vw, 76px) 64px; gap: 24px; }
.dashboard-header { margin-bottom: 2px; }
.dashboard-header h2 { margin: 0 0 6px; font-size: clamp(27px, 3vw, 38px); letter-spacing: -.045em; }
.dashboard-header #signed-in-user { color: #a896a7; }
.page-title { margin: 0 0 7px; color: var(--brand-strong); font-size: 15px; }
.selected-creator-context { color: #bfaebc; }
.eyebrow { color: var(--brand-strong); letter-spacing: .13em; text-transform: uppercase; font-size: 11px; font-weight: 800; }

.connections-intro {
  padding: clamp(27px, 4vw, 42px);
  border: 1px solid #674454;
  border-radius: 28px;
  background: radial-gradient(circle at 98% 0, rgb(239 140 158 / 19%), transparent 23rem), linear-gradient(120deg, #392337, #271c2d 65%);
  box-shadow: 0 20px 52px rgb(8 3 13 / 18%);
}
.connections-intro .eyebrow { margin: 0 0 10px; }
.connections-intro h3 { max-width: 680px; margin: 0 0 12px; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.045em; }
.connections-intro > p:last-child { max-width: 680px; margin: 0; color: #dec9d5; line-height: 1.6; }

.view-card,
.portal-page > .view-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 15px 42px rgb(9 4 13 / 17%);
}
.section-heading h3 { color: var(--ink); font-size: clamp(21px, 2.2vw, 28px); letter-spacing: -.035em; }
.section-heading p,
.subtle,
.field-help { color: var(--muted); line-height: 1.5; }
.view-card h4 { color: var(--ink); }

button {
  min-height: 42px;
  border-color: #674959;
  border-radius: 11px;
  background: #382838;
  color: #f8e8ee;
}
button:hover:not(:disabled) { border-color: #ee9cb0; background: #493144; color: #fff; }
button.primary { border-color: #f5a4ad; background: linear-gradient(120deg, #f2a0a8, #e27d9b); color: #2b1526; box-shadow: 0 9px 23px rgb(194 73 111 / 22%); }
button.primary:hover:not(:disabled) { border-color: #ffd0c0; background: #ffc1b8; color: #2b1526; }
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { border-color: #ffb3b6; outline: 3px solid rgb(255 179 182 / 35%); }
input,
textarea,
select { min-width: 0; border-color: #685164; border-radius: 11px; background: #201823; color: var(--ink); }
input::placeholder,
textarea::placeholder { color: #988797; }
label { color: #f2dfe8; }
select option { background: #281d2b; }

.creator-management { padding-block: 20px; }
.creator-management .section-heading { margin-bottom: 6px; }
.creator-scope-control { border-color: #614456; border-radius: 16px; background: #332332; }
.pairing-wizard { overflow: hidden; }
.pairing-wizard-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pairing-wizard-steps li { display: block; min-width: 0; border-color: #594453; border-radius: 15px; background: #302331; }
.pairing-wizard-steps li > span { margin-bottom: 11px; background: #54384b; color: #f2d7e0; }
.pairing-wizard-steps p { color: var(--muted); }
.pairing-wizard-steps em { display: inline-block; margin-top: 9px; color: #b8a1b3; }
.pairing-wizard-steps li.complete { border-color: #4e8a78; background: #263d3c; }
.pairing-wizard-steps li.complete > span { background: #568f7d; }
.pairing-wizard-steps li.current { border-color: #d7909f; background: #483040; }
.pairing-wizard-steps li.current > span { background: #e89ca7; color: #281624; }
.pairing-account-choice { border-color: #805269; border-radius: 15px; background: #3c293b; }
.pairing-account-choice #pairing-account-choice-help { color: #d3bdcb; }

.platform-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
button.platform-choice { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 12px; align-items: center; min-width: 0; padding: 17px; border: 1px solid #674859; border-radius: 18px; background: #302230; text-align: left; }
.platform-choice .platform-choice-mark { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: #654059; color: #ffe2e4; font-weight: 800; }
.platform-choice strong { color: #fff1f3; font-size: 16px; }
.platform-choice small { color: #c9b3c0; font-size: 12px; overflow-wrap: anywhere; }
button.platform-choice.is-selected { border-color: #ee9caf; background: #523147; box-shadow: inset 0 0 0 1px #ee9caf, 0 10px 24px rgb(10 3 14 / 15%); }
button.platform-choice.is-selected .platform-choice-mark { background: #ec9aa9; color: #2c1826; }
#platform-account-platform { max-width: 100%; }
.platform-account-controls { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.platform-account-setup-needed { margin-bottom: 18px; padding: 16px; border: 1px solid var(--warning); border-radius: 14px; background: #443329; }
.platform-account-setup-needed[hidden] { display: none; }
.platform-account-setup-needed p { margin: 0 0 12px; color: var(--ink); }
.platform-account-events-field:not([hidden]) { display: grid; gap: 8px; }
.platform-account-events-field[hidden] { display: none; }
.creator-profile-details { padding: 14px 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }
.creator-profile-details summary { cursor: pointer; color: #f7c5ce; font-weight: 700; }
.creator-profile-details summary span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 400; }
.creator-profile-details > .view-card { margin-top: 16px; }
.platform-account-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.platform-account-card { min-width: 0; padding: 20px; border-color: #604758; border-radius: 18px; background: #312331; }
.platform-account-card.is-selected { border-color: #d58ca1; }
.platform-account-card h4 { overflow-wrap: anywhere; font-size: 17px; }
.account-status-pill { display: inline-block; width: fit-content; padding: 5px 9px; border: 1px solid #8b6a6f; border-radius: 999px; color: #ebc5c4; font-size: 12px; font-weight: 700; }
.account-status-pill.is-ready { border-color: #5b9d87; background: #2a453e; color: #b7ebd6; }

.style-intro { max-width: 640px; color: #dfcbd6; line-height: 1.6; }
.core-style-rules { display: grid; gap: 8px; margin: 10px 0; }
.style-secondary,
.control-center-details { margin-top: 12px; padding: 14px 17px; border: 1px solid #604657; border-radius: 15px; background: #302331; }
.style-secondary summary,
.control-center-details summary { cursor: pointer; color: #f7c5ce; font-weight: 700; }
.style-secondary > .stacked-form,
.style-secondary > .creator-voice-summary { margin-top: 16px; }
.creator-voice-summary,
.creator-profile-fields,
.pairing-result,
.control-center-script-row,
.metadata-grid div,
.pairing-context div,
.voice-metrics div,
.installation-row,
.team-member-row { border-color: #5c4656; background: #362839; color: var(--ink); }
.metadata-grid dt,
.pairing-context dt,
.voice-metrics dt { color: #baa7b7; }
.metadata-grid dd,
.pairing-context dd,
.voice-metrics dd { color: var(--ink); }
.creator-voice-summary { border-radius: 14px; }
.scripts-details .control-center-scripts { margin-top: 12px; }
.manual-install-details summary { color: #f2b3c1; }
.beta-install-warning { color: #e6c2c8; }
.form-status:not(:empty),
.notice:not(:empty) { background: #34433e; color: #c2f0db; }
.form-status.error,
.notice.error { background: #4a2b38; color: #ffd2d7; }
.state-badge.ready { border-color: #57947f; background: #2d493e; color: #c2f0db; }
.state-badge.attention { border-color: #a78856; background: #4a3c2c; color: #f6d69c; }

@media (max-width: 980px) {
  #dashboard-view { grid-template-columns: minmax(0, 1fr); }
  .portal-navigation { border-right: 0; border-bottom: 1px solid #49313e; }
  button.navigation-link.is-active { box-shadow: inset 0 -2px var(--brand); }
}
@media (max-width: 700px) {
  .pairing-wizard-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-account-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .navigation-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-workspace { padding: 20px 14px 40px; }
  .view-card,
  .portal-page > .view-card { padding: 20px; border-radius: 21px; }
  .connections-intro { border-radius: 22px; }
  .platform-choices { grid-template-columns: minmax(0, 1fr); }
  .pairing-wizard-steps { grid-template-columns: minmax(0, 1fr); }
  .pairing-wizard-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); }
  .pairing-wizard-steps li > span { grid-row: 1 / 3; margin: 0; }
  .pairing-wizard-steps em { grid-column: 2; }
}

/* Keep the platform connection choices high on the page. */
.connections-intro { padding: 23px 28px; }
.connections-intro h3 { margin-bottom: 5px; font-size: clamp(27px, 3vw, 34px); }
.connections-intro > p:last-child { font-size: 14px; }
.creator-context-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 12px 18px;
  border: 1px solid #55404e;
  border-radius: 18px;
  background: #281d2b;
}
.creator-context-bar .section-heading { flex: 0 0 auto; margin: 0; }
.creator-context-bar .section-heading h3 { margin: 0; font-size: 16px; }
.creator-context-bar .creator-scope-control { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: transparent; }
.creator-context-bar .creator-scope-control > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.creator-context-bar .creator-scope-row { margin: 0; }
.creator-context-bar .creator-scope-row select { max-width: 420px; }
.creator-context-bar .creator-add-form { flex-basis: 100%; }
.creator-context-bar:has(.creator-add-form:not([hidden])) { flex-wrap: wrap; }
.creator-profile-details,
.pairing-progress-details {
  min-width: 0;
  border: 1px solid #493845;
  border-radius: 16px;
  background: #251b29;
}
.creator-profile-details > summary,
.pairing-progress-details > summary {
  padding: 16px 20px;
  cursor: pointer;
  color: #f5dfe8;
  font-weight: 700;
}
.creator-profile-details > summary span,
.pairing-progress-details > summary span { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 400; }
.creator-profile-details .dashboard-columns { margin: 0; padding: 0 12px 12px; }
.creator-profile-details .view-card { box-shadow: none; }
.pairing-progress-details .pairing-wizard { margin: 0 12px 12px; box-shadow: none; }
.pairing-wizard { padding: 18px 22px; }
.pairing-wizard .section-heading { margin-bottom: 10px; }
.pairing-wizard .section-heading h3 { margin: 0 0 3px; font-size: 18px; }
.pairing-wizard .section-heading p { margin: 0; font-size: 12px; }
.pairing-account-choice { margin-bottom: 9px; padding: 9px 13px; }
.pairing-account-choice #pairing-account-choice-selected { margin-top: 2px; }
.progress-details summary { width: fit-content; cursor: pointer; color: #f3becb; font-size: 12px; font-weight: 700; }
.progress-details[open] .pairing-wizard-steps { margin-top: 12px; }
@media (max-width: 620px) {
  .connections-intro { padding: 20px; }
  .creator-context-bar { align-items: stretch; flex-direction: column; gap: 8px; }
  .creator-context-bar .creator-scope-row select { max-width: none; }
  .creator-profile-details > summary span,
  .pairing-progress-details > summary span { display: block; margin: 3px 0 0 18px; }
}

/* Six-step creator setup: installation, two platform choices, pairing, and rules. */
.extension-install .section-heading { margin-bottom: 10px; }
.extension-install > .actions { margin: 0 0 10px; }
.extension-install #extension-download { min-width: 220px; }
.extension-install .manual-install-details { margin-top: 14px; }
.platform-account-section .platform-choices { margin: 2px 0 8px; }
.extension-connection .pairing-context {
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 16px;
}
.extension-connection .pairing-context > div[hidden] { display: none !important; }
.extension-connection > .actions { margin-top: 0; }
.extension-connection .beta-install-warning { margin-top: 16px; }

.device-pairing-form {
  display: grid;
  gap: 10px;
  max-width: 430px;
}
.device-pairing-form label { color: #f5dfe8; font-weight: 700; }
.device-pairing-form input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #8f7488;
  border-radius: 10px;
  background: #201724;
  color: #fff;
  font: inherit;
  font-size: 22px;
  letter-spacing: .12em;
  padding: 12px 14px;
  text-transform: uppercase;
}
.device-pairing-form input::placeholder { color: #a58d9f; }
.device-pairing-confirmation {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid #997c94;
  border-radius: 12px;
  background: #2f2231;
  color: #fff;
}
.device-pairing-confirmation[hidden] { display: none; }
.device-pairing-confirmation p { margin: 0; }
.device-pairing-confirmation strong { color: #ffd8e1; }
.legacy-pairing { margin-top: 20px; padding-bottom: 14px; }
.legacy-pairing p, .legacy-pairing button { margin-inline: 18px; }

.advanced-setup,
.account-advanced {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #251b29;
}
.advanced-setup > summary,
.account-advanced > summary {
  padding: 16px 20px;
  cursor: pointer;
  color: #f5dfe8;
  font-weight: 700;
}
.advanced-setup > summary:focus-visible,
.account-advanced > summary:focus-visible { outline: 3px solid rgb(255 179 182 / 35%); }
.creator-context-bar.advanced-setup { display: block; padding: 0; }
.creator-context-bar.advanced-setup > .section-heading,
.creator-context-bar.advanced-setup > .creator-scope-control,
.creator-context-bar.advanced-setup > .creator-add-action,
.creator-context-bar.advanced-setup > .creator-add-form { margin: 0 18px 16px; }
.creator-context-bar.advanced-setup > .section-heading { padding-top: 4px; }
.creator-context-bar.advanced-setup > .creator-scope-control:not([hidden]) { display: grid; }
.creator-context-bar.advanced-setup > .creator-add-form:not([hidden]) { display: grid; }
.pairing-progress-details > summary span { color: var(--muted); font-size: 12px; font-weight: 400; }
.account-advanced > .view-card { margin: 0 12px 12px; }
.account-advanced > .view-card:first-of-type { margin-top: 4px; }
.portal-page[data-portal-page="account"] > #account-security-section { order: -2; }
.portal-page[data-portal-page="account"] > .support-help-section { order: -1; }

@media (max-width: 980px) {
  .extension-install #extension-download { min-width: 0; }
}
@media (max-width: 620px) {
  .extension-install .actions button,
  .extension-connection > .actions button { width: 100%; }
  .platform-choices { grid-template-columns: minmax(0, 1fr); }
  .creator-context-bar.advanced-setup > .creator-scope-control,
  .creator-context-bar.advanced-setup > .creator-add-action,
  .creator-context-bar.advanced-setup > .creator-add-form { margin-inline: 12px; }
  .account-advanced > .view-card { margin-inline: 8px; }
}

.dashboard-identity { min-width: 0; flex: 1 1 auto; }
.dashboard-header .selected-creator-context {
  margin-top: 9px;
  color: #f2dfe8;
}
.dashboard-header .selected-platform-account-context {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.dashboard-header .creator-scope-control {
  display: grid;
  grid-template-columns: auto minmax(0, 260px);
  width: fit-content;
  max-width: 100%;
  margin: 10px 0 0;
  padding: 8px 10px;
  gap: 8px;
  border-color: #614456;
  background: #332332;
  font-size: 12px;
}
.dashboard-header .creator-scope-control[hidden] { display: none; }
.dashboard-header .creator-scope-row { min-width: 0; }
.dashboard-header .creator-scope-row select { width: 100%; min-width: 0; }

/* Keep the creator journey and every visible notice in the same dark palette. */
.setup-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: setup-step;
}
.setup-route li {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #745165;
  border-radius: 12px;
  background: #342537;
  color: #f6e5ed;
  font-size: 13px;
  line-height: 1.4;
  counter-increment: setup-step;
}
.setup-route li::before {
  content: counter(setup-step) ". ";
  color: #ffb5b8;
  font-weight: 800;
}
.platform-account-platform {
  margin: 0 0 4px;
  color: #f4b7c8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.platform-account-card h4 {
  margin: 0 0 12px;
  color: #fff3f5;
  font-size: clamp(21px, 2.5vw, 26px);
  line-height: 1.2;
}
.setup-next-action { margin-top: 20px; }
.setup-next-action button { border-color: #c0849c; }

.portal-direct-file .direct-file-warning,
body.portal-dashboard #global-status:not(:empty),
.checklist-item,
.checklist-item.complete,
.platform-account-row,
.ai-budget-summary,
.outcome-cost-card,
.shift-review-card,
.health-alert,
.owner-readiness-alert,
.installation-row,
.team-member-row,
.pairing-result,
.control-center-script-row,
.creator-profile-fields,
.release-metadata div {
  border-color: #674d5f;
  background: #352738;
  color: var(--ink);
}
body.portal-dashboard #global-status:not(:empty) {
  border-color: #658d7d;
  background: #2c413b;
  color: #dbf8e8;
}
body.portal-dashboard #global-status.error:not(:empty) {
  border-color: #9e6274;
  background: #4a2b38;
  color: #ffd2d7;
}
.portal-direct-file .direct-file-warning { color: #ffe3bb; }
.portal-direct-file .direct-file-warning a { color: #ffb5b8; }
.checklist-item.complete { border-color: #5b9d87; background: #294039; }
.pairing-result input,
.pairing-result textarea { background: #201823; color: var(--ink); }
.manual-install-details,
.installation-heading,
.beta-install-warning { border-color: #674d5f; }
.manual-install-details code { color: #ffe1e9; }

@media (max-width: 700px) {
  .setup-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .setup-route { grid-template-columns: minmax(0, 1fr); }
  .setup-route li { padding: 9px 12px; }
  .dashboard-workspace,
  .connections-intro,
  .view-card { min-width: 0; }
  .platform-account-card,
  .device-pairing-form,
  .device-pairing-confirmation { overflow-wrap: anywhere; }
  .setup-next-action button { width: 100%; }
}

@media (max-width: 620px) {
  .dashboard-header .creator-scope-control {
    grid-template-columns: 1fr;
    width: 100%;
  }
}