:root {
  --pro-sidebar: #101a22;
  --pro-sidebar-raised: #172631;
  --pro-sidebar-text: #a9b9c3;
  --pro-sidebar-active: #203a39;
  --pro-canvas: #f3f6f7;
  --pro-surface: #ffffff;
  --pro-ink: #17232d;
  --pro-muted: #71808a;
  --pro-line: #e0e8ea;
  --pro-teal: #0b7d70;
  --pro-teal-dark: #07645a;
  --pro-teal-soft: #e2f3ef;
  --pro-yellow: #e6ad39;
  --pro-blue: #2468c8;
  --pro-red: #be4238;
  --pro-shadow: 0 12px 32px rgba(24, 45, 54, 0.08);
}

.auth-shell {
  position: relative;
  overflow: hidden;
  background: #eef3f4;
}

.auth-shell::before {
  position: fixed;
  inset: 0 56% 0 0;
  background: #12252c;
  content: "";
}

.auth-panel {
  position: relative;
  z-index: 1;
  width: min(500px, 100%);
  padding: 30px;
  border-color: #d6e1e3;
  box-shadow: 0 24px 64px rgba(23, 42, 48, 0.15);
}

.auth-panel .brand-mark {
  background: var(--pro-yellow);
  color: #17232d;
}

.auth-panel .segments {
  background: #f2f5f6;
}

.auth-panel .segments button.active {
  background: #ffffff;
  color: var(--pro-teal-dark);
  box-shadow: 0 1px 4px rgba(26, 52, 60, 0.08);
}

.auth-panel .button {
  background: var(--pro-teal);
}

.auth-panel .button:hover {
  background: var(--pro-teal-dark);
}

.pro-password-field,
.pro-url-field {
  display: flex;
  align-items: center;
  min-height: 42px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.field .pro-password-field input,
.field .pro-url-field input {
  min-height: 40px;
  border: 0;
  outline: 0;
}

.pro-password-field:focus-within,
.pro-url-field:focus-within {
  border-color: var(--pro-teal);
  box-shadow: 0 0 0 3px rgba(11, 125, 112, 0.1);
}

.pro-password-field button {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: #65777d;
  cursor: pointer;
}

.pro-password-field button svg {
  width: 17px;
  height: 17px;
}

.pro-url-field > small {
  flex: 0 0 auto;
  padding-left: 10px;
  color: #74858a;
  font-size: 11px;
  white-space: nowrap;
}

.pro-onboarding-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 17px;
  padding: 0;
  list-style: none;
}

.pro-onboarding-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #deE8e8;
  border-radius: 7px;
  background: #fbfdfd;
}

.pro-onboarding-steps b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pro-teal-soft);
  color: var(--pro-teal-dark);
  font-size: 11px;
}

.pro-onboarding-steps span,
.pro-onboarding-steps strong {
  display: block;
}

.pro-onboarding-steps span {
  color: var(--pro-muted);
  font-size: 11px;
  line-height: 1.55;
}

.pro-onboarding-steps strong {
  margin-bottom: 2px;
  color: var(--pro-ink);
  font-size: 12px;
}

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

.pro-auth-intro {
  margin: -4px 0 4px;
  padding: 10px 12px;
  border: 1px solid #d9e8e5;
  border-left: 3px solid var(--pro-teal);
  background: #f2faf8;
  color: #3e5d61;
  font-size: 12px;
  line-height: 1.65;
}

.field small,
.pro-panel-note {
  color: var(--pro-muted);
  font-size: 11px;
  line-height: 1.55;
}

.pro-bot-admin-section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--pro-line);
}

.pro-bot-intro-section,
.pro-bot-groups-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--pro-line);
}

.pro-bot-bind-section {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--pro-line);
  border-radius: 7px;
  background: #f7faf9;
}

.pro-bot-bind-section summary {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--pro-teal-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.pro-bot-bind-section summary svg {
  width: 16px;
  height: 16px;
}

.pro-bot-bind-section[open] summary {
  margin-bottom: 10px;
}

.pro-bot-admin-section h3 {
  margin: 0;
  color: var(--pro-ink);
  font-size: 16px;
}

.pro-bot-admin-form {
  display: grid;
  grid-template-columns: minmax(180px, .55fr) minmax(240px, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid var(--pro-line);
  border-radius: 7px;
  background: #f7faf9;
}

.pro-bot-admin-form .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  white-space: nowrap;
}

.pro-bot-admin-form .button svg {
  width: 15px;
  height: 15px;
}

#botAdminRows small {
  color: var(--pro-muted);
  font-size: 11px;
}

.pro-panel-note {
  margin: 6px 0 0;
  max-width: 720px;
}

.pro-guide-callout {
  display: grid;
  gap: 3px;
  margin: -2px 0 16px;
  padding: 11px 13px;
  border: 1px solid #dfe9e7;
  border-left: 3px solid var(--pro-teal);
  background: #f7fbfa;
}

.pro-guide-callout strong {
  color: var(--pro-ink);
  font-size: 13px;
}

.pro-guide-callout span {
  color: var(--pro-muted);
  font-size: 12px;
  line-height: 1.6;
}

.pro-restart-status,
.pro-restart-warning {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid var(--pro-line);
  border-left: 3px solid var(--pro-teal);
  background: #f7fbfa;
  color: var(--pro-muted);
  font-size: 12px;
  line-height: 1.6;
}

.pro-restart-warning {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.pro-restart-warning strong {
  color: var(--pro-ink);
}

.pro-restart-time-editor,
.pro-restart-inline,
.pro-restart-actions {
  display: flex;
  align-items: end;
  gap: 8px;
}

.pro-restart-time-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 34px;
  margin-bottom: 7px;
}

.pro-restart-time-list .field-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--pro-line);
  border-radius: 5px;
  background: var(--pro-surface);
  color: var(--pro-ink);
  font-size: 12px;
  font-weight: 700;
}

