:root {
  --background: oklch(1.0000 0 0);
  --foreground: oklch(0.1448 0 0);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.1448 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.1448 0 0);
  --primary: oklch(0.6489 0.1370 162.4);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9702 0 0);
  --secondary-foreground: oklch(0.2046 0 0);
  --muted: oklch(0.9702 0 0);
  --muted-foreground: oklch(0.5486 0 0);
  --accent: oklch(0.9702 0 0);
  --accent-foreground: oklch(0.2046 0 0);
  --destructive: oklch(0.5830 0.2387 28.4765);
  --destructive-foreground: oklch(0.9702 0 0);
  --border: oklch(0.9219 0 0);
  --input: oklch(0.9850 0 0);
  --ring: oklch(0.6489 0.1370 162.4);
  --chart-1: oklch(0.6489 0.1370 162.4);
  --chart-2: oklch(0.5555 0.1500 240);
  --chart-3: oklch(0.6200 0.1800 280);
  --chart-4: oklch(0.5500 0.2200 320);
  --chart-5: oklch(0.4900 0.2200 40);
  --sidebar: oklch(0.9851 0 0);
  --sidebar-foreground: oklch(0.1448 0 0);
  --sidebar-primary: oklch(0.6489 0.1370 162.4);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.9702 0 0);
  --sidebar-accent-foreground: oklch(0.2046 0 0);
  --sidebar-border: oklch(0.9219 0 0);
  --sidebar-ring: oklch(0.6489 0.1370 162.4);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 2px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.10);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.10), 0 2px 4px -2px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 10px 15px -3px hsl(0 0% 0% / 0.10), 0 4px 6px -4px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 20px 25px -5px hsl(0 0% 0% / 0.10), 0 8px 10px -6px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
  --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* Language Dropdown - Force visibility */
#language-dropdown-menu {
  background: #ffffff !important;
  z-index: 20 !important;
  /* Layer 20: Dropdowns (符合全局 z-index 层级系统) */
  position: absolute !important;
  border: 2px solid #e5e7eb !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

#language-dropdown-menu * {
  position: relative;
  z-index: 1;
}

#language-list li {
  background: white;
}

#language-list li:hover {
  background: #f0fdf4 !important;
  color: #16a34a !important;
}

/* ===================================
   Pause Menu Custom Styles
   =================================== */

/* Ensure pause dropdown button gradients are visible */
.slider-thumb::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 18px !important;
  width: 18px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  cursor: pointer;
  margin-top: -6px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  border: 3px solid white !important;
  transition: transform 0.15s ease;
}

.slider-thumb::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 3px 6px rgba(16, 185, 129, 0.4) !important;
}

.slider-thumb::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 6px !important;
  cursor: pointer;
  background: #e2e8f0 !important;
  border-radius: 9999px !important;
}

.slider-thumb::-moz-range-thumb {
  height: 18px !important;
  width: 18px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  cursor: pointer;
  border: 3px solid white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.slider-thumb::-moz-range-thumb:hover {
  transform: scale(1.15);
}

.slider-thumb::-moz-range-track {
  width: 100% !important;
  height: 6px !important;
  cursor: pointer;
  background: #e2e8f0 !important;
  border-radius: 9999px !important;
}

/* Force override for the custom pause insert button */
.btn-pause-insert-custom {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3) !important;
  display: flex !important;
}

.btn-pause-insert-custom:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.4) !important;
}

/* Ensure icons inside the button are white */
.btn-pause-insert-custom i,
.btn-pause-insert-custom svg {
  color: white !important;
  stroke: white !important;
}

/* ===================================
   Processing Button State Override
   =================================== */
.btn-processing-active {
  background: linear-gradient(90deg, #10b981 0%, #16a34a 100%) !important;
  color: #ffffff !important;
  cursor: wait !important;
  opacity: 1 !important;
  /* Override potential disabled opacity */
  border: none !important;
  /* Remove potential borders */
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3) !important;
}

/* Ensure icons are white */
.btn-processing-active i,
.btn-processing-active svg {
  color: white !important;
  stroke: white !important;
}

