<!-- GENERATED by shared/brand/sync-brand.mjs for brand "int". Do not hand-edit; edit shared/brand/brands/ and re-run the sync. -->
/* ============================================================================
 * Orbit — Brand skin (shared engine, brand-agnostic)
 * ----------------------------------------------------------------------------
 * The engine pushes every token from the brand record onto :root as a CSS
 * custom property, so this file only holds the rules a token cannot express:
 * type, shape, motion, and the two brand-signature surfaces.
 *
 * Everything is scoped to html[data-brand="..."] / [data-brand-family="..."],
 * so the two faces can never bleed into each other. Append-only: no selector
 * here restyles an existing shell class.
 * ========================================================================== */

/* --------------------------------------------------------------- shared base */

html[data-brand] body {
  font-family: var(--brand-font, "Segoe UI", Inter, system-ui, sans-serif);
  background-color: var(--bg);
  color: var(--text);
}

html[data-brand] .brand-progress {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-active);
  overflow: hidden;
}

html[data-brand] .brand-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-lo), var(--accent));
  transition: width 260ms ease-out;
}

/* ==========================================================================
 * ORBIT (international) — the companion. Dark, minimal, quiet chrome.
 * ======================================================================== */

html[data-brand="int"] .brand-journey {
  display: none; /* tool-family brands get no gamified strip */
}

html[data-brand="int"] #sendBtn {
  background: linear-gradient(135deg, var(--accent), var(--accent-lo));
  box-shadow: 0 0 0 1px var(--accent-line), 0 8px 20px var(--accent-glow);
}

html[data-brand="int"] header {
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(140%) blur(8px);
}

html[data-brand="int"] .app-name {
  font-weight: 600;
  letter-spacing: 0.02em;
}

html[data-brand="int"] .msg {
  border-radius: var(--brand-radius, 16px);
}

/* ==========================================================================
 * QIMING (China market) — the mentor. Warm, gamified, a journey you can see.
 * ======================================================================== */

html[data-brand="cn"] {
  --brand-progress: #7bd88f;
}

/* Atmospheric warmth behind the work, so the app reads as a study room rather
 * than a terminal. */
html[data-brand="cn"] body {
  background-image:
    radial-gradient(1100px 520px at 12% -10%, rgba(255, 180, 84, 0.10), transparent 60%),
    radial-gradient(900px 480px at 92% 8%, rgba(123, 216, 143, 0.08), transparent 62%);
  background-attachment: fixed;
}

html[data-brand="cn"] header {
  border-bottom: 1px solid var(--line);
}

html[data-brand="cn"] .app-name {
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* The journey strip: stages + progress, mounted by the engine under <header>. */
html[data-brand="cn"] .brand-journey {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-raise), transparent);
}

html[data-brand="cn"] .brand-stage {
  font-size: 12px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  opacity: 0.62;
  white-space: nowrap;
}

html[data-brand="cn"] .brand-stage.is-current {
  opacity: 1;
  color: #2a1a06;
  background: linear-gradient(135deg, var(--accent-hi), var(--accent));
  border-color: var(--accent);
  font-weight: 600;
  box-shadow: 0 4px 14px var(--accent-glow);
}

html[data-brand="cn"] .brand-journey .brand-progress {
  flex: 1 1 120px;
  min-width: 90px;
  background: var(--brand-progress-soft, rgba(123, 216, 143, 0.14));
}

html[data-brand="cn"] .brand-journey .brand-progress-fill {
  background: linear-gradient(90deg, var(--brand-progress, #7bd88f), var(--accent));
}

html[data-brand="cn"] #sendBtn {
  background: linear-gradient(135deg, var(--accent-hi), var(--accent));
  color: #2a1a06;
  box-shadow: 0 0 0 1px var(--accent-line), 0 8px 20px var(--accent-glow);
}

html[data-brand="cn"] .msg {
  border-radius: var(--brand-radius, 20px);
}

/* Answer bubbles read as a mentor's notebook page: warm, generous, calm. */
html[data-brand="cn"] .msg.bot,
html[data-brand="cn"] .msg.assistant {
  border: 1px solid var(--line);
  background: var(--bg-raise);
}

html[data-brand="cn"] .pro-chip {
  background: linear-gradient(135deg, var(--accent-hi), var(--accent));
  color: #2a1a06;
}

@media (prefers-reduced-motion: reduce) {
  html[data-brand] .brand-progress-fill {
    transition: none;
  }
}

@media (max-width: 520px) {
  html[data-brand="cn"] .brand-journey {
    padding: 8px 12px;
    gap: 6px;
  }
  html[data-brand="cn"] .brand-stage {
    font-size: 11px;
    padding: 5px 9px;
  }
}