/* ═══════════════════════════════════════════════════════════════════
   ARBA·EDGE  ·  DESIGN SYSTEM  ·  COMPONENT LAYER
   "Hangar-Grade" — aerospace operations panel × cryptographic spec sheet

   The palette, the type scale and the timing curves are NOT here any more.
   They live in assets/arba-tokens.css, which app/styles.css imports too — so
   the console a customer lands on after signing in is finally the same product
   as the page they signed in on. This file is now components only.

   The import must stay the FIRST rule in the file: CSS drops an @import that
   is preceded by any other rule, silently, and the whole sheet would then
   render with every var() unset — black on black.
   ═══════════════════════════════════════════════════════════════════ */

@import url('arba-tokens.css');

/* ── Base reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    /* hairline engineering grid */
    linear-gradient(to right, rgba(227,237,255,0.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(to bottom, rgba(227,237,255,0.035) 1px, transparent 1px) 0 0 / 56px 56px,
    /* soft atmosphere */
    radial-gradient(1100px 520px at 12% -8%, rgba(125,211,252,0.08), transparent 60%),
    radial-gradient(900px 480px at 108% 118%, rgba(248,178,75,0.06), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(125,211,252,0.28); color: #fff; }

/* ── Page-frame registration marks (corner crosshairs) ─────────── */
.frame {
  position: relative;
  min-height: 100vh;
  padding: var(--frame-pad);
}
.frame::before,
.frame::after,
.frame > .crosshair {
  content: "";
  position: fixed;
  width: 14px; height: 14px;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) center/100% 1px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) center/1px 100% no-repeat;
  opacity: .38;
}
.frame::before { top: 16px; left: 16px; }
.frame::after  { top: 16px; right: 16px; }
.frame .crosshair-bl { left: 16px;  bottom: 16px; top: auto; }
.frame .crosshair-br { right: 16px; bottom: 16px; top: auto; }

/* ── Mission-code strip (tiny metadata rail) ───────────────────── */
.mission-strip {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mission-strip .sep {
  width: 20px; height: 1px;
  background: var(--hair-3);
  display: inline-block;
}
.mission-strip .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: pulse-amber 2.4s ease-in-out infinite;
}
.mission-strip .dot.green { background: var(--green); box-shadow: 0 0 8px var(--green); animation-name: pulse-green; }
.mission-strip .dot.cyan  { background: var(--cyan);  box-shadow: 0 0 8px var(--cyan);  animation-name: pulse-cyan; }

@keyframes pulse-amber { 0%,100% { opacity:.55 } 50% { opacity:1 } }
@keyframes pulse-green { 0%,100% { opacity:.55 } 50% { opacity:1 } }
@keyframes pulse-cyan  { 0%,100% { opacity:.55 } 50% { opacity:1 } }

/* ── Section numbering (editorial / spec-doc) ──────────────────── */
.sec-num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px; background: currentColor;
  display: inline-block; opacity: .6;
}

/* ── Headings ──────────────────────────────────────────────────── */
h1, h2, h3, h4 { margin: 0; color: var(--ink); letter-spacing: -0.012em; }
h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: -0.028em;
}
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h3 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.25;
}
h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.35;
}
h1 em, h2 em { font-style: normal; color: var(--cyan); font-weight: 400; }

p { margin: 0; }

