/* Dark only, like the board. */
:root {
  color-scheme: dark;
  --background: #1b1b1d;
  --surface: #242526;
  --text-primary: #e3e3e3;
  --text-secondary: #999999;
  --accent: #66bf0d;
  --accent-darker: #4da10c;
  --accent-lighter: #88cb0f;
  --danger: #fa383e;
  --warning: #ffba00;
  --info: #54c7ec;
  --divider: #444950;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { margin: 0; padding: 1.5rem 1rem 3rem; background: var(--background); color: var(--text-secondary); line-height: 1.5; }
main { max-width: 38rem; margin: 0 auto; }

h1 { margin: 0 0 1.25rem; font-size: 1.75rem; color: var(--text-primary); }
h1::before { content: ""; display: inline-block; width: 0.7em; height: 0.7em; margin-right: 0.5em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0.6em var(--accent); }
strong, em { color: var(--text-primary); }
a { color: var(--accent); }
a:hover { color: var(--accent-lighter); }
code { padding: 0.05em 0.35em; border-radius: 0.25em; background: var(--background); color: var(--text-primary); }

/* Cards: Surface on Background, hairline Divider border. */
section, details { margin: 0 0 1rem; padding: 1rem 1.25rem; border: 1px solid var(--divider); border-radius: 0.75rem; background: var(--surface); }
#unsupported { border-color: var(--danger); }
#nokey { border-color: var(--warning); }
#app { padding: 0; border: 0; background: none; }

.steps { margin: 0 0 1.25rem; padding: 0; list-style: none; counter-reset: step; }
.steps > li { position: relative; margin-bottom: 0.75rem; padding: 1rem 1.25rem 1rem 3.5rem; border: 1px solid var(--divider); border-radius: 0.75rem; background: var(--surface); counter-increment: step; }
.steps > li::before { content: counter(step); position: absolute; left: 1.1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: var(--background); font-weight: 700; text-align: center; line-height: 1.6rem; }
.steps ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

button { font: inherit; font-size: 1.1rem; font-weight: 600; min-height: 3rem; padding: 0.8rem 1.6rem; border: 0; border-radius: 0.5rem; background: var(--accent); color: var(--background); cursor: pointer; }
button:hover { background: var(--accent-lighter); }
button:active { background: var(--accent-darker); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
button:disabled { opacity: 0.5; cursor: default; }

#connect { margin: 1.25rem 0; }

progress { width: 100%; height: 0.9rem; border: 0; border-radius: 0.45rem; overflow: hidden; background: var(--divider); accent-color: var(--accent); }
progress::-webkit-progress-bar { background: var(--divider); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }

#status { color: var(--info); }
#status[data-kind="ok"] { color: var(--accent); font-weight: 600; }
#status[data-kind="error"], #flash-error { color: var(--danger); }
#flash-error:empty { display: none; }

summary { cursor: pointer; color: var(--text-primary); }
details ul { margin: 0.75rem 0 0; padding-left: 1.1rem; }
details li { margin-bottom: 0.5rem; }

pre { max-height: 14rem; overflow: auto; margin: 0.75rem 0 0; padding: 0.75rem; border-radius: 0.5rem; background: var(--background); color: var(--text-primary); font-size: 0.8rem; white-space: pre-wrap; }

[hidden] { display: none !important; }