:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e9eef2;
  background: #0a0d10;
  font-synthesis: none;
  --panel: #11171c;
  --panel-soft: #161e24;
  --line: #29353e;
  --muted: #82919c;
  --accent: #28d7cf;
  --accent-dark: #0b5f5c;
  --danger: #e27979;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  background: radial-gradient(circle at 50% -20%, #17242b 0, #0a0d10 45%);
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.app {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: clamp(10px, 2vw, 22px);
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 9px;
}

h1, h2, p { margin: 0; }
h1 { font-size: 0.82rem; letter-spacing: 0.18em; color: var(--muted); }
.active-label { margin-top: 3px; font-size: 0.78rem; color: #c8d2d9; }
.topbar-actions { display: flex; align-items: center; gap: 13px; }

.text-action {
  border: 0;
  padding: 2px 0;
  color: var(--muted);
  background: transparent;
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
}
.text-action:hover, .text-action:focus-visible { color: var(--accent); }

.screen-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #33434d;
  border-radius: 8px;
  background: #020507;
  box-shadow: 0 16px 50px rgb(0 0 0 / 34%);
}

.screen-shell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #020507;
}

.screen-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 5px;
  text-align: center;
  color: #64737d;
  background:
    linear-gradient(#10171c 1px, transparent 1px),
    linear-gradient(90deg, #10171c 1px, transparent 1px), #070b0e;
  background-size: 32px 32px;
}
.screen-empty span { font-size: 0.9rem; letter-spacing: 0.08em; }
.screen-empty small { font-size: 0.7rem; }
.screen-empty.error { color: #e38b8b; }

.replace-current {
  position: absolute;
  right: 9px;
  bottom: 9px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 5px;
  padding: 6px 9px;
  color: #d6e0e5;
  background: rgb(8 13 16 / 82%);
  font-size: 0.7rem;
  cursor: pointer;
  opacity: 0.68;
}
.replace-current:hover, .replace-current:focus-visible { opacity: 1; border-color: var(--accent); }

.page-grid, .ensemble-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.page-grid { gap: 7px; margin-top: 9px; }
.ensemble-grid { gap: 7px; margin-top: 9px; }

.page-grid button, .ensemble-grid button {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #cbd5da;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
}

.page-grid button, .ensemble-grid button {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
}
.page-grid button {
  min-height: 40px;
}
.page-grid strong { font-size: 0.95rem; }
.page-grid span, .ensemble-grid span { color: var(--muted); font-size: 0.68rem; font-weight: 500; }

.ensemble-grid button {
  min-height: 39px;
  padding: 7px 5px;
  letter-spacing: 0.025em;
}
.ensemble-grid strong { font-size: clamp(0.66rem, 1.8vw, 0.78rem); font-weight: 680; }

.page-grid button:hover, .ensemble-grid button:hover { border-color: #58707e; background: var(--panel-soft); }
.page-grid button.active, .ensemble-grid button.active {
  border-color: var(--accent);
  color: #041413;
  background: var(--accent);
}
.page-grid button.active span { color: #164f4d; }
.ensemble-grid button.active span { color: #164f4d; }
.ensemble-grid button:disabled {
  color: #4b565d;
  border-color: #20292f;
  background: #0e1317;
  cursor: not-allowed;
}

.save-status {
  min-height: 18px;
  padding-top: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  text-align: right;
}
.save-status.error { color: var(--danger); }

.settings-dialog {
  width: min(1050px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  padding: 0;
  border: 1px solid #3a4a55;
  border-radius: 10px;
  color: #e7edf0;
  background: #0e1418;
  box-shadow: 0 24px 100px #000;
}
.settings-dialog::backdrop { background: rgb(0 0 0 / 75%); backdrop-filter: blur(3px); }

.dialog-heading {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 17px 18px 13px;
  border-bottom: 1px solid var(--line);
  background: #0e1418;
}
.dialog-heading h2 { font-size: 1rem; }
.dialog-heading p { margin-top: 3px; color: var(--muted); font-size: 0.72rem; }
.close-button { border: 0; color: var(--muted); background: transparent; font-size: 1.6rem; line-height: 1; cursor: pointer; }

.settings-matrix { padding: 10px 18px 20px; }
.settings-row {
  display: grid;
  grid-template-columns: minmax(80px, 0.75fr) repeat(4, minmax(120px, 1fr));
  gap: 7px;
  padding: 7px 0;
  border-bottom: 1px solid #1e282e;
}
.settings-row-title { align-self: center; font-size: 0.76rem; font-weight: 700; }

.slot-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #11191e;
}
.slot-preview { width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; color: #59666e; background: #06090b; font-size: 0.67rem; }
.slot-preview img { width: 100%; height: 100%; object-fit: contain; }
.slot-meta { display: flex; justify-content: space-between; gap: 4px; padding: 6px 7px 2px; font-size: 0.64rem; }
.slot-meta span:last-child { color: var(--muted); }
.slot-actions { display: flex; gap: 8px; padding: 4px 7px 7px; }
.slot-actions button { border: 0; padding: 0; color: var(--accent); background: transparent; font-size: 0.64rem; cursor: pointer; }
.slot-actions button.delete { color: var(--danger); }

.capture-library { padding-top: 22px; scroll-margin-top: 72px; }
.library-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 10px; }
.library-heading h3 { margin: 0; font-size: 0.92rem; }
.library-heading p { margin-top: 3px; color: var(--accent); font-size: 0.7rem; }
.library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.library-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #11191e; }
.library-card > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #040708; }
.library-card-body { display: grid; gap: 5px; padding: 8px; }
.library-card-body strong { overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.library-card-body p { min-height: 2.6em; color: var(--muted); font-size: 0.62rem; line-height: 1.3; }
.library-category { width: max-content; color: var(--accent); font-size: 0.56rem; letter-spacing: 0.08em; }
.library-card-body button { border: 1px solid var(--line); border-radius: 4px; padding: 6px; color: #d5e0e5; background: #172127; font-size: 0.62rem; cursor: pointer; }
.library-card-body button:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 720px) {
  .app { padding: 8px; }
  .topbar { align-items: center; }
  .topbar-actions { gap: 9px; }
  .text-action { font-size: 0.68rem; }
  .ensemble-grid, .page-grid { gap: 5px; margin-top: 6px; }
  .ensemble-grid button { min-height: 35px; }
  .page-grid button { min-height: 36px; }
  .settings-row { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .settings-row-title { grid-column: 1 / -1; margin-top: 5px; }
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  h1 { display: none; }
  .topbar-actions a { display: none; }
  .ensemble-grid button { font-size: 0.59rem; padding-inline: 2px; }
  .replace-current { right: 6px; bottom: 6px; padding: 5px 7px; }
  .settings-row { grid-template-columns: 1fr; }
  .library-grid { grid-template-columns: 1fr; }
}