/* ═══════════════════════════════════════════════════════
   STARK INDUSTRIES — LIGHT CONTROL SYSTEM
   Iron Man HUD Theme  |  style.css
   Mobile-first · Responsive · Glassmorphism
═══════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap');

/* ── Design Tokens ─────────────────────────────────── */
:root {
  /* Core palette */
  --red:          #e8192c;
  --red-dark:     #9b0e1b;
  --red-dim:      rgba(232, 25, 44, 0.18);
  --red-glow:     rgba(232, 25, 44, 0.45);
  --gold:         #c8912a;
  --gold-bright:  #ffc107;
  --gold-dim:     rgba(200, 145, 42, 0.18);
  --gold-glow:    rgba(200, 145, 42, 0.4);
  --arc:          #00d4ff;
  --arc-glow:     rgba(0, 212, 255, 0.55);
  --arc-dim:      rgba(0, 212, 255, 0.12);

  /* Backgrounds */
  --bg:           #050204;
  --bg2:          #0c0308;
  --bg3:          #110409;
  --panel:        rgba(16, 3, 6, 0.88);
  --panel-hover:  rgba(22, 4, 8, 0.92);

  /* Borders */
  --border:       rgba(200, 145, 42, 0.22);
  --border-hot:   rgba(232, 25, 44, 0.4);
  --border-arc:   rgba(0, 212, 255, 0.4);

  /* Text */
  --text:         #f2e8e8;
  --text-dim:     #7a5a5a;
  --text-gold:    #c8912a;

  /* Typography */
  --font-hud:     'Orbitron', 'Courier New', monospace;
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;

  /* Radius / Spacing */
  --radius:       6px;
  --radius-sm:    4px;
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-mono);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ── HUD Grid Background ───────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(200, 145, 42, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 145, 42, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}

/* Radial vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(5, 2, 4, 0.7) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Scanlines ─────────────────────────────────────── */
.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.07) 3px,
    rgba(0, 0, 0, 0.07) 4px
  );
  pointer-events: none;
  z-index: 998;
}

/* ── HUD Corner Brackets ───────────────────────────── */
.hud-corner {
  position: fixed;
  width: 56px;
  height: 56px;
  z-index: 100;
  pointer-events: none;
}
.hud-tl { top: 14px; left: 14px;
  border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.hud-tr { top: 14px; right: 14px;
  border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.hud-bl { bottom: 14px; left: 14px;
  border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); }
.hud-br { bottom: 14px; right: 14px;
  border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }

.hud-corner::before {
  content: '';
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px var(--gold-glow), 0 0 18px var(--gold-glow);
  animation: corner-pulse 3s ease-in-out infinite;
}
.hud-tl::before { top: -3px; left: -3px; }
.hud-tr::before { top: -3px; right: -3px; }
.hud-bl::before { bottom: -3px; left: -3px; }
.hud-br::before { bottom: -3px; right: -3px; }

@keyframes corner-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── HEADER ────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: linear-gradient(135deg,
    rgba(8, 1, 4, 0.98) 0%,
    rgba(20, 4, 8, 0.96) 100%
  );
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  gap: 1rem;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* ── Mini Arc Reactor ─────────────────────────────── */
.arc-mini {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.arc-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid;
}

.arc-r1 {
  border-color: var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
  animation: spin-cw 9s linear infinite;
}
.arc-r2 {
  inset: 8px;
  border-color: rgba(232, 25, 44, 0.5);
  animation: spin-ccw 5s linear infinite;
}

.arc-core-mini {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--arc) 45%, rgba(0, 160, 200, 0.3) 75%, transparent 100%);
  box-shadow: 0 0 14px var(--arc), 0 0 28px var(--arc-glow);
  animation: arc-breathe 2.5s ease-in-out infinite;
}

@keyframes spin-cw  { to { transform: rotate(360deg);  } }
@keyframes spin-ccw { to { transform: rotate(-360deg); } }
@keyframes arc-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.92); }
}

/* Brand text */
.brand-text { display: flex; flex-direction: column; gap: 2px; }

.brand-company {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
}

.brand-title {
  font-family: var(--font-hud);
  font-size: clamp(0.68rem, 2vw, 0.95rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--text);
  text-shadow: 0 0 18px var(--red-glow);
  line-height: 1.1;
}

