/* Luna Photo Builder — Stage 8 style boundary */
@font-face {
    font-family:'Luna Handwriting';
    src:url('../fonts/luna-handwriting/naver/NanumGyuRiEuiIrGi.woff2') format('woff2');
    font-style:normal;
    font-weight:400;
    font-display:block;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
    color-scheme: light;
    --surface-app: #eef1f5; --surface-panel: #f8fafc; --surface-raised: #ffffff; --surface-subtle: #f3f6f9;
    --surface-hover: #e3edf6; --surface-selected: #dcebf7; --surface-canvas-a: #dfe5eb; --surface-canvas-b: #e7ebef;
    --border-soft: #d4dbe3; --border-strong: #aebdca;
    --text-primary: #2f3b47; --text-secondary: #5f6f7e; --text-muted: #657482; --text-on-accent: #ffffff;
    --accent-primary: #2979b8; --accent-hover-strong: #1f679f; --focus-ring: #0b6aa9;
    --danger: #b42318; --danger-surface: #fff3ef; --success: #21713e; --success-surface: #eef9f1;
    --warning: #745000; --warning-surface: #fff8e7; --info: #315b78; --info-surface: #eef6fd;
    --control-disabled-opacity: .45; --shadow-raised: 0 8px 24px rgba(35, 54, 72, .18);
    --bg: var(--surface-app); --panel: var(--surface-panel); --panel-dark: var(--surface-subtle); --border: var(--border-soft);
    --text: var(--text-primary); --text-dim: var(--text-muted); --accent: var(--accent-primary); --accent-hover: var(--accent-hover-strong);
    --tool-size: 32px; --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --surface-app: #151a21; --surface-panel: #1d242d; --surface-raised: #252e39; --surface-subtle: #202832;
    --surface-hover: #2d3a47; --surface-selected: #263f54; --surface-canvas-a: #15191e; --surface-canvas-b: #1c2229;
    --border-soft: #3b4855; --border-strong: #596978;
    --text-primary: #edf2f7; --text-secondary: #c5d0da; --text-muted: #9baaba; --text-on-accent: #071c2a;
    --accent-primary: #62a9dc; --accent-hover-strong: #7bb9e4; --focus-ring: #87c8f3;
    --danger: #ff8a80; --danger-surface: #3b2525; --success: #77d69a; --success-surface: #20352a;
    --warning: #ffd27a; --warning-surface: #3a3020; --info: #8dc7ed; --info-surface: #203240;
    --shadow-raised: 0 10px 28px rgba(0, 0, 0, .42);
}
html, body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font:12px var(--font); user-select:none; }

.skip-link{position:fixed;z-index:4000;left:12px;top:8px;padding:10px 14px;border:3px solid var(--focus-ring);border-radius:6px;background:var(--surface-raised);color:var(--text-primary);font-size:14px;font-weight:800;text-decoration:none;transform:translateY(-160%)}
.skip-link-panel{left:210px}
.skip-link:focus{transform:translateY(0)}

#pwa-update-banner{position:fixed;z-index:2600;left:50%;top:36px;display:flex;width:min(720px,calc(100vw - 24px));align-items:center;gap:10px;padding:10px 12px;border:1px solid #9b7c2f;border-radius:8px;background:var(--warning-surface);color:var(--text-primary);box-shadow:var(--shadow-raised);transform:translateX(-50%)}
#pwa-update-banner[hidden]{display:none}
.pwa-update-copy{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px;line-height:1.35}
.pwa-update-copy strong{font-size:13px}.pwa-update-copy span{color:var(--text-secondary);font-size:12px}
#pwa-update-banner button,#pwa-status,#accessibility-status{border:1px solid var(--border-strong);border-radius:5px;background:var(--surface-raised);color:var(--text-primary);cursor:pointer;font:inherit;font-weight:750}
#pwa-update-banner button{min-height:30px;padding:0 10px;white-space:nowrap}
#pwa-update-banner [data-pwa-update="apply"]{border-color:var(--accent-primary);background:var(--accent-primary);color:var(--text-on-accent)}
#pwa-update-banner button:focus-visible,#pwa-status:focus-visible,#accessibility-status:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
#pwa-status,#accessibility-status{height:22px;padding:0 8px;font-size:10px;white-space:nowrap}
#pwa-status[data-level="ready"]{border-color:#5c9c70;background:var(--success-surface);color:var(--success)}
#pwa-status[data-level="warning"]{border-color:#9b7c2f;background:var(--warning-surface);color:var(--warning)}
#pwa-status[data-level="error"]{border-color:#bd6b62;background:var(--danger-surface);color:var(--danger)}
#accessibility-status[data-level="ready"]{border-color:var(--border-strong);background:var(--surface-raised);color:var(--text-secondary)}
#accessibility-status[data-level="active"]{border-color:var(--accent-primary);background:var(--surface-selected);color:var(--text-primary)}
.dialog-pwa-status{width:min(520px,calc(100vw - 24px));color:var(--text-primary)}
.dialog-pwa-status dl{display:grid;gap:1px;margin:12px 0;border:1px solid var(--border-soft);border-radius:7px;overflow:hidden;background:var(--border-soft)}
.dialog-pwa-status dl div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:9px 10px;background:var(--surface-raised)}
.dialog-pwa-status dt{color:var(--text-secondary);font-weight:750}.dialog-pwa-status dd{margin:0;overflow-wrap:anywhere}
.pwa-status-error{margin:8px 0;padding:8px;border-radius:5px;background:var(--danger-surface);color:var(--danger)}
.dialog-accessibility-beta{width:min(520px,calc(100vw - 24px));color:var(--text-primary)}
.dialog-accessibility-beta header p{margin:-5px 0 14px;color:var(--text-secondary);font-size:14px;line-height:1.45}
.accessibility-beta-grid{display:grid;grid-template-columns:minmax(130px,.7fr) minmax(180px,1.3fr);align-items:center;gap:12px 16px}
.accessibility-beta-grid label{margin:0;color:var(--text-primary);font-size:14px;font-weight:750}
.accessibility-beta-grid select{min-height:40px;border:1px solid var(--border-strong);border-radius:5px;background:var(--surface-raised);color:var(--text-primary);font:14px var(--font)}
.accessibility-beta-grid .accessibility-check{grid-column:1/-1;display:flex;align-items:center;gap:9px;min-height:40px}
.accessibility-check input{width:20px;height:20px;accent-color:var(--accent-primary)}
#accessibility-beta-preview,.accessibility-beta-error{margin:14px 0 0;padding:10px;border-radius:5px;background:var(--info-surface);color:var(--info);font-size:14px;line-height:1.45}
.accessibility-beta-error{background:var(--danger-surface);color:var(--danger)}

