/* Shared look for zebrademo.app pages (matches the SlotSense dashboard: black page, Zebra lime accent). */
@font-face { font-family: "Antre Condensed"; font-weight: 700; src: url("/_shared/fonts/AntreCondensed-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Metro Sans"; font-weight: 500; src: url("/_shared/fonts/MetroSans-Medium.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: dark;
  --lime: #BAF75A;
  --lime-ink: #000000;
  --lime-text: #BAF75A;   /* lime used as text; near-black in light mode */
  --bg: #000000;
  --fg: #ffffff;
  --muted: #a3a3a3;
  --faint: #6b6b6b;
  --rail: #2e2e2e;
  --card-line: #3d3d3d;
  --panel: #0d0d0d;
  --bad: #ff6b6b;
  --hover: #151515;         /* hover fill */
  --tile: #161616;          /* icon tiles */
  --option-bg: #111;        /* <option> lists */
  --warn: #ffb547;
  --desk-a: #121212; --desk-b: #161616;   /* striped backdrop behind label / barcode previews */
  --shadow: rgba(0,0,0,.6);
  --code-bg: #0a0a0a; --code-fg: #e6e6e6;
  --font-display: "Antre Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Metro Sans", "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-data: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* Light mode: chosen in the settings menu (menu.js sets data-theme on <html>). Lime text is unreadable on
   white, so the accent becomes a deeper Zebra green with white text on it. */
:root[data-theme="light"] {
  color-scheme: light;
  --lime: #BAF75A;
  --lime-ink: #000000;
  --lime-text: #0a0a0a;
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #525252;
  --faint: #737373;
  --rail: #e5e5e5;
  --card-line: #d4d4d4;
  --panel: #f6f6f6;
  --bad: #c62828;
  --hover: #f0f0f0;
  --tile: #f0f2ec;
  --option-bg: #fff;
  --warn: #b45309;
  --desk-a: #ececec; --desk-b: #f4f4f4;
  --shadow: rgba(0,0,0,.18);
  --code-bg: #fbfbfb; --code-fg: #1f2328;
}
:root[data-theme="light"] .top img { filter: invert(1); }
/* Light mode: accent words get a lime highlighter stripe behind black text */
:root[data-theme="light"] .app span, :root[data-theme="light"] .hl-accent { background: var(--lime); color: #0a0a0a; padding: 0 .04em; border-radius: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[data-theme="light"] :focus-visible { outline-color: #0a0a0a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--bg); margin: 0; }
body { color: var(--fg); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

.top { position: sticky; top: 0; z-index: 6; background: var(--bg); border-bottom: 1px solid var(--rail); padding-top: env(safe-area-inset-top, 0px); }
.top .wrap { display: flex; align-items: center; gap: 18px; padding-block: 14px; flex-wrap: wrap; }
.top img { height: 26px; width: auto; display: block; }
.top a.home { display: block; }
.sep { width: 1px; height: 26px; background: var(--card-line); }
.app { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: .01em; line-height: 1; user-select: none; }
.app span { color: var(--lime-text); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.back { color: var(--muted); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.back:hover { color: var(--fg); }
.back svg { width: 12px; height: 12px; }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 15px; border: 1.5px solid var(--fg); background: transparent; white-space: nowrap; }
a.pill { text-decoration: none; color: inherit; }
.pill:hover { background: var(--hover); }
.pill:disabled { opacity: .4; cursor: default; background: transparent; }
.pill.lime { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.pill.lime:hover { filter: brightness(1.06); }
.pill.lime:disabled { filter: none; }
.pill svg { width: 15px; height: 15px; }