@font-face {
  font-family: "GohuFont";
  src: url("fonts/GohuFont-14.woff2") format("woff2");
  font-display: block;
}

@font-face {
  font-family: "GohuFont";
  src: url("fonts/GohuFont-14-Bold.woff2") format("woff2");
  font-weight: bold;
  font-display: block;
}

@font-face {
  font-family: "Serious Shanns";
  src: url("fonts/SeriousShanns-Regular.otf") format("opentype");
  font-display: block;
}

@font-face {
  font-family: "Comic Mono";
  src: url("fonts/ComicMono.ttf") format("truetype");
  font-display: block;
}

:root,
:root[data-theme="dark"] {
  --bg: #000000;
  --panel: #111111;
  --fg: #ffffff;
  --muted: #a8a8a8;
  --accent: #5fafff;
  --control: #222222;
  --border: #3a3a3a;
}

:root[data-theme="light"] {
  --bg: #141414;
  --panel: #222222;
  --fg: #ffffff;
  --muted: #b0b0b0;
  --accent: #6cb6ff;
  --control: #353535;
  --border: #474747;
}

html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.4 system-ui, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

header .name {
  color: var(--accent);
  font-weight: 600;
}

#status {
  flex: 1;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.actions {
  display: flex;
  gap: 8px;
}

button,
select {
  background: var(--control);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  font: inherit;
  cursor: pointer;
}

button:hover,
select:hover {
  border-color: var(--accent);
}

button.icon {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
}

button.icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0;
}

:root[data-theme="light"] button.icon svg path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

#terminal {
  flex: 1;
  min-height: 0;
  padding: 6px 0 0 8px;
}

dialog {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: min(480px, 90vw);
  max-height: 80vh;
}

dialog h2 {
  margin: 0 0 4px;
  font-size: 16px;
}

dialog p {
  color: var(--muted);
  margin: 0 0 12px;
}

#files-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  max-height: 55vh;
  overflow: auto;
}

#files-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

#files-list a {
  color: var(--accent);
}

#files-list .size {
  color: var(--muted);
}

@media (max-width: 640px) {
  header {
    padding: 6px 16px;
    flex-wrap: wrap;
  }
}