:root{
  --bg:#0c1520; --panel:#0f1b2a; --text:#e7f2ff; --muted:#9fb3c8;
  --accent:#22c55e; --accent-2:#0ea5e9; --warn:#f59e0b; --danger:#ef4444;
  --border: #1f2a3a;
  --green:#10b981;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#0b1320,#0e1a2a);
  color:var(--text);
}
.container{max-width:980px;margin:0 auto;padding:24px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.25)}
header{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.logo{width:36px;height:36px;border-radius:6px;object-fit:contain;background:#fff;padding:2px}
.brand{font-weight:800;letter-spacing:.2px}
.lang{margin-left:auto; display:flex; gap:8px}
.lang button{background:#112439;color:#bfe1ff;border:1px solid #1f3552;padding:6px 10px;border-radius:12px}
h1{font-size:clamp(28px,3.5vw,44px); margin:6px 0 12px}
h2{font-size:20px;margin:6px 0 12px;color:#cfe6ff}
p{color:var(--muted)}
.btn{background:var(--accent); color:#05240e; font-weight:700; border:none; padding:10px 14px; border-radius:12px; cursor:pointer}
.btn.secondary{background:#12314d;color:#cde7ff;border:1px solid #1f3552}
.btn.ghost{background:transparent;border:1px solid #285; color:#aef}
.row{display:flex; gap:16px; flex-wrap:wrap}
.col{flex:1; min-width:260px}
input,select,button,textarea{font:inherit}
input{
  width:100%; padding:12px 14px; background:#0b2033; color:#dfefff; border:1px solid #1f3552; border-radius:12px;
}
.badge{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#083020;border:1px solid #124730; color:#b6ffda; font-weight:700}
.badge.warn{background:#33260a;border-color:#6f5205;color:#ffd99a}
.badge.error{background:#3b1111;border-color:#6f1d1d;color:#ffb3b3}
hr{border:none;border-top:1px solid #1f2a3a;margin:18px 0}
.footer{opacity:.7;font-size:14px;margin-top:22px}
.cam{width:100%; aspect-ratio:16/9; background:#000; border:2px solid #25c08a; border-radius:18px; box-shadow:0 0 0 4px rgba(37,192,138,.2) inset}
.controls{display:flex; gap:10px; flex-wrap:wrap}
iframe.preview{width:100%; min-height:360px; border:none; border-radius:12px; background:#061321}
.kv{display:grid; grid-template-columns:140px 1fr; gap:6px 12px; font-size:14px}
.kv div:nth-child(odd){opacity:.7}
.small{font-size:13px; opacity:.85}