@import 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap';

/* ClaviSay 2.0 visual skin. Layout and image geometry remain owned by legacy Tool CSS. */
.vb-page {
  --tool-2-font: 'Poppins', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --tool-2-text: rgb(0 0 0 / 80%);
  --tool-2-text-strong: rgb(0 0 0 / 90%);
  --tool-2-text-muted: rgb(0 0 0 / 60%);
  --tool-2-primary: #9583ed;
  --tool-2-primary-hover: #8875e2;
  --tool-2-primary-active: #7b68d6;
  --tool-2-link: #7366fe;
  --tool-2-primary-soft: rgb(149 131 237 / 10%);
  --tool-2-primary-softer: rgb(149 131 237 / 6%);
  --tool-2-surface: #ffffff;
  --tool-2-surface-warm: #fdf9f3;
  --tool-2-border: rgb(0 0 0 / 8%);
  --tool-2-border-strong: rgb(0 0 0 / 10%);
  --tool-2-youtube: #fcd669;
  --tool-2-youtube-soft: rgb(252 210 74 / 20%);
  --tool-2-youtube-softer: rgb(252 210 74 / 10%);
  --tool-2-danger: #e8574a;
  --tool-2-danger-soft: rgb(232 87 74 / 10%);
  --tool-2-success: #2f9f52;
  --tool-2-success-soft: #ecf9ef;
  --tool-2-warning: #8b6500;
  --tool-2-warning-soft: var(--tool-2-youtube-soft);
  --tool-2-focus: rgb(149 131 237 / 28%);
  --tool-2-shadow: 0 4px 18px rgb(0 0 0 / 4%);
  --tool-2-shadow-float: 0 16px 48px rgb(0 0 0 / 12%);
  --tool-2-button-primary-bg: var(--tool-2-primary);
  --tool-2-button-primary-hover-bg: var(--tool-2-primary-hover);
  --tool-2-button-primary-active-bg: var(--tool-2-primary-active);
  --tool-2-button-secondary-bg: var(--tool-2-primary-soft);
  --tool-2-button-secondary-hover-bg: rgb(149 131 237 / 16%);
  --tool-2-button-ghost-hover-bg: var(--tool-2-primary-soft);
  --tool-2-button-danger-bg: var(--tool-2-danger);
  --vb-bg: var(--tool-2-surface-warm);
  --vb-surface: var(--tool-2-surface);
  --vb-text: var(--tool-2-text);
  --vb-muted: var(--tool-2-text-muted);
  --vb-border: var(--tool-2-border);
  --vb-primary: var(--tool-2-primary);
  --vb-primary-soft: var(--tool-2-primary-soft);
  --vb-shadow: var(--tool-2-shadow);
  --font-body: var(--tool-2-font);
  color: var(--tool-2-text);
  background: var(--tool-2-surface-warm);
  font-family: var(--tool-2-font);
}

