:root {
  --bg: #f4f1ea;
  --card: #fffdf8;
  --ink: #1f1a14;
  --muted: #6b6258;
  --accent: #b45309;
  --accent-dark: #92400e;
  --border: #ddd4c6;
  --ok: #166534;
  --err: #b91c1c;
  --site-header-offset: 3.5rem;
  --nav-flyout-z: 10006;
}

* {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(180deg, #efe8db 0%, var(--bg) 180px);
  color: var(--ink);
  line-height: 1.5;
}

body > header {
  position: sticky;
  top: 0;
  z-index: 10000;
  padding: 0.7rem 0 0.65rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 253, 248, 0.92);
}

body > header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 253, 248, 0.9);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

body > header nav {
  position: relative;
  z-index: 10001;
}

.header-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0 1rem 0 0.25rem;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
  position: relative;
  z-index: 10002;
  overflow: visible;
}

body > header h1 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.header-libro-select {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 1 1 0;
  max-width: none;
}

.header-libro-select.hidden {
  display: none;
}

.header-libro-select select {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.28rem 0.55rem;
  border-radius: 0.4rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
}

.header-activity-status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 0 1 auto;
  max-width: min(14rem, 28vw);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.header-activity-status.header-activity-render {
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}

.header-activity-status.header-activity-book {
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fdba74;
}

.header-activity-status #header-activity-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-activity-status .render-spinner {
  display: none;
  flex-shrink: 0;
}

.header-activity-status-active .render-spinner {
  display: block;
}

.header-activity-render .render-spinner {
  border-color: #93c5fd;
  border-top-color: #1d4ed8;
}

.header-activity-book .render-spinner {
  border-color: #fdba74;
  border-top-color: #ea580c;
}

.header-activity-status-active.header-activity-render {
  animation: render-banner-pulse 2s ease-in-out infinite;
}

.header-activity-status-active.header-activity-book {
  animation: book-banner-pulse 2s ease-in-out infinite;
}

@keyframes book-banner-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
  50% { box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.14); }
}

/* legacy alias kept for chapters efficiency bar */
.global-render-status {
  display: none;
}

.book-render-live {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1d4ed8;
}

.render-spinner {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  border: 2px solid #93c5fd;
  border-top-color: #1d4ed8;
  animation: render-spin 0.75s linear infinite;
  flex-shrink: 0;
}

.render-spinner-sm {
  width: 0.72rem;
  height: 0.72rem;
  border-width: 1.5px;
  display: inline-block;
  vertical-align: -0.1em;
  margin-right: 0.3rem;
}

@keyframes render-spin {
  to { transform: rotate(360deg); }
}

.paragraph-list-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 9rem;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.hourglass-icon {
  width: 1.45rem;
  height: 1.45rem;
  color: #1d4ed8;
  flex-shrink: 0;
  animation: hourglass-flip 1.4s ease-in-out infinite;
}

@keyframes hourglass-flip {
  0%, 100% { transform: rotate(0deg); opacity: 1; }
  45% { transform: rotate(0deg); opacity: 0.85; }
  55% { transform: rotate(180deg); opacity: 0.85; }
  100% { transform: rotate(180deg); opacity: 1; }
}

#list.is-loading {
  min-height: 9rem;
}

@keyframes render-banner-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
  50% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
}

.nav-toast {
  position: relative;
  z-index: 10003;
  overflow: visible;
  flex: 0 0 auto;
}

.nav-toast[open] {
  z-index: 10004;
  overflow: visible;
}

.nav-toast > summary {
  list-style: none;
}

.nav-toast > summary::-webkit-details-marker {
  display: none;
}

.nav-toast-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.55rem 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 4px 14px rgba(31, 26, 20, 0.08);
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  user-select: none;
}

.nav-toast-toggle:hover {
  background: #f5efe4;
}

.nav-toast[open] > .nav-toast-toggle {
  background: #f5efe4;
  border-color: #cbb89f;
}

.nav-toast-icon {
  display: inline-block;
  width: 0.95rem;
  height: 0.72rem;
  background:
    linear-gradient(var(--accent-dark), var(--accent-dark)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--accent-dark), var(--accent-dark)) 0 50% / 100% 2px no-repeat,
    linear-gradient(var(--accent-dark), var(--accent-dark)) 0 100% / 100% 2px no-repeat;
}

.nav-toast-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 10005;
  isolation: isolate;
  min-width: 15.5rem;
  max-width: min(20rem, 92vw);
  overflow: visible;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--card);
  box-shadow: 0 12px 32px rgba(31, 26, 20, 0.16);
}

.nav-toast-panel__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  max-height: min(70vh, 32rem);
  overflow-x: visible;
  overflow-y: auto;
  padding: 0.5rem;
}

.nav-item,
.nav-dropdown > summary.nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

a.nav-item:hover,
.nav-dropdown > summary.nav-item:hover {
  background: #f5efe4;
  border-color: #e8dcc8;
}

.nav-item.active,
.nav-dropdown > summary.nav-item.active {
  background: #f5efe4;
  border-color: #d4b896;
  color: var(--accent-dark);
  box-shadow: inset 3px 0 0 var(--accent);
}

.nav-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.45rem;
  background: #f5efe4;
  color: var(--accent-dark);
}

.nav-item__icon svg {
  width: 1rem;
  height: 1rem;
}

.nav-item.active .nav-item__icon,
.nav-dropdown > summary.nav-item.active .nav-item__icon,
.nav-dropdown[open] > summary.nav-item .nav-item__icon {
  background: #fff7ed;
  color: var(--accent);
}

.nav-item__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.35rem;
  color: var(--muted);
  background: rgba(107, 98, 88, 0.08);
  transition: transform 0.15s ease, background 0.12s ease, color 0.12s ease;
}

.nav-item__chevron svg {
  width: 0.85rem;
  height: 0.85rem;
}

.nav-item--parent {
  position: relative;
}

.nav-item--parent::before {
  content: "";
  position: absolute;
  right: 2.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.45;
}

.nav-dropdown[open] > summary.nav-item--parent::before {
  opacity: 1;
}

.nav-dropdown[open] > summary.nav-item {
  background: #fff7ed;
  border-color: #f0d8b8;
  color: var(--accent-dark);
}

.nav-dropdown[open] > summary.nav-item .nav-item__chevron {
  transform: rotate(180deg);
  background: #fdebd0;
  color: var(--accent-dark);
}

.nav-dropdown[open] {
  background: #fffdf8;
  border-radius: 0.55rem;
  box-shadow: inset 0 0 0 1px #f0e4d2;
}

.nav-dropdown-active > summary.nav-item {
  background: #f5efe4;
  border-color: #d4b896;
}

.nav-section-divider {
  height: 1px;
  margin: 0.35rem 0.5rem;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.nav-dropdown {
  position: relative;
  overflow: visible;
}

.nav-toast-panel > .nav-dropdown[open] {
  z-index: var(--nav-flyout-z);
}

.nav-toast-panel > .nav-dropdown > .nav-dropdown-menu {
  position: static;
  z-index: auto;
  min-width: 0;
  margin: 0.1rem 0 0.35rem;
  padding: 0.2rem 0 0.35rem 0.35rem;
  border: none;
  border-left: 2px solid #e8dcc8;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.nav-dropdown > summary {
  list-style: none;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown-menu__title {
  margin: 0;
  padding: 0.35rem 0.95rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav-subitem {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 0.65rem 0.42rem 0.45rem;
  margin-left: 0.15rem;
  border-radius: 0.45rem;
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.86rem;
  white-space: nowrap;
  transition: background 0.12s ease;
}

.nav-subitem__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.4rem;
  background: #f5efe4;
  color: var(--accent-dark);
  transition: background 0.12s ease, color 0.12s ease;
}

.nav-subitem__icon svg {
  width: 0.88rem;
  height: 0.88rem;
}

.nav-subitem__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-subitem:hover {
  background: #f5efe4;
}

.nav-subitem:hover .nav-subitem__icon {
  background: #fff7ed;
  color: var(--accent);
}

.nav-subitem.active {
  background: #f5efe4;
  color: var(--accent-dark);
}

.nav-subitem.active .nav-subitem__icon {
  background: #fff7ed;
  color: var(--accent);
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.15);
}

/* legacy selectors kept for any page-specific overrides */
.main-nav > a,
.nav-dropdown > summary {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  white-space: inherit;
}

main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.25rem 1.5rem 3rem;
  position: relative;
  z-index: 0;
}

main header {
  position: static;
  z-index: auto;
  top: auto;
  padding: 0;
  border-bottom: none;
  background: transparent;
}

main header::before {
  display: none;
}

.editor-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 8px 400px;
  gap: 0;
  align-items: start;
}

.panel-paragraphs {
  min-width: 0;
}

.layout-resizer {
  position: relative;
  align-self: stretch;
  min-height: 12rem;
  cursor: col-resize;
  touch-action: none;
  z-index: 2;
}

.layout-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--border);
  transition: width 0.15s ease, background 0.15s ease;
}

.layout-resizer:hover::after,
.layout-resizer.is-dragging::after,
.layout-resizer:focus-visible::after {
  width: 3px;
  background: var(--accent);
}

.layout-resizer:focus-visible {
  outline: none;
}

.panel-title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

.panel-sidebar {
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 6.5rem);
  overflow: auto;
  padding-left: 0.75rem;
  min-width: 0;
}

.sidebar-section + .sidebar-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.voices-table,
.pronunciation-table {
  width: 100%;
}

.panel-voice-cloning-lab {
  max-width: 1400px;
}

