/* /create-your-bot/ v2: tools left, builder right; stacks builder-first on phones. Uses site variables, so the light theme follows automatically. */
.cb section { padding: 28px 0; }
.cb .cb-hero { padding-top: 56px; }
.cb-sub { font-size: 1.2rem; color: var(--ink); margin: 10px 0 6px; max-width: 46ch; }
.cb-h2 { font-size: 1.5rem; margin: 0 0 12px; color: var(--ink); }
.cb-h3 { font-size: 1.15rem; margin: 0 0 8px; color: var(--ink); }
.cb-h4 { font-size: 1rem; margin: 20px 0 10px; color: var(--ink); }
.cb-opt { font-size: 0.95rem; font-weight: 400; }
.cb-video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cb-video { margin: 0; }
.cb-video video, .cb-video-box { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--card) center / cover no-repeat; border: 1px solid var(--hairline); display: block; }
.cb-video-box { display: flex; align-items: center; justify-content: center; }
.cb-video-box span { background: rgba(0,0,0,.6); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: .9rem; }
.cb-video figcaption { margin-bottom: 10px; }
.cb-tip-list { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.cb-tip-list li { line-height: 1.5; }
.cb-starters, .cb-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cb-tile { text-align: left; background: var(--card); border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; color: var(--body); font: inherit; }
button.cb-tile, .cb-pick { cursor: pointer; min-height: 44px; }
.cb-pick { background: none; border: 0; padding: 0; text-align: left; color: inherit; font: inherit; width: 100%; }
.cb-tile:hover, .cb-pick:hover .cb-tile-t { border-color: var(--pulse); }
.cb-tile-t { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.cb-tile-p { display: block; font-size: .92rem; line-height: 1.45; }
.cb-tile-m { font-size: .82rem; margin: 8px 0 0; color: var(--mute, #9a9ba0); }
.cb-tile-m a, .cb-credit a, .cb-privacy a, .cb-connect a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(191,87,0,.6); text-underline-offset: 3px; }
.cb-credit { font-size: .85rem; margin-top: 10px; color: var(--mute, #9a9ba0); }
.cb-search input[type=search] { margin: 6px 0 10px; }
.cb-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.cb-chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--body); font: inherit; font-size: .9rem; cursor: pointer; }
.cb-chip:hover, .cb-chip[aria-pressed=true] { border-color: var(--pulse); color: var(--ink); }
.cb-side { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px; }
.cb-field { margin: 0 0 16px; border: 0; padding: 0; }
.cb-label { display: block; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.cb input:not([type=radio]):not([type=checkbox]), .cb textarea, .cb select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--void); color: var(--ink); font: inherit; }
.cb textarea { line-height: 1.5; }
.cb :focus-visible { outline: 2px solid var(--pulse); outline-offset: 2px; }
.cb-radio, .cb-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 18px; cursor: pointer; }
.cb-help { font-size: .85rem; color: var(--mute, #9a9ba0); margin: 4px 0 0; }
.cb-tool { display: grid; grid-template-columns: 1fr 150px auto; gap: 8px; margin-bottom: 8px; }
.cb-x, .cb-mini { min-height: 44px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--hairline); background: transparent; color: var(--body); cursor: pointer; font: inherit; font-size: .85rem; }
.cb-warn { color: #a34a00; font-weight: 600; margin: 10px 0; }
.cb-resting { background: var(--card); border: 1px solid var(--pulse); border-radius: 10px; padding: 12px 14px; color: var(--ink); }
.cb-go { min-height: 48px; margin-top: 6px; }
.cb-go[disabled] { opacity: .5; cursor: not-allowed; }
.cb-privacy { font-size: .85rem; color: var(--mute, #9a9ba0); margin-top: 12px; line-height: 1.5; }
.cb-result { margin-top: 32px; }
.cb-note { color: var(--ink); }
.cb-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.cb-actions .btn { min-height: 44px; }
.cb-stats { font-size: .8rem; color: var(--mute, #9a9ba0); }
.cb-out { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 8px 18px; }
.cb-sec { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.cb-sec:last-child { border-bottom: 0; }
.cb-core { border-left: 3px solid var(--pulse); padding-left: 12px; margin-left: -15px; }
.cb-block { opacity: .9; }
.cb-p-h1 { font-size: 1.3rem; color: var(--ink); margin: 8px 0; }
.cb-p-h2 { font-size: 1rem; color: var(--ink); margin: 6px 0; }
.cb-out p, .cb-out li { line-height: 1.55; }
.cb-fill { background: rgba(191,87,0,.25); color: var(--ink); padding: 0 3px; border-radius: 4px; }
.cb-sec-bar { display: flex; gap: 8px; margin-top: 6px; }
.cb-rw { margin-top: 8px; display: grid; gap: 6px; }
.cb-refine, .cb-practice { margin-top: 28px; }
.cb-fu { margin: 10px 0; }
.cb-fu input { max-width: 260px; }
.cb-test-out { margin-top: 14px; background: var(--card); border: 1px dashed var(--pulse); border-radius: 12px; padding: 14px; }
.cb-safe { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .92rem; }
.cb-safe li { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cb-ok .cb-mark { color: #0f7a3d; font-weight: 700; }
.cb-miss { color: #a34a00; }
html[data-theme="dark"] .cb-warn, html[data-theme="dark"] .cb-miss { color: #ff9a5c; }
.cb-miss .cb-mark { font-weight: 700; }
.cb-connect p { line-height: 1.6; margin: 0 0 10px; }
.cb-legal { font-size: .8rem; color: var(--mute, #9a9ba0); margin: 10px 0 30px; }
.cb-nojs-result { margin-top: 24px; }
@media (max-width: 900px) {
}
@media (max-width: 480px) {
  .cb-tool { grid-template-columns: 1fr 1fr; }
  .cb-tool .cb-x { grid-column: span 2; }
}

/* ---------- v2 layout ---------- */
.cb-layout { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px 32px; align-items: start; }
.cb-helpers { min-width: 0; display: grid; gap: 14px; }
.cb-main { min-width: 0; display: grid; gap: 28px; }
.cb-builder, .cb-output { min-width: 0; }
.cb-panel { background: var(--card); border: 1px solid var(--hairline); border-radius: 14px; padding: 14px 16px; }
.cb-panel .cb-h3 { font-size: 1.02rem; }
.cb-panel .cb-h3 a { color: inherit; text-decoration: underline; text-decoration-color: var(--pulse); text-underline-offset: 3px; }
.cb-starters { display: flex; flex-wrap: wrap; gap: 6px; grid-template-columns: none; }
.cb-starter { min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; text-align: left; }
.cb-starter:hover, .cb-starter:focus-visible { border-color: var(--pulse); }
.cb-helpers .cb-results { grid-template-columns: 1fr; }
.cb-nojs-starters { margin: 8px 0 0 18px; font-size: .9rem; display: grid; gap: 6px; }
.cb-roll > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 32px; margin: 0; }
.cb-roll > summary::-webkit-details-marker { display: none; }
.cb-roll > summary::after { content: "+"; font-weight: 700; color: var(--pulse); font-size: 1.2rem; }
.cb-roll[open] > summary::after { content: "\2212"; }
.cb-roll[open] > summary { margin-bottom: 10px; }
.cb-depts-roll { font-size: .9rem; margin: 4px 0 8px; }
.cb-tip-list { font-size: .92rem; }
.cb-intro { margin-bottom: 16px; }
.cb-explain { background: var(--void-soft); border-left: 3px solid var(--pulse); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; font-size: .9rem; line-height: 1.5; }
.cb-explain p { margin: 0 0 6px; }
.cb-explain p:last-child { margin: 0; }
.cb-help-top { margin: 0 0 6px; }
.cb-go { width: 100%; font-size: 1.05rem; }
.cb-result { margin-top: 0; }
.cb-after { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; margin-top: 20px; align-items: start; }
.cb-after .cb-refine { margin-top: 0; }
.cb-practice { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--hairline); border-top: 4px solid var(--pulse); border-radius: 14px; background: var(--card); }
.cb-practice .cb-video { max-width: 560px; margin: 12px 0; }
.cb-video-panel .cb-video { margin: 0; }
html:not([data-theme="dark"]) .cb-video-box span { background: rgba(0,0,0,.65); }
@media (max-width: 900px) {
  .cb-layout { grid-template-columns: minmax(0, 1fr); }
  .cb-main { order: 1; }
  .cb-helpers { order: 2; }
  .cb-helpers { position: static; max-height: none; overflow: visible; }
  .cb-after { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .cb-practice, .cb-panel { padding: 14px 12px; }
  .cb-actions .btn { flex: 1 1 auto; }
}

.cb-starters{list-style:none;padding:0;margin:0}
.cb-out,.cb-test-text,.cb-tile-p{overflow-wrap:anywhere}

/* ---------- v4 polish (Oct 24, 2026) ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.cb [id], .cb-h2, .cb-practice { scroll-margin-top: 90px; }
/* Natural scrolling: helpers scroll with the page, no nested scrollbar */
.cb-helpers { position: static; max-height: none; overflow: visible; }
/* Ghosted starter text + placeholders */
.cb textarea.cb-ghost, .cb input.cb-ghost { color: var(--mute, #8a8b90); }
.cb textarea.cb-ghost:focus, .cb input.cb-ghost:focus { color: var(--ink); }
.cb input::placeholder, .cb textarea::placeholder { color: var(--mute, #8a8b90); opacity: .85; }
html:not([data-theme="dark"]) .cb textarea.cb-ghost, html:not([data-theme="dark"]) .cb input::placeholder, html:not([data-theme="dark"]) .cb textarea::placeholder { color: #6b6c72; }
html[data-theme="dark"] .cb textarea.cb-ghost, html[data-theme="dark"] .cb input::placeholder, html[data-theme="dark"] .cb textarea::placeholder { color: #9c9da3; }
/* Tighter form with light grouping */
.cb-builder .cb-field { margin: 0 0 14px; }
.cb-builder .cb-group-start { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.cb-builder fieldset.cb-group-start { padding-top: 14px; }
.cb-intro { margin-bottom: 12px; }
.cb-resting { margin: 10px 0 0; padding: 10px 12px; font-size: .92rem; }
.cb-privacy { margin-top: 8px; }
/* Test your bot: compact card, video same size as left helper video */
.cb .cb-practice { margin-top: 0; padding: 16px 18px; }
.cb-practice .cb-h2 { margin-bottom: 6px; }
.cb-practice-help { margin: 0 0 10px; }
.cb-practice .cb-video { max-width: 340px; width: 100%; margin: 0 0 12px; }
.cb-practice .cb-video .cb-h4 { margin: 6px 0 4px; font-size: .98rem; }
.cb-practice .cb-video figcaption p { margin: 0; font-size: .88rem; }
.cb-practice .cb-video video, .cb-practice .cb-video-box { max-width: 340px; }
.cb-practice-box { margin-top: 4px; }
.cb-practice-box textarea { margin-bottom: 4px; }
/* Jump nav + back to top */
.cb .cb-jump { padding: 0 0 4px; font-size: .92rem; }
.cb-jump .wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cb-jump a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--pulse); text-underline-offset: 3px; }
.cb-top { position: fixed; right: 18px; bottom: 18px; z-index: 20; padding: 10px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--pulse); color: var(--ink); font-size: .88rem; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity .2s; }
.cb-top.cb-top-on { opacity: 1; pointer-events: auto; }