/* Indeterminate Progress Animation */
@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%) scaleX(0.2);
  }

  50% {
    transform: translateX(0%) scaleX(0.5);
  }

  100% {
    transform: translateX(100%) scaleX(0.2);
  }
}

.animate-progress-indeterminate {
  animation: progress-indeterminate 2s infinite linear;
  background: rgba(255, 255, 255, 0.3) !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  z-index: 10 !important;
}

/* ===================================
   Tool Page Feature Buttons
   =================================== */

.tool-feature-btn {
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.tool-feature-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.tool-feature-btn:hover::before {
  left: 100%;
}

.tool-feature-btn-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.tool-feature-btn-green:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
}

.tool-feature-btn-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.tool-feature-btn-blue:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-2px);
}

.tool-feature-btn-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.tool-feature-btn-purple:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  transform: translateY(-2px);
}

.tool-feature-btn i {
  color: white;
  stroke: white;
}

/* ===================================
   Tool Page Micro Features
   =================================== */

.tool-micro-feature {
  transition: all 0.2s ease;
}

.tool-micro-feature:hover {
  transform: translateY(-2px);
}

.tool-micro-feature i {
  transition: transform 0.2s ease;
}

.tool-micro-feature:hover i {
  transform: scale(1.15);
}

/* ===================================
   Clone Workspace Card Polish
   =================================== */

.tool-card {
  border-radius: 2.35rem !important;
  border-color: rgba(226, 232, 240, 0.95) !important;
  background:
    radial-gradient(260px circle at 100% 0%, rgba(16, 185, 129, 0.045), transparent 70%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 250, 0.78));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 24px 54px rgba(15, 23, 42, 0.07),
    0 8px 18px rgba(15, 23, 42, 0.035) !important;
  overflow: hidden;
}

.tool-card:hover {
  box-shadow:
    0 28px 62px rgba(15, 23, 42, 0.08),
    0 10px 22px rgba(15, 23, 42, 0.04) !important;
}

.tool-card .upload-option {
  border-radius: 1.35rem !important;
  border-color: #d8dee8 !important;
  background: rgba(248, 250, 252, 0.58);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tool-card .upload-option:hover {
  border-color: rgba(16, 185, 129, 0.55) !important;
  background: linear-gradient(145deg, rgba(240, 253, 244, 0.88), rgba(255, 255, 255, 0.94));
  box-shadow: 0 14px 30px rgba(16, 185, 129, 0.1);
  transform: translateY(-1px);
}

.tool-card .upload-option-icon {
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.08);
}

#voice-list-app > *,
#history-list-container > *,
#results-empty-state {
  border-radius: 1.35rem !important;
}

#generated-results-container > .bg-green-50\/50,
#generated-results-container > .history-item {
  border-radius: 1.35rem !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

#results-empty-state {
  border-color: rgba(226, 232, 240, 0.92) !important;
  background: linear-gradient(145deg, rgba(248, 250, 252, 0.58), rgba(255, 255, 255, 0.74)) !important;
}

/* ===================================
   Mobile Responsive Optimization
   Breakpoints: sm (640px), md (768px)
   =================================== */