/* ===== TOP MENU BAR ===== */
#menu-bar { display:flex; height:28px; background:#333; border-bottom:1px solid var(--border); align-items:center; padding:0 4px; gap:2px; z-index:100; }
#main-menu{display:flex;height:100%;align-items:center;gap:2px;flex:0 0 auto}
.menu-item { position:relative; padding:4px 10px; cursor:pointer; border-radius:3px; font-size:12px; }
.menu-item:hover { background:#505050; }
.menu-dropdown { display:none; position:absolute; top:100%; left:0; background:#3c3c3c; border:1px solid var(--border); border-radius:4px; min-width:220px; padding:4px 0; z-index:1000; box-shadow:0 4px 12px rgba(0,0,0,.5); }
.menu-item.open .menu-dropdown { display:block; }
.menu-item:focus-visible,.menu-dropdown .menu-action:focus-visible { outline:2px solid #0b6aa9;outline-offset:-2px;background:#dcebf7;color:#174f75; }
.menu-dropdown .menu-action { display:flex; justify-content:space-between; padding:6px 20px; cursor:pointer; white-space:nowrap; font-size:12px; }
.menu-item[data-menu="window"] > .menu-dropdown { min-width:240px; max-height:calc(100dvh - 40px); overflow-y:auto; }
.window-menu-hint { padding:7px 20px; color:var(--text-muted); font-size:11px; white-space:nowrap; }
.menu-item[data-menu="window"] .menu-action { position:relative; padding-left:32px; }
.menu-dropdown .menu-action[hidden] { display:none; }
.menu-action[role="menuitemcheckbox"][aria-checked="true"]::before { content:'✓'; position:absolute; left:12px; color:currentColor; }
.menu-action[role="menuitemradio"][aria-checked="true"]::before { content:'●'; position:absolute; left:12px; color:currentColor; }
.workspace-notice { position:fixed; right:12px; bottom:32px; z-index:9800; max-width:min(420px,calc(100vw - 24px)); padding:10px 14px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface-raised); color:var(--text-primary); box-shadow:0 4px 16px #0004; font-size:12px; line-height:1.5; pointer-events:none; }
.workspace-notice[hidden] { display:none; }
.menu-dropdown .menu-action:hover { background:var(--accent); color:#fff; }
.menu-dropdown .menu-action .shortcut { color:var(--text-dim); margin-left:30px; font-size:11px; }
.menu-dropdown .menu-action:hover .shortcut { color:rgba(255,255,255,.7); }
.menu-sep { height:1px; background:var(--border); margin:4px 0; }
.menu-dropdown .submenu { position:relative; }
.menu-dropdown .submenu > .menu-action::after { content:'\25B6'; font-size:8px; margin-left:8px; }
.menu-dropdown .submenu .menu-dropdown { display:none; left:100%; top:-4px; }
.menu-dropdown .submenu:hover .menu-dropdown { display:block; }
.menu-dropdown .submenu.open > .menu-dropdown,.menu-dropdown .submenu:focus-within > .menu-dropdown { display:block; }
#command-search-button{height:22px;padding:0 8px;border:1px solid #aebdca;border-radius:4px;background:#fff;color:#526170;font-size:10px;font-weight:700;cursor:pointer}

/* ===== OPTIONS BAR ===== */
#options-bar { display:flex; height:36px; background:var(--panel-dark); border-bottom:1px solid var(--border); align-items:center; padding:0 12px; gap:8px; font-size:11px; overflow-x:auto; flex-shrink:0; }
#document-tabs-bar{display:flex;height:32px;align-items:stretch;border-bottom:1px solid var(--border-soft);background:var(--surface-subtle);color:var(--text-primary);flex-shrink:0}
#document-tabs{display:flex;flex:1;min-width:0;align-items:flex-end;gap:2px;padding:4px 5px 0;overflow-x:auto;scrollbar-width:thin}
.document-tab{display:flex;min-width:130px;max-width:240px;height:27px;align-items:center;gap:5px;padding:0 5px 0 9px;border:1px solid var(--border-soft);border-bottom:0;border-radius:6px 6px 0 0;background:var(--surface-app);color:var(--text-secondary)}
.document-tab.active{height:28px;background:var(--surface-raised);border-color:var(--border-strong);color:var(--text-primary)}
.document-tab-select{min-width:0;flex:1;overflow:hidden;border:0;background:transparent;color:inherit;cursor:pointer;font:inherit;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.document-tab-close{width:20px;height:20px;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer;font-size:15px;line-height:1}
.document-tab-close:hover{background:var(--danger-surface);color:var(--danger)}
.document-tab-dirty{color:var(--warning);font-size:14px;line-height:1}
#document-tab-new{width:34px;border:0;border-left:1px solid var(--border-soft);background:var(--surface-raised);color:var(--accent-primary);cursor:pointer;font-size:18px;font-weight:800}
#document-tab-new:hover{background:var(--surface-hover)}
#smart-object-edit-banner{display:flex;align-items:center;gap:7px;padding:0 7px;border-left:1px solid var(--border-soft);background:#f0eaff;color:#5f3ca1;font-size:10px;font-weight:700;white-space:nowrap}
#smart-object-edit-banner[hidden]{display:none}
#smart-object-commit-edit{height:23px;padding:0 8px;border:1px solid #8061bd;border-radius:4px;background:#805ad5;color:#fff;cursor:pointer;font-size:10px;font-weight:800}
#opt-square, #opt-a4-landscape, #opt-a4-portrait, #opt-grid-2, #opt-grid-3, #opt-grid-4, #opt-draw-along { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; background:linear-gradient(#fff,#e8edf2); border:1px solid #c5cdd6; color:#3c4854; border-radius:5px; cursor:pointer; font-size:11px; font-weight:700; box-shadow:0 1px 2px rgba(24,39,56,.14); white-space:nowrap; text-decoration:none; }
#opt-square:hover, #opt-square.active, #opt-a4-landscape:hover, #opt-a4-portrait:hover, #opt-grid-2:hover, #opt-grid-3:hover, #opt-grid-4:hover, #opt-grid-2.active, #opt-grid-3.active, #opt-grid-4.active, #opt-draw-along:hover { background:linear-gradient(#e8f3ff,#cfe4f8); border-color:#7aa7cf; color:#205a80; }
#options-bar label { color:var(--text-dim); white-space:nowrap; }
#options-bar input[type="range"] { width:80px; accent-color:var(--accent); height:3px; }
#options-bar input[type="number"] { width:50px; background:#fff; border:1px solid #c5cdd6; color:#344454; padding:2px 4px; border-radius:3px; font-size:11px; }
#options-bar .transform-fields input { width:58px; }
#options-bar .hq-corner-fields input{width:58px}
#options-bar .hq-warp-fields input{width:46px}
#options-bar .hq-corner-fields label,#options-bar .hq-warp-fields label{font-weight:700;color:var(--text-dim)}
#options-bar .move-position-fields input { width:56px; }
#options-bar .transform-fields label { font-weight:700; color:var(--text-dim); }
#options-bar #transform-origin { width:48px; text-align:center; }
#options-bar #transform-apply { background:#dcebf7; border-color:#2680eb; color:#165e9a; font-weight:800; }
#options-bar select { background:#fff; border:1px solid #c5cdd6; color:#344454; padding:2px 4px; border-radius:3px; font-size:11px; }
#options-bar input[type="checkbox"] { accent-color:var(--accent); }
#options-bar .align-controls { gap:2px; }
#options-bar .align-controls button { min-width:27px; height:24px; padding:0 5px; border:1px solid #c5cdd6; border-radius:4px; background:linear-gradient(#fff,#e8edf2); color:#3c4854; cursor:pointer; font-size:11px; font-weight:700; box-shadow:0 1px 2px rgba(24,39,56,.12); }
#options-bar .align-controls button:hover { background:#dbeeff; border-color:#2680eb; color:#145d98; }
#options-bar .snap-controls { gap:7px; white-space:nowrap; }
#options-bar .snap-controls input[type="number"] { width:38px; }
#options-bar #opt-text-edit { height:24px; padding:0 9px; border:1px solid #7aa7cf; border-radius:5px; background:linear-gradient(#e8f3ff,#cfe4f8); color:#205a80; cursor:pointer; font-size:11px; font-weight:700; white-space:nowrap; }
#options-bar #opt-text-color { width:28px; height:22px; padding:1px; border:1px solid #c5cdd6; border-radius:4px; background:#fff; }
#options-bar :disabled { opacity:.45; cursor:not-allowed; }
#options-bar .brush-preview { width:72px; height:24px; border:1px solid #aeb9c4; border-radius:4px; background:#fff; flex:0 0 auto; }
#options-bar .brush-recent { gap:2px; }
#options-bar .brush-recent button { max-width:72px; height:24px; padding:0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#options-bar .brush-pressure label { color:var(--text); }
#options-bar .brush-pro-actions { gap:3px; }
#options-bar #opt-brush-professional { border-color:#7b61a8; background:#eee9f8; color:#503d77; font-weight:750; }
.dialog-professional-brush { width:min(820px,calc(100vw - 24px)); max-height:calc(100vh - 28px); overflow:auto; background:#f8fafc; border-color:#b8c4ce; color:#2f3b47; }
.dialog-professional-brush header { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:12px; }
.dialog-professional-brush header h3 { margin:0; font-size:16px; }
.dialog-professional-brush header p { margin:0; color:#657482; font-size:12px; }
.professional-brush-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.professional-brush-grid fieldset { min-width:0; margin:0; padding:10px; border:1px solid #c8d1da; border-radius:7px; background:#fff; }
.professional-brush-grid legend { padding:0 5px; color:#3f5265; font-size:12px; font-weight:800; }
.professional-brush-grid label { color:#47596b; font-size:12px; }
.professional-brush-grid input[type="range"] { width:100%; accent-color:#7654ad; }
.professional-brush-grid input[type="checkbox"] { accent-color:#7654ad; }
.professional-brush-grid output { float:right; color:#654796; font-variant-numeric:tabular-nums; font-weight:750; }
.dialog-professional-brush .brush-pro-check { display:flex; align-items:center; gap:6px; padding:5px 0; }
.dialog-professional-brush .brush-pro-status { margin:11px 0 0; color:#5d6873; font-size:12px; }
html[data-theme="dark"] #options-bar #opt-brush-professional { border-color:#8868b8; background:#34284a; color:#d7c4f3; }
#options-bar #opt-text-professional { border-color:#247b78; background:#e4f4f2; color:#145b59; font-weight:750; }
.dialog-professional-typography { width:min(900px,calc(100vw - 24px)); max-height:calc(100vh - 28px); overflow:auto; background:#f8fafc; border-color:#b8c4ce; color:#2f3b47; }
.dialog-professional-typography header { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:12px; }
.dialog-professional-typography header h3 { margin:0; font-size:16px; }
.dialog-professional-typography header p { margin:0; color:#657482; font-size:12px; }
.professional-typography-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.professional-typography-grid fieldset { display:grid; align-content:start; gap:9px; min-width:0; margin:0; padding:11px; border:1px solid #c8d1da; border-radius:7px; background:#fff; }
.professional-typography-grid legend { padding:0 5px; color:#315b5a; font-size:12px; font-weight:800; }
.professional-typography-grid label { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px 8px; color:#47596b; font-size:12px; }
.professional-typography-grid label select,
.professional-typography-grid label input[type="number"],
.professional-typography-grid label input[type="range"] { grid-column:1 / -1; width:100%; }
.professional-typography-grid input[type="range"],
.professional-typography-grid input[type="checkbox"] { accent-color:#247b78; }
.professional-typography-grid output { color:#146865; font-variant-numeric:tabular-nums; font-weight:750; }
.professional-typography-grid .type-pro-check { display:flex; align-items:center; gap:6px; padding:4px 0; }
.type-pro-summary { display:grid; gap:2px; padding:9px; border:1px solid #cee2df; border-radius:6px; background:#eef8f6; }
.type-pro-summary strong { overflow-wrap:anywhere; color:#145b59; font-size:13px; }
.type-pro-summary span,
.professional-typography-grid fieldset p { margin:0; color:#657482; font-size:11px; line-height:1.45; }
.dialog-professional-typography .type-pro-status { margin:11px 0 0; color:#416463; font-size:12px; }
html[data-theme="dark"] #options-bar #opt-text-professional { border-color:#398d88; background:#193b3a; color:#9de1dc; }
html[data-theme="dark"] .dialog-professional-typography { background:#24303c; border-color:#506070; color:#edf2f7; }
html[data-theme="dark"] .professional-typography-grid fieldset { background:#f8fafc; }
#options-bar #opt-vector-properties { border-color:#2f7294; background:#e1f1f8; color:#185776; font-weight:750; }
#options-bar .vector-boolean-controls { padding-left:3px; border-left:1px solid #b5c3cf; }
#options-bar #opt-vector-combine:not(:disabled) { border-color:#866929; background:#fbf1d4; color:#674d10; font-weight:750; }
.professional-vector-dialog { width:min(930px,calc(100vw - 24px)); max-height:calc(100vh - 28px); overflow:auto; background:#f7fafc; border-color:#aebfcb; color:#2d3c48; }
.professional-vector-dialog header { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:12px; }
.professional-vector-dialog header h3 { margin:0; color:#184e69; font-size:17px; }
.professional-vector-dialog header p { margin:0; color:#607483; font-size:12px; }
.professional-vector-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.professional-vector-grid fieldset { display:grid; align-content:start; gap:9px; min-width:0; margin:0; padding:11px; border:1px solid #c6d2db; border-radius:7px; background:#fff; }
.professional-vector-grid legend { padding:0 5px; color:#1d6686; font-size:12px; font-weight:800; }
.professional-vector-grid label { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:5px 8px; color:#455d6d; font-size:12px; }
.professional-vector-grid label select,
.professional-vector-grid label input[type="number"],
.professional-vector-grid label input[type="text"],
.professional-vector-grid label input[type="range"] { grid-column:1 / -1; width:100%; }
.professional-vector-grid input[type="range"],
.professional-vector-grid input[type="checkbox"] { accent-color:#1d7399; }
.professional-vector-grid output { color:#176589; font-variant-numeric:tabular-nums; font-weight:750; }
.vector-shape-badge { display:grid; gap:2px; padding:9px; border:1px solid #c5dfe9; border-radius:6px; background:#eaf6fa; }
.vector-shape-badge strong { color:#145f7e; font-size:13px; text-transform:uppercase; }
.vector-shape-badge span { color:#607783; font-size:11px; }
.vector-radius-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.vector-radius-grid label { grid-template-columns:20px 1fr; }
.vector-radius-grid label input[type="number"] { grid-column:2; min-width:0; }
.vector-color-pair { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:7px; }
.vector-color-pair input { width:100%; min-height:28px; }
.vector-align-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.vector-align-grid button { min-height:30px; border:1px solid #aec3cf; border-radius:5px; background:#f1f6f8; color:#28556b; cursor:pointer; }
.vector-align-grid button:hover { border-color:#3481a4; background:#e2f2f8; }
.vector-inspection { display:grid; gap:6px; margin:4px 0 0; }
.vector-inspection div { display:flex; justify-content:space-between; gap:8px; padding-bottom:5px; border-bottom:1px solid #e0e7eb; color:#60717d; font-size:11px; }
.vector-inspection dt,
.vector-inspection dd { margin:0; }
.vector-inspection dd { color:#2f5668; font-weight:700; }
.professional-vector-status { margin:11px 0 0; color:#3e6779; font-size:12px; }
html[data-theme="dark"] #options-bar #opt-vector-properties { border-color:#3c86a8; background:#173848; color:#9ed7ee; }
html[data-theme="dark"] #options-bar #opt-vector-combine:not(:disabled) { border-color:#927230; background:#403717; color:#f4d989; }
html[data-theme="dark"] .professional-vector-dialog { background:#24313b; border-color:#50636f; color:#eef4f7; }
html[data-theme="dark"] .professional-vector-grid fieldset { background:#f8fafc; }
#options-bar .crop-primary strong { color:#174f7d; letter-spacing:.01em; white-space:nowrap; }
#options-bar #opt-crop-apply { border-color:#2680eb; background:#dcebf7; color:#165e9a; font-weight:800; }
#options-bar #opt-crop-reveal:not(:disabled) { border-color:#3d8b73; background:#e4f5ef; color:#216653; font-weight:750; }
#options-bar .canvas-anchor-controls { padding-left:2px; white-space:nowrap; }
#options-bar .canvas-anchor-controls input { width:58px; font-variant-numeric:tabular-nums; }
#options-bar #opt-canvas-anchor { width:42px; text-align:center; }
html[data-theme="dark"] #options-bar .crop-primary strong { color:#8cc9fa; }
html[data-theme="dark"] #options-bar #opt-crop-reveal:not(:disabled) { border-color:#3b8c6e; background:#17392d; color:#98e3c5; }
.opt-group { display:flex; align-items:center; gap:4px; }
.opt-sep { width:1px; height:20px; background:#555; margin:0 4px; }

/* ===== MAIN LAYOUT ===== */
#app { display:flex; height:calc(100vh - 28px - 36px - 32px - 24px); }

/* ===== TOOL PANEL (LEFT) ===== */
#tool-panel { width:44px; min-width:44px; background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; align-items:center; padding:6px 0; gap:1px; overflow-y:auto; }
.tool-btn { width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:4px; font-size:16px; position:relative; border:none; background:transparent; color:var(--text); }
.tool-btn:hover { background:#505050; }
.tool-btn.active { background:var(--accent); color:#fff; }
.tool-btn .tool-key { position:absolute; bottom:1px; right:2px; font-size:8px; color:var(--text-dim); font-weight:bold; }
.tool-btn.active .tool-key { color:rgba(255,255,255,.6); }
/* Native CSS tooltips disabled - using JS tooltip system with 0.5s delay */
.tool-btn[title]::after { display:none !important; }
.tool-sep { width:28px; height:1px; background:#555; margin:4px 0; }

/* ===== COLOR SWATCHES ===== */
#color-swatches { margin-top:auto; padding:8px 0; display:flex; flex-direction:column; align-items:center; gap:4px; }
#color-swap-area { position:relative; width:56px; height:56px; }
#fg-color, #bg-color { position:absolute; width:32px; height:32px; border:2px solid #617180; border-radius:4px; cursor:pointer; }
#fg-color { top:0; left:0; z-index:2; }
#bg-color { bottom:0; right:0; z-index:1; }
#color-swap { position:absolute; top:-4px; right:-4px; width:24px; height:24px; display:grid; place-items:center; padding:0; font-size:12px; cursor:pointer; z-index:3; background:var(--surface-raised); border:1px solid var(--border-strong); border-radius:4px; color:var(--text-primary); }
#color-default { position:absolute; bottom:-4px; left:-4px; width:24px; height:24px; display:grid; place-items:center; padding:0; font-size:12px; cursor:pointer; z-index:3; background:var(--surface-raised); border:1px solid var(--border-strong); border-radius:4px; color:var(--text-primary); }

/* ===== CANVAS AREA ===== */
#canvas-area { flex:1; overflow:hidden; position:relative; background:#1e1e1e; background-image: repeating-conic-gradient(#252525 0% 25%, #1e1e1e 0% 50%) 50% / 20px 20px; cursor:crosshair; touch-action:none; }
#main-canvas { position:absolute; image-rendering:auto; }
#grid-canvas { position:absolute; pointer-events:none; }
#overlay-canvas { position:absolute; pointer-events:none; }
#brush-cursor { position:fixed; pointer-events:none; border:1px solid rgba(255,255,255,.6); border-radius:50%; z-index:500; display:none; mix-blend-mode:difference; }
#brush-cursor::after { content:attr(data-modifier); position:absolute; top:-6px; right:-10px; font-size:13px; font-weight:900; color:#fff; text-shadow:0 0 3px #000,0 0 3px #000; mix-blend-mode:normal; pointer-events:none; line-height:1; }
#selection-canvas { position:absolute; pointer-events:none; }
.workspace-ruler{position:absolute;z-index:31;background:color-mix(in srgb,var(--surface-raised) 94%,transparent);color:var(--text-secondary);touch-action:none}
#horizontal-ruler{top:0;left:24px;right:0;width:calc(100% - 24px);height:24px;cursor:ns-resize;border-bottom:1px solid var(--border-strong)}
#vertical-ruler{top:24px;bottom:0;left:0;width:24px;height:calc(100% - 24px);cursor:ew-resize;border-right:1px solid var(--border-strong)}
#ruler-origin{position:absolute;z-index:32;top:0;left:0;width:24px;height:24px;border:0;border-right:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong);background:var(--surface-raised);color:var(--accent-primary);cursor:pointer}
.canvas-state { position:absolute; z-index:35; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:grid; justify-items:center; gap:7px; min-width:min(320px,calc(100% - 32px)); padding:18px 20px; border:1px solid var(--border-strong); border-radius:10px; background:color-mix(in srgb,var(--surface-raised) 94%,transparent); box-shadow:var(--shadow-raised); color:var(--text-primary); text-align:center; pointer-events:none; }
.canvas-state[hidden] { display:none; }
.canvas-state[data-kind="error"] { border-color:var(--danger); background:var(--danger-surface); color:var(--danger); }
.canvas-state[data-kind="empty"] .canvas-state-spinner { display:none; }
.canvas-state strong { font-size:13px; }
.canvas-state span:last-child { color:var(--text-secondary); font-size:11px; line-height:1.45; }
.canvas-state-spinner { width:18px; height:18px; border:2px solid var(--border-strong); border-top-color:var(--accent-primary); border-radius:50%; animation:canvas-state-spin .8s linear infinite; }
@keyframes canvas-state-spin { to { transform:rotate(360deg); } }
#canvas-area:focus-visible { outline:3px solid var(--focus-ring); outline-offset:-3px; }

/* ===== DOCKING PANEL ===== */
#workspace-resizer { width:5px; flex:0 0 5px; cursor:col-resize; background:transparent; position:relative; z-index:20; touch-action:none; }
#workspace-resizer::after { content:''; position:absolute; inset:0 2px; background:var(--border); opacity:.55; }
#workspace-resizer:hover::after, #workspace-resizer.is-dragging::after { inset:0 1px; background:var(--accent); opacity:1; }
#layer-panel { width:300px; min-width:0; flex:0 0 auto; background:var(--panel); border-left:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
#layer-panel.is-collapsed { width:36px !important; }
#layer-panel.is-collapsed .dock-tabs, #layer-panel.is-collapsed .dock-content, #layer-panel.is-collapsed #dock-side-toggle, #layer-panel.is-collapsed #workspace-theme-toggle, #layer-panel.is-collapsed .dock-arrange-button { display:none; }
#layer-panel.is-collapsed #dock-header { justify-content:center; padding:4px 2px; }
#layer-panel.is-collapsed #dock-collapse { height:auto; min-height:118px; padding:10px 5px; writing-mode:vertical-rl; text-orientation:mixed; }
#dock-header { min-height:34px; display:flex; align-items:center; gap:3px; padding:4px 5px; border-bottom:1px solid var(--border); background:linear-gradient(#fff,#edf1f5); }
.dock-tabs { display:flex; flex:1; min-width:0; gap:2px; overflow-x:auto; scrollbar-width:none; }
.dock-tabs::-webkit-scrollbar { display:none; }
.dock-tab { min-width:0; flex:1 0 auto; height:25px; padding:0 7px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--text-dim); cursor:pointer; font-size:10px; font-weight:700; white-space:nowrap; }
.dock-tab:hover { background:#e8f0f6; color:#205a80; }
.dock-tab.active { background:#dcebf7; border-color:#9bbbd4; color:#205a80; }
.dock-header-button { flex:0 0 auto; width:25px; height:25px; border:1px solid #c5cdd6; border-radius:4px; background:#fff; color:#526170; cursor:pointer; }
.dock-header-button:hover { border-color:#7aa7cf; color:#205a80; background:#e8f3ff; }
.dock-header-button:disabled { opacity:.35; cursor:not-allowed; }
.dock-arrange-button { font-size:16px; line-height:1; }
.dock-content { min-height:0; flex:1; display:flex; flex-direction:column; }
.dock-pane { display:none; min-height:0; flex:1; overflow:auto; }
.dock-pane.active { display:flex; flex-direction:column; }
.dock-title { flex:1; min-width:0; min-height:25px; padding-left:4px; border:0; background:transparent; text-align:left; color:var(--text-dim); font-size:11px; font-weight:700; }
#layer-panel.is-collapsed .dock-title { display:none; }
.split-dock .dock-group { container-type:inline-size; container-name:photo-dock; }
.split-dock #dock-header { flex-shrink:0; }
.split-dock .dock-content { overflow:auto; overscroll-behavior:contain; }
.dock-group { display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.dock-group-upper { flex:var(--dock-upper-size,.4) 0 0; min-height:140px; }
.dock-group-lower { flex:var(--dock-lower-size,.6) 0 0; min-height:180px; }
.dock-group[hidden], #dock-height-resizer[hidden] { display:none; }
.dock-group-header { display:flex; flex:0 0 auto; min-height:33px; padding:4px 5px; border-bottom:1px solid var(--border); background:var(--panel); }
.dock-group-titlebar { display:flex; flex:0 0 auto; align-items:center; min-height:25px; padding:0 4px; background:var(--surface-subtle); border-bottom:1px solid var(--border); }
.dock-group-title { flex:1; min-width:0; height:25px; border:0; background:transparent; text-align:left; color:var(--text-secondary); font-size:11px; font-weight:600; }
[data-panel-drag] { cursor:grab; touch-action:none; user-select:none; }
[data-panel-drag]:disabled { cursor:default; opacity:1; }
[data-panel-drag]:focus-visible, .floating-panel-resize:focus-visible, .dock-return-button:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; }
.dock-return-button { flex:0 0 25px; height:25px; padding:0; border:0; background:transparent; color:var(--text-primary); cursor:pointer; }
.dock-return-button:hover { background:var(--surface-selected); }
.is-floating-group, #layer-panel.is-floating-dock { position:fixed; z-index:80; flex:none; max-width:none; min-height:0; border:1px solid var(--border-strong); border-radius:5px; background:var(--panel); box-shadow:0 8px 24px #0005; }
.is-floating-group.is-front-panel { z-index:81; }
.is-floating-group .dock-group-titlebar { background:var(--surface-selected); }
.floating-panel-resize { position:absolute; right:0; bottom:0; z-index:3; width:16px; height:16px; padding:0; border:0; background:var(--panel); color:var(--text-dim); cursor:nwse-resize; touch-action:none; font-size:12px; }
.is-floating-group .dock-pane { padding-bottom:16px; }
.is-floating-dock > .dock-content { padding-bottom:16px; }
.dock-return-button[hidden], .floating-panel-resize[hidden], .dock-drop-preview[hidden] { display:none; }
#app:not(.compact-workspace) #layer-panel.all-groups-floating { width:36px !important; height:auto !important; }
#app:not(.compact-workspace) .all-groups-floating #dock-header { flex-direction:column; padding:4px 2px; }
#app:not(.compact-workspace) .all-groups-floating .dock-title { writing-mode:vertical-rl; padding:6px; min-height:80px; }
#app:not(.compact-workspace) .all-groups-floating .dock-arrange-button,
#app:not(.compact-workspace) .all-groups-floating #workspace-theme-toggle { display:none; }
.dock-drop-preview { position:fixed; z-index:90; pointer-events:none; display:grid; place-items:center; border:2px solid var(--focus-ring); background:color-mix(in srgb,var(--surface-selected) 78%,transparent); color:var(--text-primary); font-size:13px; font-weight:700; }
.moving-workspace-panel, .moving-workspace-panel * { cursor:grabbing !important; user-select:none !important; }
.dock-placement-status { position:fixed; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.dock-group .dock-tabs { flex:1; }
.dock-group-close { flex:0 0 25px; height:25px; margin-left:4px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--text-dim); cursor:pointer; font-size:16px; }
.dock-group-close:hover { background:var(--surface-selected); color:var(--text-primary); border-color:var(--border-strong); }
.dock-group-close:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; }
.dock-group .dock-tab { flex:0 0 auto; }
.dock-group .dock-pane { overscroll-behavior:contain; }
.split-dock #layer-list { min-height:72px; }
.split-dock #layer-header, .split-dock #layer-panel-tools, .split-dock #layer-buttons { flex-shrink:0; }
#dock-height-resizer { position:relative; flex:0 0 8px; cursor:row-resize; touch-action:none; background:var(--panel); border-block:1px solid var(--border); }
#dock-height-resizer::after { content:''; position:absolute; width:36px; height:2px; left:calc(50% - 18px); top:2px; border-radius:2px; background:var(--text-dim); }
#dock-height-resizer:hover, #dock-height-resizer.is-dragging { background:var(--surface-selected); }
#dock-height-resizer:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-2px; }
.color-picker-basic { display:contents; }
.split-dock .color-picker-basic { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:8px; flex-shrink:0; }
.split-dock #color-wheel { width:112px; height:112px; margin:0; flex-shrink:0; touch-action:none; }
.split-dock #color-panel > * { flex-shrink:0; }
.split-dock .color-values { min-width:0; }
.split-dock .color-value-input { width:34px; min-width:0; }
.split-dock .color-values input { background:var(--surface-raised); color:var(--text-primary); border-color:var(--border-strong); }
.split-dock .color-values input[type="number"] { appearance:textfield; }
.split-dock .color-values input[type="number"]::-webkit-inner-spin-button,
.split-dock .color-values input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
@container photo-dock (max-width:280px) {
  .split-dock .color-picker-basic { grid-template-columns:1fr; justify-items:center; }
  .split-dock .color-values { width:100%; }
}
#app.dock-left #layer-panel { order:1; border-left:0; border-right:1px solid var(--border); }
#app.dock-left #workspace-resizer { order:2; }
#app.dock-left #canvas-area { order:3; }
#app:not(.dock-left) #canvas-area { order:1; }
#app:not(.dock-left) #workspace-resizer { order:2; }
#app:not(.dock-left) #layer-panel { order:3; }
#app.dock-left #tool-panel, #app:not(.dock-left) #tool-panel { order:0; }
#properties-panel { padding:10px; gap:10px; }
.property-card { border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,.58); overflow:hidden; }
.property-card h3 { padding:7px 9px; font-size:11px; color:#526170; background:#edf2f6; border-bottom:1px solid var(--border); }
.property-grid { display:grid; grid-template-columns:minmax(76px,auto) 1fr; gap:7px 8px; padding:9px; font-size:11px; align-items:center; }
.property-grid dt { color:var(--text-dim); }
.property-grid dd { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.property-grid select { width:100%; min-width:0; height:25px; border:1px solid #c5cdd6; border-radius:4px; background:#fff; color:#344454; font-size:10px; }
#swatches-panel { padding:10px; gap:12px; }
#swatches-panel .section-title { margin-bottom:6px; font-size:11px; font-weight:700; color:var(--text-dim); }
.swatch-section{padding-bottom:10px;border-bottom:1px solid #d8dfe6}.swatch-section:last-child{border-bottom:0}.swatch-section-head{display:flex;align-items:center;justify-content:space-between;gap:6px}.swatch-section-head button{height:23px;padding:0 7px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#526170;cursor:pointer;font-size:10px}.swatch-section-head button:hover{border-color:#7aa7cf;background:#e8f3ff}.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(24px,1fr));gap:5px}.palette-empty{grid-column:1/-1;padding:9px;border:1px dashed #c5cdd6;border-radius:5px;color:#7a8794;text-align:center;font-size:10px}.palette-chip{position:relative;min-width:0;aspect-ratio:1;border:1px solid #9aa7b3;border-radius:4px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}.palette-chip:hover{outline:2px solid #2680eb;outline-offset:1px}.palette-chip .remove-swatch{position:absolute;right:-4px;top:-5px;width:14px;height:14px;padding:0;border:0;border-radius:50%;background:#566574;color:#fff;font-size:10px;line-height:14px;opacity:0;cursor:pointer}.palette-chip:hover .remove-swatch,.palette-chip:focus-within .remove-swatch{opacity:1}.color-profile-note{margin-top:auto;padding:7px 8px;border:1px solid #cbd8e4;border-radius:5px;background:#eef6fd;color:#52697c;font-size:10px;line-height:1.45}
.assets-pane{overflow:hidden!important}.assets-head{display:flex;align-items:center;justify-content:space-between;padding:8px 9px;border-bottom:1px solid var(--border);color:#526170;font-size:11px;font-weight:800}.assets-close{width:24px;height:24px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#526170;cursor:pointer}.asset-source-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;padding:8px}.asset-source-tab{min-width:0;height:28px;padding:0 5px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#526170;cursor:pointer;font-size:10px;font-weight:700}.asset-source-tab.active{border-color:#2680eb;background:#e8f3ff;color:#165e9a}html:not([data-photo-builder-workspace="pinter-compose"]) [data-asset-source="pinter"]{display:none!important}.asset-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:5px;padding:0 8px 7px}.asset-toolbar input,.asset-toolbar select{min-width:0;height:28px;padding:0 7px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#344454;font-size:10px}.asset-count{padding:0 9px 6px;color:#71808f;font-size:10px}.asset-grid{display:grid;flex:1 1 auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;align-items:start;gap:7px;min-height:0;padding:0 8px 10px;overflow:auto;overscroll-behavior:contain}.asset-card{min-width:0;height:auto;align-self:start;padding:0;border:1px solid #c5cdd6;border-radius:5px;background:#fff;color:#344454;overflow:hidden;cursor:pointer;text-align:left}.asset-card:hover,.asset-card.expanded{border-color:#2680eb;box-shadow:0 0 0 1px #2680eb}.asset-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#e5e9ed}.asset-card-info{display:block;padding:6px}.asset-card-title,.asset-card-meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-card-title{font-size:10px;font-weight:800}.asset-card-meta{margin-top:2px;color:#7a8794;font-size:9px}.asset-card-expanded{grid-column:1/-1;padding:7px;border:1px solid #9bbbd4;border-radius:5px;background:#eef6fd}.asset-variants{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.asset-variant{padding:0;border:1px solid #c5cdd6;border-radius:4px;background:#fff;overflow:hidden;cursor:pointer}.asset-variant:hover{border-color:#2680eb}.asset-variant img{display:block;width:100%;aspect-ratio:1;object-fit:cover}.asset-more,.asset-local-button{grid-column:1/-1;height:30px;border:1px solid #9bbbd4;border-radius:4px;background:#e8f3ff;color:#165e9a;cursor:pointer;font-size:10px;font-weight:800}.asset-empty{grid-column:1/-1;padding:18px 10px;border:1px dashed #b8c4ce;border-radius:5px;color:#7a8794;text-align:center;font-size:10px;line-height:1.6}.asset-note{padding:7px 9px;border-top:1px solid var(--border);background:#f6f8fa;color:#71808f;font-size:9px;line-height:1.45}.asset-note[data-tone="error"]{color:#a43b2c}.asset-note[data-tone="success"]{color:#21713e}
.pixel-job-status{position:fixed;z-index:9200;left:50%;bottom:31px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;min-width:250px;padding:7px 9px;border:1px solid #8eb3d1;border-radius:6px;background:rgba(245,250,254,.97);box-shadow:0 5px 18px rgba(32,62,84,.2);color:#36556c;font-size:10px}.pixel-job-status[hidden]{display:none}.pixel-job-status progress{width:100px;height:7px;accent-color:#2680eb}.pixel-job-status button{height:23px;padding:0 7px;border:1px solid #b5c4d0;border-radius:4px;background:#fff;color:#526170;cursor:pointer;font-size:10px}
#navigator-panel{padding:10px;gap:10px;align-items:stretch}
#navigator-preview-wrap{position:relative;aspect-ratio:16/10;min-height:120px;border:1px solid var(--border);border-radius:5px;overflow:hidden;background:#d7dde3}
#navigator-canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
.navigator-controls{display:grid;grid-template-columns:30px 1fr 30px;gap:6px;align-items:center}
.navigator-controls button,.navigator-actions button{height:27px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#465563;cursor:pointer}
.navigator-controls input[type="range"]{min-width:0}
.navigator-zoom-row{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-dim)}
#navigator-zoom-value{width:58px;height:25px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#344454;text-align:center}
.navigator-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
#navigator-dpr{font-size:10px;color:var(--text-dim);text-align:right}
.artboards-pane{padding:10px;gap:9px;align-items:stretch}
.artboard-panel-header{display:flex;align-items:center;justify-content:space-between;color:var(--text-secondary);font-size:11px}
.artboard-list,.guide-list{display:flex;max-height:180px;flex-direction:column;gap:4px;overflow:auto}
.artboard-item,.guide-item{display:flex;align-items:center;gap:6px;min-height:31px;padding:4px 6px;border:1px solid var(--border-soft);border-radius:5px;background:var(--surface-raised);color:var(--text-secondary);font-size:10px}
.artboard-item.active{border-color:var(--accent-primary);background:var(--surface-selected);color:var(--text-primary)}
.artboard-item button{min-width:0;flex:1;overflow:hidden;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.artboard-item span,.guide-item span{white-space:nowrap;color:var(--text-muted)}
.artboard-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.artboard-create-grid label{display:grid;grid-template-columns:34px 1fr;align-items:center;color:var(--text-muted);font-size:10px}
.artboard-create-grid input,.guide-add-row input,.guide-add-row select{min-width:0;height:27px;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface-raised);color:var(--text-primary);padding:0 5px;font-size:10px}
.artboard-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.artboard-actions button,.guide-add-row button,.guide-item button{height:28px;border:1px solid var(--border-strong);border-radius:4px;background:var(--surface-raised);color:var(--text-primary);cursor:pointer;font-size:10px}
#artboard-export{border-color:var(--accent-primary);background:var(--surface-selected);color:var(--accent-hover-strong);font-weight:800}
.guide-controls{display:flex;flex-direction:column;gap:7px;padding-top:8px;border-top:1px solid var(--border-soft);font-size:10px;color:var(--text-secondary)}
.guide-controls>label{display:flex;align-items:center;gap:6px}
.guide-add-row{display:grid;grid-template-columns:70px 1fr auto;gap:4px}
.guide-item button{width:25px;height:23px;margin-left:auto}
.artboard-help{color:var(--text-muted);font-size:9px;line-height:1.5}
#layer-header { padding:8px 10px; font-size:11px; font-weight:600; color:var(--text-dim); text-transform:uppercase; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
#layer-panel-tools{padding:7px 8px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.layer-search-row,.layer-meta-row{display:flex;align-items:center;gap:5px}
#layer-search{flex:1;min-width:0;height:27px;padding:0 8px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#344454;font-size:11px}
#layer-search-clear,#layer-lock-toggle{width:28px;height:27px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#526170;cursor:pointer}
#layer-color-label{flex:1;min-width:0;height:27px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#526170;font-size:11px}
#layer-selection-count{font-size:10px;color:var(--text-dim);white-space:nowrap}
#quick-mask-controls{display:flex;align-items:center;gap:7px}
#quick-mask-controls button{height:27px;flex:1;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#526170;cursor:pointer;font-size:10px}
#quick-mask-controls button.active{border-color:#d83257;background:#ffe6ec;color:#a41436;font-weight:800}
#quick-mask-status{min-width:58px;color:var(--text-dim);font-size:9px;text-align:right}
#mask-controls{display:none;flex-direction:column;gap:6px;padding:7px;border:1px solid var(--border-soft);border-radius:5px;background:var(--surface-subtle)}
#mask-controls.show{display:flex}
.mask-control-heading{display:flex;align-items:center;justify-content:space-between;color:var(--text-secondary);font-size:10px}
#mask-target-status{color:var(--accent-hover-strong);font-size:9px}
.mask-slider-row{display:grid;grid-template-columns:32px minmax(0,1fr) 36px;align-items:center;gap:5px;color:var(--text-dim);font-size:9px}
.mask-slider-row input{min-width:0;width:100%}
.mask-slider-row output{text-align:right;font-variant-numeric:tabular-nums}
.mask-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
#mask-controls button{min-width:0;height:26px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#526170;cursor:pointer;font-size:9px}
#mask-controls button.active{background:#dcebf7;border-color:#7aa7cf;color:#205a80}
#layer-controls { padding:8px 10px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
#layer-controls .row { display:flex; align-items:center; gap:6px; font-size:11px; }
#layer-controls label { color:var(--text-dim); min-width:50px; }
#layer-controls select, #layer-controls input[type="range"] { flex:1; }
.smart-object-controls{padding:9px 10px;border-top:1px solid var(--border);background:#f6f2ff}
.smart-object-summary{display:flex;align-items:center;gap:8px;min-width:0;margin-bottom:8px;color:#4f3a75}
.smart-object-summary>span:last-child{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.smart-object-summary strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.smart-object-summary small{color:#76599f;font-size:9px}
.smart-object-icon{display:grid;width:28px;height:28px;place-items:center;border:1px solid #9b7ac7;border-radius:5px;background:#fff;color:#7250a5;font-size:18px;font-weight:900}
.smart-object-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.smart-object-actions button{min-width:0;height:27px;padding:0 4px;border:1px solid #b8a6d1;border-radius:4px;background:#fff;color:#5f477f;cursor:pointer;font-size:9px;font-weight:700}
.smart-object-actions button:hover{border-color:#805ad5;background:#ece3fb}
.smart-object-actions button:disabled{opacity:.45;cursor:not-allowed}
#blend-mode { background:#2a2a2a; border:1px solid #555; color:var(--text); padding:2px 4px; border-radius:3px; font-size:11px; }
#layer-opacity-val, #layer-fill-opacity-val { width:36px; text-align:right; font-size:11px; color:var(--text); }
#layer-list { flex:1; min-height:0; overflow-y:auto; padding:4px; }
.smart-filter-panel{display:none;max-height:190px;overflow:auto;border-top:1px solid var(--border);background:#eef3f7;padding:5px 6px}
.smart-filter-panel.show{display:block}.smart-filter-header{display:flex;align-items:center;justify-content:space-between;padding:2px 3px 5px;color:#526170;font-size:10px;font-weight:800}
.smart-filter-item{display:grid;grid-template-columns:24px minmax(0,1fr) 24px 24px 24px 24px;gap:3px;align-items:center;margin-bottom:3px;padding:3px;border:1px solid #c7d1da;border-radius:4px;background:#fff}
.smart-filter-item button{height:24px;min-width:0;padding:0;border:1px solid #c5cdd6;border-radius:3px;background:#f8fafc;color:#526170;cursor:pointer;font-size:10px}.smart-filter-item button:hover{border-color:#7aa7cf;background:#e8f3ff}
.smart-filter-item .smart-filter-name{overflow:hidden;padding:0 5px;text-align:left;text-overflow:ellipsis;white-space:nowrap;color:#344454;font-weight:700}.smart-filter-item .smart-filter-vis.is-off{opacity:.45}.smart-filter-item .smart-filter-mask.has-mask{border-color:#2680eb;color:#165e9a;background:#e8f3ff}
.smart-filter-badge{display:inline-flex;align-items:center;margin-left:4px;padding:1px 3px;border-radius:3px;background:#805ad5;color:#fff;font-size:8px;font-weight:800;vertical-align:middle}
.smart-object-badge{display:inline-flex;align-items:center;margin-left:4px;padding:1px 4px;border:1px solid #805ad5;border-radius:3px;background:#f1eaff;color:#67439a;font-size:8px;font-weight:900;vertical-align:middle}
.smart-object-badge.is-missing{border-color:#d45050;background:#fff0f0;color:#a42e2e}
.smart-filter-dialog{max-height:calc(100vh - 20px);overflow:auto}.smart-filter-dialog .filter-note{margin-bottom:10px;color:var(--text-dim);font-size:10px;line-height:1.5}
[data-dialog="smart-filter"] .dialog,[data-dialog="smart-filter-mask"] .dialog{background:#f8fafc;border-color:#b8c4ce;color:#2f3b47;box-shadow:0 14px 42px rgba(20,35,50,.3)}
[data-dialog="smart-filter"] .dialog .btn-cancel,[data-dialog="smart-filter-mask"] .dialog .btn-cancel{background:#e8edf2;border:1px solid #c5cdd6;color:#344454}
.layer-item { display:flex; align-items:center; padding:4px 6px; gap:6px; cursor:pointer; border-radius:4px; border:1px solid transparent; margin-bottom:2px; }
.layer-item:hover { background:rgba(255,255,255,.05); }
.layer-item.active { background:var(--surface-selected); border-color:var(--accent-primary); }
.layer-item.selected{background:var(--surface-selected);border-color:var(--border-strong)}
.layer-item.active.selected{background:var(--surface-selected);border-color:var(--accent-primary)}
.layer-item.layer-child{padding-left:calc(6px + var(--layer-depth,1)*16px)}
.layer-item.layer-group{min-height:36px;font-weight:700}
.layer-group-toggle{width:15px;border:0;background:transparent;color:#627383;cursor:pointer;padding:0;font-size:11px}
.layer-color-marker{width:4px;height:28px;border-radius:3px;background:transparent;flex:0 0 4px}
.layer-item[data-color-label="red"] .layer-color-marker{background:#e05a5a}.layer-item[data-color-label="orange"] .layer-color-marker{background:#e89542}.layer-item[data-color-label="yellow"] .layer-color-marker{background:#d9b72f}.layer-item[data-color-label="green"] .layer-color-marker{background:#51a66b}.layer-item[data-color-label="blue"] .layer-color-marker{background:#4b8fd5}.layer-item[data-color-label="violet"] .layer-color-marker{background:#8b67c8}.layer-item[data-color-label="gray"] .layer-color-marker{background:#89939c}
.layer-lock{width:19px;border:0;background:transparent;color:#7c8994;cursor:pointer;padding:0;font-size:12px}
.layer-item.is-locked .layer-name{color:var(--text-primary)}
.layer-folder{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid #9eb2c2;border-radius:4px;background:#dce9f2;color:#52718a;font-size:18px;flex-shrink:0}
.layer-filter-empty{padding:24px 10px;text-align:center;color:var(--text-dim);font-size:11px}
.layer-vis { height:22px;padding:0;border:0;background:transparent;color:inherit;font-size:14px;cursor:pointer;width:20px;text-align:center;flex-shrink:0; }
.layer-thumb { width:40px; height:40px; border:1px solid #555; background-image: repeating-conic-gradient(#444 0% 25%, #555 0% 50%) 50% / 8px 8px; flex-shrink:0; overflow:hidden; }
.layer-thumb canvas { width:100%; height:100%; }
.layer-adjustment-thumb{width:40px;height:40px;display:grid;place-items:center;flex-shrink:0;border:1px solid #8ea3b5;border-radius:3px;background:linear-gradient(135deg,#fff 0 50%,#263746 50%);color:#2680eb;font-size:0;cursor:pointer}
.layer-adjustment-thumb::after{content:'◐';display:grid;width:24px;height:24px;place-items:center;border-radius:50%;background:#fff;color:#263746;font-size:22px;line-height:1;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.adjustment-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}
.adjustment-choice-grid button{display:flex;min-height:38px;align-items:center;gap:8px;padding:7px 10px;border:1px solid #c5cdd6;border-radius:5px;background:#fff;color:#344454;cursor:pointer;text-align:left}
.adjustment-choice-grid button:hover{border-color:#7aa7cf;background:#e8f3ff}.adjustment-choice-grid span{font-size:19px}
[data-dialog="adjustment-chooser"] .dialog,[data-dialog="adjustment-layer"] .dialog{background:#f8fafc;border-color:#b8c4ce;color:#2f3b47;box-shadow:0 14px 42px rgba(20,35,50,.3)}
[data-dialog="adjustment-chooser"] .dialog .btn-cancel,[data-dialog="adjustment-layer"] .dialog .btn-cancel{background:#e8edf2;border:1px solid #c5cdd6;color:#344454}
[data-dialog="adjustment-layer"] .dialog select{background:#fff;border:1px solid #b8c4ce;color:#344454;border-radius:4px;padding:5px}
[data-dialog="adjustment-layer"] .curve-ch-btn{border:1px solid #b8c4ce;border-radius:4px;background:#fff;cursor:pointer}
[data-dialog="adjustment-layer"] .adjustment-layer-dialog{max-height:calc(100vh - 20px);overflow:auto}
[data-dialog="adjustment-layer"] #curveCanvas{display:block;width:min(100%,360px);margin-inline:auto}
.adjustment-layer-dialog{width:min(560px,calc(100vw - 24px))}
.adjustment-layer-dialog .dialog-lead{margin:0 0 12px;color:var(--text-secondary);font-size:12px;line-height:1.55}
.adjustment-section-label{margin:4px 0 9px;color:var(--text-secondary);font-size:12px;font-weight:800;letter-spacing:.02em}
.adjustment-channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.adjustment-channel-grid .slider-row{margin:0}
.adjustment-channel-grid .slider-row label{width:52px}
.adjustment-select-row{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:7px;align-items:center;margin-bottom:12px}
.adjustment-color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.adjustment-color-grid label{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px;border:1px solid var(--border-soft);border-radius:5px;background:var(--surface-raised);color:var(--text-secondary);font-size:12px}
.adjustment-color-grid input[type="color"]{width:34px;height:26px;padding:1px;border:1px solid var(--border-strong);border-radius:4px;background:transparent}
.adjustment-inline-options{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:10px 0}
.adjustment-inline-options>label{display:flex;align-items:center;gap:6px;color:var(--text-secondary);font-size:12px}
.adjustment-gradient-strip{height:28px;border:1px solid var(--border-strong);border-radius:5px;background:linear-gradient(90deg,#101820,#2f78a0 50%,#f6d365);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--surface-raised) 45%,transparent)}
.adjustment-lut-box{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:center;margin-bottom:12px;padding:10px;border:1px solid var(--border-soft);border-radius:6px;background:var(--surface-raised)}
.adjustment-lut-box>div{display:grid;gap:2px}.adjustment-lut-box strong{color:var(--text-primary);font-size:13px}.adjustment-lut-box span,.adjustment-lut-box p{color:var(--text-muted);font-size:11px}
.adjustment-lut-box p{grid-column:1/-1;margin:0}
.adjustment-file-button{display:inline-flex;align-items:center;justify-content:center;padding:7px 9px;border:1px solid var(--border-strong);border-radius:5px;background:var(--surface-subtle);color:var(--text-primary);font-size:11px;font-weight:750;cursor:pointer}
.adjustment-file-button input{display:none}
.adjustment-engine-status{margin:12px 0 2px;padding:7px 9px;border:1px solid var(--border-soft);border-radius:5px;background:var(--surface-subtle);color:var(--text-muted);font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
[data-dialog="adjustment-chooser"] .dialog{width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}
[data-dialog="adjustment-chooser"] .adjustment-choice-grid{grid-template-columns:repeat(3,1fr)}
.layer-mask-thumb{width:40px;height:40px;border:1px solid #8c99a4;background:#fff;flex-shrink:0;overflow:hidden;cursor:pointer}
.layer-mask-thumb canvas{width:100%;height:100%}
.layer-thumb.active-target,.layer-mask-thumb.active-target,.layer-adjustment-thumb.active-target{outline:2px solid #2680eb;outline-offset:1px}
.layer-mask-thumb.is-disabled{opacity:.48;position:relative}
.layer-mask-thumb.is-disabled::after{content:'×';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c33;font-size:26px;font-weight:700}
.layer-vector-mask-thumb{width:40px;height:40px;border:1px solid #35a7ff;background:#172632;flex-shrink:0;overflow:hidden;cursor:pointer;position:relative}
.layer-vector-mask-thumb canvas{width:100%;height:100%}
.layer-vector-mask-thumb.active-target{outline:2px solid #35a7ff;outline-offset:1px}
.layer-vector-mask-thumb.is-disabled{opacity:.48}
.layer-vector-mask-thumb::after{content:'V';position:absolute;right:2px;bottom:0;color:#8fd0ff;font-size:9px;font-weight:800;text-shadow:0 1px 2px #000}
.paths-pane{padding:10px;gap:10px}
.paths-header{display:flex;justify-content:space-between;font-weight:750;color:var(--text-primary,#eef3f7)}
.paths-help{margin:0;color:var(--text-secondary,#aeb8c2);font-size:11px;line-height:1.45}
.paths-list{display:flex;flex-direction:column;gap:5px;min-height:92px;max-height:260px;overflow:auto}
.path-item{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;border:1px solid #3b4650;border-radius:5px;background:#242b31;color:#e7edf2;padding:6px;text-align:left}
.path-item.active{border-color:#2680eb;background:#1c3a55}
.path-item-preview{width:30px;height:24px;border:1px solid #56636f;background:#10171d}
.path-item small{color:#aeb8c2}
.paths-properties{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;font-size:12px}
.paths-check{grid-column:1 / -1}
.paths-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
.paths-actions button,.paths-properties select{min-height:30px}
.layer-transform-badge{display:inline-flex;margin-left:4px;color:#2680eb;font-size:12px;font-weight:800;vertical-align:middle}
.layer-text-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:4px;width:15px;height:15px;border-radius:3px;background:#2680eb;color:#fff;font:800 10px Georgia,serif;vertical-align:middle}
.layer-item.clipped::before{content:'↳';color:#2680eb;font-weight:800;font-size:12px}
.layer-name { flex:1; min-width:0; padding:3px 2px; border:0; background:transparent; color:#263746; cursor:pointer; font:inherit; font-size:11px; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-name-input { flex:1; min-width:0; background:var(--surface-raised); border:2px solid var(--accent-primary); color:var(--text-primary); font-size:12px; width:100%; padding:2px 4px; border-radius:3px; outline:none; }
html[data-theme="dark"] .layer-name{color:var(--text-primary)}
.layer-item.dragging { opacity: 0.5; }
.layer-item.drag-over { border-top: 2px solid var(--accent); }
#layer-buttons { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:6px 10px; border-top:1px solid var(--border); gap:4px; }
#layer-buttons button { flex:1; padding:4px 0; background:linear-gradient(#fff,#e8edf2); border:1px solid #c5cdd6; color:#526170; border-radius:4px; cursor:pointer; font-size:12px; box-shadow:0 1px 2px rgba(24,39,56,.12); }
#layer-buttons button:hover { background:linear-gradient(#e8f3ff,#cfe4f8); border-color:#7aa7cf; color:#205a80; }

/* ===== COLOR PANEL (RIGHT) ===== */
#color-panel { padding:8px 10px; }
#color-panel .section-title { font-size:11px; font-weight:600; color:var(--text-dim); text-transform:uppercase; margin-bottom:8px; }
#color-wheel { display:block; margin:0 auto 8px; border-radius:4px; }
.color-values { font-size:10px; }
.color-values input[type="number"], .color-values input[type="text"] {
    background:#fff; border:1px solid #c5cdd6; color:#344454;
    height:24px;padding:2px 4px; border-radius:3px; font-size:10px;
}
.hsv-row, .rgb-row, .hex-row {
    display:flex; gap:4px; align-items:center; margin:5px 0; color:#667584;
}
.hsv-row span, .rgb-row span, .hex-row { display:flex; align-items:center; gap:2px; }
.swatch-lg { width:28px; height:28px; border:2px solid #555; border-radius:4px; cursor:pointer; }
.swatch-lg.fg { box-shadow:0 0 0 1px #222; }
.swatch-lg.bg { box-shadow:0 0 0 1px #222; }
.color-swatches-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.color-management-controls{display:grid;gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}.color-management-controls label{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:6px;color:var(--text-dim);font-size:10px}.color-management-controls select{width:100%;height:25px;min-width:0;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--text);font-size:10px}.color-management-controls .color-management-check{grid-template-columns:16px minmax(0,1fr);min-height:22px}.color-management-check input{margin:0}.color-management-controls select:disabled,.color-management-controls input:disabled{opacity:.5;cursor:not-allowed}
.precision-controls{display:grid;gap:5px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}.precision-controls label{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:6px;color:var(--text-dim);font-size:10px}.precision-controls select,.precision-controls input[type="number"]{width:100%;height:25px;min-width:0;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--text);font-size:10px}.precision-controls .precision-check{grid-template-columns:16px minmax(0,1fr);min-height:22px}.precision-check input{margin:0}.precision-controls label[for="pixel-hdr-nits"]{grid-template-columns:62px minmax(0,1fr) 24px}.precision-unit{font-size:9px;color:var(--text-dim)}.precision-controls select:disabled,.precision-controls input:disabled{opacity:.5;cursor:not-allowed}.precision-note{margin-top:6px}.precision-note[data-mode="high"]{border-color:#6f9cd1;background:#e9f4ff;color:#24587c}.precision-note[data-mode="hdr"]{border-color:#9a78cc;background:#f3edff;color:#5d3888}
.mini-btn {
    background:#444; border:1px solid #555; color:#ccc;
    padding:2px 6px; border-radius:3px; cursor:pointer; font-size:11px;
}
.mini-btn:hover { background:#666; }
.quick-palette { display:grid;grid-template-columns:repeat(auto-fill,minmax(22px,1fr));gap:5px; }
.quick-palette .qcolor { min-width:0;aspect-ratio:1;border:1px solid #9aa7b3;border-radius:4px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55) }
.quick-palette .qcolor:hover { outline:2px solid #2680eb;outline-offset:1px }

/* ===== FLOATING TEXT INPUT ===== */
.floating-text-input { position:absolute; box-sizing:border-box; background:rgba(255,255,255,.9); border:1px dashed #2680eb; outline:2px solid rgba(38,128,235,.16); z-index:1000; min-width:100px; min-height:36px; resize:both; padding:4px 6px; overflow:auto; user-select:text !important; -webkit-user-select:text !important; box-shadow:0 4px 18px rgba(20,50,80,.18); }
.font-status{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:10px;background:#edf2f6;color:#526170;white-space:nowrap}
.font-status[data-status="fallback"]{background:#fff2cf;color:#805f00}

/* ===== STATUS BAR ===== */
#status-bar { height:24px; background:#333; border-top:1px solid var(--border); display:flex; align-items:center; padding:0 12px; gap:16px; font-size:11px; color:var(--text-dim); flex-shrink:0; }
#status-bar span { white-space:nowrap; }
#status-memory[data-level="warning"] { color:#8a5b00; }
#status-memory[data-level="critical"] { color:#b42318; font-weight:700; }
#status-render[data-level="slow"] { color:#b42318; font-weight:700; }
#memory-cleanup { min-height:20px;padding:1px 7px;border:1px solid #c58a24;border-radius:4px;background:#fff8e7;color:#745000;font-size:10px;font-weight:700;cursor:pointer; }
#release-status{min-height:20px;padding:1px 7px;border:1px solid #8fa8bd;border-radius:4px;background:#eef6fd;color:#315b78;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
:focus-visible{outline:3px solid #0b6aa9;outline-offset:2px}
.layer-name:focus-visible{outline:2px solid #0b6aa9;outline-offset:1px;border-radius:3px}

/* ===== DIALOGS ===== */
.dialog-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:2000; display:flex; align-items:center; justify-content:center; }
.dialog { background:#3c3c3c; border:1px solid #555; border-radius:8px; padding:20px; min-width:320px; max-width:90vw; box-shadow:0 8px 32px rgba(0,0,0,.5); }
.dialog h3 { font-size:14px; margin-bottom:12px; font-weight:600; }
.dialog label { display:block; font-size:11px; color:var(--text-dim); margin-bottom:2px; margin-top:8px; }
.dialog input[type="text"], .dialog input[type="number"] { width:100%; background:#2a2a2a; border:1px solid #555; color:var(--text); padding:6px 8px; border-radius:4px; font-size:12px; }
.dialog select { width:100%; background:#2a2a2a; border:1px solid #555; color:var(--text); padding:6px 8px; border-radius:4px; font-size:12px; }
.dialog .btn-row { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.dialog button { padding:6px 16px; border:none; border-radius:4px; cursor:pointer; font-size:12px; }
.dialog .btn-primary { background:var(--accent); color:var(--text-on-accent); }
.dialog .btn-primary:hover { background:var(--accent-hover); }
.dialog .btn-cancel { background:#555; color:var(--text); }
.dialog .btn-cancel:hover { background:#666; }
.dialog .slider-row { display:flex; align-items:center; gap:8px; margin-top:4px; }
.dialog .slider-row input[type="range"] { flex:1; accent-color:var(--accent); }
.dialog .slider-row .val { width:40px; text-align:right; font-size:11px; }
.dialog .preview-row { display:flex; gap:12px; margin-top:12px; }
.dialog .preview-box { border:1px solid #555; border-radius:4px; overflow:hidden; }
.saved-selection-list{display:grid;gap:8px;max-height:min(360px,50vh);overflow:auto;margin:12px 0}.saved-selection-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:8px;border:1px solid var(--border-soft);border-radius:6px;background:var(--surface-raised)}.saved-selection-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-selection-row button{padding:5px 9px;border:1px solid var(--border);background:var(--surface);color:var(--text);white-space:nowrap}.saved-selection-row button[data-delete]{color:var(--danger,#b42318)}
[data-dialog="command-palette"] .dialog{width:min(560px,calc(100vw - 24px));padding:14px;background:#f8fafc;color:#2f3b47}
.command-search-field{width:100%;height:38px;padding:0 11px;border:2px solid #7aa7cf;border-radius:7px;background:#fff;color:#2f3b47;font-size:14px}
.command-results{display:flex;max-height:min(430px,60vh);flex-direction:column;gap:3px;margin-top:9px;overflow:auto}
.command-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:9px 10px!important;border:1px solid transparent!important;border-radius:6px!important;background:transparent!important;color:#344454!important;text-align:left!important}
.command-result:hover,.command-result.active{border-color:#9bbbd4!important;background:#e8f3ff!important}.command-result small{color:#71808f}.command-result kbd{padding:2px 6px;border:1px solid #c5cdd6;border-radius:4px;background:#fff;color:#526170;font:10px var(--font)}
.command-palette-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;color:#71808f;font-size:10px}.command-palette-footer button{border:1px solid #b8c4ce;background:#fff;color:#526170}
.shortcut-editor-grid{display:grid;grid-template-columns:120px minmax(0,1fr);gap:9px;align-items:center}.shortcut-editor-grid label{margin:0}.shortcut-capture{height:34px!important;background:#fff!important;color:#344454!important;text-align:center;font-weight:800}.shortcut-status{min-height:18px;margin-top:8px;color:#526170;font-size:10px}.shortcut-status.error{color:#b42318}

/* ===== EXPORT CENTER ===== */
[data-dialog="export-center"] .dialog{width:min(1040px,calc(100vw - 24px));max-height:calc(100vh - 20px);overflow:auto;background:#f8fafc;border-color:#b8c4ce;color:#2f3b47;box-shadow:0 18px 52px rgba(20,35,50,.34)}
.production-export-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.production-export-header h3{margin:0 0 4px;font-size:17px}.production-export-header p{margin:0;color:#647586;font-size:12px;line-height:1.45}.production-export-header>span{padding:4px 8px;border:1px solid #90b6d6;border-radius:999px;background:#e8f3ff;color:#245f8f;font-size:12px;font-weight:800;white-space:nowrap}
.export-center-grid{display:grid;grid-template-columns:minmax(380px,1fr) minmax(340px,1.05fr);gap:18px}.export-settings{display:flex;flex-direction:column;gap:9px}.export-field{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px;align-items:center}.export-field>label{margin:0;color:#526170;font-size:12px}.export-field input[type="text"],.export-field input[type="number"],.export-field select{width:100%;height:32px;padding:5px 8px;border:1px solid #b8c4ce;border-radius:4px;background:#fff;color:#344454;font-size:12px}.export-inline{display:grid;grid-template-columns:1fr auto 1fr;gap:5px;align-items:center}.export-inline .aspect-lock{width:32px;height:32px;padding:0;border:1px solid #b8c4ce;background:#fff;color:#526170}.export-inline .aspect-lock.active{border-color:#2680eb;background:#e8f3ff;color:#165e9a}.export-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;border:1px solid #d5dde5;border-radius:6px;background:#fff}.export-checks label{display:flex;align-items:center;gap:6px;margin:0;color:#526170;font-size:12px}.export-preview-column{display:flex;min-width:0;flex-direction:column;gap:8px}.export-preview-wrap{display:flex;align-items:center;justify-content:center;min-height:300px;padding:12px;border:1px solid #b8c4ce;border-radius:6px;background-color:#e4e8ec;background-image:linear-gradient(45deg,#cfd5db 25%,transparent 25%),linear-gradient(-45deg,#cfd5db 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cfd5db 75%),linear-gradient(-45deg,transparent 75%,#cfd5db 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;overflow:auto}.export-preview-wrap canvas{display:block;max-width:100%;max-height:360px;box-shadow:0 3px 14px rgba(30,45,60,.22)}.export-summary{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid #cbd8e4;border-radius:5px;background:#eef6fd;color:#52697c;font-size:12px;line-height:1.45}.export-warning{min-height:18px;color:#8a5b00;font-size:12px;line-height:1.45}.export-quality-value{width:44px;color:#526170;text-align:right;font-size:12px}.export-dpi-note{color:#6b7a88;font-size:11px}.export-center-grid input:disabled{background:#edf1f4;color:#8996a2}.export-center-grid input[type="range"]{width:100%;accent-color:#2680eb}
.export-metadata{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;padding:10px;border:1px solid #ccd7e1;border-radius:6px;background:#fff}.export-metadata legend{padding:0 5px;color:#526170;font-size:12px;font-weight:800}.export-metadata>div{display:grid;gap:3px}.export-metadata>div:last-child{grid-column:1/-1}.export-metadata label{margin:0;color:#5c6b78;font-size:12px}.export-metadata input,.export-metadata textarea{width:100%;min-width:0;padding:6px 8px;border:1px solid #b8c4ce;border-radius:4px;background:#fff;color:#344454;font:12px var(--font)}.export-metadata textarea{min-height:52px;resize:vertical}
.production-export-queue{margin-top:14px;padding:10px;border:1px solid #c8d5e0;border-radius:7px;background:#eef4f9}.production-export-queue-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.production-export-queue-head>div:first-child{display:grid;gap:2px}.production-export-queue-head strong{font-size:13px}.production-export-queue-head span{color:#627485;font-size:12px}.production-export-queue-head>div:last-child{display:flex;gap:6px;flex-wrap:wrap}.production-export-queue button,.production-export-job button{padding:5px 8px;border:1px solid #aebdca;background:#fff;color:#3f5365}.production-export-queue-list{display:grid;gap:6px;max-height:150px;margin-top:8px;overflow:auto}.production-export-queue-list>p{margin:5px;color:#627485;font-size:12px}.production-export-job{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:8px;padding:7px 8px;border:1px solid #d4dee7;border-radius:5px;background:#fff;font-size:12px}.production-export-job>span:nth-child(2){display:grid;min-width:0}.production-export-job small{overflow:hidden;color:#657788;text-overflow:ellipsis;white-space:nowrap}.production-export-job-status{padding:3px 5px;border-radius:4px;background:#e6edf3;color:#536575;text-align:center;font-size:11px;font-weight:800}.production-export-job[data-status="completed"] .production-export-job-status{background:#e3f5e8;color:#28713d}.production-export-job[data-status="failed"] .production-export-job-status,.production-export-job[data-status="cancelled"] .production-export-job-status{background:#ffebe8;color:#a53c2d}.production-export-job[data-status="running"] .production-export-job-status{background:#e8f3ff;color:#1c679d}
[data-dialog="export-center"] .dialog>.btn-row{position:sticky;z-index:2;bottom:-20px;margin:12px -20px -20px;padding:12px 20px 16px;border-top:1px solid #cbd7e2;background:rgba(248,250,252,.97);backdrop-filter:blur(8px)}
.export-summary{display:grid;grid-template-columns:1fr auto;gap:4px 10px}.export-summary-memory{grid-column:1/-1;border-top:1px solid #d8e3ec;padding-top:4px}.export-summary-memory[data-level="warning"]{color:#966100}.export-summary-memory[data-level="blocked"]{color:#b42318;font-weight:700}
@media(max-width:760px){.export-center-grid{grid-template-columns:1fr}.export-preview-wrap{min-height:180px}.export-checks,.export-metadata{grid-template-columns:1fr}.export-metadata>div:last-child{grid-column:auto}.production-export-queue-head{align-items:flex-start;flex-direction:column}.production-export-job{grid-template-columns:48px minmax(0,1fr)}.production-export-job button{grid-column:1/-1}.production-export-header p{display:none}}

/* ===== COLOR PICKER ===== */
#color-picker-dialog .cp-body { display:flex; gap:12px; }
#cp-sv-area { width:200px; height:200px; position:relative; cursor:crosshair; border:1px solid #555; border-radius:4px; }
#cp-sv-area .cp-marker { position:absolute; width:10px; height:10px; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; box-shadow:0 0 2px rgba(0,0,0,.5); }
#cp-hue-bar { width:20px; height:200px; position:relative; cursor:pointer; border:1px solid #555; border-radius:4px; }
#cp-hue-bar .cp-slider { position:absolute; left:-2px; width:24px; height:4px; background:transparent; border:2px solid #fff; border-radius:2px; transform:translateY(-50%); pointer-events:none; box-shadow:0 0 2px rgba(0,0,0,.5); }
#cp-info { display:flex; flex-direction:column; gap:6px; min-width:100px; }
#cp-preview { width:60px; height:40px; border:1px solid #555; border-radius:4px; }
#cp-hex { width:80px; background:#2a2a2a; border:1px solid #555; color:var(--text); padding:4px 6px; border-radius:3px; font-size:12px; font-family:monospace; }

/* ===== CONTEXT MENU ===== */
#context-menu { display:none; position:fixed; background:#3c3c3c; border:1px solid #555; border-radius:4px; min-width:180px; padding:4px 0; z-index:3000; box-shadow:0 4px 12px rgba(0,0,0,.5); }
#context-menu .ctx-item { padding:6px 16px; cursor:pointer; font-size:12px; }
#context-menu .ctx-item:hover { background:var(--accent); color:#fff; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:#555; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#777; }

/* ===== ADJUSTMENT DIALOG EXTRAS ===== */
.adj-canvas-wrap { text-align:center; margin:8px 0; }
.adj-canvas-wrap canvas { border:1px solid #555; border-radius:4px; max-width:100%; }

/* drag-drop overlay */
#drop-overlay { display:none; position:fixed; inset:0; background:rgba(38,128,235,.15); border:3px dashed var(--accent); z-index:5000; align-items:center; justify-content:center; font-size:24px; color:var(--accent); }
#drop-overlay.show { display:flex; }

/* marching ants */
@keyframes marchingAnts {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -16; }
}

/* ===== CLIPPING MASK ===== */
.layer-item.clipped { margin-left: 18px; border-left: 2px solid var(--accent); }
.layer-divider { height: 6px; cursor: pointer; position: relative; margin: 0 6px; border-radius: 2px; flex-shrink: 0; }
.layer-divider:hover { background: rgba(38,128,235,0.25); }
.layer-divider.clipped-active { background: rgba(38,128,235,0.15); }
.layer-divider.clipped-active::before { content: '\21B3'; position: absolute; left: 4px; top: -6px; font-size: 10px; color: var(--accent); }

/* ===== FX DIALOG ===== */
#fx-dialog-overlay .dialog { width: 420px; max-height: 80vh; overflow-y: auto; }
.fx-section { margin-bottom: 10px; border: 1px solid #555; border-radius: 4px; overflow: hidden; }
.fx-section-header { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #444; cursor: pointer; font-size: 12px; }
.fx-section-header input[type="checkbox"] { accent-color: var(--accent); }
.fx-section-body { padding: 8px 10px; display: none; }
.fx-section-body.open { display: block; }
.fx-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 11px; }
.fx-row label { min-width: 44px; color: var(--text-dim); }
.fx-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.fx-row input[type="number"] { width: 42px; background: #2a2a2a; border: 1px solid #555; color: var(--text); padding: 2px 4px; border-radius: 3px; font-size: 11px; }
.fx-row input[type="color"] { width: 28px; height: 22px; border: 1px solid #555; border-radius: 3px; padding: 0; cursor: pointer; background: none; }

/* ===== TOOLTIP ===== */
#pb-tooltip { position: fixed; z-index: 10000; background: #1a1a1a; color: #ddd; padding: 6px 10px; border-radius: 4px; font-size: 11px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; max-width: 220px; line-height: 1.5; box-shadow: 0 2px 8px rgba(0,0,0,0.5); white-space: pre-line; border: 1px solid #444; }

/* Silver workspace defaults are defined here as well as in the Pinter wrapper,
   so the embedded editor never flashes the old charcoal theme while loading. */
html,body{background:#eef1f5;color:#2f3b47}
#menu-bar,#options-bar,#status-bar{background:linear-gradient(#fff,#edf1f5);border-color:#d4dbe3;color:#526170}
.menu-item:hover{background:#e3edf6;color:#245a80}.menu-dropdown{background:#fff;border-color:#cbd4de;box-shadow:0 8px 22px rgba(60,80,100,.18)}.menu-dropdown .menu-action:hover{background:#dcebf7;color:#245a80}
#tool-panel,#layer-panel{background:linear-gradient(90deg,#fff,#f1f4f7);border-color:#d2dae3}.tool-btn{color:#546372}.tool-btn:hover{background:#e7eef5}.tool-btn.active{background:#d9e9f7;border:1px solid #9bbbd4;color:#245a80}.tool-sep{background:#d4dbe3}
#canvas-area{background:#dfe5eb;background-image:linear-gradient(45deg,#e7ebef 25%,transparent 25%),linear-gradient(-45deg,#e7ebef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7ebef 75%),linear-gradient(-45deg,transparent 75%,#e7ebef 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}
#main-canvas{image-rendering:auto;box-shadow:0 8px 26px rgba(48,65,82,.18)}
#layer-header,#layer-controls,#color-panel{border-color:#d4dbe3}.layer-item:hover{background:var(--surface-hover)}.layer-item.active{background:var(--surface-selected);border-color:var(--accent-primary)}.mini-btn{background:#fff;border-color:#cbd4de;color:#526170}.mini-btn:hover{background:#e8f0f6}
#top-project-save,#top-save,#top-share{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 11px;background:linear-gradient(#fff,#e8edf2);border:1px solid #c5cdd6;color:#3c4854;border-radius:5px;cursor:pointer;font-size:11px;font-weight:700;box-shadow:0 1px 2px rgba(24,39,56,.14);white-space:nowrap}
#top-project-save:hover{background:linear-gradient(#f3edff,#e2d7fa);border-color:#9c83cf;color:#55398d}
#top-save:hover{background:linear-gradient(#e8f3ff,#cfe4f8);border-color:#7aa7cf;color:#205a8a}
#top-share{background:linear-gradient(#eef9ff,#dceef9);border-color:#a8c9dc;color:#245a78}
#top-share:hover{background:linear-gradient(#e2f5ff,#c9e7f7);border-color:#78aeca;color:#174967}
#top-market{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:linear-gradient(#fff,#e8edf2);border:1px solid #c5cdd6;color:#3c4854;border-radius:5px;cursor:pointer;font-size:11px;font-weight:700;box-shadow:0 1px 2px rgba(24,39,56,.14);white-space:nowrap;text-decoration:none}
#top-market:hover{background:linear-gradient(#fff5d8,#ffe9a8);border-color:#d5a93a;color:#795800}
#recovery-banner{position:fixed;z-index:9000;top:38px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:10px;max-width:min(680px,calc(100vw - 32px));padding:10px 14px;background:#fff8dc;border:1px solid #d4a72c;border-radius:8px;box-shadow:0 8px 28px rgba(50,40,10,.22);color:#55430a;font-size:12px}
#recovery-banner.show{display:flex}#recovery-banner .recovery-copy{flex:1;min-width:180px}#recovery-banner strong,#recovery-source{display:block;margin-bottom:2px}#recovery-banner button{border:1px solid #b99a3e;background:#fff;color:#55430a;border-radius:5px;padding:5px 9px;cursor:pointer;white-space:nowrap}#recovery-banner [data-recovery="restore"]{background:#6d4db2;border-color:#6d4db2;color:#fff}
#recovery-banner{flex-wrap:wrap;width:max-content}
#recovery-detail{overflow-wrap:anywhere}
.dialog-recovery-slots{width:min(720px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 48px));overflow:auto}.recovery-slot-list{display:grid;gap:10px;margin:14px 0}.recovery-slot-card{padding:12px;border:1px solid #c9c0dc;border-radius:8px;background:#faf8ff}.recovery-slot-card strong{display:block;color:#3d276e;font-size:14px}.recovery-slot-card p{margin:5px 0;color:#4c4755;font-size:12px;line-height:1.45}.recovery-slot-card .recovery-slot-compare{padding:7px 9px;border-radius:5px;background:#f0ebfb;color:#5a3d8a}.recovery-slot-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}.recovery-slot-actions button{padding:6px 10px;border:1px solid #b5a8cd;border-radius:5px;background:#fff;color:#483567;cursor:pointer}.recovery-slot-actions .btn-primary{background:#6d4db2;border-color:#6d4db2;color:#fff}.recovery-slot-empty{padding:20px;border:1px dashed #bdb4ca;border-radius:8px;text-align:center;color:#6b6572}
#persistence-warning{position:fixed;z-index:8990;top:96px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:9px;max-width:min(760px,calc(100vw - 32px));padding:10px 12px;background:#fff1ed;border:1px solid #e08468;border-radius:8px;box-shadow:0 8px 28px rgba(70,30,20,.2);color:#6b2718;font-size:11px}#persistence-warning.show{display:flex}#persistence-warning .persistence-copy{flex:1;min-width:0}#persistence-warning strong{display:block;margin-bottom:2px;font-size:12px}#persistence-warning button{border:1px solid #c7765f;background:#fff;border-radius:5px;padding:5px 9px;color:#6b2718;cursor:pointer;white-space:nowrap}#persistence-warning [data-persistence="save"]{background:#a63c27;border-color:#a63c27;color:#fff}
#gnav-root #gnavPill{right:var(--photo-builder-dock-offset,0px)!important;transition:right .18s ease,transform .18s ease!important}
#gnav-root .gnav-sidebar.open{right:calc(var(--photo-builder-dock-offset,0px) + 16px)!important;transition:right .18s ease,transform .18s ease!important}
.photo-builder-compact #gnav-root #gnavPill,.photo-builder-compact #gnav-root .gnav-sidebar{display:none!important}
html:has(.dialog-overlay) #gnav-root #gnavPill,html:has(.dialog-overlay) #gnav-root .gnav-sidebar{display:none!important}
#mobile-dock-toggle{display:none;width:28px;height:24px;border:1px solid #c5cdd6;border-radius:5px;background:#fff;color:#3c4854;cursor:pointer;font-weight:800}
@media (max-width:1024px){
  #workspace-resizer{display:none!important}
  #mobile-dock-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px}
  #app.compact-workspace #layer-panel{position:fixed;z-index:850;top:64px;bottom:24px;right:0;left:auto;width:min(360px,88vw)!important;transform:translateX(105%);border:1px solid var(--border);box-shadow:-10px 0 28px rgba(30,50,70,.2);transition:transform .18s ease}
  #app.compact-workspace.dock-left #layer-panel{left:44px;right:auto;transform:translateX(-115%);box-shadow:10px 0 28px rgba(30,50,70,.2)}
  #app.compact-workspace #layer-panel.mobile-drawer-open{transform:translateX(0)}
  #app.compact-workspace #layer-panel.is-collapsed .dock-tabs{display:flex}
  #app.compact-workspace #layer-panel.is-collapsed .dock-content{display:flex}
  #app.compact-workspace #layer-panel.is-collapsed #dock-side-toggle{display:block}
  #app.compact-workspace #layer-panel.is-collapsed #workspace-theme-toggle{display:block}
  #app.compact-workspace #layer-panel.is-collapsed #dock-header{justify-content:initial;padding:4px 5px}
  #app.compact-workspace #layer-panel.is-collapsed #dock-collapse{height:28px;min-height:0;writing-mode:horizontal-tb}
  #app.compact-workspace #canvas-area{order:1;min-width:0}
}
@media (max-width:1180px){.dock-arrange-button{display:none}}
@media (max-width:900px){
  #status-rotation,#status-size,#status-mouse,#status-project,#status-render,#status-autosave,#status-import,#status-market,#release-status,#pwa-status{display:none}
  #accessibility-status{margin-left:auto;flex:0 0 auto}
}
@media (max-width:640px){
  .menu-item[data-menu="window"] > .menu-dropdown{position:fixed;left:auto;right:8px;top:28px;max-width:calc(100vw - 16px)}
  #menu-bar{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:0;padding-right:3px}
  #menu-bar::-webkit-scrollbar{display:none}
  .menu-item{padding:4px 6px;font-size:11px;flex:0 0 auto}
  #top-project-save,#top-save,#top-share{width:28px;padding:0;justify-content:center;font-size:0;flex:0 0 28px}
  #mobile-dock-toggle{order:-4}#top-project-save{order:-3}#top-save{order:-2}#top-share{order:-1}.menu-spacer{display:none}
  #top-project-save::before{content:'💾';font-size:13px}#top-save::before{content:'⇩';font-size:15px}#top-share::before{content:'☁';font-size:13px}
  #top-market,#menu-bar>a[href="classesT.html"]{display:none!important}
  #options-bar{height:40px;padding:0 6px;gap:5px}
  #app{height:calc(100vh - 28px - 40px - 32px - 24px)}
  #tool-panel{width:42px;min-width:42px;padding-top:3px}
  .tool-btn{width:34px;height:34px}
  #app.compact-workspace #layer-panel{top:68px;width:min(340px,87vw)!important}
  #status-bar{gap:8px;padding:0 6px}
  #status-mouse,#status-project,#status-render,#status-autosave,#status-import,#status-market,#release-status,#pwa-status{display:none}
  #opt-square span,#opt-a4-landscape span,#opt-a4-portrait span,#opt-draw-along span{display:none}
}
@media (pointer:coarse){
  .tool-btn{min-width:40px;min-height:40px}
  .dock-tab{min-height:40px;padding-inline:12px;font-size:11px}
  .dock-header-button{width:40px;height:40px}
  #dock-header{min-height:48px}
  #layer-buttons button,.navigator-controls button,.navigator-actions button{min-height:40px}
}
@media (prefers-reduced-motion:reduce){.canvas-state-spinner{animation:none}.canvas-state,#layer-panel{transition:none!important}}

html[data-photo-builder-motion="reduced"] *,html[data-photo-builder-motion="reduced"] *::before,html[data-photo-builder-motion="reduced"] *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html[data-photo-builder-focus="enhanced"] :focus,html[data-photo-builder-focus="enhanced"] :focus-visible{outline:3px solid var(--focus-ring)!important;outline-offset:3px!important;box-shadow:0 0 0 2px var(--surface-raised)!important}
html[data-photo-builder-contrast="high"]{color-scheme:dark;--surface-app:#000;--surface-panel:#090909;--surface-raised:#111;--surface-subtle:#050505;--surface-hover:#242424;--surface-selected:#132a3a;--surface-canvas-a:#111;--surface-canvas-b:#222;--border-soft:#aaa;--border-strong:#fff;--text-primary:#fff;--text-secondary:#f2f2f2;--text-muted:#dedede;--text-on-accent:#000;--accent-primary:#66d4ff;--accent-hover-strong:#a5e8ff;--focus-ring:#ffe600;--danger:#ff8f86;--danger-surface:#310000;--success:#73f59e;--success-surface:#002b0e;--warning:#ffe279;--warning-surface:#2b2200;--info:#8fdcff;--info-surface:#002638;--shadow-raised:0 0 0 2px #fff}
html[data-photo-builder-contrast="high"] #menu-bar,html[data-photo-builder-contrast="high"] #options-bar,html[data-photo-builder-contrast="high"] #status-bar{background:#000}
html[data-photo-builder-contrast="high"] .layer-name{color:#fff}
html[data-photo-builder-contrast="high"] .tool-btn.active,html[data-photo-builder-contrast="high"] [aria-selected="true"],html[data-photo-builder-contrast="high"] [aria-pressed="true"]{border:2px solid #fff;background:#17384d;color:#fff}
html[data-photo-builder-contrast="high"] #main-canvas{outline:2px solid #fff}
@media (prefers-contrast:more){:root{--border-soft:#7d8791;--border-strong:#263746;--text-secondary:#3f4b56;--text-muted:#46535f;--focus-ring:#004f80}}
@media (forced-colors:active){.skip-link,.tool-btn,.dock-tab,.menu-item,.menu-action,button,input,select,textarea{forced-color-adjust:auto}.tool-btn.active,[aria-selected="true"],[aria-pressed="true"]{outline:2px solid Highlight}.dialog-overlay{background:Canvas}.dialog,#menu-bar,#options-bar,#status-bar,#tool-panel,#layer-panel{border-color:CanvasText;background:Canvas;color:CanvasText}#main-canvas{outline:2px solid CanvasText}}

/* ===== STAGE 8: STYLE BOUNDARY & SEMANTIC UI STATES ===== */
html,
body {
    background: var(--surface-app);
    color: var(--text-primary);
}

#menu-bar,
#options-bar,
#status-bar {
    background: linear-gradient(var(--surface-raised), var(--surface-subtle));
    border-color: var(--border-soft);
    color: var(--text-secondary);
}

.menu-dropdown,
.dialog,
#context-menu {
    background: var(--surface-raised);
    border-color: var(--border-soft);
    color: var(--text-primary);
    box-shadow: var(--shadow-raised);
}

.menu-item:hover,
.menu-item:focus-within,
.menu-dropdown .menu-action:hover,
.menu-dropdown .menu-action:focus-visible,
#context-menu .ctx-item:hover,
.tool-btn:hover {
    background: var(--surface-hover);
    color: var(--accent-hover-strong);
}

.menu-item:focus-visible,
.menu-dropdown .menu-action:focus-visible,
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

:where(button, input, select, textarea):disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: var(--control-disabled-opacity);
}

[aria-busy="true"],
.is-loading {
    cursor: progress;
}

[aria-invalid="true"],
.field-error {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 18%, transparent);
}

.error-message,
[data-tone="error"] { color: var(--danger); }
.success-message,
[data-tone="success"] { color: var(--success); }

#tool-panel,
#layer-panel {
    background: linear-gradient(90deg, var(--surface-raised), var(--surface-subtle));
    border-color: var(--border-soft);
}

#canvas-area {
    background-color: var(--surface-canvas-a);
    background-image:
        linear-gradient(45deg, var(--surface-canvas-b) 25%, transparent 25%),
        linear-gradient(-45deg, var(--surface-canvas-b) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--surface-canvas-b) 75%),
        linear-gradient(-45deg, transparent 75%, var(--surface-canvas-b) 75%);
}

.dialog input[type="text"],
.dialog input[type="number"],
.dialog select,
.fx-row input[type="number"],
#cp-hex {
    background: var(--surface-raised);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.dialog .btn-cancel,
.fx-section-header,
.curve-ch-btn,
.curve-preset {
    background: var(--surface-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.dialog .btn-cancel:hover,
.curve-ch-btn:hover,
.curve-ch-btn.active {
    background: var(--surface-selected);
    color: var(--accent-hover-strong);
}

.menu-spacer,
.options-spacer,
.flex-1 { flex: 1; }
.options-spacer { min-width: 8px; }
.home-link { display:flex; align-items:center; gap:4px; padding:3px 10px; border-radius:4px; color:var(--text-muted); text-decoration:none; font-size:11px; transition:background-color .15s ease,color .15s ease; }
.home-link:hover { background:var(--surface-hover); color:var(--text-primary); }
.layer-fx-button { font-weight:700; font-style:italic; }
.history-toolbar { display:flex; align-items:center; justify-content:space-between; padding:7px 8px; border-bottom:1px solid var(--border-soft); }
.history-title { color:var(--text-muted); font-size:11px; font-weight:600; }
.history-actions { display:flex; gap:2px; }
.history-list { flex:1; overflow:auto; font-size:10px; }
.history-entry { padding:3px 8px; overflow:hidden; border-bottom:1px solid var(--border-soft); color:var(--text-secondary); cursor:pointer; text-overflow:ellipsis; white-space:nowrap; }
.history-entry:hover { background:var(--surface-hover); }
.history-entry.is-current { background:var(--surface-selected); color:var(--accent-hover-strong); font-weight:700; }
.history-entry.is-future,
.history-entry.is-redo { color:var(--text-muted); opacity:.72; }
.color-wheel-canvas { cursor:crosshair; }
.color-value-input { width:38px; }
.hex-color-input { width:65px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.photo-builder-file-input { display:none; }

.dialog-release-status { width:min(480px, calc(100vw - 24px)); }
.dialog-rollback { width:min(520px, calc(100vw - 24px)); }
.dialog-resilience { width:min(620px, calc(100vw - 24px)); max-height:calc(100vh - 24px); overflow:auto; }
.dialog-persistence { width:min(500px, calc(100vw - 24px)); border-color:#d6a18f; }
.dialog-project-save { width:min(470px, calc(100vw - 24px)); }
.dialog-adjustment-layer { min-width:410px; max-width:520px; }
.dialog-smart-filter { min-width:390px; max-width:500px; }
.content-aware-dialog{width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto}
.content-aware-dialog .muted-help{margin:0 0 12px;color:var(--text-dim);font-size:.8125rem;line-height:1.5}
.content-aware-section{margin:10px 0;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-raised)}
.content-aware-section[hidden]{display:none}
.content-aware-selection-status{font-size:.875rem;color:var(--text-dim)}
.content-aware-selection-status[data-ready="true"]{color:var(--success)}
.content-aware-margin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}
.content-aware-margin-grid label{display:grid;grid-template-columns:1fr 72px auto;gap:6px;align-items:center;font-size:.875rem}
.content-aware-margin-grid input{min-width:0;width:100%}
.content-aware-dialog-status{min-height:1.35em;margin:10px 0 0;color:var(--text-dim);font-size:.8125rem}
.dialog-min-340 { min-width:340px; }
.dialog-min-360 { min-width:360px; }
.dialog-min-380 { min-width:380px; }
.dialog-min-430 { min-width:430px; }
.dialog-fx { width:420px; }

.surface-card { padding:9px; border:1px solid var(--border-soft); border-radius:6px; background:var(--surface-raised); }
.notice-success { margin-top:10px; padding:9px; border:1px solid color-mix(in srgb, var(--success) 36%, var(--border-soft)); border-radius:6px; background:var(--success-surface); color:var(--success); font-size:11px; line-height:1.55; }
.notice-error { padding:9px; border:1px solid color-mix(in srgb, var(--danger) 36%, var(--border-soft)); border-radius:6px; background:var(--danger-surface); color:var(--danger); font-size:11px; line-height:1.55; }
.rollback-dirty-note { margin-top:8px; padding:8px; border-radius:5px; font-size:11px; }
.rollback-dirty-note.is-dirty { background:var(--warning-surface); color:var(--warning); }
.rollback-dirty-note.is-saved { background:var(--success-surface); color:var(--success); }
.bordered-section { margin-top:10px; padding:10px; border:1px solid var(--border-strong); border-radius:6px; }
.large-image-summary { color:var(--text-muted); font-size:12px; line-height:1.6; }
.large-image-guidance,
.muted-copy { color:var(--text-muted); font-size:11px; line-height:1.5; }
.dialog-description { color:var(--text-secondary); font-size:11px; line-height:1.6; }
.dialog-lead { margin-bottom:10px; color:var(--text-muted); font-size:10px; line-height:1.5; }
.dialog-side-note { float:right; color:var(--text-muted); font-size:11px; }
.supporting-copy { margin-top:9px; color:var(--text-secondary); font-size:11px; line-height:1.55; }
.fine-print { margin-top:7px; color:var(--text-muted); font-size:9px; }
.muted-text { color:var(--text-muted); }
.muted-caption { color:var(--text-muted); font-size:11px; }
.muted-help { color:var(--text-muted); font-size:10px; line-height:1.5; }
.compact-control { padding:3px 8px; font-size:10px; }
.space-top-8 { margin-top:8px; }

.split-fields { display:flex; gap:12px; }
.channel-tabs { display:flex; gap:6px; margin-bottom:8px; }
.channel-footer { display:flex; gap:6px; margin-top:8px; }
.inline-check { display:flex; align-items:center; gap:6px; }
.checkbox-line { display:flex; align-items:center; gap:6px; margin-top:8px; }
.wrapped-actions { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.two-column-detail-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; font-size:11px; }
.transform-field-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 12px; }
.grid-label-action { grid-template-columns:1fr auto; }
.dialog-separator { height:1px; margin:4px 0; background:var(--border-soft); }
.push-right { margin-right:auto; }

.field-label-w-20 { min-width:20px; }
.field-label-w-40 { min-width:40px; }
.field-label-w-60 { min-width:60px; }
.field-label-w-72 { min-width:72px; }
.field-label-w-92 { min-width:92px; }
.input-w-44 { width:44px !important; }
.input-w-45 { width:45px !important; }
.input-w-48 { width:48px !important; }
.input-w-50 { width:50px !important; }
.input-w-55 { width:55px !important; }
.font-family-select { max-width:160px; }

.channel-button { flex:1; padding:4px; border:1px solid var(--border-strong); border-radius:4px; background:var(--surface-subtle); cursor:pointer; font-size:11px; }
.channel-rgb { color:var(--text-primary); }
.channel-red { color:#b42318; }
.channel-green { color:#21713e; }
.channel-blue { color:#2169a6; }
html[data-theme="dark"] .channel-red { color:#ff8a80; }
html[data-theme="dark"] .channel-green { color:#77d69a; }
html[data-theme="dark"] .channel-blue { color:#8dc7ed; }
html[data-theme="dark"] #command-search-button,
html[data-theme="dark"] #top-project-save,
html[data-theme="dark"] #top-save,
html[data-theme="dark"] #top-share,
html[data-theme="dark"] #top-market,
html[data-theme="dark"] #mobile-dock-toggle,
html[data-theme="dark"] #options-bar button,
html[data-theme="dark"] #options-bar select,
html[data-theme="dark"] #options-bar input[type="number"],
html[data-theme="dark"] #options-bar input[type="text"],
html[data-theme="dark"] .dock-header-button,
html[data-theme="dark"] .swatch-section-head button,
html[data-theme="dark"] .asset-source-tab,
html[data-theme="dark"] .assets-close,
html[data-theme="dark"] .asset-card,
html[data-theme="dark"] .asset-variant,
html[data-theme="dark"] .navigator-controls button,
html[data-theme="dark"] .navigator-actions button,
html[data-theme="dark"] #navigator-zoom-value,
html[data-theme="dark"] #layer-search,
html[data-theme="dark"] #layer-search-clear,
html[data-theme="dark"] #layer-lock-toggle,
html[data-theme="dark"] #layer-color-label,
html[data-theme="dark"] #mask-controls button,
html[data-theme="dark"] #quick-mask-controls button,
html[data-theme="dark"] .smart-filter-item,
html[data-theme="dark"] .smart-filter-item button {
    background:var(--surface-raised);
    border-color:var(--border-strong);
    color:var(--text-primary);
}
html[data-theme="dark"] .smart-object-controls,
html[data-theme="dark"] #smart-object-edit-banner {
    background:#29213a;
    border-color:var(--border-soft);
    color:#d4c2f2;
}
html[data-theme="dark"] .smart-object-summary,
html[data-theme="dark"] .smart-object-summary small { color:#c5afe8; }
html[data-theme="dark"] .smart-object-icon,
html[data-theme="dark"] .smart-object-actions button {
    background:var(--surface-raised);
    border-color:#74559f;
    color:#d7c8ed;
}
html[data-theme="dark"] #top-share,
html[data-theme="dark"] #options-bar button.active,
html[data-theme="dark"] .dock-tab.active,
html[data-theme="dark"] #mask-controls button.active,
html[data-theme="dark"] #quick-mask-controls button.active,
html[data-theme="dark"] .asset-source-tab.active {
    background:var(--surface-selected);
    border-color:var(--accent-primary);
    color:var(--text-primary);
}
html[data-theme="dark"] #dock-header,
html[data-theme="dark"] .property-card,
html[data-theme="dark"] .property-card h3,
html[data-theme="dark"] .smart-filter-panel,
html[data-theme="dark"] .asset-note,
html[data-theme="dark"] .color-profile-note,
html[data-theme="dark"] .font-status {
    background:var(--surface-subtle);
    border-color:var(--border-soft);
    color:var(--text-secondary);
}
html[data-theme="dark"] #blend-mode,
html[data-theme="dark"] .fx-row input[type="number"] {
    background:var(--surface-raised);
    border-color:var(--border-strong);
    color:var(--text-primary);
}
.curve-canvas { height:auto; border:1px solid var(--border-strong); border-radius:4px; background:#1a1a1a; cursor:crosshair; }
.curve-canvas-wide { width:100%; }
.curve-preset { width:100%; margin-top:8px; padding:5px; }
.curve-help { margin-top:6px; color:var(--text-muted); font-size:10px; }
.layer-fx-badge { margin-left:2px; color:var(--accent-primary); font-size:9px; font-weight:700; }
.gradient-preview-strip { width:110px; height:20px; border:1px solid var(--border-strong); border-radius:3px; }
.release-blocked-screen { min-height:100vh; display:grid; place-items:center; padding:24px; box-sizing:border-box; background:var(--surface-app); color:var(--text-primary); font:14px var(--font); text-align:center; }
.release-blocked-screen h1 { margin:0 0 10px; font-size:20px; }
.release-blocked-screen p { margin:0; line-height:1.6; }
.market-share-dialog { width:min(440px, 90vw); }
.market-share-warning { margin-bottom:12px; padding:10px; border:1px solid color-mix(in srgb, var(--warning) 36%, var(--border-soft)); border-radius:6px; background:var(--warning-surface); color:var(--warning); font-size:11px; line-height:1.55; }
.market-share-preview { display:flex; justify-content:center; min-height:80px; padding:8px; overflow:hidden; border:1px solid var(--border-soft); border-radius:6px; background:var(--surface-app); }
.market-share-preview img { display:block; max-width:100%; max-height:220px; object-fit:contain; }
.market-share-consent { display:flex; align-items:flex-start; gap:7px; margin-top:12px; color:var(--text-primary); line-height:1.45; cursor:pointer; }
.market-share-consent input { margin-top:2px; }
#market-share-error { min-height:16px; margin-top:8px; color:var(--danger); font-size:11px; }

.select-mask-overlay { background:rgba(7,10,18,.82); }
.select-mask-dialog { width:min(1040px, calc(100vw - 32px)); max-width:1040px; padding:18px; }
.select-mask-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.select-mask-header h3 { margin:0 0 4px; font-size:18px; }
.select-mask-header p { margin:0; color:var(--text-muted); font-size:11px; line-height:1.5; }
.offline-badge { flex:none; padding:5px 9px; border:1px solid #3b8c6e; border-radius:999px; background:#e8f7f0; color:#176147; font-size:10px; font-weight:800; }
.select-mask-workspace { display:grid; grid-template-columns:minmax(0, 1fr) 260px; gap:14px; min-height:420px; }
.select-mask-preview-wrap { display:grid; grid-template-rows:minmax(0, 1fr) auto; min-width:0; overflow:hidden; border:1px solid var(--border-strong); border-radius:8px; background:repeating-conic-gradient(#bec4cd 0 25%,#e7e9ed 0 50%) 0/18px 18px; }
#select-mask-preview { display:block; width:100%; height:100%; min-height:360px; object-fit:contain; image-rendering:auto; }
#select-mask-inspection { padding:8px 10px; background:rgba(20,24,32,.9); color:#fff; font-size:10px; }
.select-mask-controls { display:flex; flex-direction:column; gap:10px; padding:12px; overflow:auto; border:1px solid var(--border-soft); border-radius:8px; background:var(--surface-subtle); }
.select-mask-controls label { display:grid; grid-template-columns:1fr auto; gap:5px 8px; align-items:center; color:var(--text-primary); font-size:11px; }
.select-mask-controls label input[type="range"], .select-mask-controls label select { grid-column:1 / -1; width:100%; }
.select-mask-controls fieldset { display:grid; gap:9px; margin:0; padding:10px; border:1px solid var(--border-soft); border-radius:6px; }
.select-mask-controls legend { padding:0 4px; color:var(--text-primary); font-size:11px; font-weight:800; }
.select-mask-controls .select-mask-check { display:flex; gap:6px; }
.select-mask-controls output { color:var(--accent-primary); font-variant-numeric:tabular-nums; }
html[data-theme="dark"] .offline-badge { background:#17392d; border-color:#3b8c6e; color:#98e3c5; }

.channels-pane { overflow:auto; }
.channels-header,
.channel-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px; border-bottom:1px solid var(--border-soft); color:var(--text-primary); font-size:12px; }
.channels-header span:last-child { color:var(--text-muted); font-size:10px; font-variant-numeric:tabular-nums; }
.channels-preview-options { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:7px 8px; border-bottom:1px solid var(--border-soft); color:var(--text-secondary); font-size:11px; }
.channels-preview-options select { min-width:88px; }
.channels-list { display:flex; flex-direction:column; padding:5px; }
.channel-row { display:grid; grid-template-columns:28px 34px minmax(0, 1fr) auto; align-items:center; gap:5px; min-height:38px; padding:3px 5px; border:1px solid transparent; border-radius:5px; color:var(--text-primary); cursor:pointer; }
.channel-row:hover { background:var(--surface-hover); }
.channel-row.is-active { border-color:var(--accent-primary); background:var(--surface-selected); }
.channel-eye { display:grid; place-items:center; width:26px; height:26px; padding:0; border:0; background:transparent; color:var(--text-secondary); font-size:14px; }
.channel-thumbnail { width:32px; height:24px; border:1px solid var(--border-strong); border-radius:3px; background:linear-gradient(135deg,#111,#eee); image-rendering:auto; }
.channel-name { overflow:hidden; font-size:11px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.channel-shortcut { color:var(--text-muted); font-size:9px; }
.channel-row[data-channel="red"] .channel-name { color:#b42318; }
.channel-row[data-channel="green"] .channel-name { color:#21713e; }
.channel-row[data-channel="blue"] .channel-name { color:#2169a6; }
.channel-row[data-channel^="alpha:"] .channel-name { color:#7253a3; }
.channels-actions { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:5px; padding:8px; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.channels-actions button,
.channel-section-head button,
.channel-saved-selection { min-height:28px; border:1px solid var(--border-strong); border-radius:4px; background:var(--surface-raised); color:var(--text-primary); font-size:10px; cursor:pointer; }
.channels-actions button:hover,
.channel-section-head button:hover,
.channel-saved-selection:hover { border-color:var(--accent-primary); background:var(--surface-hover); }
.channel-saved-selections { margin-top:5px; }
.channel-section-head { padding-block:6px; border-top:1px solid var(--border-soft); }
.channel-section-head button { padding-inline:7px; }
.channel-saved-selection-list { display:grid; gap:4px; padding:7px 8px; }
.channel-saved-selection { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:5px 7px; text-align:left; }
.channel-saved-selection small { color:var(--text-muted); }
.channel-empty { padding:9px; color:var(--text-muted); font-size:10px; line-height:1.5; text-align:center; }
.channel-status { margin:0; padding:8px; border-top:1px solid var(--border-soft); color:var(--text-muted); font-size:10px; line-height:1.45; }
.dialog-channel-calculations { width:min(460px, calc(100vw - 24px)); }
.channel-calculation-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.channel-calculation-grid label { display:grid; gap:5px; color:var(--text-secondary); font-size:11px; }
.channel-calculation-grid .span-two { grid-column:1 / -1; }
.channel-calculation-check { display:flex !important; grid-column:1 / -1; align-items:center; gap:6px; }
html[data-theme="dark"] .channel-row[data-channel="red"] .channel-name { color:#ff8a80; }
html[data-theme="dark"] .channel-row[data-channel="green"] .channel-name { color:#77d69a; }
html[data-theme="dark"] .channel-row[data-channel="blue"] .channel-name { color:#8dc7ed; }
html[data-theme="dark"] .channel-row[data-channel^="alpha:"] .channel-name { color:#c7a7f0; }

.color-scopes-pane { overflow:auto; padding:8px; background:linear-gradient(180deg,var(--surface-panel),var(--surface-subtle)); }
.scope-panel-header { position:sticky; top:-8px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-8px -8px 8px; padding:9px 10px; border-bottom:1px solid var(--border-soft); background:color-mix(in srgb,var(--surface-panel) 92%,transparent); backdrop-filter:blur(8px); }
.scope-panel-header > span { display:grid; gap:2px; }
.scope-panel-header strong { color:var(--text-primary); font-size:13px; letter-spacing:.01em; }
.scope-panel-header small { color:var(--text-muted); font-size:10px; }
#scope-refresh { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--border-strong); border-radius:6px; background:var(--surface-raised); color:var(--accent-primary); cursor:pointer; font-size:17px; }
#scope-refresh:hover { border-color:var(--accent-primary); background:var(--surface-hover); }
#scope-refresh:disabled { opacity:var(--control-disabled-opacity); cursor:wait; }
.scope-card { position:relative; margin-bottom:8px; padding:7px; overflow:hidden; border:1px solid var(--border-soft); border-radius:7px; background:#0a0e13; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025); }
.scope-card-header { display:flex; min-height:27px; align-items:center; justify-content:space-between; gap:8px; color:#d7e2eb; font-size:12px; font-weight:750; }
.scope-card-header select { min-width:92px; height:24px; padding:0 5px; border:1px solid #405261; border-radius:4px; background:#18212a; color:#e9f0f5; font-size:11px; }
.scope-card-header small { color:#8ea2b2; font-size:10px; font-weight:500; }
.scope-canvas { display:block; width:100%; height:auto; border:1px solid #263744; border-radius:4px; background:#05080b; image-rendering:auto; }
.scope-axis-labels { display:flex; justify-content:space-between; padding:4px 1px 0; color:#78909f; font-size:9px; }
.scope-level-labels { position:absolute; top:38px; right:10px; bottom:10px; display:flex; flex-direction:column; justify-content:space-between; color:rgba(218,230,238,.62); font:9px ui-monospace,SFMono-Regular,Menlo,monospace; pointer-events:none; }
.scope-vector-card { padding-inline:20px; }
.scope-vector-card .scope-card-header { margin-inline:-13px; }
.scope-vectorscope { max-width:280px; margin-inline:auto; border-radius:50%; }
.scope-worker-status { margin:1px 0 2px; padding:8px; border:1px solid var(--border-soft); border-radius:6px; background:var(--surface-raised); color:var(--text-muted); font-size:10px; line-height:1.45; }
.scope-worker-status[data-state="running"] { border-color:color-mix(in srgb,var(--accent-primary) 55%,var(--border-soft)); color:var(--accent-primary); }
.scope-worker-status[data-state="ready"] { border-color:color-mix(in srgb,var(--success) 45%,var(--border-soft)); color:var(--success); }
.scope-worker-status[data-state="error"] { border-color:color-mix(in srgb,var(--danger) 45%,var(--border-soft)); color:var(--danger); }
html[data-theme="light"] .scope-card { box-shadow:0 2px 8px rgba(31,50,67,.12),inset 0 0 0 1px rgba(255,255,255,.03); }

@media (max-width:768px) {
    .professional-brush-grid { grid-template-columns:1fr; }
    .professional-typography-grid { grid-template-columns:1fr; }
    .professional-vector-grid { grid-template-columns:1fr; }
    [data-dialog="adjustment-chooser"] .adjustment-choice-grid { grid-template-columns:1fr 1fr; }
    .adjustment-channel-grid { grid-template-columns:1fr; }
    .adjustment-color-grid { grid-template-columns:1fr; }
    .dialog-adjustment-layer,
    .dialog-smart-filter,
    .dialog-min-340,
    .dialog-min-360,
    .dialog-min-380,
    .dialog-min-430,
    .dialog-fx { width:min(100%, calc(100vw - 24px)); min-width:0; }
    #options-bar { overscroll-behavior-x:contain; scrollbar-width:thin; }
    .home-link { padding-inline:7px; }
    .select-mask-dialog { width:calc(100vw - 18px); max-height:calc(100vh - 18px); overflow:auto; }
    .select-mask-workspace { grid-template-columns:1fr; }
    #select-mask-preview { min-height:280px; }
    .channel-row { min-height:42px; }
    .color-scopes-pane { padding-bottom:18px; }
    .scope-panel-header { position:static; margin:-8px -8px 8px; }
}

@media (max-width:420px) {
    [data-dialog="adjustment-chooser"] .adjustment-choice-grid { grid-template-columns:1fr; }
    .adjustment-select-row { grid-template-columns:1fr 1fr; }
    .split-fields,
    .two-column-detail-grid,
    .transform-field-grid { grid-template-columns:1fr; flex-direction:column; }
    .dialog { max-width:calc(100vw - 16px); padding:14px; }
    .home-link { display:none; }
    #command-search-button { max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.raw-development-dialog {
    width: min(1180px, calc(100vw - 32px));
    max-width: 1180px;
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.raw-dialog-header,
.raw-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.raw-dialog-header h3 { margin-bottom: 3px; }
.raw-dialog-header p,
.raw-dialog-footer p { margin: 0; color: var(--text-secondary, #aeb7c4); }
.raw-local-badge,
.raw-layer-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid #287d63;
    border-radius: 999px;
    background: rgba(38, 166, 120, .14);
    color: #84e6bd;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 3px 8px;
    white-space: nowrap;
}
.raw-layer-badge { margin-left: 5px; padding: 1px 5px; font-size: 9px; }
.raw-dialog-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1.4fr) minmax(300px, .8fr);
    gap: 18px;
    margin: 16px 0;
}
.raw-preview-panel {
    min-width: 0;
    border: 1px solid var(--border, #3a414c);
    border-radius: 8px;
    background: #101318;
    overflow: hidden;
}
.raw-preview-panel canvas { display: block; width: 100%; height: auto; max-height: 52vh; object-fit: contain; }
.raw-preview-panel > p { margin: 0; padding: 9px 12px; background: #171c23; color: #b7c3d2; }
.raw-preview-panel dl { margin: 0; padding: 10px 12px; display: grid; gap: 5px; background: #171c23; }
.raw-preview-panel dl div { display: grid; grid-template-columns: 86px 1fr; gap: 8px; }
.raw-preview-panel dt { color: #8d99a8; }
.raw-preview-panel dd { margin: 0; overflow-wrap: anywhere; }
.raw-controls-panel { display: grid; gap: 10px; }
.raw-controls-panel fieldset { border: 1px solid var(--border, #3a414c); border-radius: 7px; padding: 10px 12px 8px; margin: 0; }
.raw-controls-panel legend { color: #d7e1ed; font-weight: 700; padding: 0 5px; }
.raw-controls-panel select { width: 100%; margin: 5px 0 7px; }
.raw-slider-row { display: grid; grid-template-columns: 92px 1fr 58px; align-items: center; gap: 8px; min-height: 30px; }
.raw-slider-row label { margin: 0; }
.raw-slider-row output { text-align: right; color: #aeb7c4; font-variant-numeric: tabular-nums; }
.raw-slider-row input:disabled { opacity: .42; }
.raw-dialog-footer { border-top: 1px solid var(--border, #3a414c); padding-top: 12px; }
@media (max-width: 820px) {
    .raw-dialog-grid { grid-template-columns: 1fr; }
    .raw-preview-panel canvas { max-height: 34vh; }
    .raw-dialog-header, .raw-dialog-footer { align-items: flex-start; flex-direction: column; }
    .raw-dialog-footer .btn-row { width: 100%; justify-content: flex-end; }
}

.professional-import-dialog {
    width: min(1120px, calc(100vw - 32px));
    max-width: 1120px;
    max-height: calc(100vh - 32px);
    overflow: auto;
}
.professional-import-header,
.professional-import-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.professional-import-header h3 { margin-bottom: 3px; }
.professional-import-header p,
.professional-import-footer p { margin: 0; color: var(--text-secondary, #aeb7c4); }
.professional-import-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1.25fr) minmax(310px, .75fr);
    gap: 18px;
    margin: 16px 0;
}
.professional-import-preview {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border, #3a414c);
    border-radius: 8px;
    background: #101318;
}
.professional-import-preview canvas {
    display: block;
    width: 100%;
    height: auto;
    max-height: 52vh;
    object-fit: contain;
}
.professional-import-preview > p {
    margin: 0;
    padding: 9px 12px;
    overflow-wrap: anywhere;
    border-top: 1px solid #303945;
    background: #171c23;
    color: #b7c3d2;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}
.professional-import-report { display: grid; align-content: start; gap: 10px; min-width: 0; }
.professional-import-status {
    width: fit-content;
    padding: 5px 10px;
    border: 1px solid #347b60;
    border-radius: 999px;
    background: rgba(38, 166, 120, .14);
    color: #82e4ba;
    font-size: 11px;
    font-weight: 800;
}
.professional-import-status[data-status="lossy"] {
    border-color: #a97827;
    background: rgba(222, 157, 43, .14);
    color: #ffd27e;
}
.professional-import-status[data-status="compatible"] {
    border-color: #347ab0;
    background: rgba(51, 135, 199, .14);
    color: #91d1ff;
}
.professional-import-report dl {
    display: grid;
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border, #3a414c);
    border-radius: 7px;
    background: var(--border, #3a414c);
}
.professional-import-report dl div {
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 10px;
    padding: 7px 9px;
    background: var(--surface-panel, #1b2028);
}
.professional-import-report dt { color: var(--text-muted, #8d99a8); }
.professional-import-report dd { margin: 0; color: var(--text-primary, #eef3f8); overflow-wrap: anywhere; }
.professional-import-issues {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.professional-import-issues li {
    display: grid;
    gap: 2px;
    padding: 8px 9px;
    border: 1px solid #925d28;
    border-radius: 6px;
    background: rgba(185, 103, 34, .11);
}
.professional-import-issues[data-tone="warning"] li {
    border-color: #486f93;
    background: rgba(52, 118, 169, .11);
}
.professional-import-issues strong { color: #ffc86b; font-size: 10px; overflow-wrap: anywhere; }
.professional-import-issues[data-tone="warning"] strong { color: #88caff; }
.professional-import-issues span { color: var(--text-secondary, #b8c1cd); line-height: 1.45; }
.professional-import-report details {
    padding: 8px 9px;
    border: 1px solid var(--border, #3a414c);
    border-radius: 6px;
    background: var(--surface-subtle, #171c23);
}
.professional-import-report summary { cursor: pointer; color: var(--text-primary, #eef3f8); font-weight: 700; }
.professional-import-report ol { margin: 8px 0 0; padding-left: 22px; color: var(--text-secondary, #b8c1cd); }
.professional-import-report ol li { padding-block: 2px; }
.professional-import-report ol span { color: var(--text-muted, #8d99a8); font-size: 10px; }
.professional-import-footer { padding-top: 12px; border-top: 1px solid var(--border, #3a414c); }
.professional-import-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    padding: 1px 5px;
    border: 1px solid #4a75a1;
    border-radius: 999px;
    background: rgba(62, 126, 186, .14);
    color: #8fceff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .02em;
}
html[data-theme="light"] .professional-import-status[data-status="lossy"],
html[data-theme="light"] .professional-import-issues strong { color: #855800; }
html[data-theme="light"] .professional-import-status[data-status="compatible"],
html[data-theme="light"] .professional-import-issues[data-tone="warning"] strong,
html[data-theme="light"] .professional-import-badge { color: #145d91; }
@media (max-width: 820px) {
    .professional-import-grid { grid-template-columns: 1fr; }
    .professional-import-preview canvas { max-height: 34vh; }
    .professional-import-header,
    .professional-import-footer { align-items: flex-start; flex-direction: column; }
    .professional-import-footer .btn-row { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
}