@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap");

/* Simulator container and background */
#simulator-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  width: 100%;
}

#simulator {
  position: relative;
  width: 100%;
  max-width: 1024px;
  /* aspect ratio derived from original bitmap: width 1024px, height 435px */
  aspect-ratio: 1024 / 435;
  --simulator-skin-image: url("../assets/skins/skin-abc.png");
  background-image: var(--simulator-skin-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

#editor-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
}

#editor-overlay:not([hidden]) {
  display: block;
}

#editor-shell {
  position: absolute;
  inset: 0;
  background-image: url("../assets/skins/skin-background.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}

#simulator.editor-open #register-slots {
  visibility: hidden;
}

#editor-panel {
  position: absolute;
  inset: 5% 2.12%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#editor-layout {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  gap: 0;
  min-height: 0;
}

#editor-code-column {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 54px 39px minmax(0, 1fr);
  border: 1px solid #232e41;
  border-radius: 6px;
  overflow: hidden;
  background: #090b10;
}

#linter-panel {
  flex: 0 0 33%;
  max-width: 33%;
  background: #0d1118;
  border-left: 1px solid #232e41;
  border-radius: 0 6px 6px 0;
  overflow-y: auto;
  color: #d9dee7;
  font: 12px/1.4 "Fira Code", "Courier New", monospace;
  display: flex;
  flex-direction: column;
}

#linter-panel.collapsed {
  flex: 0 0 auto;
  max-width: none;
}

#linter-panel.collapsed #linter-output {
  display: none;
}

#linter-panel.collapsed #linter-header span {
  display: none;
}

#linter-header {
  padding: 6px 10px;
  background: #161b27;
  border-bottom: 1px solid #232e41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #8be9fd;
  flex-shrink: 0;
}

#linter-toggle-btn {
  background: transparent;
  border: none;
  color: #76839b;
  cursor: pointer;
  font-size: 13px;
  padding: 0 4px;
  line-height: 1;
  min-width: unset;
  box-shadow: none;
  transition: transform 0.2s ease;
}

#linter-toggle-btn:hover {
  color: #8be9fd;
  filter: none;
}

#linter-toggle-btn.collapsed {
  transform: rotate(180deg);
}

#linter-output {
  padding: 8px 10px;
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  white-space: pre;
}

#editor-input,
#linter-output {
  scrollbar-width: auto;
  scrollbar-color: #7e98be #111826;
}

#editor-input::-webkit-scrollbar,
#linter-output::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

#editor-input::-webkit-scrollbar-track,
#linter-output::-webkit-scrollbar-track {
  background: #111826;
}

#editor-input::-webkit-scrollbar-thumb,
#linter-output::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8fa9ce, #6d88b0);
  border-radius: 10px;
  border: 2px solid #111826;
}

#editor-input::-webkit-scrollbar-thumb:hover,
#linter-output::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a3bad9, #7e98be);
}

.lint-item {
  padding: 3px 0;
  border-bottom: 1px solid rgba(35, 46, 65, 0.5);
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
}

.lint-item:last-child {
  border-bottom: none;
}

.lint-line-num {
  color: #61708d;
  margin-right: 6px;
}

.lint-error { color: #ff5555; }
.lint-warning { color: #f1fa8c; }
.lint-info { color: #82aaff; }
.lint-ok { color: #50fa7b; }
.lint-icon { margin-right: 4px; }

#editor-lines {
  margin: 0;
  padding: 12px 8px 12px 10px;
  background: #0d1118;
  color: #61708d;
  overflow: hidden;
  text-align: right;
  user-select: none;
  border-right: 1px solid #232e41;
  font: 13px/1.5 "Fira Code", "Courier New", monospace;
}

#editor-labels {
  margin: 0;
  padding: 12px 6px;
  background: #101722;
  color: #8be9fd;
  overflow: hidden;
  text-align: center;
  user-select: none;
  border-right: 1px solid #232e41;
  font: 13px/1.5 "Fira Code", "Courier New", monospace;
  font-weight: 600;
}

#editor-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #0a0f16;
}

#editor-highlight,
#editor-input {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  padding: 12px 14px;
  box-sizing: border-box;
  white-space: pre;
  overflow: auto;
  font: 13px/1.5 "Fira Code", "Consolas", "Courier New", monospace;
  tab-size: 4;
  letter-spacing: 0;
  font-variant-ligatures: contextual;
  font-feature-settings: "liga" 1, "calt" 1;
}