.voice-cloning-lab-layout {
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.voice-cloning-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.voice-cloning-main {
  min-width: 0;
}

.voice-cloning-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.voice-cloning-sidebar-header h3 {
  margin: 0;
}

.voice-cloning-list-empty {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

.voice-cloning-voice-grid-wrap {
  max-height: min(70vh, 720px);
  overflow: auto;
  margin: 0 -0.15rem;
  padding: 0 0.15rem;
}

.voice-cloning-voice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.voice-cloning-voice-cell {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.voice-cloning-voice-cell.is-active {
  border-color: var(--accent);
  background: #f3ebe0;
}

.voice-cloning-voice-cell.is-active .voice-cloning-name-btn {
  color: var(--accent-dark);
  font-weight: 600;
}

.voice-cloning-play-btn {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
}

.voice-cloning-play-btn.is-playing {
  border-color: var(--accent);
  background: #f3ebe0;
  color: var(--accent-dark);
}

.voice-cloning-name-btn {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 0.1rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  word-break: break-word;
}

.voice-cloning-name-btn:hover,
.voice-cloning-name-btn:focus-visible {
  color: var(--accent-dark);
  outline: none;
  text-decoration: underline;
}

.voice-default-star {
  color: var(--accent);
  font-size: 0.82em;
}

.voice-sidebar-preview {
  display: none;
}

.voice-cloning-list-item {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
}

.voice-cloning-list-item .voice-tts-voice-btn {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.voice-cloning-voice-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.voice-cloning-voice-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  grid-column: 1;
}

.voice-cloning-voice-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}

.voice-cloning-voice-card .tts-voice-preview,
.voice-cloning-original-sample {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.voice-cloning-original-sample {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #faf8f5;
}

.voice-cloning-sample-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.voice-sample-filename {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text);
  word-break: break-all;
}

.voice-original-preview {
  width: 100%;
  min-height: 2.5rem;
}

.voice-cloning-voice-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.voice-source-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.voice-source-option {
  display: block;
  cursor: pointer;
}

.voice-source-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.voice-source-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  min-height: 100%;
}

.voice-source-option input:checked + .voice-source-card {
  border-color: var(--accent, #3b82f6);
  background: color-mix(in srgb, var(--accent, #3b82f6) 8%, transparent);
}

.voice-source-card small {
  color: var(--muted);
  font-size: 0.8rem;
}

.voice-source-form.hidden {
  display: none;
}

.voice-source-badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0 0.35rem;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #4285f4;
  color: #fff;
  vertical-align: middle;
}

.el-hint-ok {
  color: var(--ok, #16a34a);
  font-size: 0.85rem;
}

.voice-cloning-tts-heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.panel-voices {
  max-width: 1100px;
}

.panel-voice-tts-defaults {
  max-width: 1200px;
}

.voice-tts-defaults-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.voice-tts-voice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.voice-tts-voice-btn {
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}

.voice-tts-voice-btn.is-active {
  border-color: var(--accent);
  background: #f3ebe0;
  color: #000;
}

.voice-tts-sidebar-hint {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.voice-tts-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.voice-tts-engine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.75rem;
}

.voice-tts-params-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.voice-tts-param-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.voice-tts-param-row select {
  width: 100%;
}

.voice-tts-preview-block {
  margin-bottom: 0.75rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
}

.voice-tts-preview-hint {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.voice-tts-preview-toolbar {
  margin-bottom: 0.45rem;
}

.voice-tts-preview-audio {
  width: 100%;
  min-height: 2.5rem;
}

.voice-tts-moss-instructions-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.55rem;
  font-size: 0.85rem;
}

.voice-tts-moss-instructions-label .inline-input {
  width: 100%;
}

.toolbar-link-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.panel-chapters {
  width: 100%;
  max-width: none;
}

.panel-config-defaults {
  max-width: 1100px;
}

.config-defaults-sections {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.config-defaults-card {
  padding: 0.65rem 0.75rem;
}

.config-defaults-card h3 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.config-defaults-card .tts-params-grid-side {
  max-height: none;
  overflow: visible;
}

.panel-tts-test {
  max-width: 1280px;
}

.panel-moss-tts-test .moss-markup-hint,
.panel-fish-tts-test .moss-markup-hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

.panel-moss-tts-test .moss-markup-hint code,
.panel-fish-tts-test .moss-markup-hint code {
  font-size: 0.8rem;
}

.panel-fish-tts-test .fish-instance-label {
  display: block;
  margin-top: 0.5rem;
}

.panel-fish-tts-test .fish-instance-select {
  width: 100%;
  margin-bottom: 0.75rem;
}

.panel-tts-test .tts-layout-params {
  position: sticky;
  top: calc(var(--site-header-offset) + 0.35rem);
  z-index: 2;
  align-self: start;
  max-height: calc(100vh - var(--site-header-offset) - 1rem);
  overflow: auto;
}

.tts-layout-row {
  display: grid;
  grid-template-columns: minmax(420px, 52%) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  margin-bottom: 1rem;
}

.tts-layout-params {
  min-width: 0;
}

.tts-layout-params .card {
  margin-bottom: 0.5rem;
  padding: 0.55rem 0.65rem;
}

.tts-layout-params .card:last-child {
  margin-bottom: 0;
}

.tts-layout-params .card-header {
  margin-bottom: 0.4rem;
  gap: 0.35rem;
}

.tts-layout-params .card-header h3 {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.2;
}

.tts-params-grid-connection {
  grid-template-columns: 1fr;
  max-height: none;
  overflow: visible;
}

.tts-layout-params .card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  line-height: 1.2;
  font-weight: 700;
}

.tts-layout-row > .tts-main-block {
  margin-bottom: 0;
}

.tts-params-grid-side {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem 0.4rem;
  max-height: min(82vh, 760px);
  overflow-y: auto;
  padding-right: 0.1rem;
  line-height: 1.15;
}

.tts-layout-params .param-row-compact {
  gap: 0.1rem;
  padding: 0.28rem 0.35rem;
  border-radius: 5px;
}

.tts-layout-params .param-row-compact-head {
  min-height: 0;
}

.tts-layout-params .param-compact-name {
  min-width: 0;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.tts-layout-params .param-row-compact-field {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.tts-layout-params .param-row-compact-field .param-enable-inline {
  flex-shrink: 0;
}

.tts-layout-params .param-row-compact-field input[type="text"],
.tts-layout-params .param-row-compact-field input[type="number"],
.tts-layout-params .param-row-compact-field select {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.12rem 0.3rem;
  font-size: 0.72rem;
  line-height: 1.15;
  height: 1.35rem;
}

.tts-layout-params .param-row-compact-field input[type="checkbox"] {
  margin: 0;
  width: 0.85rem;
  height: 0.85rem;
}

.tts-layout-params .param-label {
  font-size: 0.68rem;
  line-height: 1.1;
  word-break: break-all;
}

.tts-layout-params .param-enable-inline {
  flex-shrink: 0;
  flex-direction: row !important;
  align-items: center;
  gap: 0.15rem !important;
  margin: 0;
  font-size: 0.62rem;
  line-height: 1;
  font-weight: 600;
  color: var(--muted);
}

.tts-layout-params .param-enable-inline input {
  margin: 0;
  width: 0.75rem;
  height: 0.75rem;
}

.tts-layout-params .param-enable-text {
  font-size: 0.62rem;
}

.tts-layout-params .param-row-compact-bool {
  gap: 0.1rem;
}

.tts-layout-params .param-row-compact-bool .param-row-compact-field {
  padding-left: 0;
}

.tts-test-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.tts-test-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

.tts-tune-params-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 0.85rem;
  align-items: start;
}

.tts-tune-params-row .param-row-tune {
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fffaf3;
}

.tts-tune-params-row .param-label {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  word-break: normal;
}

.tts-tune-params-row .param-row-compact-field input[type="text"],
.tts-tune-params-row .param-row-compact-field input[type="number"],
.tts-tune-params-row .param-row-compact-field select {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.28rem 0.45rem;
  font-size: 0.82rem;
  line-height: 1.2;
  height: auto;
  min-height: 1.75rem;
}

.tts-span-2 {
  grid-column: span 2;
}

.tts-text-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tts-text-field-toolbar {
  display: flex;
  justify-content: flex-end;
}

.tts-text-field textarea {
  width: 100%;
  min-height: 7.5rem;
  resize: vertical;
}

.tts-check {
  align-self: end;
  flex-direction: row !important;
  align-items: center;
  gap: 0.5rem !important;
  font-weight: 600;
}

.tts-params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem 1rem;
}

.param-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fffaf3;
}

.param-row label {
  font-weight: 600;
}

.param-label {
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.82rem;
}

.param-desc {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}

.param-enable {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  flex-direction: row !important;
  align-items: center;
  gap: 0.35rem;
}

.tts-main-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tts-submit-bar {
  margin-top: 0.5rem;
}

.tts-submit-inline {
  margin-top: 0.85rem;
  margin-bottom: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  border-bottom: none;
}

#tts-result.tts-subsection .tts-audio-player {
  margin-top: 0;
}

.tts-subsection {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.tts-subsection-title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.tts-audio-player {
  width: 100%;
  margin: 0.5rem 0 0.75rem;
}

.tts-request-details {
  margin-top: 0.65rem;
}

.tts-request-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
}

.tts-request-details pre,
.moss-request-json-pre {
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  background: #1f1a14;
  color: #f8f4ec;
  border-radius: 8px;
  font-size: 0.78rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

#moss-request-json-section .card-header,
#fish-request-json-section .card-header {
  margin-bottom: 0.35rem;
}

#moss-request-json-section .tts-subsection-title,
#fish-request-json-section .tts-subsection-title {
  margin: 0;
}

.tts-layout-params .moss-request-json-pre,
#moss-request-payload,
#fish-request-payload {
  max-height: 22rem;
  overflow-y: auto;
}

.ghost-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.3rem 0.65rem;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
}

.ghost-btn:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

@media (max-width: 1100px) {
  .tts-layout-row {
    grid-template-columns: minmax(320px, 46%) minmax(0, 1fr);
  }

  .tts-params-grid-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .tts-layout-row {
    grid-template-columns: 1fr;
  }

  .tts-params-grid-side {
    max-height: none;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voice-cloning-lab-layout {
    grid-template-columns: 1fr;
  }

  .voice-cloning-voice-grid {
    grid-template-columns: 1fr;
  }

  .voice-cloning-voice-grid-wrap {
    max-height: min(40vh, 420px);
  }
}

@media (max-width: 560px) {
  .tts-params-grid-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .tts-test-grid {
    grid-template-columns: 1fr;
  }

  .tts-span-2 {
    grid-column: span 1;
  }

  .tts-tune-params-row {
    grid-template-columns: 1fr;
  }
}

.chapters-page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.chapters-page-header .panel-title {
  margin: 0;
}

.chapters-page-header .panel-lead {
  margin: 0;
  flex: 1 1 20rem;
  text-align: right;
}

.panel-lead {
  margin: 0 0 1rem;
  color: var(--muted);
}

.render-efficiency-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.render-efficiency-bar-active {
  color: #1e3a8a;
  background: #eff6ff;
  border-color: #bfdbfe;
  animation: render-banner-pulse 2s ease-in-out infinite;
}

.render-efficiency-bar-active .render-efficiency-metrics {
  color: #1e3a8a;
}

.render-efficiency-bar:not(.render-efficiency-bar-active) .render-spinner {
  display: none;
}

.render-efficiency-metrics {
  font-size: 0.84rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
}

#chapter-job-bar {
  flex-wrap: wrap;
}

.chapter-job-metrics {
  flex: 1 1 16rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #1e3a8a;
  line-height: 1.4;
}

.chapter-job-progress {
  flex: 1 1 10rem;
  max-width: 18rem;
}

.status.running {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.chapter-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin: 0;
}

.chapter-stats div {
  margin: 0;
}

.chapter-stats dt {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.chapter-stats dd {
  margin: 0.15rem 0 0;
  font-size: 1.15rem;
  font-weight: 600;
}

.chapter-warning {
  margin: 1rem 0 0.35rem;
  color: var(--accent-dark);
}

.chapter-missing {
  margin: 0;
  font-size: 0.9rem;
}

.chapter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.button-link {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.button-link:hover {
  background: var(--accent-dark);
}

.chapter-preview {
  display: block;
  width: 100%;
  margin-top: 1rem;
}

.chapters-table-wrap {
  overflow-x: auto;
}

.chapters-table {
  width: 100%;
  min-width: 72rem;
  border-collapse: collapse;
  table-layout: fixed;
}

.chapters-table col.col-cap {
  width: 45%;
}

.chapters-table col.col-render {
  width: 15%;
}

.chapters-table col.col-mp3 {
  width: 15%;
}

.chapters-table col.col-listen {
  width: 25%;
}

.chapters-table th,
.chapters-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: left;
  overflow: hidden;
}

.chapters-table th {
  position: relative;
  font-size: 0.85rem;
  color: var(--muted);
  white-space: nowrap;
}

.chapter-name-cell {
  min-width: 0;
}

.chapter-name-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.chapter-edit-link {
  flex-shrink: 0;
  color: inherit;
  text-decoration: none;
}

.chapter-edit-link:hover strong,
.chapter-edit-link:focus-visible strong {
  color: #1d4ed8;
  text-decoration: underline;
}

.chapter-name-row strong {
  flex-shrink: 0;
  font-size: 0.95rem;
}

.chapter-name-row .progress-bar-compact {
  flex: 0 0 7rem;
  width: 7rem;
  max-width: 7rem;
  margin: 0;
}

.chapter-row-meta {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.chapter-row-mp3 {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chapters-table tbody tr.chapter-row-rendering {
  background: #eff6ff;
}

.chapters-table tbody tr.chapter-row-rendering .chapter-name-row .chapter-edit-link strong::after,
.chapters-table tbody tr.chapter-row-rendering .chapter-name-row strong::after {
  content: " · in corso";
  font-size: 0.78rem;
  font-weight: 600;
  color: #1d4ed8;
}

.chapter-player-cell {
  min-width: 0;
  vertical-align: middle;
}

.chapter-player-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  min-width: 0;
}

.chapter-mp3-created {
  font-size: 0.75rem;
  white-space: nowrap;
}

.chapter-player-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}

.chapter-player {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 2.25rem;
}

.chapter-player-controls .chapter-download-link,
.chapter-player-controls .download-multitrack-btn,
.chapter-player-controls .delete-mp3-btn {
  flex-shrink: 0;
}

.chapters-table .icon-btn {
  width: 2rem;
  height: 2rem;
}

.chapter-concat-cell {
  min-width: 0;
}

.chapter-actions-cell > .cell-row,
.chapter-concat-cell > .cell-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.auto-mp3-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--muted, #6b6256);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.auto-mp3-label input {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  cursor: pointer;
}

