/* eve-tools.online — HUD skin for the calculator pages (home, radio and PI
 * Templates use the same look). Load after site.css; it only changes looks.
 * Add class="hud-panel" to any box that should get corner brackets. */

body { background: radial-gradient(1100px 520px at 50% -10%, #0f1d30, var(--bg) 70%); }

/* cut corners + brackets */
.panel, .hud-panel, .empty-state { position: relative; }
.panel, .empty-state {
  background: linear-gradient(180deg, rgba(22,29,44,.85), rgba(17,21,32,.85));
  border: 1px solid var(--border-soft); border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.panel::before, .panel::after, .hud-panel::before, .hud-panel::after {
  content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid var(--accent);
  opacity: .7; pointer-events: none;
}
.panel::before, .hud-panel::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.panel::after, .hud-panel::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* labels in the code font */
.field label, .panel-title, .panel h3, table.data th, .hud-label {
  font-family: var(--mono); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.field label { font-size: 11px; color: var(--accent); }
.panel h3, .panel-title { font-size: 11.5px; color: var(--accent); }
table.data th { font-size: 10.5px; color: var(--faint); }
table.data tbody tr:hover td { background: rgba(42,106,163,.08); }

/* buttons and badges */
.btn { border-radius: 0; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.btn-primary { box-shadow: 0 0 18px rgba(42,106,163,.5); }
.badge { border-radius: 0; font-family: var(--mono); letter-spacing: .08em; }

/* title bar readouts */
.hud-read { display: flex; gap: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.hud-read > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hud-read b { font-family: var(--font); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text-strong); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.hud-read b.ok { color: var(--ok); }
.hud-read b.info { color: var(--accent); }
.hud-read .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); display: inline-block; margin-right: 6px; vertical-align: 1px; animation: hud-blink 2.4s ease-in-out infinite; }
@keyframes hud-blink { 50% { opacity: .35; } }

/* empty state */
.empty-state > .icon { filter: drop-shadow(0 0 10px rgba(126,184,212,.5)); }
.empty-state::after { content: 'STANDBY'; display: block; margin-top: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--faint); }

@media (prefers-reduced-motion: reduce) { .hud-read .dot { animation: none; } }
@media (max-width: 1000px) { .hud-read { display: none; } }