.vb-page :where(h1, h2, h3, h4, h5, h6),
.vb-page.vb-page
  :where(
    .vb-hero__title,
    .ytv-tool__title,
    .ytv-panel-title,
    .vq-tool__title,
    .vq-step-heading__label,
    .vq-result__title,
    .vq-recent__title
  ) {
  color: var(--tool-2-text-strong);
  font-family: var(--tool-2-font);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* The legacy section stylesheet is injected after the public link in the React build. */
.vb-page.vb-page .vb-hero h1,
.vb-page.vb-page .vb-seo-sections h2,
.vb-page.vb-page .vb-seo-sections h3,
.vb-page.vb-page .ytv-panel-title,
.vb-page.vb-page .vq-step-heading__label {
  color: var(--tool-2-text-strong);
  font-family: var(--tool-2-font);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.vb-page .vb-demo-header .vb-panel-title,
.vb-page .vq-tool__title,
.vb-page .ytv-tool__title {
  font-family: var(--font-body);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.08;
}

.vb-page :where(p, li, dd, blockquote),
.ytv-tool :where(.ytv-message, .ytv-video-card span, .ytv-vocab-card p, .ytv-vocab-card blockquote),
.vq-tool :where(.vq-message, .vq-stats, .vq-field-help) {
  color: var(--tool-2-text-muted);
}

.vb-page :where(a:not(.vb-primary-cta):not(.vb-secondary-cta), .ytv-text-button) {
  color: var(--tool-2-link);
  text-decoration-color: rgb(115 102 254 / 34%);
}

.vb-page :where(a:not(.vb-primary-cta):not(.vb-secondary-cta), .ytv-text-button):hover {
  color: var(--tool-2-primary-hover);
  text-decoration-color: currentcolor;
}

.vb-page
  :where(
    .vb-input-panel,
    .vb-review-section,
    .vb-source-module__visual,
    .vb-feature-list__items article,
    .vb-how-steps__cards article,
    .vb-audience-module__cards article,
    .vb-faq-section details,
    .ytv-preview,
    .ytv-workspace,
    .ytv-examples,
    .ytv-video-card,
    .ytv-vocab-card,
    .ytv-saved-panel,
    .ytv-saved-item,
    .vq-panel,
    .vq-review-row,
    .vq-recent,
    .vq-recent__card,
    .vq-preview-document,
    .vq-answer-key
  ) {
  border-color: var(--tool-2-border);
  border-radius: 12px;
  background: var(--tool-2-surface);
  box-shadow: var(--tool-2-shadow);
}

.vb-page
  :where(
    .vb-input-panel,
    .vb-review-section,
    .ytv-preview,
    .ytv-workspace,
    .ytv-examples,
    .vq-panel,
    .vq-recent
  ) {
  border-radius: 24px;
}

.vb-page .vb-review-block {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.vb-page .vb-review-section {
  border-color: var(--tool-2-border);
  background: var(--tool-2-surface);
  box-shadow: var(--tool-2-shadow);
}

.vb-page .vb-faq-section details {
  border-color: transparent;
  border-radius: 8px;
  background: var(--tool-2-primary-soft);
  box-shadow: inset 4px 0 var(--tool-2-primary);
}

.vb-page .vb-faq-section :where(summary, summary::after) {
  color: var(--tool-2-link);
}

.vb-page--builder .vb-faq-section summary {
  color: #000;
}

.vb-page :where(.vb-final-cta, .vq-step-heading__number, .ytv-workspace-status span) {
  border-color: var(--tool-2-primary-soft);
  background: var(--tool-2-primary-soft);
  color: var(--tool-2-primary);
}

.vb-page--builder .vb-final-cta h2,
.vb-page.vb-page--builder .vb-seo-sections .vb-final-cta h2 {
  color: #fff;
}

/* Quiz-only geometry keeps the shared Tool section system unchanged for other pages. */
.vb-page--quiz .vq-content-split {
  align-items: center;
}

.vb-page--quiz .vq-content-split__copy {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  gap: 16px;
  text-align: left;
}

.vb-page--quiz .vq-content-split__copy h2 {
  width: 100%;
  margin: 0;
  text-align: left;
}

.vb-page--quiz .vq-content-split__copy p {
  width: 100%;
  margin: 0;
  text-align: left;
}

.vb-page--quiz .vb-seo-sections > .vq-content-split > img {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.vb-page--quiz .vq-content-split--media-first .vq-content-split__copy {
  grid-column: 2;
}

.vb-page--quiz .vb-seo-sections > .vq-content-split--media-first > img {
  grid-column: 1;
}

.vb-page--quiz .vb-how-steps__intro {
  width: 100%;
}

.vb-page--quiz .vb-how-steps__intro h2 {
  white-space: nowrap;
}

.vb-page--quiz .vq-how-step-card {
  padding: 24px;
  border-radius: 12px;
}

.vb-page--quiz .vb-audience-module__cards {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vb-page--quiz .vq-audience-card {
  min-height: 0;
  padding: 20px 24px;
}

.vb-page--quiz .vb-faq-section summary {
  color: #000;
}

.vb-page--quiz .vb-final-cta {
  border-top: 0;
  border-bottom: 0;
}

.vb-page .vb-upload-dropzone {
  border-color: rgb(149 131 237 / 42%);
  background: var(--tool-2-primary-soft);
  box-shadow: none;
  color: var(--tool-2-text);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.vb-page .vb-upload-dropzone:hover,
.vb-page .vb-upload-dropzone:focus-within {
  border-color: var(--tool-2-button-primary-bg);
  background: rgb(149 131 237 / 14%);
  box-shadow: 0 0 0 3px var(--tool-2-focus);
}

.vb-page .vb-upload-dropzone strong {
  color: var(--tool-2-text-strong);
  font-weight: 600;
}

.vb-page .vb-pdf-sample-list span {
  border-color: var(--tool-2-border);
  border-radius: 8px;
  background: var(--tool-2-primary-softer);
  box-shadow: none;
  color: var(--tool-2-text-muted);
  font-family: var(--tool-2-font);
  font-weight: 500;
}

.vb-page
  :where(
    .vb-primary-cta,
    button.vb-primary-cta,
    a.vb-primary-cta,
    .vq-actions button.is-primary,
    .vq-source-text__action,
    .ytv-selection-popover .selection-toolbar__save-button
  ) {
  border-color: var(--tool-2-primary);
  border-radius: 8px;
  background: var(--tool-2-button-primary-bg);
  box-shadow: none;
  color: #ffffff;
  font-family: var(--tool-2-font);
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.vb-page.vb-page
  :where(
    .vb-primary-cta,
    button.vb-primary-cta,
    a.vb-primary-cta,
    .vq-actions button.is-primary,
    .vq-source-text__action,
    .ytv-selection-popover .selection-toolbar__save-button
  ):hover:not(:disabled):not(.is-active):not([aria-selected='true']) {
  border-color: var(--tool-2-button-primary-hover-bg);
  background: var(--tool-2-button-primary-hover-bg);
  box-shadow: 0 6px 16px rgb(149 131 237 / 22%);
  color: #ffffff;
}

.vb-page.vb-page
  :where(
    .vb-primary-cta,
    button.vb-primary-cta,
    a.vb-primary-cta,
    .vq-actions button.is-primary,
    .vq-source-text__action,
    .ytv-selection-popover .selection-toolbar__save-button
  ):active:not(:disabled) {
  border-color: var(--tool-2-button-primary-active-bg);
  background: var(--tool-2-button-primary-active-bg);
  box-shadow: 0 2px 8px rgb(149 131 237 / 18%);
}

.vb-page.vb-page
  :where(
    .vb-secondary-cta,
    .vq-tabs button,
    .vq-samples button,
    .vq-actions button,
    .vq-question__actions button,
    .vq-tag-add,
    .ytv-chip-button,
    .ytv-vocab-card button,
    .ytv-undo-button,
    .ytv-selection-popover button
  ) {
  border-color: color-mix(in srgb, var(--tool-2-primary) 28%, transparent);
  border-radius: 8px;
  background: var(--tool-2-button-secondary-bg);
  box-shadow: none;
  color: var(--tool-2-text);
  font-family: var(--tool-2-font);
  font-weight: 500;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.vb-page.vb-page
  :where(
    .vb-secondary-cta,
    .vq-tabs button,
    .vq-samples button,
    .vq-actions button,
    .vq-question__actions button,
    .vq-tag-add,
    .ytv-chip-button,
    .ytv-vocab-card button,
    .ytv-undo-button,
    .ytv-selection-popover button
  ):hover:not(:disabled):not(.is-active):not([aria-selected='true']) {
  border-color: var(--tool-2-primary);
  background: var(--tool-2-button-secondary-hover-bg);
  box-shadow: none;
  color: var(--tool-2-primary-hover);
}

.vb-page.vb-page.vb-page
  :where(.vq-tabs button.is-active, .vq-samples button.is-active, [aria-selected='true']) {
  border-color: var(--tool-2-primary);
  background: var(--tool-2-primary-soft);
  color: var(--tool-2-primary-active);
}

.vb-page.vb-page
  :where(.vq-tabs button, .vq-samples button, .ytv-chip-button):not(.is-active):not(
    [aria-selected='true']
  ) {
  border-color: transparent;
  background: transparent;
  color: var(--tool-2-text-muted);
}

.vb-page.vb-page
  :where(.vq-tabs button, .vq-samples button, .ytv-chip-button):hover:not(:disabled):not(
    .is-active
  ):not([aria-selected='true']) {
  border-color: color-mix(in srgb, var(--tool-2-primary) 28%, transparent);
  background: var(--tool-2-button-ghost-hover-bg);
  color: var(--tool-2-primary-active);
}

.vb-page.vb-page :where(.vb-danger-cta, [data-variant='danger']) {
  border-color: var(--tool-2-button-danger-bg);
  background: var(--tool-2-button-danger-bg);
  color: #fff;
}

.vb-page :where(button, a, input, textarea, select, summary):focus-visible {
  border-color: var(--tool-2-primary);
  outline: 3px solid var(--tool-2-focus);
  outline-offset: 2px;
  box-shadow: none;
}

.vb-page :where(button, input, textarea, select):disabled,
.vb-page :where(button, a)[aria-disabled='true'] {
  border-color: var(--tool-2-border);
  background: var(--tool-2-primary-soft);
  box-shadow: none;
  color: rgb(123 104 214 / 55%);
  cursor: not-allowed;
  opacity: 0.72;
}

.vb-page button.vb-primary-cta:disabled {
  opacity: 1;
}

.vb-page :where(input:not([type='checkbox']):not([type='radio']), textarea, select),
.ytv-tool .ytv-url-form input,
.vq-tool :where(.vq-token-input, .vq-tag-input) {
  border-color: var(--tool-2-border-strong);
  border-radius: 8px;
  background: var(--tool-2-surface);
  box-shadow: none;
  color: var(--tool-2-text);
  font-family: var(--tool-2-font);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.vb-page
  :where(input:not([type='checkbox']):not([type='radio']), textarea, select):hover:not(:disabled) {
  border-color: rgb(149 131 237 / 45%);
}

.vb-page :where(input:not([type='checkbox']):not([type='radio']), textarea, select):focus {
  border-color: var(--tool-2-primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px var(--tool-2-focus);
  outline: none;
}

.vb-page :where(input, textarea)::placeholder {
  color: rgb(0 0 0 / 40%);
  opacity: 1;
}

.vb-page :where(input[type='checkbox'], input[type='radio']) {
  accent-color: var(--tool-2-primary);
}

.vb-page
  :where(.vq-token-chip, .vq-tag, .ytv-workspace-status span, .selection-toolbar__lang-badge) {
  border-color: var(--tool-2-border);
  border-radius: 999px;
  background: var(--tool-2-primary-soft);
  color: var(--tool-2-primary);
  font-weight: 700;
}

.ytv-tool :where(.ytv-selection-popover, .ytv-explain-popover),
.vq-tool :where(.vq-preview-modal__panel, .vq-toast) {
  border-color: var(--tool-2-border);
  border-radius: 12px;
  background: var(--tool-2-surface);
  box-shadow: var(--tool-2-shadow-float);
  color: var(--tool-2-text);
}

.vb-page :where(.ytv-message--error, .vq-message--error, [role='alert']) {
  border-color: rgb(232 87 74 / 24%);
  background: var(--tool-2-danger-soft);
  color: var(--tool-2-danger);
}

.vb-page :where(.ytv-message--success, .vq-message--success) {
  border-color: rgb(47 159 82 / 24%);
  background: var(--tool-2-success-soft);
  color: var(--tool-2-success);
}

.vb-page :where(.ytv-message--warning, .vq-message--warning) {
  border-color: rgb(252 214 105 / 48%);
  background: var(--tool-2-warning-soft);
  color: var(--tool-2-warning);
}

.ytv-tool .ytv-transcript {
  border-color: var(--tool-2-border);
  background: var(--tool-2-surface);
  box-shadow: none;
}

.ytv-tool .ytv-transcript p {
  background: var(--tool-2-youtube-softer);
}

.ytv-tool :where(.ytv-transcript__line--active, .ytv-transcript p:focus) {
  background: var(--tool-2-youtube-soft);
}

.ytv-tool .ytv-transcript a {
  color: #b07d00;
}

.ytv-tool .ytv-vocab-card button:not(.ytv-chip-button) {
  border-color: transparent;
  background: var(--tool-2-youtube-soft);
  color: #8b6500;
}

.ytv-tool .ytv-vocab-card button:not(.ytv-chip-button):hover:not(:disabled) {
  border-color: var(--tool-2-youtube);
  background: var(--tool-2-youtube-soft);
  color: #765400;
}

.ytv-tool .ytv-vocab-card button:not(.ytv-chip-button):active:not(:disabled) {
  border-color: var(--tool-2-youtube);
  background: var(--tool-2-youtube-soft);
  box-shadow: none;
  color: #765400;
}

.ytv-tool .ytv-chip-button {
  border-color: transparent;
  background: var(--tool-2-primary-soft);
  color: var(--tool-2-primary-active);
}

.ytv-tool .ytv-chip-button:hover:not(:disabled) {
  border-color: var(--tool-2-primary);
  background: var(--tool-2-primary-soft);
  color: var(--tool-2-primary-active);
}

.vb-page :where(.vq-spinner, .ytv-import-status i) {
  border-color: var(--tool-2-primary-soft);
  border-top-color: var(--tool-2-primary);
}

.vb-page ::selection {
  background: var(--tool-2-primary-soft);
  color: var(--tool-2-text-strong);
}

@media (max-width: 860px) {
  .vb-page--quiz .vq-content-split {
    grid-template-columns: 1fr;
  }

  .vb-page--quiz .vb-how-steps__intro h2 {
    white-space: normal;
  }

  .vb-page--quiz .vb-audience-module__cards {
    grid-template-columns: 1fr;
  }

  .vb-page--quiz .vq-content-split__copy {
    grid-column: 1;
    grid-row: 2;
    align-self: auto;
  }

  .vb-page--quiz .vq-content-split--media-first .vq-content-split__copy {
    grid-column: 1;
    grid-row: 2;
    align-self: auto;
  }

  .vb-page--quiz .vb-seo-sections > .vq-content-split > img,
  .vb-page--quiz .vb-seo-sections > .vq-content-split--media-first > img {
    grid-column: 1;
    grid-row: 1;
  }
}