#editor-highlight {
  color: #d9dee7;
  pointer-events: none;
}

#editor-input {
  resize: none;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: #f2f4f8;
}

#editor-input::selection {
  background: rgba(102, 161, 255, 0.35);
  color: transparent;
}

.tok-keyword { color: #ff8da1; font-weight: 600; }
.tok-string { color: #c3e88d; }
.tok-register { color: #82aaff; font-weight: 600; }
.tok-number { color: #f8c275; }
.tok-error { color: #ff5555; text-decoration: wavy underline; }
.tok-pending-error { color: #d9dee7; text-decoration: none; }
.tok-comment { color: #76839b; font-style: normal; }
.tok-title {
  color: #b71c1c;
  background: #ffe88a;
  padding: 0 6px;
  border-radius: 3px;
  font-weight: 700;
}
.tok-operator { color: #7fc8ff; font-weight: 500; }
.tok-arrow {
  display: inline-block;
  width: 2ch;
  text-align: center;
  font-weight: 700;
}
.tok-input { color: #8be9fd; font-weight: 600; }
.tok-print { color: #c3e88d; }

/* Okénko pro zobrazení programu. Bílé pozadí a tmavý rámeček simuluje
   průzor pro papírovou kartu. Uvnitř se bude posouvat svislý seznam
   instrukcí. */
/* Okénko pro zobrazení programu a zpráv. Jedná se o průzor pro papírovou
   kartu. Ve vnitřní části se vertikálně posouvá seznam instrukcí a v
   dolní části se vypisují zprávy. Barva okraje se mění podle stavu
   simulace. */
#program-display {
  position: absolute;
  left: 15.625%;
  top: 52.414%;
  width: 27.344%;
  height: calc(100% * 45 / 435);
  background-color: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Vzhled průzoru řeší podkladová bitmapa panelu */
}

/* Okraj průzoru zůstává konstantní (černý), bez změn při pauze/běhu. */

/* Viditelná část papírového pásku (mezi červenými ryskami) */
#program-window {
  position: absolute;
  left: 0;
  width: 100%;
  top: var(--paper-top, 0px);
  height: var(--paper-height, 20px);
  overflow: hidden;
}

/* Seznam instrukcí. Každá instrukce má pevnou výšku a bude
   posouvána směrem nahoru pomocí transform: translateY(). */
/* Seznam instrukcí. Každá instrukce má pevnou výšku a bude
   posouvána nahoru animací translateY(). */
/* Primární definice posuvného pásku v průzoru */
#program-strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease;
}

/* Program display uses condensed font for better fit */
#program-strip .prog-line {
  color: #000000;
  background-color: #ffffff;
  font-size: clamp(11px, var(--program-font-size, 16px), 19px);
  font-family: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
  padding: 0; /* bez vertikálního paddingu kvůli přesnému zarovnání řádku */
  height: 20px;
  line-height: normal;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: var(--label-width, 64px) 1fr;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* LBL sloupec a sloupec instrukcí */
#program-strip .prog-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 2px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#program-strip .prog-text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  text-align: left;
  padding: 0 var(--instr-padding, 2px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Filler řádky – průhledné, jen aby zaplnily plochu */
#program-strip .prog-line.filler {
  color: transparent;
}

/* Title line style - vždy červený text na žlutém pozadí (má přednost před active) */
#program-strip .prog-line.title {
  background-color: #fff1a8 !important;
  color: #c21f1f !important;
  font-weight: 700;
}

#program-strip .prog-line.title .prog-label,
#program-strip .prog-line.title .prog-text {
  align-items: center;
}

/* Aktivní instrukce - černý text na bílém pozadí (na rozdíl od title) */
#program-strip .prog-line.active {
  background-color: #ffffff;
  color: #000000;
  font-weight: 600;
}

/* Sloty pro zobrazení hodnot registrů. Uspořádány v pravé části karty
   ve dvou sloupcích. Každý slot je bílý obdélník s tmavým rámečkem a
   hodnotou zarovnanou vpravo. Pozice a rozměry vycházejí z mockupu. */
#register-slots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.reg-slot {
  position: absolute;
  width: 9.277%;
  height: calc(100% * 36 / 435);
  background-color: #ffffff;
  border: 1px solid #444444;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 6px;
  font-size: 1rem;
  color: #1a1a1a;
  font-family: 'Kalam', 'Comic Sans MS', 'Segoe Print', cursive;
  font-weight: 700;
  box-sizing: border-box;
  overflow: hidden;
  background: #fff;
}

/* Slot i nepřebíjí styly hodnoty; používá stejné nastavení jako ostatní registry */

.reg-slot span,
.reg-slot .reg-strip,
.reg-slot .reg-strip-i {
  width: 100%;
  text-align: right; /* všechny hodnoty zarovnat doprava jednotně */
  display: block;
  line-height: 1;
  padding: 0;
  color: #0d3aa9; /* blue pen ink */
}

/* Individuální pozice slotů pro registr R0–R9. Sloupec vlevo a vpravo. */
/* Tyto hodnoty byly odhadnuty z poskytnutého obrázku, aby sloty
   odpovídaly červeným prořezům papírového modelu. */
#slot0 { top: 13.563%; left: 67.188%; }
#slot1 { top: 29.425%; left: 67.188%; }
#slot2 { top: 45.517%; left: 67.188%; }
#slot3 { top: 60.690%; left: 67.188%; }
#slot4 { top: 76.322%; left: 67.188%; }
#slot5 { top: 21.609%; left: 86.035%; }
#slot6 { top: 37.471%; left: 86.035%; }
#slot7 { top: 53.333%; left: 86.035%; }
#slot8 { top: 68.736%; left: 86.035%; }
#slot9 { top: 84.138%; left: 86.035%; }
#slot-i { top: 49.885%; left: 5.664%; width: calc(100% * 48 / 1024); height: calc(100% * 46 / 435); padding-right: 0; justify-content: center; }

/* VTM varianta: indexovy registr bez cerneho ramecku */
#simulator[data-sim-skin="VTM"] #slot-i {
  border: none;
}

.reg-slot span {
  font-size: inherit;
  font-weight: inherit;
}

.reg-slot.reg-flash {
  box-shadow: 0 0 0 2px rgba(215, 61, 47, 0.6), inset 0 0 12px rgba(235, 102, 86, 0.25);
}

/* Controls */
#controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 8px;
  padding-bottom: 2px;
}

#controls button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-family: "Special Elite", "Courier New", monospace;
  line-height: 1.25;
  padding: 8px 13px 9px;
  color: #20160c;
  text-shadow: 0 1px 0 rgba(255, 246, 222, 0.22);
  background: linear-gradient(to bottom, #ebddc4, #bca985);
  border: 1px solid #433427;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow 0.12s ease, filter 0.12s ease, transform 0.12s ease;
  min-width: 112px;
  order: 1;
  /* Override design-system.css globals */
  box-shadow: inset 0 0 0 1px rgba(23, 14, 8, 0.32), 0 1px 0 rgba(255, 244, 221, 0.18);
  transform: none;
}

#controls button:hover {
  filter: brightness(1.03);
  /* Override design-system.css button:hover */
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(23, 14, 8, 0.42), 0 1px 0 rgba(255, 244, 221, 0.22);
}

