@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600;700&display=swap');
:root{
  --bg: #0b1220;
  --card: #111a2b;
  --muted: #8aa0b6;
  --accent: #5eead4;
}
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:linear-gradient(135deg,#0b1220,#0f172a 60%,#1f2937);
  color:#e5e7eb; font-family:'Kanit',sans-serif; min-height:100vh;
}
.container{max-width:1200px;margin:0 auto;padding:24px}
.card{background:var(--card); border:1px solid #1f2937; border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.h1{font-size:28px; font-weight:700; letter-spacing:.3px}
.h2{font-size:20px; font-weight:600}
.badge{display:inline-block; padding:6px 10px; background:#0ea5e9; border-radius:12px; font-size:12px}
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.btn{
  background: linear-gradient(135deg,#2563eb,#06b6d4);
  border:none; color:white; padding:12px 16px; border-radius:12px; font-weight:600; cursor:pointer;
  box-shadow:0 8px 20px rgba(37,99,235,.35);
}
.btn.secondary{background:#0ea5e9}
.btn:disabled{opacity:.6; cursor:not-allowed}
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{padding:10px 12px; border-bottom:1px solid #1f2937}
.small{font-size:12px; color:var(--muted)}
.kpi{font-size:26px; font-weight:700}
.kpi-sub{font-size:12px; color:var(--muted)}
.videoWrap{position:relative; border-radius:16px; overflow:hidden; border:1px solid #1f2937}
.videoWrap video, .videoWrap canvas{width:100%; height:auto; display:block}
.footer{margin-top:24px; text-align:center; color:#9ca3af; font-size:12px}
.input, select{
  width:100%; background:#0b1220; color:#e5e7eb; border:1px solid #1f2937; border-radius:10px; padding:10px 12px;
}
.row{display:flex; gap:14px; flex-wrap:wrap}
.col{flex:1 1 240px}
.warn{color:#fbbf24}
.ok{color:#34d399}
.err{color:#f87171}