:root {
  color-scheme: dark;
  --paper: #0d1319;
  --surface: #151e27;
  --panel-raised: #1b2631;
  --panel-active: #233340;
  --recess: #111b24;
  --line: #2d3e4b;
  --line-strong: #405563;
  --control-line: #526a7a;
  --ink: #eff5f9;
  --muted: #acbdc8;
  --rail: linear-gradient(180deg, #19252f, #131c25);
  --rail-text: #b7c5cf;
  --blue: #76e3ef;
  --blue-dark: #a4edf5;
  --blue-pale: #19353f;
  --on-signal: #081619;
  --green: #a2e9bd;
  --green-pale: #1c372e;
  --gold: #f2c789;
  --gold-pale: #382a1c;
  --red: #ffaaa2;
  --red-pale: #392326;
  --radius: 10px;
  --shadow: inset 0 1px rgb(230 246 255 / 5%);
  --panel-finish: linear-gradient(155deg, #1b2630, var(--surface) 54%);
  --primary-fill: linear-gradient(180deg, #92eef5, #64d0df);
  --console: var(--surface);
  --console-raised: var(--panel-raised);
  --console-line: var(--line);
  --console-ink: var(--ink);
  --console-muted: var(--muted);
  --signal: var(--blue);
  accent-color: var(--blue);
  scrollbar-color: #415866 var(--recess);
}

body {
  background: radial-gradient(ellipse at 85% 0, #4e8da017, transparent 48%), var(--paper);
}
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { color: var(--on-signal); background: var(--blue); }
h1 { font-weight: 740; }
.shell { min-height: 100dvh; }
.rail {
  border-inline-end: 1px solid var(--line);
  box-shadow: inset -1px 0 #0008;
  overscroll-behavior: contain;
}
.brand { color: var(--ink); }
.brand img { border-radius: 8px; }
.brand strong { letter-spacing: .025em; }
.brand small, .nav-label { color: var(--muted); }
.nav-link { border-radius: 5px; border: 1px solid transparent; }
.nav-link:hover { background: transparent; color: var(--rail-text); }
.nav-link[aria-current="page"], .nav-link[aria-current="page"]:hover {
  background: linear-gradient(145deg, #24434e, #19313c);
  color: var(--blue-dark);
  border-color: #497580;
  box-shadow: var(--shadow);
}
.nav-link[aria-current="page"]::before {
  height: 16px;
  width: 2px;
  border-radius: 0;
  background: var(--blue);
  inset-inline-start: -1px;
}
.rail-footer { border-color: var(--line); }
.rail-user strong { color: var(--ink); }
.rail-user > div { min-width: 0; }
.avatar {
  background: var(--blue-pale);
  border: 1px solid #345b65;
  border-radius: 6px;
  color: var(--blue-dark);
  box-shadow: inset 0 1px #ffffff0d;
}
.topbar {
  height: auto;
  min-height: 59px;
  background:
    radial-gradient(ellipse at 9% 5%, #72dfec17, transparent 44%),
    linear-gradient(180deg, #202e3a, #19242e);
  box-shadow: 0 1px #0005;
}
.topbar-title { min-width: 0; }
.topbar-title strong { color: var(--ink); }
.top-date { color: var(--muted); }
.top-date svg { color: var(--blue); }
.page-head > div:first-child { min-width: 0; }
.demo-ribbon {
  color: var(--blue-dark);
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 7px;
  background: #14252d;
  border: 1px solid #284650;
  border-radius: 4px;
  letter-spacing: .02em;
}
.demo-ribbon::before { background: var(--blue); border-radius: 1px; }

.btn {
  --btn-fill: var(--panel-raised);
  --btn-line: var(--line-strong);
  border-radius: 7px;
  background: var(--btn-fill);
  border-color: var(--btn-line);
  color: var(--ink);
  box-shadow: inset 0 1px #ffffff0a;
}
.btn.primary {
  --btn-fill: var(--primary-fill);
  --btn-line: var(--blue);
  background: var(--btn-fill);
  border-color: var(--btn-line);
  color: var(--on-signal);
  box-shadow: inset 0 1px #edfdff5c;
}
.btn.subtle {
  --btn-fill: #1a303b;
  --btn-line: #416573;
  background: var(--btn-fill);
  border-color: var(--btn-line);
  color: var(--blue-dark);
}
.btn.danger { --btn-line: #704348; border-color: var(--btn-line); color: var(--red); }
.btn.ghost, .btn.text {
  --btn-fill: transparent;
  --btn-line: transparent;
  background: var(--btn-fill);
  border-color: var(--btn-line);
  box-shadow: none;
}
.btn.text { color: var(--blue); }
.btn:hover, .btn.primary:hover, .btn.subtle:hover, .btn.ghost:hover, .btn.text:hover {
  background: var(--btn-fill);
  border-color: var(--btn-line);
}
.btn.text:hover { text-decoration: none; }
.btn:active:not(:disabled):not(.text) { box-shadow: inset 0 1px 3px #0005; }
.btn:disabled { opacity: .58; }

.card, .inventory-overview, .period-panel, .performance-board, .chart-panel {
  border-radius: var(--radius);
  background: var(--panel-finish);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.period-option { border-radius: 7px; }
.period-option[aria-current="true"], .period-option[aria-pressed="true"] {
  background: var(--primary-fill);
  color: var(--on-signal);
  border-color: var(--blue);
  box-shadow: inset 0 1px #edfdff5c;
}
.performance-profit, a.performance-profit:hover {
  background: radial-gradient(ellipse at 12% 12%, #28616a45, transparent 67%), #142830;
  border-inline-start-color: #64bdc9;
}
.performance-profit::after { opacity: .55; }
.performance-profit > svg { opacity: .38; }
.card-head { border-radius: var(--radius) var(--radius) 0 0; background: var(--panel-raised); }
.zone { border-block-start: 2px solid var(--blue); }
.zone.gold { border-block-start-color: #be9154; }
.zone.green { border-block-start-color: #5bb99b; }
.zone-row {
  background: var(--panel-raised);
  border-radius: 6px;
  border-color: var(--line);
}
.zone-row:hover { background: var(--panel-raised); }
.zone-row > svg { color: var(--blue); }
.meter { background: var(--recess); }
.meter > span { background: #5bb4c3; }
.meter.gold > span { background: #c39961; }
.meter.green > span { background: #5fb59b; }
.queue-row svg, .empty > svg { color: #82c1cf; }
.queue-row:hover { color: var(--ink); }
.summary-strip {
  background: #141f28;
  color: var(--muted);
  border-block-end-color: var(--line);
}
.inventory-filter-summary > strong { color: var(--blue-dark); }
.inventory-totals { background: var(--panel-raised); border-radius: var(--radius) var(--radius) 0 0; }
.inventory-area {
  background: var(--panel-raised);
  border-color: var(--line-strong);
  border-radius: 5px;
}
.inventory-area[aria-pressed="true"] { border-color: #4e8592; background: var(--blue-pale); color: var(--blue-dark); }
.inventory-area-title svg { color: #9ccbd4; }
.inventory-area-cost { color: var(--muted); }
.stock-mobile article { border-color: var(--line); }
.more-link { border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.more-link:hover { background: var(--surface); border-color: var(--line); }
.more-glyph { border: 1px solid #365a66; border-radius: 6px; }
.more-link > svg { color: #88a3af; }

.table-wrap { overscroll-behavior-inline: contain; }
table { text-align: start; }
th, td { border-block-end-color: var(--line); }
th { color: #bdcdd8; background: #1e2a36; text-align: start; }
th.num, td.num { text-align: end; }
tbody tr:hover td { background: transparent; }
.badge {
  background: #24313b;
  color: #c0d0da;
  border: 1px solid #415463;
  border-radius: 4px;
}
.badge::before { border-radius: 1px; width: 4px; height: 4px; }
.badge.blue { color: var(--blue-dark); background: var(--blue-pale); border-color: #40636d; }
.badge.green { color: var(--green); background: var(--green-pale); border-color: #3d6252; }
.badge.gold { color: var(--gold); background: var(--gold-pale); border-color: #725638; }
.badge.red { color: var(--red); background: var(--red-pale); border-color: #7d4b4d; }
.tabs { scrollbar-width: thin; }
.tab { color: var(--muted); }
.tab:hover { color: var(--muted); }
.tab[aria-selected="true"], .tab[aria-selected="true"]:hover { color: var(--blue); }

.field > span, .field > label { color: #c9d7e1; }
input, select, textarea {
  background: var(--recess);
  border-color: var(--control-line);
  border-radius: 7px;
  color: var(--ink);
  box-shadow: inset 0 1px 3px #0004;
}
input::placeholder, textarea::placeholder { color: #96a9b6; }
input:is([type="radio"], [type="checkbox"]) { box-shadow: none; }
input::file-selector-button {
  min-height: 25px;
  padding: 2px 6px;
  margin-inline-end: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--panel-active);
  color: var(--ink);
  font: inherit;
}
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: inset 0 0 0 100px var(--recess); }
.searchbox svg { inset-inline-start: 10px; }
.searchbox input { padding-inline-start: 33px; }
.form-section, .entry-section, .purchase-group {
  border-radius: 7px;
  border-color: var(--line);
  background: var(--panel-raised);
}
.entry-section legend { color: #b9d8e3; }
.entry-section input:not([type="file"]), .entry-section select, .entry-section textarea { border-color: var(--control-line); }
.selection, .allocation-grid { border-radius: 6px; background: var(--recess); overscroll-behavior: contain; }
.selection-head { background: var(--panel-raised); }
.selection-items label:hover { background: transparent; }
.notice {
  background: #1a2a35;
  border-color: #324957;
  border-radius: 8px;
  color: #b8dce5;
}
.notice.warn { background: var(--gold-pale); border-color: #74583c; color: var(--gold); }
.form-error, .data-feedback.failed { background: var(--red-pale); color: var(--red); border: 1px solid #784b4e; }
.data-feedback { background: var(--green-pale); color: var(--green); border-color: #3f6358; }
.form-error, .data-feedback { border-radius: 5px; }
.photo, .photo-input { background: var(--recess); border-color: var(--line-strong); border-radius: 6px; }
.photo .photo-placeholder { color: #9fb8c6; }
.photo-input input { background: transparent; box-shadow: none; }
.entry-section .photo-input img, .photo img { outline-color: oklch(1 0 0 / 0.1); }
.modal {
  background: var(--surface);
  border-color: var(--line-strong);
  border-radius: 10px;
  box-shadow: inset 0 1px #ffffff12, 0 15px 48px #0009;
  scroll-padding-block: 80px 72px;
}
.modal::backdrop { background: #04080bc7; }
.dialog-head, .dialog-foot { background: var(--panel-raised); border-color: var(--line); }
.dialog-head { align-items: start; }
.dialog-head h2 { color: var(--ink); }
.dialog-foot .btn { min-height: 40px; }
.toast { background: #1b343b; border: 1px solid #457581; color: var(--ink); border-radius: 6px; box-shadow: 0 5px 22px #0008; }
.toast > svg { color: var(--blue); }
.toast.error { background: var(--red-pale); border-color: #935552; }
.toast.error > svg { color: var(--red); }

.login-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.login-art {
  background: #101b22;
  border-inline-end: 1px solid var(--line);
  color: var(--ink);
}
.login-art::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background-image: linear-gradient(90deg, #6be5f511 1px, transparent 1px), linear-gradient(#6be5f511 1px, transparent 1px);
  background-size: 29px 29px;
  mask-image: linear-gradient(150deg, transparent 10%, #000 82%);
}
.login-art h1 { font-weight: 730; }
.login-art p { color: #aac3cf; }
.login-art .hero-art { opacity: .29; }
.login-pane { background: var(--paper); }
.login-form {
  width: min(100%, 402px);
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-finish);
  padding: clamp(17px, 2.5vw, 29px);
  box-shadow: var(--shadow);
}
.demo-login-roles .btn { padding-inline: 5px; }

@media (hover: hover) {
  .nav-link:not([aria-current="page"]):hover { background: var(--panel-raised); border-color: var(--line); color: var(--ink); }
  .btn:not(:disabled):hover { --btn-fill: var(--panel-active); --btn-line: #638092; }
  .btn.primary:not(:disabled):hover { --btn-fill: #9af1fa; --btn-line: #b6f5fd; }
  .btn.subtle:not(:disabled):hover { --btn-fill: #214652; --btn-line: #4a7380; }
  .btn.ghost:not(:disabled):hover { --btn-fill: var(--panel-active); --btn-line: transparent; }
  .btn.text:not(:disabled):hover { --btn-fill: transparent; --btn-line: transparent; text-decoration: underline; }
  .zone-row:hover, tbody tr:hover td, .selection-items label:hover { background: var(--panel-active); }
  .queue-row:hover, .tab:hover { color: var(--blue); }
  .more-link:hover, button.inventory-area:hover { background: var(--panel-active); border-color: #578392; }
  button.inventory-area[aria-pressed="true"]:hover { background: #214451; }
}

@media (max-width: 760px) {
  .rail { box-shadow: 0 0 0 100vmax #03070bc4; }
  .topbar { min-height: 54px; gap: 8px; }
  .top-actions { flex-shrink: 0; }
  .mobile-role { background: var(--blue-pale); color: var(--blue-dark); border: 1px solid #345460; border-radius: 4px; }
  .mobile-bottom { background: var(--rail); }
  .mobile-bottom a { position: relative; border-radius: 5px; }
  .mobile-bottom a[aria-current="page"], .mobile-bottom a[aria-current="true"] { background: var(--blue-pale); color: var(--blue-dark); }
  .mobile-bottom a[aria-current="page"]::before, .mobile-bottom a[aria-current="true"]::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(50% - 8px);
    width: 16px;
    height: 2px;
    background: var(--blue);
  }
  .ops-table tbody td:last-child { border-block-start-color: var(--line); }
  .intake-table tbody td:last-child, .sales-stock tbody td:last-child { border-block-start: 0; }
  .toast-stack { inset-block-end: calc(65px + env(safe-area-inset-bottom)); }
  .login-layout { grid-template-columns: minmax(0, 1fr); }
  .login-art { border-inline-end: 0; border-block-end: 1px solid var(--line); }
  .login-art .hero-art { opacity: .18; }
  .login-pane { padding: 19px 14px; }
  .modal { scroll-padding-block: 94px 66px; }
}

@media (max-width: 400px) {
  .top-actions { gap: 5px; }
  .mobile-bottom a { font-size: 10px; }
  .page-head .actions { gap: 7px; }
}

@media (forced-colors: active) {
  .btn:focus-visible, .nav-link:focus-visible, .mobile-bottom a:focus-visible { outline-color: Highlight; }
  .badge::before, .nav-link[aria-current="page"]::before { forced-color-adjust: none; background: Highlight; }
}