:root {
  color-scheme: dark;
  --ink: #080a0d;
  --panel: #12161b;
  --surface: #0e1115;
  --key: #252a32;
  --paper: #ece9df;
  --muted: #8d929a;
  --red: #ef574f;
  --cyan: #56d5dc;
  --yellow: #e8c85d;
  --green: #4fd18a;
  --line: #2b3139;
  --line-soft: rgba(236, 233, 223, 0.1);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -20%, rgba(86, 213, 220, 0.08), transparent 42rem),
    var(--ink);
  color: var(--paper);
  font-family: ui-monospace, "Cascadia Mono", "Courier New", Courier, monospace;
}

.casus-terminal {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 22px 16px 28px;
}

.casus-header,
.casus-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.casus-header {
  min-height: 68px;
  border-bottom: 1px solid var(--line);
  padding: 8px 2px 12px;
}

.ascii-brand {
  margin: 0;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  line-height: 1;
}

.ascii-brand > a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}

.ascii-brand-numbers,
.ascii-brand-name {
  display: block;
  white-space: pre;
  font: 700 0.44rem/0.82 "Courier New", Courier, monospace;
  letter-spacing: 0;
}

.ascii-brand-numbers { color: var(--red); }
.ascii-brand-name { color: var(--paper); }

.casus-header nav,
.casus-footer {
  margin: 0;
  color: var(--cyan);
  font-size: 0.72rem;
  letter-spacing: 0;
}

.casus-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 5px;
}

.casus-header.menu-only {
  min-height: 0;
  justify-content: center;
}

.casus-header.menu-only nav {
  width: 100%;
  justify-content: center;
}

.casus-header nav a {
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--muted);
  text-decoration: none;
}

.casus-header nav a:hover,
.casus-header nav a:focus-visible,
.casus-header nav a[aria-current="page"] {
  background: rgba(86, 213, 220, 0.08);
  color: var(--cyan);
  outline: none;
}

.terminal-stage {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #000;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.screen-stripe {
  height: 2px;
  background: linear-gradient(90deg, var(--red), var(--yellow) 38%, var(--cyan));
}

x-minitel {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
}

x-minitel canvas {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 32 / 25;
  image-rendering: pixelated;
}

x-minitel .minitel-cursor {
  position: absolute;
  inset: 0 auto auto 0;
  pointer-events: none;
}

.minitel-keyboard {
  width: 100%;
  padding: 10px 8px 12px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.minitel-keyboard button {
  min-width: 0;
  height: 2.8rem;
  padding: 0 3px;
  border: 1px solid var(--panel);
  border-radius: 5px;
  background: var(--key);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.68rem;
  line-height: 1.05;
  text-shadow: none;
  overflow-wrap: anywhere;
}

.minitel-keyboard button:hover,
.minitel-keyboard button:focus-visible {
  border-color: var(--cyan);
  outline: none;
}

.minitel-keyboard button:active { background: #4b4b53; }
.minitel-keyboard .special button { background: #49494f; }
.minitel-keyboard .send button { background: var(--yellow); color: #111; }
.minitel-keyboard .switch button { background: var(--red); }

.form-config {
  padding: 8px;
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}

.casus-footer {
  min-height: 34px;
  align-items: center;
  padding: 10px 2px 0;
}

.status-light {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(79, 209, 138, 0.45);
}

@media (max-width: 520px) {
  .casus-terminal { padding: 8px 8px 12px; }
  .casus-header { min-height: 58px; align-items: center; }
  .ascii-brand-numbers, .ascii-brand-name { font-size: 0.34rem; }
  .casus-header nav { max-width: 55%; font-size: 0.58rem; }
  .minitel-keyboard { padding: 5px 2px 7px; }
  .minitel-keyboard button { height: 2.45rem; border-width: 1px; font-size: 0.56rem; }
  .casus-footer { font-size: 0.58rem; }
}

.workshop-page,
.admin-page {
  min-height: 100vh;
  background: transparent;
}

.workshop-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px max(18px, calc((100vw - 1280px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(8, 10, 13, 0.88);
  backdrop-filter: blur(14px);
}

.workshop-header .ascii-brand small {
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: normal;
  letter-spacing: 0.04em;
}

.workshop-header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  font-size: 0.72rem;
}

.workshop-header nav a {
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--muted);
  text-decoration: none;
}

.workshop-header a:hover,
.workshop-header a:focus-visible,
.workshop-header a[aria-current="page"] {
  background: rgba(86, 213, 220, 0.08);
  color: var(--cyan);
  outline: none;
}

.workshop-layout {
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(640px, 1fr) minmax(300px, 360px);
}

.editor-stage {
  min-width: 0;
  border-right: 1px solid var(--line);
  background: #000;
}

.editor-stage iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 76px);
  border: 0;
  background: #fff;
}

.submission-panel {
  padding: 22px;
  background: var(--panel);
  overflow-y: auto;
}

.panel-heading,
.review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--paper);
  font-size: 0.78rem;
}

