/* ============================================
   EChipHub Lab Access — shared design system
   Theme: silicon / PCB — graphite surfaces,
   copper-trace accent, mono labels for a
   fabrication-drawing feel.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
  --bg: #10141a;
  --surface: #161b23;
  --surface-2: #1c2330;
  --line: rgba(255, 255, 255, 0.09);
  --ink: #eef1f5;
  --muted: #8a93a4;
  --accent: #c98a4e;
  --accent-soft: rgba(201, 138, 78, 0.14);
  --good: #3f9d72;
  --good-soft: rgba(63, 157, 114, 0.14);
  --bad: #d9695f;
  --bad-soft: rgba(217, 105, 95, 0.14);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(201,138,78,0.06), transparent 40%),
    var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, "Segoe UI", sans-serif;
  display: flex;
  justify-content: center;
  padding: 56px 16px;
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

h1, h2 {
  font-family: 'Space Grotesk', sans-serif;
  margin: 0;
}

/* -------- chip-pin corner accents -------- */
.chip-card {
  position: relative;
}
.chip-card::before,
.chip-card::after,
.chip-card .pin-br,
.chip-card .pin-bl {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--line);
}
.chip-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.chip-card::after  { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.chip-card .pin-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.chip-card .pin-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* -------- layout shells -------- */
.page {
  width: 100%;
  max-width: 920px;
}
.card {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px;
}

/* -------- form elements -------- */
label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 20px 0 8px;
}
input[type="text"], input[type="tel"], input[type="file"] {
  width: 100%;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}
input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

button, a.btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  margin-top: 26px;
  padding: 13px;
  background: var(--accent);
  color: #14100b;
  border: none;
  border-radius: 4px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
button:hover, a.btn:hover { filter: brightness(1.08); }

a.btn.success {
  background: var(--good);
  color: #0c1a13;
}

a.link-back {
  display: inline-block;
  margin-top: 22px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
}
a.link-back:hover { color: var(--ink); }

/* -------- status banner -------- */
.status {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 14px 16px;
  border-radius: 4px;
  margin-bottom: 24px;
  border: 1px solid transparent;
}
.status.ok   { background: var(--good-soft); color: var(--good); border-color: rgba(63,157,114,0.3); }
.status.fail { background: var(--bad-soft);  color: var(--bad);  border-color: rgba(217,105,95,0.3); }

/* -------- check list -------- */
.checks { margin: 0; padding: 0; list-style: none; }
.checks li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.checks li:last-child { border-bottom: none; }
.checks .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.checks .detail { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.mark { font-weight: 700; }
.mark.pass { color: var(--good); }
.mark.fail { color: var(--bad); }