.platform-guide-button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  margin-left: auto;
  padding: .52rem .78rem;
  border: 1px solid #58708b;
  border-radius: .65rem;
  background: #163754;
  color: #fff;
  font: 750 .78rem/1 Inter, system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.platform-guide-button span {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #1bd6c5;
  color: #09273f;
  font-weight: 900;
}

.platform-guide-button + .account-controls { margin-left: 0; }

.platform-guide-button:hover,
.platform-guide-button:focus-visible {
  border-color: #1bd6c5;
  outline: 3px solid rgba(27, 214, 197, .24);
  outline-offset: 2px;
}

.platform-guide-shell {
  width: min(900px, calc(100vw - 2rem));
  max-height: min(760px, calc(100dvh - 2rem));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.25rem;
  background: #fff;
  color: #102638;
  box-shadow: 0 28px 90px rgba(3, 24, 40, .35);
}

.platform-guide-shell::backdrop { background: rgba(4, 24, 39, .78); }

.platform-guide-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  background: #09273f;
  color: #fff;
}

.platform-guide-head .eyebrow { color: #62e3da; }
.platform-guide-head h2 { margin: .2rem 0 0; font: 700 1.65rem/1.15 Georgia, serif; }
.platform-guide-close {
  margin-left: auto;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid #49677f;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}

.platform-guide-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 480px;
  max-height: calc(min(760px, 100dvh - 2rem) - 94px);
}

.platform-guide-steps {
  padding: 1.1rem;
  overflow: auto;
  background: #f1f6fa;
  border-right: 1px solid #dce6ed;
}

.platform-guide-step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .75rem;
  border: 0;
  border-radius: .7rem;
  background: transparent;
  color: #486071;
  text-align: left;
  font: 750 .84rem/1.3 Inter, system-ui, sans-serif;
  cursor: pointer;
}

.platform-guide-step + .platform-guide-step { margin-top: .25rem; }
.platform-guide-step span {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #c5d3dd;
  border-radius: 50%;
  background: #fff;
  color: #3a6075;
}
.platform-guide-step.active { background: #fff; color: #09273f; box-shadow: 0 5px 16px rgba(24, 60, 84, .08); }
.platform-guide-step.active span { border-color: #1bd6c5; background: #1bd6c5; color: #09273f; }

.platform-guide-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2rem;
  overflow: auto;
}
.platform-guide-count { margin: 0 0 .55rem; color: #168f88; font-size: .75rem; font-weight: 850; letter-spacing: .12em; }
.platform-guide-content h3 { margin: 0; color: #09273f; font: 700 clamp(1.75rem, 4vw, 2.45rem)/1.1 Georgia, serif; }
.platform-guide-content > p { max-width: 620px; color: #526b7a; font-size: 1rem; line-height: 1.65; }
.platform-guide-checklist { display: grid; gap: .7rem; margin: .5rem 0 1.5rem; padding: 0; list-style: none; }
.platform-guide-checklist li { position: relative; padding-left: 1.75rem; color: #294757; }
.platform-guide-checklist li::before { content: "✓"; position: absolute; left: 0; color: #078c81; font-weight: 900; }
.platform-guide-tip { padding: .9rem 1rem; border-left: 4px solid #1bd6c5; border-radius: .5rem; background: #edf9f8; color: #294f5c; font-size: .9rem; }
.platform-guide-actions { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding-top: 1.5rem; }
.platform-guide-actions button { min-height: 46px; width: auto; }
.platform-guide-actions .platform-guide-next { margin-left: auto; }

.platform-tour-launch {
  border-color: #168f88;
  color: #087b72;
  background: #edfbf9;
}

.platform-tour-spotlight {
  position: fixed;
  z-index: 99998;
  pointer-events: none;
  border: 3px solid #1bd6c5;
  border-radius: .9rem;
  box-shadow: 0 0 0 9999px rgba(3, 22, 36, .73), 0 0 0 7px rgba(27, 214, 197, .2);
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}

.platform-tour-card {
  position: fixed;
  z-index: 99999;
  width: min(370px, calc(100vw - 1.5rem));
  padding: 1.15rem;
  border-radius: 1rem;
  background: #fff;
  color: #102638;
  box-shadow: 0 22px 70px rgba(2, 20, 34, .42);
}

.platform-tour-card .eyebrow { margin-bottom: .45rem; color: #078c81; }
.platform-tour-card h3 { margin: 0; color: #09273f; font: 700 1.4rem/1.2 Georgia, serif; }
.platform-tour-card p:not(.eyebrow) { margin: .65rem 0 1rem; color: #526b7a; font-size: .92rem; line-height: 1.55; }
.platform-tour-progress { height: 5px; margin-bottom: 1rem; overflow: hidden; border-radius: 999px; background: #e4edf2; }
.platform-tour-progress span { display: block; height: 100%; background: #1bd6c5; transition: width .2s ease; }
.platform-tour-actions { display: flex; align-items: center; gap: .5rem; }
.platform-tour-actions button { width: auto; min-height: 42px; }
.platform-tour-actions .platform-tour-next { margin-left: auto; }
.platform-tour-skip { border: 0; background: transparent; color: #657986; font-weight: 750; cursor: pointer; }

body.platform-tour-active { scroll-behavior: smooth; }

@media (max-width: 800px) {
  .topbar { gap: .65rem; }
  .platform-guide-button { margin-left: auto; padding: .5rem; }
  .platform-guide-button:not(:focus) { font-size: 0; gap: 0; }
  .platform-guide-button span { font-size: .8rem; }
  .account-controls { margin-left: 0; }
  .platform-guide-shell { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .platform-guide-head { padding: 1rem; }
  .platform-guide-head h2 { font-size: 1.35rem; }
  .platform-guide-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100dvh - 76px); }
  .platform-guide-steps { display: flex; gap: .35rem; padding: .7rem; overflow-x: auto; border: 0; border-bottom: 1px solid #dce6ed; }
  .platform-guide-step { flex: 0 0 auto; width: 2.55rem; height: 2.55rem; padding: 0; display: grid; place-items: center; }
  .platform-guide-step b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .platform-guide-content { padding: 1.35rem 1rem max(1rem, env(safe-area-inset-bottom)); }
  .platform-guide-actions { position: sticky; bottom: 0; margin-inline: -1rem; padding: .8rem 1rem max(.8rem, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #dce6ed; }
  .platform-guide-actions button { padding-inline: .85rem; }
  .platform-tour-card { left: .75rem !important; right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); top: auto !important; width: auto; }
  .platform-tour-spotlight { border-radius: .65rem; }
}

@media (max-width: 520px) {
  .brand > span:last-child { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .platform-guide-content h3 { font-size: 1.65rem; }
  .platform-guide-jump { font-size: .78rem; }
}