/* ==========================================================================
   HMS Looking Glass — système de design « Cold Aisle »
   --------------------------------------------------------------------------
   Règles du système :
   - le rouge de marque ne sert QU'À l'identité, l'action principale et l'échec ;
   - l'acier porte la donnée, l'ambre la dégradation, le jade l'état sain ;
   - toute valeur produite par le réseau est en mono, tout ce qu'on écrit en sans ;
   - rayons : 2 px badges, 3 px contrôles, 4 px panneaux. Cercle = LED uniquement.
   ========================================================================== */

/* ---------- jetons ---------- */
:root {
    --lg-ink: #f1f4f9;
    --lg-panel: #ffffff;
    --lg-panel-2: #f5f8fc;
    --lg-panel-3: #edf2f8;
    --lg-line: #dde4ee;
    --lg-line-2: #c9d3e1;
    --lg-tx: #0c1320;
    --lg-tx-2: #4d5a70;
    --lg-tx-3: #7c8799;
    --lg-brand: #d22222;
    --lg-brand-ink: #ffffff;
    --lg-brand-soft: rgba(210, 34, 34, .09);
    --lg-steel: #2a6da8;
    --lg-steel-soft: rgba(42, 109, 168, .11);
    --lg-amber: #a76a00;
    --lg-amber-soft: rgba(167, 106, 0, .11);
    --lg-jade: #0e7a55;
    --lg-jade-soft: rgba(14, 122, 85, .10);
    --lg-dot: rgba(12, 19, 32, .055);
    --lg-shadow: 0 1px 2px rgba(12, 19, 32, .05);

    --lg-r1: 2px;
    --lg-r2: 3px;
    --lg-r3: 4px;

    --lg-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lg-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root.dark {
    --lg-ink: #0a0d14;
    --lg-panel: #101621;
    --lg-panel-2: #161d2a;
    --lg-panel-3: #1b2331;
    --lg-line: #212b3b;
    --lg-line-2: #2c3849;
    --lg-tx: #e8edf6;
    --lg-tx-2: #98a5ba;
    --lg-tx-3: #6a7688;
    --lg-brand: #f04a4a;
    --lg-brand-soft: rgba(240, 74, 74, .13);
    --lg-steel: #5ea3e0;
    --lg-steel-soft: rgba(94, 163, 224, .16);
    --lg-amber: #f0a431;
    --lg-amber-soft: rgba(240, 164, 49, .14);
    --lg-jade: #33c48c;
    --lg-jade-soft: rgba(51, 196, 140, .13);
    --lg-dot: rgba(255, 255, 255, .045);
    --lg-shadow: none;
}

/* ---------- base ---------- */
body.lg-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--lg-ink);
    color: var(--lg-tx);
    font-family: var(--lg-ui);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.lg-body *,
.lg-body *::before,
.lg-body *::after { box-sizing: border-box; }

.lg-hidden { display: none !important; }

.lg-mono { font-family: var(--lg-mono); }

.lg-num { font-variant-numeric: tabular-nums; }

.lg-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lg-body :where(button, a, input, select, [tabindex]):focus-visible {
    outline: 2px solid var(--lg-steel);
    outline-offset: 2px;
}

.lg-eyebrow {
    font-family: var(--lg-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lg-tx-3);
}

/* ---------- en-tête ---------- */
.lg-top {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 56px;
    padding: 0 18px;
    border-bottom: 1px solid var(--lg-line);
    background: var(--lg-panel);
}

.lg-top-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.lg-top-logo img {
    display: block;
    height: 26px;
    width: 130px;
    object-fit: contain;
    object-position: left;
}

:root.dark .lg-top-logo img { filter: brightness(0) invert(1); }

.lg-wordmark {
    font-family: var(--lg-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lg-tx-2);
    white-space: nowrap;
    padding-left: 14px;
    border-left: 1px solid var(--lg-line);
}

.lg-top-spacer { flex: 1; }