.brand-model {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

/* Status badge */
.status-badge {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(16, 3, 6, 0.7);
  flex-shrink: 0;
  transition: border-color 0.3s;
}
.status-badge.connected { border-color: var(--border-arc); }

.status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(100, 50, 50, 0.5);
  border: 1px solid rgba(150, 60, 60, 0.4);
  flex-shrink: 0;
  transition: all 0.4s;
}
.status-badge.connected .status-dot {
  background: var(--arc);
  border-color: transparent;
  box-shadow: 0 0 8px var(--arc), 0 0 16px var(--arc-glow);
  animation: dot-ping 1.8s ease-in-out infinite;
}
@keyframes dot-ping {
  0%, 100% { box-shadow: 0 0 8px var(--arc), 0 0 16px var(--arc-glow); }
  50% { box-shadow: 0 0 3px var(--arc), 0 0 6px var(--arc-glow); }
}

.status-info { display: flex; flex-direction: column; gap: 1px; }

.status-label {
  font-family: var(--font-hud);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  transition: color 0.3s;
}
.status-badge.connected .status-label { color: var(--arc); }

.status-sub {
  font-family: var(--font-mono);
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

/* Sweeping header bar */
.header-bar {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--red) 20%,
    var(--gold) 50%,
    var(--red) 80%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: bar-sweep 4s linear infinite;
}
@keyframes bar-sweep {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── Main Grid ─────────────────────────────────────── */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "control blink"
    "chart   log";
  gap: 1.25rem;
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Panels ────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.panel:hover {
  border-color: var(--border-hot);
  box-shadow: 0 0 24px rgba(232, 25, 44, 0.08);
}

/* Gradient overlay */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(232, 25, 44, 0.025) 0%,
    transparent 55%,
    rgba(200, 145, 42, 0.015) 100%
  );
  pointer-events: none;
}

/* Scan line that sweeps down */
.panel::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, var(--red) 50%, transparent 95%);
  top: -2px;
  animation: panel-scan 8s ease-in-out infinite;
  opacity: 0;
}
.panel:nth-child(1)::after { animation-delay: 0s;   }
.panel:nth-child(2)::after { animation-delay: 2s;   }
.panel:nth-child(3)::after { animation-delay: 4s;   }
.panel:nth-child(4)::after { animation-delay: 6s;   }

@keyframes panel-scan {
  0%   { top: -2px;   opacity: 0; }
  8%   { opacity: 0.7; }
  92%  { opacity: 0.7; }
  100% { top: 100%;   opacity: 0; }
}

/* Grid areas */
.control-panel { grid-area: control; }
.blink-panel   { grid-area: blink;   }
.chart-panel   { grid-area: chart;   }
.log-panel     { grid-area: log;     }

/* ── Panel Header ──────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.2rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(200, 145, 42, 0.12);
}

.panel-icon {
  font-size: 0.9rem;
  color: var(--gold);
  filter: drop-shadow(0 0 6px var(--gold-glow));
  flex-shrink: 0;
}

.panel-title {
  font-family: var(--font-hud);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text);
  flex: 1;
}

.chart-subtitle {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

/* ── Arc Reactor Power Button ──────────────────────── */
.toggle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0 0.5rem;
}

.power-btn {
  position: relative;
  width: 148px;
  height: 148px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.power-btn:active { transform: scale(0.95); }
.power-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: 50%;
}

.power-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.power-ring-outer {
  inset: 0;
  border-color: rgba(200, 145, 42, 0.3);
}
.power-ring-mid {
  inset: 18px;
  border-color: rgba(200, 145, 42, 0.15);
}

.power-core {
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle,
    rgba(30, 6, 10, 0.98) 0%,
    rgba(50, 10, 16, 0.95) 100%
  );
  border: 2px solid rgba(232, 25, 44, 0.2);
  box-shadow: inset 0 0 20px rgba(232, 25, 44, 0.06);
  transition: all 0.5s;
}

.power-icon {
  width: 38px; height: 38px;
  color: var(--text-dim);
  transition: all 0.4s;
}

