:root {
  --ink: #17342d;
  --muted: #6f817c;
  --paper: #f5f1e8;
  --panel: #fffdf8;
  --line: #ded8cc;
  --green: #15795b;
  --green-dark: #0f5843;
  --danger: #b94a42;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; margin: 0; }
body {
  color: var(--ink);
  background: var(--paper);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}
button, input, textarea, select { font: inherit; }
button, a { color: inherit; }
button { border: 0; cursor: pointer; }
a, select { cursor: pointer; }
button:disabled, select:disabled {
  cursor: default;
}
button *, a *, select * {
  cursor: inherit;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--paper);
}
.authenticated .login-screen { display: none; }
.login-card {
  display: grid;
  gap: 16px;
  width: min(390px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 55px #17342d18;
}
.login-card h1 { font-size: 30px; }
.login-card .primary-btn { width: 100%; }
.login-error {
  min-height: 18px;
  margin: 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}
body:not(.authenticated) .topbar,
body:not(.authenticated) .layout {
  visibility: hidden;
}

.topbar {
  min-height: 88px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 248, .96);
}
.topbar-brand { flex: 0 0 auto; }
.admin-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f1ece2;
}
.admin-nav-btn {
  min-height: 36px;
  padding: 0 13px;
  border-radius: 7px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}