.lg-pops { display: flex; gap: 6px; }

.lg-pop-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r1);
    background: var(--lg-panel-2);
    font-family: var(--lg-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lg-tx-2);
    white-space: nowrap;
}

.lg-led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lg-jade);
    flex-shrink: 0;
}

.lg-led[data-state="warn"] { background: var(--lg-amber); }
.lg-led[data-state="off"] { background: var(--lg-tx-3); }

/* ---------- contrôles génériques ---------- */
.lg-icon-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: var(--lg-panel-2);
    color: var(--lg-tx-2);
    font-size: 15px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.lg-icon-btn:hover {
    border-color: var(--lg-line-2);
    color: var(--lg-tx);
}

.lg-lang-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: var(--lg-panel-2);
    color: var(--lg-tx-2);
    font-family: var(--lg-mono);
    font-size: 11px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.lg-lang-btn:hover {
    border-color: var(--lg-line-2);
    color: var(--lg-tx);
}

.lg-lang-wrap { position: relative; }

.lg-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    width: 208px;
    overflow: hidden;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r3);
    background: var(--lg-panel);
    box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .45);
    transition: opacity .15s ease, transform .15s ease;
}

.lg-lang-menu-head {
    padding: 9px 13px;
    border-bottom: 1px solid var(--lg-line);
    background: var(--lg-panel-2);
    font-family: var(--lg-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lg-tx-3);
}

.lg-lang-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 13px;
    border: 0;
    background: transparent;
    color: var(--lg-tx-2);
    font-family: var(--lg-ui);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.lg-lang-opt:hover { background: var(--lg-panel-2); color: var(--lg-tx); }
.lg-lang-opt.is-current { background: var(--lg-brand-soft); color: var(--lg-brand); font-weight: 600; }
.lg-lang-opt .lg-lang-check { margin-left: auto; color: var(--lg-brand); }
.lg-icon-btn .bx { font-size: 15px; line-height: 1; }

/* ---------- barre de commande ---------- */
.lg-cmdbar {
    padding: 14px 18px;
    border-bottom: 1px solid var(--lg-line);
    background: var(--lg-panel);
}

.lg-cmdrow {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
}

.lg-seg {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    padding: 2px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: var(--lg-panel-2);
}

.lg-seg button {
    height: 38px;
    padding: 0 13px;
    border: 0;
    border-radius: var(--lg-r1);
    background: transparent;
    color: var(--lg-tx-2);
    font-family: var(--lg-mono);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background .14s, color .14s;
}

.lg-seg button:hover:not(:disabled) { color: var(--lg-tx); }

.lg-seg button[aria-selected="true"] {
    background: var(--lg-brand);
    color: var(--lg-brand-ink);
    font-weight: 700;
}

.lg-seg button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.lg-target {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
}

.lg-target-prefix {
    position: absolute;
    left: 13px;
    font-family: var(--lg-mono);
    font-size: 12px;
    color: var(--lg-tx-3);
    pointer-events: none;
}

.lg-target input {
    width: 100%;
    height: 42px;
    padding: 0 13px 0 34px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: var(--lg-panel-2);
    color: var(--lg-tx);
    font-family: var(--lg-mono);
    font-size: 13px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.lg-target input::placeholder { color: var(--lg-tx-3); }

.lg-target input:focus {
    border-color: var(--lg-steel);
    box-shadow: 0 0 0 3px var(--lg-steel-soft);
}

.lg-target input[aria-invalid="true"] {
    border-color: var(--lg-brand);
    box-shadow: 0 0 0 3px var(--lg-brand-soft);
}

.lg-target input[readonly] { color: var(--lg-tx-3); }

.lg-run {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--lg-r2);
    background: var(--lg-brand);
    color: var(--lg-brand-ink);
    font-family: var(--lg-ui);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s;
}

.lg-run:hover:not(:disabled) { filter: brightness(1.08); }

