:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #17352c; background: #eaf1ec; }
* { box-sizing: border-box; }
body { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 24px; background: radial-gradient(circle at top right, #c4e3ca, transparent 38%), #edf3ee; }
.card { width: min(100%, 520px); padding: 34px; border: 1px solid #d5e1d7; border-radius: 22px; background: #fff; box-shadow: 0 20px 55px #17352c22; }
.brand { display: flex; align-items: center; gap: 12px; }.mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #176a48; color: #fff; font-size: 29px; }.eyebrow { margin: 0; color: #39725b; font-weight: 800; font-size: .72rem; letter-spacing: .14em; } h1 { margin: 2px 0 0; font-size: 1.45rem; }.intro { margin: 25px 0 16px; color: #4e645b; } #reader { overflow: hidden; border-radius: 14px; border: 1px solid #d7e4da; background: #111; } #reader video { display: block; width: 100%; max-height: 440px; object-fit: cover; } #reader img { display: none; }.help { color: #60756b; font-size: .84rem; text-align: center; }.separator { display: flex; align-items: center; gap: 12px; margin: 25px 0 18px; color: #778b81; font-size: .78rem; }.separator::before, .separator::after { content: ''; height: 1px; flex: 1; background: #dce7df; } label { display: block; margin-bottom: 7px; font-weight: 700; font-size: .9rem; }.manual-row { display: flex; gap: 8px; } input { min-width: 0; flex: 1; border: 1px solid #bcd0c2; border-radius: 9px; padding: 12px; font: inherit; } input:focus { outline: 3px solid #a6d4b6; border-color: #176a48; } button { border: 0; border-radius: 9px; padding: 0 16px; background: #176a48; color: #fff; font: inherit; font-weight: 750; cursor: pointer; } button:hover { background: #105239; } output { display: block; min-height: 24px; margin-top: 17px; font-size: .93rem; }.success { color: #08642e; }.error { color: #b22525; }.loading { color: #356d58; } @media (max-width: 440px) { .card { padding: 22px; } .manual-row { flex-direction: column; } button { min-height: 44px; } }