:root {
  --ink:#343434; --muted:#746b60; --line:#eee7e8; --cream:#FAF7F2;
  --sand:#D8BFA3; --sand-soft:#f1e8dd; --sand-dark:#343434;
  --shadow:0 5px 24px #34343406;
  font-family:"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--cream);
  font-synthesis:none; scroll-behavior:smooth; scroll-padding-top:94px;
}
* { box-sizing:border-box; }
body { margin:0; }
button,input,textarea { font:inherit; }
button,label.button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:wait; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,.button:focus-within {
  outline:3px solid #343434; outline-offset:4px;
}
.sidebar {
  position:fixed; inset:0 auto 0 0; width:92px; z-index:9; background:white;
  border-right:1px solid var(--line); padding:22px 10px; display:flex; flex-direction:column; align-items:center;
}
.brand { display:flex; align-items:center; gap:9px; font-size:25px; font-weight:750; letter-spacing:-1.2px; }
.brand-icon { width:39px; height:39px; border-radius:12px; background:#faf7f2 url(icon.svg) center/34px no-repeat; color:transparent; flex-shrink:0; }
.brand-light { font-weight:400; }
.sidebar .brand { flex-direction:column; gap:7px; font-size:18px; }
.sidebar .brand-icon { width:44px; height:44px; background-size:40px; }
.sidebar nav { width:100%; margin-top:43px; display:grid; gap:12px; }
.nav-item { display:flex; flex-direction:column; align-items:center; gap:8px; padding:13px 3px; font-size:11px; font-weight:600; border-radius:13px; color:#746b60; }
.nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.nav-item:hover { background:#faf5f6; color:var(--ink); }
.nav-item.active { background:#faf7f2; color:#343434; }
.sidebar-foot { margin-top:auto; text-align:center; font-size:10px; color:#877c6f; line-height:1.7; }
.sidebar-foot i { display:block; margin:0 auto 6px; height:6px; width:6px; border-radius:50%; background:#877c6f; }
.topbar { margin-left:92px; height:78px; padding:0 28px; display:flex; align-items:center; gap:22px; background:#ffffffeb; border-bottom:1px solid var(--line); }
.topbar .brand { display:none; }
.topbar-title { font-size:14px; font-weight:600; }
.topbar-title span { font-weight:400; color:#877c6f; margin-right:7px; }
.local-badge { margin-left:auto; font-size:12px; display:flex; align-items:center; gap:8px; color:var(--muted); }
.local-badge i { width:6px; height:6px; border-radius:50%; background:#877c6f; }
.button { min-height:48px; border:1px solid var(--line); border-radius:11px; padding:12px 17px; font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:7px; background:white; color:var(--ink); text-align:center; transition:background .15s,transform .15s; }
.button:hover { background:#faf7f2; }
.button:active { transform:translateY(1px); }
.primary { background:#343434; color:white; border-color:#343434; }
.primary:hover { background:#171717; }
.secondary { background:white; }
.danger { color:#343434; background:#f1e8dd; border-color:#e8ddd0; }
.mode-button { background:#343434; color:white; border-color:#343434; font-size:13px; }
.mode-button:hover { background:#171717; }
.mode-button[aria-pressed=true] { background:#faf7f2; border-color:#d8bfa3; color:#615b52; }
main { max-width:1680px; margin:0 auto 0 92px; padding:26px 28px 0; }
.intro { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:24px; }
.eyebrow { font-size:10px; letter-spacing:1.3px; font-weight:700; color:var(--muted); }
.intro .eyebrow { letter-spacing:.4px; font-size:11px; color:#343434; }
h1 { font-size:27px; line-height:1.25; letter-spacing:-.8px; font-weight:650; margin:8px 0; }
h1 span { color:var(--ink); }
.intro p { font-size:13px; color:var(--muted); line-height:1.7; margin:0; }
.jump-search { background:#f1e8dd; color:#615b52; border-color:#e8ddd0; min-width:130px; }
h2 { font-size:21px; letter-spacing:-.4px; font-weight:650; margin:7px 0; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 292px; gap:20px; align-items:start; }
.rack-panel,.catalog { border:1px solid var(--line); background:white; border-radius:18px; box-shadow:var(--shadow); overflow:hidden; }
.panel-heading { padding:20px 22px 17px; display:flex; justify-content:space-between; gap:12px; align-items:center; }
.panel-heading .eyebrow { font-size:9px; color:#877c6f; }
.panel-heading h2 { margin:5px 0 0; font-size:22px; }
.pill { white-space:nowrap; font-size:12px; font-weight:600; background:#f1e8dd; border:1px solid #e8ddd0; border-radius:25px; padding:8px 13px; color:#615b52; }
.photo-wrap { position:relative; margin:0 14px; background:#e8ddd0; isolation:isolate; border-radius:12px; overflow:hidden; }
#shelf-photo { display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.markers { position:absolute; inset:0; pointer-events:none; }
.marker { position:absolute; transform:translate(-50%,-50%); border:3px solid white; outline:1px solid #615b52; width:48px; height:48px; border-radius:50%; background:#D8BFA3; color:#171717; font-weight:750; font-size:17px; box-shadow:0 3px 14px #34343444; pointer-events:auto; touch-action:manipulation; display:grid; place-items:center; z-index:2; }
.marker:hover,.marker.selected { background:#171717; color:white; outline-color:#D8BFA3; box-shadow:0 0 0 7px #d8bfa366,0 3px 14px #34343444; }
.marker:focus-visible { outline:3px solid #1e1a1e; outline-offset:5px; }
.marker.editable { touch-action:none; cursor:grab; }
.marker.dragging { cursor:grabbing; z-index:5; background:#171717; color:white; }
.photo-label { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); background:#fffdf9ef; font-size:9px; letter-spacing:1.2px; border:1px solid #d8bfa366; border-radius:7px; padding:10px 13px; white-space:nowrap; pointer-events:none; color:#615b52; }
.rack-footer { display:flex; align-items:center; justify-content:center; gap:9px; padding:16px; }
.rack-footer p { font-size:12px; color:var(--muted); margin:0; line-height:1.6; }
.instruction-dot { width:10px; height:10px; flex-shrink:0; background:#d8bfa3; border:2px solid #fff; outline:1px solid #d8bfa3; border-radius:50%; }
.manager-tools { display:flex; gap:10px; padding:0 14px 16px; flex-wrap:wrap; }
.manager-tools .button { flex:1; }
.catalog { padding:23px 19px; position:sticky; top:20px; }
.catalog-heading h2 { font-size:22px; margin:8px 0; }
.catalog-heading p { color:var(--muted); font-size:12px; line-height:1.8; margin-bottom:19px; }
.search { display:flex; align-items:center; border:1px solid #e8ddd0; border-radius:12px; gap:9px; padding:0 12px; background:#fcf9fa; }
.search span { font-size:26px; color:#877c6f; }
.search input { width:100%; min-width:0; border:0; background:transparent; padding:15px 0; color:var(--ink); font-size:14px; outline-offset:1px; }
.result-count { font-size:11px; color:var(--muted); margin:16px 0 12px; }
.product-list { display:flex; flex-direction:column; gap:11px; max-height:min(64vh,680px); overflow:auto; padding:3px; margin:0 -3px; }
.product-card { width:100%; text-align:left; display:flex; gap:11px; align-items:center; border:1px solid #e8ddd0; border-radius:14px; background:white; padding:15px 11px; color:var(--ink); min-height:96px; }
.product-card:hover,.product-card.selected { border-color:#d8bfa3; background:#faf7f2; box-shadow:0 3px 12px #877c6f10; }
.product-index { flex-shrink:0; width:39px; height:49px; display:grid; place-items:center; background:#faf7f2; border:1px solid #e8ddd0; border-radius:11px; color:#615b52; font-weight:700; }
.product-info { min-width:0; flex:1; }
.product-info strong { display:block; font-size:14px; line-height:1.5; font-weight:650; overflow-wrap:anywhere; }
.product-info small { display:block; color:var(--muted); font-size:11px; margin:4px 0 8px; line-height:1.5; }
.product-info b { color:#343434; font-size:16px; font-weight:650; }
.product-info em { display:block; font-size:12px; font-style:normal; color:#615b52; margin-top:7px; }
.product-arrow { color:#877c6f; }
.empty-state { text-align:center; padding:35px 8px; border:1px dashed #e8ddd0; border-radius:14px; background:#fffafb; }
.empty-symbol { font-size:37px; color:#d8bfa3; }
.empty-state strong { display:block; margin-top:12px; font-size:15px; }
.empty-state p { font-size:12px; color:var(--muted); line-height:1.9; }
.catalog-bottom { border-top:1px solid var(--line); display:flex; gap:12px; padding-top:19px; margin-top:23px; align-items:center; color:#877c6f; }
.catalog-bottom>span { font-size:25px; }
.catalog-bottom p { font-size:11px; line-height:1.8; margin:0; }
.backup-bar { margin-top:23px; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.backup-bar strong { font-size:14px; font-weight:600; }
.backup-bar p { font-size:12px; color:var(--muted); line-height:1.7; margin:7px 0 0; }
.backup-actions { display:flex; gap:8px; }
.backup-actions .button { font-size:12px; white-space:nowrap; }
.page-footer { display:flex; justify-content:space-between; gap:20px; padding:22px 0 30px; font-size:10px; color:#877c6f; }
.page-footer>span:first-child { font-size:15px; color:#615b52; font-weight:600; }
.page-footer>span:first-child span { font-size:10px; font-weight:400; margin-left:10px; color:#877c6f; }
.notice { margin-bottom:19px; border:1px solid #e8ddd0; background:#faf7f2; color:#615b52; padding:14px 17px; border-radius:12px; font-size:13px; line-height:1.8; }
.notice button { margin-left:10px; }
.placing { outline:3px solid #615b52; outline-offset:3px; cursor:crosshair; }
dialog { width:min(540px,calc(100% - 32px)); max-height:90dvh; overflow:auto; border:1px solid var(--line); border-radius:22px; box-shadow:0 20px 75px #34343433; padding:27px; color:var(--ink); background:white; }
dialog::backdrop { background:#34343466; backdrop-filter:blur(3px); }
.dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:22px; }
.dialog-heading h2 { margin:7px 0; overflow-wrap:anywhere; }
.icon-button { width:46px; height:46px; border:1px solid #e8ddd0; border-radius:50%; background:#faf7f2; font-size:27px; color:#615b52; flex-shrink:0; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
form label { display:block; font-size:13px; font-weight:600; }
form input,textarea { width:100%; margin-top:9px; padding:14px 12px; border:1px solid #d8bfa3; border-radius:11px; color:var(--ink); background:white; font-size:16px; }
textarea { resize:vertical; }
.optional { font-weight:400; color:var(--muted); font-size:11px; }
.field-hint { font-size:12px; color:var(--muted); line-height:1.7; margin:13px 0 23px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:24px; flex-wrap:wrap; }
.form-error { font-size:13px; color:#615b52; line-height:1.6; }
.detail-price { font-size:38px; color:#343434; letter-spacing:-1.2px; font-weight:700; margin:7px 0 24px; }
.detail-code { font-size:12px; color:var(--muted); margin:0; }
.detail-meta { background:#f8f6f5; border:1px solid #f0e9eb; border-radius:13px; padding:17px; margin-top:15px; line-height:1.8; font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.detail-min { background:#faf7f2; color:#615b52; border-color:#e8ddd0; font-weight:600; }
.detail-label { display:block; font-size:10px; font-weight:600; letter-spacing:1px; color:var(--muted); margin-bottom:6px; }
.confirm-text { line-height:1.8; font-size:14px; white-space:pre-line; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); background:#343434; color:white; box-shadow:0 6px 30px #0003; padding:15px 21px; border-radius:13px; z-index:20; font-size:14px; line-height:1.6; }
.storage-error { color:#615b52; }
@media(min-width:1800px) { main { margin-right:auto; } }
@media(max-width:1000px) {
  .sidebar { display:none; }
  .topbar { margin-left:0; padding:0 22px; }
  .topbar .brand { display:flex; }
  .topbar-title { display:none; }
  main { margin-left:0; padding:24px 22px 0; }
  .workspace { grid-template-columns:minmax(0,1fr) 280px; gap:17px; }
}
@media(max-width:760px) {
  :root { scroll-padding-top:89px; }
  .topbar { position:sticky; top:0; z-index:10; height:74px; padding:0 16px; gap:12px; }
  .brand { font-size:24px; }
  .brand-icon { width:36px; height:36px; background-size:32px; }
  .local-badge { display:none; }
  .mode-button { margin-left:auto; min-height:46px; padding:11px 12px; font-size:12px; }
  main { padding:21px 12px 0; }
  .intro { flex-wrap:wrap; gap:14px; margin-bottom:19px; padding:0 4px; }
  h1 { font-size:24px; letter-spacing:-.6px; margin:7px 0 8px; }
  .intro p { font-size:12px; }
  .intro .eyebrow { font-size:10px; }
  .jump-search { min-height:44px; padding:10px 13px; font-size:13px; }
  .workspace { grid-template-columns:1fr; gap:18px; }
  .panel-heading { padding:17px 17px 15px; }
  .panel-heading h2 { font-size:21px; }
  .photo-wrap { margin:0 9px; border-radius:11px; }
  .photo-label { font-size:8px; letter-spacing:.6px; padding:9px 10px; }
  .rack-footer { padding:15px 12px; align-items:flex-start; }
  .rack-footer p { font-size:12px; }
  .instruction-dot { margin-top:4px; }
  .manager-tools { padding:0 10px 12px; }
  .manager-tools .button { padding:12px 10px; font-size:13px; }
  .catalog { position:static; padding:23px 18px; }
  .catalog-heading p { font-size:13px; margin-bottom:17px; }
  .catalog-bottom { display:none; }
  .search input { font-size:16px; }
  .product-list { max-height:500px; }
  .product-card { padding:16px 13px; }
  .product-info strong { font-size:15px; }
  .product-info small { font-size:12px; }
  .product-info b { font-size:17px; }
  .backup-bar { display:block; margin-top:10px; padding:23px 5px; }
  .backup-actions { margin-top:18px; }
  .backup-actions .button { flex:1; }
  .page-footer { display:block; line-height:2.2; padding-left:5px; }
  .page-footer>span { display:block; }
  .page-footer>span:first-child span { margin-left:7px; }
  .notice { font-size:12px; margin-bottom:18px; }
  .notice button { display:block; margin:12px 0 0; }
  dialog { margin:auto auto 0; width:100%; max-width:100%; max-height:92dvh; padding:24px 20px; border-radius:23px 23px 0 0; }
  .form-grid { grid-template-columns:1fr; }
  .dialog-actions .button { flex:1; }
  .detail-price { font-size:35px; }
  .toast { width:max-content; max-width:calc(100% - 28px); }
}
@media(prefers-reduced-motion:reduce) {
  :root { scroll-behavior:auto; }
  * { scroll-behavior:auto!important; transition:none!important; }
}


/* V1.2: fitted photo coordinates belong to the image, never the letterbox. */
.workspace { grid-template-columns:minmax(0,13fr) minmax(0,7fr); }
.intro>.search { width:min(380px,44%); flex-shrink:0; background:white; }
.photo-actions { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.photo-actions .button { min-height:44px; font-size:13px; padding:10px 12px; }
.panel-heading { flex-wrap:wrap; }
.photo-viewport { height:clamp(300px,calc(100dvh - 345px),560px); margin:0 14px; background:#f2ede6; border:1px solid #e8ddd0; border-radius:12px; display:grid; place-items:center; overflow:hidden; }
.photo-wrap { margin:0; flex-shrink:0; border-radius:0; background:transparent; }
#shelf-photo { width:100%; height:100%; object-fit:contain; }
.photo-label { bottom:10px; max-width:calc(100% - 16px); white-space:normal; text-align:center; font-size:8px; padding:7px 9px; }
.catalog { position:static; min-width:0; }
.catalog-heading p { margin-bottom:14px; }
.product-list { max-height:400px; }
.catalog.has-selection .product-list { max-height:230px; }
.selected-panel { border:1px solid #D8BFA3; background:#FAF7F2; border-radius:13px; padding:17px; margin:18px 0; }
.selected-panel .dialog-heading { margin-bottom:11px; }
.selected-panel h2 { font-size:21px; }
.selected-panel .detail-price { font-size:32px; margin-bottom:16px; }
.selected-panel .detail-meta { padding:12px; }
.selected-panel .dialog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; }
.selected-panel .dialog-actions .button { flex:1; font-size:13px; padding:11px 10px; }
.product-card.selected { border:2px solid #343434; padding:14px 10px; background:#f1e8dd; }
.marker.selected { background:#171717; outline:2px solid #D8BFA3; }
.photo-dialog { width:min(1500px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:96dvh; padding:18px; margin:auto; border-radius:16px; overflow:hidden; }
.zoom-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.zoom-heading h2 { font-size:21px; margin:5px 0 0; }
.zoom-toolbar { display:flex; justify-content:space-between; align-items:center; gap:14px; margin:12px 0; }
.zoom-toolbar>span { color:#746b60; font-size:12px; line-height:1.6; }
.zoom-controls { display:flex; gap:7px; flex-shrink:0; }
.zoom-controls .button { min-width:46px; padding:10px; }
.zoom-viewport { height:calc(90dvh - 145px); overflow:auto; background:#f2ede6; border:1px solid #e8ddd0; border-radius:9px; overscroll-behavior:contain; }
.zoom-viewport .photo-wrap { margin:0 auto; }
@media(max-width:1000px) and (min-width:761px) {
 .workspace { grid-template-columns:minmax(0,13fr) minmax(0,7fr); }
 .catalog { padding:20px 14px; }
}
@media(max-width:760px) {
 .intro { display:block; }
 .intro>.search { width:100%; margin-top:16px; }
 .workspace { grid-template-columns:1fr; }
 .photo-viewport { height:clamp(300px,52dvh,480px); margin:0 9px; }
 .photo-actions { gap:7px; }
 .photo-actions .button { min-height:46px; font-size:12px; }
 .selected-panel { display:none; }
 .photo-dialog { width:100%; max-width:100%; padding:14px 10px; border-radius:15px; margin:auto; }
 .zoom-toolbar { align-items:flex-start; gap:8px; }
 .zoom-toolbar>span { font-size:11px; }
 .zoom-controls { gap:4px; }
 .zoom-controls .button { min-width:44px; }
 .zoom-viewport { height:calc(88dvh - 170px); }
}

/* Keep the internal dashboard focused on the shelf and prices. */
.catalog-bottom { display:none; }

/* Cloud controls reuse the V1.2 palette and layout. No data is visible before login. */
.cloud-locked .sidebar,.cloud-locked .topbar,.cloud-locked main,.cloud-locked #cloud-tools { display:none!important; }
.auth-panel { max-width:440px; margin:8vh auto; padding:28px; background:white; border:1px solid var(--line); border-radius:18px; }
.auth-panel h1 { font-size:26px; margin:25px 0 10px; }
.auth-panel p { line-height:1.6; color:var(--muted); }
.auth-panel form { display:grid; gap:18px; }
.auth-panel label { display:grid; gap:8px; }
.auth-panel input { width:100%; min-height:48px; }
.cloud-tools { margin:16px 28px 0 120px; padding:14px; border:1px solid var(--sand); border-radius:12px; background:var(--cream); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cloud-tools>span { font-size:13px; }
.cloud-tools>div { display:flex; flex-wrap:wrap; gap:8px; }
.cloud-tools .button { min-height:44px; font-size:13px; }
@media(max-width:760px) {
 .auth-panel { margin:24px 12px; padding:22px; }
 .cloud-tools { margin:12px; }
 .cloud-tools>div { width:100%; }
 .cloud-tools .button { flex:1; }
}

/* V1.4: one page scroll on mobile; header never overlays shelf content. */
.ui-icon { width:20px; height:20px; display:inline-block; flex-shrink:0; vertical-align:middle; }
.shelf-bar { margin:0 0 20px; padding:16px; border:1px solid var(--sand); border-radius:14px; background:white; display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.shelf-bar label { display:grid; gap:6px; font-weight:600; min-width:min(100%,240px); }
.shelf-bar select { min-height:48px; padding:10px; border:1px solid var(--sand); border-radius:9px; background:var(--cream); color:var(--ink); font:inherit; width:100%; }
#shelf-actions { display:flex; gap:8px; flex-wrap:wrap; }
.cloud-locked .shelf-bar,.cloud-locked .bottom-nav { display:none!important; }
.marker { background:transparent; border:0; outline:0; box-shadow:none; width:44px; height:44px; }
.marker>span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:2px solid white; outline:1px solid var(--ink); color:var(--ink); background:var(--sand); box-shadow:0 2px 6px #0003; font-size:13px; }
.marker:hover,.marker.selected,.marker.dragging { background:transparent; outline:0; box-shadow:none; }
.marker.selected>span,.marker:hover>span { background:var(--ink); color:white; outline:2px solid var(--sand); }
.photo-wrap { overflow:visible; }
.photo-viewport { padding:22px; }
.bottom-nav { display:none; }

@media(max-width:760px){
 :root { scroll-padding-top:16px; }
 body { padding-bottom:calc(82px + env(safe-area-inset-bottom,0px)); }
 .topbar { position:static; height:auto; min-height:74px; }
 .shelf-bar { margin:0 0 20px; }
 .shelf-bar label { width:100%; }
 .product-list,.catalog.has-selection .product-list { max-height:none; overflow:visible; }
 .bottom-nav { position:fixed; z-index:12; bottom:0; left:0; right:0; display:flex; justify-content:space-around; background:#FAF7F2; border-top:1px solid var(--sand); padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)); }
 .bottom-nav a { min-height:52px; min-width:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:12px; font-weight:650; }
 dialog { max-height:calc(90dvh - 65px); }
}

/* V1.4: one page scroll on mobile; header never overlays shelf content. */
.ui-icon { width:20px; height:20px; display:inline-block; flex-shrink:0; vertical-align:middle; }
.shelf-bar { margin:0 0 20px; padding:16px; border:1px solid var(--sand); border-radius:14px; background:white; display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.shelf-bar label { display:grid; gap:6px; font-weight:600; min-width:min(100%,240px); }
.shelf-bar select { min-height:48px; padding:10px; border:1px solid var(--sand); border-radius:9px; background:var(--cream); color:var(--ink); font:inherit; width:100%; }
#shelf-actions { display:flex; gap:8px; flex-wrap:wrap; }
.cloud-locked .shelf-bar,.cloud-locked .bottom-nav { display:none!important; }
.marker { background:transparent; border:0; outline:0; box-shadow:none; width:44px; height:44px; }
.marker>span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:2px solid white; outline:1px solid var(--ink); color:var(--ink); background:var(--sand); box-shadow:0 2px 6px #0003; font-size:13px; }
.marker:hover,.marker.selected,.marker.dragging { background:transparent; outline:0; box-shadow:none; }
.marker.selected>span,.marker:hover>span { background:var(--ink); color:white; outline:2px solid var(--sand); }
.photo-wrap { overflow:visible; }
.photo-viewport { padding:22px; }
.bottom-nav { display:none; }

@media(max-width:760px){
 :root { scroll-padding-top:16px; }
 body { padding-bottom:calc(82px + env(safe-area-inset-bottom,0px)); }
 .topbar { position:static; height:auto; min-height:74px; }
 .shelf-bar { margin:0 0 20px; }
 .shelf-bar label { width:100%; }
 .product-list,.catalog.has-selection .product-list { max-height:none; overflow:visible; }
 .bottom-nav { position:fixed; z-index:12; bottom:0; left:0; right:0; display:flex; justify-content:space-around; background:#FAF7F2; border-top:1px solid var(--sand); padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px)); }
 .bottom-nav a { min-height:52px; min-width:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:12px; font-weight:650; }
 dialog { max-height:calc(90dvh - 65px); }
}

/* V1.5: one scrollable form, large controls and space for the software keyboard. */
#quick-add[aria-pressed="true"] { background:var(--sand);color:#171717;border-color:#bda180; }
.manager-tools { flex-wrap:wrap; }
#product-dialog { box-sizing:border-box;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;scroll-padding:20px; }
#product-dialog input,#product-dialog textarea { font-size:16px;scroll-margin:24px; }
#product-form .form-grid>label:first-child { grid-column:1/-1; }
#product-form .code-field { margin-top:14px; }
.compact-form .notes-field { display:none; }
#recheck-product { margin:8px 0;width:100%; }
.zoom-toolbar { flex-wrap:wrap; }
@media(max-width:760px) {
 #product-dialog { width:calc(100% - 20px);max-width:560px;padding:18px;margin:10px auto;max-height:calc(100dvh - 20px); }
 #product-form .form-grid { grid-template-columns:1fr;gap:12px; }
 #product-form .dialog-actions { display:flex;flex-wrap:wrap; }
 #product-form .dialog-actions .button { flex:1;min-height:48px; }
 #product-form label { margin-bottom:8px; }
 .manager-tools>.button,.manager-tools>label { flex:1 1 140px;min-height:48px; }
}

#product-dialog { position:fixed;top:var(--form-top,10px);bottom:auto;margin:0 auto;max-height:var(--form-height,calc(100dvh - 20px)); }