#controls button:disabled {
  opacity: 1;
  cursor: not-allowed;
  filter: none;
  color: #8a8378;
  background: linear-gradient(to bottom, #e6e2d8, #d4cec1);
  border-color: #a19886;
  text-shadow: none;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(78, 73, 62, 0.24);
}

#controls button:focus-visible {
  outline: 2px solid #ff6b35;
  outline-offset: 2px;
}

.default-action {
  box-shadow: 0 0 0 2px rgba(255, 75, 24, 0.5) !important;
}

#controls button:active {
  /* Override design-system.css button:active */
  transform: translateY(2px);
  filter: brightness(0.98);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(23, 14, 8, 0.48);
}

#controls button:active::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 5px;
  box-shadow: inset 0 1px 1px rgba(255, 248, 228, 0.09);
  pointer-events: none;
}

#load-btn,
#save-btn,
#edit-btn {
  background: linear-gradient(to bottom, #ebad56, #cb7f2c);
}

#start-btn {
  background: linear-gradient(to bottom, #d95f48, #a33625);
  color: #fff4ed;
  text-shadow: 0 1px 0 rgba(18, 13, 10, 0.5);
  min-width: 122px;
}

#step-forward-btn,
#step-back-btn,
#settings-btn {
  background: linear-gradient(to bottom, #d5d5d5, #b2b2b2);
}

