/* Shared Flowstream palette for the service and guide pages. */
:root,
body,
body.shop-home {
  --background: #f4f8fd;
  --sidebar: #edf4fb;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --ink: #10213a;
  --muted: #617087;
  --line: #dce5ef;
  --line-strong: #b9c8d9;
  --mint: #0d6efd;
  --mint-soft: #dff7fb;
  --blue: #0d6efd;
  --blue-soft: #e6efff;
  --focus: #0d6efd;
  --teal: #118fe9;
  --teal-dark: #075ebc;
  --teal-soft: #e3f4ff;
  --stage: #071f3b;
  --stage-ink: #f7fbff;
  --stage-muted: #ccdaea;
  --shadow: 0 18px 42px #071f3b0d;
  --flow-accent: #178cf6;
  --flow-accent-hover: #7048ff;
  --flow-accent-ink: #ffffff;
  --flow-relay: #e5f8fc;
  --flow-business: #ece9ff;
}

body { color: var(--ink); background: var(--background); }
::selection,
.shop-home ::selection,
.guide-layout ::selection { color: #ffffff; background: #0d6efd; }
a:focus-visible,
.sidebar a:focus-visible { outline-color: var(--focus); }

.shop-home .brand-logo { background: transparent; }
.shop-home .brand-logo img,
.portal-logo img { object-fit: contain; mix-blend-mode: normal; }
.portal-logo,
.portal-logo img { width: 36px; height: 36px; }

.shop-home .card-action .primary-link {
  color: var(--flow-accent-ink);
  background: var(--flow-accent);
  border-color: var(--flow-accent);
}
.shop-home .card-action .primary-link:hover {
  color: var(--flow-accent-ink);
  background: var(--flow-accent-hover);
  border-color: var(--flow-accent-hover);
}
.shop-home .gpt-pass,
.shop-home .gpt-pass:hover { background: #31452e; color: #fffbed; }
.shop-home .gpt-pass::after { border-color: #b8a74d; }
.shop-home .hero-stage .claude-pass { background: #f6e6b9; color: #3d2b0b; }
.shop-home .relay-card,
.shop-home .relay-contact { background: var(--flow-relay); }
.shop-home .business-contact { background: var(--flow-business); }
.shop-home .business-contact .wechat-contact p,
.shop-home .business-contact .contact-card-heading p { color: var(--muted); }
.shop-home .wechat-icon { background: #e4d6b5; color: #6c4b10; }

.sidebar { background: var(--sidebar); color: var(--ink); border-color: var(--line); }
.portal-brand strong,
.menu-item { color: var(--ink); }
.portal-brand small,
.nav-caption,
.sidebar-footer p,
.sidebar-footer a { color: var(--muted); }
.sidebar-footer { border-color: var(--line); }
.menu-item:hover { color: var(--teal-dark); background: var(--teal-soft); }
.menu-item.is-active { color: var(--teal-dark); background: #dceeff; }
.workspace,
.embed-shell,
.embed-toolbar,
.embed-stage iframe { background: var(--surface); }
.embed-stage { background: var(--background); }
.open-external { border-color: var(--line-strong); }
.frame-loading { color: var(--muted); background: #f4f8fdf5; }
.frame-loading > span { border-color: var(--line-strong); border-top-color: var(--teal); }

.guide { color: var(--ink); }
.guide h1,
.guide h2,
.guide h4 { color: var(--ink); }
.guide h3,
.guide a,
.guide .word-teal,
.guide .word-amber { color: var(--teal-dark); }
.guide blockquote { border-color: var(--line); background: #f4f8fd; }
.guide .note-info { border-color: #bddff4; background: #eaf7ff; }
.guide .note-warning { border-color: #e7cf89; background: #fff2c8; }
.guide .note-success { border-color: #b9e1d9; background: #edf9f6; }
.guide .word-highlight { background: #d8efff; }
.guide .word-blue-highlight { background: #0d6efd; color: #ffffff; }
.guide .word-shade { background: #e8f0f8; }
.guide th { background: #e2effd; color: #075ebc; }
.price-tables th { background: #071f3b; color: #ffffff; }
.price-tables > :nth-child(2) th,
.price-tables > :nth-child(3) th { background: #435331; color: #fffbed; }
.guide pre { background: #edf4fb; }
.guide-toc summary,
.guide-toc .toc-level-2 { color: var(--teal-dark); }
.guide-toc a { color: var(--muted); }
.guide-toc a:hover,
.guide-toc a[aria-current] { background: var(--teal-soft); color: var(--teal-dark); }
.guide-toc summary:focus-visible,
.guide-toc a:focus-visible,
.guide .table-scroll:focus-visible,
.guide :focus-visible { outline-color: var(--focus); }
.guide-toc nav { scrollbar-color: var(--line-strong) transparent; }

@media (max-width: 959px) {
  .guide-toc,
  .guide-toc nav { background: var(--surface); }
}