/* ── Topbar ────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--hair-2);
  background: linear-gradient(180deg, rgba(11,18,32,0.92), rgba(11,18,32,0.7));
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.brand .logo-img,
.brand img {
  height: 26px; width: auto;
  filter: drop-shadow(0 0 10px rgba(125,211,252,0.25));
}
.brand .logo-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}

.nav {
  display: flex; gap: 4px; align-items: center;
  flex-wrap: nowrap; flex-shrink: 0; min-width: fit-content;
}
.nav a, .nav button {
  position: relative;
  color: var(--ink-3);
  text-decoration: none;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease);
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
}
.nav a:hover, .nav button:hover {
  color: var(--ink);
  background: rgba(227,237,255,0.04);
}
.nav a.active {
  color: var(--ink);
  border-color: var(--hair-2);
  background: rgba(125,211,252,0.06);
}
.nav a.active::before {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 4px;
  height: 1px; background: var(--cyan); opacity: .6;
}

.nav select, .topbar .select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-sm);
  padding: 8px 30px 8px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.nav select:hover, .topbar .select:hover { border-color: var(--hair-3); color: var(--ink); }
.nav select:focus, .topbar .select:focus { outline: none; border-color: var(--cyan); }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-ghost, .btn-small, .verify-btn {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hair-2);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 140ms var(--ease-sharp),
              background 180ms var(--ease),
              border-color 180ms var(--ease),
              box-shadow 240ms var(--ease),
              color 180ms var(--ease);
  position: relative;
  overflow: hidden;
}
.btn::after, .btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  transform: translateX(-110%);
  transition: transform 600ms var(--ease);
  pointer-events: none;
}
.btn:hover::after, .btn-primary:hover::after { transform: translateX(110%); }

.btn {
  background: var(--cyan);
  color: #0a0f1c;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(125,211,252,0.15), 0 10px 30px -12px rgba(125,211,252,0.45);
}
.btn:hover:not(:disabled) {
  background: var(--cyan-2);
  border-color: var(--cyan-2);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(56,189,248,0.3), 0 14px 36px -12px rgba(56,189,248,0.65);
}
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  background: var(--amber);
  color: #1a1304;
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(248,178,75,0.18), 0 12px 34px -12px rgba(248,178,75,0.5);
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) {
  background: var(--amber-2);
  border-color: var(--amber-2);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(251,191,36,0.35), 0 18px 42px -12px rgba(251,191,36,0.7);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair-2);
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(227,237,255,0.04);
  border-color: var(--hair-3);
}

.btn-small { padding: 7px 12px; font-size: 12px; border-radius: var(--radius-xs); }

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0)) ,
    var(--bg-surface);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.03) inset,
    0 18px 40px -24px rgba(0,0,0,0.6);
}
.card--marked::before {
  content: "";
  position: absolute;
  top: -1px; left: 22px;
  width: 42px; height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

/* ── Inputs ────────────────────────────────────────────────────── */
.input, .select, input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-deep);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 200ms var(--ease);
}
.input:focus, .select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(125,211,252,0.04);
  box-shadow: 0 0 0 3px rgba(125,211,252,0.12);
}
.input::placeholder, input::placeholder, textarea::placeholder {
  color: var(--ink-4);
  font-family: var(--font-ui);
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Pills / Badges ────────────────────────────────────────────── */
.badge, .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair-2);
  background: rgba(227,237,255,0.03);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.badge .dot, .pill .dot,
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-3);
  flex-shrink: 0;
}
.pill-warn, .badge.warn {
  background: rgba(248,178,75,0.1);
  border-color: rgba(248,178,75,0.35);
  color: var(--amber);
}
.pill-ok,   .badge.ok {
  background: rgba(74,222,128,0.1);
  border-color: rgba(74,222,128,0.35);
  color: var(--green);
}
.pill-ok .dot, .badge.ok .dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.pill-warn .dot, .badge.warn .dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.pill-bad,  .badge.bad  {
  background: rgba(255,107,107,0.1);
  border-color: rgba(255,107,107,0.35);
  color: var(--red);
}
.pill-bad .dot, .badge.bad .dot { background: var(--red); box-shadow: 0 0 8px var(--red); }

/* ── Hash / mono data chips ────────────────────────────────────── */
.hash, .mono, code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  background: var(--bg-deep);
  border: 1px solid var(--hair);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  color: var(--ink-2);
  word-break: break-all;
}