.panel-heading strong {
  color: var(--green);
  font-size: 0.58rem;
}

.submission-panel form {
  display: grid;
  gap: 6px;
  padding-top: 14px;
}

.submission-panel label,
.admin-login label {
  margin-top: 7px;
  color: var(--cyan);
  font-size: 0.68rem;
}

.submission-panel input,
.submission-panel select,
.submission-panel textarea,
.admin-login input,
.rogue-tool input,
.rogue-tool select,
.rogue-tool textarea,
.review-toolbar select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--paper);
  padding: 7px 8px;
  font: inherit;
}

.submission-panel textarea { resize: vertical; }

.submission-panel input:focus,
.submission-panel select:focus,
.submission-panel textarea:focus,
.admin-login input:focus {
  border-color: var(--yellow);
  outline: 1px solid var(--yellow);
}

.rights-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 8px;
  color: var(--muted) !important;
  line-height: 1.3;
}

.rights-check input {
  width: 18px;
  min-height: 18px;
  margin: 0;
}

.submission-panel button,
.admin-login button,
.rogue-tool button,
.review-toolbar button,
.row-actions button {
  min-height: 36px;
  border: 1px solid rgba(232, 200, 93, 0.55);
  border-radius: 7px;
  background: rgba(232, 200, 93, 0.1);
  color: var(--yellow);
  padding: 8px 10px;
  font: bold 0.72rem "Courier New", monospace;
  cursor: pointer;
}

.submission-panel button { margin-top: 10px; }

.submission-panel button:hover,
.submission-panel button:focus-visible,
.admin-login button:hover,
.admin-login button:focus-visible,
.row-actions button:hover,
.row-actions button:focus-visible {
  border-color: var(--cyan);
  background: rgba(86, 213, 220, 0.12);
  color: var(--cyan);
  outline: none;
}

#submission-status,
#admin-status {
  display: block;
  min-height: 34px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

#submission-status.success { color: var(--green); }
#submission-status.error { color: #ff746f; }

.sample-kit { margin-top: 22px; }

.sample-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
}

.sample-item {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  overflow: hidden;
}

.sample-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  image-rendering: pixelated;
}

.sample-item strong {
  display: block;
  padding: 6px 7px;
  color: var(--cyan);
  font-size: 0.6rem;
  line-height: 1.25;
}

.sample-item div {
  display: flex;
  border-top: 1px solid #353539;
}

.sample-item a {
  flex: 1;
  min-height: 30px;
  display: grid;
  place-items: center;
  color: var(--yellow);
  font-size: 0.56rem;
  text-decoration: none;
}