.lg-run:disabled {
    background: var(--lg-panel-3);
    border: 1px solid var(--lg-line-2);
    color: var(--lg-tx-3);
    cursor: not-allowed;
}

.lg-run kbd {
    padding: 0 4px;
    border: 1px solid currentColor;
    border-radius: var(--lg-r1);
    font-family: var(--lg-mono);
    font-size: 10px;
    line-height: 1.5;
    opacity: .65;
}

.lg-spin {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: lg-spin .7s linear infinite;
}

@keyframes lg-spin { to { transform: rotate(360deg); } }

.lg-optrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 11px;
}

.lg-opt {
    display: flex;
    align-items: center;
    gap: 7px;
}

.lg-opt > label {
    font-family: var(--lg-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lg-tx-3);
}

.lg-mini {
    height: 27px;
    max-width: 200px;
    padding: 0 7px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: var(--lg-panel-2);
    color: var(--lg-tx);
    font-family: var(--lg-mono);
    font-size: 11.5px;
    cursor: pointer;
    outline: none;
}

.lg-mini:focus { border-color: var(--lg-steel); }

.lg-hint {
    margin: 0;
    font-size: 11.5px;
    color: var(--lg-tx-3);
}

.lg-hint[data-state="invalid"] { color: var(--lg-brand); }

.lg-optrow-end {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    font-size: 11.5px;
    color: var(--lg-tx-3);
}

.lg-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: transparent;
    color: var(--lg-tx-2);
    font-family: var(--lg-mono);
    font-size: 11px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.lg-ghost-btn:hover { border-color: var(--lg-line-2); color: var(--lg-tx); }

/* ---------- corps ---------- */
.lg-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 288px;
    align-items: start;
    flex: 1;
}

.lg-col-main { padding: 18px; min-width: 0; }
.lg-col-rail { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 18px 0; }

/* ---------- console ---------- */
.lg-console {
    overflow: hidden;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r3);
    background: var(--lg-panel);
    box-shadow: var(--lg-shadow);
}

.lg-console-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--lg-line);
    background: var(--lg-panel-2);
}

