/* GHOST GATE — PRIVACY LAB
   A dark, quiet, technical surface. Restrained accents; the cryptography is the interface.
   Prove enough. Reveal less. */

:root {
    --ink: #0b0f0d;
    --ink-2: #111815;
    --panel: #131c17;
    --panel-2: #17231c;
    --line: #1f3327;
    --green: #29d47c;
    --green-dim: #1c8b52;
    --green-glow: rgba(41, 212, 124, 0.15);
    --text: #d8e8dd;
    --dim: #7f9a8a;
    --warn: #e0b96a;
    --bad: #e06a6a;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
}

* { box-sizing: border-box; }

/* The hidden attribute is authoritative, whatever display a class sets: without this rule a
   .badge { display:inline-flex } silently un-hides an element the JS hid with `hidden`. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    background-image: radial-gradient(1100px 520px at 50% -8%, rgba(41, 212, 124, 0.06), transparent 60%);
    overflow-x: hidden;
}

/* ---------- matrix edges: canvas-rendered, behind everything ----------
   The previous implementations failed twice: CSS-animated vertical-text columns were
   positioned outside the visible band entirely, and the canvas rewrite sized its
   strips to a hard-coded 112px while seeding every drop at slot 0 — so all columns
   stacked into one thin glyph line hugging the viewport edge, leaving the real
   gutters (≈270px each at 1727×893) empty. This version sizes each canvas to the
   actual gutter beside #lab-root (JS-measured on load/resize) and scatters drops
   across every slot, so the margins read as living, multi-column code rain.
   Paused when the tab is hidden, never started under prefers-reduced-motion,
   pointer-events none, behind #lab-root. */
#matrix-edges {
    position: fixed; inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
#matrix-edges canvas {
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 6px rgba(41, 212, 124, 0.4));
}
#matrix-edges canvas.left { left: 0; }
#matrix-edges canvas.right { right: 0; }
@media (prefers-reduced-motion: reduce) {
    #matrix-edges canvas { display: none; }
}

/* ---------- shell ---------- */
#lab-root { max-width: 1020px; margin: 0 auto; padding: 0 1.2rem 3.2rem; position: relative; z-index: 1; }

.masthead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0 0.7rem;
    flex-wrap: wrap;
}
.masthead h1 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: 0.14em;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.55rem;
    flex: 1 1 auto;
    min-width: 260px;
}
.masthead h1 .gg { color: var(--green); }
.masthead .tagline { color: var(--dim); font-size: 0.88rem; letter-spacing: 0.04em; margin-top: 0.3rem; }
.masthead nav { display: flex; gap: 0.7rem; align-items: center; }
.masthead nav a { color: var(--dim); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.05em; }
.masthead nav a:hover { color: var(--green); }

/* ---------- status strip ---------- */
.status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    margin: 0.6rem 0 0.9rem;
    background: rgba(19, 28, 23, 0.75);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    backdrop-filter: blur(4px);
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font: 0.7rem var(--mono);
    letter-spacing: 0.05em;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--dim);
    background: rgba(11, 15, 13, 0.6);
    white-space: nowrap;
    min-width: 0;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.pill .k { color: var(--dim); letter-spacing: 0.09em; }
.pill .v { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pill.ok .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.pill.ok .v { color: var(--green); }
.pill.ok { border-color: rgba(41, 212, 124, 0.35); }
.pill.warn .dot { background: var(--warn); }
.pill.warn .v { color: var(--warn); }
.pill.warn { border-color: rgba(224, 185, 106, 0.4); }
.pill.bad .dot { background: var(--bad); }
.pill.bad .v { color: var(--bad); }
.pill.bad { border-color: rgba(224, 106, 106, 0.4); }

/* ---------- view switch ---------- */
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: rgba(11, 15, 13, 0.5); }
.view-switch button {
    appearance: none; border: 0; cursor: pointer;
    background: transparent; color: var(--dim);
    font: 600 0.78rem var(--mono); letter-spacing: 0.1em;
    padding: 0.5rem 1.1rem;
    transition: color 0.15s;
}
.view-switch button[aria-selected="true"] { background: var(--green); color: var(--ink); }
.view-switch button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* ---------- dashboard grid ---------- */
.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 0.9rem;
    align-items: start;
}
.col-main, .col-side { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }

