:root {
  --nd2-bg: #070b12;
  --nd2-surface: #101720;
  --nd2-surface-2: #151d28;
  --nd2-text: #f4f7fb;
  --nd2-text-2: #a9b5c4;
  --nd2-muted: rgba(169, 181, 196, 0.62);
  --nd2-line: rgba(255, 255, 255, 0.1);
  --nd2-yellow: #f3ef5e;
  --nd2-yellow-soft: rgba(243, 239, 94, 0.16);
  --nd2-purple: #6f42e8;
  --nd2-red: #cf2f2f;
  --nd2-green: #34f27a;
  --nd2-blue: #4f8dff;

  --nd2-glass-bg: rgba(8, 12, 18, 0.56);
  --nd2-glass-bg-strong: rgba(8, 12, 18, 0.72);
  --nd2-glass-border: rgba(210, 226, 255, 0.16);
  --nd2-glass-border-soft: rgba(255, 255, 255, 0.08);
  --nd2-glass-blur: 18px;
  --nd2-glass-saturate: 1.18;
  --nd2-panel-radius: 20px;
  --nd2-glass-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nd2-background {
  background-image:
    radial-gradient(circle at 50% 36%, rgba(87, 133, 178, 0.18), transparent 38%),
    linear-gradient(90deg, rgba(4, 7, 12, 0.74), rgba(4, 7, 12, 0.24) 32%, rgba(4, 7, 12, 0.24) 68%, rgba(4, 7, 12, 0.78)),
    linear-gradient(180deg, rgba(3, 6, 12, 0.3), rgba(3, 6, 12, 0.72)),
    url("./background.jpg");
  background-size: cover;
  background-position: center;
}

.nd2-glass-panel {
  background: linear-gradient(180deg, rgba(17, 22, 31, 0.68), rgba(8, 12, 18, 0.52));
  border: 1px solid var(--nd2-glass-border);
  border-radius: var(--nd2-panel-radius);
  box-shadow: var(--nd2-glass-shadow);
  backdrop-filter: blur(var(--nd2-glass-blur)) saturate(var(--nd2-glass-saturate));
  -webkit-backdrop-filter: blur(var(--nd2-glass-blur)) saturate(var(--nd2-glass-saturate));
}

.nd2-lens-mask {
  left: 13.2%;
  top: 20.6%;
  width: 61.8%;
  height: 67.6%;
  border-radius: 15% 13% 18% 16% / 22% 20% 21% 24%;
  overflow: hidden;
}

.nd2-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--nd2-red);
  box-shadow: 0 0 14px currentColor;
}

.nd2-status-dot.is-connected {
  background: var(--nd2-green);
  color: var(--nd2-green);
}

.nd2-recording-pill {
  background: linear-gradient(180deg, #d83b36, #a91f1f);
  color: var(--nd2-text);
}

.nd2-command-power {
  background: linear-gradient(180deg, #fff76b, var(--nd2-yellow));
  color: #101720;
}

.nd2-command-load {
  background: linear-gradient(180deg, #8f62ff, var(--nd2-purple));
  color: var(--nd2-text);
}