.lg-console-title {
    min-width: 0;
    font-family: var(--lg-mono);
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-console-title span { color: var(--lg-tx-3); font-weight: 400; }

.lg-console-sub {
    font-family: var(--lg-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lg-tx-3);
}

.lg-console-spacer { flex: 1; min-width: 8px; }

.lg-duration {
    font-family: var(--lg-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--lg-tx-2);
}

.lg-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px;
    border: 1px solid;
    border-radius: var(--lg-r1);
    font-family: var(--lg-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lg-status[data-state="idle"] { color: var(--lg-tx-3); border-color: var(--lg-line); background: var(--lg-panel-3); }
.lg-status[data-state="running"] { color: var(--lg-steel); border-color: var(--lg-steel); background: var(--lg-steel-soft); }
.lg-status[data-state="ok"] { color: var(--lg-jade); border-color: var(--lg-jade); background: var(--lg-jade-soft); }
.lg-status[data-state="fail"] { color: var(--lg-brand); border-color: var(--lg-brand); background: var(--lg-brand-soft); }
.lg-status[data-state="limit"] { color: var(--lg-amber); border-color: var(--lg-amber); background: var(--lg-amber-soft); }

.lg-views {
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: var(--lg-panel-3);
}

.lg-views button {
    padding: 4px 9px;
    border: 0;
    border-radius: var(--lg-r1);
    background: transparent;
    color: var(--lg-tx-3);
    font-family: var(--lg-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.lg-views button[aria-selected="true"] {
    background: var(--lg-panel);
    color: var(--lg-tx);
    box-shadow: var(--lg-shadow);
}

.lg-console-body { min-height: 290px; }

/* état de repos : une invitation, pas un vide */
.lg-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 290px;
    padding: 40px 24px;
    text-align: center;
    background-image: radial-gradient(circle, var(--lg-dot) 1px, transparent 1px);
    background-size: 22px 22px;
}

.lg-idle h2 { margin: 0; font-size: 15px; font-weight: 600; }
.lg-idle p { margin: 0; max-width: 44ch; font-size: 13px; color: var(--lg-tx-2); }

.lg-quick {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-top: 14px;
}

.lg-quick button {
    padding: 5px 10px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: var(--lg-panel);
    color: var(--lg-tx-2);
    font-family: var(--lg-mono);
    font-size: 11.5px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.lg-quick button:hover { border-color: var(--lg-steel); color: var(--lg-tx); }

/* ---------- échelle de sauts (signature) ---------- */
.lg-ladder-head,
.lg-hop {
    display: grid;
    grid-template-columns: 34px 18px minmax(0, 1fr) 132px 62px;
    gap: 0 12px;
}

.lg-ladder-head {
    padding: 9px 15px 8px 0;
    border-bottom: 1px solid var(--lg-line);
    font-family: var(--lg-mono);
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--lg-tx-3);
}

.lg-ladder-head span:nth-child(5) { text-align: right; }

.lg-ladder { padding: 6px 0 10px; }

.lg-hop {
    align-items: center;
    padding: 7px 15px 7px 0;
}

.lg-hop-n {
    font-family: var(--lg-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--lg-tx-3);
}

.lg-rail {
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
}

/* le rail déborde du padding de la rangée : le chemin doit être continu */
.lg-rail::before {
    content: "";
    position: absolute;
    top: -7px;
    bottom: -7px;
    left: 50%;
    width: 1px;
    transform: translateX(-.5px);
    background: var(--lg-line-2);
}

.lg-hop:first-child .lg-rail::before { top: 50%; }
.lg-hop:last-child .lg-rail::before { bottom: 50%; }

.lg-node {
    position: relative;
    z-index: 1;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lg-steel);
    box-shadow: 0 0 0 3px var(--lg-panel);
}

.lg-hop[data-kind="us"] .lg-node { background: var(--lg-brand); }
.lg-hop[data-kind="dst"] .lg-node { width: 9px; height: 9px; background: var(--lg-jade); }

.lg-hop[data-kind="lost"] .lg-node {
    width: 9px;
    height: 9px;
    border: 1.5px dashed var(--lg-tx-3);
    background: transparent;
    box-shadow: none;
}

.lg-hop[data-kind="lost"] .lg-rail::before {
    background: repeating-linear-gradient(to bottom, var(--lg-line-2) 0 3px, transparent 3px 7px);
}

.lg-hop-host { min-width: 0; }

.lg-hop-name {
    font-family: var(--lg-mono);
    font-size: 12.5px;
    color: var(--lg-tx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lg-hop[data-kind="lost"] .lg-hop-name { color: var(--lg-tx-3); }

.lg-hop-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 2px;
}

.lg-hop-ip {
    font-family: var(--lg-mono);
    font-size: 10.5px;
    color: var(--lg-tx-3);
}

.lg-tag {
    padding: 1px 5px;
    border-radius: var(--lg-r1);
    font-family: var(--lg-mono);
    font-size: 10px;
    white-space: nowrap;
}

.lg-tag[data-tone="steel"] { color: var(--lg-steel); background: var(--lg-steel-soft); }
.lg-tag[data-tone="brand"] { color: var(--lg-brand); background: var(--lg-brand-soft); }
.lg-tag[data-tone="amber"] { color: var(--lg-amber); background: var(--lg-amber-soft); font-weight: 700; }
.lg-tag[data-tone="jade"] { color: var(--lg-jade); background: var(--lg-jade-soft); }

.lg-bar {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: var(--lg-r1);
    background: var(--lg-panel-3);
}

.lg-bar > i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    border-radius: var(--lg-r1);
    background: var(--lg-steel);
}

/* la barre encode une latence : elle reste acier même sur nos propres sauts.
   Le rouge de marque ne sert qu'au point d'identité, jamais à une mesure. */
.lg-bar[data-degraded="1"] > i { background: var(--lg-amber); }

.lg-bar[data-void="1"] {
    background: repeating-linear-gradient(90deg, var(--lg-line) 0 4px, transparent 4px 9px);
}

.lg-ms {
    font-family: var(--lg-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--lg-tx);
}

.lg-ms small { font-size: 9.5px; color: var(--lg-tx-3); }
.lg-hop[data-kind="lost"] .lg-ms { color: var(--lg-tx-3); }

/* ---------- ping : chiffres puis bande de paquets ----------
   Le pavé ne grandit qu'au-delà de la zone morte calculée en JS (--pk : 0 → 1).
   Sur un lien stable tous les pavés sont identiques : c'est la mesure, pas un
   artefact d'échelle. L'ambre reste réservé à la dégradation (pic, perte). */
.lg-ping { padding: 18px 15px 16px; }

.lg-ping-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    padding-bottom: 18px;
}

.lg-ping-kpi { display: flex; flex-direction: column-reverse; gap: 2px; margin: 0; }

.lg-ping-kpi dd {
    margin: 0;
    font-family: var(--lg-mono);
    font-size: 27px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: var(--lg-tx);
}

.lg-ping-kpi dd small {
    font-size: 12px;
    letter-spacing: 0;
    color: var(--lg-tx-3);
}

.lg-ping-kpi dt {
    margin: 0;
    font-family: var(--lg-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lg-tx-3);
}

.lg-ping-kpi[data-tone="amber"] dd { color: var(--lg-amber); }
.lg-ping-kpi[data-tone="amber"] dd small { color: var(--lg-amber); }

.lg-ping-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    padding: 9px 0;
    border-top: 1px solid var(--lg-line);
    border-bottom: 1px solid var(--lg-line);
}

