/* === Screens === */
.screen { display: none; }
.screen.active { display: block; }

.center-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 32px;
  text-align: center;
  gap: 16px;
}

/* === Spinner === */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(20, 184, 48, 0.15);
  border-top-color: #14b830;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Tab content === */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* === Tab active states === */
.sections-nav {
  scrollbar-width: none;
}
.sections-nav::-webkit-scrollbar {
  display: none;
}
.sections-nav .tab {
  color: rgb(100 116 139);
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.65);
}
.sections-nav .tab.active {
  color: #14b830;
  border-color: rgba(20, 184, 48, 0.25);
  background: rgba(20, 184, 48, 0.08);
  font-weight: 600;
}
.sections-nav .tab:hover:not(.active) {
  color: #14b830;
  background: rgba(20, 184, 48, 0.04);
}
.dark .sections-nav .tab {
  background: rgba(15, 23, 42, 0.45);
}
.dark .sections-nav .tab.active {
  background: rgba(20, 184, 48, 0.12);
  border-color: rgba(20, 184, 48, 0.35);
}

/* === Status bar (inline pill) === */
.status-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  transition: background 0.3s, color 0.3s;
  background: rgb(241 245 249);
}
.dark .status-bar { background: rgb(30 41 59); }

.status-bar.saving { background: #fef3c7; color: #d97706; }
.status-bar.saved { background: rgba(20, 184, 48, 0.1); color: #14b830; }
.status-bar.error { background: #fef2f2; color: #dc2626; }
.status-bar.offline { background: rgb(241 245 249); color: rgb(100 116 139); }
.dark .status-bar.saving { background: rgba(217, 119, 6, 0.15); }
.dark .status-bar.saved { background: rgba(20, 184, 48, 0.15); }
.dark .status-bar.error { background: rgba(220, 38, 38, 0.15); }
.dark .status-bar.offline { background: rgb(30 41 59); }

/* === Dark mode toggle === */
.dark .theme-icon-dark { display: none; }
.dark .theme-icon-light { display: inline; }

/* === Inline error === */
.inline-error {
  display: none;
  font-size: 13px;
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 12px;
}
.dark .inline-error {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.2);
}

/* === Invalid field state === */
[data-key].invalid {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
}
.dark [data-key].invalid {
  background: rgba(220, 38, 38, 0.1) !important;
}

/* === Previous values dropdown === */
.prev-values-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}
.dark .prev-values-dropdown {
  background: rgb(30 41 59);
  border-color: rgb(51 65 85);
}
.prev-values-dropdown.open { display: block; }

.prev-value-item {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid rgb(241 245 249);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.dark .prev-value-item { border-bottom-color: rgb(51 65 85); }
.prev-value-item:last-child { border-bottom: none; }
.prev-value-item:hover { background: rgba(20, 184, 48, 0.05); }
.prev-value-item .date { font-size: 11px; color: rgb(148 163 184); white-space: nowrap; }
.prev-value-item .value { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === Consul summary (rendered markdown) === */
.consul-summary {
  border: 1px solid rgb(226 232 240);
  border-radius: 12px;
  background: rgb(248 250 252);
  padding: 16px;
}
.dark .consul-summary {
  background: rgb(15 23 42 / 0.5);
  border-color: rgb(51 65 85);
}
.consul-summary .md-spacer { height: 8px; }
.consul-summary p, .consul-summary li { font-size: 14px; line-height: 1.6; }
.consul-summary h1, .consul-summary h2, .consul-summary h3 { font-size: 16px; font-weight: 600; margin: 8px 0 4px; }
.consul-summary ul, .consul-summary ol { padding-left: 20px; margin: 6px 0; }
.consul-summary pre {
  padding: 12px;
  border-radius: 8px;
  background: rgb(241 245 249);
  overflow: auto;
  font-size: 13px;
}
.dark .consul-summary pre { background: rgb(30 41 59); }

/* === Action buttons (shared style) === */
.action-btn {
  padding: 8px 12px;
  background: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.action-btn:hover { background: rgba(20, 184, 48, 0.05); color: #14b830; border-color: rgba(20, 184, 48, 0.3); }
.dark .action-btn { background: rgb(30 41 59); border-color: rgb(51 65 85); }
.dark .action-btn:hover { background: rgba(20, 184, 48, 0.1); }

@media (min-width: 1024px) {
  .desktop-tall-textarea {
    min-height: 8.75rem;
  }
}

/* === Consul editor === */
.consul-editor {
  border: 1px solid rgb(226 232 240);
  border-radius: 12px;
  padding: 16px;
  background: rgb(248 250 252);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dark .consul-editor { background: rgb(15 23 42 / 0.3); border-color: rgb(51 65 85); }

.consul-editor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.consul-editor-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  padding: 8px 12px;
  background: white;
}
.dark .consul-editor-row { background: rgb(30 41 59); border-color: rgb(51 65 85); }
.consul-editor-row.section { background: rgba(20, 184, 48, 0.05); font-weight: 600; }
.dark .consul-editor-row.section { background: rgba(20, 184, 48, 0.1); }

.consul-editor-text { font-size: 13px; white-space: pre-wrap; }

.consul-editor-actions {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 0 0 auto;
}

.consul-editor-bot {
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  background: rgb(241 245 249);
  color: rgb(71 85 105);
  min-height: 24px;
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.consul-editor-bot:hover:not(:disabled) {
  background: rgba(20, 184, 48, 0.08);
  color: #15803d;
  border-color: rgba(20, 184, 48, 0.3);
}
.consul-editor-bot:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.dark .consul-editor-bot {
  background: rgb(51 65 85);
  border-color: rgb(71 85 105);
  color: rgb(203 213 225);
}

.consul-editor-remove {
  border: none;
  border-radius: 6px;
  background: rgb(241 245 249);
  color: rgb(100 116 139);
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 12px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.consul-editor-remove:hover { background: #fecaca; color: #dc2626; }
.dark .consul-editor-remove { background: rgb(51 65 85); }

.consul-editor-empty, .consul-history-empty, .diary-empty {
  font-size: 13px;
  color: rgb(148 163 184);
  padding: 8px 0;
}

/* === Consul diff === */
.consul-diff {
  border: 1px solid rgb(226 232 240);
  border-radius: 12px;
  background: white;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dark .consul-diff { background: rgb(15 23 42 / 0.5); border-color: rgb(51 65 85); }

.consul-diff-head { font-weight: 600; font-size: 14px; }
.consul-diff-groups { display: flex; flex-wrap: wrap; gap: 10px; }
.consul-diff-group { font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.consul-diff-group input { accent-color: #14b830; }

.consul-diff-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11px; text-transform: uppercase; color: rgb(148 163 184); }

.consul-diff-table { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }

.consul-diff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 1px solid rgb(226 232 240);
  border-radius: 8px;
  padding: 10px;
}
.dark .consul-diff-row { border-color: rgb(51 65 85); }
.consul-diff-row .field { grid-column: 1 / span 2; font-size: 12px; color: rgb(148 163 184); }
.consul-diff-row .old, .consul-diff-row .new { font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.consul-diff-row .new { background: rgba(20, 184, 48, 0.08); border-radius: 6px; padding: 6px; }

.consul-diff-empty { font-size: 13px; color: rgb(148 163 184); }

/* === Consul email form === */
.consul-email-form { display: flex; gap: 8px; }

/* === Consul posters === */
.consul-poster-card {
  border: 1px solid rgb(226 232 240);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  background: rgb(248 250 252);
}
.dark .consul-poster-card { background: rgb(30 41 59); border-color: rgb(51 65 85); }
.consul-poster-card .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.consul-poster-card p { margin-top: 8px; white-space: pre-wrap; font-size: 13px; line-height: 1.5; }

.consul-posters-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgb(148 163 184);
}
.consul-posters-loading .spinner { width: 20px; height: 20px; border-width: 2px; }

/* === Consul history === */
.consul-history { display: flex; flex-direction: column; gap: 8px; }

.consul-history-item {
  border: 1px solid rgb(226 232 240);
  border-radius: 10px;
  background: white;
  text-align: left;
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: all 0.15s;
}
.consul-history-item:hover { border-color: rgba(20, 184, 48, 0.3); background: rgba(20, 184, 48, 0.02); }
.dark .consul-history-item { background: rgb(30 41 59); border-color: rgb(51 65 85); }
.consul-history-item .title { font-size: 14px; }
.consul-history-item .meta { font-size: 12px; color: rgb(148 163 184); }

/* === Diary list === */
.diary-list { display: flex; flex-direction: column; gap: 8px; }

.diary-item {
  border: 1px solid rgb(226 232 240);
  border-radius: 10px;
  background: white;
  overflow: hidden;
  transition: border-color 0.15s;
}
.diary-item:hover { border-color: rgba(20, 184, 48, 0.3); }
.dark .diary-item { background: rgb(30 41 59 / 0.5); border-color: rgb(51 65 85); }

.diary-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.diary-item-head::-webkit-details-marker { display: none; }
.diary-item-head .meta { font-size: 12px; color: rgb(148 163 184); }

.diary-item pre {
  font-family: "Inter", system-ui, sans-serif;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 13px;
  line-height: 1.6;
  background: rgb(248 250 252);
  border-top: 1px solid rgb(241 245 249);
  padding: 12px 14px;
  margin: 0;
}
.dark .diary-item pre { background: rgb(15 23 42 / 0.3); border-top-color: rgb(51 65 85); }

/* === Modal === */
.app-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.app-modal[aria-hidden="false"] { display: flex; }

.app-modal-dialog {
  width: min(420px, 100%);
  border: 1px solid rgb(226 232 240);
  border-radius: 12px;
  background: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.dark .app-modal-dialog { background: rgb(15 23 42); border-color: rgb(51 65 85); }

.link-editor-dialog {
  width: min(960px, 100%);
  max-height: min(92vh, 1000px);
  overflow-y: auto;
}

/* === Consul result head === */
.consul-result-head .meta { font-size: 12px; color: rgb(148 163 184); }

/* === Processing states === */
#consul-processing, #diary-processing {
  text-align: center;
}

/* === Safe area bottom padding === */
body { padding-bottom: env(safe-area-inset-bottom, 20px); }

/* === Accordion marker removal (Tailwind group handles rotation via class) === */
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary { list-style: none; }