/* Shared tokens are loaded inside every iframe, not only the portal. */
:root {
  color-scheme: light;
  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: var(--font-ui);
  --bg: #f4f6f8;
  --paper: #fff;
  --paper-soft: #f7f8fa;
  --panel: #fff;
  --panel-soft: #f7f8fa;
  --panel-tint: #fff4f2;
  --surface: #fff;
  --surface-soft: #f7f8fa;
  --ink: #242a31;
  --text: #242a31;
  --navy: #242a31;
  --muted: #69737f;
  --line: #e1e6eb;
  --line-strong: #c7cfd7;
  --red: #c43c36;
  --red-strong: #a8302c;
  --red-soft: #fff1ee;
  --accent: var(--red);
  --accent-strong: var(--red-strong);
  --accent-soft: var(--red-soft);
  --green: #287564;
  --green-soft: #edf6f2;
  --amber: #966216;
  --amber-soft: #fbf5e9;
  --blue: #376da5;
  --blue-soft: #eef4fa;
  --shadow: 0 8px 28px rgba(35, 49, 61, .07);
  --shadow-soft: 0 2px 6px rgba(35, 49, 61, .04);
  --focus-ring: 0 0 0 3px rgba(196, 60, 54, .15);
  --radius: 8px;
}
@media screen {
  html, body { color: var(--text); background: var(--bg); font-family: var(--font-ui); font-size: 14px; line-height: 1.65; }
  *, *::before, *::after { box-sizing: border-box; letter-spacing: 0 !important; }
  h1, h2, h3, h4, button, input, select, textarea { font-family: var(--font-ui) !important; }
  h1, h2, h3, h4 { color: var(--text); font-weight: 650; }
  button, input, select, textarea { font-size: 14px; }
  button { -webkit-tap-highlight-color: transparent; }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  :where(.primary-button, .btn-primary, .button-primary, .button.primary, .secondary-button, .btn-secondary, .button-secondary, .button.secondary, .ghost-button, .btn-ghost) { min-height: 40px; border-radius: 6px; padding: 9px 16px; font-weight: 600; box-shadow: none; font-size: 14px; }
  .primary-button, .btn-primary, .button-primary, .button.primary { color: #fff; background: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
  :is(.primary-button, .btn-primary, .button-primary, .button.primary):hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: none; }
  .secondary-button, .btn-secondary, .button-secondary, .button.secondary { background: #fff; color: var(--text); border: 1px solid var(--line-strong); box-shadow: none; }
  :is(.secondary-button, .btn-secondary, .button-secondary, .button.secondary):hover:not(:disabled) { background: var(--paper-soft); border-color: var(--muted); }
  .ghost-button, .btn-ghost { background: transparent; color: var(--muted); box-shadow: none; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { border-color: var(--line-strong); border-radius: 6px; background-color: #fff; color: var(--text); }
  input::placeholder, textarea::placeholder { color: #84909a; }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
  .app-artwork img, .tool-brand-icon, .brand-mark img { object-fit: contain; object-position: center; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
}