.sample-item a + a { border-left: 1px solid #353539; }

.sample-item a:hover,
.sample-item a:focus-visible {
  background: var(--yellow);
  color: #111;
  outline: none;
}

.help-page,
.converter-page { min-height: 100vh; background: transparent; }

.help-layout {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 64px;
}

.help-layout > section {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.help-layout h2,
.converter-layout h2 {
  margin: 0 0 14px;
  color: var(--paper);
  font-size: 1.2rem;
  letter-spacing: 0;
}

.help-layout p,
.help-layout li {
  color: #c7c7ca;
  font-size: 0.82rem;
  line-height: 1.6;
}

.help-kicker {
  margin: 0 0 8px;
  color: var(--cyan) !important;
  font-size: 0.66rem !important;
}

.help-steps ol {
  margin: 0;
  padding-left: 28px;
  columns: 2;
  column-gap: 48px;
}

.help-steps li { margin: 0 0 14px; break-inside: avoid; }
.help-steps strong { color: var(--yellow); }

.help-video,
.help-convert {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(360px, 1.25fr);
  gap: 34px;
  align-items: center;
}

.video-frame {
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-frame iframe { width: 100%; height: 100%; border: 0; }

.help-layout a { color: var(--yellow); }
.help-layout a:hover, .help-layout a:focus-visible { color: var(--cyan); outline: none; }
.help-rules ul, .help-convert ul { padding-left: 22px; }

.help-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  font-size: 0.65rem !important;
}

.who-layout .help-intro { max-width: 850px; }
.who-layout em { color: var(--paper); }
.who-games {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 20px;
  border: 1px solid var(--line);
  background: var(--line);
}
.who-games article { min-height: 150px; padding: 18px; background: #08080a; }
.who-games strong,
.who-contact aside > strong { color: var(--yellow); font-size: 0.72rem; }
.who-games p { margin-bottom: 0; }
.who-note { margin: 22px 0 0; color: var(--cyan) !important; }
.who-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 34px;
  align-items: start;
}
.who-contact aside { padding: 18px; border: 1px solid var(--line); background: #08080a; }
.who-contact code {
  display: block;
  margin: 14px 0;
  padding: 11px;
  border-left: 2px solid var(--cyan);
  background: #020203;
  color: var(--cyan);
  overflow-wrap: anywhere;
}

.converter-layout {
  width: min(1280px, calc(100% - 32px));
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 28px;
  margin: 0 auto;
  padding: 28px 0 44px;
}

.converter-controls,
.converter-output {
  min-width: 0;
  align-self: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(14, 17, 21, 0.82);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.16);
}

.converter-controls > label,
.converter-settings > label {
  display: block;
  margin: 13px 0 6px;
  color: var(--cyan);
  font-size: 0.68rem;
}

.converter-controls input[type="file"],
.converter-controls input[type="text"],
#lettering-text,
.converter-settings select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--paper);
  padding: 7px 8px;
  font: inherit;
}

#lettering-text {
  min-height: 84px;
  resize: vertical;
  line-height: 1.35;
}

.converter-settings input[type="range"] { width: 100%; accent-color: var(--yellow); }
.converter-settings > [hidden] { display: none !important; }

.converter-subsettings {
  display: contents;
}

.converter-subsettings[hidden] { display: none; }

.converter-setting-intro {
  grid-column: 1 / -1;
  margin: 2px 0 8px;
  border-left: 2px solid var(--cyan);
  padding: 7px 9px;
  color: var(--muted);
  font-size: 0.63rem;
  line-height: 1.4;
}

.converter-source {
  position: relative;
  min-height: 220px;
  display: grid;
  place-items: center;
  margin-top: 14px;
  border: 1px dashed #3a424c;
  border-radius: 9px;
  background: #050506;
  overflow: hidden;
}

.converter-source img,
.converter-source video {
  display: block;
  width: 100%;
  max-height: 340px;
  object-fit: contain;
}

.converter-source img[hidden],
.converter-source video[hidden] { display: none; }

.converter-source p { color: var(--muted); font-size: 0.65rem; }

#crop-overlay {
  position: absolute;
  z-index: 2;
  border: 2px solid var(--yellow);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.48), inset 0 0 0 1px #111;
  pointer-events: none;
}

#crop-overlay[hidden] { display: none; }

.converter-check {
  display: grid !important;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 7px;
}

.converter-controls button,
.converter-actions button {
  min-height: 38px;
  border: 1px solid rgba(232, 200, 93, 0.55);
  border-radius: 7px;
  background: rgba(232, 200, 93, 0.1);
  color: var(--yellow);
  padding: 8px 12px;
  font: bold 0.68rem "Courier New", monospace;
  cursor: pointer;
}

.converter-controls > button { width: 100%; margin-top: 18px; }
.converter-actions button:disabled { opacity: 0.35; cursor: default; }
.converter-controls button:hover,
.converter-controls button:focus-visible,
.converter-actions button:hover:not(:disabled),
.converter-actions button:focus-visible:not(:disabled) {
  border-color: var(--cyan);
  background: rgba(86, 213, 220, 0.12);
  color: var(--cyan);
  outline: none;
}
.converter-note { color: var(--muted); font-size: 0.66rem; line-height: 1.4; }

.ai-assistant {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(8, 10, 13, 0.52);
  padding: 14px;
}

.ai-assistant > p,
.ai-summary {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.45;
}

