:root {
  color-scheme: dark;
  /* Data color palette - baby blue for data text, lime for numbers/totals
     that should pop, a dimmed blue-gray for secondary/muted text. Buttons
     keep their own semantic colors (amber/green/red) untouched. */
  --data-blue: #8ecdf5;
  --data-lime: #b6e35a;
  --data-muted: #74a0b8;
}
html { min-height:100%; }
body {
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color:#18181f; color:var(--data-blue);
}
/* A dedicated fixed, full-viewport layer for the nose-art backdrop - anchored
   to the visible screen with inset:0 rather than a height like 100vh, which
   on phones is unreliable as the browser chrome shows/hides. Kept off of
   body/background-attachment:fixed directly since that's flaky on mobile
   Safari; this plain fixed-position element sidesteps that entirely. */
.art-backdrop {
  position: fixed; inset: 0; z-index: -1;
  background-color: #18181f;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
header { position:sticky; top:0; z-index:10; }
.rivetstrip {
  height:5px; background-color:#8d9096;
  background-image:repeating-linear-gradient(90deg, #3a3a40 0px, #3a3a40 3px, transparent 3px, transparent 30px);
  opacity:0.6;
}
.chromebar {
  background-image:url("../img/panel-riveted.webp");
  background-size:cover;
  background-position:center;
  background-color:#8d9096;
  border-radius:0 0 12px 12px;
}
.chromebar-inner {
  display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  position:relative;
}
.flameline { height:4px; background:linear-gradient(90deg,#fff2b8,#ffb020,#ff5a1f,#c81e00); box-shadow:0 0 12px 0 rgba(255,90,31,0.5); }
.brand-logo { height:96px; width:auto; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.brand-name { font-weight:800; font-size:22px; letter-spacing:.3px; color:#0e0e10; text-shadow:0 1px 0 rgba(255,255,255,.35), 0 0 10px rgba(255,255,255,.25); }
.btn.nav-toggle {
  display:inline-block; margin-left:auto;
}
.nav {
  display:none;
  position:absolute; top:100%; right:16px; margin-top:8px;
  flex-direction:column; align-items:stretch; gap:6px;
  min-width:220px; max-width:calc(100vw - 32px);
  background:rgba(21,21,27,0.94); border:1px solid rgba(255,255,255,0.12); border-radius:10px;
  padding:10px; z-index:30;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
}
.nav.nav-open { display:flex; }
.nav .btn { width:100%; text-align:center; }
.wrap { max-width:1800px; margin:0 auto; padding:14px 16px; }
.grid { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.card {
  background:rgba(24,24,31,0.6); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:14px;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.muted { color:var(--data-muted); font-size:0.9em; }
a.btn, .btn, button.btn, input[type=submit].btn {
  display:inline-block; box-sizing:border-box; padding:8px 14px; border-radius:8px;
  border-style:solid; border-width:10px;
  border-image-source:url("../img/bezel-unlit.webp");
  border-image-slice:32% fill; border-image-width:1; border-image-repeat:stretch;
  color:#ffb020; text-shadow:0 0 6px rgba(255,176,32,.85), 0 0 14px rgba(255,176,32,.45);
  text-decoration:none; cursor:pointer; font-weight:700; letter-spacing:.4px; font-size:13px;
}
.btn:hover { filter:brightness(1.2); }
.btn.btn-primary { color:#3dff88; text-shadow:0 0 6px rgba(61,255,136,.85), 0 0 14px rgba(61,255,136,.45); }
.btn.btn-muted { color:#c7c9ce; text-shadow:0 0 4px rgba(199,201,206,.55); }
.btn.danger { color:#ff4d3d; text-shadow:0 0 6px rgba(255,77,61,.85), 0 0 14px rgba(255,77,61,.45); }
.btn.btn-sm { padding:4px 10px; font-size:12px; border-width:6px; }
input, select {
  background:rgba(18,18,26,0.4); border:1px solid rgba(255,255,255,0.14); color:var(--data-blue);
  border-radius:8px; padding:6px 8px;
}
input:focus, select:focus { background:rgba(18,18,26,0.6); outline:none; border-color:rgba(255,176,32,0.5); }
table { width:100%; border-collapse:collapse; }
th, td { border-bottom:1px solid #252533; padding:8px; text-align:left; vertical-align:top; }
th { color:var(--data-muted); }
.right { text-align:right; }

/* Make tables scrollable on mobile */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.main-content { padding: 16px 16px 32px; }

@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }

@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
  table { font-size: 0.85em; }
  .row { grid-template-columns: 1fr; }
  /* Compact single-row header: no wrap, small logo/wordmark, auto-width
     toggle - the whole header should be about as tall as the toggle
     button itself, not a full-size logo bar plus a full-width button
     stacked under it. */
  .chromebar-inner { flex-wrap: nowrap; padding: 8px 12px; gap: 8px; }
  .brand { min-width: 0; }
  .brand-logo { height: 28px; }
  .brand-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .btn.nav-toggle { width: auto; margin-top: 0; margin-left: auto; flex: none; }
  .nav .btn { width: auto; text-align: center; }
}