:root {
  color-scheme: light;
  --surface-soft:#f0f5f2; --field:#fafcfb; --field-line:#d4dfd8;
  --primary:#176b52; --primary-hover:#10533f; --primary-ink:#fff;
  --success-bg:#e7f5ed; --success:#167149; --danger-bg:#fcebec; --danger:#b73542;
  --photo-start:#dfece5; --photo-end:#f2f4ed; --focus:#34886c;
  --sidebar:#10271f; --sidebar-active:#244238; --sidebar-muted:#b2c6bc;
  --login-start:#e6f0e9; --login-end:#c8e0d1; --overlay:#10271f99;
  --shadow:0 12px 32px rgba(27,45,38,.06);
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --ink:#e7efe9; --muted:#a8b8af; --line:#314239; --paper:#101914; --white:#1a2820;
  --green:#8ae0b5; --red:#ff98a2; --surface-soft:#23342a; --field:#142119; --field-line:#405649;
  --primary:#287b59; --primary-hover:#328b65; --primary-ink:#fff;
  --success-bg:#1c3c2b; --success:#99e6b9; --danger-bg:#42252b; --danger:#ffacb4;
  --photo-start:#2b4033; --photo-end:#203027; --focus:#8ae0b5;
  --sidebar:#0c140f; --sidebar-active:#243d2d; --sidebar-muted:#abc1b1;
  --login-start:#0c140f; --login-end:#203d2b; --overlay:#050c08bb;
  --shadow:0 12px 32px rgba(0,0,0,.18);
}
body { background:var(--paper); color:var(--ink); }
button,input,select { font-family:inherit; }
button { touch-action:manipulation; }
button:focus-visible,a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.header-actions { display:flex; align-items:center; gap:12px; }
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:10px 14px; border:1px solid var(--line); border-radius:12px;
  background:var(--white); color:var(--ink); font-size:12px; font-weight:700; cursor:pointer;
}
.theme-toggle:hover { background:var(--surface-soft); border-color:var(--focus); }
.theme-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.theme-sun { display:none; }
[data-theme="dark"] .theme-sun { display:block; }
[data-theme="dark"] .theme-moon { display:none; }
.login-theme { position:absolute; top:24px; right:24px; }
.sidebar {
  width:260px; padding:30px 18px 18px;
  background:linear-gradient(165deg,var(--sidebar-active) -100%,var(--sidebar) 65%);
  border-right:1px solid color-mix(in srgb,var(--sidebar-muted) 14%,transparent);
}
main { margin-left:260px; }
.sidebar .brand { gap:12px; margin:0 14px 34px; letter-spacing:-.8px; font-size:26px; }
.sidebar .brand-mark { width:39px; height:39px; border-radius:12px; box-shadow:0 4px 16px #0002; }
.sidebar-caption { margin:0 15px 13px; color:var(--sidebar-muted); opacity:.75; font-size:9px; font-weight:700; letter-spacing:.16em; }
.sidebar nav { gap:6px; overflow-y:auto; min-height:0; padding:4px; margin:0 -4px; scrollbar-width:thin; }
.nav-item {
  position:relative; display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 12px;
  color:var(--sidebar-muted); font-size:13px; border:1px solid transparent; border-radius:13px;
  transition:background .15s,border-color .15s,color .15s;
}
.nav-item[hidden] { display:none!important; }
.nav-item .nav-icon {
  width:34px; height:34px; display:grid; place-items:center; flex:none; border-radius:10px;
  background:color-mix(in srgb,var(--sidebar-muted) 6%,transparent);
}
.nav-item .nav-label { width:auto; font-size:13px; font-weight:600; line-height:1.4; text-align:left; }
.nav-icon svg,#logout-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-item:hover { background:color-mix(in srgb,var(--sidebar-active) 65%,transparent); color:#f2f9f4; }
.nav-item.active { background:var(--sidebar-active); color:#f2f9f4; border-color:color-mix(in srgb,var(--lime) 15%,transparent); box-shadow:0 4px 12px #0001; }
.nav-item.active .nav-icon { color:var(--lime); background:color-mix(in srgb,var(--lime) 12%,transparent); }
.nav-item.active::before { content:''; position:absolute; left:-1px; top:16px; bottom:16px; width:3px; border-radius:4px; background:var(--lime); }
.nav-item[data-view="events"] { margin-top:14px; }
.sidebar .operator {
  flex-shrink:0; margin-top:auto; padding:16px 6px 0; gap:10px;
  border-color:color-mix(in srgb,var(--sidebar-muted) 18%,transparent);
}
.operator .avatar { flex:none; width:38px; height:38px; border-radius:12px; background:var(--sidebar-active); color:var(--lime); border:1px solid color-mix(in srgb,var(--lime) 18%,transparent); }
.operator div { min-width:0; flex:1; }
.operator strong,.operator small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.operator small { color:var(--sidebar-muted); font-size:10px; }
.operator #logout-button { display:grid; place-items:center; flex:none; width:34px; height:38px; padding:0; border-radius:10px; color:var(--sidebar-muted); }
.operator #logout-button:hover { background:var(--sidebar-active); color:#fff; }
@media(max-width:950px) and (min-width:621px) {
  .sidebar { width:86px; padding:26px 12px 18px; }
  main { margin-left:86px; }
  .sidebar .brand { margin:0 auto 28px; }
  .sidebar .brand-mark { font-size:22px; }
  .sidebar-caption,.nav-item .nav-label { display:none; }
  .nav-item { justify-content:center; padding:8px; min-height:54px; }
  .nav-item .nav-icon { width:34px; }
  .sidebar .operator { flex-direction:column; padding:16px 0 0; }
  .operator div { display:none; }
  .operator #logout-button { margin:0; width:100%; }
}
@media(max-width:620px) {
  main { margin-left:0; padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  .sidebar { inset:auto 0 0; width:100%; height:auto; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); border-right:0; border-top:1px solid var(--sidebar-active); box-shadow:0 -8px 28px #0002; }
  .sidebar-caption { display:none; }
  .sidebar nav { display:flex; justify-content:flex-start; gap:4px; padding:2px; margin:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .sidebar nav::-webkit-scrollbar { display:none; }
  .sidebar nav .nav-item { flex:0 0 76px; width:76px; min-height:58px; padding:5px 4px; flex-direction:column; gap:3px; border-radius:11px; }
  .nav-item .nav-icon { width:28px; height:28px; border-radius:8px; }
  .nav-item .nav-label { display:block; font-size:9px; text-align:center; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nav-item.active::before { top:auto; bottom:-1px; left:28px; right:28px; width:auto; height:3px; }
  .nav-item[data-view="events"] { margin-top:0; }
}
.reader-pill,.scan-card,.product-tile,.inventory-stats article,.login-card,dialog {
  background:var(--white); color:var(--ink); border-color:var(--line);
}
.panel,.stats article,.event-card,.inventory-stats article { box-shadow:var(--shadow); }
.reader-pill { min-height:42px; }
.stats small,.eyebrow,th,.access-row time,#scan-uid,.capture-help { color:var(--muted); }
input,select { background:var(--field); border-color:var(--field-line); color:var(--ink); }
input::placeholder { color:var(--muted); opacity:1; }
input:focus,select:focus { border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 20%,transparent); }
input:disabled,select:disabled { opacity:.65; }
.event-strip select { background:var(--white); color:var(--ink); }
.primary { background:var(--primary); color:var(--primary-ink); }
.primary:hover { background:var(--primary-hover); }
.primary:disabled { opacity:.6; cursor:wait; }
.icon-button,.category-chip,.quantity-control button,.image-upload {
  background:var(--white); color:var(--ink); border-color:var(--field-line);
}
.icon-button { color:var(--green); }
.icon-button:hover,.category-chip:hover,.quantity-control button:hover { background:var(--surface-soft); }
.icon-button.danger,.stock-low,.money.negative,.status-inactive,.form-error { color:var(--danger)!important; }
.category-chip.active { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.product-info small,.cart-line small,.inventory-stats span,.product-image-picker small,.login-card>p { color:var(--muted); }
.product-photo { background:linear-gradient(135deg,var(--photo-start),var(--photo-end)); color:var(--muted); }
.product-thumb,.product-image-picker,.wallet-mini,.scan-icon { background:var(--surface-soft); }
.scan-icon { color:var(--green); }
.cart-line { border-color:var(--line); }
.cart-total { border-color:var(--line); }
.checkout-button { background:var(--success-bg); color:var(--success); padding:14px; border-radius:11px; font-size:12px; font-weight:700; gap:12px; }
.badge,.role-badge,.access-state,.scan-card.allowed,.purchase-result.show,.pos-reader-live {
  background:var(--success-bg); color:var(--success);
}
.money.positive,.status-active { color:var(--success); }
.access-state.no,.scan-card.denied,.purchase-result.error { background:var(--danger-bg); color:var(--danger); }
.scan-card.allowed { border-color:var(--success); }
.scan-card.denied { border-color:var(--danger); }
.scan-card.allowed p,.scan-card.denied p { color:inherit; }
.pos-reader-live.offline { background:var(--danger-bg); color:var(--danger); }
.pos-reader-live.offline i { background:var(--danger); animation:none; box-shadow:none; }
.capture-button { background:var(--success-bg); color:var(--success); border-color:var(--focus); }
.capture-button.listening { background:var(--lime); color:#17372b; }
dialog { border:1px solid var(--line); }
dialog::backdrop { background:var(--overlay); }
.close { color:var(--muted); }
.login-screen { background:radial-gradient(ellipse at top left,var(--login-end),transparent 65%),var(--login-start); }
.login-brand { color:var(--ink); }
.login-card { border:1px solid var(--line); box-shadow:var(--shadow); }
@media(max-width:620px) {
  .header-actions { gap:8px; }
  .theme-toggle { padding:10px; }
  .header-actions [data-theme-label] { display:none; }
  .login-theme { top:16px; right:16px; }
  .login-card { padding:26px; margin-top:45px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}