:root {
  color-scheme: dark;
  font-family: Inter, Arial, sans-serif;
}

body {
  margin: 0;
  padding: 1.2rem;
  background: #111827;
  color: #e5e7eb;
}

header {
  max-width: 1400px;
  margin: 0 auto 1rem;
}

.app-shell {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(620px, 1fr);
  gap: 1rem;
}

.card {
  background: #0b1220;
  border: 1px solid #1f2937;
  border-radius: 12px;
  padding: 1rem;
}

label,
input,
select,
textarea,
button {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
}

input,
select,
textarea,
button {
  border-radius: 8px;
  border: 1px solid #374151;
  padding: 0.6rem;
  font: inherit;
  background: #0f172a;
  color: #e5e7eb;
}

textarea {
  resize: vertical;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

#notes-list {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 0;
  display: grid;
  gap: 0.4rem;
}

#notes-list button {
  text-align: left;
}

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.8rem 0;
}

.mode-btn {
  cursor: pointer;
}

.mode-btn-active {
  border-color: #60a5fa;
  background: #1d4ed8;
  color: #fff;
}

.pane {
  display: none;
}

.pane-visible {
  display: block;
}

.preview {
  margin-top: 0.8rem;
  overflow: auto;
  max-height: 320px;
}

.preview img {
  max-width: 100%;
  border-radius: 8px;
}

#live-table-editor table input {
  min-width: 120px;
}

#table-preview table {
  border-collapse: collapse;
  width: 100%;
}

#table-preview td,
#table-preview th,
#live-table-editor td,
#live-table-editor th {
  border: 1px solid #334155;
  padding: 0.4rem;
}

.chart-wrap {
  margin-top: 0.8rem;
  min-height: 200px;
}

.hint {
  color: #94a3b8;
}

.preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .preview-grid {
    grid-template-columns: 1fr;
  }
}