:root {
  color-scheme: dark;
  --bg: #121417;
  --panel: #1b1f24;
  --border: #2c333c;
  --text: #e8edf2;
  --muted: #9aa4b0;
  --accent: #6cb6ff;
  --danger: #f07178;
  --ok: #7fd99a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, sans-serif;
}

button, input, select { font: inherit; color: inherit; }

button {
  background: #2a313a;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

button:hover:not(:disabled) { border-color: var(--accent); }
button.primary { background: #1e4e7a; border-color: #2d6aa3; }
button.danger { color: var(--danger); border-color: #7a3038; }
button.active { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select {
  background: #101317;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  width: 100%;
}

.shell { max-width: 960px; margin: 0 auto; padding: 1.25rem; }
.topnav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1.25rem; }
.spacer { flex: 1; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0; }
.muted { color: var(--muted); }
.error { color: var(--danger); min-height: 1.2em; }
.ok { color: var(--ok); min-height: 1.2em; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem;
  margin-bottom: 0.75rem;
}

label { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.4rem 0; }
.row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; }
.row > * { flex: 1 1 10rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.token code {
  display: block;
  margin-top: 0.4rem;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.frame {
  position: relative;
  width: min(100%, 640px);
  background: #000;
  overflow: hidden;
  cursor: crosshair;
  container-type: size;
}
.frame.landscape { aspect-ratio: 16 / 9; }
.frame.portrait { aspect-ratio: 9 / 16; width: min(100%, 280px); }
.frame img { width: 100%; height: 100%; object-fit: contain; display: block; }

.overlay-label {
  position: absolute;
  left: 0;
  top: 0;
  color: white;
  font-size: 6cqh;
  white-space: nowrap;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
  pointer-events: none;
}

details { margin-top: 1rem; }
summary { cursor: pointer; color: var(--accent); }
label.check { flex-direction: row; align-items: center; }
label.check input { width: auto; }
details.device-log { margin-top: 0.5rem; }
.log {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  max-height: 16rem;
  overflow: auto;
}
.log li {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
  padding: 0.15rem 0;
}
.log .error-line { color: var(--danger); }

.login {
  max-width: 24rem;
  margin: 4rem auto;
  padding: 0 1.25rem;
}