:root {
  --background: #ececec;
  --foreground: #222222;
  --muted: rgba(34, 34, 34, 0.42);
  --line: rgba(34, 34, 34, 0.10);
  --primary: #ff4a00;
  --submit: #9fd4ff;
  --input-collapsed-height: 62px;
  --input-max-height: 218px;
  --input-line-height: 24px;
  --editor-actions-height: 52px;
  --editor-actions-gap: 2px;
  --content-list-bottom-gap: 50px;
  --first-screen-bottom-gap: 20px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

html {
  min-width: 980px;
  font-size: 14px;
  line-height: 1.3;
}

body {
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

svg {
  display: block;
  flex-shrink: 0;
}

.page-shell {
  width: min(100%, 1660px);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: clamp(18px, 2.4vh, 28px) clamp(24px, 2.4vw, 32px) var(--first-screen-bottom-gap);
  overflow: hidden;
}

.workbench {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(620px, 1fr) clamp(300px, 29vw, 490px);
  gap: clamp(32px, 4.9vw, 82px);
  align-items: stretch;
}

.left-pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.right-pane {
  min-width: 0;
  min-height: 0;
}

/*
 * The list keeps a stable scrolling viewport based on the editor's collapsed
 * footprint. When the editor or the single-selection toolbar expands upward,
 * it overlays this list instead of pushing or resizing it.
 */
.content-panel {
  position: absolute;
  z-index: 1;
  inset: 0 0 calc(
    var(--input-collapsed-height) +
    var(--editor-actions-height) +
    var(--editor-actions-gap) +
    var(--content-list-bottom-gap)
  ) 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}

.content-panel-domain {
  flex: 0 0 48px;
  min-height: 48px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: #292929;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.content-grid {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 0 2px;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  list-style: none;
  scroll-padding-block: 8px;
}

.content-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.content-card {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 6px 10px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: background-color 0.15s ease;
}

.content-card:first-child {
  border-top: 1px solid var(--line);
}

.content-card:hover {
  background: rgba(255, 255, 255, 0.22);
}

.content-card:active {
  cursor: pointer;
}

.content-card.is-selected {
  background: #dedede;
}

.content-card:focus-visible {
  z-index: 1;
  outline: 2px solid rgba(11, 140, 255, 0.35);
  outline-offset: -2px;
}

.content-card-led {
  width: 7px;
  height: 7px;
  justify-self: start;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.10);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.11), 0 1px 0 rgba(255, 255, 255, 0.19);
  pointer-events: none;
  transition: background-color 0.15s ease;
}

.content-card.is-selected .content-card-led {
  background: var(--primary);
}

.content-card-tools {
  min-width: 0;
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #bbbbbb;
}

.content-card-audio,
.content-card-drag-handle {
  width: 26px;
  height: 26px;
  padding: 3px;
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #bbbbbb;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.content-card-audio {
  cursor: pointer;
}

.content-card-audio:hover,
.content-card-drag-handle:hover {
  color: #999999;
  background: rgba(255, 255, 255, 0.36);
}

.content-card-audio:focus-visible,
.content-card-drag-handle:focus-visible {
  outline: 2px solid rgba(11, 140, 255, 0.32);
  outline-offset: 1px;
}

.content-card-audio svg {
  width: 19px;
  height: 19px;
}

.content-card-drag-handle {
  cursor: grab;
  touch-action: none;
}

.content-card-drag-handle:active {
  cursor: grabbing;
}

.content-card-drag-handle svg {
  width: 22px;
  height: 22px;
}

.content-card-text {
  min-width: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
  color: #292929;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.editor-panel {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding-top: 30px;
  background: linear-gradient(
    to bottom,
    rgba(236, 236, 236, 0) 0,
    rgba(236, 236, 236, 0.82) 20px,
    var(--background) 38px,
    var(--background) 100%
  );
  pointer-events: none;
}

