:root {
  color-scheme: dark;
  --bg: #17141f;
  --panel: #211c2b;
  --input: #15121c;
  --text: #eeeafa;
  --muted: #aaa4ba;
  --line: #514861;
  --accent: #a875ff;
  --accent-dark: #c6a5ff;
  --accent-soft: #2a2437;
  --table-head: #2a2437;
  --placeholder: #282631;
  --tag-bg: #332641;
  --tag-text: #ead7ff;
  --warn: #fbbf24;
  font-family: Arial, ui-sans-serif, system-ui, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17151d;
  --panel: #24212d;
  --input: #191721;
  --text: #f4f0ff;
  --muted: #b7adc9;
  --line: #3b3548;
  --accent: #a855f7;
  --accent-dark: #d8b4fe;
  --accent-soft: #332641;
  --table-head: #2f2a3a;
  --placeholder: #2d2936;
  --tag-bg: #3b2755;
  --tag-text: #ead7ff;
  --warn: #fbbf24;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f1eef5;
  --panel: #fbf9ff;
  --input: #ffffff;
  --text: #211c2b;
  --muted: #665f71;
  --line: #c7bfce;
  --accent: #7946c6;
  --accent-dark: #58309a;
  --accent-soft: #eee7ff;
  --table-head: #e5dfea;
  --placeholder: #ded8e3;
  --tag-bg: #eee7ff;
  --tag-text: #4c1d95;
  --warn: #8a5708;
}

/* The museum scheme is independent of heraldry and collection colors. */
:root[data-scheme="museum"] {
  --menagerie-gunmetal: #444241;
  --menagerie-velvet-orchid: #6b3080;
  --menagerie-dust-grey: #d4d2d5;
  --menagerie-silver: #bfafa6;
  --menagerie-dusty-taupe: #aa968a;

  --bg: #eeecee;
  --panel: var(--menagerie-dust-grey);
  --input: #f8f7f8;
  --text: #302d2c;
  --muted: #5a5553;
  --line: var(--menagerie-silver);
  --accent: var(--menagerie-velvet-orchid);
  --accent-dark: #552666;
  --accent-soft: #e5d8e8;
  --table-head: var(--menagerie-silver);
  --placeholder: var(--menagerie-silver);
  --tag-bg: #e5d8e8;
  --tag-text: #552666;
}

:root[data-theme="dark"][data-scheme="museum"] {
  color-scheme: dark;
  --bg: #272524;
  --panel: #383534;
  --input: #2d2a29;
  --text: #f7f4f2;
  --muted: #d2c9c4;
  --line: #6b625e;
  --accent: #c78bd8;
  --accent-dark: #e5bfe9;
  --accent-soft: #51365a;
  --table-head: #4a4543;
  --placeholder: #514b48;
  --tag-bg: #51365a;
  --tag-text: #f1dff3;
}

:root[data-scheme="museum"] .topbar {
  background: var(--menagerie-gunmetal);
  color: white;
}

