:root {
  /* "teal" is the main brand colour; now electric blue (Jack, 2026-10-17) */
  --teal: #00B4FF;
  --teal-dark: #0A5FA8;
  --teal-deep: #0a2440;
  --orange: #FF7A00;
  --yellow: #FFE600;
  --black: #000;
  --white: #fff;
  --panel: #0c1214;
  --muted: #8fa3a6;
  --font: 'Press Start 2P', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--white); }
.t { color: var(--teal); }
.o { color: var(--orange); }
.px { background: var(--black); border: 4px solid var(--teal); outline: 4px solid var(--black); box-shadow: 6px 6px 0 rgba(0, 0, 0, .85); }
.y { color: var(--yellow); }
.bar { height: 12px; background: #123; border: 2px solid var(--white); margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--teal); }
button, input, select, textarea { font-family: var(--font); }

/* buttons for host + viewer pages */
.btn { background: var(--black); color: var(--white); border: 3px solid var(--teal); padding: 10px 12px; font-size: 11px; cursor: pointer; text-transform: uppercase; }
.btn:hover { background: var(--teal-deep); }
.btn:active { transform: translateY(2px); }
.btn.solid { background: var(--teal); color: var(--black); }
.btn.orange { border-color: var(--orange); }
.btn.orange.solid { background: var(--orange); color: var(--black); }
.btn.green { border-color: #3BE36B; color: #3BE36B; }
.btn.red { border-color: #FF3B3B; color: #FF3B3B; }
.btn.yellow { border-color: var(--yellow); color: var(--yellow); }
.btn.danger { border-color: #ff4d4d; color: #ff8080; }
.btn.on { background: var(--teal); color: var(--black); }

.field { display: block; margin: 0 0 14px; }
.field > span { display: block; font-size: 10px; color: var(--teal); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; background: var(--black); color: var(--white); border: 3px solid #2a3b3d; padding: 10px; font-size: 12px; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); }
.err { color: #ff8080; font-size: 10px; min-height: 14px; margin: 6px 0; line-height: 1.6; }