.selection-toolbar {
  width: 100%;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 5px 6px 5px 10px;
  display: grid;
  grid-template-rows: 32px;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #dcdcdc;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  pointer-events: auto;
  transition: min-height 0.16s ease, grid-template-rows 0.16s ease;
}

.selection-toolbar[hidden] {
  display: none;
}

.selection-toolbar.is-expanded {
  min-height: 108px;
  grid-template-rows: 32px 32px 32px;
}

.selection-toolbar-extra,
.selection-toolbar-spacer {
  display: none;
  min-width: 0;
}

.selection-toolbar.is-expanded .selection-toolbar-extra {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.selection-toolbar.is-expanded .selection-toolbar-spacer {
  display: block;
}

.selection-toolbar-row {
  min-width: 0;
  display: flex;
  align-items: center;
}

.selection-toolbar-left,
.selection-toolbar-right {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.selection-toolbar-right {
  margin-left: auto;
  gap: 0;
}

#moreSelectedButton {
  margin-left: 4px;
}

/* Keep an exact 100px visual gap between “更多” and the close button. */
.selection-toolbar-right .selection-toolbar-close {
  margin-left: 100px;
}

.selection-tool-button,
.selection-toolbar-close {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #777777;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.selection-toolbar-right .selection-tool-button {
  width: 48px;
  padding-right: 4px;
  padding-left: 4px;
}

.selection-toolbar-extra .selection-tool-button {
  min-width: 56px;
  padding-right: 8px;
  padding-left: 8px;
}

.selection-tool-button:hover:not(:disabled),
.selection-toolbar-close:hover {
  color: #555555;
  background: rgba(255, 255, 255, 0.42);
}

.selection-tool-button:active:not(:disabled),
.selection-toolbar-close:active {
  transform: translateY(1px);
}

.selection-tool-button:disabled {
  opacity: 0.34;
  cursor: default;
}

.selection-tool-button[aria-expanded="true"] {
  color: #555555;
  background: rgba(255, 255, 255, 0.34);
}

.selection-tool-danger:hover:not(:disabled) {
  color: #993300;
}

.selection-toolbar-close {
  width: 32px;
  min-width: 32px;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

.editor-form {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0 10px 6px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 18px;
  background: #f3f3f3;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  pointer-events: auto;
}

.editor-form textarea {
  width: 100%;
  height: var(--input-collapsed-height);
  min-height: var(--input-collapsed-height);
  max-height: var(--input-max-height);
  margin: 0;
  padding: 14px 8px 8px;
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 16px 16px 0 0;
  outline: none;
  resize: none;
  background: transparent;
  color: #222222;
  caret-color: #222222;
  box-shadow: none;
  font-size: 15px;
  line-height: var(--input-line-height);
  scrollbar-width: thin;
  transition: height 0.16s ease;
}

.editor-form textarea::placeholder {
  color: #aaaaaa;
  opacity: 1;
}

.editor-form.is-input-active textarea {
  transition: none;
}

.editor-actions {
  height: var(--editor-actions-height);
  margin-top: var(--editor-actions-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.editor-actions-left,
.editor-actions-right {
  display: flex;
  align-items: center;
}

.editor-actions-left {
  gap: 8px;
}

.editor-actions-right {
  gap: 12px;
}

.plain-icon {
  width: 42px;
  height: 42px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #bbbbbb;
  cursor: pointer;
  transition: color 0.16s ease, background-color 0.16s ease, transform 0.12s ease;
}

.plain-icon:hover {
  color: #999999;
  background: rgba(255, 255, 255, 0.38);
}

.plain-icon:active {
  transform: translateY(1px);
}

.plain-icon svg {
  width: 28px;
  height: 28px;
}

.plus-button svg {
  width: 25px;
  height: 25px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.delete-button.is-hidden {
  display: none;
}

.submit-button {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: #9fd4ff;
  color: rgba(34, 34, 34, 0.44);
  cursor: pointer;
  box-shadow: inset 1px 1px 1px #ffffffd8,
    inset -1px -1px 1px rgba(0, 0, 0, 0.12),
    0.444584px 0.444584px 0.628737px -1px rgba(0, 0, 0, 0.15),
    1.21072px 1.21072px 1.71222px -1.5px rgba(0, 0, 0, 0.13),
    4px 5px 13px -6px rgba(0, 0, 0, 0.16);
  transition: filter 0.18s ease, opacity 0.16s ease, transform 0.12s ease;
}

.submit-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.submit-button:not(:disabled):hover {
  filter: brightness(1.02);
}

.submit-button:not(:disabled):active {
  transform: translateY(1px);
  box-shadow: inset 0.5px 0.5px 1px #ffffff,
    inset -0.5px -0.5px 1px #00000026,
    0.222px 0.222px 0.314px -0.5px #0003,
    0.605px 0.605px 0.856px -1px #0000002e,
    1.329px 1.329px 1.88px -1.5px #00000040,
    2.95px 2.95px 4.172px -2px #0000001a,
    2.5px 2.5px 3px -2.5px #00000026,
    -0.5px -0.5px 0 0 rgb(0 0 0 / 10%);
}

.submit-button svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sortable-ghost {
  opacity: 0.24;
  background: #d7d7d7 !important;
}

.sortable-chosen,
.sortable-drag,
.sortable-fallback {
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 6px 10px !important;
  overflow: hidden !important;
  cursor: grabbing !important;
}

.sortable-drag,
.sortable-fallback {
  border: 1px solid rgba(34, 34, 34, 0.14);
  background: #f2f2f2;
}

body.is-sorting,
body.is-sorting * {
  cursor: grabbing !important;
}

.sr-status {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1180px) {
  .workbench {
    grid-template-columns: minmax(620px, 1fr) 300px;
    gap: 32px;
  }
}

@media (max-width: 1060px) {
  html {
    min-width: 960px;
  }

  .page-shell {
    padding-right: 20px;
    padding-left: 20px;
  }

  .workbench {
    grid-template-columns: minmax(590px, 1fr) 280px;
    gap: 24px;
  }
}

@media (max-height: 720px) {
  .page-shell {
    padding-top: 16px;
  }

  .editor-panel {
    padding-top: 24px;
  }
}

/* A01 20260728: title, SVG toolbar, instant tooltip and local speech panel. */
.content-panel-domain {
  flex: 0 0 auto;
  min-height: 0;
  padding: 20px 10px 30px;
  border-bottom: 0;
  color: #bbbbbb;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}

.content-card {
  cursor: grab;
}

.content-card:active,
.content-card.sortable-chosen {
  cursor: grabbing;
}

.content-card-control {
  position: relative;
  z-index: 3;
}

.selection-toolbar {
  min-height: 44px;
  padding: 5px 6px 5px 10px;
  display: block;
}

.selection-toolbar[hidden] {
  display: none !important;
}

.selection-toolbar-single {
  min-width: 0;
}

.selection-toolbar.is-expanded .selection-toolbar-single {
  min-height: 96px;
  display: grid;
  grid-template-rows: 32px 32px 32px;
}

.selection-toolbar-extra,
.selection-toolbar-spacer {
  display: none;
}

.selection-toolbar.is-expanded .selection-toolbar-extra {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.selection-toolbar.is-expanded .selection-toolbar-spacer {
  display: block;
}

.selection-toolbar-multi {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.selection-toolbar-multi[hidden] {
  display: none !important;
}

.selection-toolbar-multi-spacer {
  flex: 1 1 auto;
}

.selection-tool-button {
  width: 38px;
  min-width: 38px;
  height: 32px;
  padding: 5px;
  color: #bbbbbb;
}

.selection-tool-button svg {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

.selection-tool-button:hover:not(:disabled),
.selection-toolbar-close:hover {
  color: #999999;
}

.selection-toolbar-extra .selection-tool-button,
.selection-toolbar-right .selection-tool-button {
  min-width: 38px;
  width: 38px;
  padding: 5px;
}

.selection-toolbar-right {
  gap: 4px;
}

.selection-toolbar-close-gap {
  width: 100px;
  flex: 0 0 100px;
}

.selection-toolbar-right .selection-toolbar-close {
  margin-left: 0;
}

.more-button svg {
  transform: rotate(180deg);
  transition: transform 0.16s ease;
}

.more-button[aria-expanded="true"] svg {
  transform: rotate(0deg);
}

.instant-tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 220px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(34, 34, 34, 0.94);
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-7px);
  transition: none;
}

.instant-tooltip.is-visible {
  opacity: 1;
}

.instant-tooltip[hidden] {
  display: none;
}

.right-pane {
  position: relative;
  overflow: hidden;
}

.speech-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 14px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.speech-panel[hidden] {
  display: none !important;
}

.speech-panel-header {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.speech-panel-header > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.speech-panel-header strong {
  color: #777777;
  font-size: 16px;
  font-weight: 600;
}

.speech-panel-header span {
  color: #aaaaaa;
  font-size: 12px;
}

.speech-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #bbbbbb;
  font-family: Arial, sans-serif;
  font-size: 24px;
  cursor: pointer;
}

.speech-close:hover {
  color: #888888;
  background: rgba(255, 255, 255, 0.35);
}

.speech-current-text {
  flex: 0 0 auto;
  max-height: 72px;
  margin: 16px 0 10px;
  padding: 12px 14px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.34);
  color: #555555;
  font-size: 13px;
  line-height: 22px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.speech-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}

.speech-action-button {
  width: 34px;
  height: 34px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.3);
  color: #bbbbbb;
  cursor: pointer;
}

.speech-action-button:hover {
  color: #888888;
  background: rgba(255, 255, 255, 0.5);
}

.speech-action-button svg {
  width: 22px;
  height: 22px;
}

.speech-voice-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 2px 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: none;
}

.speech-voice-list::-webkit-scrollbar {
  display: none;
}

.speech-voice-card {
  position: relative;
  min-width: 0;
  min-height: 74px;
  padding: 11px 10px 24px;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: #f4f4f4;
  color: #444444;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,.8), inset -1px -1px 1px rgba(0,0,0,.08), 2px 2px 7px rgba(0,0,0,.08);
}

.speech-voice-card.is-selected {
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.10), inset -1px -1px 1px rgba(255,255,255,.55);
}

.speech-voice-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.speech-voice-card small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #aaaaaa;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speech-voice-card i {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.10);
}

.speech-voice-card.is-selected i {
  background: var(--primary);
}

.speech-empty {
  grid-column: 1 / -1;
  padding: 18px 2px;
  color: #aaaaaa;
  font-size: 13px;
}

@media (max-width: 1180px) {
  .speech-voice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A01 20260731: quick material import, language-aware local audition and inline word tracking. */
.content-panel-domain {
  padding-left: 20px;
}

.selection-summary {
  flex: 0 0 28px;
  min-height: 28px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #999999;
  font-size: 13px;
  line-height: 28px;
}

.selection-summary[hidden] {
  display: none !important;
}

.selection-summary strong {
  color: inherit;
  font-weight: 500;
}

.selection-summary button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #333333;
  cursor: pointer;
}

.selection-summary button:hover {
  text-decoration: underline;
}

.speech-controls {
  position: relative;
  flex: 0 0 66px;
  min-height: 66px;
  padding: 0 10px 10px;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 72px minmax(210px, 1fr);
  align-items: center;
}

.speech-controls[hidden] {
  display: none !important;
}

.speech-volume-cluster {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 26px;
}

.speech-mute-button {
  width: 42px;
  height: 42px;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #bbbbbb;
  cursor: pointer;
  transition: color .16s ease, transform .12s ease;
}

.speech-mute-button:hover {
  color: #999999;
}

.speech-mute-button:active {
  transform: translateY(1px);
}

.speech-mute-button.is-muted {
  color: #993300;
}

.speech-mute-button svg {
  width: 30px;
  height: 30px;
}

.speech-volume-range {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 4px;
  border-radius: 3px;
  outline: none;
  background: #bbbbbb;
  cursor: pointer;
}

.speech-volume-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 3px;
  background: #bbbbbb;
}

.speech-volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: #666666;
  cursor: pointer;
}