.chapters-table button {
  white-space: nowrap;
  padding: 0.35rem 0.65rem;
  font-size: 0.85rem;
}

.chapters-sticky-head {
  position: sticky;
  top: var(--site-header-offset);
  z-index: 8;
  margin: 0 0 0.75rem;
  padding-bottom: 0.35rem;
  background: linear-gradient(180deg, var(--bg) 78%, rgba(244, 241, 234, 0));
}

.chapters-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.75rem;
  margin-bottom: 0.65rem;
}

.chapters-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.chapters-mp3-total-duration {
  font-size: 0.9rem;
  white-space: nowrap;
  padding: 0.35rem 0.15rem;
}

.book-progress-card {
  margin-bottom: 0;
  padding: 0.85rem 1rem;
  box-shadow: 0 6px 18px rgba(31, 26, 20, 0.06);
}

.book-progress-card.hidden {
  display: none;
}

.book-progress-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.book-progress-header h3 {
  margin: 0;
  font-size: 0.95rem;
}

.book-progress-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.book-progress-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-dark);
  white-space: nowrap;
}

.chapter-actions-cell {
  min-width: 0;
}

.chapter-actions-cell > .cell-row {
  gap: 0.35rem;
}

.stop-render-btn {
  color: var(--err);
  border: 1px solid #fecaca;
  background: #fff;
}

.stop-render-btn:hover:not(:disabled),
.stop-render-btn:focus-visible:not(:disabled) {
  background: #fef2f2;
  outline: none;
}

.stop-render-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.render-all-book-btn {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.render-all-book-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.rerender-all-book-btn {
  font-size: 0.82rem;
}

.rerender-chapter-btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
}

.book-progress-meta {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
}

.progress-bar {
  display: flex;
  width: 100%;
  height: 0.85rem;
  overflow: hidden;
  border-radius: 999px;
  background: #e7dfd2;
  border: 1px solid var(--border);
}

.progress-bar-compact {
  height: 0.55rem;
  margin: 0.35rem 0 0.2rem;
  max-width: 18rem;
}

.progress-bar-empty {
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 1.5rem;
  font-size: 0.78rem;
}

.progress-segment {
  height: 100%;
  min-width: 0;
  transition: width 0.35s ease;
}

.progress-done {
  background: #86efac;
}

.progress-pending {
  background: linear-gradient(90deg, #fdba74, #fb923c);
}

.progress-remaining {
  background: transparent;
}

.progress-bar-active .progress-pending {
  background-size: 1rem 1rem;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.35) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.35) 75%,
    transparent 75%,
    transparent
  );
  animation: progress-pending-stripes 0.8s linear infinite;
}

@keyframes progress-pending-stripes {
  from { background-position: 0 0; }
  to { background-position: 1rem 0; }
}

.voice-name-cell {
  width: 10rem;
  vertical-align: top;
}

.voice-ref-text-cell {
  min-width: 18rem;
  vertical-align: top;
}

.voice-ref-text {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  font: inherit;
  line-height: 1.4;
}

.voice-upload-card {
  margin-bottom: 1rem;
}

.voice-upload-form {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(14rem, 1fr) minmax(12rem, 16rem) auto;
  gap: 0.75rem;
  align-items: end;
}

.voice-upload-form label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.voice-upload-form input[type="file"],
.voice-upload-form input[type="text"],
.voice-upload-form textarea {
  width: 100%;
  font: inherit;
}

.voice-uid {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: ui-monospace, monospace;
  word-break: break-all;
}

@media (max-width: 900px) {
  .voice-upload-form {
    grid-template-columns: 1fr;
  }
}

.voice-preview-cell audio {
  width: 100%;
  min-width: 5rem;
  height: 1.75rem;
}

.voice-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.voice-label select {
  min-width: 9rem;
  width: 100%;
}

.pronunciation-table-wrap {
  overflow-x: auto;
}

#table-wrap.pronunciation-table-wrap {
  /* ~10 righe visibili + intestazione; il filtro riduce l'elenco */
  max-height: calc(2.25rem + 10 * 2.9rem);
  overflow-y: auto;
  margin-top: 0.25rem;
}

#table-wrap .pronunciation-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  box-shadow: 0 1px 0 var(--border);
}

.card-compact {
  padding: 0.75rem;
}

#pronuncia .card-compact {
  position: sticky;
  top: 0;
  z-index: 4;
  margin-bottom: 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(31, 26, 20, 0.06);
}

.accent-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.12rem;
  width: 100%;
  margin-bottom: 0.35rem;
}

.accent-chips-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.1rem;
}

.accent-chip,
button.accent-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.2rem;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.accent-chip:hover,
.accent-chip:focus-visible,
button.accent-chip:hover,
button.accent-chip:focus-visible {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: #ffedd5;
  outline: none;
}

.accent-chip-copied,
button.accent-chip-copied {
  border-color: var(--ok);
  color: var(--ok);
  background: #dcfce7;
}

#moss-pronuncia-section .moss-accent-chips-hint {
  margin: -0.35rem 0 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
}

#moss-pronuncia-section .moss-accent-chips {
  align-items: flex-start;
  padding: 0.55rem 0.6rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(31, 26, 20, 0.05);
}

#moss-pronuncia-section .accent-chips-row {
  justify-content: flex-start;
  gap: 0.2rem;
}

.toolbar-compact label input,
.toolbar-compact label select {
  min-width: 0;
  width: 100%;
}

.toolbar-compact {
  margin-bottom: 0.75rem;
}

.stress-dict-wrap {
  max-height: 280px;
  overflow-y: auto;
  margin-top: 0.5rem;
}

.stress-dict-section {
  margin-top: 0.75rem;
}

.toolbar-compact .pronuncia-lookup-btn {
  width: 2.2rem;
  height: 2.2rem;
  flex-shrink: 0;
}

#pronuncia .pronuncia-form-toolbar {
  gap: 0.35rem;
  margin-bottom: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

#pronuncia .pronuncia-field-label {
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  margin: 0;
  white-space: nowrap;
}

#pronuncia .pronuncia-field-label input {
  width: 5.25rem;
  min-width: 5.25rem;
  max-width: 5.25rem;
  padding: 0.22rem 0.35rem;
  font-size: 0.78rem;
  border-radius: 5px;
}

#pronuncia .pronuncia-form-toolbar .pronuncia-lookup-btn {
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
}

#pronuncia .pronuncia-form-toolbar .pronuncia-lookup-btn .btn-icon {
  width: 0.9rem;
  height: 0.9rem;
}

#pronuncia .pronuncia-add-btn {
  padding: 0.24rem 0.45rem;
  font-size: 0.75rem;
  border-radius: 5px;
  line-height: 1.2;
}

.pronunciation-table th,
.pronunciation-table td {
  padding: 0.45rem 0.5rem;
  font-size: 0.9rem;
  vertical-align: middle;
}

.pronunciation-table th {
  text-align: left;
  white-space: nowrap;
}

.pronunciation-th-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pronunciation-th-label {
  font-weight: 600;
}

.sort-th {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

.sort-th:hover,
.sort-th:focus-visible {
  color: var(--accent-dark);
  outline: none;
}

.sort-th-count {
  min-width: 1.75rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--accent-dark);
  background: #ffedd5;
}

.pronunciation-table .inline-input {
  min-width: 0;
  box-sizing: border-box;
}

.pronunciation-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

.pronunciation-row-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}

.pronunciation-table .inline-input.parola,
.pronunciation-table .inline-input.pronuncia {
  width: 7rem;
  max-width: 7rem;
  flex: 0 0 7rem;
}

.pronunciation-row .icon-btn {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.pronunciation-row .save-pron:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.pronunciation-row .delete-pron {
  color: var(--err);
  border-color: #fecaca;
  background: #fff;
}

.pronunciation-row .row-status {
  font-size: 0.75rem;
  max-width: 4.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1;
}

.pronunciation-row .preview-audio {
  display: none;
}

.actions-cell {
  white-space: nowrap;
}

.actions-cell button {
  padding: 0.35rem 0.55rem;
  font-size: 0.85rem;
}

.keyword-filter-label input {
  min-width: 195px;
}

.keyword-filter-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.keyword-filter-row input {
  flex: 1;
  min-width: 0;
}

.keyword-search-btn {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  min-width: 2.2rem;
  padding: 0;
}

.keyword-replace-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}

.match-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 1.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: #ffedd5;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.match-count:hover,
.match-count:focus-visible {
  background: #fed7aa;
  outline: none;
}

@media (max-width: 1100px) {
  .editor-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .layout-resizer {
    display: none;
  }

  .panel-sidebar {
    position: static;
    max-height: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
  }
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  margin-bottom: 1rem;
}

.panel-paragraphs .toolbar {
  position: sticky;
  top: 5.5rem;
  z-index: 6;
  margin-top: -0.25rem;
  padding: 0.5rem 0 0.75rem;
  background: rgba(244, 241, 234, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.toolbar-select-with-action {
  min-width: min(100%, 14rem);
}

.toolbar-select-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.toolbar-select-row select {
  flex: 1;
  min-width: 0;
}

.toolbar-add-btn {
  flex: 0 0 auto;
  width: 2.1rem;
  min-width: 2.1rem;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.toolbar-defaults-row {
  flex-basis: 100%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem 2rem;
}

.default-voice-label,
.default-tts-engine-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  flex: 0 1 auto;
}

.default-voice-controls,
.default-tts-engine-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.default-voice-controls select {
  flex: 1;
  min-width: 10rem;
  max-width: 20rem;
}

.default-tts-engine-controls select {
  flex: 1;
  min-width: 6rem;
  max-width: 10rem;
}

.apply-default-voice-btn,
.default-voice-play-btn,
.apply-default-clone-param-btn,
.apply-default-tts-engine-btn {
  flex-shrink: 0;
  align-self: center;
}

.default-voice-preview {
  display: none;
}

.default-voice-play-btn.is-playing {
  background: var(--accent, #3b82f6);
  color: #fff;
}

.default-clone-params-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
}

.toolbar-defaults-heading {
  font-size: 0.9rem;
  color: var(--text-muted, #5c574f);
}

.default-clone-params-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.default-clone-param-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  min-width: 0;
}

.default-clone-param-item-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.default-clone-param-item .control-label {
  font-size: 0.75rem;
  color: var(--text-muted, #5c574f);
  line-height: 1;
}

.default-clone-param-item select {
  min-width: 4.5rem;
  max-width: 6rem;
}

.chapter-track-preview-controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  flex-shrink: 0;
}

.chapter-track-preview-btn.active {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.chapter-track-preview-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chapter-track-preview-status {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1d4ed8;
  white-space: nowrap;
}

.chapter-track-preview-status.hidden {
  display: none;
}

#chapter-track-preview {
  display: none;
}

.card.preview-playing {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.toolbar-check {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.2rem;
  padding-bottom: 0.15rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.toolbar-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}

.stati-filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 9rem;
}

.stati-filter-label {
  font-size: 0.85rem;
  color: var(--muted);
}

.stati-filter-dropdown {
  position: relative;
}

.stati-filter-dropdown summary {
  list-style: none;
  cursor: pointer;
  min-height: 2.2rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: #fff;
  font-size: 0.9rem;
  white-space: nowrap;
}

.stati-filter-dropdown summary::-webkit-details-marker {
  display: none;
}

.stati-filter-dropdown[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.stati-filter-options {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 12;
  min-width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 0.45rem 0.45rem;
  background: #fff;
  box-shadow: 0 8px 20px rgba(31, 26, 20, 0.08);
}

.stati-filter-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
}

.stati-filter-option input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  cursor: pointer;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
}

select,
input[type="text"],
input[type="search"],
textarea {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  min-width: 180px;
}

textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}

