/* Shared product-surface rules used by the official app and the preview route. */
body.product-surface.plain-view,
body.product-surface.history-view,
body.product-surface.plain-view #view-root,
body.product-surface.history-view #view-root {
  background: var(--surface-solid);
}

.product-surface *,
.product-surface *::before,
.product-surface *::after {
  box-shadow: none !important;
  filter: none !important;
}

.product-surface .primary,
.product-surface .secondary,
.product-surface .ghost,
.product-surface .chip,
.product-surface .category-btn,
.product-surface .side-link,
.product-surface .topic-heart,
.product-surface .detail-heart,
.product-surface .notebook-pin,
.product-surface .notebook-edit,
.product-surface .notebook-context button,
.product-surface .tab-row button,
.product-surface .period-toggle {
  border-radius: 999px;
}

.product-surface .primary,
.product-surface .secondary,
.product-surface .ghost,
.product-surface .chip {
  box-shadow: none;
}

.product-surface .primary:hover,
.product-surface .primary:focus-visible,
.product-surface .secondary:hover,
.product-surface .secondary:focus-visible,
.product-surface .ghost:hover,
.product-surface .ghost:focus-visible,
.product-surface .chip:hover,
.product-surface .chip:focus-visible {
  box-shadow: none;
  outline: none;
  transform: none;
}

.product-surface .ghost {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
}

.product-surface .chip {
  border-color: transparent;
}

.product-surface .chip:hover,
.product-surface .chip:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-solid));
}

.product-surface .chip.active {
  border-color: transparent;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-solid));
  box-shadow: none;
}

.product-surface .chip.active:hover,
.product-surface .chip.active:focus-visible {
  box-shadow: none;
  transform: none;
}

.product-surface .search-bar,
.product-surface .record-tools,
.product-surface .notebook-tools,
.product-surface .topic-detail,
.product-surface .topic-card,
.product-surface .practice-record-card,
.product-surface .panel,
.product-surface .metric-card,
.product-surface .notebook-row {
  border-color: var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: none;
  backdrop-filter: blur(14px) saturate(1.08);
}

.product-surface .search-bar,
.product-surface .record-tools,
.product-surface .notebook-tools {
  border-radius: 999px;
}

.product-surface .record-tools {
  border-radius: 18px;
}

.product-surface .topic-card {
  overflow: hidden;
}

.product-surface .topic-card:hover,
.product-surface .topic-card:focus-visible,
.product-surface .practice-record-card.history-clickable:hover,
.product-surface .practice-record-card.history-clickable:focus-visible,
.product-surface .favorite-panel-card:hover,
.product-surface .distribution-panel:hover,
.product-surface .notebook-row.sampleEssay:hover,
.product-surface .notebook-row.sampleEssay:focus-visible {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
  outline: none;
  transform: scale(1.012);
}

.product-surface .topic-list .topic-row {
  overflow: visible;
  border-radius: 0;
  outline: 0;
}

.product-surface .topic-list .topic-row.active,
.product-surface .topic-list .topic-row:hover,
.product-surface .topic-list .topic-row.practiced.active,
.product-surface .topic-list .topic-row.practiced:hover {
  box-shadow: none;
  transform: none;
}

.product-surface .topic-heart,
.product-surface .detail-heart,
.product-surface .notebook-pin,
.product-surface .notebook-edit,
.product-surface .notebook-context button {
  box-shadow: none;
}

.product-surface .topic-heart:hover,
.product-surface .topic-heart.active,
.product-surface .notebook-pin.active,
.product-surface .notebook-edit.active {
  box-shadow: none;
}

.product-surface .tag,
.product-surface .record-date-pill,
.product-surface .record-meta span,
.product-surface .record-side .record-status,
.product-surface .record-status-group .record-status,
.product-surface .notebook-heading > span,
.product-surface .record-heading > span {
  border-radius: 999px;
}

.product-surface .history-entry-grid:hover .history-entry-card,
.product-surface .history-entry-grid:focus-within .history-entry-card {
  border-radius: 18px;
  box-shadow: none;
}

.product-surface .history-entry-card {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
}

.product-surface .history-entry-card:hover,
.product-surface .history-entry-card:focus-visible,
.product-surface .history-entry-card.active {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
  transform: translateX(var(--entry-shift)) scale(1.025);
}

.product-surface .history-entry-grid:not(:hover):not(:focus-within) .history-entry-card.active {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
  transform: translateX(var(--entry-shift)) scale(1.08);
}

.product-surface .history-entry-icon {
  box-shadow: none;
}

