/* ─── panels (HUD core surface) ────────────────────────────────────── */

.panel {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.panel::before, .panel::after,
.panel > .tick-tr, .panel > .tick-bl {
  content: ""; position: absolute; width: 12px; height: 12px;
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px;  border-top: 1.5px solid var(--metal-3); border-left: 1.5px solid var(--metal-3); }
.panel::after  { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--metal-3); border-right: 1.5px solid var(--metal-3); }
.panel > .tick-tr { top: -1px; right: -1px; border-top: 1.5px solid var(--metal-3); border-right: 1.5px solid var(--metal-3); }
.panel > .tick-bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid var(--metal-3); border-left: 1.5px solid var(--metal-3); }

.panel.accent { border-color: var(--cyan-dim); }
.panel.accent > .accent-dot {
  position: absolute; top: 12px; right: 12px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: var(--cyan-glow-sm);
  z-index: 2;
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  gap: 1rem;
}
.panel-head .title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.panel-head .meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}