.speech-volume-range::-moz-range-track {
  height: 4px;
  border-radius: 3px;
  background: #bbbbbb;
}

.speech-volume-range::-moz-range-progress {
  height: 4px;
  border-radius: 3px;
  background: #666666;
}

.speech-volume-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #666666;
  cursor: pointer;
}

.speech-main-play {
  justify-self: center;
  width: 72px;
  height: 62px;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #bbbbbb;
  cursor: pointer;
  transition: transform .15s ease;
}

.speech-main-play:hover {
  transform: scale(1.02);
}

.speech-main-play:active {
  transform: translateY(1px);
}

.speech-main-play > span,
.speech-main-play svg {
  width: 40px;
  height: 40px;
}

.speech-main-play > span[hidden] {
  display: none !important;
}

.content-card.is-playing {
  background: #e7e7e7;
}

.content-card.is-selected.is-playing {
  background: #dedede;
}

.content-card-current-word {
  color: #993300;
  font-weight: 900;
  -webkit-text-stroke: .2px currentColor;
  text-shadow: .25px 0 0 currentColor, -.25px 0 0 currentColor;
}

.quick-add-popover {
  position: fixed;
  z-index: 120;
  width: min(500px, calc(100vw - 24px));
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .13);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .14);
}

.quick-add-popover[hidden] {
  display: none !important;
}