.pro-restart-time-list button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pro-red);
  cursor: pointer;
}

.pro-restart-empty {
  color: var(--pro-muted);
  font-size: 11px;
}

.pro-restart-actions {
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--pro-line);
}

.pro-restart-actions .actions {
  flex-wrap: wrap;
  margin-top: 0;
}

.pro-restart-definition {
  margin-top: 18px;
}

/* Automatic restart workspace: keep scheduling controls easy to scan. */
#restartSchedulePanel {
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e5e4;
  border-top: 3px solid var(--pro-teal);
  box-shadow: 0 16px 38px rgba(24, 45, 54, 0.09);
}

#restartSchedulePanel > .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  min-height: 0;
  padding: 22px 26px 18px;
  border-bottom: 1px solid #e5eceb;
  background: linear-gradient(180deg, #fbfdfd 0%, #f6faf9 100%);
}

#restartSchedulePanel > .panel-head h3 {
  margin: 0;
  color: #132d32;
  font-size: 19px;
  letter-spacing: 0;
}

#restartSchedulePanel > .panel-head .pro-panel-note {
  max-width: 680px;
  margin-top: 7px;
  color: #64777a;
  font-size: 12px;
}

#restartSchedulePanel > .panel-head > .status {
  flex: 0 0 auto;
  margin-top: 2px;
  border: 1px solid #b9ddd5;
  background: #e8f6f2;
  color: #09695e;
  font-weight: 800;
}

#restartSchedulePanel > .panel-head > .status.awaiting_approval {
  border-color: #eadcb7;
  background: #fff8e8;
  color: #86621c;
}

#restartSchedulePanel > .panel-head > .status.suspended {
  border-color: #efc9c6;
  background: #fff0ef;
  color: #a63831;
}

#restartSchedulePanel > .pro-restart-status {
  margin: 18px 26px 0;
  padding: 12px 14px;
  border: 1px solid #dce8e6;
  border-left: 3px solid var(--pro-teal);
  border-radius: 5px;
  background: #f6faf9;
  color: #536a6c;
}

#restartSchedulePanel > .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px 18px;
  margin: 20px 26px 0;
  padding: 20px;
  border: 1px solid #e1e9e8;
  border-radius: 7px;
  background: #ffffff;
}

#restartSchedulePanel > .form-grid > .checks:first-child {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: -2px 0 2px;
  padding: 0 13px;
  border: 1px solid #b9ddd5;
  border-radius: 5px;
  background: #edf9f6;
  color: #075f56;
  font-size: 13px;
  font-weight: 800;
}

#restartSchedulePanel > .form-grid > .field > span,
#restartSchedulePanel > .pro-restart-actions .field > span {
  color: #4b6265;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

#restartSchedulePanel .field input,
#restartSchedulePanel .field select {
  min-height: 42px;
}

#restartSchedulePanel .pro-restart-mode-card {
  display: grid;
  gap: 14px;
  padding: 15px;
  border: 1px solid #c8ded9;
  border-radius: 7px;
  background: #f7fbfa;
}

#restartSchedulePanel .pro-restart-mode-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#restartSchedulePanel .pro-restart-mode-heading > div {
  display: grid;
  gap: 4px;
}

#restartSchedulePanel .pro-restart-label,
#restartSchedulePanel .pro-restart-fields-heading span {
  color: #66807f;
  font-size: 11px;
  font-weight: 800;
}

#restartSchedulePanel .pro-restart-mode-heading strong {
  color: #075f56;
  font-size: 15px;
}

#restartSchedulePanel .pro-restart-mode-note {
  color: #6d7e80;
  font-size: 11px;
}

#restartSchedulePanel .pro-restart-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#restartSchedulePanel .pro-restart-mode-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid #d5e1df;
  border-radius: 6px;
  background: #fff;
  color: #4e6264;
  text-align: left;
  cursor: pointer;
}

#restartSchedulePanel .pro-restart-mode-option:hover {
  border-color: #9bc7be;
}

#restartSchedulePanel .pro-restart-mode-option.active {
  border-color: var(--pro-teal);
  background: #e9f7f3;
  box-shadow: 0 0 0 2px rgba(11, 125, 112, .1);
  color: #075f56;
}

#restartSchedulePanel .pro-restart-mode-option:disabled {
  cursor: wait;
  opacity: .62;
}

#restartSchedulePanel .pro-restart-mode-option > span:last-child {
  display: grid;
  gap: 3px;
}

#restartSchedulePanel .pro-restart-mode-option strong,
#restartSchedulePanel .pro-restart-mode-option small {
  display: block;
}

#restartSchedulePanel .pro-restart-mode-option strong {
  font-size: 13px;
}

#restartSchedulePanel .pro-restart-mode-option small {
  color: #738486;
  font-size: 11px;
}

#restartSchedulePanel .pro-restart-mode-icon {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #cfe1dd;
  border-radius: 5px;
  background: #f5faf9;
  color: #176e65;
  font-size: 12px;
  font-weight: 800;
}

#restartSchedulePanel .pro-restart-mode-option.active .pro-restart-mode-icon {
  border-color: #a4d2c9;
  background: #d7f0ea;
}

#restartSchedulePanel .pro-restart-mode-native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#restartSchedulePanel .pro-restart-mode-fields {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid #e0e8e7;
  border-radius: 7px;
  background: #fcfdfd;
}

#restartSchedulePanel .pro-restart-fields-heading {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

#restartSchedulePanel .pro-restart-fields-heading strong {
  color: #1b3438;
  font-size: 14px;
}

#restartSchedulePanel .pro-restart-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#restartSchedulePanel .pro-restart-time-editor {
  display: block;
  min-height: 42px;
  padding: 8px 9px 7px;
  border: 1px solid #cad8d6;
  border-radius: 6px;
  background: #fbfdfd;
}

#restartSchedulePanel .pro-restart-inline {
  align-items: center;
  margin-top: 4px;
}

