:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; background: #121212; color: #f2f2f2;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
.wrap { max-width: 480px; margin: 0 auto; padding: 20px 16px 40px; }
h1 { font-size: 22px; margin: 4px 0 0; }
h2 { font-size: 20px; margin: 0 0 6px; line-height: 1.3; }
.muted { color: #a8a8a8; }
.small { font-size: 13px; }
.hidden { display: none !important; }
.card {
  background: #1e1e1e; border: 1px solid #2c2c2c; border-radius: 16px;
  padding: 16px; margin-top: 14px;
}
.label {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: #8fbf9f; font-weight: 700;
}
.focus-card { border-color: #2f6b4f; }
.row { display: flex; gap: 10px; margin-top: 16px; }
.btn {
  min-height: 48px; border-radius: 12px; border: none; cursor: pointer;
  font-size: 16px; font-weight: 700; padding: 12px 18px; flex: 1;
}
.btn.primary { background: #2f9e6e; color: #fff; width: 100%; margin-top: 10px; }
.btn.done { background: #2f9e6e; color: #fff; }
.btn.ghost { background: transparent; color: #f2f2f2; border: 1px solid #555; flex: 0 0 auto; }
input {
  width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid #444;
  background: #121212; color: #f2f2f2; padding: 10px 14px; font-size: 16px; margin-top: 10px;
}
ul { list-style: none; margin: 0; padding: 0; }
li { padding: 10px 0; border-top: 1px solid #2c2c2c; }
li:first-child { border-top: none; }
li .t { font-weight: 600; }
li .d { color: #a8a8a8; font-size: 14px; margin-top: 2px; }
.waiting { color: #ffb454; font-weight: 700; margin: 10px 0 0; }
.error { color: #ff8a80; }
.footer { margin-top: 18px; color: #a8a8a8; font-size: 14px; }
.link { background: none; border: none; color: #8fbf9f; cursor: pointer; font-size: 14px; padding: 0; text-decoration: underline; }