#load-btn { order: 1; }
#save-btn { order: 2; }
#edit-btn { order: 3; }
#start-btn { order: 4; }
#step-forward-btn { order: 5; }
#step-back-btn { order: 6; }
#settings-btn { order: 7; }

.sim-host {
  width: 100%;
  margin: 0;
  background: transparent;
}

#cgs-app {
  max-width: 1024px;
  margin: 0 auto;
}

/* Messages */
#message-area {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: none;
}

#message-area p {
  margin: 4px 0;
}

.output-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  background: rgba(0, 0, 0, 0.85);
  color: #33ff33;
  font-size: 1.2rem;
}

.reg-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 0.75em;
  font-weight: 600;
  color: #000;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  vertical-align: middle;
  line-height: 1;
}

/* Tip text */
.tip {
  margin-top: 20px;
  max-width: 860px;
  color: #d0d0c0;
  text-align: center;
  font-size: 0.95rem;
}

/* Animations */
.reg-slot .reg-strip {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.reg-slot .reg-strip.enter {
  transform: translateY(-100%);
  opacity: 0;
}

.reg-slot .reg-strip.enter-active {
  transform: translateY(0);
  opacity: 1;
}

.reg-slot .reg-strip.exit {
  transform: translateY(0);
  opacity: 1;
}

.reg-slot .reg-strip.exit-active {
  transform: translateY(100%);
  opacity: 0;
}

#program-strip .prog-line {
  transition: transform 0.3s ease;
}

/* Responsive */
@media (max-width: 1024px) {
  #editor-panel {
    inset: 4% 1.7%;
  }

  #editor-code-column {
    grid-template-columns: 46px 35px minmax(0, 1fr);
  }

  #editor-lines,
  #editor-labels {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  #controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 14px;
  }

  #controls button {
    min-width: unset;
    width: 100%;
    line-height: 1.25;
    padding: 8px 10px 9px;
    font-size: 0.86rem;
  }
}

@media (max-width: 560px) {
  #editor-panel {
    inset: 3% 1.27%;
  }

  #editor-canvas,
  #editor-lines,
  #editor-labels {
    font-size: 11px;
  }
}

/* Load dialog */
#load-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

#load-dialog[hidden] {
  display: none;
}

#load-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 8, 0.45);
}

#load-dialog-panel {
  position: relative;
  width: 620px;
  min-width: 620px;
  max-width: 620px;
  height: 420px;
  min-height: 420px;
  max-height: 420px;
  background: linear-gradient(to bottom, #f5ecd5, #e8dcc0);
  border: 1px solid #433427;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(31, 22, 13, 0.35);
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 0.92rem;
  color: #20160c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

#load-dialog-title {
  margin: 0;
  padding: 14px 18px 10px;
  font-size: 1.05rem;
  font-weight: normal;
  border-bottom: 1px solid rgba(67, 52, 39, 0.2);
  flex-shrink: 0;
}

#load-dialog-body {
  display: flex;
  gap: 1px;
  background: rgba(67, 52, 39, 0.15);
  flex: 1;
  min-height: 0;
}

/* Left column: program list — fixed 40% */
#load-dialog-server {
  width: 40%;
  flex-shrink: 0;
  padding: 12px 14px 14px;
  background: linear-gradient(to bottom, #f5ecd5, #efe3c8);
  display: flex;
  flex-direction: column;
}

#load-dialog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(67, 52, 39, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #a79574 #e9dfca;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 0.9rem;
}

#load-dialog-list li {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(67, 52, 39, 0.1);
  transition: background 0.1s;
}

