:root {
  --bg: #020617;
  --card: #0f172a;
  --fg: #f8fafc;
  --muted: #94a3b8;
  --border: #1e293b;
  --pri: #0284c7;
}
* { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding: 8px;
  height: 100vh;
  overflow: hidden;
}
#app-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: calc(100vh - 16px);
}
#viewport-wrap {
  position: relative;
  width: 100%;
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #334155;
  background: #020617;
}
#canvas-host, #webgl-canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.hidden { display: none !important; }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 6px; }
.tabs { display: inline-flex; background: #1e293b; padding: 3px; border-radius: 8px; gap: 4px; }
.btn {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #1e293b;
  border: 1px solid #334155;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn:hover { opacity: 0.92; }
.btn-pri { background: #0284c7; border-color: #38bdf8; }
.btn-amber { background: #f59e0b; color: #020617; border-color: #fbbf24; }
.btn-red { background: #dc2626; border-color: #f87171; }
.btn-green { background: #059669; border-color: #34d399; }
.badge { padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; background: #0891b2; color: #fff; }
.hud-overlay { position: absolute; inset: 0; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.hud-overlay .interactive { pointer-events: auto; }
.glass-box { background: rgba(2, 6, 23, 0.86); border: 1px solid rgba(56, 189, 248, 0.35); border-radius: 8px; padding: 8px 10px; font-size: 12px; backdrop-filter: blur(6px); max-width: 440px; }
.drawer { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.9); backdrop-filter: blur(10px); padding: 14px; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; z-index: 20; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.card { background: rgba(15, 23, 42, 0.95); border: 1px solid #334155; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
input[type="text"] { background: #020617; border: 1px solid #334155; border-radius: 6px; color: #fff; padding: 6px 10px; font-size: 12px; flex: 1; }
input[type="range"] { width: 100%; accent-color: #38bdf8; cursor: pointer; }
dialog:modal { overscroll-behavior: contain; }
dialog::backdrop { overflow: hidden; overscroll-behavior: contain; background-color: rgba(2, 6, 23, 0.78); backdrop-filter: blur(5px); }
#bokaro-disclaimer-dialog {
  margin: auto;
  width: calc(100% - 24px);
  max-width: 640px;
  border-radius: 16px;
  border: 1px solid rgba(252, 211, 77, 0.45);
  background: #0c1226;
  color: #f1f5f9;
  padding: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
}
.disc-stripe { height: 6px; width: 100%; background: linear-gradient(90deg, #fbbf24, #f43f5e, #38bdf8); }
.disc-body { max-height: 86dvh; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.disc-box { border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.disc-rose { background: rgba(244, 63, 94, 0.12); border: 1px solid rgba(253, 164, 175, 0.35); }
.disc-amber { background: rgba(251, 191, 36, 0.11); border: 1px solid rgba(252, 211, 77, 0.35); }
.disc-sky { background: rgba(56, 189, 248, 0.11); border: 1px solid rgba(125, 211, 252, 0.35); }
.disc-cta { padding: 10px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 800; background: linear-gradient(90deg, #fbbf24, #f97316); color: #020617; border: none; cursor: pointer; }