.quick-add-library {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 0;
  border-radius: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f1f1f1;
  color: #222222;
  text-align: left;
  cursor: pointer;
}

.quick-add-library:hover {
  background: #e9e9e9;
}

.quick-add-library svg {
  width: 24px;
  height: 24px;
  color: #333333;
}

.quick-add-library span {
  font-size: 16px;
}

.quick-add-placeholder {
  height: 54px;
}

.material-library-open {
  overflow: hidden;
}

.material-library-layer {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.material-library-layer[hidden] {
  display: none !important;
}

.material-library-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(2px);
}

.material-library-dialog {
  position: relative;
  z-index: 1;
  width: min(780px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  min-height: 420px;
  border: 1px solid rgba(0, 0, 0, .11);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #eeeeee;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.material-library-header {
  flex: 0 0 auto;
  min-height: 72px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.material-library-header h2 {
  margin: 0;
  color: #333333;
  font-size: 18px;
  font-weight: 600;
}

.material-library-header span {
  display: block;
  margin-top: 5px;
  color: #999999;
  font-size: 12px;
}

.material-library-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #888888;
  font: 25px/1 Arial, sans-serif;
  cursor: pointer;
}

.material-library-close:hover {
  background: rgba(255, 255, 255, .55);
  color: #555555;
}

.material-library-list {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.material-library-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.material-library-item {
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  background: transparent;
  color: #333333;
  text-align: left;
  cursor: pointer;
}

.material-library-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.material-library-item:hover {
  background: rgba(255, 255, 255, .32);
}

.material-library-item.is-selected {
  background: #dedede;
}

.material-library-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .10);
  box-shadow: inset 1px 1px 2px rgba(0,0,0,.11), 0 1px 0 rgba(255,255,255,.19);
}