.product-surface .notebook-note-panel,
.product-surface .notebook-term-input,
.product-surface .notebook-meaning-input,
.product-surface .record-tools input,
.product-surface .record-tools select {
  border-radius: 14px;
}

.product-surface .notebook-context-menu,
.product-surface .notebook-note-popover,
.product-surface .history-detail-modal {
  border-radius: 18px;
}

.product-surface .feedback-tabs button,
.product-surface .feedback-type-group button,
.product-surface .essay-feedback-tab-switcher button,
.product-surface .thought-trigger,
.product-surface .thought-mode-option,
.product-surface .history-return-training,
.product-surface .essay-original-pill,
.product-surface .essay-sample-pill {
  box-shadow: none;
  outline: none;
}

.product-surface .feedback-tabs button:hover,
.product-surface .feedback-tabs button:focus-visible,
.product-surface .feedback-type-group button:hover,
.product-surface .feedback-type-group button:focus-visible,
.product-surface .essay-feedback-tab-switcher button:hover,
.product-surface .essay-feedback-tab-switcher button:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-solid));
  box-shadow: none;
  outline: none;
  transform: none;
}

.product-surface .feedback-tabs button.active,
.product-surface .feedback-type-group button.active,
.product-surface .essay-feedback-tab-switcher button.is-active {
  border-color: transparent;
  box-shadow: none;
}

.product-surface .essay-original-pill,
.product-surface .essay-sample-pill,
.product-surface .thought-trigger {
  border-color: transparent;
  background: var(--surface-solid);
}

.product-surface .history-return-training {
  border-color: transparent;
  background: color-mix(in srgb, var(--muted) 10%, var(--surface-solid));
}

.product-surface .essay-original-pill:hover,
.product-surface .essay-original-pill:focus-visible,
.product-surface .essay-original-pill:active {
  border-color: transparent;
  color: var(--text);
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-solid));
  box-shadow: none;
  outline: none;
  transform: none;
}

.product-surface .essay-sample-pill:hover,
.product-surface .essay-sample-pill:focus-visible {
  border-color: transparent;
  color: var(--text);
  background: color-mix(in srgb, var(--amber) 13%, var(--surface-solid));
  box-shadow: none;
  outline: none;
  transform: none;
}

.product-surface .essay-sample-pill:active,
.product-surface .essay-sample-pill.is-active {
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.product-surface .thought-trigger.is-error {
  border-color: transparent;
  background: var(--surface-solid);
}

.product-surface .thought-trigger:hover,
.product-surface .thought-trigger:focus-visible,
.product-surface .history-return-training:hover,
.product-surface .history-return-training:focus-visible {
  border-color: transparent;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-solid));
  box-shadow: none;
  outline: none;
  transform: none;
}

.product-surface .thought-trigger.is-ready,
.product-surface .thought-trigger.is-ready:hover,
.product-surface .thought-trigger.is-ready:focus-visible {
  border-color: transparent;
  color: color-mix(in srgb, var(--green) 82%, var(--text));
  background: color-mix(in srgb, var(--green) 13%, var(--surface-solid));
  box-shadow: none;
  outline: none;
  transform: none;
}

.product-surface .thought-mode-option {
  border-color: transparent;
  background: var(--surface);
}

.product-surface .thought-mode-option:hover,
.product-surface .thought-mode-option:focus-visible,
.product-surface .thought-mode-option.active {
  border-color: transparent;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface-solid));
  box-shadow: none;
  outline: none;
  transform: none;
}

.product-surface .search-bar,
.product-surface .topic-card,
.product-surface .topic-card:hover,
.product-surface .topic-card:focus-visible,
.product-surface .topic-detail,
.product-surface .topic-row,
.product-surface .topic-row.active,
.product-surface .topic-row:hover,
.product-surface .practice-record-card,
.product-surface .practice-record-card.history-clickable:hover,
.product-surface .practice-record-card.history-clickable:focus-visible,
.product-surface .history-entry-card,
.product-surface .history-entry-card:hover,
.product-surface .history-entry-card:focus-visible,
.product-surface .history-entry-card.active,
.product-surface .history-entry-grid:hover .history-entry-card,
.product-surface .history-entry-grid:focus-within .history-entry-card,
.product-surface .notebook-row,
.product-surface .notebook-row:hover,
.product-surface .notebook-row:focus-visible,
.product-surface .notebook-tools,
.product-surface .record-tools,
.product-surface .panel,
.product-surface .panel:hover,
.product-surface .metric-card {
  box-shadow: none;
}