/* ── ON State ──────────────────────────────────────── */
.power-btn.on .power-ring-outer {
  border-color: var(--arc);
  box-shadow:
    0 0 20px var(--arc-glow),
    0 0 45px var(--arc-glow),
    inset 0 0 18px rgba(0, 212, 255, 0.08);
  animation: ring-spin-slow 7s linear infinite;
}
.power-btn.on .power-ring-mid {
  border-color: rgba(0, 212, 255, 0.45);
  box-shadow: 0 0 10px var(--arc-glow);
  animation: ring-spin-slow 3.5s linear infinite reverse;
}
.power-btn.on .power-core {
  background: radial-gradient(circle,
    #ffffff 0%,
    var(--arc) 30%,
    rgba(0, 110, 180, 0.85) 60%,
    rgba(0, 5, 20, 0.92) 100%
  );
  border-color: var(--arc);
  box-shadow:
    0 0 30px var(--arc),
    0 0 65px var(--arc-glow),
    inset 0 0 25px var(--arc-glow);
}
.power-btn.on .power-icon {
  color: #fff;
  filter: drop-shadow(0 0 10px #fff);
}

/* ── BLINK State ───────────────────────────────────── */
.power-btn.blinking .power-ring-outer {
  border-color: var(--red);
  animation: ring-spin-slow 2s linear infinite, blink-ring 0.9s ease-in-out infinite;
}
.power-btn.blinking .power-ring-mid {
  border-color: rgba(232, 25, 44, 0.55);
  animation: ring-spin-slow 1s linear infinite reverse, blink-ring 0.9s ease-in-out infinite 0.2s;
}
.power-btn.blinking .power-core {
  animation: blink-core 0.9s ease-in-out infinite;
}
.power-btn.blinking .power-icon { color: var(--red); }

@keyframes ring-spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes blink-ring {
  0%, 100% { opacity: 1; }
  50% {  opacity: 0.25; }
}
@keyframes blink-core {
  0%, 100% {
    background: radial-gradient(circle, #fff 0%, var(--red) 35%, rgba(120, 5, 12, 0.85) 65%, rgba(10, 0, 2, 0.92) 100%);
    box-shadow: 0 0 30px var(--red), 0 0 60px var(--red-glow), inset 0 0 22px var(--red-glow);
  }
  50% {
    background: radial-gradient(circle, rgba(30, 6, 10, 0.98) 0%, rgba(50, 10, 16, 0.95) 100%);
    box-shadow: 0 0 4px rgba(232, 25, 44, 0.2);
  }
}

.power-label {
  font-family: var(--font-hud);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: var(--text-dim);
  text-align: center;
}

/* State badge */
.state-badge {
  font-family: var(--font-hud);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: rgba(16, 3, 6, 0.8);
  color: var(--text-dim);
  flex-shrink: 0;
  transition: all 0.3s;
}
.state-badge.on {
  color: var(--arc);
  border-color: var(--border-arc);
  box-shadow: 0 0 10px var(--arc-glow);
}
.state-badge.blink {
  color: var(--red);
  border-color: var(--border-hot);
  animation: badge-blink 0.9s step-end infinite;
}
@keyframes badge-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}

/* ── System Readouts ───────────────────────────────── */
.readouts {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(200, 145, 42, 0.1);
}

.readout {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.4rem;
  border: 1px solid rgba(200, 145, 42, 0.1);
  border-radius: var(--radius-sm);
  background: rgba(8, 2, 4, 0.5);
}

.readout-label {
  font-family: var(--font-mono);
  font-size: 0.46rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.readout-value {
  font-family: var(--font-hud);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.1em;
}

/* ── Blink / Pulse Panel ───────────────────────────── */
.blink-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.blink-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
}

.hud-input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: rgba(8, 2, 4, 0.92);
  border: 1px solid rgba(200, 145, 42, 0.2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -moz-appearance: textfield;
  appearance: textfield;
}
.hud-input::-webkit-inner-spin-button,
.hud-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.hud-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200, 145, 42, 0.12), 0 0 18px rgba(200, 145, 42, 0.08);
}

.blink-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0;
}