@media (max-width: 768px) {

  /* ----- Hero Section Optimization ----- */
  /* Reduce hero title size on mobile to save vertical space */
  .tool-hero-title {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  /* Reduce hero subtitle/description size */
  .tool-hero-description {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }

  /* ----- Section Spacing Optimization ----- */
  /* Reduce vertical padding on major sections */
  .tool-section-spacing {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Reduce margin between sections */
  .tool-section-margin {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* ----- Card Padding Optimization ----- */
  /* Reduce card internal padding on mobile */
  .tool-card-mobile {
    padding: 1rem !important;
  }

  .tool-card-mobile-lg {
    padding: 1.25rem !important;
  }

  /* ----- Model Features Tags Optimization ----- */
  /* More compact tag layout on mobile */
  .tool-feature-tags {
    gap: 0.375rem !important;
  }

  .tool-feature-tags>* {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* ----- Steps Section Optimization ----- */
  /* Reduce step icon size on mobile */
  .tool-step-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }

  .tool-step-icon svg,
  .tool-step-icon i {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  /* Reduce step title size */
  .tool-step-title {
    font-size: 1rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* Reduce step description size */
  .tool-step-description {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }

  /* ----- Model Card Optimization ----- */
  /* Reduce model card padding */
  .tool-model-card {
    padding: 1rem !important;
  }

  /* Reduce model card title size */
  .tool-model-card-title {
    font-size: 1.1rem !important;
  }

  /* Reduce model card description */
  .tool-model-card-desc {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }

  /* ----- FAQ Section Optimization ----- */
  /* Tighter FAQ spacing */
  .tool-faq-item {
    padding: 0.875rem 1rem !important;
    margin-bottom: 0.5rem !important;
  }

  .tool-faq-title {
    font-size: 0.9rem !important;
  }

  .tool-faq-content {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  /* ----- General Settings Row Optimization ----- */
  /* Ensure settings row is more compact */
  .tool-settings-row {
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }

  .tool-settings-row>* {
    min-height: 2rem !important;
    font-size: 0.75rem !important;
  }

  /* ----- Upload Modal Optimization ----- */
  /* More compact format badges in upload modal */
  .tool-format-badge {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
  }

  /* ----- Typography Optimization ----- */
  /* Reduce section headings */
  .tool-section-heading {
    font-size: 1.25rem !important;
  }

  .tool-section-subheading {
    font-size: 0.85rem !important;
  }

  /* ----- Button Optimization ----- */
  /* Ensure buttons have adequate tap targets */
  .tool-btn-mobile {
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
  }

  /* ----- Feature Card Optimization ----- */
  /* Compact feature cards on mobile */
  .tool-feature-card {
    padding: 1rem !important;
  }

  .tool-feature-card-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  .tool-feature-card-title {
    font-size: 1rem !important;
    margin-top: 0.75rem !important;
  }

  .tool-feature-card-desc {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
}

/* Extra small screens (iPhone SE, etc.) */
@media (max-width: 480px) {

  /* Even smaller hero title */
  .tool-hero-title {
    font-size: 1.5rem !important;
  }

  /* Reduce padding further */
  .tool-card-mobile {
    padding: 0.75rem !important;
  }

  /* Smaller step icons */
  .tool-step-icon {
    width: 3rem !important;
    height: 3rem !important;
  }

  .tool-step-icon svg,
  .tool-step-icon i {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* More compact feature tags */
  .tool-feature-tags>* {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
  }
}

/* ===================================
   Auth Modal Mobile Optimization
   压缩认证弹窗在移动端的垂直空间占用
   =================================== */

@media (max-width: 640px) {

  /* Auth Modal - 整体顶部间距优化 */
  .auth-modal-container {
    padding-top: 1rem !important;
  }

  /* Auth Modal Header - 压缩 Logo + Title 区域 */
  .auth-modal-header {
    padding: 0.625rem 1rem !important;
    /* 原: px-6 py-4 (1.5rem 1rem) */
  }

  .auth-modal-header img {
    height: 1.5rem !important;
    /* 原: h-8 (2rem) */
  }

  .auth-modal-header h3 {
    font-size: 0.875rem !important;
    /* 原: text-lg (1.125rem) */
  }

  /* Auth Modal Body - 压缩 Title + Description 区域 */
  .auth-modal-body {
    padding: 0.75rem 1rem !important;
    /* 原: px-6 py-4 (1.5rem 1rem) */
  }

  .auth-modal-title-section {
    margin-bottom: 0.5rem !important;
    /* 原: mb-4 (1rem) */
  }

  .auth-modal-title-section h2 {
    font-size: 1rem !important;
    /* 原: text-xl (1.25rem) */
    margin-bottom: 0.25rem !important;
    /* 原: mb-2 (0.5rem) */
  }

  .auth-modal-title-section p {
    font-size: 0.75rem !important;
    /* 原: text-sm (0.875rem) */
    line-height: 1.3 !important;
  }

  /* Auth Modal iframe 容器 - 减小最小高度 */
  .auth-modal-iframe-container {
    min-height: 240px !important;
    /* 原: 280px */
  }

  .auth-modal-iframe-container iframe {
    min-height: 240px !important;
    /* 原: 280px */
  }

  /* Auth Modal Footer - 压缩按钮和提示区域 */
  .auth-modal-footer {
    padding: 0.75rem 1rem 1rem !important;
    /* 原: px-6 pb-6 */
  }

  .auth-modal-footer button {
    padding: 0.625rem 1rem !important;
    /* 原: py-3 px-6 */
    font-size: 0.875rem !important;
  }

  .auth-modal-footer .auth-modal-tip {
    padding: 0.5rem !important;
    /* 原: p-3 */
    margin-top: 0.5rem !important;
    /* 原: mt-4 */
  }

  .auth-modal-footer .auth-modal-tip p {
    font-size: 0.65rem !important;
    /* 原: text-xs (0.75rem) */
    line-height: 1.3 !important;
  }
}

/* ===================================
   ShareThis Card & Mascot Animation
   =================================== */

/* 简单的毛玻璃卡片样式 */
.share-glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
  border-radius: 1.5rem;
  transition: transform 0.3s ease;
}

/* 玩偶挥手动画关键帧 */
@keyframes wave-hand {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(14deg);
  }

  20% {
    transform: rotate(-8deg);
  }

  30% {
    transform: rotate(14deg);
  }

  40% {
    transform: rotate(-4deg);
  }

  50% {
    transform: rotate(10deg);
  }

  60% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* 默认状态 - 无动画 */
.animate-wave {
  transform-origin: 70% 70%;
  transition: transform 0.3s ease;
}

/* 悬停时触发动画 - 仅执行一次 */
.share-glass-card:hover .animate-wave {
  animation: wave-hand 2s ease-in-out;
}

/* ===================================
   Page Mode: clone tool theme tokens night / hc
   =================================== */
html[data-kiki-page-mode="night"] {
    --tool-surface: var(--kiki-night-surface);
    --tool-text: var(--kiki-night-text-primary);
}

html[data-kiki-page-mode="night"] .tool-card {
    background:
        radial-gradient(280px circle at 100% 0%, rgba(74, 222, 165, 0.08), transparent 72%),
        linear-gradient(145deg, rgba(39, 46, 43, 0.98), rgba(32, 37, 34, 0.98)) !important;
    border-color: var(--kiki-night-border) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
}

html[data-kiki-page-mode="night"] .tool-card:hover {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2) !important;
}

html[data-kiki-page-mode="night"] .tool-card .upload-option,
html[data-kiki-page-mode="night"] .share-glass-card {
    background: rgba(48, 57, 54, 0.92) !important;
    border-color: var(--kiki-night-border) !important;
    color: var(--kiki-night-text-primary) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .tool-card .upload-option:hover {
    background: rgba(57, 68, 64, 0.98) !important;
    border-color: rgba(74, 222, 165, 0.48) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22) !important;
}

html[data-kiki-page-mode="high_contrast"] {
    --tool-surface: var(--kiki-hc-surface);
    --tool-text: var(--kiki-hc-text-primary);
}

html[data-kiki-page-mode="high_contrast"] .tool-card,
html[data-kiki-page-mode="high_contrast"] .tool-card:hover,
html[data-kiki-page-mode="high_contrast"] .tool-card .upload-option,
html[data-kiki-page-mode="high_contrast"] .share-glass-card {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .tool-card .upload-option:hover {
    border-color: var(--kiki-hc-accent) !important;
    color: var(--kiki-hc-accent) !important;
}

html[data-kiki-page-mode="night"] #voice-list-app .voice-item {
    background: var(--kiki-night-surface-soft) !important;
    border-color: var(--kiki-night-border) !important;
    color: var(--kiki-night-text-primary) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] #voice-list-app .voice-item:hover,
html[data-kiki-page-mode="night"] #voice-list-app .voice-item.selected {
    background: var(--kiki-night-surface-raised) !important;
    border-color: var(--kiki-night-accent) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] #voice-list-app .voice-item {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] #voice-list-app .voice-item:hover,
html[data-kiki-page-mode="high_contrast"] #voice-list-app .voice-item.selected {
    background: #052e23 !important;
    border-color: var(--kiki-hc-accent) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] #voice-list-app .voice-item p,
html[data-kiki-page-mode="high_contrast"] #voice-list-app .voice-item p {
    color: #ffffff !important;
}

html[data-kiki-page-mode="night"] #voice-list-app .voice-item.selected [class*="bg-white"] {
    background: rgba(74, 222, 165, 0.12) !important;
    border-color: var(--kiki-night-accent) !important;
    color: var(--kiki-night-accent) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] #voice-list-app .voice-item.selected [class*="bg-white"] {
    background: #052e23 !important;
    border-color: var(--kiki-hc-accent) !important;
    color: var(--kiki-hc-accent) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] #voice-list-app .voice-item [class*="bg-green-500"],
html[data-kiki-page-mode="high_contrast"] #voice-list-app .voice-item [class*="bg-green-500"] {
    background: var(--kiki-hc-accent) !important;
    color: #000000 !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] #history-list-container .history-item {
    background: var(--kiki-night-surface-soft) !important;
    border-color: var(--kiki-night-border) !important;
    color: var(--kiki-night-text-primary) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] #history-list-container .history-item {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .clone-primary-action,