.lg-pk {
    --pk: 0;
    flex: none;
    width: calc(10px + var(--pk) * 8px);
    height: calc(10px + var(--pk) * 8px);
    border-radius: var(--lg-r1);
    background: var(--lg-steel);
}

.lg-pk[data-spike="1"] { background: var(--lg-amber); }

.lg-pk[data-lost="1"] {
    width: 14px;
    height: 14px;
    border: 1px solid var(--lg-amber);
    background: repeating-linear-gradient(45deg, var(--lg-amber) 0 1px, transparent 1px 4px);
}

.lg-ping-axis {
    display: flex;
    justify-content: space-between;
    padding-top: 7px;
    font-family: var(--lg-mono);
    font-size: 10px;
    color: var(--lg-tx-3);
}

.lg-ping-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding-top: 10px;
    font-size: 11.5px;
    color: var(--lg-tx-2);
}

.lg-ping-legend span { display: flex; align-items: center; gap: 6px; }

/* ---------- règle min · médiane · max ---------- */
.lg-ping-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--lg-line);
    font-family: var(--lg-mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lg-tx-3);
}

.lg-ping-rule b {
    font-size: 12px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lg-tx-2);
}

.lg-ping-track {
    position: relative;
    flex: 1;
    min-width: 80px;
    height: 30px;
}

.lg-ping-track::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--lg-line-2);
}

/* un tic par paquet : la densité montre le groupement des mesures */
.lg-ping-tick {
    position: absolute;
    top: 1px;
    width: 1px;
    height: 9px;
    background: var(--lg-steel);
    opacity: .45;
}

.lg-ping-median {
    position: absolute;
    top: 0;
    width: 3px;
    height: 11px;
    margin-left: -1px;
    border-radius: var(--lg-r1);
    background: var(--lg-steel);
}

.lg-ping-median-label {
    position: absolute;
    top: 15px;
    white-space: nowrap;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-transform: none;
    color: var(--lg-tx-2);
}

.lg-ping-median-label[data-align="mid"] { transform: translateX(-50%); }
.lg-ping-median-label[data-align="start"] { transform: translateX(-1px); }
.lg-ping-median-label[data-align="end"] { transform: translateX(calc(-100% + 2px)); }

