body {
  margin: 0;
  font-family: Georgia, serif;
  background: #f4efe3;
  color: #1f1b16;
}

.app {
  max-width: 1800px;
  margin: 0 auto;
  padding: 16px;
}

h1 {
  margin: 0 0 12px 0;
}

.utility-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto auto minmax(170px, 220px) auto auto auto;
  gap: 8px;
  margin: 0 0 12px 0;
  align-items: center;
}

.utility-bar input {
  border: 1px solid #d8d0bf;
  border-radius: 8px;
  padding: 8px 10px;
}

.utility-bar button,
.utility-link-btn {
  border: 1px solid #d8d0bf;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f3ebd8;
  cursor: pointer;
  font: 15px/1.3 Georgia, serif;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.utility-bar #searchMeta {
  font-size: 13px;
  color: #2a6f97;
}

.danger-btn {
  border-color: #b91c1c !important;
  background: #ffe3e3 !important;
}

.three-col-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 250px;
  gap: 12px;
  align-items: start;
}

.left-panel,
.right-panel {
  position: sticky;
  top: 10px;
  max-height: calc(100vh - 20px);
  overflow: auto;
}

.left-panel .controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d8d0bf;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fffdf8;
  font-size: 14px;
  box-sizing: border-box;
}

.left-panel .toggle,
.left-panel #saveTextBtn,
.left-panel #exportProjectBtn,
.left-panel #exportWordsBtn,
.left-panel .file-btn,
.left-panel .manager button,
.left-panel .manager select,
.left-panel .manager input {
  width: 100%;
  box-sizing: border-box;
}

#saveTextBtn,
#exportProjectBtn,
#exportWordsBtn,
.file-btn {
  border: 1px solid #d8d0bf;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f3ebd8;
  cursor: pointer;
  font: 15px/1.3 Georgia, serif;
  color: inherit;
  text-decoration: none;
}

.left-panel #saveTextBtn,
.left-panel #exportProjectBtn,
.left-panel #exportWordsBtn,
.left-panel .file-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 40px;
}

#saveStatus {
  font-size: 13px;
  color: #2a6f97;
}

.manager,
.stats {
  background: #fffdf8;
  border: 1px solid #d8d0bf;
  border-radius: 8px;
  padding: 10px;
}

.manager h2,
.stats h2 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.manager-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.manager select,
.manager input,
.manager button {
  border: 1px solid #d8d0bf;
  border-radius: 6px;
  padding: 8px;
  font: 15px/1.3 Georgia, serif;
}

.manager button {
  cursor: pointer;
  background: #f3ebd8;
}

#managerMessage {
  margin: 0 0 8px 0;
  color: #2a6f97;
  min-height: 18px;
}

.center-panel .panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pane {
  background: #fffdf8;
  border: 1px solid #d8d0bf;
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}

.pane-body {
  position: relative;
}

.reading-guide {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  border-top: 1px solid rgba(123, 116, 103, 0.45);
  pointer-events: none;
  z-index: 3;
}

h2 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

textarea {
  width: 100%;
  min-height: 75vh;
  resize: vertical;
  border: 1px solid #d8d0bf;
  border-radius: 6px;
  padding: 10px;
  font: 16px/1.55 Georgia, serif;
  box-sizing: border-box;
}

#lensOutput {
  height: 75vh;
  border: 1px solid #d8d0bf;
  border-radius: 6px;
  padding: 10px;
  background: #fff;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow: auto;
  box-sizing: border-box;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.stat-card {
  border: 1px solid #d8d0bf;
  border-radius: 6px;
  background: #fff;
  padding: 8px;
}

.stat-card strong {
  display: block;
  font-size: 18px;
  line-height: 1.1;
}

.stat-card span {
  font-size: 12px;
  color: #5c5347;
}

.stats h3 {
  margin: 10px 0 6px;
  font-size: 16px;
}

.top-content-list {
  margin: 0;
  padding-left: 20px;
  columns: 1;
}

.top-content-list li {
  margin: 2px 0;
}

