:root {

  --bg: #101010;

  --bg-line: #181818;

  --panel: #151515;

  --ink: #ffffff;

  --muted: #8a8a8a;

  --accent: #00ff27;

  --accent-dark: #00cc1f;

  --accent-ink: #101010;

  --steel: #00ff27;

  --steel-bg: #102414;

  --line: #292929;

  --radius: 3px;

  --shadow: 0 1px 0 rgba(0, 0, 0, 0.35);

}

@media (prefers-reduced-motion: reduce) {

  * {
    animation: none !important;
    transition: none !important;
  }

}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {

  background:

    repeating-linear-gradient(0deg, transparent, transparent 39px, var(--bg-line) 39px, var(--bg-line) 40px),

    var(--bg);

  color: var(--ink);

  font-family: 'Inter', system-ui, sans-serif;

  min-height: 100vh;

}

a {
  color: var(--steel);
}

header.hero {

  background: var(--accent);

  color: var(--accent-ink);

  position: relative;

  overflow: hidden;

  border-bottom: 6px solid var(--accent-dark);

}

header.hero::before {

  content: "";

  position: absolute;
  inset: 0;

  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0 14px, transparent 14px 28px);

  pointer-events: none;

}

.hero-inner {

  position: relative;

  max-width: 1180px;

  margin: 0 auto;

  padding: 42px 28px 34px;

}

.hero-eyebrow {

  font-family: 'JetBrains Mono', monospace;

  font-size: 12.5px;

  letter-spacing: 0.04em;

  color: rgba(16, 16, 16, 0.8);

  margin: 0 0 6px;

}

h1.wordmark {

  font-family: 'Oswald', sans-serif;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.01em;

  font-size: clamp(2.4rem, 5vw, 3.6rem);

  margin: 0;

  line-height: 0.95;

}

.hero-sub {

  margin: 10px 0 0;

  max-width: 46ch;

  color: rgba(16, 16, 16, 0.92);

  font-size: 1rem;

}

main {

  max-width: 1180px;

  margin: 0 auto;

  padding: 30px 28px 80px;

}

.btn {

  font-family: 'Oswald', sans-serif;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.03em;

  font-size: 0.85rem;

  border: none;

  border-radius: var(--radius);

  padding: 12px 22px;

  cursor: pointer;

  background: var(--ink);

  color: var(--accent-ink);

  white-space: nowrap;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}

.btn:hover {
  background: #dcdcdc;
}

.btn.primary {
  background: var(--accent);
}

.btn.primary:hover {
  background: var(--accent-dark);
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {

  outline: 2px solid var(--steel);

  outline-offset: 2px;

}

.toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin: 0 0 18px;

  flex-wrap: wrap;

}

.count {

  font-family: 'JetBrains Mono', monospace;

  font-size: 0.85rem;

  color: var(--muted);

}

.count b {
  color: var(--ink);
}

.search {

  flex: 1 1 240px;

  max-width: 320px;

  padding: 10px 12px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--panel);

  font-family: 'Inter', sans-serif;

  font-size: 0.9rem;

  color: var(--ink);

}

.empty {

  margin-top: 20px;

  padding: 50px 20px;

  text-align: center;

  color: var(--muted);

  border: 1px dashed var(--line);

  border-radius: var(--radius);

}

.empty p {
  margin: 4px 0;
}

.empty .big {
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 1.1rem;
  color: var(--ink);
}

.grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  gap: 20px;

}

.card {

  background: var(--panel);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  display: flex;

  flex-direction: column;

  overflow: hidden;

}

.card-photo {

  aspect-ratio: 16/10;

  background:

    linear-gradient(135deg, #1c1c1c 25%, transparent 25%) -8px 0/16px 16px,

    linear-gradient(225deg, #1c1c1c 25%, transparent 25%) -8px 0/16px 16px,

    linear-gradient(315deg, #1c1c1c 25%, transparent 25%) 0 0/16px 16px,

    linear-gradient(45deg, #1c1c1c 25%, transparent 25%) 0 0/16px 16px,

    #161616;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

}

.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-photo .noimg {

  font-family: 'JetBrains Mono', monospace;

  font-size: 0.75rem;

  color: var(--muted);

  letter-spacing: 0.03em;

}

.card-body {

  padding: 16px 16px 14px;

  display: flex;

  flex-direction: column;

  gap: 8px;

  flex: 1;

}

.card-name {

  font-family: 'Oswald', sans-serif;

  font-weight: 600;

  font-size: 1.15rem;

  line-height: 1.2;

  margin: 0;

}

.card-meta {

  font-size: 0.82rem;

  color: var(--muted);

  margin: -4px 0 2px;

}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

.chip {

  font-family: 'JetBrains Mono', monospace;

  font-size: 0.72rem;

  background: var(--steel-bg);

  color: var(--steel);

  padding: 3px 8px;

  border-radius: 2px;

  white-space: nowrap;

}

details.specs {

  border-top: 1px solid var(--line);

  margin-top: 4px;

  padding-top: 8px;

}

details.specs summary {

  cursor: pointer;

  list-style: none;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-family: 'Oswald', sans-serif;

  font-size: 0.82rem;

  text-transform: uppercase;

  letter-spacing: 0.03em;

  color: var(--ink);

}

details.specs summary::-webkit-details-marker {
  display: none;
}

details.specs summary::after {

  content: "+";

  font-family: 'Inter', sans-serif;

  font-size: 1rem;

  color: var(--muted);

  transition: transform .15s ease;

}

details.specs[open] summary::after {
  transform: rotate(45deg);
}

.spec-list {

  list-style: none;

  margin: 10px 0 2px;

  padding: 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 6px 10px;

}

.spec-list li {

  font-size: 0.8rem;

  display: flex;

  justify-content: space-between;

  gap: 6px;

  border-bottom: 1px dotted var(--line);

  padding-bottom: 4px;

}

.spec-list .k {
  color: var(--muted);
}

.spec-list .v {
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
}

.card-footer {
  margin-top: auto;
  padding-top: 10px;
}

.dl-btn {
  width: 100%;
}

footer {

  text-align: center;

  color: var(--muted);

  font-size: 0.85rem;

  padding: 20px 28px 40px;

  font-family: 'JetBrains Mono', monospace;

}

/* ---------- Admin page ---------- */

.admin-wrap {

  max-width: 560px;

  margin: 60px auto;

  padding: 0 24px;

}

.panel {

  background: var(--panel);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 28px;

}

.panel h2 {

  font-family: 'Oswald', sans-serif;

  text-transform: uppercase;

  margin: 0 0 16px;

}

.field {
  margin-bottom: 16px;
}

.field label {

  display: block;

  font-size: 0.82rem;

  color: var(--muted);

  margin-bottom: 6px;

  font-family: 'JetBrains Mono', monospace;

}

.field input[type="password"],

.field input[type="file"] {

  width: 100%;

  padding: 10px 12px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: #ffffff;

  font-family: 'Inter', sans-serif;

  font-size: 0.95rem;

  color: #101010;

}

.msg {
  font-size: 0.85rem;
  margin-top: 10px;
}

.msg.err {
  color: #ff4545;
}

.msg.ok {
  color: var(--accent);
}

.mod-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding: 10px 0;

  border-bottom: 1px dotted var(--line);

  font-size: 0.9rem;

}

.mod-row .del {

  background: none;

  border: 1px solid var(--line);

  color: #ff4545;

  border-radius: var(--radius);

  padding: 5px 10px;

  cursor: pointer;

  font-size: 0.78rem;

}

.mod-row .del:hover {
  background: #241010;
}