/* ---------- pied de console ---------- */
.lg-console-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 11px 15px;
    border-top: 1px solid var(--lg-line);
    background: var(--lg-panel-2);
}

.lg-stat { display: flex; flex-direction: column; gap: 1px; }

.lg-stat dt {
    margin: 0;
    font-family: var(--lg-mono);
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--lg-tx-3);
}

.lg-stat dd {
    margin: 0;
    font-family: var(--lg-mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.lg-stat dd[data-tone="amber"] { color: var(--lg-amber); }
.lg-console-foot-spacer { flex: 1; }

/* ---------- sortie brute ---------- */
.lg-raw {
    margin: 0;
    min-height: 290px;
    padding: 15px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--lg-mono);
    font-size: 11.5px;
    line-height: 1.65;
    color: var(--lg-tx-2);
    white-space: pre;
    background-image: radial-gradient(circle, var(--lg-dot) 1px, transparent 1px);
    background-size: 22px 22px;
}

.lg-raw[data-wrap="1"] { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- encarts ---------- */
.lg-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 15px;
    padding: 13px 15px;
    border: 1px solid var(--lg-line);
    border-left: 3px solid var(--lg-tx-3);
    border-radius: var(--lg-r3);
    background: var(--lg-panel-2);
}

.lg-notice[data-tone="steel"] { border-left-color: var(--lg-steel); }
.lg-notice[data-tone="amber"] { border-left-color: var(--lg-amber); }
.lg-notice[data-tone="brand"] { border-left-color: var(--lg-brand); }

.lg-notice-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: var(--lg-r2);
    font-family: var(--lg-mono);
    font-size: 13px;
    font-weight: 700;
}

.lg-notice[data-tone="steel"] .lg-notice-icon { color: var(--lg-steel); background: var(--lg-steel-soft); }
.lg-notice[data-tone="amber"] .lg-notice-icon { color: var(--lg-amber); background: var(--lg-amber-soft); }
.lg-notice[data-tone="brand"] .lg-notice-icon { color: var(--lg-brand); background: var(--lg-brand-soft); }

.lg-notice h2 { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; }
.lg-notice p { margin: 0; font-size: 12.5px; color: var(--lg-tx-2); }
.lg-notice code { font-family: var(--lg-mono); font-size: 11.5px; color: var(--lg-tx); }

/* ---------- rail de contexte ---------- */
.lg-card {
    overflow: hidden;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r3);
    background: var(--lg-panel);
    box-shadow: var(--lg-shadow);
}

.lg-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 13px;
    border-bottom: 1px solid var(--lg-line);
    background: var(--lg-panel-2);
    font-family: var(--lg-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lg-tx-3);
}

.lg-card-body { padding: 11px 13px; }

.lg-ip {
    font-family: var(--lg-mono);
    font-size: 15px;
    word-break: break-all;
}

.lg-probe { padding: 10px 13px; border-bottom: 1px solid var(--lg-line); }
.lg-probe:last-child { border-bottom: 0; }

.lg-probe-head { display: flex; align-items: center; gap: 8px; }
.lg-probe-name { flex: 1; font-size: 12.5px; font-weight: 600; }

.lg-probe-transport {
    font-family: var(--lg-mono);
    font-size: 10px;
    color: var(--lg-tx-3);
}

.lg-probe-msg { margin: 5px 0 0; font-size: 11.5px; color: var(--lg-tx-3); }

.lg-caps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }

.lg-cap {
    padding: 2px 5px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r1);
    background: var(--lg-panel-2);
    font-family: var(--lg-mono);
    font-size: 9.5px;
    letter-spacing: .06em;
    color: var(--lg-tx-2);
}

.lg-cap[data-off="1"] { opacity: .5; color: var(--lg-tx-3); text-decoration: line-through; }

.lg-links { display: flex; flex-direction: column; }