html[data-kiki-page-mode="high_contrast"] .clone-primary-action {
    background: var(--kiki-hc-accent) !important;
    border-color: var(--kiki-hc-accent) !important;
    color: #000000 !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .clone-primary-action span,
html[data-kiki-page-mode="night"] .clone-primary-action i,
html[data-kiki-page-mode="high_contrast"] .clone-primary-action span,
html[data-kiki-page-mode="high_contrast"] .clone-primary-action i {
    color: #000000 !important;
}

html[data-kiki-page-mode="night"] .step-indicator,
html[data-kiki-page-mode="high_contrast"] .step-indicator {
    background: var(--kiki-hc-accent) !important;
    color: #000000 !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] #results-empty-state {
    background: var(--kiki-night-surface-soft) !important;
    border-color: rgba(181, 199, 194, 0.42) !important;
    color: var(--kiki-night-text-secondary) !important;
}

html[data-kiki-page-mode="high_contrast"] #results-empty-state {
    background: #000000 !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
}

html[data-kiki-page-mode="night"] .st-btn,
html[data-kiki-page-mode="night"] .play-btn {
    background: var(--kiki-night-accent) !important;
    border-color: var(--kiki-night-accent-strong) !important;
    color: #06100d !important;
}

html[data-kiki-page-mode="night"] .format-btn.bg-white,
html[data-kiki-page-mode="night"] .audio-quality-btn.bg-white {
    background: var(--kiki-night-surface-raised) !important;
    border-color: var(--kiki-night-accent) !important;
    color: var(--kiki-night-accent) !important;
    box-shadow: inset 0 0 0 1px rgba(74, 222, 165, 0.18) !important;
}

