: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:minmax(0,1fr) minmax(120px,150px); gap:14px; align-items:center; }
.stocktake-row input { width:100%; min-height:44px; border:1px solid #cbd5e1; border-radius:9px; padding:9px; }
.stocktake-count-field { gap:5px; }
.stocktake-count-field > span:first-child { color:#44536a; font-size:12px; }
.stocktake-summary { position:sticky; top:8px; z-index:2; padding:11px 13px; border:1px solid #b9d4f6; border-radius:10px; background:#eef6ff; color:#245486; font-weight:700; box-shadow:0 5px 18px rgba(33,59,91,.08); }
.item-save-status { min-height:18px; color:#647087; font-size:12px; font-weight:700; }
.item-save-status[data-state="saved"] { color:#26713d; }
.item-save-status[data-state="error"] { color:#b42318; }
.item-save-status[data-state="saving"],.item-save-status[data-state="queued"] { color:#1765d8; }
.item-save-retry { justify-self:start; padding:2px 0; color:#b42318; font-size:12px; }
.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; width:100%; padding:12px; overflow:hidden; text-align:left; background:#e9f4ff; border:2px solid #2f7ada; color:#153a66; cursor:pointer; }
.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:#718198; border:1px dashed #aab8c8; cursor:pointer; }
.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; }
.rack-placement-v2:hover,.rack-placement-v2:focus-visible { background:#dceeff; outline:3px solid rgba(23,101,216,.24); outline-offset:-3px; }
.rack-empty:hover,.rack-empty:focus-visible { background:#f5f9ff; color:#36516f; outline:3px solid rgba(23,101,216,.2); outline-offset:-3px; }
.rack-empty.rack-empty-disabled { pointer-events:none; cursor:default; background:#f1f3f6; color:#7a8798; border-style:solid; }
.operation-sheet { width:min(100%,760px); max-width:none; max-height:min(92vh,900px); margin:auto auto 0; padding:0; overflow:hidden; border:0; border-radius:20px 20px 0 0; box-shadow:0 -16px 50px rgba(18,39,66,.24); color:#172033; background:#f7f9fc; }
.operation-sheet::backdrop { background:rgba(15,29,49,.48); backdrop-filter:blur(2px); }
.sheet-close-row { display:flex; justify-content:flex-end; padding:8px 12px 0; background:white; }
.sheet-body { max-height:calc(92vh - 48px); overflow-y:auto; overscroll-behavior:contain; padding:8px 18px max(28px,env(safe-area-inset-bottom)); }
.sheet-body header h2,.sheet-body h3 { margin:4px 0; }
.compact-stack { gap:9px; }
.compact-card { padding:14px; border-radius:12px; }
.compact-card h3 { font-size:17px; }
.sheet-action-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.location-line { margin:6px 0 0; color:#36516f; font-weight:700; }
.save-status { min-height:20px; margin:0; color:#26713d; font-size:14px; font-weight:700; }
.save-status.is-error { color:#b42318; }
.product-card-head { display:grid; grid-template-columns:84px minmax(0,1fr); align-items:center; gap:14px; }
.product-card-head p { margin:5px 0 0; }
.product-card-photo { display:grid; place-items:center; width:84px; height:84px; overflow:hidden; border-radius:14px; background:#e6edf6; color:#718198; font-size:12px; }
.product-card-photo img { width:100%; height:100%; object-fit:cover; }
.product-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.product-facts > div { padding:11px; border:1px solid #dce4ee; border-radius:10px; background:white; }
.product-facts dt { color:#647087; font-size:12px; }
.product-facts dd { margin:5px 0 0; color:#243750; font-weight:700; overflow-wrap:anywhere; }
.card-primary-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.card-primary-actions button,.card-action-file { display:flex; align-items:center; justify-content:center; min-height:48px; padding:9px 10px; text-align:center; border:1px solid #b7c9df; border-radius:10px; background:white; color:#245486; font-weight:700; cursor:pointer; }
.card-primary-actions .danger-text { grid-column:1/-1; color:#b42318; border-color:#e7b6b2; background:#fff8f7; }
.card-action-file { position:relative; overflow:hidden; }
.card-action-file input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.card-action-file.is-disabled { color:#68768a; background:#eef1f5; cursor:default; }
.barcode-summary { align-self:end; padding:8px 2px; color:#647087; font-size:13px; }
.product-photo-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.product-photo-list figure { position:relative; margin:0; aspect-ratio:1; overflow:hidden; border:1px solid #dce4ee; border-radius:10px; background:#eef2f7; }
.product-photo-list img { width:100%; height:100%; object-fit:cover; }
.product-photo-list figure button { position:absolute; right:3px; bottom:3px; padding:5px 7px; border-radius:7px; background:rgba(255,255,255,.94); }
.product-photo-list > p { grid-column:1/-1; margin:0; }
.just-saved { animation:just-saved 2.6s ease-out; }
.saved-toast { position:fixed; z-index:20; left:50%; bottom:max(22px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100vw - 28px); padding:11px 16px; border-radius:999px; background:#1765d8; color:white; box-shadow:0 9px 30px rgba(23,101,216,.32); font-weight:700; text-align:center; }
@keyframes just-saved { 0%,35% { background:#fff2a8; border-color:#d89f16; box-shadow:0 0 0 5px rgba(240,187,35,.24); } 100% { box-shadow:none; } }
.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; }
.lead-copy { margin:0; padding:13px 15px; border-left:4px solid #1765d8; border-radius:8px; background:#eef5ff; color:#36516f; line-height:1.65; }
.structure-entry { min-height:44px; display:inline-flex; align-items:center; }
.pending-structure { color:#9a5b0b; font-weight:700; }
.structure-warning { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin:14px 0 18px; padding:13px 15px; border:1px solid #efc06c; border-radius:12px; background:#fff9e9; color:#68420d; }
.structure-warning a { color:#91510a; font-weight:800; }
.structure-editor { margin:18px 0 24px; padding:18px; border:2px solid #89add8; border-radius:16px; background:#f4f8fd; }
.structure-editor[hidden] { display:none; }
.structure-editor .section-head { margin:0; }
.structure-saved { padding:10px 12px; border-radius:9px; background:#eaf8ee; }
.preset-card h3,.structure-face h3 { margin:3px 0; }
.preset-card p { margin:5px 0 0; color:#647087; }
.preset-actions,.structure-actions { display:flex; flex-wrap:wrap; gap:8px; }
.preset-actions button { min-height:44px; padding:9px 14px; border:1px solid #9ab7d8; border-radius:9px; background:white; color:#245486; font:inherit; font-weight:700; cursor:pointer; }
.structure-face { display:grid; gap:14px; }
.inline-save-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; }
.inline-save-form label,.slot-label-list label { display:grid; gap:5px; color:#44536a; font-size:13px; font-weight:600; }
.inline-save-form input,.slot-label-list input { width:100%; min-height:42px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; background:white; }
.structure-levels { padding-left:12px; border-left:3px solid #cbdcf0; }
.structure-level { display:grid; gap:11px; padding:14px; border:1px solid #d4deea; border-radius:11px; background:white; }
.compact-structure-form { align-items:end; }
.compact-structure-form button { align-self:end; min-height:42px; }
.slot-label-editor { padding:9px 11px; border-radius:8px; background:#f5f7fa; }
.slot-label-editor summary { cursor:pointer; color:#51647b; font-size:13px; }
.slot-label-list { display:grid; gap:8px; margin-top:10px; }
.slot-label-list form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px; }
.add-level-form,.add-face-form { display:grid; gap:12px; border-style:dashed; background:#fbfdff; }
.compact-empty { padding:18px; }
.permission-note { padding:13px 15px; border:1px solid #d8dee8; border-radius:10px; background:#f7f8fa; color:#536176; line-height:1.55; }
.registration-draft-notice { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:14px 0 18px; border-color:#efc06c; background:#fff9e9; }
.registration-draft-notice[hidden] { display:none; }
.registration-draft-notice > div:first-child { display:grid; gap:4px; }
.registration-draft-notice small { color:#74521d; }
.draft-conflict-actions { border-color:#efb25b; background:#fff7e6; }
.draft-conflict-actions p { margin:0; color:#74521d; }
@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; }
  .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; }
  .operation-sheet { width:100%; max-height:96vh; }
  .sheet-body { max-height:calc(96vh - 48px); padding-inline:14px; }
  .product-facts { grid-template-columns:1fr; }
  .structure-warning { grid-template-columns:1fr; }
  .structure-editor { padding:14px 10px; }
  .structure-face > header { align-items:flex-start; }
  .inline-save-form,.slot-label-list form { grid-template-columns:1fr; }
  .registration-draft-notice { align-items:stretch; flex-direction:column; }
}