.lg-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    border-bottom: 1px solid var(--lg-line);
    color: var(--lg-tx);
    font-size: 12.5px;
    text-decoration: none;
    transition: background .14s;
}

.lg-link:last-child { border-bottom: 0; }
.lg-link:hover { background: var(--lg-panel-2); }

.lg-link-meta {
    margin-left: auto;
    font-family: var(--lg-mono);
    font-size: 10px;
    color: var(--lg-tx-3);
}

/* ---------- pied de page ---------- */
.lg-foot {
    margin-top: auto;
    padding: 22px 18px 26px;
    border-top: 1px solid var(--lg-line);
}

.lg-foot-inner {
    max-width: 70ch;
    margin: 0 auto;
    text-align: center;
}

.lg-foot h2 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--lg-tx-2); }
.lg-foot p { margin: 0 0 6px; font-size: 12px; line-height: 1.6; color: var(--lg-tx-3); }
.lg-foot a { color: var(--lg-tx-2); }

/* ---------- guide BGP (modale) ---------- */
.lg-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.lg-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .2s ease;
}

.lg-modal-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 780px;
    max-height: 85vh;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r3);
    background: var(--lg-panel);
    opacity: 0;
    transform: scale(.97) translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}

.lg-modal[data-open="1"] .lg-modal-backdrop { opacity: 1; }
.lg-modal[data-open="1"] .lg-modal-panel { opacity: 1; transform: none; }

.lg-modal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 13px 15px;
    border-bottom: 1px solid var(--lg-line);
    background: var(--lg-panel-2);
}

.lg-modal-head h2 { margin: 0; font-size: 14px; font-weight: 700; }
.lg-modal-head p { margin: 2px 0 0; font-size: 11.5px; color: var(--lg-tx-3); }
.lg-modal-body { overflow-y: auto; padding: 15px; display: flex; flex-direction: column; gap: 9px; }

.lg-guide-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: var(--lg-panel-2);
}

.lg-guide-row > div { min-width: 0; }
.lg-guide-cmd { margin: 0; font-family: var(--lg-mono); font-size: 12.5px; font-weight: 700; }
.lg-guide-desc { margin: 4px 0 0; font-size: 12.5px; color: var(--lg-tx-2); }

.lg-guide-vtysh {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 6px;
    border-radius: var(--lg-r1);
    background: var(--lg-panel-3);
    font-family: var(--lg-mono);
    font-size: 11px;
    color: var(--lg-tx-3);
}

/* ==========================================================================
   BACKOFFICE — mêmes jetons, mêmes règles de couleur.
   Un statut « échec » et un bouton « Supprimer » ne portent plus le même rouge.
   ========================================================================== */
.lg-admin { padding: 22px 18px 40px; }
.lg-admin-inner { max-width: 1040px; margin: 0 auto; }

.lg-admin-nav { display: flex; gap: 3px; }

.lg-admin-nav a {
    padding: 6px 11px;
    border: 1px solid transparent;
    border-radius: var(--lg-r2);
    color: var(--lg-tx-2);
    font-size: 12.5px;
    text-decoration: none;
}

.lg-admin-nav a:hover { color: var(--lg-tx); }

.lg-admin-nav a[aria-current="page"] {
    border-color: var(--lg-line);
    background: var(--lg-panel-2);
    color: var(--lg-tx);
}

.lg-admin-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.lg-admin-head h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.lg-admin-head p { margin: 0; font-family: var(--lg-mono); font-size: 11px; color: var(--lg-tx-3); }
.lg-admin-head-spacer { flex: 1; }

.lg-back-link {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--lg-mono);
    font-size: 11px;
    color: var(--lg-tx-3);
    text-decoration: none;
}

.lg-back-link:hover { color: var(--lg-tx-2); }

.lg-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: var(--lg-panel-2);
    color: var(--lg-tx);
    font-family: var(--lg-ui);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s;
}

.lg-btn:hover { border-color: var(--lg-line-2); }