.ai-assistant > button { width: 100%; margin-top: 10px; }
.ai-assistant button:disabled { opacity: 0.35; cursor: default; }
.ai-assistant .panel-heading { margin: -4px 0 10px; }
.ai-assistant .converter-check { margin: 10px 0; color: #c7c7ca; font-size: 0.64rem; line-height: 1.35; }
.ai-summary { margin: 12px 0 0; border-left: 2px solid var(--cyan); padding: 8px 10px; background: rgba(86, 213, 220, 0.05); }

.crop-controls {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(120px, 2fr);
  gap: 6px 10px;
  align-items: center;
  margin-top: 12px;
  color: var(--cyan);
  font-size: 0.64rem;
}

.crop-controls[hidden] { display: none; }
.crop-controls input[type="range"] { width: 100%; accent-color: var(--yellow); }
.crop-actions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 6px; }
.crop-actions button { flex: 1; }

#ascii-output,
#lettering-output {
  min-height: 520px;
  margin: 14px 0 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #030304;
  color: var(--cyan);
  padding: 16px;
  font: 15px/1.05 "Courier New", monospace;
  letter-spacing: 0;
  white-space: pre;
}

#graphic-preview {
  display: block;
  width: min(100%, 720px);
  height: auto;
  aspect-ratio: 40 / 33;
  margin: 14px auto 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #030304;
  image-rendering: pixelated;
}

#graphic-preview[hidden],
#ascii-output[hidden] { display: none; }

.lettering-line {
  display: block;
  min-height: 1.05em;
  white-space: pre;
}

.converter-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.direct-import {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(8, 10, 13, 0.64);
}
.direct-import .panel-heading { margin-bottom: 10px; }
.direct-import-grid { display: grid; grid-template-columns: minmax(190px, 0.75fr) minmax(280px, 1.25fr); gap: 12px; }
.direct-import-grid > div { min-width: 0; padding: 10px; border: 1px solid var(--line); background: #050507; }
.direct-import label { display: block; margin-bottom: 7px; color: var(--cyan); font-size: 0.64rem; }
.direct-import input[type="file"],
.direct-import textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #363c43;
  border-radius: 6px;
  background: #020203;
  color: var(--paper);
  padding: 8px;
  font: 0.69rem/1.15 "Courier New", monospace;
}
.direct-import textarea { min-height: 104px; resize: vertical; white-space: pre; overflow: auto; }
.direct-import p,
.direct-import small { display: block; margin: 8px 0 0; color: var(--muted); font-size: 0.59rem; line-height: 1.4; }
.direct-import-actions { display: flex; gap: 7px; margin-top: 8px; }
.direct-import-actions button {
  flex: 1;
  min-height: 34px;
  border: 1px solid rgba(232, 200, 93, 0.55);
  border-radius: 6px;
  background: rgba(232, 200, 93, 0.1);
  color: var(--yellow);
  padding: 6px 9px;
  font: bold 0.61rem "Courier New", monospace;
  cursor: pointer;
}
.direct-import-actions button:hover,
.direct-import-actions button:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none; }

.direct-editor,
.converter-draft-library {
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.direct-editor[hidden] { display: none; }
.direct-editor p,
.converter-draft-library > p { margin: 9px 0; color: var(--muted); font-size: 0.66rem; line-height: 1.4; }

.pixel-palette { display: flex; gap: 7px; margin: 10px 0; }
.pixel-color {
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 2px solid #6b6b70;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #000;
}
.pixel-color[aria-pressed="true"] { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(232, 200, 93, 0.35), inset 0 0 0 1px #000; }

#pixel-edit-canvas {
  display: block;
  width: min(100%, 720px);
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--cyan);
  background: #000;
  image-rendering: pixelated;
  cursor: crosshair;
  touch-action: none;
}

.direct-editor-actions { display: flex; gap: 8px; margin-top: 10px; }

