/* KeyPilot web app. Colors follow the device's screen (firmware/lib/keypilot/ui.py). */
:root {
  color-scheme: light dark;
  --bg: #f4f5f8;
  --card: #ffffff;
  --text: #11141b;
  --muted: #5f6878;
  --line: #e2e5eb;
  --accent: #b87800;
  --accent-fill: #ffb000;
  --on-accent: #1a1f2b;
  --good: #1e8e4e;
  --bad: #d23b41;
  --run: #c3262e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d12;
    --card: #1a1f2b;
    --text: #f2f4f8;
    --muted: #8c95a5;
    --line: #2a3140;
    --accent: #ffb000;
    --accent-fill: #ffb000;
    --good: #3ddc84;
    --bad: #ff5a5f;
    --run: #ff5a5f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 32px max(16px, env(safe-area-inset-left));
}

header {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 16px auto 8px;
}

h1 { font-size: 26px; margin: 0; }

main { max-width: 560px; margin: 0 auto; }

h2 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 22px 4px 6px;
}

.card {
  background: var(--card);
  border-radius: 12px;
  padding: 4px 16px;
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.row:first-child { border-top: none; }
.row .grow { flex: 1; min-width: 0; }
.row .value { color: var(--muted); font-variant-numeric: tabular-nums; }
.title { font-weight: 600; }
.sub { font-size: 13px; color: var(--muted); }
.error { font-size: 13px; color: var(--bad); overflow-wrap: anywhere; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.on { color: var(--good); }
.running { color: var(--run); font-weight: 600; }
.hint { font-size: 13px; color: var(--muted); margin: 8px 4px; }
.icon { width: 22px; text-align: center; flex: none; }

button {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  padding: 11px 18px;
  background: var(--accent-fill);
  color: var(--on-accent);
  cursor: pointer;
}

button:disabled { opacity: 0.4; cursor: default; }
button.plain { background: none; color: var(--accent); padding: 11px 0; }
button.danger { background: none; color: var(--bad); padding: 11px 0; }
button.wide { width: 100%; margin: 10px 0; }

input.code {
  font: 600 28px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.3em;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  text-align: center;
  margin: 12px 0 2px;
}

progress {
  width: 100%;
  height: 6px;
  accent-color: var(--run);
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex: none;
}

@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Controls */
button.small { padding: 6px 12px; font-size: 14px; border-radius: 8px; }
button.small.plain { padding: 6px 4px; }
button.stop { background: var(--run); color: #fff; }
.choices { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0 12px; }
.keys { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 8px; padding: 12px 0; }
.keys button { padding: 14px 0; font-size: 18px; }
.notice {
  background: var(--card);
  border-left: 4px solid var(--good);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 12px 0 0;
}
.notice.bad { border-left-color: var(--bad); }

/* Macro editor */
.editor-card { padding: 12px 16px; }
input.name, textarea.editor {
  width: 100%;
  font: 15px/1.45 ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0 10px;
}
textarea.editor { min-height: 260px; resize: vertical; }
code { font: 13px ui-monospace, "SF Mono", Menlo, monospace; min-width: 44%; }

/* Cards that follow each other directly need a gap. */
.card + .card { margin-top: 16px; }