:root {
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  color:#202e2a;
  background:#f6f7f4;
  font-synthesis:none;
  font-size:14px;
  --green:#183e35;
  --muted:#748078;
  --line:#e3e7e1;
  --orange:#b4652e;
  --pale:#edf2eb;
  --radius:16px
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button {
  color:inherit
}
button:disabled {
  cursor:default;
  opacity:.5
}
a {
  color:inherit
}
button svg,a svg {
  pointer-events:none
}
button,input,select,textarea {
  border-radius:9px
}
input,select,textarea {
  border:1px solid #cbd3cc;
  background:white;
  padding:12px 14px;
  min-height:46px;
  color:#202e2a
}
input[type=checkbox] {
  min-height:20px;
  width:20px;
  height:20px;
  accent-color:var(--green)
}
input::placeholder,textarea::placeholder {
  color:#7c877f
}
textarea {
  resize:vertical;
  min-height:92px
}
button {
  border:0;
  background:none
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline:3px solid #c0854f;
  outline-offset:3px
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:30px;
  letter-spacing:-1px;
  font-weight:650;
  line-height:1.2
}
h2 {
  font-size:18px;
  letter-spacing:-.3px;
  font-weight:650
}
h3 {
  font-size:15px;
  font-weight:650
}
p {
  line-height:1.6
}
.icon {
  width:21px;
  height:21px;
  flex-shrink:0;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}
.muted {
  color:var(--muted)
}
.small {
  font-size:12px
}
.eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--muted)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip {
  position:fixed;
  top:10px;
  left:270px;
  transform:translateY(-200%);
  background:white;
  padding:12px;
  z-index:50
}
.skip:focus {
  transform:translateY(0)
}
.boot {
  padding:40px
}
.sidebar {
  width:230px;
  position:fixed;
  inset:0 auto 0 0;
  background:#fff;
  border-right:1px solid var(--line);
  padding:33px 20px 20px;
  display:flex;
  flex-direction:column;
  z-index:10
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  padding:0 10px 35px;
  text-decoration:none
}
.brand-mark {
  width:40px;
  height:43px;
  background:var(--green);
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#fff;
  box-shadow:0 3px 0 #c9d4b9
}
.brand-mark .icon {
  width:24px;
  height:24px
}
.brand-name {
  font-size:23px;
  font-weight:750;
  letter-spacing:-.7px;
  line-height:1
}
.brand-sub {
  font-size:10px;
  font-weight:650;
  color:#7f887e;
  letter-spacing:2px;
  margin-top:5px
}
.nav-label {
  padding:3px 14px 12px
}
.nav {
  display:grid;
  gap:7px
}
.nav a {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  padding:13px 14px;
  border-radius:9px;
  font-weight:560;
  color:#6e7972;
  min-height:48px
}
.nav a:hover {
  background:#f3f6f0
}
.nav a.active {
  color:var(--green);
  background:#eaf0e6
}
.nav-count {
  margin-left:auto;
  border-radius:6px;
  font-size:11px;
  background:#e1e8db;
  padding:3px 7px;
  color:#3d5845
}
.sidebar-bottom {
  margin-top:auto
}
.workspace-note {
  padding:17px 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fafbf8;
  margin-bottom:22px;
  line-height:1.6
}
.workspace-note p {
  font-size:12px;
  margin-top:6px;
  color:var(--muted)
}
.sidebar-foot {
  display:flex;
  align-items:center;
  gap:8px;
  color:#879185;
  padding:13px 10px 0;
  border-top:1px solid var(--line);
  font-size:11px
}
.dot {
  width:6px;
  height:6px;
  border-radius:100%;
  background:#739174;
  display:inline-block;
  flex-shrink:0
}
.shell {
  margin-left:230px
}
.topbar {
  min-height:82px;
  border-bottom:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 36px
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#7a857d
}
.breadcrumb strong {
  font-weight:550;
  color:#263d32
}
.top-actions {
  display:flex;
  align-items:center;
  gap:20px
}
.preview-pill {
  font-size:11px;
  border:1px solid #e4dac2;
  background:#fbf7ec;
  color:#87723b;
  border-radius:6px;
  padding:5px 9px;
  white-space:nowrap
}
.language {
  display:flex;
  align-items:center;
  gap:3px;
  background:#f3f5f0;
  border-radius:8px;
  padding:3px
}
.language button {
  height:32px;
  padding:0 8px;
  font-size:11px;
  color:#7c857b;
  border-radius:5px;
  font-weight:650
}
.language button[aria-pressed=true] {
  background:white;
  box-shadow:0 1px 4px #20382412;
  color:#243e30
}
.account {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  text-align:left
}
.avatar {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border-radius:100%;
  background:#efe8d7;
  color:#877346;
  font-size:12px;
  font-weight:650
}
.account strong {
  font-size:12px;
  display:block;
  font-weight:600
}
.account small {
  font-size:10px;
  color:var(--muted)
}
.account .icon {
  width:15px;
  margin-left:5px
}
.mobile-brand {
  display:none
}
.page {
  max-width:1440px;
  margin:auto;
  padding:34px 36px 36px
}
.page-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px
}
.page-title p {
  margin-top:8px;
  color:var(--muted);
  font-size:13px
}
.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:11px 17px;
  font-size:12px;
  font-weight:650;
  border-radius:8px;
  background:#fff;
  border:1px solid #dbe1d8;
  text-decoration:none;
  white-space:nowrap
}
.btn:hover {
  background:#f4f7ef
}
.btn.primary {
  background:var(--green);
  border-color:var(--green);
  color:white
}
.btn.primary:hover {
  background:#285345
}
.btn.light {
  background:#f0f3e8;
  border-color:#f0f3e8;
  color:var(--green)
}
.btn .icon {
  width:17px;
  height:17px
}
.link-button {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--green);
  font-size:12px;
  font-weight:650;
  padding:9px 0;
  min-height:38px
}
.link-button .icon {
  width:15px;
  height:15px
}
.search-box {
  border:1px solid #dde2d9;
  background:white;
  border-radius:11px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 9px 6px 17px;
  box-shadow:0 3px 6px #1e332602;
  min-width:0
}
.search-box>.icon {
  color:#818d81
}
.search-box input {
  border:0;
  box-shadow:none;
  flex:1;
  min-width:0;
  padding:10px 0;
  background:transparent;
  font-size:13px;
  outline-offset:0
}
.search-box kbd {
  border:1px solid var(--line);
  padding:3px 7px;
  border-radius:4px;
  color:#8b958b;
  font-size:11px;
  background:#f9faf7
}
.scan-button {
  display:flex;
  align-items:center;
  gap:8px;
  background:#eef3e9;
  min-height:39px;
  color:#3f5b3c;
  font-size:12px;
  padding:9px 13px;
  font-weight:600
}
.scan-button .icon {
  width:18px;
  height:18px
}
.hero {
  margin:23px 0 25px;
  background:#193f35;
  border-radius:16px;
  color:#fff;
  display:flex;
  min-height:172px;
  overflow:hidden;
  position:relative
}
.hero-copy {
  padding:29px 32px;
  position:relative;
  z-index:1;
  flex:1
}
.hero .eyebrow {
  color:#bfcdb6;
  font-size:10px;
  letter-spacing:1.5px
}
.hero h2 {
  font-size:25px;
  letter-spacing:-.6px;
  margin:10px 0 9px;
  color:#fafcf1;
  font-weight:550
}
.hero p {
  color:#bdcec2;
  font-size:12px;
  max-width:470px
}
.hero .btn {
  margin-top:20px;
  min-height:36px;
  padding:8px 12px;
  font-size:11px
}
.hero-art {
  width:195px;
  align-self:stretch;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  margin-right:35px
}
.hero-art img {
  width:155px;
  height:155px;
  transform:rotate(-18deg);
  filter:drop-shadow(9px 16px 3px #061d2450);
  z-index:1
}
.hero-art:before,.hero-art:after {
  content:"";
  position:absolute;
  border:1px solid #bed4ab20;
  border-radius:100%;
  width:205px;
  height:205px
}
.hero-art:after {
  width:270px;
  height:270px
}
.section-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
  gap:10px
}
.section-label>span {
  font-size:11px;
  color:var(--muted)
}
.quick-actions {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:28px
}
.quick-action {
  padding:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:13px;
  text-align:left;
  min-height:87px;
  transition:transform .15s,border-color .15s
}
.quick-action:hover {
  transform:translateY(-2px);
  border-color:#aeba9f
}
.action-icon {
  height:40px;
  width:40px;
  border-radius:10px;
  background:#f0f3e9;
  display:grid;
  place-items:center;
  color:#5d7750;
  flex-shrink:0
}
.quick-action:nth-child(3) .action-icon {
  background:#faf0e5;
  color:#b17746
}
.quick-action:nth-child(4) .action-icon {
  background:#eef1f7;
  color:#667a9c
}
.quick-action strong {
  font-size:13px;
  font-weight:650;
  display:block
}
.quick-action small {
  font-size:10px;
  color:var(--muted);
  display:block;
  margin-top:5px;
  line-height:1.4
}
.dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(265px,1fr);
  gap:22px
}
.panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden
}
.panel-head {
  padding:20px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.panel-head h2 {
  font-size:16px;
  display:flex;
  align-items:center;
  gap:9px
}
.panel-head p {
  font-size:11px;
  color:var(--muted);
  margin-top:6px
}
.number-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f9eddf;
  color:#a46836;
  font-size:10px;
  padding:4px 7px;
  border-radius:5px;
  font-weight:650;
  letter-spacing:0
}
.number-badge.green {
  background:#edf3e9;
  color:#607c4b
}
.table-wrap {
  overflow-x:auto
}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left
}
th {
  font-size:10px;
  font-weight:550;
  color:#8a9289;
  background:#fafbf8;
  padding:11px 18px;
  border-top:1px solid #edf0e9;
  border-bottom:1px solid #edf0e9;
  white-space:nowrap
}
td {
  padding:14px 18px;
  border-bottom:1px solid #eef0eb;
  font-size:12px
}
tr:last-child td {
  border-bottom:0
}
.product-cell {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:160px
}
.thumb {
  width:43px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#f3f4ef;
  border:1px solid #e9ede3;
  padding:3px;
  flex-shrink:0
}
.thumb img {
  width:100%;
  height:100%;
  object-fit:contain
}
.product-name {
  font-weight:600;
  font-size:12px;
  text-align:left;
  padding:3px 0;
  display:block
}
.product-name:hover {
  text-decoration:underline
}
.product-code {
  font-size:10px;
  color:#8c9389;
  margin-top:2px;
  letter-spacing:.2px
}
.stock-value {
  font-weight:700;
  font-size:13px;
  white-space:nowrap
}
.stock-value.low {
  color:#b16b37
}
.stock-note {
  color:#949b91;
  display:block;
  font-size:10px;
  margin-top:4px
}
.tag {
  display:inline-flex;
  gap:4px;
  align-items:center;
  font-size:10px;
  border-radius:5px;
  padding:5px 7px;
  white-space:nowrap;
  background:#eef3e8;
  color:#657e54
}
.tag.low {
  background:#fcf0e3;
  color:#a66a32
}
.tag.neutral {
  background:#f0f2ef;
  color:#7a8275
}
.tag.blue {
  background:#ecf1f8;
  color:#667f9d
}
.icon-button {
  width:35px;
  height:35px;
  display:inline-grid;
  place-items:center;
  border:1px solid #dfe6d9;
  border-radius:7px;
  flex-shrink:0
}
.icon-button:hover {
  background:#edf3e8
}
.icon-button .icon {
  width:17px;
  height:17px
}
.panel-foot {
  border-top:1px solid #edf0e9;
  padding:12px 20px;
  background:#fcfdfb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.panel-foot p {
  font-size:10px;
  color:#91988c
}
.identify-card {
  padding:17px 20px;
  border-top:1px solid #edf0e9
}
.identify-card-top {
  display:flex;
  align-items:center;
  gap:12px
}
.identify-card h3 {
  font-size:12px;
  margin-bottom:4px
}
.identify-card p {
  font-size:11px;
  color:var(--muted);
  margin-top:9px
}
.identify-card .link-button {
  font-size:11px;
  margin-top:4px
}
.report-strip {
  margin-top:22px;
  padding:19px 22px;
  display:flex;
  align-items:center;
  gap:15px
}
.report-icon {
  width:43px;
  height:43px;
  border-radius:11px;
  background:#f0f3e9;
  display:grid;
  place-items:center;
  color:#6c805b
}
.report-strip h3 {
  font-size:12px
}
.report-strip p {
  font-size:11px;
  color:var(--muted);
  margin-top:4px
}
.report-strip .link-button {
  margin-left:auto
}
.preview-footer {
  padding:23px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  color:#8d978a
}
.preview-footer span {
  display:flex;
  gap:6px;
  align-items:center
}
.preview-footer .icon {
  width:13px;
  height:13px
}
.mobile-nav {
  display:none
}
.filter-row {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:20px 0
}
.chip {
  border:1px solid var(--line);
  background:#fff;
  padding:9px 14px;
  min-height:38px;
  font-size:12px;
  border-radius:8px
}
.chip.selected {
  background:#e8eee2;
  border-color:#cdd9c3;
  color:#365532
}
.filter-row .count-label {
  margin-left:auto;
  font-size:12px;
  color:var(--muted)
}
.empty {
  padding:55px 24px;
  text-align:center;
  max-width:620px;
  margin:auto
}
.empty>.icon {
  width:36px;
  height:36px;
  color:#8ea080;
  margin-bottom:20px
}
.empty h2 {
  font-size:21px;
  margin-bottom:10px
}
.empty p {
  font-size:13px;
  color:var(--muted);
  margin:0 auto 20px;
  max-width:380px
}
.banner-note {
  background:#f0f3e9;
  border:1px solid #dde5d5;
  border-radius:10px;
  padding:15px 18px;
  font-size:12px;
  color:#627153;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:20px 0;
  line-height:1.6
}
.banner-note .icon {
  width:17px;
  height:17px;
  margin-top:1px
}
.order-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:22px;
  align-items:start;
  margin-top:22px
}
.order-group {
  margin-bottom:20px
}
.order-group h2 {
  font-size:15px
}
.qty-input {
  width:74px;
  min-height:38px;
  padding:8px 10px
}
.order-summary {
  padding:22px;
  position:sticky;
  top:20px
}
.order-summary h2 {
  margin-bottom:20px
}
.summary-row {
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid var(--line);
  gap:18px;
  font-size:12px
}
.summary-row strong {
  text-align:right
}
.order-summary .btn {
  width:100%;
  margin-top:18px;
  white-space:normal
}
.order-summary p {
  font-size:11px;
  color:var(--muted);
  margin-top:14px
}
.report-cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:22px 0
}
.metric {
  padding:22px
}
.metric strong {
  display:block;
  font-size:29px;
  margin:12px 0 5px;
  letter-spacing:-1px
}
.metric span {
  font-size:12px;
  color:var(--muted)
}
.metric h3 {
  font-size:12px;
  font-weight:500
}
.table-title {
  padding:20px 22px
}
.table-title p {
  color:var(--muted);
  font-size:12px;
  margin-top:8px
}
.settings-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.settings-card {
  padding:24px
}
.settings-card>p {
  font-size:12px;
  color:var(--muted);
  margin:12px 0 20px
}
.setting-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:17px 0;
  border-top:1px solid var(--line);
  font-size:12px
}
.setting-row p {
  font-size:11px;
  color:var(--muted);
  margin-top:4px
}
.setting-row .btn {
  white-space:normal
}
.dialog-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px
}
.dialog-heading h2 {
  font-size:23px;
  letter-spacing:-.6px
}
.dialog-heading .eyebrow {
  margin-bottom:8px
}
.dialog-heading .icon-button {
  border:0;
  background:#f3f5f0
}
.dialog-body>p {
  font-size:13px;
  color:var(--muted);
  margin-bottom:20px
}
.dialog-footer {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px;
  flex-wrap:wrap
}
.dialog-preview {
  padding:12px 14px;
  background:#f8f5eb;
  border-radius:8px;
  font-size:11px;
  color:#8d7950;
  margin-top:20px;
  line-height:1.6
}
dialog {
  border:1px solid #e0e5d9;
  border-radius:18px;
  box-shadow:0 35px 100px #071b2340;
  width:min(600px,calc(100% - 32px));
  max-height:calc(100dvh - 48px);
  padding:28px;
  color:#203329;
  background:#fff;
  overflow-y:auto
}
dialog::backdrop {
  background:#15291e70;
  backdrop-filter:blur(4px)
}
.photo-dialog {
  max-width:460px
}
.photo-stage {
  height:310px;
  display:grid;
  place-items:center;
  background:#f2f4ed;
  border-radius:14px
}
.photo-stage img {
  height:85%;
  width:85%;
  object-fit:contain
}
.photo-caption {
  font-size:11px;
  color:var(--muted);
  text-align:center;
  margin-top:13px
}
.product-detail-top {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:20px
}
.product-detail-top .thumb {
  width:95px;
  height:102px
}
.product-detail-top h3 {
  font-size:21px;
  margin:8px 0
}
.stock-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px
}
.stock-block {
  background:#f4f6ef;
  border-radius:10px;
  padding:16px 12px;
  text-align:center
}
.stock-block strong {
  display:block;
  font-size:25px;
  margin-top:8px
}
.stock-block span {
  font-size:10px;
  color:#7d8876
}
.detail-meta {
  margin-top:20px
}
.detail-meta .summary-row {
  padding:10px 0
}
.product-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:20px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px
}
.field {
  display:grid;
  gap:8px;
  font-size:12px;
  font-weight:600
}
.field.full {
  grid-column:1/-1
}
.field small {
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  line-height:1.5
}
.form-summary {
  padding:17px;
  border:1px solid var(--line);
  background:#f8faf5;
  border-radius:11px
}
.form-summary p {
  font-size:12px;
  color:var(--muted);
  margin-top:6px
}
.upload-preview {
  border:1px dashed #b7c6aa;
  background:#f8faf5;
  border-radius:10px;
  padding:23px;
  text-align:center
}
.upload-preview .icon {
  width:29px;
  height:29px;
  color:#80916f
}
.upload-preview p {
  font-size:12px;
  color:var(--muted);
  margin:8px 0
}
.candidate {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px;
  margin-top:10px
}
.candidate .thumb {
  width:42px
}
.candidate span {
  font-size:12px
}
.candidate input {
  margin-left:auto
}
.toast {
  position:fixed;
  bottom:24px;
  left:calc(50% + 115px);
  transform:translateX(-50%);
  background:#193f35;
  color:#fff;
  border-radius:12px;
  padding:15px 23px;
  font-size:12px;
  max-width:calc(100% - 30px);
  box-shadow:0 8px 30px #12332420;
  z-index:50;
  line-height:1.5
}
.login-screen {
  min-height:70vh;
  display:grid;
  place-items:center
}
.login-panel {
  max-width:420px;
  width:100%;
  padding:32px
}
.login-panel h1 {
  font-size:25px;
  margin-top:20px
}
.login-panel>p {
  font-size:12px;
  color:var(--muted);
  margin:12px 0 25px
}
.login-panel .field {
  margin-top:15px
}
.login-panel .btn {
  width:100%;
  margin-top:24px
}
.login-panel .brand-mark {
  width:45px;
  height:47px
}
.report-positive {
  color:#598051
}
.report-negative {
  color:#a76a35
}
.fade-in {
  animation:appear .2s ease-out
}
@keyframes appear {
  from {
    opacity:.3;
    transform:translateY(3px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
@media(min-width:1450px) {
  .page {
    padding-top:40px
  }
  .hero {
    min-height:192px
  }
  .hero-copy {
    padding:33px 36px
  }
  .hero h2 {
    font-size:29px
  }
  .hero-art {
    margin-right:65px
  }
  .quick-action {
    min-height:96px
  }
  .hero-art img {
    height:175px;
    width:175px
  }
}
@media(max-width:1200px) {
  .sidebar {
    width:200px;
    padding-left:13px;
    padding-right:13px
  }
  .shell {
    margin-left:200px
  }
  .topbar {
    padding:18px 25px
  }
  .page {
    padding:27px 25px
  }
  .quick-actions {
    gap:10px
  }
  .quick-action {
    padding:15px 12px;
    gap:9px
  }
  .quick-action small {
    font-size:9px
  }
  .dashboard-grid {
    grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr);
    gap:16px
  }
  th,td {
    padding-left:14px;
    padding-right:14px
  }
  .stock-status-col {
    display:none
  }
  .top-actions {
    gap:14px
  }
  .toast {
    left:calc(50% + 100px)
  }
  .order-layout {
    grid-template-columns:minmax(0,1fr) 260px
  }
}
@media(max-width:1000px) {
  .sidebar {
    width:180px
  }
  .shell {
    margin-left:180px
  }
  .brand {
    padding-left:5px;
    gap:9px
  }
  .brand-name {
    font-size:21px
  }
  .brand-mark {
    width:35px;
    height:39px
  }
  .nav a {
    padding:12px 10px;
    font-size:12px;
    gap:9px
  }
  .topbar {
    padding:16px 22px
  }
  .topbar .preview-pill {
    display:none
  }
  .dashboard-grid {
    grid-template-columns:1fr
  }
  .queue-panel {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .queue-panel .panel-head {
    grid-column:1/-1
  }
  .queue-panel .identify-card+.identify-card {
    border-left:1px solid var(--line)
  }
  .quick-action {
    flex-direction:column;
    align-items:flex-start;
    gap:13px
  }
  .stock-status-col {
    display:table-cell
  }
  .hero-art {
    width:145px;
    margin-right:10px
  }
  .hero-copy {
    padding:26px
  }
  .hero h2 {
    font-size:24px
  }
  .toast {
    left:calc(50% + 90px)
  }
  .order-layout {
    grid-template-columns:1fr
  }
  .order-summary {
    position:static
  }
  .settings-grid {
    grid-template-columns:1fr
  }
}
@media(max-width:760px) {
  .sidebar {
    display:none
  }
  .shell {
    margin-left:0
  }
  .topbar {
    min-height:70px;
    padding:15px 20px
  }
  .breadcrumb {
    display:none
  }
  .mobile-brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:750;
    font-size:20px;
    letter-spacing:-.5px
  }
  .mobile-brand .brand-mark {
    width:31px;
    height:34px;
    border-radius:9px
  }
  .mobile-brand .icon {
    width:20px;
    height:20px
  }
  .top-actions {
    gap:12px
  }
  .account>span:not(.avatar),.account>.icon {
    display:none
  }
  .account .avatar {
    height:33px;
    width:33px
  }
  .page {
    padding:25px 20px 100px
  }
  .page-title {
    margin-bottom:20px;
    align-items:flex-start
  }
  .page-title h1 {
    font-size:27px
  }
  .page-title p {
    font-size:12px;
    max-width:230px
  }
  .page-title>.btn {
    padding:10px;
    font-size:11px;
    min-height:40px
  }
  .page-title>.btn .icon {
    width:15px
  }
  .search-box {
    padding:4px 6px 4px 12px
  }
  .search-box kbd {
    display:none
  }
  .search-box input {
    font-size:12px
  }
  .scan-button {
    font-size:11px;
    padding:8px 10px
  }
  .search-box>.icon {
    width:18px
  }
  .hero {
    margin-top:18px;
    margin-bottom:24px;
    min-height:200px
  }
  .hero-copy {
    padding:25px 23px
  }
  .hero h2 {
    font-size:25px;
    line-height:1.25;
    max-width:260px
  }
  .hero p {
    max-width:240px;
    font-size:11px
  }
  .hero-art {
    position:absolute;
    right:-13px;
    bottom:-4px;
    opacity:.3;
    width:130px;
    height:160px;
    margin:0;
    pointer-events:none
  }
  .hero-art img {
    width:120px;
    height:120px
  }
  .hero-art:before {
    width:140px;
    height:140px
  }
  .hero-art:after {
    width:185px;
    height:185px
  }
  .quick-actions {
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:23px
  }
  .quick-action {
    padding:16px;
    flex-direction:row;
    align-items:center;
    gap:11px;
    min-height:87px
  }
  .quick-action strong {
    font-size:12px
  }
  .quick-action small {
    font-size:9px;
    line-height:1.5
  }
  .action-icon {
    height:35px;
    width:35px;
    border-radius:9px
  }
  .action-icon .icon {
    width:19px;
    height:19px
  }
  .section-label h2 {
    font-size:15px
  }
  .section-label span {
    font-size:10px
  }
  .dashboard-grid {
    gap:17px
  }
  .panel-head {
    padding:19px 16px
  }
  .panel-head h2 {
    font-size:15px
  }
  .panel-head p {
    font-size:10px
  }
  .panel-head .link-button {
    font-size:10px
  }
  .stock-status-col {
    display:none
  }
  .product-cell {
    gap:9px;
    min-width:147px
  }
  td,th {
    padding:12px 12px
  }
  .product-name {
    font-size:11px;
    max-width:140px
  }
  .product-code {
    font-size:9px
  }
  .thumb {
    height:41px;
    width:36px
  }
  .stock-value {
    font-size:12px
  }
  .stock-note {
    font-size:9px
  }
  .stock-table th:last-child,.stock-table td:last-child {
    padding-left:3px
  }
  .panel-foot {
    padding:10px 15px
  }
  .panel-foot p {
    max-width:200px;
    font-size:9px
  }
  .queue-panel {
    display:block
  }
  .queue-panel .identify-card+.identify-card {
    border-left:0
  }
  .identify-card {
    padding:16px
  }
  .report-strip {
    padding:16px;
    gap:11px;
    flex-wrap:wrap
  }
  .report-strip .link-button {
    margin-left:54px;
    padding:0
  }
  .report-strip p {
    font-size:10px
  }
  .report-strip h3 {
    font-size:12px
  }
  .preview-footer {
    align-items:flex-start;
    font-size:9px;
    line-height:1.5;
    gap:14px
  }
  .preview-footer>span:last-child {
    display:none
  }
  .mobile-nav {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#ffffffed;
    backdrop-filter:blur(15px);
    border-top:1px solid var(--line);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    z-index:10;
    padding:8px 7px max(8px,env(safe-area-inset-bottom))
  }
  .mobile-nav a {
    color:#899180;
    text-decoration:none;
    font-size:9px;
    font-weight:550;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:4px 0;
    min-height:46px;
    border-radius:8px;
    position:relative
  }
  .mobile-nav a.active {
    color:var(--green);
    background:#f0f4e9
  }
  .mobile-nav .icon {
    width:21px;
    height:21px
  }
  .mobile-nav .nav-count {
    position:absolute;
    top:-2px;
    right:19%;
    font-size:8px;
    padding:2px 4px
  }
  .toast {
    left:50%;
    bottom:87px;
    width:max-content;
    max-width:calc(100% - 32px)
  }
  .filter-row {
    gap:7px
  }
  .chip {
    padding:8px 11px;
    font-size:11px;
    min-height:36px
  }
  .filter-row .count-label {
    font-size:10px
  }
  .catalog-table .category-col,.catalog-table .store-col {
    display:none
  }
  .catalog-table td {
    font-size:11px
  }
  .order-layout {
    gap:17px
  }
  .order-table .thumb {
    display:none
  }
  .order-table .product-cell {
    min-width:135px
  }
  .order-table .qty-input {
    width:57px
  }
  .order-table th,.order-table td {
    padding:12px 10px
  }
  .report-cards {
    gap:8px
  }
  .metric {
    padding:15px 12px
  }
  .metric h3 {
    font-size:10px
  }
  .metric strong {
    font-size:25px
  }
  .metric span {
    font-size:9px
  }
  .report-table {
    min-width:480px
  }
  .table-title {
    padding:18px 16px
  }
  .table-title p {
    font-size:11px
  }
  .settings-card {
    padding:20px
  }
  .setting-row {
    font-size:11px
  }
  .setting-row .btn {
    font-size:10px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .field.full {
    grid-column:auto
  }
  dialog {
    padding:23px 20px;
    max-height:calc(100dvh - 32px)
  }
  .dialog-heading h2 {
    font-size:21px
  }
  .dialog-footer>.btn {
    flex:1
  }
  .product-detail-top {
    gap:15px
  }
  .product-detail-top .thumb {
    width:75px;
    height:87px
  }
  .product-detail-top h3 {
    font-size:18px
  }
  .stock-block {
    padding:13px 8px
  }
  .stock-block strong {
    font-size:22px
  }
  .product-actions .btn {
    font-size:11px;
    flex:1
  }
  .photo-stage {
    height:270px
  }
  .skip {
    left:10px
  }
  .login-panel {
    padding:26px
  }
  .login-screen {
    min-height:65vh
  }
}
@media(max-width:360px) {
  .page {
    padding-left:13px;
    padding-right:13px
  }
  .topbar {
    padding-left:13px;
    padding-right:13px
  }
  .quick-action {
    padding:13px 10px;
    gap:8px
  }
  .action-icon {
    width:30px
  }
  .page-title h1 {
    font-size:24px
  }
  .page-title>.btn {
    font-size:10px
  }
  .hero-copy {
    padding:22px 20px
  }
  .scan-button span {
    display:none
  }
  .product-cell {
    min-width:135px
  }
}
.mobile-preview {
  display:none
}
.mobile-brand {
  text-decoration:none
}
.brand-sub {
  display:block
}
.candidate small {
  display:block
}
.order-table .qty-input:invalid {
  border-color:#b87739
}
@media(max-width:760px) {
  .mobile-preview {
    display:block;
    padding:7px 20px;
    background:#f6f2e6;
    border-bottom:1px solid #e9e3d4;
    color:#8d7950;
    font-size:10px
  }
}
.mobile-stock-note {
  display:none
}
@media(max-width:1200px) and (min-width:1001px),(max-width:760px) {
  .mobile-stock-note {
    display:block;
    color:#667f9d;
    font-size:9px;
    margin-top:4px;
    white-space:nowrap
  }
}

/* Delivery document → AI proposal → staff confirmation (fictional preview). */
.delivery-dialog { width:min(780px,calc(100% - 32px)); }
.delivery-steps { display:flex; gap:14px; padding:0 0 18px; margin:0 0 22px; list-style:none; border-bottom:1px solid var(--line); }
.delivery-steps li { display:flex; gap:7px; align-items:center; color:#819078; font-size:11px; }
.delivery-steps li>span { width:23px; height:23px; display:grid; place-items:center; background:#f0f3eb; border-radius:50%; font-weight:650; }
.delivery-steps [aria-current=step] { color:var(--green); font-weight:700; }
.delivery-steps [aria-current=step]>span { color:white; background:var(--green); }
.delivery-upload { padding:34px 24px; background:#f7f9f3; border:1px dashed #acbda1; border-radius:14px; text-align:center; }
.delivery-camera { display:inline-grid; place-items:center; width:58px; height:58px; background:#eaf0e1; border-radius:16px; margin-bottom:17px; color:#60754d; }
.delivery-camera .icon { height:28px; width:28px; }
.delivery-upload h3 { font-size:19px; }
.delivery-upload p { max-width:430px; margin:12px auto 20px; color:var(--muted); font-size:12px; }
.delivery-upload .product-actions { justify-content:center; }
.delivery-document-meta { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:18px 0; }
.delivery-document-meta p { font-size:11px; color:var(--muted); margin-top:5px; }
.delivery-document { border:1px solid var(--line); border-radius:10px; margin-bottom:20px; }
.delivery-document summary { display:flex; align-items:center; gap:8px; padding:14px; cursor:pointer; color:#536a43; font-size:12px; }
.delivery-paper { margin:0 16px 16px; padding:20px; background:#fbfaf5; border:1px solid #e8e3d3; border-radius:6px; }
.delivery-paper-head { display:flex; justify-content:space-between; gap:15px; margin-bottom:20px; }
.delivery-paper-head h3 { margin-top:7px; }
.delivery-paper p { font-size:11px; margin:12px 0; }
.delivery-source-row { display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid #e9e6dc; font-size:11px; }
.delivery-location { max-width:210px; margin-bottom:20px; }
.delivery-lines { display:grid; gap:14px; }
.delivery-line { padding:19px; border:1px solid #dfe6d8; border-radius:12px; background:#fcfdf9; }
.delivery-line.needs-match { border-color:#e1c29b; background:#fffcf7; }
.delivery-line-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.delivery-line-heading .eyebrow { font-size:9px; }
.delivery-line-heading h3 { font-size:14px; margin-top:6px; }
.delivery-line-heading p { color:var(--muted); font-size:11px; margin-top:6px; }
.delivery-line-fields { display:grid; grid-template-columns:minmax(0,1fr) 135px; gap:15px; }
.delivery-line-fields select { width:100%; min-width:0; font-size:12px; }
.delivery-line-fields input { width:100%; }
.delivery-approve { display:flex; align-items:center; gap:10px; padding-top:15px; margin-top:15px; border-top:1px solid var(--line); font-size:12px; color:#425b35; }
.delivery-approve input { width:20px; height:20px; min-height:20px; margin:0; flex-shrink:0; }
.delivery-approve:has(input:disabled) { color:#909586; }
.delivery-partial { margin-top:19px; font-size:12px; color:var(--muted); }
.delivery-selection { font-size:13px; font-weight:650; color:var(--green); margin-top:16px; }
.delivery-correction { color:#a56d35; font-size:11px; padding-top:10px; }
.delivery-confirm-meta { display:flex; justify-content:space-between; gap:15px; font-size:12px; padding:16px; margin-bottom:20px; background:#f1f5e9; border-radius:10px; }
.delivery-result-line { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 0; border-bottom:1px solid var(--line); }
.delivery-result-line h3 { font-size:13px; }
.delivery-result-line p { font-size:11px; color:var(--muted); margin-top:5px; }
.delivery-result-stock { text-align:right; flex-shrink:0; }
.delivery-result-stock strong { display:block; font-size:21px; color:#456b37; }
.delivery-result-stock small { display:block; color:var(--muted); margin-top:5px; font-size:10px; }
.delivery-success { text-align:center; padding:20px 10px; }
.delivery-success>.icon { width:45px; height:45px; color:#547b41; margin-bottom:18px; }
.delivery-success p { font-size:13px; color:var(--muted); margin-top:12px; }
@media(max-width:760px) {
  .delivery-steps { gap:8px; justify-content:space-between; }
  .delivery-steps li { font-size:10px; gap:5px; }
  .delivery-upload { padding:24px 16px; }
  .delivery-upload .product-actions { flex-direction:column; }
  .delivery-line { padding:15px; }
  .delivery-line-fields { grid-template-columns:minmax(0,1fr); gap:12px; }
  .delivery-line-fields input { max-width:135px; }
  .delivery-line-heading .tag { white-space:normal; max-width:110px; text-align:center; }
  .delivery-confirm-meta { flex-direction:column; gap:7px; }
  .delivery-paper { padding:15px; margin-left:10px; margin-right:10px; }
  .delivery-paper-head { flex-direction:column; gap:10px; }
  .delivery-dialog .dialog-footer { flex-direction:column-reverse; }
  .delivery-dialog .dialog-footer>.btn { width:100%; white-space:normal; }
}

.delivery-upload-inline { display:flex; align-items:center; gap:15px; padding:18px; margin:0 0 24px; background:#f3f7ec; border:1px dashed #b0c3a1; border-radius:12px; }
.delivery-upload-inline .delivery-camera { width:43px; height:43px; margin:0; flex-shrink:0; border-radius:12px; }
.delivery-upload-inline h3 { font-size:14px; }
.delivery-upload-inline p { font-size:11px; color:var(--muted); margin-top:5px; }
.delivery-upload-inline .btn { margin-left:auto; }
.delivery-analysing { text-align:center; padding:35px 20px; }
.delivery-analysing p { font-size:12px; color:var(--muted); margin-top:10px; }
.delivery-spinner { display:block; width:40px; height:40px; border:3px solid #e1e9d8; border-top-color:var(--green); border-radius:50%; margin:0 auto 22px; animation:delivery-spin .8s linear infinite; }
@keyframes delivery-spin { to { transform:rotate(360deg); } }
@media(max-width:760px) {
  .delivery-upload-inline { flex-wrap:wrap; }
  .delivery-upload-inline>div { flex:1; }
  .delivery-upload-inline .btn { width:100%; margin-left:0; }
}

/* Optional barcode entry stays inside the current stock or order workflow. */
.workflow-scanner { grid-column:1/-1; margin:0 0 20px; }
.form-grid .workflow-scanner { margin:0; }
.workflow-scanner>.btn { max-width:100%; white-space:normal; }
.workflow-scan-panel { margin-top:12px; padding:18px; border:1px solid var(--line); border-radius:12px; background:#f8faf5; max-width:620px; }
.workflow-scan-panel[hidden] { display:none; }
.workflow-scan-panel .dialog-preview { margin:0 0 16px; }
.workflow-scan-panel input { width:100%; min-width:0; }
.workflow-scan-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:16px; }
.workflow-scan-error { color:#923e24; font-size:12px; margin-top:12px; overflow-wrap:anywhere; }
@media(max-width:760px) {
  .workflow-scan-panel { padding:14px; }
  .workflow-scan-actions>.btn { flex:1 1 140px; white-space:normal; }
}