button,
.btn {
  font: inherit;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
}

button.secondary {
  background: #e7dfd2;
  color: var(--ink);
}

button.danger {
  background: #8b2e2e;
  color: #fff;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 24px rgba(31, 26, 20, 0.05);
}

.card h2,
.card h3 {
  margin: 0;
  font-size: 1rem;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.card-header-title {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex: 1;
  min-width: 0;
}

.card-header-title h3,
.card-header h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.card-header-title h3 {
  flex: 0 1 auto;
}

.paragraph-qa-dot {
  flex-shrink: 0;
  align-self: center;
}

.paragraph-handlers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0.15rem 0 0.45rem;
}

.paragraph-handler-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
}

.paragraph-progressive-duration {
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.card-header-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.card-header-status .text-stats {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1.3;
}

.render-timestamp {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.render-status {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.render-pending {
  color: #9a3412;
  background: #ffedd5;
  border-color: #fdba74;
}

.render-running {
  display: inline-flex;
  align-items: center;
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #93c5fd;
  animation: render-badge-pulse 1.6s ease-in-out infinite;
}

.card.render-active {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12), 0 8px 24px rgba(29, 78, 216, 0.08);
}

@keyframes render-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

.render-ready {
  color: var(--ok);
  background: #dcfce7;
  border-color: #86efac;
}

.card.stato-approvato {
  border-color: #86efac;
  box-shadow: 0 8px 24px rgba(22, 101, 52, 0.08);
}

.card.card-escluso {
  opacity: 0.45;
  border-color: #f87171;
  border-style: dashed;
}

.card.card-escluso .paragraph-edit textarea,
.card.card-escluso .paragraph-controls-row {
  pointer-events: none;
}

.card.card-escluso:hover {
  opacity: 0.7;
}

.escluso-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
  padding: 0.1em 0.45em;
  vertical-align: middle;
  margin-left: 0.35rem;
}

.escluso-toggle {
  flex-shrink: 0;
}

.insert-paragraph-row {
  display: flex;
  justify-content: center;
  height: 6px;
  position: relative;
}

.insert-paragraph-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  background: var(--card-bg, #fff);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s, background 0.12s;
  z-index: 1;
}

.insert-paragraph-row:hover .insert-paragraph-btn,
.insert-paragraph-btn:focus {
  opacity: 1;
}

.insert-paragraph-btn:hover {
  color: #fff;
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
}

.paragraph-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
}

