/* ── Palette fighter jet ───────────────────────────────────────────────── */
:root {
  --bg:        #0a0e1a;
  --bg2:       #060810;
  --cyan:      #00d4ff;
  --green:     #39ff14;
  --orange:    #ff6b35;
  --red:       #ff2244;
  --text:      #c8e8ff;
  --label:     #90c4e8;
  --border:    #0d1f35;
  --glow-c:    rgba(0,212,255,0.18);
  --glow-g:    rgba(57,255,20,0.12);
  --font-mono: 'JetBrains Mono','Courier New',monospace;
  --font-ui:   'Segoe UI',system-ui,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  min-height: 100vh;
  overflow-x: clip;
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes pulse {
  0%,100% { opacity:1; }
  50%     { opacity:.3; }
}
@keyframes pulse-ring {
  0%   { transform:scale(0.85); opacity:.9 }
  100% { transform:scale(1.8);  opacity:0  }
}
@keyframes glow-border {
  0%,100% { opacity:1; }
  50%     { opacity:.3; }
}
@keyframes scan {
  0%   { transform:translateY(-100%) }
  100% { transform:translateY(100vh) }
}
@keyframes fade-in {
  from { opacity:0; transform:translateY(-6px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes leader-glow {
  0%,100% { opacity:1; }
  50%     { opacity:.3; }
}
@keyframes spin-slow {
  from { transform:rotate(0deg) }
  to   { transform:rotate(360deg) }
}
@keyframes danger-pulse {
  0%,100% { opacity:1 }
  50%     { opacity:.35 }
}

/* ── Scan line ───────────────────────────────────────────────────────────── */
body::after {
  content:'';
  position:fixed; top:0; left:0;
  width:100%; height:3px;
  background:linear-gradient(transparent, var(--cyan), transparent);
  opacity:.15;
  animation:scan 10s linear infinite;
  pointer-events:none;
  z-index:999;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.8rem;
  border-bottom:1px solid var(--border);
  background:rgba(6,8,16,0.85);
  backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:10;
  gap:1.2rem;
}
.header__left {
  display:flex; align-items:center; gap:1.4rem;
}
.header__meta {
  display:flex; flex-direction:column; gap:.25rem;
}
.header__sub {
  font-size:.72rem; letter-spacing:.25em;
  color:var(--label); text-transform:uppercase;
}
.header__title {
  font-size:.9rem; font-weight:700;
  color:#5b9fc5; letter-spacing:.04em;
  font-family:var(--font-ui);
}
.header__right {
  display:flex; align-items:center; gap:1.2rem;
}
/* ── Header responsive mobile ────────────────────────────────────────────── */
@media (max-width:640px) {
  .header { padding:.7rem 1rem; flex-direction:column; align-items:flex-start; gap:.5rem; }
  .header__left { gap:.8rem; }
  .header__right { width:100%; justify-content:space-between; gap:.7rem; }
  .header__sub  { letter-spacing:.1em; font-size:.65rem; }
  .header__title { font-size:.78rem; }
  .badge { font-size:.7rem; padding:.2rem .6rem; }
  .clock { font-size:.72rem; }
}
@media (max-width:400px) {
  .header { padding:.55rem .8rem; }
  .logo-wrap,
  .logo-ring--1, .logo-ring--2, .logo-ring--3 { width:42px; height:42px; }
  .logo-core { width:28px; height:28px; }
  .logo-img  { width:17px; height:17px; }
}

/* ── Logo avec cercles concentriques ─────────────────────────────────────── */
.logo-wrap {
  position:relative; width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.logo-ring {
  position:absolute;
  border-radius:50%;
  border:1px solid var(--cyan);
  animation:pulse-ring 2.4s ease-out infinite;
}
.logo-ring--1 { width:56px;  height:56px;  animation-delay:0s;    opacity:.7 }
.logo-ring--2 { width:56px;  height:56px;  animation-delay:.8s;   opacity:.5 }
.logo-ring--3 { width:56px;  height:56px;  animation-delay:1.6s;  opacity:.3 }
.logo-core {
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(0,212,255,.08);
  border:1px solid rgba(0,212,255,.4);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
  box-shadow:0 0 12px rgba(0,212,255,.3);
}
.logo-img {
  width:24px; height:24px;
  object-fit:contain;
  filter:drop-shadow(0 0 4px var(--cyan));
}

/* ── Badge statut ────────────────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.3rem .9rem;
  border:1px solid;
  border-radius:3px;
  font-size:.78rem; letter-spacing:.12em; font-weight:600;
  text-transform:uppercase;
}
.badge--ok   { color:var(--green);  border-color:var(--green);
                box-shadow:0 0 8px rgba(57,255,20,.2); }
.badge--warn { color:var(--orange); border-color:var(--orange); }
.clock {
  font-size:.82rem; color:var(--label);
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
}

/* ── Grid principal ──────────────────────────────────────────────────────── */
.dashboard {
  max-width:min(94vw, 1320px);
  margin:1.5rem auto;
  padding:0 1.2rem;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.1rem;
}
@media (max-width:900px) { .dashboard { grid-template-columns:1fr } }

/* ── Panel ───────────────────────────────────────────────────────────────── */
.panel {
  background:rgba(6,8,16,0.7);
  border:1px solid var(--border);
  border-left:3px solid var(--label);
  border-radius:6px;
  padding:1.1rem 1.2rem;
  position:relative;
}
.panel::before {
  content:'';
  position:absolute; top:0; left:0;
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:.3;
}
.panel::after {
  content:'';
  position:absolute; inset:0;
  border-radius:6px;
  box-shadow:0 0 18px var(--glow-c), inset 0 0 8px rgba(0,212,255,.06);
  pointer-events:none;
  animation:glow-border 5s ease-in-out infinite;
}
.panel--ok   { border-left-color:var(--green); }
.panel--crit { border-left-color:var(--red);   }
.panel--full { grid-column:span 4; }
@media (max-width:900px) { .panel--full { grid-column:span 1 } }
.panel--info {
  border-left-color:rgba(0,212,255,.35);
  background:rgba(6,8,16,0.52);
}
.dns-info-list {
  list-style:none; display:flex; flex-direction:column; gap:.52rem;
  margin-top:.15rem;
}
.dil-row {
  display:flex; justify-content:space-between; align-items:baseline; gap:.4rem;
}
.dil-key {
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--label); white-space:nowrap; flex-shrink:0;
}
.dil-val {
  font-size:.78rem; color:var(--text); font-family:var(--font-mono);
  text-align:right; word-break:break-all;
}

.panel__title {
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--label); margin-bottom:.9rem;
  font-family:var(--font-ui);
  border-bottom:1px solid var(--border);
  padding-bottom:.5rem;
  width:100%;
}

/* ── Data rows ───────────────────────────────────────────────────────────── */
.data-row {
  display:flex; align-items:baseline; justify-content:space-between;
  margin:.55rem 0;
  gap:.5rem;
}
.data-label {
  font-size:.85rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--label); white-space:nowrap; flex-shrink:0;
  display:flex; align-items:center; gap:.35rem;
}
@media (max-width:480px) {
  .data-label { max-width:55%; white-space:normal; word-break:break-word; }
}
.data-val {
  font-size:.92rem; color:var(--text);
  display:flex; align-items:center; gap:.45rem;
  text-align:right;
}
.data-val--hero {
  font-size:.92rem; font-weight:100;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.data-val--mono {
  font-size:.75rem; color:var(--text);
  letter-spacing:.04em; word-break:break-all;
}
.data-val--pqc {
  font-size:.82rem; color:#7fdfff;
  letter-spacing:.06em;
}
.data-val--peers { font-size:0.96rem; font-weight:100; color:var(--cyan); }
.data-row--metrics { align-items:flex-end; margin-bottom:.4rem; }
.req-val-wrap { display:flex; align-items:baseline; gap:.5rem; }
.dns-zone-row {
  background:rgba(0,212,255,.04);
  border-radius:3px;
  padding:.25rem .4rem;
  margin:.1rem -.4rem;
  border-left:2px solid rgba(0,212,255,.25);
}
.dns-zone-val {
  font-family:var(--font-mono); font-size:.78rem;
  color:var(--cyan); letter-spacing:.06em;
  text-align:right; word-break:break-all;
}

/* ── LED ─────────────────────────────────────────────────────────────────── */
.led {
  width:14px; height:14px; border-radius:50%;
  display:inline-block; flex-shrink:0;
}
.led--ok   { background:var(--green);  color:var(--green);
              box-shadow:0 0 6px var(--green);
              animation:pulse 2s ease-in-out infinite }
.led--warn { background:var(--orange); color:var(--orange);
              box-shadow:0 0 6px var(--orange);
              animation:pulse 1s ease-in-out infinite }
.led--crit { background:var(--red);    color:var(--red);
              box-shadow:0 0 6px var(--red);
              animation:pulse .5s ease-in-out infinite }
.led--off  { background:var(--border); color:var(--label); opacity:.6 }

/* ── Role badge Raft ─────────────────────────────────────────────────────── */
.role-badge {
  display:inline-block;
  padding:.2rem .7rem;
  border-radius:3px;
  font-size:0.98rem; font-weight:200; letter-spacing:.1em;
  text-transform:uppercase;
}
.role-badge--leader {
  color:var(--cyan); border:1px solid var(--cyan);
  position:relative;
}
.role-badge--leader::after {
  content:'';
  position:absolute; inset:-2px;
  border-radius:3px;
  box-shadow:0 0 10px var(--cyan), 0 0 20px rgba(0,212,255,.4);
  pointer-events:none;
  animation:leader-glow 2s ease-in-out infinite;
}
.role-badge--follower {
  color:var(--label); border:1px solid var(--border);
}

/* ── Speedometer ─────────────────────────────────────────────────────────── */
.spd-wrap { display:flex; flex-direction:column; align-items:center; }
.speedometer {
  width:100%; max-width:210px; display:block; margin:0 auto; overflow:visible;
}
.spd-track { fill:none; stroke:#0d1f35; stroke-width:14; stroke-linecap:round; }
.spd-fill {
  fill:none; stroke:url(#spdGrad); stroke-width:10; stroke-linecap:round;
  stroke-dasharray:392.7 392.7;
  stroke-dashoffset:392.7;
  transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 0 4px var(--cyan));
}
.spd-tick       { stroke:var(--label); stroke-width:2;   stroke-linecap:round; }
.spd-tick--minor { stroke:#1a2a40;    stroke-width:1.5; stroke-linecap:round; }
.spd-tick-lbl   { font-size:7px; fill:var(--label); font-family:var(--font-mono); }
.spd-needle      { stroke:rgba(255,255,255,.9); stroke-width:2.5; stroke-linecap:round; }
.spd-needle-tail { stroke:rgba(255,255,255,.3); stroke-width:1.5; stroke-linecap:round; }
.spd-pivot       { fill:#0a0e1a; stroke:var(--cyan); stroke-width:2; }
.spd-pivot-inner { fill:var(--cyan); }
.spd-pct {
  font-size:22px; font-weight:700; font-family:var(--font-mono);
  text-anchor:middle; fill:var(--cyan);
  transition:fill .4s ease;
}
.spd-label { font-size:6px; text-anchor:middle; fill:var(--label); letter-spacing:.2em; }
#needle-grp {
  transform-box:view-box; transform-origin:100px 90px;
  transform:rotate(-150deg);
  transition:transform 1s cubic-bezier(.4,0,.2,1);
}

/* ── Sparkline ───────────────────────────────────────────────────────────── */
.sparkline-wrap { width:100%; overflow:hidden; margin-top:.6rem; }
.sparkline       { width:100%; height:80px; display:block; }
.sparkline__bg   { fill:rgba(0,212,255,0.04); }
.sparkline__line {
  fill:none; stroke:var(--cyan); stroke-width:2;
  filter:drop-shadow(0 0 4px var(--cyan));
  vector-effect:non-scaling-stroke;
}
.sparkline__area { fill:url(#sparkGrad); opacity:.3; }
.sparkline__label {
  font-size:.68rem; color:var(--label);
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:.3rem;
}
.req-unit {
  font-size:.88rem; color:var(--label);
  align-self:flex-end; margin-bottom:.4rem;
}

/* ── Journal système — scroll ────────────────────────────────────────────── */
.log-strip {
  grid-column:span 4;
  background:rgba(6,8,16,0.8);
  border:1px solid var(--border);
  border-left:3px solid var(--cyan);
  border-radius:6px;
  padding:.9rem 1.1rem;
  height:300px;
  display:flex; flex-direction:column;
}
@media (max-width:900px) { .log-strip { grid-column:span 1 } }
.log-strip__title {
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--label); margin-bottom:.6rem; flex-shrink:0;
  font-family:var(--font-ui);
  border-bottom:1px solid var(--border); padding-bottom:.4rem;
}
.log-strip__body {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
}
.log-strip__body::-webkit-scrollbar        { width:5px; }
.log-strip__body::-webkit-scrollbar-track  { background:var(--bg2); border-radius:3px; }
.log-strip__body::-webkit-scrollbar-thumb  { background:var(--border); border-radius:3px; }
.log-strip__body::-webkit-scrollbar-thumb:hover { background:var(--cyan); }
.log-entry {
  font-size:.78rem; color:var(--label);
  padding:.2rem .5rem;
  animation:fade-in .3s ease;
  border-left:2px solid transparent;
  margin:.1rem 0;
  border-radius:2px;
}
.log-entry time { color:var(--text); }
.log-entry--ok   { border-left-color:var(--green);  background:rgba(57,255,20,.04); }
.log-entry--warn { border-left-color:var(--orange); background:rgba(255,107,53,.04); }
.log-entry--err  { border-left-color:var(--red);    background:rgba(255,34,68,.06); }

/* ── Offline banner ──────────────────────────────────────────────────────── */
#offline-banner {
  display:none;
  position:fixed; bottom:1.2rem; right:1.2rem;
  background:rgba(255,34,68,.12);
  border:1px solid var(--red);
  color:var(--red);
  padding:.55rem 1.1rem;
  border-radius:4px;
  font-size:.78rem;
  z-index:100;
  animation:fade-in .3s ease;
}

/* ── Binary A section — 3 panneaux + composants ──────────────────────────── */
.ba-section {
  grid-column:span 4;
  background:rgba(6,8,16,0.8);
  border:1px solid var(--border);
  border-left:3px solid var(--cyan);
  border-radius:6px;
  padding:.9rem 1.1rem 1.2rem;
}
@media (max-width:900px) { .ba-section { grid-column:span 1 } }
.ba-section--crit { border-left-color:var(--red); }
.ba-header {
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:.9rem;
  font-family:var(--font-ui);
  border-bottom:1px solid var(--border); padding-bottom:.5rem;
}
.ba-panels {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.9rem;
  margin-bottom:.9rem;
}
@media (max-width:900px) { .ba-panels { display:flex; flex-direction:column; } }
.ba-panel {
  background:rgba(13,31,53,0.5);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.8rem .9rem;
}
.ba-panel__title {
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--label); margin-bottom:.7rem;
  font-family:var(--font-ui);
  border-bottom:1px solid var(--border); padding-bottom:.35rem;
}
.ba-data-val {
  font-size:0.90rem; color:#ff5c4b;
  font-weight:100; font-variant-numeric:tabular-nums;
}
#ba-panel-req { grid-column:span 3; }
.ba-composants-title {
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--label); margin-bottom:.5rem;
  font-family:var(--font-ui);
}
.ba-composants-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.4rem .6rem;
}
@media (max-width:768px) { .ba-composants-grid { grid-template-columns:repeat(2, 1fr) } }
@media (max-width:600px) { .ba-composants-grid { grid-template-columns:1fr } }
@media (max-width:400px) { .ba-composants-grid { grid-template-columns:1fr } }
.ba-comp {
  display:flex; align-items:center; gap:.4rem;
  font-size:.78rem; color:var(--text);
}

/* ── RAM Gauge — fighter jet VU meter ────────────────────────────────────── */
.ram-track { fill:none; stroke:#0a1628; stroke-width:14; stroke-linecap:round; }
.ram-seg {
  fill:none; stroke-width:10; stroke-linecap:butt;
  opacity:.15; transition:opacity .25s ease, filter .25s ease;
}
.ram-seg.lit { opacity:1; }
.ram-seg--g { stroke:#39ff14; }
.ram-seg--g.lit { filter:url(#ramGlowG); }
.ram-seg--o { stroke:#ff6b35; }
.ram-seg--o.lit { filter:url(#ramGlowO); }
.ram-seg--r { stroke:#ff2244; }
.ram-seg--r.lit { filter:url(#ramGlowR); }
.ram-ring-outer {
  fill:none; stroke:var(--cyan); stroke-width:.9;
  stroke-dasharray:3 6.27; opacity:.3;
  animation:spin-slow 22s linear infinite;
  transform-box:view-box; transform-origin:100px 90px;
}
.ram-ring-inner {
  fill:none; stroke:rgba(57,255,20,0.25); stroke-width:.7;
  stroke-dasharray:2 4.14;
  animation:spin-slow 35s linear infinite reverse;
  transform-box:view-box; transform-origin:100px 90px;
}
.ram-pct {
  font-size:22px; font-weight:700; font-family:var(--font-mono);
  text-anchor:middle; fill:var(--green);
  transition:fill .4s ease;
}
.ram-label { font-size:6px; text-anchor:middle; fill:var(--label); letter-spacing:.2em; }
.ram-pivot { fill:#0a0e1a; stroke:#39ff14; stroke-width:1.5; }
.ram-pivot-inner { fill:#39ff14; }
.ram-danger { animation:danger-pulse .45s ease-in-out infinite; }

/* ── Bloc description produit ────────────────────────────────────────────── */
.product-desc {
  grid-column:span 4;
  display:flex;
  align-items:flex-start;
  gap:1.4rem;
  padding:1.4rem 1.8rem;
  background:linear-gradient(135deg,rgba(0,8,20,0.97) 0%,rgba(0,20,40,0.92) 100%);
  border:1px solid rgba(0,212,255,.22);
  border-left:3px solid var(--accent);
  border-radius:6px;
  position:relative;
  overflow:hidden;
}
.product-desc::before {
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    110deg,
    transparent,
    transparent 28px,
    rgba(0,212,255,.03) 28px,
    rgba(0,212,255,.03) 29px
  );
  pointer-events:none;
}
.product-desc__icon {
  font-size:1.8rem;
  color:var(--accent);
  opacity:.7;
  line-height:1;
  flex-shrink:0;
  margin-top:.15rem;
  text-shadow:0 0 12px rgba(0,212,255,.6);
}
.product-desc__body {
  display:flex;
  flex-direction:column;
  gap:.55rem;
  min-width:0;
  flex:1;
}
.product-desc__line {
  margin:0;
  font-size:.78rem;
  color:#8db8d0;
  line-height:1.6;
  letter-spacing:.01em;
}
.product-desc__accent {
  color:var(--accent);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.72rem;
}
.product-desc__kw {
  color:#00d4ff;
  font-weight:600;
}
.product-desc__tagline {
  color:#6a90a8;
  font-style:italic;
  font-size:.75rem;
  border-top:1px solid rgba(0,212,255,.1);
  padding-top:.45rem;
  margin-top:.1rem;
}
@media (max-width:900px) { .product-desc { grid-column:span 1; flex-direction:column } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  grid-column:span 4;
  background:rgba(6,8,16,0.85);
  border:1px solid var(--border);
  border-top:2px solid rgba(0,212,255,.2);
  border-radius:6px;
  padding:1.1rem 1.4rem;
  margin-top:.4rem;
}
@media (max-width:900px) { .footer { grid-column:span 1 } }
.social-block-title {
  font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--label); margin-bottom:.8rem;
  font-family:var(--font-ui);
  border-bottom:1px solid var(--border); padding-bottom:.35rem;
}
.social-cards {
  display:flex; gap:.8rem; flex-wrap:wrap;
}
.social-card {
  display:flex; align-items:center; gap:.65rem;
  background:rgba(0,212,255,.05);
  border:1px solid var(--border);
  border-radius:5px;
  padding:.55rem .9rem;
  text-decoration:none;
  color:var(--text);
  transition:border-color .2s, background .2s;
  flex:1; min-width:160px;
}
.social-card:hover {
  border-color:var(--cyan);
  background:rgba(0,212,255,.1);
}
.social-card-icon {
  width:24px; height:24px; flex-shrink:0;
  color:var(--label);
  display:flex; align-items:center; justify-content:center;
}
.social-card:hover .social-card-icon { color:var(--cyan); }
.social-card-icon svg { width:20px; height:20px; }
.social-card-name {
  font-size:.82rem; font-weight:600; color:var(--text);
  font-family:var(--font-ui); letter-spacing:.04em;
}
.social-card-desc {
  font-size:.68rem; color:var(--label);
  font-family:var(--font-ui); margin-top:.1rem;
}
.footer-copy {
  margin-top:.75rem;
  font-size:.62rem; color:var(--label);
  text-align:right; letter-spacing:.1em;
  font-family:var(--font-ui);
  border-top:1px solid var(--border); padding-top:.4rem;
}
/* ── Responsive compact — padding + journal ──────────────────────────────── */
@media (max-width:480px) {
  .dashboard { padding:0 .7rem; gap:.8rem; }
  .panel     { padding:.85rem .9rem; }
  .ba-section { padding:.7rem .85rem 1rem; }
  .log-strip  { height:200px; }
}

/* ── Correctif A3 — CLS : hauteur minimale grille composants Binary A ─────── */
#ba-composants { min-height: 5rem; }

/* ── Navigation principale A6 — fighter jet ─────────────────────────────── */
.nav-main {
  background: rgba(6,8,16,0.92);
  border-bottom: 2px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-main::-webkit-scrollbar { display: none; }

.nav-list {
  display: flex;
  align-items: stretch;
  padding: 0 1.8rem;
  list-style: none;
  white-space: nowrap;
  gap: 0;
}

.nav-item {
  display: flex;
  align-items: center;
}

.nav-link {
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem 1.1rem;
  font-size: .7rem;
  font-family: var(--font-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--label);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .2s, border-color .2s, text-shadow .2s;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--cyan);
  border-bottom-color: rgba(0,212,255,.5);
}

.nav-link--active {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
  text-shadow: 0 0 10px rgba(0,212,255,.4);
}

.nav-link--locked {
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem 1.1rem;
  font-size: .7rem;
  font-family: var(--font-ui);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--border);
  opacity: .55;
  cursor: not-allowed;
  white-space: nowrap;
  margin-bottom: -2px;
}

.nav-led {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-led--ok  { background: var(--green);
                box-shadow: 0 0 4px var(--green); }
.nav-led--off { background: var(--border); }

.nav-sep {
  width: 1px; height: 1rem;
  background: var(--border);
  margin: 0 .2rem;
  flex-shrink: 0;
  align-self: center;
}

.nav-phase {
  font-size: .56rem;
  padding: .08rem .3rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--border);
  letter-spacing: .08em;
  font-family: var(--font-mono);
}

@media (max-width:640px) {
  .nav-list { padding: 0 1rem; }
  .nav-link,
  .nav-link--locked { padding: .5rem .8rem; font-size: .65rem; letter-spacing: .12em; }
}