html[data-kiki-page-mode="high_contrast"] .st-btn,
html[data-kiki-page-mode="high_contrast"] .play-btn {
    background: var(--kiki-hc-accent) !important;
    border: 2px solid #ffffff !important;
    color: #000000 !important;
}

html[data-kiki-page-mode="high_contrast"] .format-btn.bg-white,
html[data-kiki-page-mode="high_contrast"] .audio-quality-btn.bg-white {
    background: var(--kiki-hc-accent) !important;
    border-color: var(--kiki-hc-accent) !important;
    color: #000000 !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .tool-accordion-body span[class*="bg-"][class*="text-"] {
    background: #052e23 !important;
    color: var(--kiki-hc-accent) !important;
    border: 1px solid var(--kiki-hc-accent) !important;
}

html[data-kiki-page-mode="night"] .bg-gray-900.rounded-3xl {
    border: 1px solid var(--kiki-night-border) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .bg-gray-900.rounded-3xl .bg-gray-800\/50 {
    border-color: rgba(74, 222, 165, 0.24) !important;
}

html[data-kiki-page-mode="high_contrast"] .bg-gray-900.rounded-3xl {
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .bg-gray-900.rounded-3xl .bg-gray-800\/50 {
    background: #000000 !important;
    border-color: var(--kiki-hc-accent) !important;
}

html[data-kiki-page-mode="night"] footer {
    background: var(--kiki-night-surface) !important;
    border-top-color: var(--kiki-night-border) !important;
    color: var(--kiki-night-text-primary) !important;
}

html[data-kiki-page-mode="high_contrast"] footer {
    background: #000000 !important;
    border-top: 2px solid #ffffff !important;
    color: #ffffff !important;
}

html[data-kiki-page-mode="night"] .tts-clone-manager-container .bg-green-50\/50.rounded-3xl,
html[data-kiki-page-mode="high_contrast"] .tts-clone-manager-container .bg-green-50\/50.rounded-3xl {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .clone-model-overview-panel {
    background: var(--kiki-night-surface) !important;
    border-color: var(--kiki-night-border) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .clone-model-overview-card,
html[data-kiki-page-mode="night"] .clone-model-overview-card:hover {
    background: var(--kiki-night-surface-soft) !important;
    border-color: var(--kiki-night-border) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .clone-model-overview-icon,
html[data-kiki-page-mode="night"] .clone-model-overview-badge {
    background: rgba(74, 222, 165, 0.12) !important;
    border-color: rgba(74, 222, 165, 0.5) !important;
    color: var(--kiki-night-accent) !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-model-overview-panel {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-model-overview-card,
html[data-kiki-page-mode="high_contrast"] .clone-model-overview-card:hover {
    background: #000000 !important;
    border: 1px solid var(--kiki-hc-accent) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-model-overview-icon,
html[data-kiki-page-mode="high_contrast"] .clone-model-overview-badge {
    background: #052e23 !important;
    border-color: var(--kiki-hc-accent) !important;
    color: var(--kiki-hc-accent) !important;
}

/* Clone editor header shortcut and history controls */
.clone-step2-header {
    flex-wrap: wrap;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
}

.clone-step2-header > label {
    flex: 1 1 16rem;
    min-width: 0;
}

.clone-step2-header > label h2 {
    min-width: 0;
    overflow-wrap: anywhere;
}

.clone-quick-action {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    max-width: 100%;
    min-height: 2.25rem;
    margin-inline-start: auto;
    padding: 0.375rem 0.75rem;
    border: 1px solid #bbf7d0;
    border-radius: 0.5rem;
    background: rgba(240, 253, 244, 0.72);
    color: #047857;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    box-shadow: none;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.clone-quick-action:not(:disabled):hover {
    border-color: #86efac;
    background: #f0fdf4;
    color: #166534;
}

.clone-quick-action:focus-visible {
    outline: 2px solid #047857;
    outline-offset: 2px;
}

.clone-quick-action:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.clone-quick-action[aria-busy="true"] {
    cursor: wait;
}

.clone-quick-action-placeholder {
    visibility: hidden !important;
    pointer-events: none !important;
}

.clone-quick-action-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.clone-quick-action-spinner {
    animation: clone-quick-action-spin 0.8s linear infinite;
}

@keyframes clone-quick-action-spin {
    to {
        transform: rotate(360deg);
    }
}

html[data-kiki-page-mode="night"] .clone-quick-action {
    background: var(--kiki-night-surface-soft) !important;
    border-color: var(--kiki-night-border) !important;
    color: var(--kiki-night-accent) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .clone-quick-action:not(:disabled):hover {
    background: var(--kiki-night-surface-raised) !important;
    border-color: var(--kiki-night-accent) !important;
}

html[data-kiki-page-mode="night"] .clone-quick-action:disabled {
    border-color: rgba(181, 199, 194, 0.42) !important;
    color: rgba(181, 199, 194, 0.78) !important;
    opacity: 1 !important;
}

html[data-kiki-page-mode="night"] .clone-quick-action:focus-visible {
    outline-color: var(--kiki-night-accent) !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-quick-action {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-quick-action:not(:disabled):hover {
    background: #052e23 !important;
    border-color: var(--kiki-hc-accent) !important;
    color: var(--kiki-hc-accent) !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-quick-action:disabled {
    border-color: #737373 !important;
    color: #d4d4d4 !important;
    opacity: 1 !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-quick-action:focus-visible {
    outline-color: var(--kiki-hc-focus-ring) !important;
}

.clone-text-history-button:focus-visible {
    outline: 2px solid #047857;
    outline-offset: 2px;
}

.clone-text-editor-toolbar button:disabled:hover {
    background-color: transparent !important;
}

html[data-kiki-page-mode="night"] .clone-text-history-button {
    background: var(--kiki-night-surface-soft) !important;
    border-color: var(--kiki-night-border) !important;
    color: var(--kiki-night-text-secondary) !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="night"] .clone-text-history-button:not(:disabled):hover {
    background: var(--kiki-night-surface-raised) !important;
    border-color: var(--kiki-night-accent) !important;
    color: var(--kiki-night-accent) !important;
}

html[data-kiki-page-mode="night"] .clone-text-history-button:disabled {
    border-color: rgba(181, 199, 194, 0.42) !important;
    color: rgba(181, 199, 194, 0.68) !important;
    opacity: 1 !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-text-history-button {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-text-history-button:not(:disabled):hover {
    background: #052e23 !important;
    border-color: var(--kiki-hc-accent) !important;
    color: var(--kiki-hc-accent) !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-text-history-button:disabled {
    border-color: #737373 !important;
    color: #a3a3a3 !important;
    opacity: 1 !important;
}

html[data-kiki-page-mode="high_contrast"] .clone-text-history-button:focus-visible {
    outline-color: var(--kiki-hc-focus-ring) !important;
}

.clone-adv-title-accent {
    color: #4b5563;
}

html[data-kiki-page-mode="night"] .clone-adv-title-accent {
    color: var(--kiki-night-text-primary);
}

html[data-kiki-page-mode="high_contrast"] .clone-adv-title-accent {
    color: var(--kiki-hc-accent);
}

@media (max-width: 640px) {
    .clone-quick-action {
        min-height: 2.75rem;
        padding: 0.5rem 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clone-quick-action {
        transition: none;
    }

    .clone-quick-action-spinner {
        animation: none;
    }
}

@media (forced-colors: active) {
    .clone-quick-action {
        border-color: ButtonText;
        color: ButtonText;
        forced-color-adjust: auto;
    }
}

@media (max-width: 420px) {
    .clone-text-editor-toolbar {
        gap: 0.25rem;
    }

    .clone-text-toolbar-leading-icon,
    .clone-pause-button-label,
    .clone-pause-button-chevron {
        display: none !important;
    }

    .clone-pause-dropdown {
        right: -1.5rem !important;
        width: min(280px, calc(100vw - 3rem)) !important;
    }

    .tts-clone-manager-container button.w-full.flex.items-center.justify-between.p-5 {
        padding: 1rem !important;
    }

    .tts-clone-manager-container button.w-full.flex.items-center.justify-between.p-5
        > .flex.items-center.gap-3
        > .font-mono {
        display: none !important;
    }
}

/* Task waiting feedback: local to this page's existing terminal. */
#processing-terminal .kiki-task-busy-banner.kiki-task-wait-attention { animation: clone-task-wait-nudge 600ms ease-in-out 2; }
#processing-terminal .kiki-task-busy-banner.kiki-task-waiting .kiki-task-busy-banner__icon { animation: clone-task-wait-breathe 3s ease-in-out infinite; }
@keyframes clone-task-wait-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}
@keyframes clone-task-wait-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
    #processing-terminal .kiki-task-busy-banner.kiki-task-wait-attention,
    #processing-terminal .kiki-task-busy-banner.kiki-task-waiting .kiki-task-busy-banner__icon { animation: none; }
}
html[data-kiki-page-mode="high_contrast"] #processing-terminal .kiki-task-busy-banner.kiki-task-waiting .kiki-task-busy-banner__icon { animation: none; }

/* Commercial use section above the Clone FAQ. */
#clone-commercial {
    --clone-commercial-surface: #ffffff;
    --clone-commercial-soft: #f0fdf4;
    --clone-commercial-ink: #111827;
    --clone-commercial-copy: #4b5563;
    --clone-commercial-accent: #047857;
    --clone-commercial-positive: #bbf7d0;
    --clone-commercial-negative: #fecdd3;
    position: relative;
    padding: 5rem 0;
    background: linear-gradient(180deg, #f5faf8, #ffffff);
    color: var(--clone-commercial-ink);
}

#clone-commercial .clone-commercial-shell {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 2rem;
    overflow-wrap: anywhere;
}

#clone-commercial .clone-commercial-header {
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}

#clone-commercial .clone-commercial-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    color: var(--clone-commercial-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#clone-commercial .clone-commercial-kicker::before {
    content: "";
    width: 22px;
    height: 2px;
    flex-shrink: 0;
    border-radius: 2px;
    background: currentColor;
}

#clone-commercial h2 {
    margin: 0;
    color: var(--clone-commercial-ink);
    font-size: clamp(1.625rem, 2.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

#clone-commercial .clone-commercial-header p {
    margin: 1.25rem 0 0.5rem;
    color: var(--clone-commercial-copy);
    font-size: 1rem;
    line-height: 1.8;
}

#clone-commercial .clone-commercial-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    color: var(--clone-commercial-accent);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

#clone-commercial .clone-commercial-link:focus-visible {
    outline: 2px solid var(--clone-commercial-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

#clone-commercial .clone-commercial-policies {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

#clone-commercial .clone-commercial-policy {
    min-width: 0;
    padding: 1.75rem;
    border: 1px solid var(--clone-commercial-negative);
    border-radius: 1.5rem;
    background: var(--clone-commercial-surface);
}

#clone-commercial .clone-commercial-policy.is-do {
    border-color: var(--clone-commercial-positive);
    background: var(--clone-commercial-soft);
}

#clone-commercial .clone-commercial-policy h3 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    color: var(--clone-commercial-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

#clone-commercial .clone-commercial-policy ul {
    display: grid;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

#clone-commercial .clone-commercial-policy li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--clone-commercial-copy);
    font-size: 0.875rem;
    line-height: 1.75;
}

#clone-commercial .clone-commercial-policy li span { min-width: 0; }
#clone-commercial .clone-commercial-policy svg,
#clone-commercial .clone-commercial-link svg { width: 18px; height: 18px; flex-shrink: 0; }
#clone-commercial .clone-commercial-policy li svg { margin-top: 0.2rem; }

@media (max-width: 639px) {
    #clone-commercial { padding: 3.5rem 0; }
    #clone-commercial .clone-commercial-shell { padding-inline: 1rem; }
    #clone-commercial .clone-commercial-header p { font-size: 0.9375rem; }
    #clone-commercial .clone-commercial-policies { grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
    #clone-commercial .clone-commercial-policy { padding: 1.5rem; }
}

html[data-kiki-page-mode="night"] #clone-commercial {
    --clone-commercial-surface: var(--kiki-night-surface);
    --clone-commercial-soft: var(--kiki-night-surface-soft);
    --clone-commercial-ink: var(--kiki-night-text-primary);
    --clone-commercial-copy: var(--kiki-night-text-secondary);
    --clone-commercial-accent: var(--kiki-night-accent);
    --clone-commercial-positive: #285e4d;
    --clone-commercial-negative: #69424d;
    background: var(--kiki-night-page-bg);
}

html[data-kiki-page-mode="high_contrast"] #clone-commercial {
    --clone-commercial-surface: #000000;
    --clone-commercial-soft: #000000;
    --clone-commercial-ink: #ffffff;
    --clone-commercial-copy: #ffffff;
    --clone-commercial-accent: #6ee7b7;
    --clone-commercial-positive: #6ee7b7;
    --clone-commercial-negative: #fda4af;
    background: #000000;
}