:root { --bg: #f6f7f3; --card: #fff; --ink: #142033; --soft: #4d5a6b; --line: #dfe3dc; --leaf: #0d7a55; --leaf-deep: #085c40; --alert: #c4421a; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root { --bg: #0f151d; --card: #161e29; --ink: #e8edf2; --soft: #a3afbd; --line: #263243; --leaf: #3fbf8c; --leaf-deep: #2ea377; --alert: #f08a65; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 16px/1.5 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; }
.door { max-width: 400px; margin: 0 auto; padding: 56px 16px 32px; display: grid; gap: 20px; }
.mark { display: inline-flex; align-items: center; gap: 10px; font: 800 1.4rem "Avenir Next", "Segoe UI", system-ui, sans-serif; color: var(--ink); text-decoration: none; justify-self: center; }
.mark b { color: var(--leaf); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: grid; gap: 8px; }
h1 { font: 800 1.35rem "Avenir Next", "Segoe UI", system-ui, sans-serif; margin: 0 0 8px; }
label { font-size: 0.85rem; color: var(--soft); }
input { font: inherit; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--leaf); outline-offset: 2px; }
.hint { margin: 0; font-size: 0.85rem; color: var(--soft); }
.error { margin: 4px 0 0; color: var(--alert); font-size: 0.92rem; }
button { margin-top: 10px; font: inherit; font-weight: 700; border: 0; border-radius: 10px; padding: 12px; background: var(--leaf); color: #fff; cursor: pointer; }
button:hover { background: var(--leaf-deep); }
button:disabled { opacity: 0.6; }
.foot { text-align: center; font-size: 0.9rem; color: var(--soft); margin: 0; }
a { color: var(--leaf-deep); }