#restartSchedulePanel .pro-restart-inline input {
  min-height: 36px;
}

#restartSchedulePanel .pro-restart-inline .button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
}

#restartSchedulePanel > .pro-restart-warning {
  align-items: center;
  margin: 18px 26px 0;
  padding: 12px 14px;
  border: 1px solid #eadcb7;
  border-left: 3px solid var(--pro-yellow);
  border-radius: 5px;
  background: #fffbf1;
  color: #75633c;
}

#restartSchedulePanel > .pro-restart-warning strong {
  white-space: nowrap;
  color: #6d521c;
}

#restartSchedulePanel > .pro-restart-actions {
  align-items: end;
  gap: 18px;
  margin: 20px 26px 0;
  padding: 20px 0 0;
}

#restartSchedulePanel > .pro-restart-actions > .field {
  flex: 1 1 300px;
  max-width: 430px;
}

#restartSchedulePanel > .pro-restart-actions .actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 auto;
}

#restartSchedulePanel > .pro-restart-actions .actions .button {
  min-height: 40px;
  padding: 0 15px;
}

#restartSchedulePanel > .pro-restart-definition {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 26px 0;
  padding: 18px 0 0;
  border-top: 1px solid #e5eceb;
}

#restartSchedulePanel .definition-item {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #e2eae9;
  border-radius: 6px;
  background: #f8fbfa;
}

#restartSchedulePanel .definition-item span {
  color: #738486;
  font-size: 11px;
  font-weight: 700;
}

#restartSchedulePanel .definition-item strong {
  overflow: hidden;
  color: #17353a;
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#restartSchedulePanel > .message {
  margin: 14px 26px 22px;
  min-height: 18px;
}

@media (max-width: 780px) {
  #restartSchedulePanel > .panel-head,
  #restartSchedulePanel > .pro-restart-actions {
    display: grid;
  }

  #restartSchedulePanel > .panel-head,
  #restartSchedulePanel > .pro-restart-status,
  #restartSchedulePanel > .form-grid,
  #restartSchedulePanel > .pro-restart-warning,
  #restartSchedulePanel > .pro-restart-actions,
  #restartSchedulePanel > .pro-restart-definition,
  #restartSchedulePanel > .message {
    margin-left: 16px;
    margin-right: 16px;
  }

  #restartSchedulePanel > .form-grid,
  #restartSchedulePanel > .pro-restart-definition {
    grid-template-columns: 1fr;
  }

  #restartSchedulePanel > .form-grid {
    padding: 15px;
  }

  #restartSchedulePanel > .form-grid > .span-2 {
    grid-column: auto;
  }

  #restartSchedulePanel .pro-restart-mode-options,
  #restartSchedulePanel .pro-restart-fields-grid {
    grid-template-columns: 1fr;
  }

  #restartSchedulePanel .pro-restart-mode-heading,
  #restartSchedulePanel .pro-restart-fields-heading {
    display: grid;
    gap: 5px;
  }

  .pro-restart-actions {
    display: grid;
    align-items: stretch;
  }

  .pro-restart-actions .actions {
    justify-content: stretch;
  }

  .pro-restart-actions .actions .button {
    flex: 1 1 auto;
  }
}

.pro-advanced {
  padding: 10px 12px;
  border: 1px solid var(--pro-line);
  background: #fbfcfc;
}

.pro-advanced[open] summary {
  margin-bottom: 10px;
}

.pro-app {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  grid-template-rows: 72px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--pro-canvas);
}

.pro-sidebar {
  position: sticky;
  top: 0;
  z-index: 12;
  grid-column: 1;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 22px 14px 16px;
  background: var(--pro-sidebar);
  color: var(--pro-sidebar-text);
}

.pro-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 10px 25px;
  color: #ffffff;
}

.pro-brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--pro-yellow);
  color: #17232d;
  font-size: 11px;
  font-weight: 900;
}

.pro-brand strong,
.pro-brand span {
  display: block;
}

.pro-brand strong {
  font-size: 14px;
  letter-spacing: 0;
}

.pro-brand span {
  margin-top: 2px;
  color: #79919d;
  font-size: 11px;
}

.pro-store-switcher {
  display: grid;
  gap: 5px;
  width: 100%;
  margin: 0 0 20px;
  padding: 12px;
  border: 1px solid #2a3d49;
  border-radius: 8px;
  background: var(--pro-sidebar-raised);
  color: #edf6f4;
  text-align: left;
}

.pro-store-switcher:disabled {
  opacity: 0.64;
}

.pro-store-switcher small {
  color: #8ca2ad;
  font-size: 11px;
}

.pro-store-switcher span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-nav-label {
  padding: 0 11px 9px;
  color: #728995;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pro-nav {
  display: grid;
  gap: 3px;
}

.pro-nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--pro-sidebar-text);
  font-size: 13px;
  font-weight: 650;
  text-align: left;
}

.pro-nav button svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}

.pro-nav button:hover:not(:disabled) {
  background: #182b35;
  color: #f3fbf9;
}

.pro-nav button.active {
  border-left-color: var(--pro-yellow);
  background: var(--pro-sidebar-active);
  color: #ffffff;
}

.pro-nav button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.pro-sidebar-footer {
  margin-top: auto;
  padding: 16px 10px 3px;
  border-top: 1px solid #293c46;
  color: #8096a0;
  font-size: 11px;
}

.pro-sidebar-footer strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #dae8e4;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-app .topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  min-height: 72px;
  padding: 0 34px;
  border-bottom: 1px solid var(--pro-line);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: none;
}

.pro-context {
  display: grid;
  gap: 2px;
}

.pro-context small {
  color: var(--pro-muted);
  font-size: 11px;
  font-weight: 700;
}