.verb { background: #bfe7ff; border-bottom: 2px solid #2a6f97; border-radius: 3px; padding: 0 1px; }
.noun { background: #e8ddff; border-bottom: 2px solid #6d28d9; border-radius: 3px; padding: 0 1px; }
.pronoun { background: #d7e4ff; border-bottom: 2px solid #375fcf; border-radius: 3px; padding: 0 1px; }
.determiner { background: #fff0c9; border-bottom: 2px solid #b7791f; border-radius: 3px; padding: 0 1px; }
.adjective { background: #ffe6c7; border-bottom: 2px solid #c77212; border-radius: 3px; padding: 0 1px; }
.adverb { background: #ccf4df; border-bottom: 2px solid #0f8a53; border-radius: 3px; padding: 0 1px; }
.preposition { background: #e1f6ff; border-bottom: 2px solid #0e7490; border-radius: 3px; padding: 0 1px; }
.conjunction { background: #ffe8dc; border-bottom: 2px solid #c2410c; border-radius: 3px; padding: 0 1px; }
.vague-word { background: #fff3c4; border-bottom: 2px solid #a16207; border-radius: 3px; padding: 0 1px; }
.hated-word { background: #ffd6d6; border-bottom: 2px solid #b91c1c; border-radius: 3px; padding: 0 1px; }
.ekow-word { background: #fbcfe8; border-bottom: 2px solid #be185d; border-radius: 3px; padding: 0 1px; }
.filler-word { background: #fde68a; border-bottom: 2px solid #b45309; border-radius: 3px; padding: 0 1px; }
.filter-verb { background: #dbeafe; border-bottom: 2px solid #1d4ed8; border-radius: 3px; padding: 0 1px; }
.hedge { background: #ffe8b8; border-bottom: 2px solid #b7791f; border-radius: 3px; padding: 0 1px; }
.interjection { background: #ffe4f1; border-bottom: 2px solid #be185d; border-radius: 3px; padding: 0 1px; }
.intensifier { background: #ffc8c8; border-bottom: 2px solid #c53030; border-radius: 3px; padding: 0 1px; }
.repetition { background: #f8d8ff; border-bottom: 2px solid #a21caf; border-radius: 3px; padding: 0 1px; }
.overused-word { background: #fbd5ff; border-bottom: 2px solid #86198f; border-radius: 3px; padding: 0 1px; }
.ing-word { background: #dbeafe; border-bottom: 2px solid #2563eb; border-radius: 3px; padding: 0 1px; }
.focus-word { background: #e5e7eb; border-bottom: 2px solid #374151; border-radius: 3px; padding: 0 2px; }
.ly-word { background: #dcfce7; border-bottom: 2px solid #15803d; border-radius: 3px; padding: 0 1px; }
.contraction { background: #e0f2fe; border-bottom: 2px solid #0369a1; border-radius: 3px; padding: 0 1px; }
.article-word { background: #fff2bf; border-bottom: 2px solid #b45309; border-radius: 3px; padding: 0 1px; }
.punctuation-mark { background: #fef9c3; border-bottom: 2px solid #a16207; border-radius: 3px; padding: 0 1px; }

.sentence-wrap { border-radius: 5px; }
.sentence-force { box-shadow: inset 0 0 0 1px #0f766e88; background: #d8f5f0; }
.breath-chunk { border-radius: 4px; }
.breath-short { box-shadow: inset 0 0 0 1px #16653488; background: #e8f9ea; }
.breath-medium { box-shadow: inset 0 0 0 1px #a1620788; background: #fff7cc; }
.breath-long { box-shadow: inset 0 0 0 1px #b91c1c88; background: #ffe1e1; }
.pacing-mild { box-shadow: inset 0 0 0 1px #a1620788; background: #fff4c2; }
.pacing-medium { box-shadow: inset 0 0 0 1px #ea580c88; background: #ffe5c7; }
.pacing-severe { box-shadow: inset 0 0 0 1px #be185d88; background: #ffe0ef; }
.alliteration-echo { background: #efe7ff; border-bottom: 2px solid #8b5cf6; border-radius: 3px; padding: 0 1px; }
.harsh-clusters { background: #ffe7d6; border-bottom: 2px solid #c2410c; border-radius: 3px; padding: 0 1px; }
.mouth-load { box-shadow: inset 0 0 0 1px #b91c1c88; background: #ffe1e1; }
.soft-flow { box-shadow: inset 0 0 0 1px #0f766e88; background: #dcf6ef; }
.question-density { box-shadow: inset 0 0 0 1px #92400e88; background: #fff0da; }
.dialogue-lines { box-shadow: inset 0 0 0 1px #0e749088; background: #e2f7fb; }
.sentence-length-short { box-shadow: inset 0 0 0 1px #16653488; background: #e8f9ea; }
.sentence-length-medium { box-shadow: inset 0 0 0 1px #a1620788; background: #fff7cc; }
.sentence-length-long { box-shadow: inset 0 0 0 1px #b91c1c88; background: #ffe1e1; }
.passive-voice { box-shadow: inset 0 0 0 1px #7f1d1d88; background: #ffe4e6; }

.toggle-article { background: #fff6d9; border-color: #b45309; }
.toggle-determiner { background: #fff2d8; border-color: #b7791f; }
.toggle-adjective { background: #fff0dd; border-color: #c77212; }
.toggle-adverb { background: #e6faee; border-color: #0f8a53; }
.toggle-breath { background: #e8f1ff; border-color: #2563eb; }
.toggle-contraction { background: #e6f6ff; border-color: #0369a1; }
.toggle-conjunction { background: #ffece3; border-color: #c2410c; }
.toggle-dialogue { background: #e8f9fd; border-color: #0e7490; }
.toggle-ekow { background: #fce7f3; border-color: #be185d; }
.toggle-filler { background: #fef3c7; border-color: #b45309; }
.toggle-filter-verb { background: #e7f0ff; border-color: #1d4ed8; }
.toggle-hated { background: #ffe3e3; border-color: #b91c1c; }
.toggle-hedge { background: #fff1cf; border-color: #b7791f; }
.toggle-ing { background: #e6f4ff; border-color: #2563eb; }
.toggle-interjection { background: #ffe7f2; border-color: #be185d; }
.toggle-intensifier { background: #ffdede; border-color: #c53030; }
.toggle-ly { background: #e9fbe9; border-color: #15803d; }
.toggle-noun { background: #f1e9ff; border-color: #6d28d9; }
.toggle-overused { background: #fbe8ff; border-color: #86198f; }
.toggle-pacing { background: #ffe5f1; border-color: #be185d; }
.toggle-passive { background: #ffe8ea; border-color: #7f1d1d; }
.toggle-alliteration { background: #efe7ff; border-color: #8b5cf6; }
.toggle-harsh-clusters { background: #ffe7d6; border-color: #c2410c; }
.toggle-mouth-load { background: #ffe1e1; border-color: #b91c1c; }
.toggle-soft-flow { background: #dcf6ef; border-color: #0f766e; }
.toggle-punctuation { background: #fff8d9; border-color: #a16207; }
.toggle-preposition { background: #e8f8ff; border-color: #0e7490; }
.toggle-pronoun { background: #e7eeff; border-color: #375fcf; }
.toggle-question { background: #fff3df; border-color: #92400e; }
.toggle-repetition { background: #f9e7ff; border-color: #a21caf; }
.toggle-sentence-force { background: #dbf7f2; border-color: #0f766e; }
.toggle-sentence-length { background: #e7f8ea; border-color: #166534; }
.toggle-vague { background: #fff5d6; border-color: #a16207; }
.toggle-verb { background: #e6f4ff; border-color: #2a6f97; }

.toggle-article input { accent-color: #b45309; }
.toggle-determiner input { accent-color: #b7791f; }
.toggle-adjective input { accent-color: #c77212; }
.toggle-adverb input { accent-color: #0f8a53; }
.toggle-breath input { accent-color: #2563eb; }
.toggle-contraction input { accent-color: #0369a1; }
.toggle-conjunction input { accent-color: #c2410c; }
.toggle-dialogue input { accent-color: #0e7490; }
.toggle-filler input { accent-color: #b45309; }
.toggle-filter-verb input { accent-color: #1d4ed8; }
.toggle-hated input { accent-color: #b91c1c; }
.toggle-hedge input { accent-color: #b7791f; }
.toggle-interjection input { accent-color: #be185d; }
.toggle-intensifier input { accent-color: #c53030; }
.toggle-ly input { accent-color: #15803d; }
.toggle-noun input { accent-color: #6d28d9; }
.toggle-overused input { accent-color: #86198f; }
.toggle-pacing input { accent-color: #be185d; }
.toggle-passive input { accent-color: #7f1d1d; }
.toggle-alliteration input { accent-color: #8b5cf6; }
.toggle-harsh-clusters input { accent-color: #c2410c; }
.toggle-mouth-load input { accent-color: #b91c1c; }
.toggle-soft-flow input { accent-color: #0f766e; }
.toggle-punctuation input { accent-color: #a16207; }
.toggle-preposition input { accent-color: #0e7490; }
.toggle-pronoun input { accent-color: #375fcf; }
.toggle-question input { accent-color: #92400e; }
.toggle-repetition input { accent-color: #a21caf; }
.toggle-sentence-force input { accent-color: #0f766e; }
.toggle-sentence-length input { accent-color: #166534; }
.toggle-vague input { accent-color: #a16207; }
.toggle-verb input { accent-color: #2a6f97; }

.preset-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

@media (max-width: 1500px) {
  .three-col-layout {
    grid-template-columns: 220px minmax(0, 1fr) 240px;
  }
}

@media (max-width: 1180px) {
  .three-col-layout {
    grid-template-columns: 1fr;
  }

  .left-panel,
  .right-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .center-panel .panes {
    grid-template-columns: 1fr;
  }

  .utility-bar {
    grid-template-columns: 1fr 1fr 1fr;
  }
}