:root { color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; color:#172033; background:#f5f7fb; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; }
button,input,select { font:inherit; }
label { display:grid; gap:7px; color:#44536a; font-size:14px; font-weight:600; }
label input,select,.one-time-result input,.login-qr-result input { width:100%; min-height:44px; border:1px solid #cbd5e1; border-radius:9px; padding:9px 11px; background:white; }
.page { width:min(100%,960px); margin:auto; padding:24px 18px 56px; }
.narrow { width:min(100%,760px); }
.topbar,.row,.section-head,.account-row { display:flex; align-items:center; gap:16px; }
.topbar,.section-head,.account-row,.between { justify-content:space-between; }
h1 { margin:4px 0 0; font-size:clamp(25px,5vw,36px); }
h2 { margin:0; font-size:20px; }
p { color:#647087; }
.eyebrow { color:#1765d8; font-size:13px; font-weight:700; }
.quiet-link,.text-button { color:#36516f; text-decoration:none; background:none; border:0; padding:8px; cursor:pointer; }
.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border-radius:10px; border:1px solid #1765d8; text-decoration:none; cursor:pointer; font-weight:700; }
.primary-button { background:#1765d8; color:white; }
.secondary-button { background:white; color:#1765d8; }
.full { width:100%; }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0 32px; }
.summary-grid div,.card,.empty-state { background:white; border:1px solid #dde4ee; border-radius:14px; padding:18px; }
.summary-grid strong,.summary-grid span { display:block; }
.summary-grid strong { font-size:24px; }
.summary-grid span { color:#647087; font-size:13px; margin-top:4px; }
.section-head { margin:20px 0 12px; }
.section-head p { margin:4px 0 0; }
.shelf-list,.stack { display:grid; gap:12px; }
.shelf-groups-v2 { display:grid; gap:24px; }
.shelf-group-v2 h3 { margin:0 0 10px; color:#36516f; font-size:16px; }
.shelf-row { display:flex; justify-content:space-between; align-items:center; background:white; color:#172033; text-decoration:none; border:1px solid #dde4ee; border-radius:12px; padding:16px; }
.shelf-row small,.level-view small { display:block; color:#647087; margin-top:4px; }
.shelf-entry { display:grid; grid-template-columns:minmax(0,1fr) auto 18px; gap:16px; }
.shelf-entry-main,.shelf-entry-state { min-width:0; }
.shelf-entry-main strong,.shelf-entry-main small { display:block; }
.shelf-entry-main strong { font-size:20px; color:#153a66; }
.shelf-entry-state { width:min(42vw,210px); text-align:right; }
.shelf-entry-state small { margin:0 0 7px; }
.shelf-entry-arrow { font-size:28px; color:#8ba0b8; }
.shelf-meter { display:block; height:7px; overflow:hidden; background:#e7edf5; border-radius:999px; }
.shelf-meter i { display:block; height:100%; background:#2f7ada; border-radius:inherit; }
.warehouse-empty { text-align:center; padding:34px 18px; }
.warehouse-empty .primary-button { margin-top:10px; }
.data-overview { margin-top:34px; padding-top:22px; border-top:1px solid #dde4ee; }
.data-overview h2 { font-size:16px; color:#647087; }
.data-overview .summary-grid { margin:12px 0 0; }
.account-row { margin-top:28px; color:#647087; }
.action-bar,.search-row,.card-actions { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
.search-row input { flex:1 1 220px; min-height:44px; border:1px solid #cbd5e1; border-radius:9px; padding:9px 11px; }
.upload-label { position:relative; overflow:hidden; }
.upload-label input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.upload-box { padding:14px; border:1px dashed #9bb6dc; border-radius:10px; background:#f2f7ff; }
.span-2 { grid-column:1 / -1; }
.result-list { display:grid; gap:8px; }
.result-row { display:grid; gap:4px; text-align:left; border:1px solid #dbe3ed; background:white; border-radius:9px; padding:11px; cursor:pointer; }
.result-row small,.selected-box small,.placement-card small,.stocktake-row small { display:block; color:#647087; }
.selected-box { padding:13px; background:#eef6ff; border:1px solid #b9d4f6; border-radius:10px; }
.selected-box > * { display:block; }
.placement-list { display:grid; gap:10px; }
.placement-card { display:flex; gap:12px; align-items:center; background:white; border:1px solid #dde4ee; border-radius:12px; padding:12px; }
.placement-card img { width:68px; height:68px; border-radius:9px; object-fit:cover; }
.placement-card .grow { flex:1; min-width:0; }
.placement-card .grow > * { display:block; margin:3px 0; }
.card-actions { margin:0; justify-content:flex-end; }
.danger-text { color:#b42318; }
.stocktake-row { display:grid; grid-template-columns:1fr 120px; gap:12px; align-items:center; }
.stocktake-row input { width:100%; min-height:44px; border:1px solid #cbd5e1; border-radius:9px; padding:9px; }
.mapping-list,.import-rows { display:grid; gap:8px; }
.mapping-row,.import-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,280px); gap:14px; align-items:center; padding:11px; border:1px solid #dde4ee; border-radius:9px; }
.mapping-row small,.import-row small { display:block; color:#647087; margin-top:3px; }
.mapping-row select,.import-row select { min-height:42px; border:1px solid #cbd5e1; border-radius:8px; background:white; padding:7px; }
.section-space { margin-top:24px; }
.member-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; }
.member-card small,.section-space small { display:block; color:#647087; margin-top:4px; }
.one-time-result,.login-qr-result { padding:14px; border:1px solid #f1c75b; background:#fffbeb; border-radius:10px; }
.one-time-result { display:grid; gap:10px; }
.login-qr-result { grid-column:1/-1; }
.login-qr-result img { display:block; width:min(100%,280px); aspect-ratio:1; margin:12px auto; border-radius:8px; }
.scan-login { text-align:center; padding-top:18vh; }
.check-row { display:flex; grid-template-columns:none; align-items:center; gap:10px; padding:10px 0; }
.check-row input { width:20px; min-height:20px; }
.action-error { border-color:#f3aaa5; background:#fff7f6; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid label { display:grid; gap:7px; color:#44536a; font-size:14px; font-weight:600; }
.form-grid input,.form-grid select { width:100%; min-height:44px; border:1px solid #cbd5e1; border-radius:9px; padding:9px 11px; background:white; }
.limit-note { color:#647087; font-size:13px; }
.face-card { display:grid; gap:16px; }
.levels { padding-left:12px; border-left:3px solid #dce8fa; }
.level-card { padding:14px; background:#f7f9fc; border-radius:10px; }
.level-card .form-grid { margin-top:10px; }
.error { padding:12px; border-radius:9px; background:#fff0f0; color:#b42318; }
.face-tabs { display:flex; gap:8px; overflow:auto; margin:22px 0 14px; padding-bottom:2px; }
.face-tabs button,.pill { white-space:nowrap; text-decoration:none; color:#1765d8; background:#eaf2ff; border:1px solid transparent; border-radius:999px; padding:8px 12px; font:inherit; cursor:pointer; }
.face-tabs button[aria-selected="true"] { color:white; background:#1765d8; border-color:#1765d8; font-weight:700; }
.levels-view { display:grid; gap:10px; margin-top:14px; }
.level-view { display:grid; grid-template-columns:minmax(110px,180px) 1fr; gap:14px; align-items:center; padding:12px; border-radius:10px; background:#f7f9fc; }
.slots { display:flex; gap:6px; flex-wrap:wrap; }
.slots span { min-width:38px; padding:7px; text-align:center; border:1px solid #cbd5e1; border-radius:7px; background:white; }
.rack-mirror { display:grid; gap:16px; }
.rack-face { overflow:hidden; border:1px solid #cbd7e6; border-radius:16px; background:white; box-shadow:0 8px 24px rgba(33,59,91,.07); }
.rack-face-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:16px 18px; border-bottom:1px solid #dce4ee; background:#f8fbff; }
.rack-face-heading .eyebrow { margin:0 0 3px; }
.rack-face-heading > small { color:#7b899c; }
.rack-levels { display:grid; }
.rack-level-v2 { display:grid; grid-template-columns:88px minmax(0,1fr); border-bottom:4px solid #8092a8; background:#edf2f7; }
.rack-level-v2:last-child { border-bottom:0; }
.rack-level-label { display:flex; flex-direction:column; justify-content:center; gap:3px; padding:12px 10px; border-right:4px solid #8092a8; background:#f7f9fc; }
.rack-level-label strong { color:#153a66; font-size:18px; }
.rack-level-label span,.rack-level-label small { color:#647087; font-size:12px; line-height:1.3; }
.rack-grid-scroll { min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; }
.rack-grid-v2 { display:grid; grid-template-columns:repeat(var(--slot-count),minmax(108px,1fr)); grid-auto-rows:minmax(112px,auto); position:relative; min-width:max(100%,calc(var(--slot-count) * 108px)); background:#dce4ee; gap:1px; }
.rack-placement-v2,.rack-empty { grid-column:var(--slot-start) / span var(--slot-span); min-width:0; }
.rack-placement-v2 { position:relative; display:flex; align-items:center; gap:10px; padding:12px; overflow:hidden; background:#e9f4ff; border:2px solid #2f7ada; color:#153a66; }
.rack-placement-v2 img,.rack-photo-placeholder { flex:0 0 46px; width:46px; height:46px; border-radius:9px; object-fit:cover; }
.rack-photo-placeholder { display:grid; place-items:center; background:#d7e6f7; color:#7288a1; font-size:12px; }
.rack-product-copy { min-width:0; display:grid; gap:3px; }
.rack-product-copy strong,.rack-product-copy small,.rack-product-copy b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rack-product-copy strong { font-size:14px; }
.rack-product-copy small { color:#5e7087; font-size:12px; }
.rack-product-copy b { color:#0f5ab8; font-size:14px; }
.rack-position-tag { position:absolute; top:5px; right:7px; color:#607895; font-size:10px; }
.rack-empty { display:grid; place-items:center; align-content:center; gap:4px; min-height:112px; background:#fff; color:#91a0b2; border:1px dashed #b9c5d3; }
.rack-empty small { font-size:12px; }
.rack-empty strong { font-size:16px; font-weight:600; }
.rack-undivided { display:flex; gap:1px; min-height:112px; overflow-x:auto; background:#dce4ee; }
.rack-undivided .rack-placement-v2 { flex:0 0 min(260px,78vw); }
.rack-undivided .undivided-empty { flex:1 0 180px; }
.legacy-placement-actions { margin-top:24px; border:1px solid #dde4ee; border-radius:12px; background:white; }
.legacy-placement-actions > summary { cursor:pointer; padding:14px 16px; color:#36516f; font-weight:700; }
.legacy-placement-actions > p { margin:0; padding:0 16px 12px; font-size:13px; }
.legacy-placement-actions .placement-list { padding:0 12px 12px; }
@media (max-width:640px) {
  .page { padding:18px 14px 42px; }
  .summary-grid { grid-template-columns:repeat(2,1fr); }
  .form-grid,.form-grid.two { grid-template-columns:1fr; }
  .span-2 { grid-column:auto; }
  .level-view { grid-template-columns:1fr; }
  .topbar { align-items:flex-start; }
  .placement-card { align-items:flex-start; flex-wrap:wrap; }
  .card-actions { width:100%; justify-content:space-between; }
  .stocktake-row { grid-template-columns:1fr 100px; }
  .mapping-row,.import-row { grid-template-columns:1fr; }
  .member-card { grid-template-columns:1fr; }
  .shelf-entry { grid-template-columns:minmax(0,1fr) 18px; gap:10px; }
  .shelf-entry-state { grid-column:1 / -1; grid-row:2; width:100%; text-align:left; }
  .shelf-entry-arrow { grid-column:2; grid-row:1; }
  .rack-level-v2 { grid-template-columns:66px minmax(0,1fr); }
  .rack-level-label { padding:10px 7px; }
  .rack-grid-v2 { grid-template-columns:repeat(var(--slot-count),minmax(96px,1fr)); min-width:max(100%,calc(var(--slot-count) * 96px)); }
  .rack-placement-v2 { padding:10px 8px; gap:7px; }
  .rack-placement-v2 img,.rack-photo-placeholder { flex-basis:38px; width:38px; height:38px; }
}