:root {
  --bg: #04070d;
  --cb-bg: #050b11;
  --panel: #0b1830;
  --panel-2: #102347;
  --line: #4f8fda;
  --glow: #7fc0ff;
  --cb-blue: #7fc0ff;
  --gold: #d9c06a;
  --cb-gold: #d9c06a;
  --red: #b9242e;
  --steel: #d6e5f4;
  --text: #f3f8ff;
  --cb-text: #f3f8ff;
  --muted: #9fb8d4;
  --cb-muted: #9fb8d4;
  --success: #19b861;
  --warn: #dfbb4f;
  --danger: #e04d4d;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --control-h: 46px;
  --panel-pad: 22px;
  --gap: 20px;
  --sidebar-width: 290px;
  --mechlab-sidebar-width: 280px;
  --shadow: 0 18px 40px rgba(0,0,0,.34);
}

/* Developer-only pane texture presets. Edit config/ui_settings.json, then run scripts/render_ui_theme.py. */
.ui-pane-texture { position: relative; overflow: hidden; }
.ui-pane-texture > * { position: relative; z-index: 2; }
.ui-pane-texture::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.ui-pane-texture::after { content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 1; }
.ui-texture-armored-specops {
  background:
    radial-gradient(circle at 24% 10%, color-mix(in srgb, #9bff00 16%, transparent), transparent 16%),
    linear-gradient(180deg, rgba(6,10,8,.96), rgba(2,5,4,.985)),
    linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 54px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #9bff00 10%, transparent), inset 0 0 110px rgba(0,0,0,.70);
}
.ui-texture-armored-specops::before {
  opacity: .95;
  background:
    linear-gradient(145deg, transparent 0 10%, color-mix(in srgb, #9bff00 6%, transparent) 10% 10.25%, transparent 10.25% 27%, rgba(255,255,255,.035) 27% 27.25%, transparent 27.25% 62%, color-mix(in srgb, #9bff00 5%, transparent) 62% 62.25%, transparent 62.25%),
    linear-gradient(35deg, rgba(255,255,255,.022) 0 1px, transparent 1px 64px);
  background-size: 286px 286px, 72px 72px;
}
.ui-texture-armored-specops::after {
  border: 1px solid color-mix(in srgb, #9bff00 18%, transparent);
  clip-path: polygon(0 22px,22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 0 70px rgba(0,0,0,.62);
}
.ui-texture-dark-carbon {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.16)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.026) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #07100c, #030504);
}
.ui-texture-dark-carbon::before { opacity: .42; background: radial-gradient(circle at 40% 25%, color-mix(in srgb, #76ff00 10%, transparent), transparent 24%); }
.ui-texture-dark-carbon::after { border: 1px solid color-mix(in srgb, #76ff00 10%, transparent); box-shadow: inset 0 0 34px rgba(0,0,0,.44); }
.ui-texture-reactor-grid {
  background:
    radial-gradient(circle at 50% 56%, color-mix(in srgb, #9bff00 18%, transparent), transparent 18%),
    linear-gradient(rgba(155,255,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,255,0,.035) 1px, transparent 1px),
    linear-gradient(180deg, #020604, #040806);
  background-size: auto, 30px 30px, 30px 30px, auto;
}
.ui-texture-reactor-grid::after { border: 1px solid color-mix(in srgb, #9bff00 20%, transparent); box-shadow: inset 0 0 40px color-mix(in srgb, #9bff00 8%, transparent); }
.ui-texture-plain-dark { background: linear-gradient(180deg, #050706, #020303); }
.ui-texture-plain-dark::after { border: 1px solid color-mix(in srgb, #4f8f00 8%, transparent); }