:root {
  color-scheme: dark;
  --bg: #0f172a;
  --card: #111827;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --accent: #38bdf8;
  --border: #1f2937;
  --good: #16a34a;
  --bad: #dc2626;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { overflow-y: scroll; scrollbar-gutter: stable; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 14%, rgba(56, 189, 248, 0.12), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(59, 130, 246, 0.08), transparent 18%),
    linear-gradient(90deg, rgba(56, 189, 248, 0.04) 0 1px, transparent 1px 100%),
    linear-gradient(rgba(56, 189, 248, 0.035) 0 1px, transparent 1px 100%),
    var(--bg);
  background-size: auto, auto, 120px 120px, 120px 120px, auto;
  color: var(--text);
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}
.topbar, .page { position: relative; z-index: 1; }
.topbar { backdrop-filter: blur(10px); }
.page { width: 100%; max-width: 1720px; margin: 0 auto; padding: 20px 28px; flex: 1 0 auto; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.92;
  background:
    radial-gradient(circle at 10% 18%, rgba(56, 189, 248, 0.28), transparent 18%),
    radial-gradient(circle at 14% 24%, rgba(125, 211, 252, 0.18), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(14, 165, 233, 0.14), transparent 16%),
    linear-gradient(90deg, rgba(56, 189, 248, 0.085) 0 2px, transparent 2px 100%),
    linear-gradient(rgba(56, 189, 248, 0.07) 0 2px, transparent 2px 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cg fill='none' stroke='%2338bdf8' stroke-opacity='0.34' stroke-width='2'%3E%3Cpath d='M0 258h328l52 52h232l88-88h418'/%3E%3Cpath d='M352 0v148l72 72h182l44 44h198'/%3E%3Cpath d='M1600 488h-304l-48 48h-180l-86 86H738'/%3E%3Cpath d='M1028 900v-178l64-64h304'/%3E%3Cpath d='M118 660h226l66-66h192l42-42h204'/%3E%3Cpath d='M144 392h112l28 28h130'/%3E%3C/g%3E%3Cg fill='%239be7ff' fill-opacity='0.72'%3E%3Ccircle cx='328' cy='258' r='4'/%3E%3Ccircle cx='612' cy='310' r='4'/%3E%3Ccircle cx='1118' cy='258' r='4'/%3E%3Ccircle cx='1296' cy='488' r='4'/%3E%3Ccircle cx='982' cy='622' r='4'/%3E%3Ccircle cx='410' cy='594' r='4'/%3E%3Ccircle cx='284' cy='420' r='4'/%3E%3C/g%3E%3Cg fill='none' stroke='%237dd3fc' stroke-opacity='0.26'%3E%3Cpath d='M0 110c120 0 180-92 300-92 98 0 138 58 216 58'/%3E%3Cpath d='M0 136c156 0 196-58 286-58 76 0 122 34 180 34'/%3E%3C/g%3E%3Cg fill='none' stroke='%2348d8ff' stroke-opacity='0.24'%3E%3Cpath d='M184 0a300 300 0 0 1 0 600'/%3E%3Cpath d='M148 54a246 246 0 0 1 0 492'/%3E%3Cpath d='M110 104a196 196 0 0 1 0 392'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(8, 47, 73, 0.28), rgba(15, 23, 42, 0.88));
  background-size: auto, auto, auto, 150px 150px, 150px 150px, cover, auto;
  background-position: center, center, center, 0 0, 0 0, center, center;
}
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); background: #020617; position: sticky; top: 0; }
.topbar a { color: var(--text); text-decoration: none; margin-left: 16px; }
.brand { font-weight: 700; }
.card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(14, 165, 233, 0.16), rgba(7, 24, 54, 0.12)),
    radial-gradient(circle at 14% 18%, rgba(56, 189, 248, 0.2), transparent 20%),
    radial-gradient(circle at 84% 26%, rgba(59, 130, 246, 0.16), transparent 16%),
    linear-gradient(90deg, rgba(56, 189, 248, 0.12) 0 1px, transparent 1px 100%),
    linear-gradient(rgba(56, 189, 248, 0.09) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(17, 24, 39, 0.94), rgba(17, 24, 39, 0.88)),
    var(--card);
  background-size: auto, auto, auto, 96px 96px, 96px 96px, auto, auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(56, 189, 248, 0.08);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220' viewBox='0 0 360 220'%3E%3Cg fill='none' stroke='%2338bdf8' stroke-opacity='0.24' stroke-width='1.3'%3E%3Cpath d='M0 52H86l18 18h64l24-24h86'/%3E%3Cpath d='M110 0v44l24 24h54'/%3E%3Cpath d='M222 220v-52l22-22h92'/%3E%3Cpath d='M242 108h44l16 16h58'/%3E%3C/g%3E%3Cg fill='%239be7ff' fill-opacity='0.42'%3E%3Ccircle cx='86' cy='52' r='2.1'/%3E%3Ccircle cx='180' cy='70' r='2.1'/%3E%3Ccircle cx='278' cy='52' r='2.1'/%3E%3Ccircle cx='244' cy='168' r='2.1'/%3E%3Ccircle cx='302' cy='124' r='2.1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -12px top 10px;
  background-size: min(34vw, 420px) auto;
}
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background:
    radial-gradient(circle at 16% 14%, rgba(125, 211, 252, 0.18), transparent 12%),
    radial-gradient(circle at 86% 82%, rgba(56, 189, 248, 0.12), transparent 10%);
}
.card > * {
  position: relative;
  z-index: 1;
}
.card .card {
  background:
    linear-gradient(180deg, rgba(14, 165, 233, 0.18), rgba(8, 47, 73, 0.18)),
    radial-gradient(circle at 18% 18%, rgba(125, 211, 252, 0.16), transparent 22%),
    linear-gradient(90deg, rgba(56, 189, 248, 0.12) 0 1px, transparent 1px 100%),
    linear-gradient(rgba(56, 189, 248, 0.09) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.9)),
    var(--card);
  background-size: auto, auto, 72px 72px, 72px 72px, auto, auto;
  border-color: rgba(56, 189, 248, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(56, 189, 248, 0.08),
    0 10px 24px rgba(2, 6, 23, 0.18);
}
.card .card::before {
  opacity: 0.58;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200'%3E%3Cg fill='none' stroke='%2338bdf8' stroke-opacity='0.28' stroke-width='1.2'%3E%3Cpath d='M0 46h76l16 16h58l22-22h74'/%3E%3Cpath d='M194 200v-38l18-18h108'/%3E%3Cpath d='M96 0v34l18 18h80'/%3E%3C/g%3E%3Cg fill='%239be7ff' fill-opacity='0.5'%3E%3Ccircle cx='76' cy='46' r='2.1'/%3E%3Ccircle cx='150' cy='62' r='2.1'/%3E%3Ccircle cx='246' cy='46' r='2.1'/%3E%3Ccircle cx='212' cy='162' r='2.1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -16px bottom -6px;
  background-size: min(28vw, 260px) auto;
}
.card .card::after {
  opacity: 0.44;
  background:
    radial-gradient(circle at 16% 14%, rgba(125, 211, 252, 0.16), transparent 14%),
    radial-gradient(circle at 82% 84%, rgba(56, 189, 248, 0.16), transparent 12%);
}
.narrow { max-width: 420px; margin: 64px auto; }
.grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.row { display: flex; align-items: center; }
.gap { gap: 12px; }
.stack { display: grid; gap: 12px; }
input, button, textarea, select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: #0b1220; color: var(--text); font: inherit; }
textarea { resize: vertical; min-height: 88px; }
button { cursor: pointer; background: #082f49; }
.camera { width: 100%; max-height: 420px; border-radius: 14px; background: black; }
.hidden { display: none; }
.muted { color: var(--muted); }
.error, .success { padding: 10px 12px; border-radius: 10px; margin-bottom: 12px; }
.error { background: rgba(220,38,38,.12); color: #fca5a5; }
.success { background: rgba(22,163,74,.12); color: #86efac; }
.scan-list { display: grid; gap: 10px; }
.scan-row, .inventory-table { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: center; }
.inventory-table { grid-template-columns: 2fr 2fr 1fr 1fr 1.2fr; }
.head { font-weight: 700; color: var(--muted); }
.result-box { min-height: 220px; }
img.preview { max-width: 160px; border-radius: 12px; }
@media (max-width: 900px) { .grid.two { grid-template-columns: 1fr; } }