/* ── Dropzone ──────────────────────────────────────────────────── */
.dropzone {
  position: relative;
  border: 1px dashed var(--hair-3);
  background:
    repeating-linear-gradient(45deg, rgba(125,211,252,0.02) 0 4px, transparent 4px 12px),
    rgba(255,255,255,0.01);
  border-radius: var(--radius);
  padding: 28px;
  min-height: 132px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; gap: 8px;
  cursor: pointer;
  color: var(--ink-2);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.dropzone:hover,
.dropzone.dz-hover {
  border-color: var(--cyan);
  background:
    repeating-linear-gradient(45deg, rgba(125,211,252,0.08) 0 4px, transparent 4px 12px),
    rgba(125,211,252,0.04);
  color: var(--ink);
}

/* ── Modal ─────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(5,8,14,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 1000;
  animation: fade-in 200ms var(--ease) both;
}
.modal {
  width: min(640px, 95vw);
  background: var(--bg-surface);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 40px 80px -20px rgba(0,0,0,0.7);
  animation: rise-in 300ms var(--ease) both;
}
.close-x, .icon-btn {
  background: transparent;
  border: 1px solid var(--hair-2);
  border-radius: 50%;
  width: 30px; height: 30px;
  color: var(--ink-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: all 160ms var(--ease);
}
.close-x:hover, .icon-btn:hover {
  color: var(--ink);
  border-color: var(--hair-3);
  background: rgba(227,237,255,0.04);
}

/* ── Tables ────────────────────────────────────────────────────── */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.table th {
  padding: 11px 12px;
  text-align: left;
  border-bottom: 1px solid var(--hair-2);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.table td {
  padding: 12px;
  border-bottom: 1px solid var(--hair);
  vertical-align: middle;
  color: var(--ink-2);
}
.table tr:hover td { background: rgba(227,237,255,0.02); color: var(--ink); }

/* ── Footer (shared layout footer) ─────────────────────────────── */
.footer {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-top: 1px solid var(--hair-2);
  background: rgba(7,11,20,0.6);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer strong {
  color: var(--ink-2);
  font-weight: 600;
}
.footer a { color: var(--ink-3); text-decoration: none; transition: color 140ms var(--ease); }
.footer a:hover { color: var(--cyan); }

/* ── Console (log output) ─────────────────────────────────────── */
.console {
  font-family: var(--font-mono);
  font-size: 12.5px;
  height: 200px;
  overflow-y: auto;
  border: 1px solid var(--hair);
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--ink-2);
  white-space: pre-wrap;
}

/* ── Live feed placeholder ─────────────────────────────────────── */
.live-wrap {
  display: flex; justify-content: center; align-items: center;
  min-height: 450px;
  border: 1px dashed var(--hair-2);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(0deg, rgba(125,211,252,0.02) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(125,211,252,0.02) 0 1px, transparent 1px 56px),
    var(--bg-deep);
  color: var(--ink-3);
}

/* ── Status backgrounds (verification results) ────────────────── */
.status-pass { border-color: rgba(74,222,128,0.4)!important; background: rgba(74,222,128,0.1)!important; color: #c7f9de!important; }
.status-fail { border-color: rgba(255,107,107,0.4)!important; background: rgba(255,107,107,0.1)!important; color: #ffd6d6!important; }
.status-warn { border-color: rgba(248,178,75,0.4)!important; background: rgba(248,178,75,0.1)!important; color: #ffe7b0!important; }

/* ── Lucide icon helpers ───────────────────────────────────────── */
.icon, [data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.75;
  vertical-align: -3px;
}
.icon-xs, [data-lucide].icon-xs { width: 12px; height: 12px; vertical-align: -2px; }
.icon-sm, [data-lucide].icon-sm { width: 14px; height: 14px; vertical-align: -2px; }
.icon-lg, [data-lucide].icon-lg { width: 20px; height: 20px; vertical-align: -4px; }
.icon-xl, [data-lucide].icon-xl { width: 28px; height: 28px; vertical-align: -6px; }
.icon-2xl, [data-lucide].icon-2xl { width: 40px; height: 40px; vertical-align: -10px; stroke-width: 1.5; }

/* Icons in buttons / labels inherit color */
.btn svg, .btn-primary svg, .btn-ghost svg,
.btn .icon, .btn-primary .icon, .btn-ghost .icon,
.step-title svg, .card-title svg, .step-title .icon, .card-title .icon {
  color: currentColor;
}

/* Status-coloured icon variants */
.icon-good, [data-lucide].icon-good { color: var(--green); }
.icon-warn, [data-lucide].icon-warn { color: var(--amber); }
.icon-bad,  [data-lucide].icon-bad  { color: var(--red); }
.icon-info, [data-lucide].icon-info { color: var(--cyan); }
.icon-muted,[data-lucide].icon-muted{ color: var(--ink-3); }

/* Pill / badge icon spacing */
.badge svg, .pill svg, .badge .icon, .pill .icon {
  width: 12px; height: 12px; vertical-align: -2px;
}

/* Spinning icon (loader) */
.icon-spin, [data-lucide].icon-spin {
  animation: icon-spin 900ms linear infinite;
}
@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

/* ── Utility ───────────────────────────────────────────────────── */
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(300px, 1fr)); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hidden { display: none !important; }
.is-disabled { opacity: .6; pointer-events: none; }
.kv { display: grid; gap: 8px; margin-top: 8px; }
.kv .k { color: var(--ink-3); margin-right: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.kv .v { font-weight: 600; }

.section-title {
  margin: 0 0 18px 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.page-title {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.step-title, .card-title {
  margin: 0 0 12px 0;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ── Motion library ────────────────────────────────────────────── */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scan {
  0%   { transform: translateY(-4%); opacity: 0; }
  12%  { opacity: .9; }
  100% { transform: translateY(104%); opacity: 0; }
}
.anim-rise { animation: rise-in 520ms var(--ease) both; }
.anim-d-1 { animation-delay: 60ms; }
.anim-d-2 { animation-delay: 140ms; }
.anim-d-3 { animation-delay: 220ms; }
.anim-d-4 { animation-delay: 300ms; }
.anim-d-5 { animation-delay: 380ms; }
.anim-d-6 { animation-delay: 460ms; }

/* ── Main layout regions ───────────────────────────────────────── */
main, .main {
  padding: 30px clamp(18px, 3vw, 40px);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
}
main#app { padding: 32px clamp(18px, 3vw, 40px); }

/* Footer stays at the bottom edge of the viewport on short pages */
footer, .footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .topbar { padding: 12px 14px; gap: 10px; }
  .nav { gap: 2px; }
  .nav a, .nav button { padding: 7px 10px; font-size: 12.5px; }
  .frame::before, .frame::after, .frame .crosshair { width: 10px; height: 10px; }
  .footer { flex-direction: column; gap: 8px; text-align: center; padding: 14px 18px; font-size: 10px; }
}

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