.admin-nav-btn.active { color: white; background: var(--green); box-shadow: 0 4px 12px #15795b24; }
.eyebrow {
  margin: 0 0 4px;
  color: #719083;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; }
h1 { font-size: 22px; line-height: 1.05; }
h2 { font-size: 24px; }
.actions, .game-switcher { display: flex; gap: 6px; align-items: center; }
.active-game-btn.is-active { color: white; border-color: var(--green); background: var(--green); }
.game-switcher label {
  min-width: 220px;
  margin: 0;
  cursor: pointer;
}
.game-switcher label *,
.ghost-btn,
.ghost-btn *,
.ghost-btn:hover,
.ghost-btn:hover *,
.primary-btn,
.primary-btn *,
.primary-btn:hover,
.primary-btn:hover *,
.danger-btn,
.danger-btn *,
.danger-btn:hover,
.danger-btn:hover *,
.tab,
.tab *,
.tab:hover,
.tab:hover *,
.family-filter button,
.family-filter button *,
.family-filter button:hover,
.family-filter button:hover *,
.add-btn,
.add-btn *,
.add-btn:hover,
.add-btn:hover * {
  cursor: pointer;
}
.ghost-btn:disabled,
.ghost-btn:disabled *,
.ghost-btn:disabled:hover,
.ghost-btn:disabled:hover *,
.primary-btn:disabled,
.primary-btn:disabled *,
.primary-btn:disabled:hover,
.primary-btn:disabled:hover *,
.danger-btn:disabled,
.danger-btn:disabled *,
.danger-btn:disabled:hover,
.danger-btn:disabled:hover * {
  cursor: default;
}
.ghost-btn, .primary-btn, .danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.ghost-btn { border: 1px solid var(--line); background: white; }
.primary-btn { color: white; background: var(--green); }
.danger-btn { color: white; background: var(--danger); }
.ghost-btn:hover { border-color: #b9b0a3; background: #fffaf1; }
.primary-btn:hover { background: #126b51; }
.danger-btn:hover { background: #a64039; }
.ghost-btn:disabled, .primary-btn:disabled, .danger-btn:disabled {
  opacity: .48;
}

.layout {
  display: grid;
  grid-template-columns: 285px minmax(420px, 1fr) minmax(360px, 460px);
  height: calc(100vh - 88px);
  min-height: 0;
}
.sidebar, .editor {
  overflow: auto;
  background: rgba(255, 253, 248, .82);
}
.sidebar {
  padding: 18px;
  border-right: 1px solid var(--line);
}
.game-settings {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.mode-settings {
  margin: 2px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.mode-settings legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.setting-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.setting-toggle input {
  width: auto;
  margin-top: 3px;
}
.setting-toggle strong,
.setting-toggle small { display: block; }
.setting-toggle small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.cover-settings {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefa99;
}
.cover-settings input[type="file"] {
  padding: 6px;
  font-size: 10px;
}
.cover-settings small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.cover-preview {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  background: #eee8dc;
}
.cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.editor {
  padding: 20px;
  border-left: 1px solid var(--line);
}
.search {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}
.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin: 16px 0;
}
.tab {
  height: 34px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.tab.active { color: white; background: var(--ink); }
.family-filter {
  display: grid;
  gap: 6px;
}
.family-filter button {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
}
.family-filter button::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--c, var(--green));
}
.family-filter button.active {
  border-color: color-mix(in srgb, var(--c, var(--green)), white 60%);
  background: color-mix(in srgb, var(--c, var(--green)), white 91%);
}
.family-filter span { margin-left: auto; color: var(--muted); }
.add-btn {
  width: 100%;
  height: 40px;
  margin-top: 16px;
  border-radius: 8px;
  color: white;
  background: var(--green);
  font-weight: 800;
}
.status {
  margin-top: 14px;
  padding: 10px;
  border-radius: 8px;
  background: #ebe5d9;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.status.ok { color: #126148; background: #e5f1eb; }
.status.warn { color: #8a6116; background: #f8efd9; }
.status.bad { color: #9f3f38; background: #f7e5e2; }

.layout.analytics-layout { grid-template-columns: minmax(0, 1fr); }
.layout.analytics-layout .sidebar, .layout.analytics-layout .editor { display: none; }
.analytics-view { background: #f7f3ea; }
.analytics-intro { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.analytics-dashboard { display: grid; gap: 16px; }
.analytics-controls { display: flex; align-items: end; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.analytics-controls label { min-width: 220px; margin: 0; }
.analytics-controls select { min-height: 38px; }
.period-switch { display: flex; min-height: 38px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.period-switch button { min-width: 48px; padding: 0 10px; border-radius: 6px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 800; }
.period-switch button.active { color: white; background: var(--green); }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px; }
.metric-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.metric-grid small { display: block; min-height: 28px; color: var(--muted); font-size: 10px; font-weight: 800; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; }
.metric-grid strong { display: block; margin-top: 8px; color: var(--green-dark); font: 700 32px Georgia, serif; }
.metric-grid em { display: block; min-height: 14px; margin-top: 6px; color: var(--muted); font-size: 10px; font-style: normal; }
.metric-grid em.positive { color: #188252; }
.metric-grid em.negative { color: #b14a3d; }
.analytics-panel { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.analytics-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.analytics-panel h3 { margin: 0; font: 700 18px Georgia, serif; }
.analytics-panel-head small, .analytics-note { color: var(--muted); font-size: 10px; }
.analytics-chart { position: relative; min-height: 225px; padding-top: 10px; }
.analytics-chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.chart-grid line { stroke: #e8e1d5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-grid text { fill: var(--muted); font: 9px Arial, sans-serif; }
.chart-axis-title { position: absolute; top: -8px; left: 0; color: var(--muted); font-size: 9px; font-weight: 700; }
.chart-area { fill: #17805e12; stroke: none; }
.chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-line.visits { stroke: var(--green); }
.chart-line.starts { stroke: #d3954c; }
.chart-points circle { cursor: help; stroke: white; stroke-width: 2; vector-effect: non-scaling-stroke; transition: r .12s ease, filter .12s ease; }
.chart-points circle:hover, .chart-points circle:focus { filter: drop-shadow(0 0 3px #173d34aa); outline: none; r: 6px; }
.chart-points .visits { fill: var(--green); }
.chart-points .starts { fill: #d3954c; }
.analytics-chart-labels { display: grid; grid-template-columns: repeat(var(--chart-count, 30), minmax(0, 1fr)); margin: -4px 1.4% 0 4.8%; }
.analytics-chart-labels small { min-width: 0; color: var(--muted); font-size: 9px; text-align: center; }
.analytics-chart-tooltip { position: absolute; z-index: 3; display: grid; gap: 5px; min-width: 190px; padding: 10px 12px; border: 1px solid #d8cdbc; border-radius: 8px; background: #fffdf9; box-shadow: 0 8px 24px #173d3424; color: var(--green-dark); font-size: 11px; pointer-events: none; transform: translate(-50%, -100%); }
.analytics-chart-tooltip[hidden] { display: none; }
.analytics-chart-tooltip strong { margin-bottom: 2px; font: 700 13px Georgia, serif; text-transform: capitalize; }
.analytics-chart-tooltip span { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.analytics-chart-tooltip i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.analytics-chart-tooltip i.starts { background: #d3954c; }
.analytics-legend { display: flex; gap: 16px; color: var(--muted); font-size: 10px; }
.analytics-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; background: var(--legend); }
.analytics-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ranking-list { display: grid; gap: 12px; }
.ranking-row { display: grid; grid-template-columns: minmax(100px, 180px) minmax(80px, 1fr) auto; align-items: center; gap: 10px; font-size: 12px; }
.ranking-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-track { height: 9px; overflow: hidden; border-radius: 999px; background: #eee6d7; }
.ranking-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), #55a487); }
.ranking-row small { color: var(--muted); }
.analytics-table-wrap { overflow: auto; }
.analytics-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.analytics-table th, .analytics-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.analytics-table th:first-child, .analytics-table td:first-child { text-align: left; }
.analytics-table th { color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.analytics-table td strong, .analytics-table td small { display: block; }
.analytics-table td small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.analytics-empty { padding: 30px !important; color: var(--muted); text-align: center !important; }
.analytics-note { margin: 0 4px; line-height: 1.5; }
.analytics-error { padding: 14px; border-radius: 8px; color: #9f3f38; background: #f7e5e2; font-size: 12px; }
@media (max-width: 1250px) { .metric-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .analytics-split { grid-template-columns: 1fr; } }

.import-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px; color: var(--ink); background: var(--panel); box-shadow: 0 24px 70px #17342d42; }
.import-dialog::backdrop { background: #17342d72; backdrop-filter: blur(3px); }
.import-panel { display: grid; gap: 17px; padding: 25px; }
.import-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.dialog-close { width: 32px; height: 32px; border-radius: 50%; color: var(--muted); background: #eee9df; font-size: 22px; line-height: 1; }
.import-help { margin: -5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.import-modes { display: grid; gap: 9px; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 8px; }
.import-modes legend { padding: 0 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.import-modes label { display: flex; align-items: center; gap: 9px; color: var(--ink); letter-spacing: 0; }
.import-modes input { width: auto; margin: 0; }
.import-preview { min-height: 110px; max-height: 230px; overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #faf7f0; font-size: 12px; }
.import-preview p { margin: 0; color: var(--muted); }
.import-preview h3 { margin: 0 0 10px; font: 700 17px Georgia, serif; }
.import-preview ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.5; }
.import-preview .import-error { color: var(--danger); }
.import-preview .import-warning { color: #8a6116; }
.import-summary { display: flex; gap: 10px; flex-wrap: wrap; }
.import-summary span { padding: 6px 9px; border-radius: 999px; color: #126148; background: #e5f1eb; font-weight: 800; }
.import-actions { display: flex; justify-content: flex-end; gap: 8px; }

.content-view {
  display: none;
  min-width: 0;
  overflow: auto;
  padding: 18px;
}
.content-view.active { display: block; }
.list-head, .card-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) 145px minmax(210px, 1.5fr);
  gap: 14px;
  align-items: center;
}
.list-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 12px 10px;
  color: var(--muted);
  background: var(--paper);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.card-list {
  display: grid;
  gap: 8px;
}
.card-row {
  width: 100%;
  min-height: 62px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  text-align: left;
}
.card-row[draggable="true"] { cursor: grab; }
.card-row[draggable="true"] * { cursor: inherit; }
.card-row[draggable="true"]:hover,
.card-row[draggable="true"]:hover * { cursor: grab; }
.card-row.dragging {
  opacity: .52;
  cursor: grabbing;
}
.card-row.dragging,
.card-row.dragging * { cursor: grabbing; }
.card-row.drop-target {
  border-color: var(--green);
  box-shadow: inset 0 3px 0 var(--green), 0 4px 14px #17342d12;
}
.card-row.duplicate-id {
  border-color: var(--danger);
  background: #fff7f5;
}
.card-row:hover, .card-row.active {
  border-color: var(--green);
  box-shadow: 0 4px 14px #17342d12;
}
.card-row strong {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.drag-handle {
  color: #9ba8a3;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}
.card-row strong span {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--c);
}
.card-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.card-row small {
  color: #40534f;
  font-size: 12px;
  line-height: 1.35;
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
  gap: 16px;
  align-items: stretch;
}
.group-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--c), white 68%);
  border-radius: 12px;
  background: var(--panel);
}
.group-card-head {
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}
.group-card-head strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.group-delete-btn {
  flex: none;
  align-self: start;
  min-height: 30px;
  padding: 0 10px;
  font-size: 10px;
}
.group-card-meta {
  margin: -4px 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.group-card label,
.group-card input,
.group-card textarea {
  min-width: 0;
  max-width: 100%;
}
.group-card textarea { min-height: 96px; }

.field-help {
  margin: -6px 0 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.guide-settings {
  border: 1px solid #e8e1d6;
  border-radius: 8px;
  background: #fffefa99;
}

.guide-settings summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.guide-zone-grid {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.guide-zone-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #ebe4da;
  border-radius: 8px;
  background: var(--panel);
}

.guide-zone-head strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

.edit-form {
  display: grid;
  gap: 13px;
}
.editor-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  margin-bottom: 4px;
}
.editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.id-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}
.id-field .ghost-btn {
  min-height: 39px;
  white-space: nowrap;
}
.link-suggestion-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -6px;
}
.link-suggestion-tools small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.ai-link-btn,
.ai-all-btn {
  border-color: color-mix(in srgb, var(--green), white 45%);
  color: var(--green-dark);
  background: #edf7f2;
}
.ai-link-btn:hover,
.ai-all-btn:hover {
  border-color: var(--green);
  background: #e2f2ea;
}
.list-head {
  grid-template-columns: minmax(150px, 1.1fr) 120px minmax(150px, 1fr) auto;
}
.ai-all-btn {
  justify-self: end;
  min-height: 30px;
  letter-spacing: 0;
  text-transform: none;
}
.field-warning {
  margin: -6px 0 0;
  padding: 9px 10px;
  border-radius: 8px;
  color: #9f3f38;
  background: #f7e5e2;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.check-field {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  letter-spacing: 0;
}
.check-field input {
  width: auto;
  margin: 0;
}
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  color: var(--ink);
  background: white;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
textarea { resize: vertical; }
.empty-editor, .empty-list, .report {
  color: var(--muted);
}
.empty-editor {
  min-height: 230px;
  display: grid;
  place-content: center;
  text-align: center;
}
.report-summary {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 13px;
  border-radius: 8px;
  font-weight: 800;
}
.report-summary.ok { color: #126148; background: #e5f1eb; }
.report-summary.bad { color: #9f3f38; background: #f7e5e2; }
.report ul {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}
.report li {
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--panel);
  font-size: 13px;
}
.report .error { border-left: 4px solid var(--danger); }
.report .warning { border-left: 4px solid #d79a26; }
.report .ok { border-left: 4px solid var(--green); }

@media (max-width: 1050px) {
  .topbar { flex-wrap: wrap; padding-block: 12px; }
  .layout { grid-template-columns: 240px 1fr; }
  .editor { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .topbar { height: auto; min-height: 78px; flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .actions, .game-switcher { flex-wrap: wrap; }
  .admin-nav { width: 100%; }
  .admin-nav-btn { flex: 1; }
  .game-switcher label { min-width: 100%; }
  .layout { height: auto; grid-template-columns: 1fr; }
  .sidebar, .content-view, .editor { max-height: none; border: 0; }
  .list-head { display: none; }
  .card-row { grid-template-columns: 1fr; gap: 6px; }
  .id-field { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .analytics-controls { justify-content: stretch; }
  .analytics-controls label, .analytics-controls .ghost-btn, .period-switch { width: 100%; }
  .period-switch button { flex: 1; }
}