.pro-context strong {
  overflow: hidden;
  color: var(--pro-ink);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-app .identity {
  display: block;
  margin-right: 16px;
  color: var(--pro-ink);
  text-align: right;
}

.pro-app .identity::before {
  display: none;
}

.pro-app .identity strong {
  font-size: 12px;
}

.pro-app .identity span {
  color: var(--pro-muted);
  font-size: 11px;
}

.pro-app .topbar .button.secondary {
  min-height: 34px;
  border-color: #cbd8d9;
  background: #ffffff;
  color: #34464c;
}

.pro-app .workspace {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  margin: 0;
  padding: 30px 34px 56px;
  background: var(--pro-canvas);
}

.pro-landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  margin-bottom: 22px;
  padding: 28px 30px;
  border-radius: 8px;
  border-top: 3px solid var(--pro-yellow);
  background: #17373c;
  box-shadow: 0 16px 34px rgba(17, 52, 58, 0.19);
  color: #f5fbfa;
}

.pro-eyebrow {
  margin-bottom: 9px;
  color: #b9d8d1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.pro-landing h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 850;
}

.pro-landing p {
  max-width: 640px;
  margin: 9px 0 0;
  color: #c2dcd7;
  font-size: 13px;
  line-height: 1.65;
}

.pro-landing-state {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.pro-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(208, 241, 232, 0.25);
  border-radius: 999px;
  background: rgba(8, 31, 35, 0.22);
  color: #ddf8ef;
  font-size: 12px;
  font-weight: 750;
}

.pro-online-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #63d498;
  box-shadow: 0 0 0 4px rgba(99, 212, 152, 0.12);
}

.pro-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.pro-metric {
  display: grid;
  gap: 7px;
  min-height: 116px;
  padding: 19px;
  border: 1px solid var(--pro-line);
  border-radius: 8px;
  background: var(--pro-surface);
  box-shadow: var(--pro-shadow);
}

.pro-metric small {
  color: var(--pro-muted);
  font-size: 12px;
  font-weight: 700;
}

.pro-metric strong {
  color: var(--pro-ink);
  font-size: 27px;
  font-weight: 850;
  line-height: 1;
}

.pro-metric span {
  color: #78908f;
  font-size: 11px;
}

.pro-app .page-head[data-pro-hub],
.pro-app .panel[data-pro-hub] {
  margin-bottom: 18px;
}

.pro-app .page-head[data-pro-hub] {
  display: none;
}

.pro-app .panel[data-pro-hub] {
  box-shadow: var(--pro-shadow);
}

.pro-app #claimForm[data-pro-hub] {
  border: 1px dashed #b9ceca;
  background: #f8fbfa;
  box-shadow: none;
}

.pro-app #claimForm[data-pro-hub] .panel-head {
  border-bottom: 0;
}

.pro-server-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.pro-server-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 20px;
  border: 1px solid #dfe9e7;
  border-radius: 7px;
  background: #fbfdfc;
}

.pro-server-card[data-status="awaiting_approval"] {
  border-left: 3px solid var(--pro-yellow);
}

.pro-server-card[data-status="active"] {
  border-left: 3px solid var(--pro-teal);
}

.pro-server-card[data-status="suspended"],
.pro-server-card[data-status="expired"] {
  border-left: 3px solid var(--pro-red);
}

.pro-server-state-copy {
  margin-top: 8px !important;
  max-width: 580px;
  line-height: 1.55;
}

.pro-server-card h3 {
  margin: 0 0 5px;
  color: var(--pro-ink);
  font-size: 16px;
}

.pro-server-card p {
  margin: 0;
  color: var(--pro-muted);
  font-size: 12px;
}

.pro-server-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 17px;
  color: #607277;
  font-size: 11px;
}

.pro-server-meta span {
  display: inline-flex;
  gap: 5px;
}

.pro-server-meta b {
  color: #344a4e;
  font-weight: 800;
}

.pro-server-card .button {
  align-self: start;
  min-width: 78px;
}

.pro-app #manageView:not(.hidden) {
  display: block;
}

.pro-app #manageView > .page-head,
.pro-app #manageView > .tabs {
  display: none;
}

.pro-app #manageView > section[data-manage-panel] {
  min-width: 0;
  margin: 0;
}

.pro-app.pro-managing [data-pro-hub] {
  display: none !important;
}

.pro-app.pro-managing .workspace {
  padding-top: 32px;
}

.pro-overview {
  min-width: 0;
}

.pro-overview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.pro-overview-head h2 {
  margin: 0;
  color: var(--pro-ink);
  font-size: 25px;
  font-weight: 850;
}

.pro-overview-head p {
  margin: 7px 0 0;
  color: var(--pro-muted);
  font-size: 13px;
}

.pro-overview-head .button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.pro-overview-head .button svg {
  width: 16px;
  height: 16px;
}

.pro-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
  gap: 18px;
}

.pro-overview-grid > section {
  min-width: 0;
  padding: 21px;
  border: 1px solid var(--pro-line);
  border-radius: 8px;
  background: var(--pro-surface);
  box-shadow: var(--pro-shadow);
}

.pro-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.pro-section-head h3 {
  margin: 0;
  color: var(--pro-ink);
  font-size: 15px;
  font-weight: 800;
}

.pro-section-head button {
  min-height: 30px;
}

.pro-order-table {
  overflow: auto;
  border: 1px solid #e5edeb;
  border-radius: 6px;
}

.pro-order-table table {
  min-width: 780px;
}

.pro-order-items {
  display: grid;
  gap: 3px;
  min-width: 156px;
  color: #24343a;
  font-size: 12px;
  line-height: 1.35;
}

.pro-order-items span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pro-order-items b {
  color: #12695e;
  font-weight: 800;
}

.pro-order-items strong {
  color: var(--pro-ink);
  font-size: 12px;
}

.pro-order-items small,
.pro-order-empty {
  color: var(--pro-muted);
  font-size: 11px;
}

