:root { color-scheme: light dark; font-family: system-ui, sans-serif; color: light-dark(#223532, #e3eeeb); background: light-dark(#f3f7f5, #10201c); }
* { box-sizing: border-box; }
body { margin: 0; padding: 20px 12px; }
main { max-width: 430px; margin: auto; padding: 24px; border-radius: 20px; background: light-dark(#fff, #192c26); }
header { color: light-dark(#246a5b, #8bcebb); font-size: 14px; font-weight: 500; margin-bottom: 28px; }
h1 { font-size: 24px; line-height: 1.2; font-weight: 500; }
h2 { font-size: 20px; font-weight: 500; }
p { line-height: 1.5; overflow-wrap: anywhere; }
button, input, select { font: inherit; font-size: 16px; width: 100%; min-height: 46px; border-radius: 10px; }
button { padding: 12px; margin: 6px 0; border: 1px solid transparent; background: light-dark(#246a5b, #8bcebb); color: light-dark(#fff, #10251e); cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
.secondary { background: light-dark(#eff5f2, #233b32); border-color: light-dark(#c5d5ce, #426557); color: inherit; }
.text { background: transparent; color: light-dark(#246a5b, #8bcebb); }
input, select { border: 1px solid light-dark(#bacbc2, #426557); background: light-dark(#fff, #13261f); color: inherit; padding: 10px; min-width: 0; }
label { display: block; margin: 16px 0 6px; }
form { margin-top: 20px; }
video { display: block; width: 100%; max-height: 480px; background: #101914; border-radius: 12px; margin: 14px 0; }
.small { font-size: 13px; color: light-dark(#60776b, #a4beb0); }
.error { color: light-dark(#a92729, #ffb5b5); }
[hidden] { display: none !important; }
@media (max-width: 350px) { main { padding: 18px; } }