.mosaic-workbench {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.mosaic-workbench-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.mosaic-toolbox { padding: 11px; border: 1px solid var(--line); background: #08080a; }
.mosaic-toolbox h3,
.mosaic-state-heading h3 { margin: 0 0 9px; color: var(--paper); font-size: 0.66rem; }
.mosaic-toolbox label { display: block; margin-top: 7px; color: var(--cyan); font-size: 0.58rem; }
.mosaic-toolbox select,
.mosaic-toolbox button { width: 100%; margin-top: 5px; }
.mosaic-toolbox p,
.mosaic-toolbox small { display: block; color: var(--muted); font-size: 0.59rem; line-height: 1.45; }
.mosaic-color-pair { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px; align-items: end; }
.mosaic-color-pair label { padding-bottom: 7px; }
.mosaic-state-heading { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.mosaic-state-heading h3 { margin: 0; }
.mosaic-state-heading strong { color: var(--green); font-size: 0.65rem; }
.mosaic-state-heading button { margin-left: auto; }
.mosaic-states {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 8px;
  margin-top: 9px;
}
.mosaic-states article { padding: 7px; border: 1px solid var(--line); background: #030304; }
.mosaic-states canvas { display: block; width: 100%; height: auto; background: #000; image-rendering: pixelated; }
.mosaic-states strong,
.mosaic-states small { display: block; overflow-wrap: anywhere; }
.mosaic-states strong { margin: 6px 0 3px; color: var(--paper); font-size: 0.58rem; }
.mosaic-states small { color: var(--muted); font-size: 0.52rem; }
.mosaic-state-actions { display: flex; gap: 4px; margin-top: 6px; }
.mosaic-state-actions button { flex: 1; min-width: 0; padding: 5px; font-size: 0.5rem; }
.mosaic-states-empty { color: var(--muted); font-size: 0.6rem; }

#ascii-editor {
  box-sizing: border-box;
  width: 100%;
  min-height: 440px;
  resize: vertical;
  overflow: auto;
  border: 1px solid var(--cyan);
  background: #030304;
  color: #fff;
  padding: 12px;
  font: 15px/1.05 "Courier New", monospace;
  white-space: pre;
}

.converter-drafts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 9px;
}
.converter-drafts article { min-width: 0; padding: 8px; border: 1px solid var(--line); background: #08080a; }
.converter-drafts img { display: block; width: 100%; aspect-ratio: 40 / 33; object-fit: contain; background: #000; image-rendering: pixelated; }
.converter-drafts strong,
.converter-drafts small { display: block; overflow-wrap: anywhere; }
.converter-drafts strong { margin-top: 7px; color: var(--paper); font-size: 0.64rem; }
.converter-drafts small { margin: 4px 0 8px; color: var(--muted); font-size: 0.56rem; }
.converter-drafts article div { display: flex; gap: 5px; }
.converter-drafts article button { flex: 1; min-width: 0; padding: 6px; font-size: 0.55rem; }
.converter-drafts-empty { grid-column: 1 / -1; color: var(--muted); font-size: 0.65rem; }

.variant-panel { margin-top: 20px; }
.variant-panel[hidden] { display: none; }
.variant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.variant-card {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  padding: 9px;
}

.variant-card[data-selected="true"] { border-color: var(--yellow); box-shadow: 0 0 0 1px rgba(232, 200, 93, 0.28); }
.variant-card canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; background: #000; }
.variant-card strong { display: block; min-height: 2.4em; margin-top: 7px; color: var(--paper); font-size: 0.62rem; line-height: 1.2; }
.variant-card small { display: block; margin: 4px 0 7px; color: var(--muted); font-size: 0.57rem; }
.variant-card button { width: 100%; min-height: 32px; }

.admin-layout {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 24px 0;
}

.admin-login {
  width: min(380px, 100%);
  display: grid;
  gap: 7px;
}

.admin-login button { margin-top: 12px; }

.login-help {
  justify-self: start;
  margin-top: 5px;
  color: var(--cyan);
  font-size: 0.66rem;
}

.reset-layout {
  width: min(460px, calc(100% - 28px));
  margin: 0 auto;
  padding: 42px 0;
}

.reset-form {
  width: 100%;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #111115;
}

.reset-form h2 { margin: 0; color: var(--yellow); font-size: 0.92rem; }
.reset-form p, .account-note { margin: 3px 0 8px; color: var(--muted); font-size: 0.68rem; line-height: 1.5; }
.reset-form output { margin-top: 8px; color: var(--cyan); font-size: 0.68rem; line-height: 1.45; }
.reset-form output a { color: var(--yellow); }
.account-note { align-self: end; }

.review-toolbar h2 {
  margin: 0;
  font-size: 0.95rem;
}

.review-toolbar select { width: auto; min-width: 150px; }
.review-toolbar button { width: 38px; padding: 0; font-size: 1.1rem; }
.review-table-wrap { overflow-x: auto; }

.review-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.72rem;
}

.review-table-wrap th,
.review-table-wrap td {
  padding: 9px 8px;
  border-bottom: 1px solid #3d3d42;
  text-align: left;
  vertical-align: top;
}

.review-table-wrap th { color: var(--cyan); }
.review-table-wrap td small { display: block; margin-top: 3px; color: var(--muted); }
.row-actions { display: flex; gap: 5px; }
.row-actions button { width: 34px; min-height: 32px; padding: 0; font-size: 1rem; }
.row-actions button[data-action="rejected"] { background: var(--red); color: white; }

.rogue-counts {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  margin: 18px 0;
  border-top: 1px solid #45454a;
  border-bottom: 1px solid #45454a;
}

.rogue-counts div { padding: 14px; border-right: 1px solid #45454a; }
.rogue-counts div:last-child { border-right: 0; }
.rogue-counts strong { display: block; color: var(--yellow); font-size: 1.35rem; }
.rogue-counts span { color: var(--muted); font-size: 0.68rem; }

.rogue-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.rogue-tool {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.rogue-tool label { display: grid; gap: 4px; margin-top: 10px; color: var(--muted); font-size: 0.72rem; }
.rogue-tool input, .rogue-tool select, .rogue-tool textarea { width: 100%; }
.rogue-tool textarea { resize: vertical; font-family: "Courier New", monospace; white-space: pre; }
.rogue-tool button { margin-top: 13px; }
.rogue-tool hr { margin: 18px 0 4px; border: 0; border-top: 1px solid #45454a; }
.rogue-position { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rogue-world-list { margin-top: 24px; }

.rogue-assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px;
  margin-top: 10px;
  background: #45454a;
  border: 1px solid #45454a;
}

.rogue-assets article { min-width: 0; padding: 12px; background: #111114; }
.rogue-assets article strong, .rogue-assets article span, .rogue-assets article small { display: block; }
.rogue-assets article strong { color: var(--yellow); }
.rogue-assets article span { margin: 5px 0; overflow-wrap: anywhere; }
.rogue-assets article small { color: var(--muted); }
.rogue-assets article a { display: inline-block; margin-top: 10px; color: var(--cyan); font-size: 0.7rem; }
.rogue-audit { margin-top: 24px; border-top: 1px solid #45454a; padding-top: 12px; }
.rogue-audit summary { color: var(--cyan); cursor: pointer; }
.rogue-audit ol { max-height: 260px; overflow: auto; padding-left: 28px; font-size: 0.72rem; }
.rogue-audit time { color: var(--muted); }

.dashboard-layout { width: min(1320px, calc(100% - 28px)); margin: 0 auto; padding: 22px 0 44px; }
.dashboard-heading { display: grid; grid-template-columns: 1fr auto 38px; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.dashboard-heading div span, .dashboard-heading div strong { display: block; }
.dashboard-heading div span { color: var(--cyan); font-size: 0.62rem; }
.dashboard-heading div strong { color: var(--paper); font-size: 1.05rem; }
.dashboard-heading output { color: var(--muted); font-size: 0.65rem; }
.dashboard-heading button { width: 38px; min-height: 36px; padding: 0; font-size: 1rem; }
.service-strip { display: flex; flex-wrap: wrap; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.service-strip span, .mail-state span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.62rem; }
.service-strip i, .mail-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.service-strip span[data-up="1"] i, .mail-state span[data-up="1"] i { background: #66c27a; }
.dashboard-tabs, .entry-view-tabs { display: flex; gap: 1px; margin: 18px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.dashboard-tabs button, .entry-view-tabs button { border: 0; border-bottom: 3px solid transparent; background: #121216; color: var(--muted); min-height: 38px; white-space: nowrap; }
.dashboard-tabs button[aria-selected="true"], .entry-view-tabs button[aria-selected="true"] { border-bottom-color: var(--yellow); color: var(--paper); background: #1b1b20; }
.dashboard-panel[hidden] { display: none; }
.dashboard-counts { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dashboard-counts div { padding: 14px; border-right: 1px solid var(--line); }
.dashboard-counts div:last-child { border-right: 0; }
.dashboard-counts strong, .dashboard-counts span { display: block; }
.dashboard-counts strong { color: var(--yellow); font-size: 1.3rem; }
.dashboard-counts span { color: var(--muted); font-size: 0.62rem; }
.dashboard-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 24px; }
.dashboard-columns h2, .mail-state h2 { margin: 0 0 10px; color: var(--cyan); font-size: 0.78rem; }
.dashboard-list article { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dashboard-list article strong { color: var(--paper); font-size: 0.72rem; }
.dashboard-list article span { color: var(--muted); font-size: 0.62rem; }
.dashboard-list article button { grid-row: 1 / 3; grid-column: 2; font-size: 0.58rem; }
.dashboard-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 4px; background: #111115; }
.dashboard-form-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.dashboard-form-head h2 { margin: 0; color: var(--cyan); font-size: 0.82rem; }
.dashboard-form label { display: grid; gap: 5px; color: var(--muted); font-size: 0.64rem; }
.dashboard-form input, .dashboard-form select, .dashboard-form textarea { width: 100%; }
.dashboard-form textarea { resize: vertical; }
.dashboard-form .span-2 { grid-column: 1 / -1; }
.dashboard-form button { justify-self: start; }
.compact-form { max-width: 900px; }
.dashboard-table-wrap { overflow-x: auto; margin-top: 18px; }
.dashboard-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.68rem; }
.dashboard-table-wrap th, .dashboard-table-wrap td { padding: 9px 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.dashboard-table-wrap th { color: var(--cyan); }
.dashboard-table-wrap td strong, .dashboard-table-wrap td small { display: block; }
.dashboard-table-wrap td small { margin-top: 4px; color: var(--muted); max-width: 620px; }
.dashboard-table-wrap button { padding: 6px 8px; font-size: 0.56rem; }
.mail-state { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.mail-state h2 { margin: 0; }
.mail-state div { display: flex; gap: 12px; }
.tool-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tool-directory a { min-width: 0; padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #111115; color: inherit; text-decoration: none; }
.tool-directory a:hover { background: #19191f; }
.tool-directory strong, .tool-directory span { display: block; }
.tool-directory strong { color: var(--yellow); font-size: 0.76rem; }
.tool-directory span { margin-top: 5px; color: var(--muted); font-size: 0.63rem; }

@media (max-width: 980px) {
  .workshop-layout { display: block; }
  .editor-stage { border-right: 0; border-bottom: 1px solid var(--line); }
  .editor-stage iframe { height: 72vh; min-height: 560px; }
  .submission-panel { overflow: visible; }
  .converter-layout { grid-template-columns: 1fr; }
  .mosaic-workbench-grid { grid-template-columns: 1fr; }
  .direct-import-grid { grid-template-columns: 1fr; }
  .variant-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); overflow-x: auto; }
  .help-video, .help-convert { grid-template-columns: 1fr; }
  .who-games, .who-contact { grid-template-columns: 1fr; }
  .rogue-tools { grid-template-columns: 1fr; }
  .rogue-counts { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
  .tool-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .workshop-header { align-items: flex-start; padding: 8px 10px; }
  .workshop-header .ascii-brand { flex-wrap: wrap; gap: 6px; }
  .workshop-header .ascii-brand-numbers,
  .workshop-header .ascii-brand-name { font-size: 0.31rem; }
  .workshop-header .ascii-brand small { font-size: 0.5rem; }
  .workshop-header nav { max-width: 46%; flex-wrap: wrap; justify-content: flex-end; gap: 3px; font-size: 0.58rem; }
  .editor-stage iframe { min-height: 500px; }
  .review-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .sample-grid { grid-template-columns: 1fr; }
  .help-layout { width: min(100% - 20px, 1120px); padding-top: 18px; }
  .help-steps ol { columns: 1; }
  .converter-layout { width: min(100% - 20px, 1280px); padding-top: 18px; }
  #ascii-output { min-height: 360px; font-size: 12px; }
  .variant-grid { grid-template-columns: 1fr; overflow: visible; }
  .rogue-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rogue-position { grid-template-columns: 1fr; }
  .dashboard-layout { width: min(100% - 20px, 1320px); }
  .dashboard-columns, .dashboard-form { grid-template-columns: 1fr; }
  .dashboard-form .span-2 { grid-column: auto; }
  .dashboard-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-counts div { border-bottom: 1px solid var(--line); }
  .tool-directory { grid-template-columns: 1fr; }
}