.pro-order-table .order-settlement {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.pro-order-table .order-settlement.coin {
  color: #8a5a00;
  background: #fff3cf;
  border: 1px solid #efd48a;
}

.pro-order-table .order-settlement.rmb {
  color: #1769aa;
  background: #e9f2fa;
  border: 1px solid #c7dced;
}

.pro-order-table .order-settlement + small {
  display: block;
  margin-top: 4px;
  color: var(--pro-muted);
  font-size: 11px;
}

.pro-order-table td > strong + small {
  display: block;
  margin-top: 4px;
  color: var(--pro-muted);
  font-size: 11px;
}

.pro-health-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e5edeb;
  border-radius: 6px;
}

.pro-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 50px;
  padding: 0 13px;
  background: #fbfcfc;
}

.pro-health-row + .pro-health-row {
  border-top: 1px solid #e9efee;
}

.pro-health-row span {
  color: #53666a;
  font-size: 12px;
  font-weight: 650;
}

.pro-health-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #12695e;
  font-size: 12px;
  font-weight: 800;
}

.pro-health-value::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3bb585;
}

.pro-empty-state {
  padding: 28px 16px;
  color: var(--pro-muted);
  font-size: 13px;
  text-align: center;
}

.pro-app .panel {
  border-color: var(--pro-line);
  box-shadow: var(--pro-shadow);
}

.pro-app .panel-head {
  margin-bottom: 16px;
}

.pro-app .panel-head > .button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.pro-product-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 140px auto;
  align-items: center;
  gap: 10px;
  margin: -2px 0 15px;
  padding: 12px;
  border: 1px solid #e0e9e7;
  border-radius: 7px;
  background: #f7faf9;
}

.pro-search {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #cbd9d6;
  border-radius: 6px;
  background: #ffffff;
}

.pro-search:focus-within {
  border-color: var(--pro-teal);
  box-shadow: 0 0 0 3px rgba(11, 125, 112, 0.11);
}

.pro-search svg {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  color: #66807d;
}

.pro-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--pro-ink);
  font-size: 13px;
}

.pro-product-toolbar select {
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid #cbd9d6;
  border-radius: 6px;
  background: #ffffff;
  color: #40555a;
  font-size: 12px;
}

.pro-product-summary {
  color: #60797a;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.pro-filtered-out {
  display: none;
}

.pro-config-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}

.pro-config-summary article {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--pro-line);
  border-top: 3px solid var(--pro-teal);
  border-radius: 7px;
  background: #fbfdfc;
}

