/* Keep the prototype's layout; make dialogs and storage state usable on small screens. */
[hidden]{display:none!important}
#loadingScreen{position:fixed;inset:0;z-index:100;background:#f6f4f0ed;display:grid;place-items:center;font:500 15px system-ui;color:#625b51}
body.loading{cursor:progress}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.modal,.canvas-modal{max-height:90dvh;overflow:auto}
.modal-backdrop .textbtn,.canvas-modal-backdrop .textbtn,.filter-backdrop .textbtn{display:inline-flex;align-items:center;justify-content:center}
.gallery-header-actions{flex-wrap:wrap}
@media(max-width:560px){.gallery-header-actions button{flex:1 1 42%;min-height:39px}.toast{bottom:calc(90px + env(safe-area-inset-bottom));max-width:90vw;text-align:center}.mobile-tools{overscroll-behavior-x:contain}.reference-window{max-width:calc(100vw - 16px)}.panel.mobile-open{padding-top:16px}.panel.mobile-open::before{content:'';display:block;width:38px;height:4px;border-radius:4px;background:#d7d1c7;margin:0 auto 14px}}
.mobile-tools .tool:disabled,.mobile-more-tools .tool:disabled{opacity:.35;cursor:default}
.text-object-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:18;display:flex;align-items:center;gap:8px;background:#fffefa;border:1px solid var(--line);border-radius:12px;padding:9px 12px;box-shadow:0 5px 30px #0002;max-width:95vw}.text-object-bar span{font-size:11px;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-object-bar button{white-space:nowrap;border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:#fff;font-size:11px;color:var(--ink)}@media(max-width:560px){.text-object-bar{bottom:calc(94px + env(safe-area-inset-bottom));gap:5px;padding:8px}.text-object-bar span{display:none}}
#shapeObjectBox{position:absolute;pointer-events:none;z-index:12;border:1px dashed #da6c4c;box-sizing:border-box}#shapeObjectBox i{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;border-radius:3px;background:#fff;border:2px solid #da6c4c}.object-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.object-fields input[type=number]{width:100%;border:1px solid var(--line);border-radius:7px;padding:8px;background:white;font:inherit}
#shapeObjectBox #shapeTailHandle{right:auto;bottom:auto;border-radius:50%;transform:translate(-50%,-50%);background:#da6c4c;border-color:white;box-shadow:0 0 0 1px #da6c4c}

.layer-lock{border:0;background:transparent;cursor:pointer;padding:4px;font-size:13px;color:#8b857c;flex-shrink:0}.layer-row.locked .layer-name{color:#847c70}.layer-actions{flex-wrap:wrap}.layer-actions button:disabled{opacity:.45;cursor:default}

.image-export-modal{max-width:560px!important;max-height:90vh;overflow:auto}.image-export-preview{display:flex;justify-content:center;align-items:center;min-height:100px;padding:10px;border:1px solid var(--line);border-radius:10px;background-color:#fff;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.image-export-preview canvas{display:block;max-width:100%;max-height:210px;object-fit:contain}.image-export-options{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.image-export-options label{flex:1;min-width:130px;display:flex;flex-direction:column;gap:6px;font-size:13px}.image-export-options label[hidden]{display:none}.image-export-options select{width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font:inherit}.image-export-modal .modal-actions{flex-wrap:wrap}

.save-status[data-state=error] .dot{background:#be453b}.save-status[data-state=pending] .dot{background:#d59b31}.save-status[data-state=saved] .dot{background:#79a274}#saveNowBtn:disabled{opacity:.4;cursor:progress}

.custom-canvas-form{border-top:1px solid var(--line);margin-top:18px;padding-top:15px}.custom-canvas-form h3{font-size:15px;margin:0 0 12px}.custom-canvas-fields{display:flex;align-items:end;gap:10px}.custom-canvas-fields label{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:13px}.custom-canvas-fields input{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px;background:var(--panel);font:inherit}.custom-canvas-fields button{flex:none;min-width:34px}.canvas-size-error{color:#be453b;font-size:12px;line-height:1.4}.custom-canvas-form .primarybtn:disabled{opacity:.45;cursor:default}

.fit-canvas-btn{font-size:12px;padding:0 9px;min-height:32px}.zoom-controls{gap:8px;flex-wrap:wrap}.zoom-controls #zoomLabel{min-width:45px}@media(max-width:560px){.zoom-controls>span:first-child{display:none}.zoom-controls .zoomrange{width:90px}.stage-bottom{min-height:48px;height:auto;padding:7px 10px}}

.shortcut-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 16px;margin:15px 0}.shortcut-list>div{display:flex;align-items:center;gap:9px;font-size:12px}.shortcut-list kbd{border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:#f6f4f0;padding:4px 6px;font:11px ui-monospace,monospace;white-space:nowrap}#keysHelpModal .modal{max-width:590px}#keysHelpModal p{font-size:13px}@media(max-width:560px){#keysHelpBtn{display:none}.shortcut-list{grid-template-columns:1fr}}

.canvas-size-button{border:0;background:transparent;color:var(--muted);font:inherit;padding:6px;cursor:pointer;min-height:40px}.hand-tool #stage,.space-pan #stage{cursor:grab}#stage.panning{cursor:grabbing}.resize-field{display:flex;flex-direction:column;gap:7px;margin-top:16px;font-size:13px}.resize-field select{padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font:inherit}#resizeCanvasModal .modal{max-width:520px}.layer-actions button{min-height:42px;padding:8px}.mobile-tools [data-tool=hand]{flex-shrink:0}@media(max-width:560px){.layer-lock,.eye{min-width:40px;min-height:40px}.layer-row{min-height:48px}.resize-field select,.custom-canvas-fields input{min-height:44px;font-size:16px}.stage-top .canvas-size-button{font-size:10px}.stage-top .hint{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stage-top{gap:8px}.canvas-size-button{flex-shrink:0}}

@media(max-width:560px){.mobile-more-tools{max-height:45dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px}.mobile-tools>[data-tool=hand]{min-height:44px}.layer-actions button{min-width:44px}.modal-backdrop .primarybtn,.modal-backdrop .textbtn{min-height:44px}}

/* Focus stays within the app layout, so its exit and controls never cover the canvas. */
.focus-controls{display:flex;align-items:center;gap:6px;padding:6px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0}
.focus-controls button,.focus-controls input[type=color]{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);font:inherit;padding:5px}
.focus-controls button:disabled{opacity:.35}.focus-size{display:flex;align-items:center;gap:6px;font-size:11px;flex:1;min-width:0}.focus-size input{width:100%;min-width:30px;min-height:44px}.focus-size output{min-width:24px;font-variant-numeric:tabular-nums}
.focus-mode .app>header,.focus-mode .mobile-settings,.focus-mode .stage-top,.focus-mode #desktopTools,.focus-mode .workspace>.panel{display:none}
.focus-mode .workspace{grid-template-columns:minmax(0,1fr)}
.focus-mode .mobile-tools{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));flex-shrink:0}
.focus-mode .mobile-tools>.tool{min-height:44px;min-width:0}.focus-mode .mobile-more-tools{grid-column:1/-1;max-height:45dvh;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:380px){.focus-size{font-size:0}.focus-size output{font-size:11px}.focus-controls{gap:4px}.focus-controls button{font-size:12px}}

.focus-mode .mobile-tools{position:relative;z-index:16;background:var(--panel);border-top:1px solid var(--line);gap:4px;padding:6px 9px calc(6px + env(safe-area-inset-bottom));overflow:visible}
.focus-mode .mobile-tools .tool{width:100%;max-width:64px;height:47px;justify-self:center}.focus-mode .mobile-tools .mobile-divider{display:none}
.focus-mode .mobile-more-tools{display:none;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding-top:7px;border-top:1px solid var(--line)}.focus-mode .mobile-more-tools.open{display:grid}

#mangaPageGrid .project-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#mangaPageGrid .project-actions button{min-height:44px;font-size:12px}#mangaPageGrid .project-actions button:disabled{opacity:.35;cursor:default}

.backup-notice{max-width:1250px;margin:0 auto 22px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.backup-notice p{margin:0 0 7px;font-size:13px;line-height:1.5}.backup-notice small{display:block;color:var(--muted);font-size:12px;line-height:1.5}#backupBtn{min-height:44px}#backupBtn:disabled{opacity:.5}

.layer-primary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.layer-actions{flex-wrap:wrap}.layer-actions button{height:auto;min-height:44px}.layer-extra .layer-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.layer-extra,.tool-settings{margin-top:16px;border-top:1px solid var(--line);padding-top:6px}.layer-extra summary,.tool-settings summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;font-size:12px;color:var(--ink)}.active-layer-label{font-size:12px;color:var(--muted);line-height:1.5;margin:8px 0;overflow-wrap:anywhere}.layer-head{align-items:center}.layer-head #closeLayerPanel,#tabletLayersBtn{display:none}.layer-row.selected{border-left:4px solid var(--accent)}.layer-row .layer-name{min-width:0;overflow-wrap:anywhere}.layer-row button{min-width:40px;min-height:44px}.panel .range{min-height:36px}
@media(max-width:850px){#tabletLayersBtn{display:inline-block}.panel.mobile-open{display:block;position:fixed;z-index:22;left:0;right:0;bottom:0;height:auto;max-height:min(52dvh,480px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:18px 18px 0 0;background:var(--panel);box-shadow:0 -12px 36px #201a1225;padding:0 14px calc(12px + env(safe-area-inset-bottom))}.panel.mobile-open::before{display:none}.panel.mobile-open .layer-head{position:sticky;top:0;z-index:1;background:var(--panel);padding:10px 0;margin:0;border-bottom:1px solid var(--line)}.layer-head #closeLayerPanel{display:inline-flex;min-height:44px}.panel.mobile-open .layers{max-height:20dvh;overflow-y:auto;overscroll-behavior:contain;padding:3px}.panel.mobile-open .layer-row{min-height:48px}.panel.mobile-open .privacy{display:none}.panel.mobile-open .layer-opacity{margin-top:8px}.panel.mobile-open .control-label{margin-top:8px}.panel.mobile-open .brush-select{min-height:44px;font-size:16px}.panel.mobile-open .layer-primary button{font-size:12px}.panel.mobile-open .layer-extra,.panel.mobile-open .tool-settings{margin-top:8px}}
@media(max-width:560px){#tabletLayersBtn{display:none}}

.layer-primary button{width:auto}.layer-primary .small-add{height:auto;border-radius:8px}

.brush-library-modal{width:min(680px,100%)}.brush-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;background:var(--panel);z-index:2}.brush-dialog-head button{min-height:44px}.brush-library-modal .brush-filters{display:flex;flex-wrap:wrap;gap:6px}.brush-library-modal .brush-filters button{min-height:44px;padding:7px 12px}.brush-library-modal .brush-cards{display:block}.brush-group h3{font-size:14px;margin:18px 0 8px}.brush-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.brush-group-grid .brush-card{position:relative;min-width:0;padding:0}.brush-choice{display:flex;flex-direction:column;gap:6px;width:100%;min-height:104px;text-align:left;padding:12px 42px 12px 10px;border:0;background:transparent;color:var(--ink);border-radius:10px}.brush-choice b{font-size:12px}.brush-choice small{font-size:11px;line-height:1.4;color:var(--muted)}.brush-choice .brush-sample{display:block;width:100%}.brush-star{position:absolute;right:2px;top:2px;min-width:40px;min-height:44px;border:0;background:transparent;color:var(--muted);font-size:21px}.brush-star.fav{color:var(--accent)}
@media(max-width:850px){.mobile-settings{display:block;overflow:visible;padding:6px 10px;background:var(--panel);border-top:1px solid var(--line);flex-shrink:0}.mobile-brush-primary{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:6px;align-items:center}.mobile-brush-primary label{display:flex;gap:5px;align-items:center;min-width:0;font-size:11px}.mobile-brush-primary label:has(#mobileSize){grid-column:1/-1;grid-row:2}.mobile-brush-primary #mobileSize{flex:1;min-width:0;width:auto;min-height:32px}.mobile-brush-primary #mobileBrushType{width:100%;min-width:0;max-width:none;min-height:44px;font-size:14px}.mobile-brush-primary #mobileColor{width:32px;height:36px}.mobile-brush-primary label:has(#mobileColor){font-size:0}.mobile-brush-primary #mobileBrushLibrary{min-height:44px;font-size:11px;padding:4px 8px}.mobile-brush-extra{font-size:12px;max-height:36dvh;overflow-y:auto;overscroll-behavior:contain}.mobile-brush-extra summary{min-height:36px;align-content:center;cursor:pointer}.mobile-setting-fields{display:grid;grid-template-columns:1fr;gap:8px;padding:6px 0 10px}.mobile-setting-fields label{display:flex;align-items:center;gap:8px;white-space:normal;font-size:12px}.mobile-setting-fields input[type=range]{flex:1;min-width:0;max-width:none;width:auto;min-height:36px}.mobile-setting-fields select{max-width:none;min-height:44px;font-size:14px}.mobile-brush-extra details{border-top:1px solid var(--line)}.brush-library-modal{max-height:85dvh}.brush-group-grid{gap:6px}}

.recent-colors{display:flex;gap:5px;overflow-x:auto;padding:5px 0;overscroll-behavior-x:contain}.recent-color{width:36px;height:36px;flex:0 0 36px;background:var(--swatch);border:2px solid var(--line);border-radius:9px;box-shadow:inset 0 0 0 1px #0002}.personal-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.personal-color{display:flex;align-items:center;gap:8px;min-height:44px;text-align:left;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);padding:6px;min-width:0}.personal-color i{width:30px;height:30px;flex-shrink:0;border-radius:6px;border:1px solid #0002}.personal-color span{font-size:12px;overflow-wrap:anywhere;min-width:0}.palette-empty{grid-column:1/-1;color:var(--muted);font-size:12px;line-height:1.5}.personal-color-form{display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px;margin:16px 0}.personal-color-form label{display:flex;flex-direction:column;gap:6px;font-size:12px}.personal-color-form input{min-height:44px;min-width:0;width:100%;font-size:16px;padding:6px;border:1px solid var(--line);border-radius:8px}.personal-color-form button{min-height:44px;grid-column:1/-1}.personal-color-form span{font-size:11px;color:var(--muted)}.color-palette-modal{width:min(560px,100%)}.color-palette-modal summary,.mobile-personal-colors summary{min-height:36px;align-content:center;cursor:pointer;font-size:12px}.color-palette-modal details{border-top:1px solid var(--line);padding:6px 0}#removePersonalColors{display:flex;flex-wrap:wrap;gap:6px}#removePersonalColors button{min-height:44px}.mobile-personal-colors{max-height:32dvh;overflow-y:auto;overscroll-behavior:contain}#mobileColorPalette{min-height:44px;font-size:12px}

/* Zoom keeps both canvas dimensions proportional; panning owns the viewport. */
#stage{overflow:hidden}#board{max-height:none;max-width:none;border:0;outline:1px solid #fff;flex-shrink:0}

/* The drawing toolbar stays two rows tall; additional settings float over the canvas. */
@media(max-width:850px){.mobile-settings.compact-brush-panel{display:flex;flex-direction:column;gap:4px;padding:5px 8px;background:var(--panel);overflow:visible}.compact-brush-top,.compact-brush-bottom{display:flex;align-items:center;gap:6px;width:100%;min-width:0}.compact-brush-top>label{flex-shrink:0;font-size:0}.compact-brush-top #mobileColor{width:44px;height:44px;padding:3px}.compact-brush-choice{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:44px;border:1px solid var(--line);border-radius:10px;background:#fffefa;color:var(--ink);text-align:left;padding:4px 8px}.compact-brush-preview{width:58px;flex-shrink:0}.compact-brush-preview svg{width:100%;height:24px}.compact-brush-name{display:flex;flex:1;flex-direction:column;min-width:0;gap:2px}.compact-brush-name small{font-size:9px;color:var(--muted)}.compact-brush-name b{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compact-brush-bottom .compact-brush-size{flex:1;min-width:0;gap:5px;font-size:11px}.compact-brush-bottom #mobileSize{width:100%;flex:1;min-width:24px;min-height:44px;height:44px}.compact-brush-bottom #mobileSizeValue{min-width:15px;font-size:11px}.compact-brush-bottom button{min-height:44px;font-size:11px;padding:5px 8px;flex-shrink:0;border:1px solid var(--line);border-radius:8px}#brushSettingsModal,#brushLibraryModal,#colorPaletteModal{align-items:flex-end;padding:0}.mobile-brush-settings-modal,.brush-library-modal,.color-palette-modal{width:100%;max-width:640px;margin:0 auto;border-radius:18px 18px 0 0;max-height:70dvh;padding:14px 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}.brush-dialog-head{top:-14px;padding:6px 0;border-bottom:1px solid var(--line)}.brush-dialog-head h2{font-size:17px;margin:0}.brush-dialog-head button{min-height:44px;padding:6px 10px}.brush-setting-note{font-size:12px!important;line-height:1.5;color:var(--muted);margin:8px 0!important}.brush-settings-fields .mobile-setting-fields{gap:10px;padding:10px 0}.brush-settings-fields label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:12px;line-height:1.4}.brush-settings-fields input[type=range]{flex:1;min-width:40px;min-height:44px;height:44px;width:auto;accent-color:var(--accent)}.brush-settings-fields input[type=checkbox]{width:20px;height:20px;flex-shrink:0}.brush-settings-fields input[type=color]{width:44px;height:44px;flex-shrink:0}.brush-settings-fields select{min-height:44px;min-width:0;font-size:14px;padding:6px;border:1px solid var(--line);border-radius:8px}.brush-settings-fields output{font-variant-numeric:tabular-nums;min-width:34px;text-align:right;font-size:11px}.brush-settings-fields details{border-top:1px solid var(--line)}.brush-settings-fields summary{min-height:44px;align-content:center;font-size:12px;cursor:pointer}}
@media(max-width:360px){.compact-brush-bottom button{font-size:10px;padding:4px 6px}.compact-brush-bottom .compact-brush-size{font-size:10px}.compact-brush-preview{width:42px}}
.focus-mode .mobile-settings.compact-brush-panel{display:none}

/* Legacy mobile rules hide text buttons; explicitly expose drawing controls. */
.compact-brush-bottom #mobileColorPalette,.compact-brush-bottom #mobileBrushSettings{display:inline-flex;align-items:center;justify-content:center}
.brush-library-modal .brush-filters{gap:5px;margin-top:10px}
.brush-library-modal .brush-filters button{font-size:12px;line-height:1.2;min-height:44px;height:auto;padding:7px 10px;border-radius:10px}
.brush-library-modal .brush-group h3{margin:12px 0 7px;font-size:13px}
.brush-library-modal .brush-choice{min-height:96px;padding:9px 38px 9px 9px;gap:5px}
.brush-library-modal .brush-choice b{font-size:12px;line-height:1.3}.brush-library-modal .brush-choice small{font-size:11px;line-height:1.35}
@media(max-width:360px){.compact-brush-bottom{gap:4px}.compact-brush-bottom .compact-brush-size{gap:4px}.compact-brush-bottom #mobileColorPalette,.compact-brush-bottom #mobileBrushSettings{padding:4px 6px;font-size:10px}.brush-library-modal .brush-filters button{font-size:11px;padding:6px 8px}}

@media(max-width:850px){.compact-brush-panel .compact-brush-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-items:center}.compact-brush-panel .compact-brush-bottom .compact-brush-size{display:flex;min-width:0;width:auto;margin:0}.compact-brush-panel .compact-brush-bottom #mobileSize{flex:1 1 0;min-width:0;width:0}.compact-brush-panel .compact-brush-bottom #mobileColorPalette,.compact-brush-panel .compact-brush-bottom #mobileBrushSettings{display:inline-flex;width:auto;min-width:0;max-width:100%;margin:0;padding:5px 8px;white-space:nowrap;font-size:11px;box-sizing:border-box}.color-palette-modal .palette-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;overflow:visible}.color-palette-modal .palette-tabs button{min-width:0;min-height:44px;padding:5px;font-size:11px;white-space:normal;border-radius:9px}.color-palette-modal .palette-head{flex-wrap:wrap;gap:4px}.color-palette-modal #paletteHint{white-space:normal}}
.recent-color-title{font-size:12px;font-weight:600;color:var(--muted);margin:10px 0 2px}
@media(max-width:340px){.compact-brush-panel .compact-brush-bottom{gap:4px}.compact-brush-panel .compact-brush-bottom #mobileColorPalette,.compact-brush-panel .compact-brush-bottom #mobileBrushSettings{padding:4px 6px;font-size:10px}}

@media(max-width:850px){.mobile-brush-settings-modal>p.brush-setting-note{margin:6px 0!important}.mobile-brush-settings-modal .mobile-setting-fields{gap:4px;padding:6px 0}.mobile-brush-settings-modal .mobile-setting-fields label{min-height:44px;margin:0}.mobile-brush-settings-modal .mobile-setting-fields .brush-setting-note{margin:3px 0!important}.mobile-brush-settings-modal .mobile-setting-fields input[type=range]{min-height:44px;height:44px}.mobile-brush-settings-modal .brush-settings-fields summary{min-height:44px}.mobile-brush-settings-modal .brush-dialog-head{padding:4px 0}}

.texture-brush-preview{display:block;width:100%;height:32px;object-fit:contain}.compact-brush-preview .texture-brush-preview{height:26px}

.material-controls{display:grid;gap:5px;min-width:0}.material-controls label{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px}.material-controls select{min-width:0;flex:1;min-height:44px;border:1px solid var(--line,#dedbd5);border-radius:9px;background:#fff;color:#302e2b;padding:6px}.material-controls input[type=range]{min-width:0;width:0;flex:1;min-height:44px}.material-controls output{min-width:34px;font-size:11px}.material-controls :disabled{opacity:.5}.material-controls .brush-setting-note{margin:0 0 5px}

#StampControls[hidden],#mobileStampControls[hidden]{display:none!important}.material-controls .mini-check input{width:18px;flex:none}

.brush-test{margin:0 0 12px;border:1px solid #dedbd4;border-radius:12px;padding:0 10px}.brush-test summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600}.brush-test-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px}.brush-test-controls label{display:flex;align-items:center;gap:5px;min-height:44px}.brush-test-controls input[type=color]{width:38px;height:38px;padding:2px}.brush-test-controls button{min-height:44px;margin-left:auto}#brushTestLabel{flex-basis:100%;font-size:12px}#brushTestCanvas{display:block;width:100%;height:auto;aspect-ratio:8/3;background:#fff;border:1px solid #ddd;border-radius:8px;touch-action:none;user-select:none}#brushTestCanvas.dark{background:#252b38}.brush-test-note{font-size:11px;color:#666;margin:8px 0 10px}

.brush-test summary::after{content:"⌄";margin-left:auto}.brush-test[open] summary::after{content:"⌃"}

#brushQuick{min-width:0}.quick-brush-section{min-width:0;margin-bottom:14px}.quick-brush-section h3{font-size:12px;margin:8px 0}.quick-brush-row{display:flex;overflow-x:auto;gap:8px;padding-bottom:6px;overscroll-behavior-x:contain}.quick-brush-choice{flex:0 0 126px;min-height:64px;border:1px solid var(--line,#dedbd4);border-radius:10px;background:#fff;color:#302e2b;padding:7px;display:grid;gap:4px;text-align:left}.quick-brush-choice.selected{border-color:#d87959;background:#fff5ef}.quick-brush-choice>span{height:24px;overflow:hidden}.quick-brush-choice svg,.quick-brush-choice img{width:100%;height:24px;object-fit:contain}.quick-brush-choice b{font-size:11px;line-height:1.25}.brush-presets{margin-bottom:12px;border:1px solid var(--line,#dedbd4);border-radius:12px;padding:0 10px;min-width:0}.brush-presets summary{min-height:44px;cursor:pointer;font-weight:600;padding:12px 0}.brush-presets summary span{font-size:11px;font-weight:400;margin-left:8px}.brush-preset-row{display:flex;gap:6px;align-items:center;padding:5px 0;border-bottom:1px solid #eee}.brush-preset-row button{min-height:44px}.brush-preset-apply{min-width:0;flex:1;border:0;border-radius:8px;background:#f6f4f0;color:#302e2b;padding:8px;text-align:left;display:grid;gap:3px}.brush-preset-apply b{font-size:12px;overflow-wrap:anywhere}.brush-preset-apply small{font-size:10px;color:#666}.brush-preset-save{display:grid;gap:6px;padding:10px 0}.brush-preset-save label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:12px}.brush-preset-save input[type=text]{min-width:0;flex:1;min-height:44px;border:1px solid #ddd;border-radius:8px;padding:8px;font-size:16px}.brush-preset-save button{min-height:44px}.brush-presets .mini-check input{width:18px;flex:none}

/* Compact brush library, preserving 44px touch targets. */
.brush-library-modal .brush-library{margin:6px 0 8px;min-width:0}.brush-library-modal .brush-filters{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;gap:5px;margin:8px 0;padding:0 0 4px;overscroll-behavior-x:contain;scrollbar-width:thin}.brush-library-modal .brush-filters button{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:6px 10px}.brush-library-modal .brush-test,.brush-library-modal .brush-presets{margin-bottom:6px;padding:0 8px}.brush-library-modal .brush-test summary,.brush-library-modal .brush-presets summary{font-size:13px;min-height:44px;padding:8px 0;line-height:1.3}.brush-library-modal .brush-test-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px;margin-bottom:5px}.brush-library-modal #brushTestLabel{grid-column:1/-1;font-size:11px;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.brush-library-modal .brush-test-controls label{min-height:44px;gap:4px;font-size:11px;white-space:nowrap;margin:0}.brush-library-modal .brush-test-controls input[type=color]{width:32px;height:32px;padding:2px;flex:none}.brush-library-modal .brush-test-controls input[type=checkbox]{width:16px;height:16px;margin:0;flex:none}.brush-library-modal .brush-test-controls button{font-size:11px;padding:4px 6px;margin:0;min-height:44px;white-space:nowrap}.brush-library-modal #brushTestCanvas{aspect-ratio:10/3;height:auto}.brush-library-modal .brush-test-note{font-size:10px;line-height:1.3;margin:5px 0 7px}.brush-library-modal .brush-preset-actions{display:flex;align-items:center;gap:6px;padding:4px 0 6px}.brush-library-modal .brush-preset-actions button{min-height:44px;font-size:12px;padding:6px 10px}.brush-library-modal .brush-presets .brush-setting-note{font-size:11px!important;line-height:1.35;margin:5px 0!important}.brush-library-modal .brush-preset-save{grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:5px 0 8px}.brush-preset-save>label,.brush-preset-save>p{grid-column:1/-1}.brush-library-modal .brush-preset-save input[type=text]{min-height:44px}.brush-library-modal .brush-preset-save button{font-size:12px;padding:6px 10px}.brush-library-modal [hidden]{display:none!important}.brush-library-modal .quick-brush-section{margin-bottom:8px}.brush-library-modal .quick-brush-section h3{margin:6px 0;font-size:12px}.brush-library-modal .quick-brush-choice{flex-basis:112px;min-height:58px;padding:6px}.brush-library-modal .quick-brush-choice>span,.brush-library-modal .quick-brush-choice img,.brush-library-modal .quick-brush-choice svg{height:20px}

/* Phone/tablet header and menu overlay: menus do not resize the workspace. */
#mobileHeaderMenu{display:none}#mobileMoreTools{display:none;position:fixed;inset:0;z-index:40;max-height:none;overflow:hidden;padding:0;background:#17161366;align-items:flex-end;justify-content:center;overscroll-behavior:contain}#mobileMoreTools.open{display:flex}#mobileMoreTools[hidden]{display:none!important}.mobile-menu-panel{width:min(620px,100%);max-height:75dvh;display:flex;flex-direction:column;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:0 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -12px 36px #201a1225}.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;padding:8px 0;border-bottom:1px solid var(--line)}.mobile-menu-head h2{font-size:16px;margin:0}.mobile-menu-head button{display:inline-flex;min-height:44px;align-items:center;font-size:13px;padding:6px 12px}.mobile-menu-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 0;flex-shrink:0}.mobile-menu-tabs button{min-height:44px;border:1px solid var(--line);background:#fff;border-radius:10px;color:var(--ink);font-size:13px}.mobile-menu-tabs button[aria-selected=true]{background:var(--accent-soft);border-color:#d88369;color:#a34d35}.mobile-menu-content{min-height:0;overflow:auto;overscroll-behavior:contain}.mobile-menu-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:2px 0 6px}.mobile-menu-group[hidden],.mobile-menu-save-status[hidden]{display:none!important}.mobile-menu-group .tool{display:flex;width:100%;max-width:none;min-width:0;height:auto;min-height:72px;align-items:center;justify-content:center;gap:5px;padding:8px 5px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}.mobile-menu-group .tool.active{background:var(--accent-soft);border-color:#d88369}.mobile-menu-group .tool .sym{font-size:23px;line-height:1.1}.mobile-menu-group .tool small{font-size:11px;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip;text-align:center;max-width:100%;overflow-wrap:anywhere}.mobile-menu-save-status{font-size:11px;color:var(--muted);margin:0 0 8px}.mobile-menu-open{overscroll-behavior:none}
@media(max-width:850px){.app>header{height:56px;min-height:56px;max-height:56px;display:grid;grid-template-columns:44px minmax(0,1fr) 16px 44px 44px;gap:4px;padding:4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));overflow:hidden}.app>header #mobileHeaderMenu{display:inline-flex;align-items:center;justify-content:center;grid-column:1;grid-row:1}.app>header .brand,.app>header #galleryBtn,.app>header #importImageBtn,.app>header .divider,.app>header #saveNowBtn,.app>header .header-spacer,.app>header #timelapseBtn,.app>header #smartToggleBtn,.app>header #exportBtn{display:none!important}.app>header #projectName{grid-column:2;grid-row:1;width:100%;max-width:100%;min-width:0;font-size:16px;font-weight:600;text-overflow:ellipsis;padding:4px;border:0}.app>header .save-status{display:flex;grid-column:3;grid-row:1;min-width:0;width:16px;justify-content:center;font-size:0;margin:0}.app>header .save-status .dot{width:8px;height:8px;flex:0 0 8px;margin:0}.app>header #saveStatus{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.app>header #undoBtn{grid-column:4;grid-row:1;display:inline-flex}.app>header #redoBtn{grid-column:5;grid-row:1;display:inline-flex}.app>header .iconbtn{width:44px;min-width:44px;height:44px;min-height:44px;align-items:center;justify-content:center;font-size:22px;padding:0}.focus-mode #mobileTools{grid-template-columns:repeat(3,minmax(0,1fr))}.focus-mode #mobileTools>.tool{display:none}.focus-mode #mobileTools>[data-tool=brush],.focus-mode #mobileTools>[data-tool=eraser],.focus-mode #mobileTools>#mobileMoreToggle{display:flex;max-width:none;width:100%}.focus-controls{gap:4px}.focus-controls input[type=range]{accent-color:var(--accent)}}

/* Compact, vertical menu tiles and consistent local vector symbols. */
#mobileMoreTools .mobile-menu-group{gap:5px}#mobileMoreTools .mobile-menu-group>.tool{flex-direction:column;height:64px;min-height:64px;padding:5px 4px;gap:4px;overflow:visible}#mobileMoreTools .mobile-menu-group .tool .sym{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;font-size:0}#mobileMoreTools .mobile-menu-group .tool small{font-size:11px;line-height:1.2;overflow-wrap:normal;word-break:normal;white-space:normal;max-width:100%;display:block}#mobileMoreTools .mobile-menu-group .tool .sym svg{display:block;width:22px;height:22px}#mobileTools>.tool .sym{display:flex;align-items:center;justify-content:center}#mobileTools>.tool .sym svg{display:block;width:23px;height:23px}.mobile-menu-panel{padding-left:10px;padding-right:10px}.mobile-menu-head{padding:5px 0}.mobile-menu-tabs{padding:6px 0}.mobile-menu-save-status{margin-bottom:6px}

/* The middle scrolls; the footer occupies its own space. */
.lighting-modal{max-width:720px!important;width:calc(100vw - 24px);max-height:92dvh;overflow:hidden!important;padding:16px!important;display:flex;flex-direction:column;gap:0;box-sizing:border-box}.lighting-modal .brush-dialog-head{flex-shrink:0;gap:6px;margin-bottom:4px}.lighting-modal h2{font-size:20px;margin-right:auto}.lighting-modal button{min-height:44px}.lighting-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 3px}.lighting-modal .lighting-note,.lighting-modal .lighting-target{font-size:12px;line-height:1.4;margin:6px 0;color:var(--muted)}.lighting-modal .lighting-target{color:var(--ink);font-weight:600}.lighting-tabs{display:flex;flex-wrap:wrap;gap:5px}.lighting-tabs [aria-pressed=true]{background:#ece4d5;color:#5d4630}.lighting-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:14px;align-items:start}.lighting-preview-wrap{min-width:0;position:sticky;top:0;align-self:start}.lighting-preview-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:320/200;border:1px solid var(--line);border-radius:12px;background-color:#faf9f6;background-image:conic-gradient(#e9e6df 25%,transparent 0 50%,#e9e6df 0 75%,transparent 0);background-size:18px 18px;touch-action:none;cursor:crosshair}.lighting-controls{display:grid;gap:4px;min-width:0;align-items:start}.lighting-controls label{display:block;font-size:12px;min-width:0;margin:0;line-height:1.25}.lighting-controls select{display:block;width:100%;height:44px;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:4px}.lighting-controls input[type=range]{width:100%;height:36px;margin:0}.lighting-controls output{float:right;font-size:11px}.lighting-range-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.lighting-controls details label{margin-top:8px}.lighting-controls summary,.lighting-help summary{font-size:12px;min-height:44px;padding:12px 0;box-sizing:border-box;cursor:pointer}.lighting-colors{display:flex;gap:18px}.lighting-colors input{display:block;width:52px;height:44px}.lighting-footer{flex-shrink:0;border-top:1px solid var(--line);padding-top:6px;margin-top:6px;background:var(--panel)}.lighting-footer .lighting-note{margin:2px 0 6px}.lighting-actions{position:static;margin-top:0!important;gap:8px}.lighting-actions .primarybtn{flex:1;font-size:13px}.lighting-actions .primarybtn:disabled{background:#e4e2de;color:#858078;border:1px solid #d4d0c9;box-shadow:none;opacity:1;cursor:not-allowed}.lighting-modal :focus-visible{outline:2px solid #ab813b;outline-offset:3px}@media(max-width:560px){.lighting-modal{padding:10px!important;max-height:calc(100dvh - 20px)}.lighting-body{grid-template-columns:1fr;gap:6px}.lighting-preview-wrap{position:static;max-width:256px;width:100%;margin:auto}.lighting-modal .lighting-preview-wrap .lighting-note{text-align:center;font-size:11px;margin:4px 0}.lighting-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 10px}.lighting-controls details{grid-column:1/-1}.lighting-controls select{font-size:16px}.lighting-controls input[type=range]{height:40px}.lighting-modal h2{font-size:18px}.lighting-tabs button{font-size:12px;padding:5px 8px}.lighting-modal .brush-dialog-head button{padding:4px 8px;font-size:12px}}

/* Content reveal uses an isolated canvas, not the editor history. */
.reveal-modal{max-width:700px!important;width:calc(100vw - 24px);max-height:92dvh;display:flex;flex-direction:column;overflow:hidden;padding:14px!important;box-sizing:border-box}.reveal-modal .brush-dialog-head{flex-shrink:0}.reveal-modal h2{font-size:19px}.reveal-modal button{min-height:44px}.reveal-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 2px}.reveal-modal .reveal-note,.reveal-modal .reveal-sources p{font-size:12px;line-height:1.4;margin:6px 0;color:var(--muted)}.reveal-sources{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin:8px 0}.reveal-sources section{border:1px solid var(--line);border-radius:10px;padding:8px;min-width:0}.reveal-sources h3{font-size:13px;margin:0}.reveal-sources button{width:100%;font-size:12px;margin-top:4px;padding:5px}.reveal-preview-wrap{display:flex;justify-content:center;margin:8px 0;background:#eeeae3;border-radius:10px;overflow:hidden}.reveal-preview-wrap canvas{display:block;max-width:100%;max-height:45dvh;width:auto;height:auto;touch-action:none;cursor:crosshair;background:#fff;object-fit:contain}.reveal-settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.reveal-settings label{font-size:12px;min-width:0}.reveal-settings input{display:block;width:100%;height:40px;margin:0}.reveal-settings output{float:right;font-size:11px}.reveal-tools{display:flex;flex-wrap:wrap;gap:5px}.reveal-tools button{flex:1;font-size:12px;white-space:nowrap;padding:5px 8px}.reveal-help summary{min-height:44px;font-size:12px;padding:12px 0;box-sizing:border-box;cursor:pointer}.reveal-footer{flex-shrink:0;border-top:1px solid var(--line);padding-top:5px;margin-top:5px}.reveal-footer .primarybtn{width:100%;font-size:13px}.reveal-modal button:disabled{background:#e4e2de;color:#858078;border-color:#d4d0c9;opacity:1;cursor:not-allowed}.reveal-modal :focus-visible{outline:2px solid #ab813b;outline-offset:2px}@media(max-width:560px){.reveal-modal{max-height:calc(100dvh - 20px);padding:10px!important}.reveal-preview-wrap canvas{max-height:38dvh}.reveal-sources{gap:6px}.reveal-sources section{padding:6px}.reveal-sources h3{font-size:12px}.reveal-sources button{font-size:11px}.reveal-modal .reveal-sources p{font-size:11px}.reveal-tools button{font-size:11px}.app>header #revealBtn{display:none!important}}

@media(max-width:850px){.app>header #revealBtn{display:none!important}}

.reveal-video-options{display:flex;align-items:end;gap:8px}.reveal-video-options label{display:block;font-size:11px;flex:0 0 110px}.reveal-video-options select{width:100%;height:44px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;background:var(--panel);padding:4px}.reveal-video-options .primarybtn{flex:1}.reveal-save-secondary{display:flex;gap:8px}.reveal-save-secondary:has([hidden]){margin-top:0}.reveal-save-secondary button{font-size:11px;padding:5px 8px}.reveal-save-secondary [hidden],.reveal-video-result[hidden]{display:none!important}.reveal-video-result{margin:10px 0;padding:8px;border:1px solid var(--line);border-radius:10px}.reveal-video-result video{display:block;width:100%;max-height:40dvh;background:#222;border-radius:8px}.reveal-video-result a{display:block;text-align:center;text-decoration:none;margin-top:8px;min-height:44px;box-sizing:border-box;padding:12px;font-size:13px}

/* Collapse preparation once both versions are selected; keep brush controls by the art. */
.reveal-sources-details{margin:4px 0 6px;border:1px solid var(--line);border-radius:10px;padding:0 8px}.reveal-sources-details>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font-size:13px;cursor:pointer;list-style:none}.reveal-sources-details>summary::-webkit-details-marker{display:none}.reveal-sources-details>summary span{color:var(--muted);font-size:12px}.reveal-sources-details[open]>summary{border-bottom:1px solid var(--line)}.reveal-sources-details .reveal-sources{margin:6px 0;gap:8px}.reveal-sources-details .reveal-sources section{border:0;border-radius:0;padding:0}.reveal-sources-details .reveal-sources section+section{border-left:1px solid var(--line);padding-left:8px}.reveal-modal .reveal-sources p{font-size:11px;margin:3px 0;min-height:28px}.reveal-empty{padding:14px 10px!important;border-radius:10px;background:#f3f0e9;text-align:center;font-size:12px!important;line-height:1.4!important;margin:8px 0!important;color:var(--muted)!important}.reveal-workspace[hidden],.reveal-empty[hidden]{display:none!important}.reveal-workspace .reveal-settings{gap:8px;margin-top:4px}.reveal-settings input{height:36px}.reveal-preview-wrap{margin:4px 0}.reveal-tools{align-items:center;gap:4px}.reveal-tools button{flex:0 0 auto;min-width:44px;padding:4px 8px}.reveal-gesture-hint{font-size:11px;color:var(--muted);margin-left:auto}.reveal-extra-actions{display:flex;flex-wrap:wrap;gap:5px}.reveal-extra-actions button{font-size:12px;padding:5px 8px}.reveal-footer .reveal-note:empty{display:none}.reveal-footer #revealStatus{font-size:11px;line-height:1.35;margin:3px 0 6px}.reveal-video-options label{flex-basis:105px}.reveal-workspace .reveal-preview-wrap canvas{max-height:45dvh}.reveal-modal .brush-dialog-head{padding:2px 0;margin-bottom:3px}.reveal-help summary{padding:10px 0}.reveal-save-secondary #revealCancelVideo{width:100%;margin-top:4px}@media(max-width:560px){.reveal-modal{padding:8px!important}.reveal-sources-details{padding:0 6px}.reveal-sources-details .reveal-sources{gap:6px}.reveal-workspace .reveal-preview-wrap canvas{max-height:40dvh}.reveal-sources button{font-size:11px;padding:4px}.reveal-tools button{font-size:12px}.reveal-settings input{height:40px}}

/* Compact process recording: scroll the middle, keep export reachable. */
.tl-modal{display:flex;flex-direction:column;width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:hidden;padding:12px!important;box-sizing:border-box}.tl-modal .brush-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0;margin-bottom:6px}.tl-modal h2{margin:0;font-size:17px}.tl-modal button,.tl-modal select,.tl-modal summary,.tl-modal a{min-height:44px}.tl-body{overflow:auto;overscroll-behavior:contain;min-height:0}.tl-body p{font-size:12px;line-height:1.4;margin:6px 0;color:var(--muted)}#tlPreview{display:block;width:100%;height:auto;max-height:38dvh;object-fit:contain;background:#eeece6;border-radius:9px}#tlVideoResult{width:100%;max-height:34dvh;border-radius:9px;margin-top:6px}.tl-scrub{display:flex;align-items:center;gap:8px}.tl-scrub input{flex:1;min-width:0;height:40px;margin:0}.tl-scrub output{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}.tl-controls{display:flex;align-items:center;gap:8px;margin:4px 0}.tl-controls>button{flex:1}.tl-controls label{display:flex;align-items:center;gap:6px;font-size:12px}.tl-controls select{padding:6px;border:1px solid var(--line);border-radius:8px;background:white;color:inherit}.tl-extra{border-top:1px solid var(--line);margin-top:6px}.tl-extra summary{display:flex;align-items:center;font-size:12px;cursor:pointer}.tl-extra-actions{display:flex;gap:6px}.tl-extra-actions button{flex:1;font-size:12px}.tl-footer{flex-shrink:0;border-top:1px solid var(--line);margin-top:6px;padding-top:5px}.tl-footer p{font-size:11px;line-height:1.35;margin:3px 0 6px;color:var(--muted)}.tl-footer button,.tl-footer a{width:100%;box-sizing:border-box}.tl-footer a{display:flex;justify-content:center;align-items:center;text-decoration:none;margin-top:5px}.tl-footer #tlCancelVideo{margin-top:4px}.tl-empty{text-align:center;padding:18px 8px;background:#f2eee6;border-radius:9px}.tl-modal .tl-warning{color:#8b4c21}.tl-warning:empty{display:none}.tl-modal button:disabled{background:#e4e2de;color:#858078;border-color:#d4d0c9;opacity:1;cursor:not-allowed}.tl-modal [hidden]{display:none!important}.tl-modal :focus-visible{outline:2px solid #ab813b;outline-offset:2px}@media(max-width:560px){.tl-modal{max-height:calc(100dvh - 20px);padding:9px!important}.tl-controls{gap:5px}.tl-controls label{font-size:11px}.tl-controls select{font-size:16px}#tlPreview{max-height:36dvh}}

/* Layers use a short list and compact properties; mobile brush controls live in their own panel. */
#layerPanel .layer-head{gap:8px;margin-bottom:6px}#layerPanel .layer-head-actions{display:flex;align-items:center;gap:5px}#layerPanel .small-add{width:44px;height:44px;min-width:44px;font-size:22px;flex:none}#layerPanel .active-layer-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}#layerPanel .layers{gap:4px;margin-top:0}#layerPanel .layer-row{min-height:48px;box-sizing:border-box;padding:1px 3px;gap:2px;border-radius:8px}#layerPanel .layer-row.selected{border-left-width:3px}#layerPanel .layer-row .eye,#layerPanel .layer-lock{width:44px;min-width:44px;min-height:44px;padding:0;flex:none}#layerPanel .layer-row .layer-name{flex:1;min-width:0;min-height:44px;border:0;background:transparent;padding:4px 5px;font:inherit;font-size:12px;font-weight:600;color:inherit;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}#layerPanel .layer-row.locked .layer-name{color:#847c70}#layerPanel .layer-properties{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:10px;margin-top:6px}#layerPanel .layer-opacity{margin:0}#layerPanel .layer-properties .control-label{margin:0;min-height:20px;gap:4px;font-size:11px}#layerPanel .layer-blend>label{display:block;min-height:20px;font-size:11px;color:var(--muted)}#layerPanel .layer-properties .range{display:block;width:100%;height:44px;min-height:44px;margin:0}#layerPanel .layer-properties .brush-select{width:100%;height:44px;min-height:44px;margin:0;padding:4px 7px;font-size:12px;box-sizing:border-box}#layerPanel .layer-extra{margin-top:4px;padding-top:0}#layerPanel .layer-extra summary{min-height:44px;font-size:12px}#layerPanel .layer-extra .layer-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0 0 4px}#layerPanel .layer-actions button{min-width:0;min-height:44px;height:auto;padding:5px 3px;font-size:11px;line-height:1.2}#layerPanel .clip-toggle{display:flex;align-items:center;gap:7px;min-height:44px;margin:0;font-size:12px}#layerPanel .clip-toggle input{width:20px;height:20px;margin:0;flex:none}#layerPanel .clip-note{font-size:11px;margin:0 0 5px;line-height:1.35}#layerPanel :focus-visible{outline:2px solid var(--accent);outline-offset:1px}@media(max-width:850px){#layerPanel.mobile-open{padding:0 10px calc(6px + env(safe-area-inset-bottom));max-height:min(48dvh,430px)}#layerPanel.mobile-open .layer-head{padding:4px 0;margin-bottom:5px}#layerPanel.mobile-open .layers{padding:0;max-height:18dvh;overflow:auto}#layerPanel.mobile-open .layer-row{min-height:48px}#layerPanel.mobile-open #panelToolSettings{display:none}#layerPanel.mobile-open .layer-properties{gap:8px;margin-top:5px}#layerPanel.mobile-open .layer-properties .brush-select{font-size:16px}#layerPanel.mobile-open .layer-extra{margin-top:3px}#layerPanel.mobile-open .layer-head .textbtn{padding:4px 8px}#layerPanel.mobile-open .layer-properties .control-label{margin-top:0}}

#fillSettingsBtn[hidden]{display:none!important}#fillSettingsBtn{flex-shrink:0;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12px;background:var(--panel)}.fill-settings-modal{box-sizing:border-box;max-height:calc(100dvh - 36px);overflow:auto;padding:12px!important}.fill-settings-modal .brush-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.fill-settings-modal h2{font-size:17px;margin:0}.fill-settings-modal button,.fill-settings-modal summary{min-height:44px}.fill-setting{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px;font-size:13px;margin-top:8px}.fill-setting output{font-size:12px;font-variant-numeric:tabular-nums}.fill-setting input{grid-column:1/-1;width:100%;height:44px;margin:0;accent-color:var(--accent)}.fill-settings-modal p{font-size:12px;line-height:1.4;margin:3px 0 10px;color:var(--muted)}.fill-settings-modal summary{font-size:12px;align-content:center;cursor:pointer}.fill-settings-modal details{border-top:1px solid var(--line)}.fill-settings-modal :focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:560px){#fillSettingsBtn{font-size:11px;padding:4px 6px}.stage-top:has(#fillSettingsBtn:not([hidden])) #toolHint{display:none}}

/* Show the active tool's settings where the thumb already expects them. */
#fillSettingsBtn{background:#f6e2da;border-color:#bd6c53;color:#783321;font-weight:700;box-shadow:0 1px 3px #78332118}#fillSettingsBtn:hover{background:#edd0c4}.fill-tool #mobileBrushSettings{background:#9b412b;border:1px solid #813521;color:#fff;font-weight:700;box-shadow:0 2px 5px #81352122;white-space:normal;line-height:1.2;max-width:104px;padding:6px 9px}.fill-tool #mobileBrushSettings:focus-visible{outline:3px solid #e5ae5c;outline-offset:2px}.fill-tool #mobileBrushSettings:hover{background:#813521}@media(max-width:850px){.fill-tool #mobileBrushSettings{min-height:44px;width:100px;font-size:12px}}

.eyedropper-options{display:flex;align-items:center;gap:5px;font-size:12px;flex-shrink:0}.eyedropper-options[hidden]{display:none}.eyedropper-options select{min-height:44px;max-width:150px;background:var(--panel);color:var(--ink);border:1px solid #b68d7d;border-radius:8px;font:inherit;font-size:14px;padding:4px}.eyedropper-tool .stage-top .hint{display:none}.eyedropper-loupe{position:fixed;z-index:10000;pointer-events:none;width:104px;padding:6px;border:1px solid #b5a79b;border-radius:12px;background:#fffdf9;color:#302e2b;box-shadow:0 4px 18px #0003;box-sizing:border-box;text-align:center}.eyedropper-loupe[hidden]{display:none}.eyedropper-loupe canvas{display:block;margin:auto;border-radius:5px;background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0/12px 12px}.eyedropper-colors{display:flex;margin:4px 0;height:14px;border:1px solid #aaa}.eyedropper-colors span{width:50%}#eyedropperHex{font-size:11px;font-weight:600}.eyedropper-tool #stage{cursor:crosshair}#referenceImage{touch-action:none}.eyedropper-options select:focus-visible{outline:2px solid #9b412b;outline-offset:2px}@media(max-width:560px){.eyedropper-options{margin-left:auto}.eyedropper-options select{font-size:16px;max-width:156px}.eyedropper-options>span{display:none}}

.fit-canvas-btn{display:inline-flex!important;min-height:44px}.mobile-hand-panel{display:none}.hand-tool .focus-size,.hand-tool #focusColor{display:none}.hand-view-actions{display:flex;align-items:center;gap:6px}.hand-view-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:4px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px;flex:1}.hand-view-actions button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}.hand-view-actions output{min-width:50px;text-align:center;font-size:12px;color:var(--muted)}.mobile-hand-panel p{font-size:11px;color:var(--muted);margin:4px 0 0;text-align:center}.hand-view-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:850px){.hand-tool .mobile-settings.compact-brush-panel{display:none}.hand-tool .mobile-hand-panel{display:block;flex-shrink:0;background:var(--panel);border-top:1px solid var(--line);padding:6px 8px}.hand-tool .stage-bottom:not(.transforming){display:none}}.focus-mode.hand-tool .mobile-hand-panel{display:block;flex-shrink:0;background:var(--panel);border-top:1px solid var(--line);padding:6px 8px}.focus-mode.hand-tool .stage-bottom:not(.transforming){display:none}

.gradient-panel{display:none}.gradient-tool .gradient-panel{display:block;flex-shrink:0;background:var(--panel);border-top:1px solid var(--line);padding:6px 10px}.gradient-color-row,.gradient-options-row{display:flex;align-items:center;gap:8px}.gradient-color-row label{display:flex;align-items:center;gap:4px;font-size:11px}.gradient-color-row input[type=color]{width:44px;height:44px;border:1px solid var(--line);border-radius:8px;padding:3px;background:var(--panel)}.gradient-bar-wrap{flex:1;min-width:20px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0/12px 12px}#gradientColorBar{height:18px}.gradient-color-row select{height:44px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:16px;padding:4px}.gradient-options-row label{display:flex;align-items:center;gap:4px;font-size:12px;min-height:44px}.gradient-options-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.gradient-opacity{flex:1;min-width:0}.gradient-opacity input{width:100%;min-width:30px;height:44px;accent-color:var(--accent)}.gradient-opacity output{min-width:35px;font-size:11px}.gradient-panel p{font-size:10px;color:var(--muted);margin:0;line-height:1.35}.gradient-tool .focus-size,.gradient-tool #focusColor{display:none}.gradient-panel :focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:850px){.gradient-tool .mobile-settings.compact-brush-panel{display:none}}.gradient-tool .gradient-color-row input:disabled{opacity:.35}.gradient-tool .gradient-panel{max-width:100%;box-sizing:border-box}

.smudge-panel{display:none}.smudge-tool .smudge-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;flex-shrink:0;background:var(--panel);border-top:1px solid var(--line);padding:6px 10px}.smudge-panel label{display:flex;align-items:center;gap:5px;min-width:0;font-size:12px;min-height:44px}.smudge-panel input{width:100%;min-width:30px;height:44px;accent-color:var(--accent)}.smudge-panel output{min-width:32px;font-size:11px}.smudge-panel p{grid-column:1/-1;font-size:10px;line-height:1.35;color:var(--muted);margin:0}.smudge-tool .focus-size,.smudge-tool #focusColor{display:none}.smudge-panel :focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:850px){.smudge-tool .mobile-settings.compact-brush-panel{display:none}}

/* Selection actions remain close to the canvas, including focus mode. */
.selection-actions{display:flex;flex:none;align-items:center;justify-content:center;gap:6px;padding:2px 8px;border-top:1px solid var(--line);background:var(--accent-soft)}
.selection-actions[hidden]{display:none!important}
.selection-actions span{font-size:11px;color:var(--ink);margin-right:auto;white-space:nowrap}
.selection-actions button{min-height:44px;min-width:64px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#fffefa;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.selection-actions button:first-of-type{color:var(--accent);border-color:var(--accent)}
.selection-actions button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.ellipse-panel{display:none}.ellipse-tool .ellipse-panel{display:block;flex-shrink:0;background:var(--panel);border-top:1px solid var(--line);padding:4px 8px;max-width:100%;box-sizing:border-box}
.ellipse-options,.ellipse-controls{display:flex;align-items:center;gap:8px}.ellipse-options>div{display:flex;flex:1;gap:3px;min-width:0}.ellipse-options button{flex:1;min-width:0;min-height:44px;padding:3px 5px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);font:inherit;font-size:12px}.ellipse-options button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.ellipse-controls input[type=color]{width:44px;height:44px;flex:none;border:1px solid var(--line);border-radius:8px;padding:3px;background:var(--panel)}.ellipse-controls label{display:flex;flex:1;align-items:center;gap:4px;min-width:0;min-height:44px;font-size:11px}.ellipse-controls label[hidden]{display:none!important}.ellipse-controls input[type=range]{width:100%;min-width:20px;height:44px;accent-color:var(--accent)}.ellipse-controls output{font-size:10px;min-width:20px}.ellipse-panel :focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ellipse-tool .focus-size,.ellipse-tool #focusColor{display:none}
@media(max-width:850px){.ellipse-tool .mobile-settings.compact-brush-panel{display:none}}

.curve-panel[hidden]{display:none!important}.curve-panel{padding:8px 12px;background:var(--panel,#fff);border-top:1px solid #ddd}.curve-panel p{margin:0 0 6px;font-size:12px}.curve-panel>div{display:flex;gap:8px}.curve-panel button{min-height:44px;flex:1;border:1px solid #ccc;border-radius:10px;background:#fff;color:#302e2b}.curve-panel button:disabled{opacity:.45}

.frame-panel[hidden],.frame-panel input[hidden]{display:none!important}.frame-panel{display:flex;gap:10px;align-items:center;padding:8px 12px;background:#fff;border-top:1px solid #ddd}.frame-panel label{display:flex;align-items:center;gap:6px;font-size:12px;min-height:44px}.frame-panel input[type=color]{width:40px;height:44px;padding:3px;border-radius:8px;border:1px solid #ccc}.frame-width{flex:1;min-width:0}.frame-width input{width:100%;min-width:35px}.frame-width output{min-width:22px}.frame-panel input[type=checkbox]{width:20px;height:20px}.frame-panel label:has(input[type=checkbox]){cursor:pointer}@media(max-width:850px){body:has(.frame-panel:not([hidden])) .compact-brush-panel{display:none!important}}

.frame-panel{flex-wrap:wrap}.frame-panel .text-object-bar{position:static;transform:none;left:auto;bottom:auto;flex-basis:100%;order:2;max-width:none;box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:6px 0 0;margin:0;gap:8px;z-index:auto;background:transparent}.frame-panel .text-object-bar>span{display:none}.frame-panel .text-object-bar>button{flex:1;min-height:44px;font-size:12px}.text-object-bar button:disabled{opacity:.4}.object-more{position:relative}.object-more[hidden]{display:none!important}.object-more summary{list-style:none;cursor:pointer;min-width:56px;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;font-size:12px;background:#fff}.object-more summary::-webkit-details-marker{display:none}.object-more>div{position:absolute;bottom:calc(100% + 6px);right:0;display:grid;gap:6px;padding:8px;background:#fffefa;border:1px solid var(--line);border-radius:10px;box-shadow:0 5px 20px #0002;z-index:25;min-width:130px}.object-more button{min-height:44px}.compact-shape-dialog{padding:18px!important;max-width:440px;max-height:85dvh;overflow:auto}.compact-shape-dialog h2{margin:0 0 12px;font-size:20px}.compact-shape-dialog .filter-field{margin:8px 0}.compact-shape-dialog input,.compact-shape-dialog select{min-height:44px}.compact-shape-dialog .object-fields{gap:10px}.compact-shape-dialog>details{margin-top:10px;border-top:1px solid var(--line)}.compact-shape-dialog>details>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:13px}.compact-shape-dialog .filter-actions{margin-top:12px;padding-top:10px}.compact-shape-dialog .filter-actions button{min-height:44px}

.bubble-panel[hidden],.bubble-panel input[hidden]{display:none!important}.bubble-panel{padding:8px 12px;background:#fff;border-top:1px solid var(--line)}.bubble-options{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.bubble-options select{max-width:130px;min-height:44px;border-radius:8px}.bubble-options input[type=color]{width:40px;height:44px;border-radius:8px}.bubble-options label{display:flex;gap:4px;align-items:center;font-size:12px;min-height:44px}.bubble-options label:has(input[type=range]){flex:1;min-width:100px}.bubble-options input[type=range]{width:100%;min-width:40px}.bubble-panel p{font-size:12px;margin:6px 0}.bubble-actions{display:flex;gap:8px}.bubble-actions button{flex:1;min-height:44px;background:#fff;border:1px solid var(--line);border-radius:8px}.bubble-actions button:disabled{opacity:.4}@media(max-width:850px){body:has(.bubble-panel:not([hidden])) .compact-brush-panel{display:none!important}}

.bubble-panel .text-object-bar{position:static;transform:none;max-width:none;box-shadow:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:6px 0 0;margin-top:6px;gap:8px;z-index:auto;background:transparent}.bubble-panel .text-object-bar>span{display:none}.bubble-panel .text-object-bar>button{flex:1;min-height:44px;font-size:12px}

.text-panel[hidden],#textInBubble[hidden]{display:none!important}.text-panel{padding:8px 12px;background:#fff;border-top:1px solid var(--line)}.text-panel p{font-size:12px;margin:0 0 6px}.text-panel .text-object-bar{position:static;transform:none;max-width:none;box-shadow:none;border:0;padding:0;background:transparent;gap:8px}.text-panel .text-object-bar>span{display:none}.text-panel button{min-height:44px;flex:1}.compact-text-dialog{max-width:440px;padding:18px!important;max-height:85dvh;overflow:auto}.compact-text-dialog h2{margin:0 0 10px;font-size:20px}.compact-text-dialog textarea{width:100%;min-height:80px}.text-dialog-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.text-dialog-controls select,.text-dialog-controls input[type=color]{min-height:44px;width:100%}.text-preview-box{display:flex;justify-content:center;border:1px solid var(--line);border-radius:8px;background:#fff;max-height:150px;overflow:hidden;margin:8px 0}.text-preview-box canvas{max-width:100%;max-height:150px;object-fit:contain}#textWarning{font-size:12px;color:#9c3c27;margin:6px 0}.compact-text-dialog .filter-actions button{min-height:44px}.compact-text-dialog .filter-actions{margin-top:10px}@media(max-width:850px){body:has(.text-panel:not([hidden])) .compact-brush-panel{display:none!important}}

.text-panel .text-object-bar,.bubble-panel .text-object-bar{flex-wrap:wrap}#textInBubble{order:3;flex:1 0 100%;min-height:44px}

.symmetry-panel[hidden]{display:none!important}.symmetry-panel{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#fffefa;border-top:1px solid var(--line);flex-wrap:wrap}.symmetry-panel select,.symmetry-panel button{min-height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:6px;font:inherit;font-size:12px}.symmetry-panel label{flex:1;min-width:100px;font-size:11px}.symmetry-panel input{display:block;width:100%;min-height:28px}

.guides-panel[hidden]{display:none!important}.guides-panel{padding:6px 12px;background:#fffefa;border-top:1px solid var(--line)}.guides-row{display:flex;gap:6px}.guides-row select{flex:1;min-width:0}.guides-row select,.guides-row button{min-height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:6px;font:inherit;font-size:12px}.guides-horizon{display:flex;align-items:center;gap:8px;font-size:11px;margin-top:4px}.guides-horizon input{flex:1;min-width:60px;min-height:28px}.guides-panel p{margin:4px 0 0;font-size:11px;color:#79766f}@media(max-width:980px){body:has(#guidesPanel:not([hidden])) .mobile-settings{display:none!important}}

.line-perspective-panel[hidden]{display:none!important}.line-perspective-panel{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#fffefa;border-top:1px solid var(--line)}.line-perspective-panel label{display:flex;align-items:center;gap:8px;flex:1;font-size:12px}.line-perspective-panel select{flex:1;min-width:0}.line-perspective-panel button,.line-perspective-panel select{min-height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:6px;font:inherit;font-size:12px}.guide-line-row{margin-top:4px}.guide-appearance summary{min-height:36px;display:flex;align-items:center;font-size:12px;cursor:pointer}.guide-appearance label{display:flex;align-items:center;gap:8px;font-size:11px}.guide-appearance input{flex:1;min-width:60px;min-height:36px}