:root {
  --yds-canvas: #f6f7f9;
  --yds-surface: #ffffff;
  --yds-surface-alt: #f1f4f8;
  --yds-ink: #15171c;
  --yds-text: #20232b;
  --yds-muted: #5f6876;
  --yds-faint: #7b8493;
  --yds-border: #dce1ea;
  --yds-border-strong: #bfc7d4;
  --yds-navy: #182235;
  --yds-blue: #2454b8;
  --yds-blue-hover: #1c4496;
  --yds-amber: #b88718;
  --yds-amber-soft: #fff4d7;
  --yds-green: #15803d;
  --yds-green-soft: #eaf8ef;
  --yds-red: #b42318;
  --yds-red-soft: #feedea;
  --yds-shadow: 0 16px 42px rgba(24, 34, 53, 0.08);
  --yds-radius: 8px;
  --yds-radius-lg: 12px;
}

html {
  background: var(--yds-canvas);
}

body {
  background: var(--yds-canvas) !important;
  color: var(--yds-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: #cfe0ff;
  color: var(--yds-ink);
}

:where(p, li, td, dd, figcaption, small, label, input, select, textarea, summary) {
  font-size: max(1rem, 16px);
  line-height: 1.55;
}

:where(button, a, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])) {
  min-height: 44px;
}

a {
  color: var(--yds-blue) !important;
}

a:visited {
  color: #553c9a !important;
}

a:hover {
  color: var(--yds-blue-hover) !important;
}

main,
.wrap {
  width: min(1180px, calc(100% - 36px)) !important;
  max-width: 1180px !important;
}

main {
  padding-top: 74px !important;
}

