:root{
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --accent: #06b6d4;
  --bg-light: #f8f9fc;
  --text-dark: #1e1b2e;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --danger: #ef4444;
  --radius: 16px;
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; font-family:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(180deg, #eef1ff 0%, #ffffff 100%);
  color:var(--text-dark); display:flex; align-items:center; justify-content:center; padding:20px;
}
.wrap{width:100%; max-width:460px;}
.glass{
  background:#ffffff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow: 0 15px 35px rgba(79,70,229,0.10); padding:28px; margin-bottom:16px;
}
h1{
  font-size:24px; margin:0 0 4px; text-align:center; letter-spacing:.3px; font-weight:700;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sub{text-align:center; color:var(--text-muted); font-size:13px; margin-bottom:22px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
button, .btn{
  border:1px solid var(--border); background:#ffffff; color:var(--text-dark);
  padding:14px 16px; border-radius:14px; font-size:15px; cursor:pointer; transition:.2s; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px; width:100%;
}
button:hover, .btn:hover{background:var(--bg-light); transform:translateY(-2px); box-shadow:0 8px 20px rgba(79,70,229,0.08);}
button.primary{
  background:linear-gradient(135deg,var(--primary),var(--accent)); border:none; color:#fff; font-weight:600;
  box-shadow:0 8px 20px rgba(79,70,229,0.28);
}
button.primary:hover{ filter:brightness(1.06); }
button.danger{background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,0.35); color:#b91c1c;}
button:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none;}
.icon{font-size:24px;}
.row{display:flex; gap:10px; margin-bottom:12px;}
.row > *{flex:1;}
input,select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:#ffffff; color:var(--text-dark); font-size:15px; outline:none; transition:.2s;
}
input:focus,select:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,0.12); }
input::placeholder{color:var(--text-muted);}
label{font-size:12px; color:var(--text-muted); display:block; margin:10px 0 5px; font-weight:500;}
.dropzone{
  border:2px dashed var(--border); border-radius:16px; padding:28px 14px; text-align:center;
  color:var(--text-muted); cursor:pointer; margin:14px 0; transition:.2s; background:var(--bg-light);
}
.dropzone.drag{background:#eef1ff; border-color:var(--primary);}
.filelist{font-size:13px; color:var(--text-muted); margin:8px 0;}
.progress{height:8px; border-radius:6px; background:var(--border); overflow:hidden; margin:10px 0;}
.progress > div{height:100%; width:0%; background:linear-gradient(90deg,var(--primary),var(--accent)); transition:width .15s;}
.center{text-align:center;}
.code{
  font-size:28px; font-weight:700; letter-spacing:6px; text-align:center; margin:14px 0;
  background:var(--bg-light); border-radius:14px; padding:14px; border:1px solid var(--border); color:var(--primary-dark);
}
#qrbox{display:flex; justify-content:center; margin:16px 0; background:#fff; border-radius:16px; padding:14px; border:1px solid var(--border);}
.small{font-size:12px; color:var(--text-muted);}
.link{color:var(--primary); text-decoration:none; cursor:pointer; font-weight:600;}
.back{color:var(--text-muted); text-decoration:none; font-size:13px; cursor:pointer; display:inline-block; margin-bottom:14px; font-weight:500; transition:.2s;}
.back:hover{color:var(--primary);}
.msg{padding:12px 14px; border-radius:12px; margin:10px 0; font-size:13px;}
.msg.err{background:rgba(239,68,68,0.08); border:1px solid rgba(239,68,68,0.25); color:#b91c1c;}
.msg.ok{background:rgba(6,182,212,0.10); border:1px solid rgba(6,182,212,0.3); color:#0e7490;}
.countdown{text-align:center; font-size:13px; color:var(--text-muted); margin-top:6px;}
video{width:100%; border-radius:14px; background:#000;}
.hidden{display:none !important;}
.meta{font-size:14px; margin:6px 0; word-break:break-all;}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);animation:spin 1s linear infinite;margin:14px auto;}
@keyframes spin{to{transform:rotate(360deg);}}
footer{text-align:center; font-size:11px; color:var(--text-muted); margin-top:6px;}