:root { font-family: Inter, Arial, sans-serif; background:#f3f4f6; color:#111827; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; }
header { background:#111827; color:white; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; }
header strong { font-size:22px; margin-right:10px; } header span { opacity:.7; }
main { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; }
.panel { background:white; border-radius:16px; padding:16px; box-shadow:0 4px 20px rgba(0,0,0,.08); }
.panel-head { display:flex; align-items:center; justify-content:space-between; }
video { width:100%; aspect-ratio:16/9; background:#111; border-radius:12px; object-fit:cover; }
.camera-row { display:flex; gap:8px; margin-top:10px; } select,button { padding:11px; border-radius:9px; border:1px solid #d1d5db; } select { flex:1; }
button { cursor:pointer; font-weight:700; background:#111827; color:white; }
.info { display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:16px 0; }
.order { font-size:20px; word-break:break-all; }.timer { font-size:24px; }
.badge { padding:7px 10px; border-radius:999px; font-weight:800; font-size:12px; }
.ready { background:#dcfce7; color:#166534; }.recording { background:#fee2e2; color:#991b1b; animation:pulse 1s infinite; }.uploading { background:#fef3c7; color:#92400e; }.error { background:#fee2e2; color:#991b1b; }
.message { min-height:44px; color:#4b5563; }.hidden { display:none; }.cancel { width:100%; background:#991b1b; }
#scan-status { margin:0 16px 16px; background:white; border-radius:12px; padding:12px 16px; text-align:center; }
@keyframes pulse { 50% { opacity:.55; } }
@media (max-width:900px) { main { grid-template-columns:1fr; } }