h1,
h2,
h3,
.section-title {
  color: var(--yds-ink) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

h1 {
  font-size: clamp(40px, 5.8vw, 72px) !important;
  line-height: 0.98 !important;
  font-weight: 760 !important;
}

h2,
.section-title {
  font-size: clamp(26px, 3vw, 40px) !important;
  line-height: 1.08 !important;
  font-weight: 740 !important;
}

h3 {
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 760 !important;
}

p,
.lead,
.section-desc,
.desc,
.note,
.mini {
  color: var(--yds-muted) !important;
}

.lead {
  font-size: clamp(18px, 2vw, 21px) !important;
  line-height: 1.55 !important;
}

.eyebrow,
.tag,
.section-count,
.hero-d .ct .l {
  color: var(--yds-blue) !important;
  letter-spacing: 0.08em !important;
}

.hero,
.hero-d {
  min-height: auto !important;
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.panel,
.card,
.item,
.path,
.step,
.visual,
.file,
.hero-card,
.yds-callout,
.yds-receipt {
  color: var(--yds-text) !important;
  background: var(--yds-surface) !important;
  border: 1px solid var(--yds-border) !important;
  border-radius: var(--yds-radius) !important;
  box-shadow: var(--yds-shadow) !important;
}

.card,
.item,
.step,
.file {
  box-shadow: none !important;
}

.card:hover,
.item:hover,
.path:hover {
  border-color: var(--yds-border-strong) !important;
  box-shadow: var(--yds-shadow) !important;
}

.grid {
  gap: 14px !important;
}

.path {
  align-items: start !important;
  grid-template-columns: 120px minmax(0, 1fr) 178px !important;
}

.price,
.hero-d .ct .n {
  color: var(--yds-navy) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 780 !important;
}

.btn,
.btn-p,
button.btn,
input[type="submit"] {
  min-height: 44px !important;
  border-radius: var(--yds-radius) !important;
  background: var(--yds-blue) !important;
  border: 1px solid var(--yds-blue) !important;
  color: #fff !important;
  font-weight: 760 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.btn:hover,
.btn-p:hover,
button.btn:hover {
  background: var(--yds-blue-hover) !important;
  border-color: var(--yds-blue-hover) !important;
  color: #fff !important;
  transform: none !important;
}

.btn.secondary,
.btn-g {
  background: var(--yds-surface) !important;
  border-color: var(--yds-border-strong) !important;
  color: var(--yds-ink) !important;
}

.yd-cta,
.yd-cta:visited {
  background: var(--yds-blue) !important;
  border: 1px solid var(--yds-blue) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.yd-cta:hover {
  background: var(--yds-blue-hover) !important;
  border-color: var(--yds-blue-hover) !important;
  color: #ffffff !important;
}

.warning,
.yds-warning {
  background: var(--yds-amber-soft) !important;
  border: 1px solid rgba(184, 135, 24, 0.28) !important;
  border-left: 4px solid var(--yds-amber) !important;
  color: #684a0b !important;
}

.ok,
.yds-success {
  color: var(--yds-green) !important;
}

label {
  color: var(--yds-ink) !important;
  font-weight: 740 !important;
}

input,
select,
textarea {
  background: #fff !important;
  color: var(--yds-ink) !important;
  border: 1px solid var(--yds-border-strong) !important;
  border-radius: var(--yds-radius) !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(36, 84, 184, 0.28) !important;
  outline-offset: 2px !important;
  border-color: var(--yds-blue) !important;
}

[style*="color:#333"],
[style*="color: #333"],
[style*="color:#444"],
[style*="color: #444"],
[style*="color:#555"],
[style*="color: #555"],
[style*="color:#666"],
[style*="color: #666"],
[style*="color:#777"],
[style*="color: #777"],
[style*="color:#888"],
[style*="color: #888"],
[style*="color:#999"],
[style*="color: #999"],
[style*="color:var(--dim)"],
[style*="color: var(--dim)"],
[style*="color:var(--sec)"],
[style*="color: var(--sec)"] {
  color: var(--yds-muted) !important;
}

[style*="background:#0"],
[style*="background: #0"],
[style*="background:#1"],
[style*="background: #1"],
[style*="background:var(--card)"],
[style*="background: var(--card)"],
[style*="background:var(--panel)"],
[style*="background: var(--panel)"] {
  background: var(--yds-surface) !important;
  color: var(--yds-text) !important;
  border-color: var(--yds-border) !important;
}

#credential-fields {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--yds-border);
}

#credential-fields h3 {
  margin: 0 !important;
}

.yds-field-help {
  display: block;
  color: var(--yds-muted);
  font-size: 12px;
  line-height: 1.45;
  margin-top: -4px;
}

.yds-schema-summary {
  display: grid;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 14px;
  background: var(--yds-surface-alt);
  border: 1px solid var(--yds-border);
  border-radius: var(--yds-radius);
}

.yds-schema-summary strong {
  color: var(--yds-ink);
}

.section {
  border-top-color: var(--yds-border) !important;
}

.topnav {
  background: var(--yds-surface);
  border-bottom: 1px solid var(--yds-border);
}

.cats a {
  background: var(--yds-surface) !important;
  border-color: var(--yds-border) !important;
  color: var(--yds-muted) !important;
}

.cats a:hover {
  background: var(--yds-surface-alt) !important;
  color: var(--yds-blue) !important;
}

.section-icon {
  display: none !important;
}

code,
pre {
  color: var(--yds-ink) !important;
  background: var(--yds-surface-alt) !important;
  border-radius: 6px;
}

.bar {
  background: linear-gradient(90deg, var(--yds-blue), var(--yds-green), var(--yds-amber)) !important;
}

/* Builder app: operational tool surface */
body.has-site-shell main {
  padding-top: 96px !important;
}

.page {
  max-width: 1120px !important;
  padding: 2.5rem 1.5rem 4rem !important;
}

.logo {
  background: var(--yds-surface) !important;
  border: 1px solid var(--yds-border) !important;
  border-radius: var(--yds-radius-lg) !important;
  padding: 12px 14px !important;
  margin-bottom: 1.5rem !important;
}

.lm {
  background: rgba(36, 84, 184, 0.08) !important;
  color: var(--yds-blue) !important;
  border-color: rgba(36, 84, 184, 0.24) !important;
}

.lt,
.hero h1 span,
.sc-title,
.edu-phase,
.cfg-label,
.fw-tag,
.mc-tag {
  color: var(--yds-blue) !important;
}

.hero {
  max-width: 760px !important;
  margin-bottom: 1.75rem !important;
}

.hero h1 {
  color: var(--yds-ink) !important;
  font-size: 42px !important;
  letter-spacing: 0 !important;
}

.hero p {
  color: var(--yds-muted) !important;
  font-size: 16px !important;
  max-width: 700px !important;
}

.mode-card,
.fw-card,
.model-chip,
.preview,
.scorecard,
.rc,
.edu-card,
.pi,
#oie-panel,
.im-panel,
#cfg-build-scope-preview,
.tbanner {
  background: var(--yds-surface) !important;
  border: 1px solid var(--yds-border) !important;
  box-shadow: var(--yds-shadow) !important;
}

.mode-card:hover,
.fw-card:hover,
.mode-card.selected,
.fw-card.selected,
.vt-btn.active,
.model-chip.selected {
  border-color: var(--yds-blue) !important;
  background: var(--yds-surface-alt) !important;
  color: var(--yds-blue) !important;
}

.big-input,
.ti,
.im-url-input,
.im-convo-input input,
#oie-panel textarea,
#oie-panel input,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
select,
textarea {
  width: 100%;
  min-height: 42px;
  background: var(--yds-surface) !important;
  color: var(--yds-text) !important;
  border: 1px solid var(--yds-border-strong) !important;
  border-radius: var(--yds-radius) !important;
  font: inherit !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  padding: 10px 12px !important;
  outline: none !important;
}

textarea,
.big-input {
  min-height: 124px;
  resize: vertical;
}

#oie-panel textarea {
  min-height: 92px !important;
}

.big-input:focus,
.ti:focus,
.im-url-input:focus,
.im-convo-input input:focus,
#oie-panel textarea:focus,
#oie-panel input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--yds-blue) !important;
  box-shadow: 0 0 0 3px rgba(36, 84, 184, 0.14) !important;
}

.im-btn,
.vt-btn,
.lset,
.launch,
.tsave,
.im-convo-input button {
  min-height: 40px;
  border-radius: var(--yds-radius) !important;
  border: 1px solid var(--yds-border-strong) !important;
  background: var(--yds-surface) !important;
  color: var(--yds-text) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.launch,
.tsave,
.im-convo-input button {
  background: var(--yds-blue) !important;
  border-color: var(--yds-blue) !important;
  color: #ffffff !important;
}

.im-btn:hover,
.vt-btn:hover,
.lset:hover {
  border-color: var(--yds-blue) !important;
  color: var(--yds-blue) !important;
}

#oie-output,
.cmd,
.edu-file-preview {
  background: var(--yds-surface-alt) !important;
  border: 1px solid var(--yds-border) !important;
  color: var(--yds-blue) !important;
}

.char-hint,
.im-status,
.tnote,
.ps,
.cfg-desc,
.mode-card p,
.fw-card p,
.edu-body,
.edu-tip,
.sc-label {
  color: var(--yds-muted) !important;
}

.build-layout {
  grid-template-columns: minmax(0, 1fr) 300px !important;
}

@media (max-width: 860px) {
  main,
  .wrap {
    width: min(100% - 28px, 1180px) !important;
  }

  main {
    padding-top: 72px !important;
  }

  .path {
    grid-template-columns: 1fr !important;
  }
}