.lg-btn[data-variant="primary"] {
    border-color: transparent;
    background: var(--lg-brand);
    color: var(--lg-brand-ink);
    font-weight: 700;
}

.lg-btn[data-variant="primary"]:hover { filter: brightness(1.08); }

/* action destructive : contour, jamais un aplat rouge — le rouge plein
   reste réservé à l'action principale, et l'ambre signale le risque */
.lg-btn[data-variant="danger"] { border-color: var(--lg-amber); color: var(--lg-amber); }
.lg-btn[data-variant="danger"]:hover { background: var(--lg-amber-soft); }

.lg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.lg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.lg-table th {
    padding: 10px 14px;
    border-bottom: 1px solid var(--lg-line);
    background: var(--lg-panel-2);
    font-family: var(--lg-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    color: var(--lg-tx-3);
}

.lg-table td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--lg-line);
    color: var(--lg-tx-2);
    white-space: nowrap;
}

.lg-table tbody tr:last-child td { border-bottom: 0; }
.lg-table tbody tr:hover td { background: var(--lg-panel-2); }
.lg-table td.mono { font-family: var(--lg-mono); color: var(--lg-tx); }
.lg-table td.num { font-family: var(--lg-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--lg-tx); }
.lg-table td.dim { color: var(--lg-tx-3); }
.lg-table td.actions { text-align: right; }
.lg-table td.actions form { display: inline; }
.lg-status[data-size="sm"] { padding: 2px 6px; font-size: 9px; letter-spacing: .09em; }

.lg-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 720px;
    padding: 18px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r3);
    background: var(--lg-panel);
    box-shadow: var(--lg-shadow);
}

.lg-form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lg-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.lg-field > label {
    font-family: var(--lg-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--lg-tx-3);
}

.lg-field input,
.lg-field select {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-r2);
    background: var(--lg-panel-2);
    color: var(--lg-tx);
    font-family: var(--lg-mono);
    font-size: 12.5px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.lg-field input:focus,
.lg-field select:focus {
    border-color: var(--lg-steel);
    box-shadow: 0 0 0 3px var(--lg-steel-soft);
}

.lg-field input[readonly] { color: var(--lg-tx-3); }

.lg-checks { display: flex; flex-wrap: wrap; gap: 10px 20px; }

.lg-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--lg-tx-2);
    cursor: pointer;
}

.lg-check input { width: 15px; height: 15px; accent-color: var(--lg-brand); cursor: pointer; }

.lg-form-note {
    margin: 0;
    padding: 11px 13px;
    border: 1px solid var(--lg-line);
    border-left: 3px solid var(--lg-steel);
    border-radius: var(--lg-r2);
    background: var(--lg-panel-2);
    font-size: 12.5px;
    color: var(--lg-tx-2);
}

.lg-form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.lg-empty {
    padding: 34px 18px;
    text-align: center;
    font-size: 13px;
    color: var(--lg-tx-3);
}

.lg-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    font-family: var(--lg-mono);
    font-size: 11px;
    color: var(--lg-tx-3);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .lg-main { grid-template-columns: minmax(0, 1fr); }
    .lg-col-rail { padding: 0 18px 18px; }
}

@media (max-width: 640px) {
    .lg-wordmark, .lg-pops { display: none; }
    .lg-cmdrow { flex-direction: column; }
    .lg-seg { overflow-x: auto; }
    .lg-seg button { flex: 1; padding: 0 9px; font-size: 11.5px; }
    .lg-ladder-head, .lg-hop { grid-template-columns: 28px 16px minmax(0, 1fr) 56px; }
    .lg-hop > .lg-bar, .lg-ladder-head span:nth-child(4) { display: none; }
    .lg-col-main { padding: 14px; }
    .lg-optrow-end { margin-left: 0; }
    .lg-ping-kpis { gap: 10px 20px; }
    .lg-ping-kpi dd { font-size: 21px; }
    .lg-ping-rule { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-body *,
    .lg-body *::before,
    .lg-body *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}