/* ---------- cards & layout ---------- */
.card {
    background: linear-gradient(180deg, var(--panel) 0%, var(--ink-2) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.05rem 1.15rem;
    margin: 0;
    position: relative;
}
.card h2 { margin: 0 0 0.25rem; font-size: 0.95rem; letter-spacing: 0.06em; font-weight: 600; }
.card h2 .n { color: var(--green); font-family: var(--mono); margin-right: 0.45rem; }
.card .sub { color: var(--dim); font-size: 0.8rem; margin: 0.2rem 0 0.7rem; line-height: 1.45; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

/* ---------- the gate target card ---------- */
.gate-target {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0.6rem 1rem;
    margin-top: 0.7rem;
    padding: 0.85rem 0.9rem;
    background: rgba(6, 9, 7, 0.55);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.gt-min { grid-column: 1; grid-row: 1 / span 2; align-self: center; border-left: 3px solid var(--green); padding-left: 0.9rem; }
.gt-min .k { color: var(--dim); font-size: 0.68rem; letter-spacing: 0.14em; }
.gt-min .v {
    font: 700 clamp(1.4rem, 3vw, 1.9rem) var(--mono);
    color: var(--green);
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gt-side { display: flex; flex-direction: column; gap: 0.55rem; }
.gt-wide { grid-column: 1 / -1; }
.gt-badges { grid-column: 1 / -1; display: flex; gap: 0.5rem; flex-wrap: wrap; }

.fact { border-left: 2px solid var(--line); padding-left: 0.7rem; min-width: 0; }
.fact .k { color: var(--dim); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; }
.fact .v {
    font: 600 0.92rem var(--mono);
    color: var(--text);
    margin-top: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.fact .v code { font: inherit; }
.gt-side .fact .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.mono-trunc code {
    display: inline-block;
    max-width: calc(100% - 5.2rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.copy-btn {
    appearance: none; cursor: pointer;
    background: transparent; color: var(--green-dim);
    border: 1px solid var(--line); border-radius: 6px;
    font: 600 0.62rem var(--mono); letter-spacing: 0.09em;
    padding: 0.2rem 0.5rem;
    flex: none;
}
.copy-btn:hover { color: var(--green); border-color: var(--green-dim); }
.copy-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }

/* ---------- badges ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font: 600 0.66rem var(--mono); letter-spacing: 0.08em;
    border: 1px solid var(--line); border-radius: 999px;
    padding: 0.22rem 0.6rem; color: var(--dim);
    white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.badge.ok { color: var(--green); border-color: rgba(41, 212, 124, 0.35); }
.badge.ok::before { background: var(--green); box-shadow: 0 0 5px var(--green); }
.badge.warn { color: var(--warn); border-color: rgba(224, 185, 106, 0.4); }
.badge.warn::before { background: var(--warn); }
.badge.bad { color: var(--bad); border-color: rgba(224, 106, 106, 0.4); }
.badge.bad::before { background: var(--bad); }

/* ---------- buttons & controls ---------- */
button.cta, button.ghost {
    appearance: none; cursor: pointer; border-radius: var(--radius-sm);
    font: 600 0.84rem var(--mono); letter-spacing: 0.06em;
    padding: 0.62rem 1.15rem; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
button.cta { background: var(--green); color: var(--ink); border: 1px solid var(--green); }
button.cta:hover:not(:disabled) { background: #3ee790; box-shadow: 0 0 14px rgba(41, 212, 124, 0.25); }
button.cta:disabled, button.ghost:disabled {
    background: var(--panel-2); color: var(--dim); border-color: var(--line);
    cursor: not-allowed; opacity: 0.75; box-shadow: none;
}
button.ghost { background: transparent; color: var(--dim); border: 1px solid var(--line); }
button.ghost:hover:not(:disabled) { color: var(--green); border-color: var(--green-dim); }
button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

select, input[type="text"] {
    background: var(--ink); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    font: 0.88rem var(--mono); padding: 0.55rem 0.75rem; width: 100%;
}
select:focus, input:focus { outline: none; border-color: var(--green-dim); }
select { text-overflow: ellipsis; }

/* ---------- wallet pill note ---------- */
.wallet-pill {
    margin: 0.65rem 0 0;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    font: 0.78rem var(--mono);
    color: var(--dim);
    line-height: 1.5;
    min-height: 2.2rem;
}
.wallet-pill.ok { color: var(--green); border-color: rgba(41, 212, 124, 0.35); background: rgba(41, 212, 124, 0.05); }
.wallet-pill.warn { color: var(--warn); border-color: rgba(224, 185, 106, 0.4); background: rgba(224, 185, 106, 0.05); }
.wallet-pill.bad { color: var(--bad); border-color: rgba(224, 106, 106, 0.4); background: rgba(224, 106, 106, 0.05); }

/* ---------- connect-wallet ceremony: connection only, never an authorization ---------- */
.wallet-connect { margin-top: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.wallet-detail {
    margin-top: 0.65rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.85rem;
    display: grid;
    gap: 0.45rem;
    background: rgba(0, 0, 0, 0.25);
}
.wallet-detail[hidden] { display: none; }
.wd-row { display: grid; grid-template-columns: 7.4rem 1fr; gap: 0.6rem; align-items: baseline; }
.wd-row .k { font: 600 0.62rem var(--mono); letter-spacing: 0.14em; color: var(--dim); }
.wd-row .v { font-size: 0.8rem; line-height: 1.5; word-break: break-all; }
.wd-row .v.mono { font: 0.74rem var(--mono); }
.wd-row.ok .v { color: var(--green); }
.wd-row.warn .v { color: var(--warn); }
.wd-row.bad .v { color: var(--bad); }

/* ---------- steps head + actions ---------- */
.steps-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.steps-head h2 { margin: 0.1rem 0 0.2rem; }
.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------- resume row (credential gates) ---------- */
.resume-row { display: flex; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; align-items: center; }
.resume-row[hidden] { display: none; }
.resume-row .resume-input {
    flex: 1 1 20rem; min-width: 0;
    font-family: var(--mono); font-size: 0.78rem;
    color: var(--text); background: var(--ink-2);
    border: 1px solid rgba(41, 212, 124, 0.25); border-radius: 6px;
    padding: 0.55rem 0.7rem;
}
.resume-row .resume-input:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.resume-row .resume-input::placeholder { color: rgba(232, 255, 236, 0.35); }

/* ---------- the step rail (Simple view) ---------- */
.steps { list-style: none; margin: 0.5rem 0 0; padding: 0; counter-reset: step; }
.steps li {
    counter-increment: step;
    display: grid; grid-template-columns: 1.8rem 1fr; gap: 0.8rem;
    align-items: start; padding: 0.5rem 0;
    border-top: 1px solid var(--line);
    color: var(--dim);
}
.steps li::before {
    content: counter(step);
    font-family: var(--mono); font-size: 0.75rem;
    width: 1.7rem; height: 1.7rem; line-height: 1.7rem; text-align: center;
    border: 1px solid var(--line); border-radius: 50%;
    color: var(--dim);
}
.steps li.active { color: var(--text); }
.steps li.active::before { border-color: var(--green); color: var(--green); box-shadow: 0 0 0 3px var(--green-glow); }
.steps li.done { color: var(--dim); }
.steps li.done::before { background: var(--green); border-color: var(--green); color: var(--ink); content: "✓"; }
.steps .step-title { font-weight: 600; font-size: 0.88rem; }
.steps .step-note { font-size: 0.76rem; color: var(--dim); margin-top: 0.1rem; line-height: 1.45; }

details.explain { margin-top: 0.35rem; }
details.explain summary {
    cursor: pointer; color: var(--green-dim); font-size: 0.74rem;
    letter-spacing: 0.06em; list-style: none;
}
details.explain summary::before { content: "+ "; }
details.explain[open] summary::before { content: "– "; }
details.explain p { color: var(--dim); font-size: 0.8rem; line-height: 1.5; margin: 0.4rem 0 0; }

/* ---------- outcome ---------- */
.outcome { border-radius: var(--radius-sm); padding: 0.9rem 1rem; margin-top: 0.8rem; border: 1px solid var(--line); }
.outcome.granted { border-color: var(--green-dim); background: rgba(41, 212, 124, 0.06); }
.outcome.denied { border-color: #5a2a2a; background: rgba(224, 106, 106, 0.05); }
.outcome .verdict { font: 700 1rem var(--mono); letter-spacing: 0.1em; }
.outcome.granted .verdict { color: var(--green); }
.outcome.denied .verdict { color: var(--bad); }
.outcome.verified { border-color: var(--green-dim); background: rgba(41, 212, 124, 0.06); }
.outcome.verified .verdict { color: var(--green); }
.outcome .why { color: var(--dim); margin-top: 0.4rem; font-size: 0.85rem; line-height: 1.5; }
.proof-output { display: flex; align-items: center; gap: 0.55rem; min-width: 0; margin-top: 0.65rem; color: var(--dim); font: 0.72rem/1.45 var(--mono); }
.proof-output .k { color: var(--green-dim); letter-spacing: 0.06em; flex: none; }
.proof-output code { min-width: 0; overflow-wrap: anywhere; color: var(--text); }

/* ---------- the terminal (Technical view) ---------- */
.technical-facts {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.32rem 0.85rem;
    margin: 0 0 0.85rem; padding: 0.75rem 0.85rem; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.18); font: 0.72rem/1.45 var(--mono);
}
.technical-facts dt { color: var(--green-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.technical-facts dd { margin: 0; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.terminal {
    background: #060907; border: 1px solid var(--line); border-radius: var(--radius);
    font-family: var(--mono); font-size: 0.76rem; line-height: 1.5;
    display: flex; flex-direction: column; height: 430px;
}
.terminal-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--line);
    color: var(--dim); font-size: 0.7rem; letter-spacing: 0.08em;
    flex-wrap: wrap;
}
.terminal-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.terminal-bar .spacer { flex: 1; }
.terminal-bar button { background: transparent; border: 1px solid var(--line); color: var(--dim); border-radius: 6px; font: inherit; padding: 0.2rem 0.55rem; cursor: pointer; }
.terminal-bar button:hover { color: var(--green); border-color: var(--green-dim); }
.terminal-tools { display: flex; gap: 0.6rem; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--line); }
.terminal-tools input[type="text"] { font-size: 0.76rem; padding: 0.4rem 0.55rem; }
.terminal-log { flex: 1; overflow-y: auto; padding: 0.6rem 0.85rem; scroll-behavior: smooth; }
.terminal-log .ev { display: grid; grid-template-columns: 3rem 5.4rem 5.4rem 1fr; gap: 0.65rem; padding: 0.24rem 0; border-bottom: 1px dotted rgba(31, 51, 39, 0.5); }
.terminal-log .ev:last-child { border-bottom: 0; }
.terminal-log .seq { color: var(--dim); }
.terminal-log .ts { color: var(--dim); }
.terminal-log .src { color: var(--green-dim); text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; }
.terminal-log .msg { color: var(--text); }
.terminal-log .ev.error .src, .terminal-log .ev.error .msg { color: var(--bad); }
.terminal-log .ev.notice .src { color: var(--warn); }
.terminal-log .code { color: var(--green); }
.terminal-json { grid-column: 1 / -1; color: var(--dim); padding: 0.25rem 0 0.15rem 9rem; white-space: pre-wrap; word-break: break-all; }
.sim-banner {
    background: rgba(224, 185, 106, 0.08); border: 1px solid var(--warn); color: var(--warn);
    border-radius: var(--radius-sm); padding: 0.45rem 0.75rem; font-size: 0.76rem; letter-spacing: 0.06em; margin: 0 0 0.65rem;
}

/* the honest empty state: real categories, no fabricated logs */
.terminal-empty {
    color: var(--dim);
    padding: 1.4rem 0.4rem 1rem;
    font-style: normal;
    line-height: 1.6;
    text-align: center;
}
.terminal-empty .headline { color: var(--text); font-weight: 600; }
.terminal-empty .caret::after { content: "▌"; animation: blink 1s steps(1) infinite; color: var(--green); }
.terminal-empty .cats {
    margin: 1.1rem auto 0;
    max-width: 560px;
    text-align: left;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    opacity: 0.55;
}
.terminal-empty .cats .cat {
    display: grid;
    grid-template-columns: 7.4rem 1fr;
    gap: 0.7rem;
    padding: 0.22rem 0;
    border-top: 1px dotted rgba(31, 51, 39, 0.6);
    font-size: 0.72rem;
}
.terminal-empty .cats .cat:first-child { border-top: 0; }
.terminal-empty .cats .src { color: var(--green-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.terminal-empty .cats .note2 { color: var(--dim); }
.terminal-empty .cats-title { display: block; margin-top: 0.9rem; font-size: 0.68rem; letter-spacing: 0.09em; color: var(--dim); }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- X-Ray ---------- */
.xray .learns li, .xray .private li {
    list-style: none; padding: 0.45rem 0 0.45rem 1.4rem; position: relative;
    border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--text);
}
.xray .learns li::before { content: "◉"; position: absolute; left: 0; color: var(--green); }
.xray .private li::before { content: "✕"; position: absolute; left: 0; color: var(--bad); }
.xray .learns li .meta, .xray .private li .meta { display: block; color: var(--dim); font-size: 0.74rem; margin-top: 0.1rem; line-height: 1.4; }
.xray h3 { font-size: 0.78rem; letter-spacing: 0.09em; margin: 0.7rem 0 0.25rem; }
.xray h3:first-of-type { margin-top: 0.2rem; }
.xray .learns h3 { color: var(--green); }
.xray .private h3 { color: var(--bad); }
.xray .note { color: var(--dim); font-size: 0.76rem; line-height: 1.5; margin-top: 0.75rem; border-top: 1px solid var(--line); padding-top: 0.6rem; }
.xray .floor { color: var(--green); font-weight: 600; }

/* ---------- telegram ---------- */
.telegram.inactive { opacity: 0.62; }
.telegram.inactive .cta { pointer-events: none; }
.telegram.inactive::after {
    content: "NOT CONFIGURED";
    position: absolute; top: 0.9rem; right: 1rem;
    font: 600 0.62rem var(--mono); letter-spacing: 0.14em;
    color: var(--dim);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 0.18rem 0.55rem;
}
.tg-facts { list-style: none; margin: 0.2rem 0 0.7rem; padding: 0; color: var(--dim); font-size: 0.78rem; line-height: 1.55; }
.tg-facts li { padding: 0.3rem 0 0.3rem 1.15rem; position: relative; border-top: 1px solid var(--line); }
.tg-facts li::before { content: "→"; position: absolute; left: 0; color: var(--green-dim); }

/* ---------- mode badge ---------- */
.mode-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font: 0.7rem var(--mono); letter-spacing: 0.06em;
    border: 1px solid var(--line); border-radius: 999px; padding: 0.25rem 0.65rem; color: var(--dim);
    background: rgba(11, 15, 13, 0.5);
}
.mode-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.mode-badge.live .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
.mode-badge.sim .dot { background: var(--warn); }
.mode-badge.sim { color: var(--warn); border-color: var(--warn); }
.mode-badge.live { color: var(--green); border-color: var(--green-dim); }

/* ---------- footer ---------- */
.lab-footer { margin-top: 1.8rem; padding: 1.2rem 0 1.35rem; border-top: 1px solid var(--line); color: var(--dim); font-size: 0.76rem; line-height: 1.75; }
.lab-footer a { color: var(--green-dim); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
    .dash-grid { grid-template-columns: 1fr; }
    .col-side { order: 2; }
}
@media (max-width: 720px) {
    .gate-target { grid-template-columns: 1fr; }
    .gt-min { grid-column: 1; grid-row: auto; }
    .gt-wide { grid-column: 1; }
    .gt-badges { grid-column: 1; }
    .terminal-log .ev { grid-template-columns: 2.5rem 1fr; }
    .terminal-log .ev .ts, .terminal-log .ev .src { display: inline; }
    .terminal-json { padding-left: 3rem; }
}
@media (max-width: 600px) {
    #lab-root { padding: 0 0.7rem 3rem; }
    .masthead { padding-top: 0.9rem; gap: 0.55rem; }
    .masthead h1 { font-size: 1.1rem; }
    .masthead nav { width: 100%; justify-content: space-between; gap: 0.45rem; }
    .view-switch { flex: 1 1 auto; }
    .view-switch button { flex: 1 1 0; padding: 0.48rem 0.55rem; }
    .card { padding: 0.8rem; }
    .steps li { grid-template-columns: 1.55rem 1fr; gap: 0.6rem; }
    .terminal { height: 300px; font-size: 0.7rem; }
    .technical-facts { grid-template-columns: 1fr; gap: 0.12rem; padding: 0.65rem 0.7rem; }
    .technical-facts dd { margin-bottom: 0.35rem; }
    .status-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; padding: 0.45rem 0.5rem; margin: 0.35rem 0 0.65rem; }
    .pill { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.28rem; font-size: 0.62rem; padding: 0.28rem 0.45rem; }
    .wallet-connect { margin-top: 0.6rem; }
}
@media (max-width: 360px) {
    .masthead h1 { letter-spacing: 0.08em; }
    .actions .cta, .actions .ghost { width: 100%; }
}