/* Pulse status bar */
.pulse-status {
  margin-top: 1rem;
  height: 3px;
  background: rgba(200, 145, 42, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.pulse-bar {
  height: 100%;
  width: 0%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.6s ease, background 0.4s;
}
.pulse-bar.on     { background: var(--arc); width: 100%; }
.pulse-bar.pulsing {
  background: var(--red);
  width: 100%;
  animation: bar-pulse 0.9s ease-in-out infinite;
}
@keyframes bar-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* ── Buttons ───────────────────────────────────────── */
.btn {
  font-family: var(--font-hud);
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.96); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.btn-blink {
  background: var(--gold-dim);
  border-color: rgba(200, 145, 42, 0.35);
  color: var(--gold-bright);
}
.btn-blink:hover,
.btn-blink.active {
  background: rgba(200, 145, 42, 0.22);
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(200, 145, 42, 0.3);
}

.btn-stop {
  background: var(--red-dim);
  border-color: rgba(232, 25, 44, 0.3);
  color: var(--red);
}
.btn-stop:hover {
  background: rgba(232, 25, 44, 0.22);
  border-color: var(--red);
  box-shadow: 0 0 14px var(--red-glow);
}

.btn-delay {
  background: rgba(200, 145, 42, 0.05);
  border-color: rgba(200, 145, 42, 0.18);
  color: var(--text-dim);
}
.btn-delay:hover {
  background: var(--gold-dim);
  border-color: rgba(200, 145, 42, 0.4);
  color: var(--gold);
}

.btn-clear {
  background: transparent;
  border-color: rgba(232, 25, 44, 0.25);
  color: rgba(232, 25, 44, 0.6);
  padding: 0.3rem 0.7rem;
  font-size: 0.48rem;
  width: auto;
  margin-left: auto;
}
.btn-clear:hover {
  background: rgba(232, 25, 44, 0.08);
  border-color: var(--red);
  color: var(--red);
}

/* ── Chart Panel ───────────────────────────────────── */
.chart-container {
  height: 185px;
  position: relative;
}

/* ── Log Panel ─────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 255px;
  -webkit-overflow-scrolling: touch;
}
.table-wrap::-webkit-scrollbar { width: 4px; height: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb {
  background: rgba(200, 145, 42, 0.2);
  border-radius: 2px;
}

.log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
}

.log-table th {
  font-family: var(--font-hud);
  font-size: 0.47rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid rgba(200, 145, 42, 0.18);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--bg3);
  z-index: 1;
}

.log-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid rgba(200, 145, 42, 0.05);
  color: var(--text-dim);
  font-size: 0.68rem;
  white-space: nowrap;
}

.empty-row td {
  text-align: center;
  letter-spacing: 0.18em;
  font-size: 0.6rem;
  padding: 2.5rem 0;
}

.log-table tbody tr:hover td {
  background: rgba(200, 145, 42, 0.03);
}

.log-new td { animation: row-flash 0.6s ease-out; }
@keyframes row-flash {
  from { background: rgba(232, 25, 44, 0.14); }
  to   { background: transparent; }
}

/* Action Badges */
.action-badge {
  font-family: var(--font-hud);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  border: 1px solid;
}
.action-on {
  color: var(--arc);
  border-color: rgba(0, 212, 255, 0.38);
  background: var(--arc-dim);
}
.action-off {
  color: var(--text-dim);
  border-color: rgba(80, 60, 60, 0.3);
  background: transparent;
}
.action-blink {
  color: var(--gold-bright);
  border-color: rgba(255, 193, 7, 0.38);
  background: rgba(200, 145, 42, 0.1);
}
.action-stop {
  color: var(--red);
  border-color: rgba(232, 25, 44, 0.38);
  background: var(--red-dim);
}
.action-toggle {
  color: #7dffb0;
  border-color: rgba(0, 255, 157, 0.3);
  background: rgba(0, 255, 157, 0.06);
}

/* ── Toast ─────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 0.65rem 1.15rem;
  background: rgba(8, 2, 4, 0.97);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text);
  z-index: 9999;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  max-width: calc(100vw - 3rem);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6);
}
.toast.show   { opacity: 1; transform: translateY(0); }
.toast.success {
  border-color: rgba(0, 212, 255, 0.45);
  color: var(--arc);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6), 0 0 16px var(--arc-glow);
}
.toast.error {
  border-color: rgba(232, 25, 44, 0.45);
  color: var(--red);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6), 0 0 16px var(--red-glow);
}

/* ── Responsive — Tablet & Mobile ──────────────────── */
@media (max-width: 768px) {
  .hud-corner { width: 38px; height: 38px; }

  .main-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "control"
      "blink"
      "chart"
      "log";
    padding: 1rem;
    gap: 0.9rem;
  }

  .header-inner { padding: 0.75rem 1.1rem; }
  .brand-model  { display: none; }
  .brand-title  { font-size: 0.7rem; }
  .brand-company { font-size: 0.54rem; }
  .arc-mini { width: 36px; height: 36px; }
  .arc-core-mini { inset: 12px; }

  .power-btn { width: 130px; height: 130px; }
  .power-core { inset: 28px; }
  .power-icon { width: 32px; height: 32px; }

  .chart-container { height: 165px; }
  .table-wrap { max-height: 230px; }

  .log-table td, .log-table th { padding: 0.4rem 0.5rem; }

  .toast { bottom: 1rem; right: 1rem; left: 1rem; }
}

@media (max-width: 440px) {
  .blink-actions { grid-template-columns: 1fr; }
  .readouts { gap: 0.35rem; }
  .power-btn { width: 118px; height: 118px; }
  .blink-grid { grid-template-columns: 1fr; }
}