.pro-config-summary article > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.pro-config-summary strong { color: var(--pro-ink); font-size: 13px; }
.pro-config-summary code { color: var(--pro-muted); font-size: 10px; }
.pro-config-summary span { color: #53696c; font-size: 11px; }
.pro-config-summary b { color: var(--pro-teal-dark); font-size: 11px; }
.pro-inline-badge { display: inline-flex; margin-top: 4px; padding: 2px 6px; border-radius: 99px; background: #fff3d7; color: #8a621d; font-size: 10px; font-weight: 800; }

.pro-visual-config {
  margin: 0 0 20px;
  padding: 18px;
  border: 1px solid var(--pro-line);
  border-radius: 8px;
  background: var(--pro-surface);
  box-shadow: var(--pro-shadow);
}

.pro-public-gifts { display: grid; gap: 8px; margin-bottom: 16px; }
.pro-public-gift { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #dce8e5; border-radius: 7px; background: #f4faf8; }
.pro-public-gift > svg { width: 18px; height: 18px; color: var(--pro-teal); }
.pro-public-gift strong, .pro-public-gift span { display: block; }
.pro-public-gift strong { color: var(--pro-ink); font-size: 12px; }
.pro-public-gift span { margin-top: 2px; color: var(--pro-muted); font-size: 11px; }
.pro-public-gift b { color: var(--pro-teal-dark); font-size: 11px; }
.pro-gift-matrix { display: grid; gap: 10px; }
.pro-gift-tier { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: stretch; gap: 9px; }
.pro-gift-tier > strong { display: flex; align-items: center; padding: 10px; border-radius: 6px; background: #17373c; color: #fff; font-size: 11px; }
.pro-gift-tier > div { display: grid; grid-template-columns: repeat(7, minmax(80px, 1fr)); gap: 6px; overflow-x: auto; }
.pro-gift-tier span { display: grid; gap: 4px; min-width: 80px; padding: 8px; border: 1px solid var(--pro-line); border-radius: 6px; background: #fbfcfc; }
.pro-gift-tier span.ready { border-color: #cfe4df; background: #f3faf8; }
.pro-gift-tier span.missing { border-color: #ead9d7; background: #fff8f7; }
.pro-gift-tier b { color: var(--pro-ink); font-size: 10px; }
.pro-gift-tier small { overflow: hidden; color: var(--pro-muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.pro-growth-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin: 0 0 20px; }
.pro-growth-summary article { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px 8px; padding: 12px; border: 1px solid var(--pro-line); border-radius: 7px; background: #fbfdfc; }
.pro-growth-summary article.total { border-top: 3px solid var(--pro-yellow); }
.pro-growth-summary svg { grid-row: 1 / 3; width: 18px; height: 18px; color: var(--pro-teal); }
.pro-growth-summary span { color: var(--pro-muted); font-size: 10px; }
.pro-growth-summary strong { color: var(--pro-ink); font-size: 13px; }

#proPassOverviewBody { display: grid; gap: 12px; padding: 0; text-align: left; }
.pro-season-card { padding: 17px; border: 1px solid var(--pro-line); border-left: 3px solid var(--pro-teal); border-radius: 7px; background: #fbfdfc; }
.pro-season-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid #e7eeee; }
.pro-season-card h3 { margin: 8px 0 3px; color: var(--pro-ink); font-size: 16px; }
.pro-season-card header p { margin: 0; color: var(--pro-muted); font-size: 11px; }
.pro-season-price { display: grid; gap: 2px; min-width: 120px; text-align: right; }
.pro-season-price small, .pro-season-price span { color: var(--pro-muted); font-size: 10px; }
.pro-season-price strong { color: var(--pro-teal-dark); font-size: 20px; }
.pro-season-meta { display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 12px 0; color: #53676b; font-size: 11px; }
.pro-season-meta b { color: var(--pro-ink); }
.pro-pass-track { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 7px; }
.pro-pass-track > strong { color: var(--pro-ink); font-size: 11px; }
.pro-pass-track > div { display: grid; grid-template-columns: repeat(20, minmax(24px, 1fr)); gap: 3px; overflow-x: auto; }
.pro-pass-track span { display: grid; place-items: center; min-width: 24px; height: 25px; border-radius: 4px; background: #e5f3f0; color: var(--pro-teal-dark); font-size: 9px; font-weight: 800; }
.pro-pass-track.premium span { background: #fff0cf; color: #825c16; }
.pro-season-members { margin: 12px 0 0; color: var(--pro-muted); font-size: 11px; }

.pro-overview-deliveries,
.pro-delivery-table {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--pro-line);
  border-radius: 7px;
  background: var(--pro-surface);
  box-shadow: var(--pro-shadow);
}

.pro-delivery-center { display: grid; gap: 18px; }
.pro-delivery-center.hidden { display: none; }
.pro-delivery-toolbar { grid-template-columns: minmax(260px, 1fr) 160px 160px auto; }
.pro-delivery-table { margin-top: 0; padding: 0; overflow: hidden; }
.pro-delivery-player, .pro-delivery-source { display: grid; gap: 2px; min-width: 140px; }
.pro-delivery-player strong, .pro-delivery-source strong { color: var(--pro-ink); font-size: 12px; }
.pro-delivery-player small, .pro-delivery-source small, .pro-delivery-source span, .pro-delivery-table td > small { display: block; color: var(--pro-muted); font-size: 10px; }
.pro-delivery-reward { display: block; min-width: 180px; color: var(--pro-ink); line-height: 1.55; }
.pro-delivery-error { display: block; max-width: 260px; margin-top: 5px; color: var(--pro-red); line-height: 1.45; white-space: normal; }
.status.processing { background: #e5effc; color: #24599f; }
.status.failed { background: #fae9e7; color: #a83b32; }
.pro-inline-operations { margin-top: 14px; }

.pro-icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.pro-icon-action svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.pro-app .tabs + section {
  margin-top: 0;
}

.pro-app .table-wrap {
  border-color: #e3ebea;
}

.pro-app .button {
  background: var(--pro-teal);
}

.pro-app .button:hover {
  background: var(--pro-teal-dark);
}

.pro-app .button.secondary {
  background: #ffffff;
}

.pro-app .button.danger {
  background: var(--pro-red);
}

@media (max-width: 1060px) {
  .pro-app {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .pro-app .workspace {
    padding: 24px;
  }

  .pro-app .topbar {
    padding: 0 24px;
  }

  .pro-overview-grid {
    grid-template-columns: 1fr;
  }

  .pro-growth-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pro-delivery-toolbar { grid-template-columns: minmax(220px, 1fr) 150px 150px; }
  .pro-delivery-toolbar .pro-product-summary { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .auth-shell::before {
    inset: 0;
    opacity: 0.06;
  }

  .auth-panel {
    padding: 24px 20px;
  }

  .pro-app {
    display: block;
  }

  .pro-sidebar {
    position: static;
    min-height: auto;
    padding: 14px;
  }

  .pro-brand {
    padding: 0 5px 13px;
  }

  .pro-store-switcher,
  .pro-sidebar-footer {
    display: none;
  }

  .pro-nav-label {
    display: none;
  }

  .pro-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .pro-nav button {
    flex: 0 0 auto;
    min-height: 37px;
    width: auto;
    padding: 0 9px;
    border-left: 0;
    border-bottom: 3px solid transparent;
  }

  .pro-nav button.active {
    border-left-color: transparent;
    border-bottom-color: var(--pro-yellow);
  }

  .pro-nav button svg {
    width: 16px;
    height: 16px;
  }

  .pro-app .topbar {
    position: static;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 60px;
    padding: 0 15px;
  }

  .pro-app .identity {
    display: none;
  }

  .pro-app .workspace {
    padding: 18px 14px 42px;
    overflow-x: hidden;
  }

  .pro-app .claim-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pro-app .claim-grid > * {
    min-width: 0;
  }

  .pro-app .claim-grid > .button {
    width: 100%;
  }

  .pro-landing {
    grid-template-columns: 1fr;
    padding: 23px 20px;
  }

  .pro-landing h1 {
    font-size: 23px;
  }

  .pro-landing-state {
    justify-content: flex-start;
  }

  .pro-metric-grid {
    grid-template-columns: 1fr;
  }

  .pro-overview-head {
    align-items: stretch;
    flex-direction: column;
  }

  .pro-overview-head .button {
    justify-content: center;
  }

  .pro-server-card {
    grid-template-columns: 1fr;
  }

  .pro-server-card .button {
    width: 100%;
  }

  .pro-product-toolbar {
    grid-template-columns: 1fr;
  }

  .pro-bot-admin-form {
    grid-template-columns: 1fr;
  }

  .pro-onboarding-steps {
    grid-template-columns: 1fr;
  }

  .pro-product-summary {
    text-align: left;
  }

  .pro-gift-tier { grid-template-columns: 1fr; }
  .pro-gift-tier > strong { min-height: 38px; }
  .pro-growth-summary { grid-template-columns: 1fr; }
  .pro-season-card header { flex-direction: column; }
  .pro-season-price { text-align: left; }
  .pro-delivery-toolbar { grid-template-columns: 1fr; }
  .pro-delivery-toolbar .pro-product-summary { grid-column: auto; }
  .pro-overview-deliveries, .pro-delivery-table { padding: 12px; }
}

/* Merchant authentication entry */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(480px, 1.08fr) minmax(520px, 0.92fr);
  min-height: 100svh;
  padding: 0;
  place-items: stretch;
  overflow: hidden;
  background: #f4f7f7;
}

.auth-shell::before,
.auth-shell::after {
  content: none !important;
}

.auth-visual {
  position: relative;
  min-width: 0;
  min-height: 100svh;
  overflow: hidden;
  background: #132126;
  color: #ffffff;
}

.auth-visual-image,
.auth-visual-shade {
  position: absolute;
  inset: 0;
}

.auth-visual-image {
  background-image: url("assets/hero.jpg");
  background-position: 54% center;
  background-size: cover;
  transform: scale(1.015);
}

.auth-visual-shade {
  background: rgba(7, 18, 22, 0.58);
}

.auth-visual-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: clamp(34px, 4.4vw, 72px);
}

.auth-visual-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
}

.auth-visual-brand span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  background: var(--pro-yellow);
  color: #17232d;
  font-size: 13px;
  font-weight: 900;
}

.auth-visual-brand strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 700;
}

.auth-visual-heading {
  max-width: 620px;
  padding: 10vh 0;
}

.auth-visual-heading small {
  display: block;
  margin-bottom: 18px;
  color: #f0c568;
  font-size: 12px;
  font-weight: 800;
}

.auth-visual-heading h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(42px, 4vw, 66px);
  font-weight: 720;
  line-height: 1.12;
}

.auth-visual-heading p {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.7;
}

.auth-visual-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 700;
}

.auth-stage {
  display: flex;
  min-width: 0;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: clamp(40px, 6vw, 96px);
  background: #f4f7f7;
}

.auth-panel {
  width: min(500px, 100%);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.auth-panel .brand {
  gap: 13px;
  margin-bottom: 44px;
}

.auth-panel .brand h2 {
  margin: 0;
  color: var(--pro-ink);
  font-size: 18px;
  font-weight: 760;
}

.auth-panel .brand span {
  display: block;
  margin-top: 3px;
  color: var(--pro-muted);
  font-size: 11px;
}

.auth-heading {
  margin-bottom: 28px;
}

.auth-heading h1 {
  margin: 0;
  color: #15242b;
  font-size: 30px;
  font-weight: 740;
  line-height: 1.25;
}

.auth-heading p {
  margin: 9px 0 0;
  color: var(--pro-muted);
  font-size: 14px;
  line-height: 1.7;
}

.auth-panel .segments {
  min-height: 48px;
  margin-bottom: 22px;
  padding: 4px;
  border-color: #d7e1e3;
  border-radius: 7px;
  background: #eaf0f1;
}

.auth-panel .segments button {
  height: 38px;
  border-radius: 5px;
  font-size: 13px;
}

.auth-panel .form {
  gap: 15px;
}

.auth-panel .field {
  gap: 7px;
  color: #43545d;
  font-size: 12px;
  font-weight: 650;
}

.auth-panel .field input {
  min-height: 46px;
  padding: 11px 13px;
  border-color: #ccd8db;
  border-radius: 6px;
  color: #17232d;
  font-size: 13px;
  font-weight: 400;
}

.auth-panel .field input::placeholder {
  color: #89979d;
}

.auth-panel .field input:focus {
  border-color: var(--pro-teal);
  box-shadow: 0 0 0 3px rgba(11, 125, 112, 0.1);
  outline: 0;
}

.auth-panel .pro-password-field {
  min-height: 46px;
  border-color: #ccd8db;
}

.auth-panel .pro-password-field input,
.auth-panel .pro-password-field button {
  min-height: 44px;
}

.auth-panel .pro-auth-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid #d5e6e3;
  border-left: 3px solid var(--pro-teal);
  border-radius: 5px;
  background: #edf7f5;
  color: #385b5d;
  font-size: 12px;
  line-height: 1.65;
}

.auth-panel .pro-auth-intro svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  color: var(--pro-teal);
}

.auth-panel .auth-submit {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 2px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 750;
}

.auth-panel .auth-submit svg {
  width: 17px;
  height: 17px;
}

.auth-panel .message {
  min-height: 20px;
  margin-top: -5px;
  font-size: 12px;
}

.auth-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #dce4e6;
  color: var(--pro-muted);
  font-size: 11px;
  line-height: 1.55;
}

.auth-support a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--pro-teal-dark);
  font-weight: 700;
}

.auth-support a svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 1120px) {
  .auth-shell {
    grid-template-columns: minmax(400px, 0.82fr) minmax(500px, 1.18fr);
  }

  .auth-visual-heading h1 {
    font-size: 42px;
  }

  .auth-visual-footer span:last-child {
    display: none;
  }

  .auth-stage {
    padding: 54px;
  }
}

@media (max-width: 820px) {
  .auth-shell {
    display: block;
    min-height: 100svh;
    overflow: auto;
  }

  .auth-visual {
    min-height: 188px;
    height: 188px;
  }

  .auth-visual-image {
    background-position: 52% 43%;
  }

  .auth-visual-shade {
    background: rgba(7, 18, 22, 0.52);
  }

  .auth-visual-content {
    min-height: 188px;
    padding: 24px;
  }

  .auth-visual-heading {
    padding: 0;
  }

  .auth-visual-heading small,
  .auth-visual-heading p,
  .auth-visual-footer {
    display: none;
  }

  .auth-visual-heading h1 {
    font-size: 29px;
    line-height: 1.2;
  }

  .auth-stage {
    min-height: calc(100svh - 188px);
    overflow: visible;
    padding: 38px 24px 46px;
  }

  .auth-panel .brand {
    display: none;
  }
}

@media (max-width: 520px) {
  .auth-visual {
    min-height: 144px;
    height: 144px;
  }

  .auth-visual-content {
    min-height: 144px;
    padding: 19px 20px;
  }

  .auth-visual-heading h1 {
    font-size: 23px;
  }

  .auth-visual-brand span {
    width: 38px;
    height: 38px;
    font-size: 11px;
  }

  .auth-stage {
    min-height: calc(100svh - 144px);
    padding: 30px 20px 38px;
  }

  .auth-heading h1 {
    font-size: 25px;
  }

  .auth-support {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
}

@media (min-width: 821px) and (max-height: 760px) {
  .auth-stage {
    align-items: flex-start;
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .auth-panel .brand {
    margin-bottom: 24px;
  }

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

  .auth-visual-heading {
    padding: 5vh 0;
  }
}

.pro-player-center-config textarea {
  font-size: 13px;
  line-height: 1.55;
}

.pro-player-center-notice,
.pro-player-center-schema {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  background: #f7fafc;
  color: var(--muted);
  font-size: 12px;
}

.pro-player-center-notice strong,
.pro-player-center-schema strong { color: var(--text); }
.pro-player-center-schema small { color: var(--muted); }

.pc-page-editors { display: grid; gap: 14px; }
.pc-page-editor { border: 1px solid var(--line); background: #fff; padding: 16px; }
.pc-page-head, .pc-cards-head, .pc-card-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pc-page-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pc-page-toggle { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.pc-page-toggle input { width: 17px; height: 17px; accent-color: var(--blue); }
.pc-page-key { color: var(--muted); font: 12px Consolas, "SFMono-Regular", monospace; }
.pc-page-source { margin-left: auto; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.pc-page-source.ok { border-color: #9bd2b7; background: #f0fbf4; color: var(--green); }
.pc-page-source.warn { border-color: #e6c886; background: #fff9e8; color: var(--amber); }
.pc-page-source.local { background: #f7fafc; }
.pc-page-source-note { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--line); background: #fafbfc; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.pc-page-editor input:disabled, .pc-page-editor textarea:disabled { background: #f1f3f5; color: #7a8491; cursor: not-allowed; }
.pc-page-editor button:disabled { opacity: .45; cursor: not-allowed; }
.pc-page-fields { display: grid; grid-template-columns: 180px minmax(180px, 1fr); gap: 12px; padding: 14px 0; }
.pc-page-description { grid-column: 1 / -1; }
.pc-cards-head { padding: 12px 0 8px; }
.pc-cards-head > div { display: grid; gap: 3px; }
.pc-cards-head small, .pc-no-cards { color: var(--muted); font-size: 12px; }
.pc-card-list { display: grid; gap: 10px; }
.pc-card-editor { border: 1px solid var(--line); background: #f8fafb; padding: 12px; display: grid; gap: 10px; }
.pc-remote-preview { display: grid; gap: 7px; margin: -6px 0 14px; padding: 12px 14px; border: 1px dashed var(--line); background: #fbfcfd; color: var(--muted); font-size: 12px; }
.pc-remote-preview.is-ok { border-left: 3px solid var(--green); }
.pc-remote-preview.is-error { border-left: 3px solid var(--amber); }
.pc-remote-preview > strong { color: var(--text); }
.pc-remote-preview > small { overflow-wrap: anywhere; }
.pc-remote-card { display: grid; gap: 3px; padding-top: 7px; border-top: 1px solid #edf0f3; }
.pc-remote-card strong { color: var(--text); font-size: 12px; }
.pc-remote-card span, .pc-remote-empty { white-space: pre-wrap; overflow-wrap: anywhere; }
.pc-card-editor-head { color: var(--text); font-size: 13px; }
.pc-card-editor .field { margin: 0; }
.pc-card-editor textarea { min-height: 72px; resize: vertical; }
.pc-no-cards { border: 1px dashed var(--line); padding: 14px; }
.pro-player-center-preview { margin-top: 14px; border: 1px solid var(--line); background: #f7fafc; }
.pro-player-center-preview summary { cursor: pointer; padding: 11px 14px; color: var(--muted); font-size: 12px; }
.pro-player-center-preview pre { max-height: 260px; overflow: auto; margin: 0; padding: 14px; border-top: 1px solid var(--line); font: 12px/1.5 Consolas, "SFMono-Regular", monospace; white-space: pre-wrap; word-break: break-word; }

/* Keep the page directory visible while editing one selected page at a time. */
.pc-editor-layout { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 16px; align-items: start; }
.pc-page-directory { position: sticky; top: 78px; border: 1px solid var(--line); background: #fff; }
.pc-directory-head { display: grid; gap: 3px; padding: 14px; border-bottom: 1px solid var(--line); }
.pc-directory-head strong { color: var(--text); font-size: 14px; }
.pc-directory-head small { color: var(--muted); font-size: 11px; }
.pc-page-nav { display: grid; gap: 2px; padding: 6px; max-height: min(68vh, 720px); overflow: auto; }
.pc-page-nav-item { display: grid; gap: 5px; width: 100%; min-height: 54px; padding: 9px 10px; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: 4px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.pc-page-nav-item:hover { background: #f5f8fa; }
.pc-page-nav-item.active { border-color: #c9dce9; border-left-color: var(--blue); background: #eef6fb; }
.pc-page-nav-title { font-size: 13px; font-weight: 700; }
.pc-page-nav-item small { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; }
.pc-page-nav-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-page-nav-source.ok { color: var(--green); }
.pc-page-nav-source.warn { color: var(--amber); }
.pc-page-nav-empty { padding: 14px 10px; color: var(--muted); font-size: 12px; }
.pc-page-editors { min-width: 0; }
.pc-page-entry[hidden] { display: none; }
.pc-page-entry > .pc-remote-preview { margin-top: 10px; }
.pc-page-editor { min-width: 0; }
@media (max-width: 800px) {
  .pc-editor-layout { grid-template-columns: 1fr; }
  .pc-page-directory { position: static; }
  .pc-page-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .pc-page-fields { grid-template-columns: 1fr; }
  .pc-page-description { grid-column: auto; }
}
@media (max-width: 480px) {
  .pc-page-nav { grid-template-columns: 1fr; }
}