.material-library-item.is-selected .material-library-led {
  background: var(--primary);
}

.material-library-text {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  line-height: 21px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.material-library-state {
  padding: 34px 10px;
  color: #999999;
  text-align: center;
}

.material-library-footer {
  flex: 0 0 64px;
  min-height: 64px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0, 0, 0, .08);
  color: #777777;
}

.material-library-import {
  min-width: 104px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 20px;
  background: #333333;
  color: #ffffff;
  cursor: pointer;
}

.material-library-import:disabled {
  opacity: .34;
  cursor: default;
}

.speech-panel {
  padding-top: 0;
}

.speech-panel-header {
  flex: 0 0 70px;
  min-height: 70px;
  border-bottom: 0;
}

.speech-panel-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.speech-panel-heading strong {
  min-width: 0;
  overflow: hidden;
  color: #777777;
  font-size: 16px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speech-panel-heading span {
  flex: 0 0 auto;
  font-size: 12px;
}

.speech-panel-heading .is-connected {
  color: #268f53;
}

.speech-panel-heading .is-disconnected {
  color: #993300;
}

.speech-voice-list {
  padding: 0 2px 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.speech-voice-card {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 2 / 1;
  min-height: 74px;
  max-height: 92px;
  padding: 12px;
  border: 0;
  border-radius: .375rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  overflow: hidden;
  background: #f4f4f4;
  color: #222222;
  text-align: left;
  cursor: pointer;
  user-select: none;
  box-shadow: rgb(255,255,255) 1px 1px 1px 0 inset,
    rgba(0,0,0,.15) -1px -1px 1px 0 inset,
    rgba(0,0,0,.26) .444584px .444584px .628737px -1px,
    rgba(0,0,0,.247) 1.21072px 1.21072px 1.71222px -1.5px,
    rgba(0,0,0,.23) 2.6583px 2.6583px 3.75941px -2.25px,
    rgba(0,0,0,.192) 5.90083px 5.90083px 8.34503px -3px,
    rgba(0,0,0,.056) 10px 10px 21.2132px -3.75px,
    -.5px -.5px 0 0 rgb(0 0 0 / 5%);
  transition: box-shadow .18s ease, transform .14s ease;
}

.speech-voice-card:active,
.speech-voice-card.is-selected,
.speech-voice-card[data-selected="true"] {
  box-shadow: inset .5px .5px 1px #ffffff,
    inset -.5px -.5px 1px #00000026,
    .222px .222px .314px -.5px #0003,
    .605px .605px .856px -1px #0000002e,
    1.329px 1.329px 1.88px -1.5px #00000040,
    2.95px 2.95px 4.172px -2px #0000001a,
    2.5px 2.5px 3px -2.5px #00000026,
    -.5px -.5px 0 0 rgb(0 0 0 / 10%);
}

.speech-voice-copy {
  min-width: 0;
  max-width: 100%;
  padding-right: 8px;
}

.speech-voice-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #222222;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speech-voice-sub {
  display: block;
  max-width: 100%;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(34,34,34,.45);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.speech-voice-card i {
  position: absolute;
  left: .93rem;
  bottom: .93rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,.1);
  box-shadow: inset 1px 1px 2px #0000001c, 0 1px 0 #ffffff30;
}

.speech-voice-card.is-selected i,
.speech-voice-card[data-selected="true"] i {
  background: var(--primary);
}

.speech-voice-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.speech-voice-page-card {
  position: relative;
  align-items: center;
  justify-content: center;
  background: #aaaaaa;
  color: #ffffff;
}

.speech-page-next,
.speech-page-prev {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.speech-page-next {
  width: 100%;
  height: 100%;
}

.speech-page-next svg {
  width: 36px;
  height: 36px;
}

.speech-page-prev {
  position: absolute;
  left: 9px;
  bottom: 8px;
  width: 22px;
  height: 22px;
  padding: 2px;
  opacity: .7;
}

.speech-page-prev svg {
  width: 15px;
  height: 15px;
}

.speech-empty {
  grid-column: 1 / -1;
  padding: 20px 2px;
  color: #999999;
}

@media (max-width: 1180px) {
  .speech-controls {
    grid-template-columns: minmax(180px, 1fr) 72px minmax(180px, 1fr);
  }

  .speech-volume-cluster {
    margin-right: 12px;
  }

  .speech-volume-range {
    width: 94px;
  }

  .speech-voice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}