:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  color: #e3f2ea;
  background: #081410;
  --panel: #12231c;
  --border: #3f564b;
  --accent: #76e8aa;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(62rem, 100%); margin: 0 auto; padding: 2rem 1.25rem; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
h1 { font-size: 1.85rem; margin: 0 0 0.8rem; }
h2 { font-size: 1.2rem; margin: 0; }
p { line-height: 1.5; }
.components { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
section { margin-top: 1rem; border: 1px solid var(--border); border-radius: 0.9rem; padding: 1.25rem; background: var(--panel); }
.login { max-width: 27rem; }
.login h2 { margin-bottom: 1rem; }
form { display: grid; gap: 0.85rem; }
label { display: grid; gap: 0.35rem; }
input { min-width: 0; width: 100%; font: inherit; color: inherit; background: #091811; border: 1px solid var(--border); border-radius: 0.45rem; padding: 0.55rem; }
input::file-selector-button { font: inherit; }
button, .button { width: fit-content; font: inherit; font-weight: 650; border: 1px solid transparent; border-radius: 0.5rem; padding: 0.55rem 0.85rem; color: #062514; background: var(--accent); cursor: pointer; text-decoration: none; }
.button { display: inline-block; }
.secondary { color: inherit; background: transparent; border-color: var(--border); }
button:disabled { opacity: 0.6; cursor: wait; }
progress { width: 100%; accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[role="status"] { margin: 0; }
[role="status"]:empty { display: none; }
[role="alert"] { color: #ffb4ab; }