/* Matches the app: water teal, waterproof-pen ink, bromine amber for warnings. */
:root {
  --ink: #16202e;
  --ink-soft: #44546b;
  --water: #0f7a8c;
  --bromine: #b4601a;
  --alert: #a3293f;
  --good: #1a7350;
  --ground: #f7f9fa;
  --line: #dde3e8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 80px;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 640px; margin: 0 auto; }

header { padding: 48px 0 28px; }
.mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 19px; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.mark .dot {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--water);
}

h1 { font-size: clamp(30px, 6vw, 40px); line-height: 1.12; letter-spacing: -0.02em; margin: 26px 0 14px; }
h2 { font-size: 21px; margin: 34px 0 10px; letter-spacing: -0.01em; }
p { margin: 0 0 16px; }
.lede { font-size: 19px; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
small, .small { font-size: 14px; color: var(--ink-soft); }

a { color: var(--water); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 24px; margin: 24px 0;
}

label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 8px; }
input[type="password"] {
  width: 100%; padding: 15px; font-size: 17px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--ground);
}
input:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }

button {
  width: 100%; min-height: 56px; margin-top: 16px;
  font: 600 18px/1 -apple-system, system-ui, sans-serif;
  color: #fff; background: var(--water);
  border: 0; border-radius: 14px; cursor: pointer;
}
button:disabled { opacity: 0.4; cursor: not-allowed; }

.note { padding: 14px 16px; border-radius: 12px; font-size: 15px; margin-top: 16px; }
.note.bad { background: #fbe9ec; color: var(--alert); }
.note.good { background: #e6f2ed; color: var(--good); }
.note.warn { background: #f8ece0; color: var(--bromine); }
[hidden] { display: none !important; }

ul { padding-left: 1.15em; }
li { margin-bottom: 8px; }

footer {
  margin-top: 56px; padding-top: 24px;
  border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft);
}
footer a { margin-right: 18px; }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6edf2; --ink-soft: #9aabb8; --ground: #0e161b; --line: #263440;
    --water: #4fb3bd;
  }
  .card { background: #141f26; }
  input[type="password"] { background: #0e161b; color: var(--ink); }
}