/* AMOURANTHRTX native CSS subset · dark neon · raised SDF · no plastic */
:root {
  --bg: #050607;
  --bg2: #0a0c0b;
  --ink: #e8e4df;
  --mute: #8a9188;
  --line: #1e2822;
  --neon-r: #ff2a6d;
  --neon-g: #05f2a0;
  --neon-b: #2de2e6;
  --neon-y: #f9f871;
  --sdf: #c4788a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body, .app {
  width: 100%;
  height: 100%;
  background: var(--bg2);
  color: var(--ink);
  font-family: sans-serif;
  overflow: hidden;
}

.neon-stripe {
  height: 6px;
  background: linear-gradient(90deg, var(--neon-r), var(--neon-g), var(--neon-b));
}

.mast {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: #121816;
}

.raised-sdf {
  /* hard shell · not drop-shadow plastic */
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.brand b { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.brand span { font-size: 10px; color: var(--mute); display: block; }

.atoms { display: flex; gap: 8px; margin-left: auto; }
.atom {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: #0e1210;
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.1em;
}
.atom.bgf[data-on="1"] { background: var(--neon-y); color: #141208; border-color: var(--neon-y); }
.atom.sdf[data-on="1"] { background: var(--sdf); color: #0a0608; border-color: var(--sdf); }
.atom.spv[data-on="1"] { background: var(--neon-g); color: #041208; border-color: var(--neon-g); }
.atom[data-on="0"] { opacity: 0.4; }

.stage {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: calc(100% - 6px - 48px - 24px);
}

.panel {
  background: #0b0f0d;
  border-right: 1px solid var(--line);
  padding: 8px;
  overflow: auto;
}
.panel-h {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neon-b);
  margin: 8px 0 6px;
}
.socket {
  padding: 10px;
  border: 1px solid rgba(5,242,160,0.45);
  background: #0a0e0c;
  font-size: 11px;
  margin-bottom: 8px;
}
.socket.live { color: var(--neon-g); }
.widget {
  padding: 8px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  background: #0a0e0c;
  font-size: 12px;
  font-family: monospace;
}

.viewport {
  position: relative;
  background: #000;
  min-height: 0;
}
.canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.hud {
  position: absolute;
  left: 10px;
  top: 10px;
  font-family: monospace;
  font-size: 11px;
  color: var(--neon-g);
  white-space: pre;
  pointer-events: none;
}

.foot {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
  background: #080a09;
  font-size: 10px;
  color: var(--mute);
  font-family: monospace;
}
.live { color: var(--neon-g); }