/* SPOOK BUILDER — modern touch layer: full-bleed canvas with floating glass chrome.
   Loaded last so it refines studio-mobile.css without touching desktop. */
:root{--glass:color-mix(in srgb,var(--paper) 74%,transparent);--glass-strong:color-mix(in srgb,var(--paper) 88%,transparent);--glass-line:color-mix(in srgb,var(--ink) 10%,transparent);--float-shadow:0 10px 30px -12px rgb(0 0 0 / .28),0 2px 6px -2px rgb(0 0 0 / .12);--dock-gap:10px}
:root[data-theme=dark]{--glass:color-mix(in srgb,var(--panel) 70%,transparent);--glass-strong:color-mix(in srgb,var(--panel) 90%,transparent);--glass-line:color-mix(in srgb,var(--ink) 12%,transparent);--float-shadow:0 12px 34px -10px rgb(0 0 0 / .7),0 2px 8px -2px rgb(0 0 0 / .4)}

@media(max-width:1024px) and (min-height:521px){
 :root{--mobile-header:calc(60px + env(safe-area-inset-top,0px));--mobile-nav:calc(64px + var(--dock-gap) * 2 + env(safe-area-inset-bottom,0px))}

 /* Canvas runs edge to edge; chrome floats over it. */
 .workspace{top:0!important;bottom:0!important}
 .stage{height:100%!important;border-radius:0}

 .app-header{background:transparent!important;border:0!important;box-shadow:none;pointer-events:none;padding-top:env(safe-area-inset-top,0px);height:var(--mobile-header)}
 .app-header>*{pointer-events:auto}
 .app-header .brand{gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--float-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);height:auto}
 .app-header .brand .brand-mark{width:32px;height:32px;border-radius:999px;display:grid;place-items:center}
 .app-header .brand>span:last-child{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--ink)}
 .app-header .brand small{display:none}

 .theme-toggle,#mobileHeaderMenu{width:44px!important;height:44px!important;min-height:44px!important;border-radius:999px!important;background:var(--glass)!important;border:1px solid var(--glass-line)!important;box-shadow:var(--float-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);color:var(--ink)}
 .mobile-top-actions{top:env(safe-area-inset-top,0px)!important;height:60px!important;display:flex;align-items:center;right:12px!important}
 .theme-toggle{top:calc(8px + env(safe-area-inset-top,0px))!important;left:auto!important;right:64px!important;transform:none!important}

 /* Floating view chips + fit button */
 .mobile-canvas-top{top:calc(var(--mobile-header) + 4px)!important;left:12px!important;right:12px!important;gap:8px}
 .mobile-canvas-top button,.mobile-zoom button{min-height:40px!important;height:40px;border-radius:999px!important;background:var(--glass)!important;border:1px solid var(--glass-line)!important;box-shadow:var(--float-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);color:var(--ink);font-size:13px;font-weight:600;padding:0 14px}
 #mobileFit{width:40px;padding:0;display:grid;place-items:center}

 /* Zoom: one vertical glass capsule */
 .mobile-zoom{right:12px!important;bottom:calc(var(--mobile-nav) + var(--mobile-deck-height,66px) + 4px)!important;display:flex;flex-direction:column;gap:0;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--float-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);overflow:hidden}
 .mobile-zoom button{width:44px;height:44px;min-height:44px!important;padding:0;display:grid;place-items:center;background:transparent!important;border:0!important;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0!important}
 .mobile-zoom button+button{border-top:1px solid var(--glass-line)!important}

 /* Context deck: segmented control floating above the dock */
 .mobile-deck{bottom:var(--mobile-nav)!important;left:12px!important;right:12px!important;width:auto!important;height:auto!important;min-height:0;padding:4px!important;border:1px solid var(--glass-line)!important;border-radius:26px;background:var(--glass)!important;box-shadow:var(--float-shadow);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
 .mobile-deck>*{margin:0!important}
 .mobile-deck button{border-radius:999px!important;border:0!important;min-height:44px!important;font-size:14px;font-weight:600;background:transparent;color:var(--ink);transition:background-color .2s ease,color .2s ease}
 .mobile-viewer-actions,.mobile-mode-switch{gap:4px!important;padding:0!important;background:transparent!important;border:0!important}
 .mobile-viewer-actions button:not(.active),.mobile-mode-switch button:not(.active){background:transparent!important;color:var(--muted)}
 .mobile-deck button.active{background:var(--forest)!important;color:var(--on-accent)!important;box-shadow:0 4px 12px -4px color-mix(in srgb,var(--forest) 60%,transparent)}

 /* Bottom dock: floating pill tab bar */
 .mobile-tabs{left:12px!important;right:12px!important;bottom:calc(var(--dock-gap) + env(safe-area-inset-bottom,0px))!important;width:auto!important;height:64px!important;padding:6px!important;gap:4px;border:1px solid var(--glass-line)!important;border-radius:26px;background:var(--glass-strong)!important;box-shadow:var(--float-shadow);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7)}
 .mobile-tabs button{height:52px!important;min-height:52px!important;border-radius:20px!important;border:0!important;gap:2px;color:var(--muted);background:transparent;transition:background-color .2s ease,color .2s ease}
 .mobile-tabs button span{font-size:11px;font-weight:600;letter-spacing:.2px}
 .mobile-tabs button.active{background:var(--selected)!important;color:var(--ink)}
 .mobile-tabs button:active{transform:scale(.96)}

 /* Sheets: floating rounded card above the dock */
 .panel{left:8px!important;right:8px!important;width:auto!important;bottom:calc(var(--mobile-nav) - var(--dock-gap) + 4px)!important;border-radius:28px!important;border:1px solid var(--glass-line)!important;box-shadow:0 -6px 40px -12px rgb(0 0 0 / .35)!important;padding:0 18px 24px!important}
 .mobile-sheet-header{margin:0 -18px 14px!important;padding:0 18px 10px!important;border-radius:28px 28px 0 0;background:var(--panel)!important}
 .sheet-grip span{width:40px;height:5px;border-radius:999px;opacity:.7}
 .sheet-heading-row h2{font-size:22px;font-weight:700;letter-spacing:-.6px}
 .sheet-heading-row button{border-radius:999px!important;background:var(--surface)}
 .sheet-backdrop{inset:0!important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
 .panel select,.panel input:not([type=checkbox]):not([type=range]){border-radius:14px!important}
 .cabinet-card{border-radius:20px!important;border:1px solid var(--glass-line)!important}
 .card-actions button[data-add],.mobile-quantity{border-radius:14px!important}

 .toast{border-radius:999px!important;padding:10px 16px!important;box-shadow:var(--float-shadow)}
 .spook-watermark{left:12px!important;bottom:calc(var(--mobile-nav) + var(--mobile-deck-height,66px) + 8px)!important;border-radius:12px}

 @media(prefers-reduced-motion:reduce){.mobile-tabs button,.mobile-deck button{transition:none}.mobile-tabs button:active{transform:none}}
}