:root { --bg: #eef0ed; --card: #ffffff; --ink: #1d2428; --ink2: #5b666c; --line: #cfd6d2; --accent: #1f6f8b; --accent-ink: #ffffff; --warn: #b3261e; --ok: #2f7d32; --field: #f6f7f5; color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14191b; --card: #1c2327; --ink: #e8ecea; --ink2: #9aa6ab; --line: #34413f; --accent: #5ab4d1; --accent-ink: #10181b; --warn: #ff8a80; --ok: #7bd17f; --field: #232c30; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 'Barlow Semi Condensed', system-ui, sans-serif; min-height: 100vh; }
.gate { min-height: 100vh; display: grid; place-items: center; padding: 20px 16px; }
.card { width: min(520px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; display: grid; gap: 14px; box-shadow: 0 10px 34px rgba(0, 0, 0, .12); }
.tag { justify-self: start; background: var(--accent); color: var(--accent-ink); padding: 1px 9px; border-radius: 3px; letter-spacing: .08em; font-weight: 700; font-size: 13px; }
h1 { margin: 0; font-size: 26px; line-height: 1.15; text-wrap: balance; }
p { margin: 0; } .note { color: var(--ink2); font-size: 14px; }
.btn { font: 600 16px inherit; font-family: inherit; padding: 10px 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:disabled { opacity: .55; cursor: default; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
label.f { display: grid; gap: 4px; font-size: 14px; color: var(--ink2); }
label.f input { font: 16px inherit; font-family: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: var(--ink); min-width: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 440px) { .two { grid-template-columns: 1fr; } }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.chk input { margin-top: 4px; }
.err { color: var(--warn); font-size: 14px; min-height: 1.3em; } .okmsg { color: var(--ok); font-size: 14px; }
.status { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.status .dot { flex: none; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; background: var(--ink2); }
.status.wait .dot { background: #d6a100; animation: pulse 1.6s ease-in-out infinite; } .status.bad .dot { background: var(--warn); }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .status.wait .dot { animation: none; } }
a { color: var(--accent); } .link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.terms { white-space: pre-wrap; font: 13px/1.5 inherit; font-family: inherit; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: var(--field); margin: 0; }
.gate-load { color: var(--ink2); }

.gate { min-height: calc(100vh - 56px); }
.gate-foot { text-align: center; padding: 14px 16px 22px; font-size: 14px; color: var(--ink2); }
.doc { width: min(780px, 100%); margin: 0 auto; padding: 28px 16px 40px; display: grid; gap: 14px; }
.doc h1 { font-size: 30px; } .doc h2 { margin: 22px 0 0; font-size: 22px; line-height: 1.2; } .doc h3 { margin: 12px 0 0; font-size: 17px; }
.doc p { font-size: 16px; max-width: 70ch; } .doc ul { margin: 0; padding-left: 22px; max-width: 70ch; } .doc li { margin: 3px 0; }
.doc .meta { color: var(--ink2); font-size: 14px; }