:root{
  --bg1:#0f0c29; --bg2:#302b63; --accent1:#667eea; --accent2:#764ba2;
  --muted:rgba(255,255,255,0.75);
}
*{box-sizing:border-box;font-family:Inter, Poppins, system-ui, Arial;}
html,body{height:100%;margin:0;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:#eef2ff}
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.25}
.container{max-width:1100px;margin:36px auto;padding:28px;background:rgba(255,255,255,0.03);border-radius:20px;backdrop-filter:blur(8px);position:relative;z-index:1;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.header{text-align:center;margin-bottom:18px}
.header h1{font-size:34px;margin:0;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;color:transparent;text-shadow:0 0 18px rgba(118,75,162,0.18)}
.subtitle{color:var(--muted);letter-spacing:2px;font-size:13px;margin-top:6px}
.status{padding:12px;border-radius:14px;text-align:center;margin:10px 0;font-weight:700}
.status.loading{background:linear-gradient(135deg,rgba(102,126,234,0.08),rgba(118,75,162,0.06));border:1px solid rgba(102,126,234,0.12)}
#video-container{display:flex;justify-content:center;margin:18px 0}
.video-wrapper{position:relative;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(2,6,23,0.6);transition:transform .25s}
.video-wrapper:hover{transform:translateY(-6px) scale(1.01)}
video{display:block;width:100%;height:auto;max-width:800px;background:#000}
canvas{position:absolute;top:0;left:0;width:100%;height:100%}
.scan-line{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--accent1),transparent);box-shadow:0 0 18px var(--accent1);pointer-events:none}
.controls{display:flex;gap:12px;justify-content:center;margin:16px 0;flex-wrap:wrap}
.btn{padding:12px 22px;border-radius:40px;border:none;font-weight:700;cursor:pointer;color:#fff;transition:all .25s;letter-spacing:1px}
.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2))}
.btn-success{background:linear-gradient(90deg,#13b6a6,#38ef7d)}
.btn-danger{background:linear-gradient(90deg,#ee0979,#ff6a00)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.message{display:none;padding:12px;border-radius:12px;margin:8px 0}
.success-message{background:linear-gradient(90deg,rgba(17,153,142,0.9),rgba(56,239,125,0.9));color:#042}
.error-message{background:linear-gradient(90deg,rgba(238,9,121,0.9),rgba(255,106,0,0.9));color:#210}
.info-panel{margin-top:18px;padding:18px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
.panel-title{font-size:18px;font-weight:700;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;color:transparent}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:12px}
.stat-card{background:rgba(255,255,255,0.02);padding:12px;border-radius:12px;text-align:left}
.stat-label{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase}
.stat-value{font-size:20px;font-weight:900;margin-top:6px}
.footer{text-align:center;margin-top:12px;color:var(--muted);font-size:13px}
@media(max-width:720px){.container{margin:12px;padding:18px}.header h1{font-size:24px}}