.render-log-btn {
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.stato-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.stato-label select {
  min-width: 9.5rem;
}

.meta {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.paragraph-edit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.text-highlight-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
}

.text-highlight-inner {
  position: relative;
  width: 100%;
  min-width: 0;
}

.text-highlight-wrap.text-modified .text-highlight-inner .text,
.text-highlight-wrap.text-modified .text-highlight-inner .text-highlight {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.text-highlight-wrap .text-highlight .text-diff-added {
  background: #86efac;
  color: #14532d;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.text-highlight-wrap .text-highlight .text-diff-changed {
  background: #fde047;
  color: #713f12;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.text-diff-removed-hint {
  margin: 0 0 0.35rem;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #7f1d1d;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.text-diff-removed-hint.hidden {
  display: none;
}

.text-diff-removed {
  text-decoration: line-through;
  color: #991b1b;
}

.text-highlight-wrap .text-highlight-inner .text-highlight,
.text-highlight-wrap .text-highlight-inner .text {
  box-sizing: border-box;
  width: 100%;
  min-height: 120px;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.text-highlight-wrap .text-highlight-inner .text-highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
  background: #fff;
  border-color: transparent;
  z-index: 0;
}

.text-highlight-wrap .text-highlight .pronunciation-hit {
  background: rgba(180, 83, 9, 0.22);
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.text-highlight-wrap .text-highlight .stress-hit {
  background: rgba(37, 99, 235, 0.18);
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.text-highlight-wrap .text-highlight .text-diff-added mark.pronunciation-hit,
.text-highlight-wrap .text-highlight .text-diff-changed mark.pronunciation-hit {
  background: rgba(180, 83, 9, 0.35);
}

.text-highlight-wrap .text-highlight .text-diff-added mark.stress-hit,
.text-highlight-wrap .text-highlight .text-diff-changed mark.stress-hit {
  background: rgba(37, 99, 235, 0.28);
}

.text-highlight-wrap .text-highlight-inner .text {
  position: relative;
  z-index: 1;
  resize: vertical;
  background: transparent;
  color: transparent;
  caret-color: var(--ink);
  -webkit-text-fill-color: transparent;
}

.paragraph-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  width: 100%;
  min-width: 0;
  overflow-x: visible;
  padding-bottom: 0.1rem;
}

.paragraph-controls-tts-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  overflow-x: visible;
  margin-top: 0.1rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
}

.paragraph-controls-row > .paragraph-controls-tts-row {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.paragraph-edit .paragraph-tts-instructions-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.65rem 0 0.35rem;
}

.paragraph-edit .tts-instructions-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.paragraph-edit .tts-instructions-row .tts-instructions-input {
  flex: 1 1 auto;
  min-width: 0;
}

.paragraph-edit .punctuation-llm-btn {
  flex-shrink: 0;
  min-width: 2.75rem;
  padding-inline: 0.55rem;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.paragraph-edit .paragraph-tts-instructions-label .control-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.paragraph-edit .tts-instructions-input {
  width: 100%;
  min-height: 3.2rem;
  resize: vertical;
  padding: 0.45rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1.35;
}

.paragraph-speaker-meta {
  display: block;
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.paragraph-controls-tts-row .reset-voice-tts-params {
  flex-shrink: 0;
}

.paragraph-controls-tts-row .moss-instructions-label {
  flex: 1 1 14rem;
  min-width: 10rem;
  max-width: 28rem;
}

.paragraph-controls-tts-row .moss-instructions-label .inline-input {
  flex: 1 1 auto;
  min-width: 8rem;
  padding: 0.28rem 0.45rem;
  font-size: 0.78rem;
}

.paragraph-controls-tts-row .moss-truncation-hint {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

.paragraph-controls-tts-row .moss-truncation-hint.moss-truncation-warn {
  color: var(--accent-dark);
}

.paragraph-controls-tts-row .moss-truncation-hint.moss-truncation-danger {
  color: var(--err);
  font-weight: 600;
}

.paragraph-controls-tts-row .moss-seed-hint {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: rgba(255, 253, 248, 0.85);
}

.paragraph-controls-row .control-label,
.paragraph-controls-tts-row .control-label {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.paragraph-controls-row .temperature-label,
.paragraph-controls-row .guidance-label,
.paragraph-controls-row .class-temperature-label,
.paragraph-controls-tts-row .temperature-label,
.paragraph-controls-tts-row .guidance-label,
.paragraph-controls-tts-row .class-temperature-label,
.paragraph-controls-tts-row .moss-temperature-label,
.paragraph-controls-tts-row .moss-top-p-label,
.paragraph-controls-tts-row .moss-top-k-label,
.paragraph-controls-tts-row .moss-repetition-penalty-label,
.paragraph-controls-tts-row .moss-instructions-label,
.paragraph-controls-tts-row .moss-truncation-hint,
.paragraph-controls-tts-row .moss-seed-hint,
.paragraph-controls-row .moss-temperature-label,
.paragraph-controls-row .moss-top-p-label,
.paragraph-controls-row .moss-top-k-label,
.paragraph-controls-row .moss-repetition-penalty-label,
.paragraph-controls-row .voice-label,
.paragraph-controls-row .concat-pause-label,
.paragraph-controls-row .tts-engine-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  flex-shrink: 0;
}

.paragraph-controls-row .temperature-label select,
.paragraph-controls-row .guidance-label select,
.paragraph-controls-row .class-temperature-label select,
.paragraph-controls-tts-row .temperature-label select,
.paragraph-controls-tts-row .guidance-label select,
.paragraph-controls-tts-row .class-temperature-label select,
.paragraph-controls-tts-row .moss-temperature-label select,
.paragraph-controls-tts-row .moss-top-p-label select,
.paragraph-controls-tts-row .moss-top-k-label select,
.paragraph-controls-tts-row .moss-repetition-penalty-label select,
.paragraph-controls-tts-row .moss-instructions-label .inline-input,
.paragraph-controls-row .moss-temperature-label select,
.paragraph-controls-row .moss-top-p-label select,
.paragraph-controls-row .moss-top-k-label select,
.paragraph-controls-row .moss-repetition-penalty-label select,
.paragraph-controls-row .voice-label select,
.paragraph-controls-row .concat-pause-label select,
.paragraph-controls-row .tts-engine-select {
  min-width: 3.5rem;
  width: auto;
  padding: 0.28rem 0.4rem;
  font-size: 0.78rem;
}

.paragraph-controls-row .tts-engine-select {
  min-width: 5.5rem;
}

.paragraph-controls-row .voice-label select {
  min-width: 6.5rem;
  max-width: 9rem;
}

.paragraph-controls-row .concat-pause-label select {
  min-width: 3.8rem;
  max-width: 4.5rem;
}

.paragraph-controls-row select.uses-voice-default,
.paragraph-controls-tts-row select.uses-voice-default {
  font-style: italic;
  color: var(--muted-fg, #6b7280);
}

.paragraph-controls-row .job-status {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 0.78rem;
}

.paragraph-controls-end {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}

.paragraph-controls-row .stato-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}

.paragraph-controls-row .stato-label select {
  min-width: 6.5rem;
  width: auto;
  padding: 0.28rem 0.4rem;
  font-size: 0.78rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
}

.icon-btn .btn-icon {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-btn.save:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.icon-btn.save:disabled {
  background: #e7dfd2;
  color: #a8a29e;
  cursor: not-allowed;
}

.paragraph-controls-row .paragraph-audio {
  flex: 1 1 14rem;
  min-width: 12rem;
  max-width: 28rem;
}

.paragraph-controls-row .paragraph-audio audio {
  width: 100%;
  height: 1.75rem;
  display: block;
}

.paragraph-controls-row .paragraph-audio .status {
  font-size: 0.75rem;
  white-space: nowrap;
}

.tts-voice-picker {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.tts-voice-preview {
  width: 100%;
  height: 1.85rem;
}

.tts-voice-preview.hidden {
  display: none;
}

.temperature-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  flex-shrink: 0;
}

.temperature-label select {
  min-width: 5.5rem;
  width: auto;
}

@media (max-width: 700px) {
  .paragraph-controls-end {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .paragraph-controls-row .job-status {
    width: 100%;
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: center;
}

.status {
  font-size: 0.85rem;
  color: var(--muted);
}

.status.running {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent-dark);
}

.status.done {
  color: var(--ok);
}

.status.error {
  color: var(--err);
}

.pager {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

th,
td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  background: #f7f1e7;
  font-size: 0.85rem;
  color: var(--muted);
}

tr:last-child td {
  border-bottom: none;
}

.inline-input {
  width: 100%;
  min-width: 120px;
}

.empty {
  color: var(--muted);
  padding: 2rem;
  text-align: center;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 26, 20, 0.45);
}

.modal-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 16px 40px rgba(31, 26, 20, 0.18);
}

.modal-card h3 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}

.modal-card p {
  margin: 0 0 1rem;
  color: var(--ink);
}

.modal-card button {
  width: 100%;
}

.modal-card-wide {
  width: min(920px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
}

.manual-content-modal-card {
  width: min(640px, calc(100vw - 2rem));
}

.manual-content-lead {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.manual-content-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.manual-content-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.manual-content-field input,
.manual-content-field textarea {
  width: 100%;
}

.manual-content-field textarea {
  min-height: 12rem;
  resize: vertical;
  font: inherit;
  line-height: 1.45;
}

.manual-content-hint {
  margin: 0;
  font-size: 0.85rem;
}

.manual-content-actions {
  display: flex;
  gap: 0.5rem;
}

.manual-content-actions button {
  flex: 1;
  width: auto;
}

.render-log-pre {
  margin: 0 0 1rem;
  padding: 0.75rem;
  overflow: auto;
  flex: 1;
  min-height: 12rem;
  max-height: min(70vh, 640px);
  background: #1f1a14;
  color: #f4f1ea;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.audio-history-modal-card {
  width: min(980px, calc(100vw - 2rem));
}

.audio-history-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.audio-history-modal-header h3 {
  margin: 0;
}

.audio-history-modal-header button {
  width: auto;
  min-width: 6rem;
}

.audio-history-subtitle {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.audio-history-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: auto;
  max-height: min(70vh, 640px);
  padding-right: 0.15rem;
}

.audio-history-empty {
  margin: 0;
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 10px;
}

.audio-history-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #faf8f4;
}

.audio-history-item-head {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.audio-history-item-head strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.audio-history-text {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.audio-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.audio-history-item-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.audio-history-item-actions audio {
  width: 100%;
  height: 2.2rem;
}

.audio-history-item-baseline {
  border-color: #e8dcc8;
  background: #fffdf8;
}

.audio-history-item-baseline .audio-history-item-head strong {
  color: var(--accent-dark);
}

.audio-history-item-actions .restore-baseline-btn,
.audio-history-item-actions .restore-history-btn {
  width: 100%;
}

@media (max-width: 760px) {
  .audio-history-item {
    grid-template-columns: 1fr;
  }
}

/* ═══════ Params Guide ═══════ */
.panel-params-guide { max-width: 900px; margin: 0 auto; padding: 2rem; }
.params-toc { background: var(--surface-2, #f4f6f8); border-radius: 0.5rem; padding: 1rem 1.5rem; margin-bottom: 2rem; }
.params-toc h3 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.params-toc ul { margin: 0; padding-left: 1.2rem; }
.params-toc li { margin: 0.2rem 0; font-size: 0.85rem; }
.params-toc a { text-decoration: none; color: var(--accent, #2563eb); }
.params-toc a:hover { text-decoration: underline; }
.params-content h2 { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border, #e0e0e0); font-size: 1.3rem; }
.params-content h3 { margin-top: 1.5rem; font-size: 1.05rem; }
.params-content h3 code { font-weight: normal; font-size: 0.85em; color: var(--text-muted, #666); }
.param-detail { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; margin: 0.5rem 0; font-size: 0.88rem; }
.param-detail dt { font-weight: 600; color: var(--text-muted, #555); }
.param-detail dd { margin: 0; }
.param-warning { background: #fff8e6; border-left: 3px solid #f59e0b; padding: 0.5rem 0.75rem; margin: 0.75rem 0; border-radius: 0.3rem; font-size: 0.85rem; }
.param-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.85rem; }
.param-table th, .param-table td { padding: 0.4rem 0.75rem; border: 1px solid var(--border, #ddd); text-align: left; }
.param-table th { background: var(--surface-2, #f4f6f8); font-weight: 600; }
.preset-table td:first-child { white-space: nowrap; }
.param-cascade { background: var(--surface-2, #f0f4f8); padding: 0.75rem 1rem; border-radius: 0.4rem; font-size: 0.9rem; margin: 1rem 0; }
.anchor-link { color: var(--accent, #2563eb); text-decoration: none; font-size: 0.85rem; }
.anchor-link:hover { text-decoration: underline; }

/* ═══════ MOSS Bench ═══════ */
.panel-moss-bench { max-width: 1280px; margin: 0 auto; }
.moss-bench-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .moss-bench-grid { grid-template-columns: 1fr; } }
.moss-bench-endpoint-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: end;
  margin-bottom: 0.4rem;
}
.moss-bench-endpoint-field { min-width: 0; flex: 1 1 8rem; }
.moss-bench-health-btn { align-self: end; white-space: nowrap; flex-shrink: 0; }
.moss-bench-health-badge {
  align-self: end;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.moss-bench-health-badge.online { color: #15803d; }
.moss-bench-health-badge.offline { color: #b91c1c; }
.moss-bench-gpu-stats { font-size: 0.82rem; color: var(--text-muted, #64748b); margin-bottom: 0.5rem; }
.moss-bench-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 1rem;
  border: 1px solid var(--border, #ddd);
  border-radius: 0.45rem;
  overflow: hidden;
  background: var(--surface-2, #f1f5f9);
}
.moss-bench-tab {
  padding: 0.65rem 0.85rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted, #64748b);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.moss-bench-tab:hover { background: rgba(255, 255, 255, 0.55); color: var(--text, #0f172a); }
.moss-bench-tab.active {
  background: #fff;
  color: var(--text, #0f172a);
  border-bottom-color: #2563eb;
}
.moss-bench-tab-panel {
  padding-top: 0.85rem;
}
.moss-bench-tab-panel[hidden] { display: none !important; }
.moss-bench-tab-lead {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}
.moss-bench-stress-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin: 0.65rem 0 0.25rem;
}
.moss-bench-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border, #e2e8f0);
}
.moss-bench-text { min-height: 7rem; resize: vertical; }
.moss-bench-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.3rem 0.5rem; margin: 0.4rem 0; }
.moss-bench-params .field-label { font-size: 0.78rem; margin-bottom: 0.1rem; }
.moss-bench-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.moss-bench-status.running { color: #b45309; }
.moss-bench-status.done { color: #15803d; }
.moss-bench-status.error { color: #b91c1c; }
.moss-bench-results { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }
.moss-bench-result-card { background: var(--surface-2, #f4f6f8); border: 1px solid var(--border, #ddd); border-radius: 0.5rem; padding: 0.75rem; }
.moss-bench-result-card h4 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.moss-bench-metrics { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.82rem; }
.moss-bench-metric { background: #fff; border: 1px solid var(--border, #ddd); border-radius: 0.35rem; padding: 0.25rem 0.5rem; }
.moss-bench-metric.warn strong { color: #b45309; }
.moss-bench-audio { width: 100%; margin-top: 0.5rem; }
.bench-detail-toggle { margin-top: 0.6rem; }
.bench-detail-toggle summary {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted, #666);
  user-select: none;
}
.bench-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin-top: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.bench-detail-table th {
  text-align: left;
  font-weight: 600;
  padding: 0.2rem 0.4rem;
  border-bottom: 2px solid var(--border, #ccc);
  color: var(--text-muted, #666);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bench-detail-table td {
  padding: 0.18rem 0.4rem;
  border-bottom: 1px solid var(--border, #eee);
}
.bench-detail-table tr:hover { background: rgba(0,0,0,0.03); }
.bench-detail-table .warn { color: #b45309; font-weight: 600; }
.bench-detail-fail td { color: #b91c1c; }
.bench-detail-worker {
  margin-top: 0.6rem;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
}
.bench-detail-worker-summary {
  color: var(--text-muted, #666);
  font-weight: 400;
  font-size: 0.73rem;
}
.moss-bench-log {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  height: 22rem;
  min-height: 8rem;
  max-height: min(70vh, 40rem);
  resize: vertical;
  overflow: auto;
  background: #0f172a;
  color: #cbd5e1;
  padding: 0.75rem;
  border-radius: 0.4rem;
  margin: 0;
  white-space: pre-wrap;
}
.moss-bench-live-toggle { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.88rem; cursor: pointer; }
.moss-bench-live-hint { margin: 0.5rem 0 0; font-size: 0.88rem; color: #15803d; font-weight: 600; }
.moss-bench-clone { margin-top: 0.4rem; padding: 0.35rem 0.55rem; background: var(--surface-2, #f8fafc); border: 1px solid var(--border, #ddd); border-radius: 0.45rem; }
.moss-bench-clone-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.25rem; flex-wrap: wrap; }
.moss-bench-clone-head .card-header { margin: 0; font-size: 0.88rem; flex: 1; min-width: 0; }
.moss-bench-clone-head-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem 1rem;
}
.moss-bench-inline-check {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.moss-bench-inline-check input[type="checkbox"] { margin: 0; flex-shrink: 0; }
.moss-bench-clone-compact { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: end; }
.moss-bench-clone-field { min-width: 0; flex: 1 1 7rem; }
.moss-bench-clone-field--reftext { flex: 2 1 12rem; }
.moss-bench-clone .field-label { margin: 0 0 0.1rem; font-size: 0.78rem; display: block; }
.moss-bench-voice-select { min-height: 1.75rem; padding: 0.2rem 0.35rem; font-size: 0.84rem; width: 100%; }
.moss-bench-voice-preview { width: 100%; height: 1.5rem; margin: 0.2rem 0 0; }
.moss-bench-file-input { font-size: 0.8rem; padding: 0.1rem 0; width: 100%; }
.moss-bench-ref-text { min-height: 1.75rem; resize: vertical; font-size: 0.84rem; padding: 0.25rem 0.4rem; width: 100%; }
.moss-bench-clone-hint { margin: 0.25rem 0 0.35rem; font-size: 0.78rem; color: var(--text-muted, #666); line-height: 1.35; }
.moss-bench-advanced { margin-top: 0.35rem; font-size: 0.85rem; }
.moss-bench-advanced summary { cursor: pointer; color: var(--text-muted, #666); }
.moss-bench-audio.hidden { display: none; }
.moss-bench-parallel-params {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem 0.5rem;
  align-items: end;
  margin: 0.4rem 0;
}
.moss-bench-parallel-params > div { min-width: 0; }
.moss-bench-parallel-params > div:nth-child(1),
.moss-bench-parallel-params > div:nth-child(2) { flex: 2 1 5rem; }
.moss-bench-parallel-params > div:nth-child(3),
.moss-bench-parallel-params > div:nth-child(4) { flex: 0 1 4.25rem; }
.moss-bench-parallel-params .field-label { font-size: 0.78rem; margin-bottom: 0.1rem; }
.moss-bench-parallel-params .text-input { padding: 0.25rem 0.35rem; font-size: 0.84rem; min-height: 1.75rem; }
@media (max-width: 520px) {
  .moss-bench-parallel-params { flex-wrap: wrap; }
  .moss-bench-parallel-params > div:nth-child(1),
  .moss-bench-parallel-params > div:nth-child(2) { flex: 1 1 8rem; }
  .moss-bench-parallel-params > div:nth-child(3),
  .moss-bench-parallel-params > div:nth-child(4) { flex: 1 1 4.25rem; }
}
.moss-bench-parallel-list {
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
  max-height: 10rem;
  overflow: auto;
  font-size: 0.8rem;
  border: 1px solid var(--border, #ddd);
  border-radius: 0.35rem;
  background: #fff;
}
.moss-bench-parallel-list li {
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--border, #eee);
}
.moss-bench-parallel-list li:last-child { border-bottom: none; }
.moss-bench-parallel-snippet { color: var(--text-muted, #666); font-size: 0.78rem; }
.moss-bench-parallel-players {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.moss-bench-parallel-player-slot {
  background: #fff;
  border: 1px solid var(--border, #ddd);
  border-radius: 0.4rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
}
.moss-bench-parallel-player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}
.moss-bench-parallel-listen {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.62rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  order: 1;
}
.moss-bench-parallel-listen input {
  margin: 0;
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
}
.moss-bench-parallel-listen input:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.moss-bench-parallel-player-slot--listening {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
}
.moss-bench-parallel-player-head strong { order: 0; }
.moss-bench-parallel-player-head .moss-bench-parallel-player-status { order: 2; margin-left: auto; }
.moss-bench-parallel-player-status {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  background: #e2e8f0;
  color: #475569;
}
.moss-bench-parallel-player-status.stream,
.moss-bench-parallel-player-status.buffer { background: #fef3c7; color: #92400e; }
.moss-bench-parallel-player-status.play { background: #dcfce7; color: #166534; }
.moss-bench-parallel-player-status.done { background: #e0f2fe; color: #0369a1; }
.moss-bench-parallel-player-status.warn { background: #ffedd5; color: #c2410c; }
.moss-bench-parallel-player-status.error { background: #fee2e2; color: #b91c1c; }
.moss-bench-parallel-player-meta {
  color: var(--text-muted, #666);
  font-size: 0.72rem;
  line-height: 1.45;
  min-height: 2.6em;
}
.ux-meta-line {
  display: block;
}
.ux-meta-line b {
  color: var(--text, #222);
  font-weight: 600;
}
.moss-bench-parallel-player-meter {
  height: 0.25rem;
  background: #e2e8f0;
  border-radius: 999px;
  margin-top: 0.35rem;
  overflow: hidden;
}
.moss-bench-parallel-player-meter span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width 0.15s ease;
}
.moss-bench-parallel-player-buf-label {
  font-size: 0.65rem;
  color: var(--text-muted, #666);
  text-align: right;
  margin-top: 0.1rem;
  min-height: 0.9em;
}
.moss-bench-player-starved {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  animation: starved-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes starved-pulse {
  from { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  to { box-shadow: 0 0 6px 2px rgba(239,68,68,0.5); }
}
.moss-bench-ux-report {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: #f8fafc;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.45rem;
  font-size: 0.82rem;
}
.moss-bench-ux-title { margin: 0 0 0.35rem; font-size: 0.92rem; }
.moss-bench-ux-lead { margin: 0 0 0.5rem; color: var(--text-muted, #64748b); line-height: 1.4; font-size: 0.78rem; }
.moss-bench-ux-summary { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.55rem; }
.moss-bench-ux-pill {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 600;
}
.moss-bench-ux-pill.good { background: #dcfce7; color: #166534; }
.moss-bench-ux-pill.bad { background: #fee2e2; color: #b91c1c; }
.moss-bench-ux-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.moss-bench-ux-table th,
.moss-bench-ux-table td { padding: 0.25rem 0.35rem; border-bottom: 1px solid #e2e8f0; text-align: left; white-space: nowrap; }
.moss-bench-ux-table th { color: #64748b; font-weight: 600; }
.moss-bench-ux-th-tip {
  cursor: help;
  border-bottom: 1px dotted #94a3b8;
  position: relative;
}
.moss-bench-ux-th-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translateX(-50%);
  z-index: 30;
  width: max-content;
  max-width: min(18rem, 70vw);
  padding: 0.45rem 0.55rem;
  border-radius: 0.35rem;
  background: #1e293b;
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}
.moss-bench-ux-th-tip:hover::after,
.moss-bench-ux-th-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
}
.moss-bench-ux-table-wrap { overflow-x: auto; overflow-y: visible; }
.moss-bench-ux-row-total td {
  border-top: 2px solid #cbd5e1;
  background: #f1f5f9;
  font-weight: 600;
  color: #334155;
}
.moss-bench-ux-row-total td:first-child { color: #0f172a; }
.moss-bench-ux-row-critical td:nth-child(2) { color: #b91c1c; font-weight: 600; }
.moss-bench-ux-row-warn td:nth-child(2) { color: #c2410c; }
.moss-bench-ux-row-ok td:nth-child(2) { color: #15803d; }

/* Render activity log (/rendering) */
.render-activity-panel { display: flex; flex-direction: column; gap: 0.65rem; }
.render-activity-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  padding: 0.35rem 0;
}
.render-activity-title {
  margin: 0;
  font-size: 1.05rem;
  flex: 0 0 auto;
}
.render-activity-targets-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  flex: 1 1 16rem;
  min-width: 0;
  font-size: 0.78rem;
}
.render-target-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  max-width: 100%;
}
.render-target-chip code {
  font-size: 0.74rem;
  word-break: break-all;
}
.render-target-label {
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  flex-shrink: 0;
}
.render-target-updated {
  font-size: 0.74rem;
  white-space: nowrap;
}
.render-activity-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; margin-left: auto; }
.render-activity-controls .field-label { margin: 0; font-size: 0.78rem; }
.render-activity-libro-select { min-width: 10rem; max-width: 18rem; padding: 0.3rem 0.45rem; font-size: 0.82rem; }
.render-activity-poll-status { font-size: 0.78rem; color: var(--muted); min-width: 2.5rem; }
.render-activity-summary {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
}
.render-activity-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.65rem;
}
.render-activity-summary-engines {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.render-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0.65rem;
  background: var(--surface-2, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.5rem;
}
.render-progress-meta { font-size: 0.82rem; color: var(--text, #0f172a); }
.render-progress-track {
  height: 0.55rem;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.render-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  border-radius: 999px;
  transition: width 0.4s ease;
}

.libri-table {
  min-width: 44rem;
}

.libri-table col.col-libro {
  width: 22%;
}

.libri-table col.col-avanzamento {
  width: 34%;
}

.libri-table col.col-pdf-stato {
  width: 12%;
}

.libri-table col.col-azioni {
  width: 32%;
}

.libri-table th,
.libri-table td {
  vertical-align: top;
}

.libri-table .libri-progress-cell {
  min-width: 0;
}

.libri-phase {
  display: grid;
  grid-template-columns: 4.5rem 1fr 2.5rem;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
}

.libri-phase-label {
  font-weight: 600;
  color: var(--muted, #64748b);
}

.book-progress-track {
  height: 0.45rem;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.book-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.libri-upload-form {
  display: grid;
  gap: 0.75rem;
  max-width: min(52rem, 100%);
}

.libri-upload-form label {
  display: grid;
  gap: 0.25rem;
}

.libri-upload-checkbox-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.libri-upload-form label.libri-upload-checkbox {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  cursor: pointer;
  color: var(--ink);
}

.libri-upload-form label.libri-upload-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.libri-upload-voice-controls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.libri-upload-voice-controls select {
  flex: 1;
  min-width: 0;
}

.libri-upload-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.libri-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.libri-pdf-stato {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

.libri-pdf-stato--idle {
  color: #64748b;
  background: #f1f5f9;
}

.libri-pdf-stato--queued {
  color: #a16207;
  background: #fef9c3;
}

.libri-pdf-stato--running {
  color: #1d4ed8;
  background: #dbeafe;
}

.libri-pdf-stato--done {
  color: #15803d;
  background: #dcfce7;
}

.libri-pdf-stato--error {
  color: #b91c1c;
  background: #fee2e2;
}

.libri-stato-cell {
  white-space: nowrap;
}

.libri-meta-line {
  display: block;
  margin-top: 0.2rem;
}

.libri-uuid-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}

.libri-uuid-label {
  font-size: 0.78rem;
  font-weight: 600;
  flex: 0 0 auto;
}

.libri-uuid-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  word-break: break-all;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.35rem;
  padding: 0.15rem 0.4rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.libri-copy-uuid-btn {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.35rem;
  background: #fff;
  color: #475569;
  cursor: pointer;
}

.libri-copy-uuid-btn:hover,
.libri-copy-uuid-btn:focus-visible {
  background: #f8fafc;
  color: #0f172a;
  outline: none;
}

.libri-copy-uuid-btn--copied {
  color: #15803d;
  border-color: #86efac;
  background: #f0fdf4;
}

.render-summary-card { background: var(--surface-2, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 0.5rem; padding: 0.65rem 0.75rem; text-align: center; }
.render-summary-card-active { border-color: #86efac; background: #f0fdf4; }
.render-summary-value { display: block; font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.render-summary-value-stack {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}
.render-summary-value-line { display: block; }
.render-summary-label {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--muted, #64748b);
}
.render-summary-label-line { display: block; }
.render-summary-card-engine {
  background: #fff;
  flex: 1 1 50%;
  min-width: 0;
  text-align: left;
  padding: 0.7rem 1rem;
  position: relative;
}
.render-summary-card-engine + .render-summary-card-engine {
  margin-left: -0.85rem;
  box-shadow: -6px 0 14px rgba(15, 23, 42, 0.08);
  z-index: 1;
}
.render-summary-card-engine:first-child {
  z-index: 2;
}
.render-summary-engine-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}
.render-summary-engine-name {
  flex: 0 0 auto;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  min-width: 5.5rem;
}
.render-summary-engine-body {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}
.render-summary-card-engine .render-summary-engine-stats {
  flex: 1 1 auto;
  margin-top: 0;
  text-align: left;
  font-size: 0.74rem;
  line-height: 1.35;
}
.render-summary-card-engine .render-summary-engine-state {
  flex: 0 0 auto;
  margin-top: 0;
  white-space: nowrap;
}
.render-summary-card-engine .render-summary-engine-controls {
  flex: 0 0 auto;
  margin-top: 0;
  margin-left: auto;
  justify-content: flex-end;
}
.render-summary-card-engine-paused {
  border-color: #fcd34d;
  background: #fffbeb;
}
.render-summary-card-engine-disabled {
  border-color: #94a3b8;
  background: #f1f5f9;
  opacity: 0.92;
}
.render-summary-engine-stats {
  font-size: 0.68rem;
  line-height: 1.3;
}
.render-summary-engine-state {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #b45309;
}
.render-summary-engine-state-disabled {
  color: #475569;
}
.render-summary-engine-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
@media (max-width: 720px) {
  .render-activity-summary-engines {
    flex-direction: column;
  }
  .render-summary-card-engine {
    flex: 1 1 auto;
    width: 100%;
  }
  .render-summary-card-engine + .render-summary-card-engine {
    margin-left: 0;
    margin-top: -0.5rem;
    box-shadow: 0 -6px 14px rgba(15, 23, 42, 0.08);
  }
  .render-summary-engine-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .render-summary-card-engine .render-summary-engine-controls {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
}
.render-summary-engine-controls .render-engine-control-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
}
.render-activity-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}
.render-activity-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}
.render-activity-main .card {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  min-height: 8rem;
  overflow: hidden;
}
.render-activity-compact-split {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 24rem;
  height: 100%;
  min-width: 0;
}
.render-activity-split-pane {
  min-height: 4.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.render-activity-split-pane-jobs {
  flex: 0 0 28rem;
  min-height: 28rem;
}
.render-activity-split-pane-grow {
  flex: 1 1 auto;
  min-height: 4.5rem;
}
.render-activity-split-pane .card {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: 100%;
}
.render-activity-split-handle {
  flex: 0 0 0.45rem;
  margin: 0.1rem 0;
  cursor: row-resize;
  touch-action: none;
  border-radius: 3px;
  background: transparent;
  position: relative;
  z-index: 1;
}
.render-activity-split-handle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--border, #e2e8f0);
  transition: background 0.15s ease;
}
.render-activity-split-handle:hover::before,
.render-activity-split-handle:focus-visible::before,
.render-activity-split-handle.is-dragging::before {
  background: #94a3b8;
}
.render-activity-split-handle:focus-visible {
  outline: 2px solid #94a3b8;
  outline-offset: 1px;
}
.render-activity-card-compact {
  max-height: none;
}
.render-activity-card-events,
.render-activity-split-pane .render-activity-card-events {
  max-height: none;
  min-height: 0;
  height: 100%;
}
.render-activity-recent-col {
  max-height: none;
  min-height: 0;
}
.render-activity-main .card > .card-header {
  flex-shrink: 0;
}

.render-pending-clear-btn {
  flex-shrink: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  white-space: nowrap;
}
.render-activity-main .table-wrap,
.render-activity-main .render-events-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .render-activity-main {
    grid-template-columns: 1fr;
  }
  .render-activity-recent-col {
    max-height: 28rem;
  }
}
.render-activity-table { font-size: 0.82rem; }
.render-activity-table .render-url-link {
  font-size: 0.78rem;
  white-space: nowrap;
}
.render-metric-cell { font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.render-activity-table .libro-snip { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.render-job-error, .render-event-error { margin-top: 0.25rem; font-size: 0.75rem; color: #b91c1c; white-space: normal; max-width: 14rem; }
.engine-badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.engine-moss { background: #dbeafe; color: #1d4ed8; }
.engine-omnivoice { background: #ede9fe; color: #6d28d9; }
.status-pill { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 0.35rem; font-size: 0.72rem; font-weight: 600; }
.status-running { background: #fef08a; color: #854d0e; }
.status-queued, .status-waiting { background: #e2e8f0; color: #334155; }
.status-error { background: #fecaca; color: #991b1b; }
.status-started, .status-done { background: #bbf7d0; color: #166534; }
.render-events-log { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.82rem; }
.render-duration-cell { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.render-event { display: grid; grid-template-columns: 7.5rem 4.5rem auto 1fr 5.5rem auto; gap: 0.35rem 0.5rem; align-items: baseline; padding: 0.45rem 0.55rem; border-radius: 0.4rem; background: var(--surface-2, #f8fafc); border: 1px solid var(--border, #e2e8f0); }
.render-event-error { grid-column: 1 / -1; }
.render-event-error + .render-event-error { display: none; }
@media (max-width: 900px) {
  .render-event { grid-template-columns: 1fr 1fr; }
  .render-event .url-snip { grid-column: 1 / -1; }
}

.llm-log-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.llm-log-entry {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.5rem;
  background: var(--surface-2, #f8fafc);
  padding: 0.35rem 0.65rem;
}

.llm-log-summary-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.4fr) auto auto;
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  cursor: pointer;
}

.llm-log-call {
  font-weight: 600;
}

.llm-log-meta,
.llm-log-chars {
  font-size: 0.82rem;
}

.llm-log-detail {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.llm-log-block {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 0.4rem;
  background: #fff;
  overflow: hidden;
}

.llm-log-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: #f1f5f9;
}

.llm-log-pre {
  margin: 0;
  padding: 0.65rem;
  max-height: 28rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .llm-log-summary-row {
    grid-template-columns: 1fr;
  }
}

.analisi-capitoli-card {
  margin-bottom: 1.25rem;
}

.reanalyze-live {
  display: none;
}

.analisi-capitoli-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.analisi-capitoli-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.analisi-action-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.92rem;
  white-space: nowrap;
}

.analisi-capitoli-wrap {
  overflow-x: auto;
}

.analisi-capitoli-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.analisi-capitoli-table th,
.analisi-capitoli-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--border, #ddd);
  vertical-align: middle;
  text-align: left;
}

.analisi-capitoli-table th {
  font-weight: 600;
  background: var(--table-head-bg, rgba(0, 0, 0, 0.03));
}

.analisi-cap-num {
  white-space: nowrap;
  width: 3rem;
}

.analisi-cap-title {
  min-width: 12rem;
}

.analisi-cap-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.analisi-status-badge {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.35;
  background: rgba(0, 0, 0, 0.06);
}

.analisi-stato-done,
.analisi-stato-ready,
.analisi-stato-queued {
  background: rgba(40, 120, 60, 0.12);
}

.analisi-stato-running {
  background: rgba(200, 140, 0, 0.15);
}

.analisi-stato-pending,
.analisi-stato-not_ready {
  background: rgba(0, 0, 0, 0.06);
}

.analisi-cap-row-pending {
  background: rgba(200, 140, 0, 0.06);
}

.analisi-cap-row-pending .analisi-cap-title {
  font-style: italic;
}

.panel-subtitle {
  margin: 1.25rem 0 0.5rem;
  font-size: 1rem;
}

.cast-settings-card {
  margin-bottom: 1rem;
}

.cast-settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-start;
}

.cast-settings-field {
  flex: 1 1 14rem;
  min-width: 14rem;
}

.cast-settings-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.cast-settings-select {
  max-width: 36rem;
  width: 100%;
}

.cast-settings-hint {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
}

.cast-chapter-block {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.cast-chapter-block h4 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.cast-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cast-chip {
  display: inline-block;
  font-size: 0.78rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0c4a6e;
}

.cast-voice-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 22rem;
}

.cast-voice-cell .cast-voice-select {
  width: auto;
  min-width: 9rem;
  max-width: 11rem;
  flex: 0 1 auto;
  margin-bottom: 0;
}

.cast-voice-preview-wrap {
  flex: 1 1 12rem;
  min-width: 10rem;
}

.cast-voice-preview-wrap:empty {
  display: none;
}

.cast-voice-preview-wrap .cast-voice-preview {
  width: 100%;
  max-width: none;
  height: 1.85rem;
  vertical-align: middle;
}

.btn-copy-voce-en {
  margin-top: 0.35rem;
  font-size: 0.78rem;
}

.status.warn {
  color: #b45309;
}

/* —— Mobile listen player (/ascolta) —— */

body:has(.listen-page) {
  --listen-bar-height: 9.5rem;
}

body:has(.listen-page) > header {
  padding-bottom: 0.5rem;
}

body:has(.listen-page) main {
  padding-bottom: calc(var(--listen-bar-height) + 1rem);
}

.listen-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0.75rem 1rem 0;
}

.listen-header {
  margin-bottom: 1rem;
}

.listen-title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
}

.listen-book-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.listen-book-select {
  width: 100%;
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--card);
}

.listen-now-playing {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--card);
}

.listen-book-name {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
}

.listen-chapter-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.35;
}

.listen-chapter-meta {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
}

.listen-empty {
  padding: 1.25rem;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 0.85rem;
}

.listen-index-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.listen-index-head h3 {
  margin: 0;
  font-size: 1rem;
}

.listen-chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.listen-chapter-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 3rem;
}

.listen-chapter-item.is-active {
  border-color: var(--accent);
  background: #fff7ed;
}

.listen-chapter-item-title {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.listen-chapter-item-duration {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.listen-player-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: rgba(255, 253, 248, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 24px rgba(31, 26, 20, 0.08);
}

.listen-progress-wrap {
  margin-bottom: 0.75rem;
}

.listen-progress {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}

.listen-time-row {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.listen-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.listen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  touch-action: manipulation;
}

.listen-btn svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.listen-btn-primary svg.icon-play {
  fill: currentColor;
  stroke: none;
  width: 1.6rem;
  height: 1.6rem;
}

.listen-btn-primary svg.icon-pause {
  fill: currentColor;
  stroke: none;
}

.listen-btn-primary {
  width: 4rem;
  height: 4rem;
  background: var(--accent);
  color: #fff;
}

.listen-btn-primary:disabled,
.listen-btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.listen-btn-secondary {
  width: 3rem;
  height: 3rem;
  background: #efe8db;
  color: var(--ink);
}

.listen-status {
  margin-top: 1rem;
  min-height: 1.25rem;
}

@media (min-width: 720px) {
  .listen-page {
    padding-top: 1rem;
  }

  .listen-player-bar {
    left: 50%;
    transform: translateX(-50%);
    max-width: 40rem;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-radius: 1rem 1rem 0 0;
  }
}

/* —— Mobile QA player (/qa) —— */

body:has(.qa-page) {
  --qa-bar-height: 12.5rem;
  --qa-text-panel-bg: #f3efe6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body:has(.qa-page) > header {
  flex-shrink: 0;
  padding-bottom: 0.5rem;
}

@media (max-width: 720px) {
  body:has(.qa-page) .header-top h1 {
    font-size: 1rem;
    margin: 0;
  }

  body:has(.qa-page) .nav-toast-label {
    display: none;
  }

  body:has(.qa-page) #header-activity-status {
    display: none !important;
  }
}

body:has(.qa-page) main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 0 calc(var(--qa-bar-height) + env(safe-area-inset-bottom, 0px));
}

.qa-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.qa-page > :not(.qa-player-bar) {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.qa-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  width: 100%;
}

.qa-rerender-btn.is-running {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #b45309;
}

.qa-rerender-spinner {
  width: 1.1rem;
  height: 1.1rem;
}

.qa-text-panel {
  flex: 1;
  align-self: stretch;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 1rem 1.25rem;
  border: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--qa-text-panel-bg);
  overflow-y: auto;
}

.qa-paragraph-text {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.75;
  word-break: break-word;
}

.qa-marked-count {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  color: #b45309;
}

.qa-word {
  display: inline;
  margin: 0;
  padding: 0.08rem 0.12rem;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.qa-word.is-marked {
  background: #fef3c7;
  color: #92400e;
  box-shadow: inset 0 0 0 1px #fcd34d;
  font-weight: 700;
}

.qa-word.is-tts-correction {
  font-weight: 700;
}

.qa-word:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.qa-revisione-parole-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #fcd34d;
  border-radius: 0.55rem;
  background: #fffbeb;
}

.qa-revisione-parole-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #b45309;
}

.qa-revisione-parole-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.qa-revisione-parola-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 0.8rem;
  font-weight: 600;
}

.qa-rating-host:empty {
  display: none;
}

.qa-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.65rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.55rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
  font-size: 0.82rem;
  font-weight: 600;
}

.qa-rating-stars {
  letter-spacing: 0.04em;
  color: #f59e0b;
}

.qa-rating-label {
  font-variant-numeric: tabular-nums;
}

.qa-player-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(8px);
}

.qa-progress-wrap {
  margin-bottom: 0.5rem;
}

.qa-progress {
  width: 100%;
  accent-color: var(--accent, #2563eb);
}

.qa-time-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.qa-feedback-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
}

.qa-feedback-row .qa-stato-review {
  flex-shrink: 0;
  width: 2.45rem;
  height: 2.45rem;
  border-width: 2px;
}

.qa-feedback-row .qa-stato-btn svg {
  width: 1.35rem;
  height: 1.35rem;
}

.qa-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.55rem;
  margin-bottom: 0;
}

.qa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
}

.qa-btn svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qa-btn-primary svg.icon-play {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  stroke: none;
}

.qa-btn-primary svg.icon-pause {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
  stroke: none;
}

.qa-btn-secondary {
  background: #efe8db;
  border-color: #c9baa8;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(31, 26, 20, 0.1);
}

.qa-btn-secondary:not(:disabled):active {
  background: #e4d9c8;
}

.qa-btn-primary {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}

.qa-btn-primary:disabled,
.qa-btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.qa-rating {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-start;
  padding: 0;
}

.qa-rating.is-hidden {
  visibility: hidden;
  pointer-events: none;
}

.qa-rating.is-disabled .qa-thumb-up {
  opacity: 0.45;
  cursor: not-allowed;
}

.qa-thumb-up {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(31, 26, 20, 0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.qa-thumb-up svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
  stroke: none;
}

.qa-thumb-up[data-value="1"] {
  background: #4ade80;
  border-color: #22c55e;
}

.qa-thumb-up[data-value="2"] {
  background: #22c55e;
  border-color: #16a34a;
}

.qa-thumb-up[data-value="3"] {
  background: #16a34a;
  border-color: #15803d;
}

.qa-thumb-up[data-value="4"] {
  background: #15803d;
  border-color: #14532d;
}

.qa-thumb-up[data-value="5"] {
  background: #14532d;
  border-color: #052e16;
}

.qa-thumb-up.is-selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink, #1f1a14);
  transform: scale(1.06);
}

.qa-thumb-up:disabled {
  cursor: not-allowed;
}

.qa-thumb-up:not(:disabled):active {
  transform: scale(0.96);
}

.qa-stato-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(31, 26, 20, 0.12);
}

.qa-stato-btn svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;
  stroke: none;
}

.qa-stato-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.qa-stato-ok {
  background: #22c55e;
  color: #fff;
  border-color: #16a34a;
}

.qa-stato-review {
  background: #ef4444;
  color: #fff;
  border-color: #dc2626;
}

.qa-status {
  flex-shrink: 0;
  margin-top: 0;
  min-height: 1.25rem;
  padding: 0.35rem 1rem 0;
}

.qa-dispatch-loading {
  position: fixed;
  inset: 0;
  top: var(--site-header-offset);
  bottom: var(--qa-bar-height);
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(244, 241, 234, 0.78);
  backdrop-filter: blur(3px);
}

.qa-dispatch-loading[hidden] {
  display: none !important;
}

.qa-dispatch-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  min-width: 12rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--card);
  box-shadow: 0 12px 32px rgba(31, 26, 20, 0.08);
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
}

.qa-hourglass-icon {
  width: 1.75rem;
  height: 1.75rem;
}

body:has(.qa-page.is-dispatch-loading) .qa-player-bar {
  pointer-events: none;
  opacity: 0.72;
}

@media (min-width: 720px) {
  .qa-player-bar {
    left: 0;
    right: 0;
    transform: none;
    max-width: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }
}

.words-page {
  max-width: 56rem;
  margin: 0 auto;
}

.words-header {
  margin-bottom: 1rem;
}

.words-title {
  margin: 0 0 0.35rem;
}

.words-lead {
  margin: 0;
  font-size: 0.92rem;
}

.words-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.words-engine-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.words-engine-select {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  padding: 0.35rem 0.5rem;
}

.words-tabs {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
}

.words-tab {
  border: 0;
  background: var(--card);
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-size: 0.82rem;
}

.words-tab.is-active {
  background: var(--accent, #2563eb);
  color: #fff;
}

.words-refresh-btn {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.words-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
}

.words-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.words-table th,
.words-table td {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.words-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, #6b7280);
}

.words-table tbody tr:last-child td {
  border-bottom: none;
}

.words-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

.words-status {
  margin-top: 0.75rem;
  min-height: 1.25rem;
}

.dispatch-page {
  max-width: 72rem;
  margin: 0 auto;
}

.dispatch-header {
  margin-bottom: 1rem;
}

.dispatch-title {
  margin: 0 0 0.35rem;
}

.dispatch-lead {
  margin: 0;
}

.dispatch-toolbar,
.dispatch-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}

.dispatch-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 12rem;
}

.dispatch-field-label {
  font-size: 0.78rem;
  color: var(--muted, #6b7280);
}

.dispatch-select,
.dispatch-input {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: var(--card);
}

.dispatch-btn {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #e7dfd2;
  color: var(--ink);
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}

.dispatch-btn:hover {
  background: #dfd5c5;
}

.dispatch-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dispatch-btn-primary {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}

.dispatch-btn-primary:hover {
  background: #1d4ed8;
}

.dispatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.dispatch-card {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  padding: 0.9rem;
}

.dispatch-card h3 {
  margin: 0 0 0.65rem;
  font-size: 1rem;
}

.dispatch-card-wide {
  grid-column: 1 / -1;
}

.dispatch-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.dispatch-stat {
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 0.55rem;
  text-align: center;
}

.dispatch-stat-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
}

.dispatch-stat-label {
  font-size: 0.72rem;
  color: var(--muted, #6b7280);
}

.dispatch-table-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.dispatch-table-wrap {
  overflow-x: auto;
}

.dispatch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.dispatch-table th,
.dispatch-table td {
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.dispatch-catalog-row {
  cursor: pointer;
}

.dispatch-catalog-row:hover {
  background: rgba(37, 99, 235, 0.05);
}

.dispatch-status,
.dispatch-hint,
.dispatch-stat-line {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

.book-map-page {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
}

.book-map-header {
  margin-bottom: 1rem;
}

.book-map-title {
  margin: 0 0 0.35rem;
}

.book-map-lead {
  margin: 0;
}

.book-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.book-map-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 14rem;
}

.book-map-field-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.book-map-select {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: var(--card);
  min-width: 16rem;
}

.book-map-btn {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #e7dfd2;
  color: var(--ink);
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  font-weight: 600;
}

.book-map-btn:hover {
  background: #dfd5c5;
}

.book-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  margin-bottom: 0.85rem;
  font-size: 0.85rem;
}

.book-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.book-map-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.book-map-stat {
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background: var(--card);
  padding: 0.65rem 0.75rem;
  text-align: center;
}

.book-map-stat-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
}

.book-map-stat-label {
  font-size: 0.72rem;
  color: var(--muted);
}

.book-map-stat-done {
  color: #16a34a;
}

.book-map-stat-review {
  color: #d97706;
}

.book-map-stat-pending {
  color: #6b7280;
}

.book-map-chapters {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.book-map-chapter-card {
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--card);
  padding: 0.85rem 0.95rem;
}

.book-map-chapter-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 0.65rem;
}

.book-map-chapter-head h3 {
  margin: 0;
  font-size: 0.98rem;
}

.book-map-chapter-stats {
  margin: 0;
  font-size: 0.78rem;
}

.book-map-dot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}

.book-map-dot {
  display: block;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  border: 1px solid transparent;
  flex: 0 0 auto;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.book-map-dot:hover,
.book-map-dot:focus-visible {
  transform: scale(1.45);
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.25);
  outline: none;
}

.book-map-dot-pending {
  background: #d1d5db;
  border-color: #9ca3af;
}

.book-map-dot-done {
  background: #22c55e;
  border-color: #16a34a;
}

.book-map-dot-review {
  background: #f59e0b;
  border-color: #d97706;
}

.book-map-dot-excluded {
  background: #f3f4f6;
  border-color: #d1d5db;
  opacity: 0.65;
}

.book-map-dot-dual {
  display: inline-flex;
  width: 0.72rem;
  height: 0.72rem;
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #9ca3af;
  background: #fff;
}

.book-map-semicircle {
  display: block;
  width: 50%;
  height: 100%;
  flex: 0 0 50%;
}

.book-map-semicircle-left {
  border-radius: 999px 0 0 999px;
}

.book-map-semicircle-right {
  border-radius: 0 999px 999px 0;
}

.book-map-tone-pending {
  background: #d1d5db;
}

.book-map-tone-approvato {
  background: #22c55e;
}

.book-map-tone-da_revisionare {
  background: #f59e0b;
}

.book-map-status {
  margin-top: 0.75rem;
}

/* Auth / admin */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.auth-card {
  width: min(24rem, 100%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 30px rgba(31, 26, 20, 0.08);
}

.auth-brand {
  text-align: center;
  margin-bottom: 0.35rem;
}

.auth-logo {
  display: block;
  width: min(11rem, 78%);
  height: auto;
  margin: 0 auto;
}

.auth-card h1 {
  margin: 0 0 0.25rem;
  font-size: 1.75rem;
}

.auth-subtitle {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 0.85rem;
}

.auth-form label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.auth-form input {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  font: inherit;
}

.auth-form button,
.admin-form button,
.admin-table button {
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: 0.4rem;
  background: var(--accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.auth-form button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.auth-error {
  margin: 0;
  color: var(--err);
  font-size: 0.9rem;
}

.auth-passkey {
  margin-top: 1.25rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-passkey-btn {
  width: 100%;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.auth-passkey-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.auth-passkey-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.auth-passkey-hint {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.auth-passkey-fallback {
  margin-top: 1.25rem;
}

.auth-passkey-link {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  word-break: break-all;
  text-align: center;
}

.header-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.9rem;
  color: var(--muted);
}

.header-user-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.header-user-name:hover,
.header-user-name.active {
  color: var(--ink);
  text-decoration: underline;
}

.header-user button,
.header-user a.button-link {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  border-radius: 0.35rem;
  padding: 0.3rem 0.6rem;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.admin-users {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 2rem;
}

.admin-form {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 2rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
}

.role-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.role-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
}

.admin-table th,
.admin-table td {
  border: 1px solid var(--border);
  padding: 0.55rem 0.65rem;
  vertical-align: top;
  text-align: left;
}

.admin-table button.danger {
  background: var(--err);
}

.muted {
  color: var(--muted);
}

.page-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1rem;
  margin: 0.5rem 0 0.75rem;
}

.page-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  min-width: 0;
}

.page-check input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

.page-check .muted {
  margin-left: 0.15rem;
}

.preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0.5rem;
}

.preset-btn {
  padding: 0.3rem 0.65rem !important;
  background: var(--card) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}

.users-list {
  display: grid;
  gap: 1rem;
}

.user-card {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  padding: 0.85rem 1rem 1rem;
}

.user-card > header {
  margin-bottom: 0.35rem;
}

.user-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.user-status-row,
.user-password-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.65rem 0.85rem;
  margin: 0.55rem 0 0.75rem;
}

.user-status-row label,
.user-password-row label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.user-password-row input[type="password"] {
  min-width: 12rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  font: inherit;
  background: #fff;
}

.user-password-force {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 0.45rem;
  font-weight: 500 !important;
}

.user-password-force input {
  margin: 0;
}

.user-status-row select,
.admin-filter select {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  font: inherit;
  background: #fff;
}

.user-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.user-status-badge.status-active {
  color: #166534;
  background: #dcfce7;
}

.user-status-badge.status-suspended {
  color: #9a3412;
  background: #ffedd5;
}

.user-status-badge.status-deleted {
  color: #7f1d1d;
  background: #fee2e2;
}

.user-card.user-status-suspended {
  opacity: 0.92;
  border-style: dashed;
}

.user-card.user-status-deleted {
  opacity: 0.78;
  background: #f7f3ec;
}

.admin-users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.85rem;
}

.admin-users-toolbar h3 {
  margin: 0;
}

.admin-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.user-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.user-actions .danger {
  background: var(--err);
}

.admin-form h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

.admin-form label {
  display: grid;
  gap: 0.3rem;
}

.admin-msg {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.admin-msg-error {
  color: var(--err);
}

/* —— Profile page —— */
.profile-page {
  width: min(56rem, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.25rem 0 2.5rem;
}

.profile-hero {
  margin-bottom: 1.25rem;
}

.profile-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dark);
}

.profile-hero h2 {
  margin: 0 0 0.35rem;
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.profile-lead {
  margin: 0;
  max-width: 36rem;
  color: var(--muted);
  font-size: 0.98rem;
}

.profile-banner {
  display: grid;
  gap: 0.2rem;
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  border: 1px solid #f0c9a0;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  color: #9a3412;
}

.profile-banner strong {
  font-size: 0.95rem;
}

.profile-banner span {
  font-size: 0.9rem;
  line-height: 1.45;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}

.profile-panel {
  display: grid;
  gap: 0.95rem;
  padding: 1.25rem 1.3rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.95), rgba(255, 253, 248, 0.88)),
    var(--card);
  box-shadow: 0 8px 24px rgba(31, 26, 20, 0.05);
}

.profile-panel-emphasis {
  border-color: #e7b07a;
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, 0.08),
    0 10px 28px rgba(146, 64, 14, 0.08);
}

.profile-panel-head h3 {
  margin: 0 0 0.25rem;
  font-size: 1.08rem;
  font-weight: 650;
}

.profile-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.profile-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.profile-field {
  display: grid;
  gap: 0.35rem;
}

.profile-field label {
  font-size: 0.86rem;
  font-weight: 600;
  color: #4b433a;
}

.profile-field input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: #fff;
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profile-field input::placeholder {
  color: #a89c8e;
}

.profile-field input:hover:not(:disabled):not([readonly]) {
  border-color: #cbbba6;
}

.profile-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.15);
}

.profile-field input:disabled,
.profile-field input[readonly] {
  color: var(--muted);
  background: #f3eee5;
  cursor: default;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-top: 0.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(221, 212, 198, 0.7);
}

.profile-btn {
  margin-left: auto;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 0.55rem;
  background: linear-gradient(180deg, #c2410c 0%, var(--accent-dark) 100%);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.profile-btn:hover {
  background: linear-gradient(180deg, #b45309 0%, #7c2d12 100%);
}

.profile-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.profile-btn-secondary {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
}

.profile-btn-secondary:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--card);
}

.passkey-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.passkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.35);
}

.passkey-item-info {
  display: grid;
  gap: 0.2rem;
  font-size: 0.9rem;
}

.passkey-item-info span {
  color: var(--muted);
  font-size: 0.8rem;
}

.passkey-remove {
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: transparent;
  color: var(--err);
  padding: 0.35rem 0.6rem;
  font: inherit;
  cursor: pointer;
}

.passkey-remove:hover:not(:disabled) {
  background: rgba(180, 60, 50, 0.08);
}

.passkey-empty {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.profile-msg {
  margin: 0;
  flex: 1 1 10rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.profile-msg-ok {
  color: var(--ok);
}

.profile-msg-error {
  color: var(--err);
}

@media (max-width: 760px) {
  .profile-grid,
  .profile-field-row {
    grid-template-columns: 1fr;
  }

  .profile-btn {
    width: 100%;
    margin-left: 0;
  }
}