:root[data-scheme="museum"] .brand { color: white; }
:root[data-scheme="museum"] .topbar nav a { color: #f4edf6; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; }
a { color: var(--accent-dark); text-decoration: none; }
.skip-link { background: var(--accent); color: white; left: 8px; padding: 8px 12px; position: absolute; top: -100px; z-index: 20; }
.skip-link:focus { top: 8px; }
h1, h2, p { margin-top: 0; }

.topbar {
  align-items: center;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  display: flex;
  background: #110f17;
  gap: 18px;
  min-height: 52px;
  padding: 0 24px;
}
.brand {
  align-items: center;
  color: var(--text);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 900;
  gap: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brand-logo {
  display: block;
  height: 36px;
  object-fit: contain;
  width: 36px;
}
.topbar nav { align-items: center; display: flex; gap: 4px; margin-right: auto; }
.topnav-link { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; padding: 17px 10px; text-transform: uppercase; }
.topnav-link:hover, .topnav-link:focus { background: var(--accent-soft); color: var(--text); outline: none; }
.nav-group { position: relative; }
.nav-group summary { color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 800; letter-spacing: .08em; list-style: none; padding: 17px 10px; text-transform: uppercase; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: " ▾"; font-size: 11px; }
.nav-group[open] > summary, .nav-group summary:hover, .nav-group summary:focus { background: var(--accent-soft); color: var(--text); outline: none; }
.nav-menu { background: var(--panel); border: 1px solid var(--line); box-shadow: 5px 6px 0 rgb(14 12 19 / .55); display: grid; gap: 4px; left: 0; min-width: 190px; padding: 8px; position: absolute; top: 52px; z-index: 10; }
.nav-menu a { padding: 7px 8px; white-space: nowrap; }
.nav-menu a:hover, .nav-menu a:focus { background: var(--accent-soft); }
.app-menu { margin-left: auto; }
.app-menu > summary { align-items: center; display: flex; font-size: 19px; gap: 6px; padding: 13px 10px; }
.app-menu > summary::after { display: none; }
.app-menu .nav-menu { left: auto; right: 0; }
.menu-label { font-size: 10px; letter-spacing: .08em; }
.menu-section { border-bottom: 1px solid var(--line); padding: 2px 0 8px; }
.menu-section:last-of-type { border-bottom: 0; }
.menu-section summary { color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .08em; list-style: none; padding: 6px 8px; text-transform: uppercase; }
.menu-section summary::after { content: " ▾"; }
.menu-section summary::-webkit-details-marker { display: none; }
.menu-section > div { display: grid; gap: 3px; }
.app-menu .link-button, .app-menu .button { text-align: left; width: 100%; }
.app-menu form { margin: 0; }
.shell { margin: 0 auto; max-width: 1100px; padding: 46px 25px 55px; }
.shell.wide-shell { max-width: none; width: 100%; }
.shell.gallery-shell { max-width: none; padding-top: 28px; width: 100%; }
.page-head { align-items: end; display: flex; gap: 30px; justify-content: space-between; margin-bottom: 34px; }
.page-head p { color: var(--muted); margin-bottom: 0; }
.actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.meta { color: var(--muted); display: inline-block; font-size: 13px; font-weight: 700; }
.status-badge { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 999px; color: var(--accent-dark); display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 9px; }
.relationship-panel, .revision-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }

button, .button {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 0;
  color: #171022;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: 700;
  padding: 8px 12px;
}
button:hover, .button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button.danger { background: #b42318; color: #fff !important; }
.subtle { background: var(--accent-soft); color: var(--accent-dark); }
.link-button { background: transparent; border-color: var(--line); color: var(--muted); padding: 7px 10px; }
input, textarea, select {
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--text);
  font: inherit;
  padding: 10px 12px;
  width: 100%;
}
label { color: var(--muted); display: grid; gap: 6px; font-size: 14px; font-weight: 700; }

.panel, .card, .auth-panel, .empty {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 18px;
}
.auth-panel { box-shadow: 12px 12px 0 #0e0c13; margin: 60px auto; max-width: 420px; padding: 38px; }
.auth-link { font-size: 14px; font-weight: 700; margin: 14px 0 0; text-align: center; }
.auth-brand {
  align-items: center;
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-bottom: 18px;
  text-align: center;
}
.auth-brand img {
  display: block;
  height: 150px;
  object-fit: contain;
  width: 132px;
}
.auth-brand h1 { margin-bottom: 0; }
.stack { display: grid; gap: 14px; }
.collection-grid, .gallery {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.card { color: inherit; display: block; min-height: 120px; }
.card { transition: transform .15s, box-shadow .15s; }
.card:hover { box-shadow: 5px 5px 0 var(--accent); transform: translate(-3px, -3px); }
.card h2 { font-size: 18px; }
.card p { color: var(--muted); }
.symbol-preview {
  align-items: center;
  background: var(--accent-soft);
  border-radius: 6px;
  color: var(--accent-dark);
  display: flex;
  font-size: 42px;
  font-weight: 800;
  height: 120px;
  justify-content: center;
  margin-bottom: 12px;
}
.symbol-art { align-items: center; display: flex; justify-content: center; min-height: 300px; }
.symbol-art img { max-height: 420px; max-width: 100%; }
.heraldry-preview { align-items: center; display: flex; justify-content: center; min-height: 420px; }
.heraldry-preview svg { max-height: 520px; max-width: 100%; }
.heraldry-editor #editor-preview { background: var(--input); border: 1px solid var(--line); font-family: ui-monospace, monospace; min-height: 120px; padding: 12px; white-space: pre-wrap; }
.annotation-canvas { align-items: center; display: flex; justify-content: center; }
.annotation-canvas img { max-height: 620px; max-width: 100%; object-fit: contain; }
.toolbar {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 180px) minmax(110px, 160px) 90px auto auto auto;
  margin-bottom: 18px;
}
.advanced-filters {
  display: grid;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.collection-fields { border: 0; margin: 0; padding: 0; }
.collection-fields legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.collection-field-list { display: grid; gap: 18px; margin: 12px 0; }
.collection-field-row { align-items: start; display: grid; gap: 8px 12px; grid-template-columns: minmax(0, 1fr) minmax(180px, .45fr); }
.collection-field-row + .collection-field-row { border-top: 1px solid var(--line); padding-top: 18px; }
.collection-field-row label { margin: 0; }
.collection-field-row .dropdown-options, .field-type-hint { grid-column: 1 / -1; }
.collection-field-row .dropdown-options[hidden] { display: none; }
.collection-field-row .field-type-hint { margin: 0; }
.collection-field-row .field-hint { font-weight: 400; }
.remove-collection-field { justify-self: start; }
@media (max-width: 540px) { .collection-field-row { grid-template-columns: 1fr; } }
.table-wrap { background: var(--panel); border: 1px solid var(--line); overflow: auto; }
table { border-collapse: collapse; min-width: 760px; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; }
th { background: var(--table-head); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.collection-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.collection-table {
  min-width: max(100%, calc(600px + (var(--field-count) * 260px)));
  table-layout: auto;
  width: max-content;
}
.collection-table th,
.collection-table td {
  min-width: 220px;
  max-width: 460px;
}
.collection-table .item-column { min-width: 260px; }
.heraldry-preview svg { display: block; margin: 0 auto; max-height: 620px; max-width: 100%; }
.editor-artboard .svg-fill-area { cursor: pointer; pointer-events: all; }
.decal-library { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.decal-source { align-items: stretch; cursor: pointer; display: grid; gap: 8px; text-align: left; }
.decal-source.selected { box-shadow: 0 0 0 3px var(--accent); }
.decal-thumbnail { align-items: center; background: var(--input); border-radius: 5px; display: flex; height: 150px; justify-content: center; overflow: hidden; }
.decal-thumbnail svg { height: 100%; max-width: 100%; width: 100%; }
.upload-outline { margin-top: 12px; }
.color-control { align-items: center; display: inline-flex; gap: 7px; width: fit-content; }
.color-control input[type="color"] { block-size: 30px; inline-size: 30px; padding: 1px; }
.workflow-head { margin: 10px auto 24px; max-width: 780px; text-align: center; }
.workflow-head h1 { font-size: clamp(28px, 4vw, 42px); margin: 6px 0 10px; }
.workflow-head p { color: var(--muted); margin: 0 auto; max-width: 650px; }
.workflow-step, .eyebrow, .section-label { color: var(--accent-dark); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.template-upload-form { margin: 0 auto; max-width: 760px; padding: 28px; }
.upload-dropzone { align-items: center; background: var(--input); border: 2px dashed var(--line); border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 7px; justify-content: center; min-height: 180px; padding: 24px; text-align: center; }
.upload-dropzone:hover, .upload-dropzone:focus-within { border-color: var(--accent); background: var(--accent-soft); }
.upload-dropzone input { max-width: 260px; }
.upload-icon { color: var(--accent); font-size: 34px; font-weight: 800; line-height: 1; }
.template-preview { background: var(--input); border: 1px solid var(--line); border-radius: 8px; min-height: 300px; padding: 16px; }
.workflow-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.decal-build-layout { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr); }
.source-template-panel { min-width: 0; }
.source-template-panel .heraldry-preview { min-height: 380px; }
.decal-name-panel { align-self: start; padding: 28px; }
.decal-name-panel h2 { margin-bottom: 6px; }
.text-link { color: var(--accent-dark); font-weight: 700; }
.template-card, .decal-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.template-card .decal-thumbnail, .decal-card .decal-thumbnail { border-radius: 0; height: 190px; }
.template-card-body { padding: 16px 16px 8px; }
.template-card-body h2 { font-size: 18px; margin: 5px 0; }
.template-card-body p { color: var(--muted); font-size: 13px; margin-bottom: 0; }
.template-card-actions { align-items: center; display: flex; gap: 10px; justify-content: space-between; padding: 8px 16px 16px; }
.decal-open { margin-top: auto; padding: 8px 16px 16px; }
.danger { background: #b42318; color: #fff !important; }
.danger:hover, .danger:focus { background: #8f1d14; color: #fff !important; }
.decal-card-link { color: inherit; display: block; height: 100%; }
.decal-card-link:hover .decal-thumbnail { background: var(--accent-soft); }
.decal-select { display: none; }
.template-card, .decal-card { cursor: pointer; position: relative; }
.template-card.selected, .decal-card.selected { box-shadow: 0 0 0 3px var(--accent); }
.template-card.selected::after, .decal-card.selected::after { background: var(--accent); border-radius: 50%; color: white; content: "✓"; font-weight: 800; height: 26px; line-height: 26px; position: absolute; right: 10px; text-align: center; top: 10px; width: 26px; }
.selecting .decal-select { align-items: center; background: var(--panel); display: flex; gap: 7px; padding: 9px 12px; }
.selecting .decal-card { cursor: pointer; }
.selecting .decal-card.selected { box-shadow: 0 0 0 3px var(--accent); }
.decal-editor-form { display: grid; gap: 14px; }
.editor-titlebar { align-items: end; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 16px; justify-content: space-between; padding: 14px; }
.editor-titlebar > label { flex: 1; max-width: 420px; }
.svg-editor { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: grid; grid-template-areas: "paint paint" "canvas layers"; grid-template-columns: minmax(0, 1fr) minmax(230px, 280px); grid-template-rows: auto minmax(620px, 1fr); overflow: hidden; }
.editor-colorbar { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; grid-area: paint; padding: 12px 16px; }
.editor-colorbar .section-label { margin-right: 2px; }
.editor-color { align-items: center; display: grid; gap: 8px; grid-template-columns: 42px 1fr; }
.editor-color input[type="color"] { block-size: 42px; inline-size: 42px; padding: 1px; }
.editor-color input[type="text"], .editor-color input:not([type]) { grid-column: 2; }
.opacity-control { align-items: center; display: flex; gap: 8px; white-space: nowrap; }
.opacity-control input { width: 130px; }
.palette { display: flex; flex-wrap: wrap; gap: 7px; }
.palette button { background: var(--swatch); border: 2px solid var(--line); border-radius: 50%; height: 25px; min-width: 25px; padding: 0; width: 25px; }
.palette button:hover, .palette button:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
.editor-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.paint-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.editor-colorbar .editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.editor-colorbar .editor-actions button { white-space: nowrap; }
.editor-layers { border-left: 1px solid var(--line); grid-area: layers; overflow: auto; padding: 18px; }
.editor-layers section { display: grid; gap: 10px; }
.layer-list { display: grid; gap: 5px; list-style: none; margin: 0; max-height: 340px; overflow: auto; padding: 0; }
.layer-list li { display: flex; gap: 4px; }
.layer-list button { align-items: center; background: transparent; color: var(--text); display: flex; gap: 8px; justify-content: flex-start; text-align: left; width: 100%; }
.layer-list li > button:first-child { flex: 1; }
.layer-list .layer-visibility { flex: 0 0 34px; justify-content: center; padding: 6px; }
.layer-list li.selected button { background: var(--accent-soft); color: var(--accent-dark); }
.layer-list span { background: var(--layer-color); border: 1px solid var(--line); border-radius: 3px; height: 15px; width: 15px; }
.editor-workspace { background: repeating-conic-gradient(#f5f5f5 0 25%, #e7e7e7 0 50%) 50% / 20px 20px; display: grid; grid-area: canvas; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
.canvas-toolbar { align-items: center; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; gap: 8px; padding: 9px 12px; }
.canvas-toolbar output { min-width: 52px; text-align: center; }
.canvas-toolbar #selection-label { color: var(--muted); font-size: 13px; margin-left: auto; }
.editor-canvas { align-items: center; display: flex; justify-content: center; min-height: 540px; overflow: auto; padding: 42px; }
.editor-artboard { background: transparent; box-shadow: 0 8px 26px rgb(0 0 0 / .18); max-width: 100%; transform-origin: center; }
.editor-artboard svg { display: block; height: auto; max-height: 580px; max-width: 100%; width: auto; }
.editor-artboard .svg-fill-area { pointer-events: all; }
.editor-json { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.editor-json pre { max-height: 280px; overflow: auto; white-space: pre-wrap; }
.collection-table .tags-column { min-width: 220px; max-width: 340px; }
.collection-table .field-column { min-width: 260px; }

.image-card img, .image-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  display: grid;
  margin-bottom: 12px;
  object-fit: cover;
  place-items: center;
  width: 100%;
}
.image-placeholder { background: var(--placeholder); color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span {
  align-items: center;
  background: var(--tag-bg);
  border-radius: 999px;
  color: var(--tag-text);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  min-height: 24px;
  padding: 4px 10px;
}
.detail-layout { display: grid; gap: 18px; grid-template-columns: minmax(280px, 420px) 1fr; }
.image-selection-toolbar { align-items: center; display: flex; gap: 12px; margin-bottom: 12px; }
.image-selection-toolbar form { margin: 0 0 0 auto; }
.image-selection-toolbar button:disabled { cursor: not-allowed; opacity: .45; }
.image-strip { display: grid; gap: 10px; }
.image-strip figure { margin: 0; }
.image-strip figcaption { font-size: 13px; font-weight: 700; margin-top: 6px; }
.image-actions, .image-actions form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.image-actions .button { font-size: 12px; padding: 6px 8px; }
.item-image-row {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: grab;
  display: grid;
  gap: 12px;
  grid-template-columns: 150px 1fr;
  padding: 12px;
}
.item-image-row.dragging {
  cursor: grabbing;
  opacity: 0.58;
}
.item-image-row.drag-over {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.item-image-row.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cropped-image, .gallery-detail-image, .crop-preview {
  background: var(--placeholder);
  border-radius: 8px;
  overflow: hidden;
}
.cropped-image { aspect-ratio: 4 / 3; }
.gallery-detail-image, .crop-preview { aspect-ratio: 1 / 1; }
.crop-preview {
  cursor: grab;
  min-height: 360px;
  touch-action: none;
  user-select: none;
}
.crop-preview:active { cursor: grabbing; }
.crop-controls { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.crop-controls button { flex: 0 0 auto; }
.cropped-image img, .gallery-detail-image img, .crop-preview img {
  -webkit-user-drag: none;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform-origin: center;
  user-select: none;
  width: 100%;
}
.tile-gallery {
  display: grid;
  gap: 10px;
  grid-auto-rows: 96px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.tile {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-column: var(--tile-x) / span var(--tile-w);
  grid-row: var(--tile-y) / span var(--tile-h);
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.tile[draggable="true"] { cursor: move; }
.tile-link {
  display: block;
  grid-column: 1;
  grid-row: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.tile-link img {
  -webkit-user-drag: none;
  display: none;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform-origin: center;
  user-select: none;
  width: 100%;
}
.tile-link img.active { display: block; }
.tile-slide-control {
  align-items: center;
  background: rgb(0 0 0 / 0.58);
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 50%;
  color: white;
  display: none;
  font-size: 28px;
  height: 36px;
  justify-content: center;
  line-height: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  z-index: 4;
}
.tile-slide-control.previous,
.tile-slide-control.next { padding-bottom: 2px; }
.tile:hover .tile-slide-control { display: inline-flex; }
.tile-slide-control.previous { left: 10px; }
.tile-slide-control.next { right: 10px; }
.tile-meta {
  background: linear-gradient(transparent, rgb(0 0 0 / 0.74));
  bottom: 0;
  color: white;
  display: grid;
  gap: 2px;
  left: 0;
  padding: 34px 10px 10px;
  position: absolute;
  right: 0;
}
.tile-meta a { color: white; font-size: 13px; font-weight: 700; }
.tile-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  left: 8px;
  position: absolute;
  top: 8px;
}
.tile-menu { position: relative; }
.tile-menu summary {
  align-items: center;
  background: rgb(0 0 0 / 0.58);
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 6px;
  color: white;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  height: 30px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  width: 30px;
}
.tile-menu summary::-webkit-details-marker { display: none; }
.tile-menu a {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.24);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  left: 0;
  min-width: 136px;
  padding: 8px 10px;
  position: absolute;
  top: 36px;
  z-index: 5;
}
.tile-resize-handle {
  position: absolute;
  z-index: 4;
}
.tile-resize-handle.east {
  bottom: 18px;
  cursor: ew-resize;
  right: 0;
  top: 18px;
  width: 12px;
}
.tile-resize-handle.south {
  bottom: 0;
  cursor: ns-resize;
  height: 12px;
  left: 18px;
  right: 18px;
}
.tile-resize-handle.corner {
  border-bottom: 3px solid rgb(255 255 255 / 0.72);
  border-right: 3px solid rgb(255 255 255 / 0.72);
  bottom: 6px;
  cursor: nwse-resize;
  height: 18px;
  right: 6px;
  width: 18px;
}
.crop-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 1fr) minmax(260px, 360px);
}
.shell.framing-shell { max-width: none; padding: 0; width: 100%; }
.wiki-editor-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
.wiki-editor textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.55; min-height: 520px; resize: vertical; }
.wiki-editor-help { align-self: start; }
.wiki-editor-help h2 { font-size: 15px; margin-bottom: 6px; }
.wiki-editor-help p { color: var(--muted); margin-bottom: 0; }
.wiki-editor-help code, .wiki-image-list code { overflow-wrap: anywhere; }
.wiki-image-list { margin: 0; padding-left: 20px; }
.wiki-page-browser { display: grid; gap: 5px; max-height: 210px; overflow-y: auto; }
.wiki-page-browser button { overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.wiki-rendered { font-size: 16px; line-height: 1.65; }
.wiki-rendered > :last-child { margin-bottom: 0; }
.wiki-rendered h1, .wiki-rendered h2, .wiki-rendered h3 { margin-top: 1.35em; }
.wiki-rendered img { height: auto; max-width: 100%; }
.wiki-rendered pre { background: var(--input); overflow-x: auto; padding: 14px; }
.wiki-rendered code { background: var(--accent-soft); padding: 1px 4px; }
.wiki-rendered pre code { background: transparent; padding: 0; }
.wiki-rendered .wiki-task { margin: .35em 0; }
.wiki-rendered input[type="checkbox"] { accent-color: var(--accent); display: inline-block; height: 15px; margin: 0 7px 0 0; padding: 0; vertical-align: -2px; width: 15px; }
.wiki-links { margin-top: 18px; }
.framing-titlebar { align-items: baseline; display: flex; gap: 14px; padding: 18px 24px 14px; }
.framing-titlebar a { font-size: 13px; font-weight: 700; }
.framing-titlebar h1 { font-size: 20px; margin: 0; }
.framing-titlebar p { color: var(--muted); font-size: 13px; margin: 0 0 0 auto; }
.framing-toolbar { align-items: center; background: var(--panel); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; gap: 14px; min-height: 58px; padding: 9px 24px; }
.framing-zoom-control { align-items: center; display: flex; flex: 1; gap: 12px; }
.framing-zoom-control label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.framing-zoom-control input[type="range"] { max-width: 360px; min-width: 160px; }
.framing-zoom-control output { color: var(--accent-dark); font-variant-numeric: tabular-nums; font-weight: 800; min-width: 42px; }
.framing-zoom-control .meta { margin-left: auto; }
.framing-delete-form { margin: 0; }
.framing-delete-form .danger { padding: 8px 14px; }
.framing-canvas { display: grid; min-height: calc(100vh - 180px); padding: 24px; place-items: center; }
.framing-canvas .crop-preview { aspect-ratio: 1 / 1; height: min(72vh, calc(100vw - 48px)); max-height: 760px; max-width: 100%; min-height: 0; width: min(72vh, calc(100vw - 48px)); }
.check-row {
  align-items: center;
  display: flex;
  gap: 10px;
}
.check-row input { width: auto; }
.inline-check-form { margin: 0; }
.table-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}
.table-actions form { margin: 0; }
.field-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 220px) 90px auto;
}
.field-delete-form { margin-top: 8px; }
.field-value { white-space: pre-wrap; }
dl { display: grid; gap: 8px 14px; grid-template-columns: 160px 1fr; margin: 0; }
dt { color: var(--muted); font-weight: 800; }
dd { margin: 0; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.admin-tabs a { background: var(--accent-soft); border-radius: 6px; color: var(--accent-dark); font-weight: 700; padding: 8px 12px; }
.flash { border-radius: 6px; margin-bottom: 16px; padding: 10px 12px; }
.flash.error { background: #f8d7da; color: #842029; }
.flash.warning { background: #fff0c2; color: var(--warn); }
.flash.success { background: #d8efe7; color: #0f5132; }

:root[data-theme="dark"] .flash.error { background: #4c1d2f; color: #fecdd3; }
:root[data-theme="dark"] .flash.warning { background: #422f12; color: #fde68a; }
:root[data-theme="dark"] .flash.success { background: #14352b; color: #bbf7d0; }

@media (max-width: 760px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 10px; padding: 14px 18px; }
  .topbar nav { align-items: flex-start; flex-direction: column; gap: 8px; width: 100%; }
  .topnav-link { width: 100%; }
  .nav-group { width: 100%; }
  .nav-menu { position: static; box-shadow: none; margin-top: 6px; }
  .app-menu { margin-left: 0; width: 100%; }
  .app-menu > summary { width: max-content; }
  .app-menu .nav-menu { width: 100%; }
  .page-head, .detail-layout { display: grid; }
  .decal-build-layout { grid-template-columns: 1fr; }
  .svg-editor { grid-template-areas: "paint" "canvas" "layers"; grid-template-columns: 1fr; grid-template-rows: auto minmax(380px, 1fr) auto; }
  .editor-colorbar { align-items: flex-start; }
  .editor-layers { border-left: 0; border-top: 1px solid var(--line); }
  .editor-titlebar { align-items: stretch; flex-direction: column; }
  .editor-canvas { min-height: 380px; padding: 20px; }
  .crop-layout { grid-template-columns: 1fr; }
  .framing-titlebar { align-items: flex-start; flex-direction: column; gap: 4px; }
  .wiki-editor-layout { grid-template-columns: 1fr; }
  .framing-titlebar p { margin-left: 0; }
  .framing-toolbar, .framing-zoom-control { align-items: flex-start; flex-wrap: wrap; }
  .framing-zoom-control .meta { margin-left: 0; width: 100%; }
  .framing-zoom-control input[type="range"] { flex: 1; }
  .framing-canvas { min-height: 0; padding: 18px; }
  .framing-canvas .crop-preview { height: calc(100vw - 36px); width: calc(100vw - 36px); }
  .tile-gallery { grid-auto-rows: 78px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { grid-column: auto / span min(var(--tile-w), 2); grid-row: auto / span var(--tile-h); }
  .toolbar { grid-template-columns: 1fr; }
  .item-image-row { grid-template-columns: 1fr; }
  .image-selection-toolbar { align-items: flex-start; flex-direction: column; }
  .image-selection-toolbar form { margin-left: 0; }
  .shell.gallery-shell { width: 100%; }
  dl { grid-template-columns: 1fr; }
}