*{box-sizing:border-box}
body{margin:0;background:#111;color:#fff;font-family:Arial,sans-serif}
body::before{content:"";position:fixed;inset:0;background:url(img/nayelle.jpg) center/contain no-repeat;opacity:.07;pointer-events:none;z-index:-1}
h1{font-size:2rem;margin:0 0 .5rem}
.box{max-width:380px;margin:8vh auto;padding:24px}
input,select,textarea{width:100%;padding:12px;margin:6px 0 12px;background:#000;color:#fff;border:1px solid #333;border-radius:8px;font:inherit}
button{width:100%;padding:12px;border:0;border-radius:8px;background:#3a5bc7;color:#fff;font:inherit;cursor:pointer}
button.sec{background:transparent;border:1px solid #444}
button:disabled{opacity:.5}
a,.link{color:#8fa8ff;cursor:pointer;background:none;border:0;width:auto;padding:0}
.msg{color:#ff8a8a;min-height:1.2em;font-size:.9rem}
.otp{display:flex;gap:8px}.otp input{text-align:center;font-size:1.4rem;padding:10px 0;background:#fff;color:#000}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#000}
header button,header a{width:auto;padding:8px 14px}
main{max-width:1100px;margin:0 auto;padding:16px}
.player{background:#000;aspect-ratio:16/9;width:100%}
.player video,.player iframe{width:100%;height:100%;border:0}
#desc{white-space:pre-line;margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{background:#000;border:1px solid #333;border-radius:8px;aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:10px;cursor:pointer;position:relative}
.card small{position:absolute;bottom:6px;right:10px;color:#8fa8ff}
.ok{background:#12351f;padding:14px;border-radius:8px;margin:12px 0}
table{width:100%;border-collapse:collapse}td,th{padding:8px;border-bottom:1px solid #333;text-align:left}
td button{padding:6px 10px}
img.qr{width:220px;background:#fff;padding:8px;border-radius:8px}