#load-dialog-list li:last-child {
  border-bottom: none;
}

#load-dialog-list li:hover {
  background: rgba(203, 127, 44, 0.15);
}

#load-dialog-list li[aria-selected="true"] {
  background: rgba(203, 127, 44, 0.35);
  font-weight: bold;
}

/* Right column: preview — fills remaining 60% */
#load-dialog-preview {
  flex: 1;
  min-width: 0;
  padding: 12px 14px 14px;
  background: linear-gradient(to bottom, #f5ecd5, #efe3c8);
  display: flex;
  flex-direction: column;
}

#load-dialog-preview-content {
  flex: 1;
  min-height: 0;
  border: 1px solid rgba(67, 52, 39, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
  padding: 10px 12px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #3a2e1e;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #a79574 #e9dfca;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-all;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: 0.9rem;
}

#load-dialog-preview-content:empty::before {
  content: "Vyberte program ze seznamu.";
  color: #8c7d65;
  font-style: italic;
}

/* Footer buttons — identical to #controls button */
#load-dialog-footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px 14px;
  border-top: 1px solid rgba(67, 52, 39, 0.2);
  flex-shrink: 0;
}

#load-dialog-open,
#load-dialog-custom,
#load-dialog-cancel {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-family: "Special Elite", "Courier New", monospace;
  line-height: 1.25;
  padding: 8px 13px 9px;
  color: #20160c;
  text-shadow: 0 1px 0 rgba(255, 246, 222, 0.22);
  background: linear-gradient(to bottom, #ebddc4, #bca985);
  border: 1px solid #433427;
  border-radius: 6px;
  cursor: pointer;
  transition: box-shadow 0.12s ease, filter 0.12s ease, transform 0.12s ease;
  min-width: 112px;
  box-shadow: inset 0 0 0 1px rgba(23, 14, 8, 0.32), 0 1px 0 rgba(255, 244, 221, 0.18);
  transform: none;
}

#load-dialog-list::-webkit-scrollbar,
#load-dialog-preview-content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#load-dialog-list::-webkit-scrollbar-track,
#load-dialog-preview-content::-webkit-scrollbar-track {
  background: #e9dfca;
}

#load-dialog-list::-webkit-scrollbar-thumb,
#load-dialog-preview-content::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #bbaa88, #998666);
  border-radius: 8px;
  border: 1px solid #e9dfca;
}

#load-dialog-list::-webkit-scrollbar-thumb:hover,
#load-dialog-preview-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #c6b493, #a18d6b);
}

#load-dialog-open:hover,
#load-dialog-custom:hover,
#load-dialog-cancel:hover {
  filter: brightness(1.03);
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(23, 14, 8, 0.42), 0 1px 0 rgba(255, 244, 221, 0.22);
}

#load-dialog-open:active,
#load-dialog-custom:active,
#load-dialog-cancel:active {
  transform: translateY(2px);
  filter: brightness(0.98);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(23, 14, 8, 0.48);
}

#load-dialog-open:active::after,
#load-dialog-custom:active::after,
#load-dialog-cancel:active::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 5px;
  box-shadow: inset 0 1px 1px rgba(255, 248, 228, 0.09);
  pointer-events: none;
}

#load-dialog-open:focus-visible,
#load-dialog-custom:focus-visible,
#load-dialog-cancel:focus-visible {
  outline: 2px solid #ff6b35;
  outline-offset: 2px;
}

#load-dialog-open:disabled {
  opacity: 1;
  cursor: not-allowed;
  filter: none;
  color: #8a8378;
  background: linear-gradient(to bottom, #e6e2d8, #d4cec1);
  border-color: #a19886;
  text-shadow: none;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(78, 73, 62, 0.24);
}

/* Responsive: single column on narrow screens */
@media (max-width: 480px) {
  #load-dialog-panel {
    width: min(96vw, 620px);
    min-width: min(96vw, 620px);
    max-width: min(96vw, 620px);
    height: min(78vh, 420px);
    min-height: min(78vh, 420px);
    max-height: min(78vh, 420px);
  }

  #load-dialog-body {
    flex-direction: column;
  }
}