/* Every selector is opt-in. Desktop layout and event behavior are unchanged. */
body.mobile-studio {--mobile-height:100dvh;--mobile-top:0px;--mobile-safe:env(safe-area-inset-bottom,0px);--mobile-header:calc(44px + env(safe-area-inset-top,0px));--mobile-properties:38px;--mobile-controls-offset:110px;--mobile-sheet-offset:120px;margin:0;overflow:hidden;overscroll-behavior:none;background:#101113;color:#f4f4f5;}
.mobile-studio .editor-topbar,.mobile-studio .tool-rail,.mobile-studio .inspector-panel,.mobile-studio .workspace-topline,.mobile-studio .workspace-meta,.mobile-studio .workspace-context-bar,.mobile-studio .workspace-properties-label,.mobile-studio .canvas-caption,.mobile-studio .floating-ai-launcher,.mobile-studio #ai-region-expand,.mobile-studio #editor-properties-scroll {display:none!important;}
.mobile-studio .editor-shell {position:fixed!important;inset:calc(var(--mobile-top) + var(--mobile-header) + var(--mobile-properties)) 0 auto!important;width:100%!important;height:calc(var(--mobile-height) - var(--mobile-header) - var(--mobile-properties) - 66px - var(--mobile-safe))!important;min-height:0!important;display:block!important;margin:0!important;padding:0!important;}
.mobile-studio .workspace,.mobile-studio .workspace-stage {width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;}
.mobile-studio #workspace-stage {position:absolute!important;inset:0!important;overflow:hidden;touch-action:none;overscroll-behavior:none;background:radial-gradient(ellipse at center,#242529,#101113 80%);}
body.editor-page.mobile-studio .editor-shell .workspace {display:block!important;grid-template:none!important;}
body.editor-page.mobile-studio .editor-shell #workspace-stage {grid-area:auto!important;height:100%!important;}
.mobile-studio #ai-region-handle {display:none!important;}
body.editor-page.mobile-studio[data-editor-presentation] #ai-region-panel.ai-region-panel {width:0!important;min-width:0!important;height:0!important;min-height:0!important;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important;pointer-events:none!important;}
.mobile-studio #ai-region-controls {pointer-events:auto;}
.mobile-studio #artboard,.mobile-studio #tool-overlay,.mobile-studio #mask-canvas {touch-action:none;}
.mobile-studio #tool-contextual {position:fixed!important;left:0!important;right:0!important;top:calc(var(--mobile-top) + var(--mobile-header))!important;width:auto!important;height:var(--mobile-properties)!important;min-height:0!important;padding:0 8px!important;background:#141517!important;border-bottom:1px solid #ffffff13;z-index:60!important;overflow:hidden;}
.mobile-studio #tool-properties {display:flex!important;align-items:center;flex-wrap:nowrap!important;gap:6px;overflow-x:auto!important;overflow-y:hidden;max-width:100%;height:var(--mobile-properties);scrollbar-width:none;}
.mobile-studio #tool-properties>* {flex-shrink:0;}
.mobile-studio #tool-properties button {min-height:36px;}
.mobile-studio .mobile-studio-ui {font:12px/1.4 system-ui,sans-serif;}
.mobile-studio .mobile-header {position:fixed;top:var(--mobile-top);left:0;right:0;height:var(--mobile-header);box-sizing:border-box;padding:env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));display:flex;align-items:center;gap:0;background:#0c0d0ff5;border-bottom:1px solid #ffffff16;z-index:70;}
.mobile-studio .mobile-brand {display:grid;place-items:center;min-width:44px;min-height:44px;margin-right:auto;text-decoration:none;color:#fff;}
.mobile-studio .mobile-brand .branding-symbol {width:28px;height:28px;}
.mobile-studio .mobile-brand img {width:28px;height:28px;max-height:none;object-fit:contain;}
.mobile-studio .mobile-button {appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;min-height:44px;padding:6px;border:0;border-radius:12px;background:transparent;color:#bec0c6;cursor:pointer;font:inherit;touch-action:manipulation;}
.mobile-studio .mobile-button:active {background:#ffffff17;}
.mobile-studio .mobile-button:focus-visible,.mobile-studio .mobile-home:focus-visible {outline:2px solid #fff;outline-offset:2px;}
.mobile-studio .mobile-button:disabled {opacity:.35;cursor:default;}
.mobile-studio .mobile-button[hidden] {display:none!important;}
.mobile-studio .mobile-start-drawing {position:fixed;left:50%;top:calc(var(--mobile-top) + var(--mobile-height) * .48);transform:translate(-50%,-50%);z-index:65;padding:12px 24px;min-width:150px;background:#18191be6!important;border:1px solid #ffffff25;border-radius:18px;backdrop-filter:blur(12px);}
.mobile-studio .mobile-start-drawing .mobile-button-label {font-size:12px;}
.mobile-studio .mobile-icon {font:21px/22px system-ui;display:grid;place-items:center;width:22px;height:22px;}
.mobile-studio .mobile-icon svg {display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.mobile-studio .mobile-button-label {font-size:9px;line-height:12px;white-space:nowrap;}
.mobile-studio .mobile-header .mobile-button-label {display:none;}
.mobile-studio .mobile-dock {position:fixed;box-sizing:border-box;top:calc(var(--mobile-top) + var(--mobile-height) - 62px - var(--mobile-safe));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));max-width:480px;margin:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;padding:4px;border:1px solid #ffffff20;border-radius:18px;background:#141518db;backdrop-filter:blur(22px);box-shadow:0 8px 32px #0008;z-index:80;}
.mobile-studio .mobile-dock .mobile-button {min-height:44px;padding:3px;}
.mobile-studio .mobile-button[aria-pressed=true],.mobile-studio .mobile-dock [aria-expanded=true] {background:#fff;color:#111;box-shadow:0 2px 8px #0002;}
.mobile-studio .mobile-view-controls {position:fixed;top:calc(var(--mobile-top) + var(--mobile-height) - var(--mobile-controls-offset) - var(--mobile-safe));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:0 4px;border:1px solid #ffffff15;border-radius:20px;background:#101114cc;backdrop-filter:blur(16px);z-index:75;}
.mobile-studio .mobile-view-controls .mobile-button-label {display:none;}
.mobile-studio .mobile-view-controls .mobile-icon {font-size:20px;}
.mobile-studio .mobile-zoom {min-width:38px;text-align:center;color:#acafb7;font-size:11px;font-variant-numeric:tabular-nums;}
.mobile-studio .mobile-sheet {position:fixed;box-sizing:border-box;left:8px;right:8px;top:auto;bottom:calc(var(--mobile-sheet-offset) + var(--mobile-safe) + max(0px,100dvh - var(--mobile-height) - var(--mobile-top)));z-index:180;max-height:min(calc(var(--mobile-height) * .68),calc(var(--mobile-height) - var(--mobile-header) - var(--mobile-sheet-offset) - 10px));border:1px solid #ffffff24;border-radius:22px;background:#17181bdf;backdrop-filter:blur(24px);box-shadow:0 -12px 60px #0006;overflow:hidden;animation:mobile-sheet-in .2s ease-out;}
.mobile-studio .mobile-sheet:not([hidden]) {display:flex;flex-direction:column;}
.mobile-studio .mobile-sheet.mobile-sheet-expanded {max-height:calc(var(--mobile-height) - var(--mobile-header) - var(--mobile-sheet-offset) - 10px);}
.mobile-studio .mobile-sheet-header {display:flex;align-items:center;gap:4px;flex-shrink:0;padding:2px 6px 2px 12px;border-bottom:1px solid #ffffff16;}
.mobile-studio .mobile-sheet-header strong {margin-right:auto;font-size:13px;font-weight:550;}
.mobile-studio .mobile-sheet-header .mobile-button-label {display:none;}
.mobile-studio .mobile-sheet-content {flex:1 1 auto;padding:4px 10px 10px;overflow:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:#ffffff28 transparent;}
.mobile-studio .mobile-tool-group {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;border-bottom:1px solid #ffffff14;padding:4px 0 8px;}
.mobile-studio .mobile-tool-group h3 {grid-column:1/-1;margin:5px 0;color:#a9abb3;text-transform:uppercase;font-size:9px;font-weight:500;letter-spacing:.1em;}
.mobile-studio .mobile-tool-group .mobile-button {padding:5px 3px;min-height:56px;}
.mobile-studio .mobile-tool-group .mobile-button-label {white-space:normal;text-align:center;}
.mobile-studio .mobile-home {display:block;padding:18px 4px 0;color:#fff;}
.mobile-studio #editor-layers-panel {display:block!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important;padding:6px 0!important;max-height:none!important;background:transparent!important;}
.mobile-studio #layer-list {max-height:35dvh;overflow:auto;}
.mobile-studio .layer-panel-actions {flex-wrap:wrap;}
.mobile-studio .layer-panel-actions button {min-width:40px;min-height:44px;}
/* Adapt existing live panels; retain DOM, control values and all handlers. */
.mobile-studio :is(#editor-tool-settings-panel,#editor-smart-panel,#editor-property-panel,#editor-color-panel,#editor-patterns-panel,#generator-overlay,#ai-region-controls,#session-gallery,.editor-effect-panel,.editor-canvas-size-panel,.editor-command-menu) {position:fixed!important;inset:auto 8px calc(var(--mobile-sheet-offset) + var(--mobile-safe) + max(0px,100dvh - var(--mobile-height) - var(--mobile-top))) 8px!important;box-sizing:border-box!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:calc(var(--mobile-height) - var(--mobile-header) - var(--mobile-sheet-offset) - 10px)!important;margin:0!important;transform:none!important;border:1px solid #ffffff24!important;border-radius:20px!important;background:#17181be8!important;backdrop-filter:blur(22px);box-shadow:0 -12px 60px #0008;overflow:auto!important;overscroll-behavior:contain;scrollbar-width:thin;z-index:160!important;}
.mobile-studio :is(#generator-overlay,#session-gallery,#editor-patterns-panel) {max-height:min(calc(var(--mobile-height) * .72),calc(var(--mobile-height) - var(--mobile-header) - var(--mobile-sheet-offset) - 10px))!important;}
.mobile-studio :is(#generator-overlay,#session-gallery,#editor-patterns-panel) :is(.generator-panel,.generator-content,.gallery-content,.patterns-content) {min-width:0!important;max-width:100%!important;}
.mobile-studio #generator-overlay {padding:12px!important;}
.mobile-studio #generator-overlay :is(.generator-mode-row,.generator-reference-toolbar,.prompt-action-row) {flex-wrap:wrap;}
.mobile-studio #generator-overlay textarea {width:100%;box-sizing:border-box;}
.mobile-studio :is(input,select,textarea) {max-width:100%;box-sizing:border-box;}
.mobile-studio input:not([type=range]):not([type=checkbox]):not([type=color]),.mobile-studio textarea,.mobile-studio select {font-size:16px;}
.mobile-studio input[type=range] {min-height:36px;touch-action:pan-y;}
.mobile-studio :is(dialog:not(#editor-placement-panel)) {box-sizing:border-box;max-width:calc(100vw - 16px)!important;max-height:calc(var(--mobile-height) - 24px)!important;overflow:auto;}
.mobile-studio #editor-placement-panel {box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);height:var(--mobile-height)!important;grid-template-rows:44px 44px minmax(0,1fr)!important;}
.mobile-studio #editor-placement-panel > header {position:relative;z-index:9;box-sizing:border-box;flex-wrap:nowrap;height:44px;padding:0 6px;gap:4px;}
.mobile-studio #editor-placement-panel > header :is(strong,.placement-scene-context) {display:none;}
.mobile-studio #editor-placement-panel > header > button:first-child {margin-right:auto;}
.mobile-studio #editor-placement-panel nav {position:relative;z-index:8;box-sizing:border-box;height:44px;overflow-x:auto;flex-wrap:nowrap;padding:0 6px;gap:4px;}
.mobile-studio #editor-placement-panel nav > * {flex-shrink:0;}
.mobile-studio #editor-placement-panel .placement-workspace {position:relative;display:block;min-height:0;}
.mobile-studio #editor-placement-panel .placement-viewport {position:absolute;inset:0;display:block;min-height:0;}
.mobile-studio #editor-placement-panel .placement-viewport > canvas {position:absolute;inset:0 0 44px;width:100%;height:calc(100% - 44px);}
.mobile-studio #editor-placement-panel .placement-view-actions {position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;height:44px;display:flex;flex-wrap:nowrap;gap:4px;padding:0 6px;overflow-x:auto;overflow-y:hidden;}
.mobile-studio #editor-placement-panel .placement-view-actions > * {flex-shrink:0;}
.mobile-studio #editor-placement-panel .placement-view-actions label {display:flex;align-items:center;gap:6px;}
.mobile-studio #editor-placement-panel .placement-view-actions label select {width:140px;}
.mobile-studio #editor-placement-panel aside {display:none!important;position:absolute;z-index:7;left:6px;right:6px;bottom:50px;width:auto;max-height:55%;box-sizing:border-box;padding:10px;overflow:auto;border:1px solid #ffffff20;border-radius:14px;background:#101113df;backdrop-filter:blur(16px);}
.mobile-studio #editor-placement-panel.mobile-studio-settings-open aside:not([hidden]) {display:flex!important;}
.mobile-studio #editor-placement-panel .mobile-studio-settings-toggle {flex-direction:row;gap:4px;}
.mobile-studio #editor-placement-panel .mobile-studio-settings-toggle .mobile-icon {display:none;}
.mobile-studio #editor-placement-panel .mobile-studio-settings-toggle .mobile-button-label {font-size:11px;}
.mobile-studio .mobile-studio-more {margin-left:0;}
.mobile-studio .mobile-studio-more summary {display:grid;place-items:center;min-width:44px;height:44px;list-style:none;cursor:pointer;}
.mobile-studio .mobile-studio-more summary::-webkit-details-marker {display:none;}
.mobile-studio .mobile-studio-actions {position:absolute;top:44px;right:6px;display:flex;flex-direction:column;gap:4px;min-width:160px;padding:8px;background:#111e;border:1px solid #ffffff20;border-radius:12px;backdrop-filter:blur(16px);box-shadow:0 8px 24px #0008;}
.editor-page.mobile-studio #editor-placement-panel#editor-placement-panel :is(header,nav,aside,.placement-view-actions) button {min-height:40px;height:40px;padding:4px 8px;font-size:11px!important;}
.editor-page.mobile-studio #editor-placement-panel#editor-placement-panel header [data-action=fullscreen] {display:grid;place-items:center;box-sizing:border-box;min-width:44px;width:44px;min-height:44px;height:44px;padding:0;}
.mobile-studio #editor-placement-panel [data-action=fullscreen] svg {display:block;width:20px;height:20px;}
.mobile-studio #editor-placement-panel .placement-view-actions > button {min-width:44px;}
.mobile-studio #editor-placement-panel .mobile-studio-actions button {width:auto;}
.mobile-studio #editor-placement-panel.mobile-studio-immersive {display:block!important;}
.mobile-studio #editor-placement-panel.mobile-studio-immersive > header {position:absolute;inset:env(safe-area-inset-top,0px) 0 auto;background:#0c0d0fc9;}
.mobile-studio #editor-placement-panel.mobile-studio-immersive > header nav {flex:1;min-width:0;padding:0;background:none;border:0;}
.mobile-studio #editor-placement-panel.mobile-studio-immersive > header > button:first-child {min-width:44px;margin-right:0;}
.mobile-studio #editor-placement-panel.mobile-studio-immersive .placement-workspace {position:absolute;inset:calc(44px + env(safe-area-inset-top,0px)) 0 0;}
.mobile-studio #editor-placement-panel.mobile-studio-immersive .placement-viewport > canvas {inset:0 0 44px;width:100%;height:calc(100% - 44px);}
.mobile-studio #editor-placement-panel.mobile-studio-immersive .placement-view-actions {background:#0c0d0fc9;}
.mobile-studio.mobile-editor-immersive #tool-contextual {display:none!important;}
.mobile-studio.mobile-editor-immersive .editor-shell {top:calc(var(--mobile-top) + var(--mobile-header))!important;height:calc(var(--mobile-height) - var(--mobile-header))!important;}
.mobile-studio.mobile-keyboard .mobile-dock {visibility:hidden;}
@media (max-height:500px) and (orientation:landscape) {
 .mobile-studio {--mobile-header:44px;}
 .mobile-studio .mobile-dock {left:auto;right:8px;top:calc(var(--mobile-top) + var(--mobile-header) + 48px);width:64px;grid-template-columns:1fr;gap:0;padding:4px;}
 .mobile-studio .mobile-dock .mobile-button {min-height:40px;gap:0;padding:2px;}
 .mobile-studio .mobile-dock .mobile-icon {height:22px;font-size:20px;}
 .mobile-studio .mobile-dock .mobile-button-label {font-size:8px;}
 .mobile-studio .editor-shell {width:calc(100% - 76px)!important;height:calc(var(--mobile-height) - var(--mobile-header) - var(--mobile-properties))!important;}
 .mobile-studio .mobile-view-controls {left:auto;right:14px;transform:none;top:calc(var(--mobile-top) + var(--mobile-header));bottom:auto;}
 .mobile-studio .mobile-view-controls > :not(:last-child) {display:none!important;}
 .mobile-studio .mobile-sheet,.mobile-studio :is(#editor-tool-settings-panel,#editor-smart-panel,#editor-patterns-panel,#generator-overlay,#session-gallery,.editor-command-menu) {left:8px!important;right:84px!important;bottom:8px!important;max-height:calc(var(--mobile-height) - var(--mobile-header) - 12px)!important;}
 .mobile-studio .mobile-tool-group {grid-template-columns:repeat(4,minmax(0,1fr));}
 .mobile-studio #editor-placement-panel aside {max-width:300px;left:auto;max-height:calc(100% - 56px);}
}
@media (prefers-reduced-motion:reduce) {.mobile-studio .mobile-sheet {animation:none;}}
/* Join the existing important control layer, scoped to our own controls only. */
@layer editor-panel-controls {
 .editor-page.mobile-studio #mobile-studio-ui button.mobile-button {background:transparent!important;color:#bfc1c8!important;border-color:transparent!important;background-image:none!important;box-shadow:none!important;border-radius:12px;font-weight:450!important;}
 .editor-page.mobile-studio #mobile-studio-ui button.mobile-button[aria-pressed=true],.editor-page.mobile-studio #mobile-studio-ui .mobile-dock button[aria-expanded=true] {background:#fff!important;color:#111!important;}
 .editor-page.mobile-studio #mobile-studio-ui button.mobile-button:active {background:#ffffff25!important;}
 .editor-page.mobile-studio #mobile-studio-ui button.mobile-button.mobile-start-drawing {background:#18191bed!important;border:1px solid #ffffff30!important;}
 .editor-page.mobile-studio #mobile-studio-ui button.mobile-button span {color:inherit!important;font-weight:450!important;}
 .editor-page.mobile-studio #editor-placement-panel#editor-placement-panel [data-action=fullscreen]::before,.editor-page.mobile-studio #editor-placement-panel#editor-placement-panel [data-action=fullscreen]::after {content:none!important;}
}
@keyframes mobile-sheet-in {from {opacity:0;translate:0 16px;} to {opacity:1;translate:0 0;}}

/* Keep layer settings inside the phone's scrollable sheet. */
.editor-page.mobile-studio #layer-settings {flex:1 0 100%;width:100%;min-width:0;}
.editor-page.mobile-studio #layer-settings > summary {min-height:44px;}
.editor-page.mobile-studio #layer-settings-fields,.editor-page.mobile-studio #layer-blend-panel {position:static!important;inset:auto!important;box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;max-height:none!important;transform:none!important;margin:6px 0!important;box-shadow:none!important;}
.editor-page.mobile-studio #layer-blend-panel {max-height:30dvh!important;overflow-y:auto!important;}
.editor-page.mobile-studio #layer-settings-fields :is(button,select,input:not([type=range])) {min-height:40px;}
/* Current desktop AI form/theme, one phone scroll host and no desktop gutter. */
.editor-page.mobile-studio #ai-edit-group {transform:none!important;filter:none!important;}
.editor-page.mobile-studio #generator-overlay {display:block;pointer-events:auto!important;padding:0!important;grid-template-columns:minmax(0,1fr)!important;}
.editor-page.mobile-studio #generator-overlay[hidden] {display:none!important;}
.editor-page.mobile-studio #generator-overlay .generator-window {display:flex!important;flex-direction:column;position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;transform:none!important;box-sizing:border-box;}
.editor-page.mobile-studio #generator-overlay .generator-header {flex:none;min-height:52px;position:sticky;top:0;z-index:2;background:var(--ink,#111);padding:6px 10px;box-sizing:border-box;}
.editor-page.mobile-studio #generator-overlay .generator-body {display:block!important;overflow:visible!important;min-height:0!important;height:auto!important;max-height:none!important;}
.editor-page.mobile-studio #generator-overlay .generate-form {width:100%;min-width:0;box-sizing:border-box;padding:12px;}
.editor-page.mobile-studio #generator-overlay :is(.generator-mode-row,.generator-reference-toolbar,.prompt-action-row) {min-width:0;flex-wrap:wrap!important;}
.editor-page.mobile-studio #generator-overlay :is(.prompt-field,.generator-reference-area,.generator-reference-list,.generator-mode) {min-width:0;max-width:100%;box-sizing:border-box;}
.editor-page.mobile-studio #generator-overlay :is(#minimize-generator,#maximize-generator) {display:none!important;}
.mobile-studio #editor-placement-panel canvas {touch-action:none;overscroll-behavior:none;}
.mobile-studio #editor-placement-panel .placement-rotation-handle {width:44px!important;height:44px!important;}
.editor-page.mobile-studio .patterns-fields > label:has(input[aria-label*="aspect" i]) {order:-1;}