html,body { height:100%; overflow:hidden; }
body { background:var(--xp-face); }
.studio-shell { height:100%; min-width:360px; display:flex; flex-direction:column; overflow:hidden; }
.app-header { min-height:56px; flex-shrink:0; display:flex; align-items:center; gap:24px; padding:0 20px; color:#fff; background:linear-gradient(#2c609a,#224f85); border-bottom:1px solid #163d6a; }
.app-identity { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.app-header h1 { font-size:16px; letter-spacing:-.3px; margin:0; font-weight:bold; }
.app-header .artwork-toggle { margin-left:auto; color:#fff; border-color:#ffffff60; background:#ffffff10; box-shadow:none; }
.app-header .artwork-toggle:hover,.app-header .artwork-toggle[aria-expanded=true] { background:#ffffff20; border-color:#c5d9ef; }
.app-header button:focus-visible { outline-color:#fff; outline-offset:-3px; }
.workspace-tabs { align-self:stretch; display:flex; align-items:stretch; gap:4px; min-width:0; overflow-x:auto; }
.workspace-tabs button { border:0; border-bottom:3px solid transparent; border-radius:0; padding:0 12px; display:flex; align-items:center; gap:8px; background:transparent; color:#edf4ff; box-shadow:none; }
.workspace-tabs button:hover { background:#ffffff10; }
.workspace-tabs button[aria-current=page] { border-bottom-color:#f5c66b; background:#ffffff15; color:#fff; font-weight:bold; }
.app-icon { font:18px Georgia,serif; line-height:20px; }
.menubar { display:flex; height:32px; flex-shrink:0; align-items:center; padding:0 10px; border-bottom:1px solid #c6cbd0; position:relative; z-index:20; background:#fbfaf6; }
.menubar summary,.menubar > button { list-style:none; cursor:pointer; padding:6px 10px; border:0; box-shadow:none; background:none; min-height:0; border-radius:3px; }
.menubar summary:hover,.menubar > button:hover,.menubar details[open] summary { background:#e5eef9; color:#1f4e82; }
.menubar details { position:relative; }
.menubar details > summary::-webkit-details-marker { display:none; }
.dropdown { position:absolute; left:0; top:30px; width:270px; padding:4px; background:#fff; border:1px solid #a7b3c0; border-radius:3px; box-shadow:0 4px 12px #192c4226; display:grid; }
.dropdown button,.dropdown .file-button { border:0; background:#fff; box-shadow:none; border-radius:0; display:flex; justify-content:space-between; text-align:left; padding:8px 10px; }
.dropdown button:hover,.dropdown .file-button:hover { background:#245a96; color:#fff; }
.local-indicator { margin-left:auto; color:#526071; font-size:11px; margin-right:10px; display:flex; align-items:center; gap:6px; }
.local-indicator i { width:6px; height:6px; border-radius:50%; background:#598363; }
.center-body { display:flex; flex:1; min-height:0; position:relative; }
.workspaces { flex:1; min-width:0; min-height:0; }
.workspace { height:100%; overflow:auto; background:#f4f3ed; }
.workspace iframe { display:block; width:100%; height:100%; border:0; background:#f4f3ed; }
.embedded-tools { height:36px; }
.embedded-tools + iframe { height:calc(100% - 36px); }
#artwork-tray { width:200px; flex-shrink:0; border-left:1px solid #c6cbd0; display:flex; flex-direction:column; background:#f9f9f6; padding:0 12px 12px; gap:12px; }
#artwork-tray > h2 { margin:0 -12px; padding:12px; font-size:12px; background:#f0f1ed; border-bottom:1px solid #d9dcde; }
.tray-tools { display:flex; gap:6px; }
.tray-tools > * { flex:1; padding:4px 6px; font-size:11px; min-width:0; }
#asset-list { overflow:auto; display:grid; align-content:start; gap:8px; min-height:0; flex:1; }
#asset-list:empty { display:none; }
.asset-tile { background:#fff; border:1px solid #c6cbd0; padding:6px; text-align:left; white-space:normal; box-shadow:none; border-radius:3px; }
.asset-tile.selected { border-color:#628ebd; background:#e5eef9; box-shadow:inset 0 0 0 1px #628ebd; }
.asset-tile img { width:100%; height:100px; object-fit:contain; background:repeating-conic-gradient(#e9ecef 0% 25%,#fff 0% 50%) 50% / 10px 10px; display:block; }
.asset-tile span { display:block; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:6px; }
#asset-empty { flex:1; line-height:1.6; font-size:12px; color:#536172; margin:0; padding:8px 0; }
.tray-bottom { display:grid; gap:8px; padding-top:12px; border-top:1px solid #d9dcde; }
.tray-bottom label { display:grid; font-size:11px; gap:6px; }
.statusbar { min-height:28px; display:flex; align-items:center; padding:4px 12px; background:#f4f5f2; border-top:1px solid #c6cbd0; flex-shrink:0; }
.statusbar #status { flex:1; font-size:11px; color:#4f5e6e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#workspace-paint { display:flex; flex-direction:column; overflow:hidden; }
.paint-command,.paint-options { flex-shrink:0; }
.paint-command [data-action=export] { border-color:#7398c0; color:#1f4e82; }
.paint-options { font-size:11px; background:#f1f2ee; }
.paint-options input[type=number] { width:52px; }
.paint-workarea { display:flex; flex:1; min-height:0; }
.tool-rail { width:76px; flex-shrink:0; display:grid; grid-template-columns:30px 30px; gap:4px; align-content:start; padding:12px 6px; border-right:1px solid #c6cbd0; }
.tool-rail button { width:30px; height:32px; min-height:0; padding:4px; background:transparent; border-color:transparent; box-shadow:none; }
.tool-rail button:hover { border-color:#a7b3c0; background:#fff; }
.tool-rail button[aria-pressed=true] { border-color:#7398c0; background:#dae7f5; box-shadow:inset 0 1px #fff; }
.tool-rail svg { fill:none; stroke:#34485e; stroke-width:1.6; width:20px; height:20px; }
.tool-rail #tool-hint { grid-column:span 2; text-align:center; margin-top:8px; font-size:11px; color:#536172; line-height:1.4; }
.canvas-well { flex:1; min-width:0; min-height:0; overflow:auto; background:#dce1e6; padding:20px; display:flex; }
.canvas-stack { position:relative; margin:auto; background:repeating-conic-gradient(#e0e4e8 0% 25%,#fff 0% 50%) 50% / 12px 12px; box-shadow:0 1px 5px #192c422e; flex-shrink:0; }
.canvas-stack canvas { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
#paint-surface { touch-action:none; cursor:crosshair; }
.paint-inspector { width:192px; flex-shrink:0; border-left:1px solid #c6cbd0; background:#f9f9f6; overflow:auto; }
.paint-inspector section { padding:12px; border-bottom:1px solid #d9dcde; }
.paint-inspector h2 { font-size:12px; margin:0 0 12px; color:#263447; }
.paint-inspector label { font-size:11px; display:flex; justify-content:space-between; margin-top:8px; gap:6px; }
.paint-inspector input[type=range] { width:88px; }
.paint-inspector select { width:100%; font-size:11px; }
.cleanup label:has(select) { display:grid; }
.cleanup > button { width:100%; margin-top:12px; }
.layer-row { display:flex; align-items:center; min-height:30px; background:#fff; border:1px solid #d9dcde; border-radius:2px; margin-bottom:4px; overflow:hidden; }
.layer-row.selected { background:#e5eef9; border-color:#7398c0; }
.layer-row button { background:none; border:0; box-shadow:none; flex:1; text-align:left; text-overflow:ellipsis; overflow:hidden; font-size:11px; padding:4px; }
.layer-tools { display:flex; gap:4px; margin-top:8px; }
.layer-tools button { font-size:11px; padding:2px 5px; min-height:26px; }
.paint-palette { display:flex; align-items:center; gap:12px; min-height:52px; flex-shrink:0; border-top:1px solid #c6cbd0; padding:8px 12px; font-size:11px; }
.current-color { padding:3px; border:1px solid #a7b3c0; border-radius:2px; background:#fff; }
.current-color input { width:28px; height:28px; cursor:pointer; }
.swatches { display:grid; grid-template-columns:repeat(14,14px); grid-template-rows:14px 14px; gap:3px; }
.swatches button { min-height:0; padding:0; border:1px solid #0004; border-radius:1px; box-shadow:inset 0 0 0 1px #ffffff40; }
.paint-palette > span { white-space:nowrap; }
#paint-save-state { margin-left:auto; color:#536172; font-size:11px; }
#paint-position { min-width:50px; }
.dialog-title { background:linear-gradient(#2c609a,#224f85); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; font-size:14px; font-weight:bold; }
.dialog-title button { min-height:28px; width:28px; padding:0; color:#fff; border-color:#ffffff60; background:transparent; box-shadow:none; }
.help-body { padding:20px 24px; line-height:1.6; max-height:75vh; overflow:auto; }
.help-body h2 { font-size:20px; font-weight:normal; color:#263c54; }
.help-body li { margin:8px 0; }
.help-body p:last-child { margin-bottom:0; }
/* Workspace panels share the shell's surfaces; source rendering is unchanged. */
.studio-shell .workspace .comic-workspace,.studio-shell .workspace .frame-workspace { height:100%; min-height:0; gap:0; }
.studio-shell .workspace .cm-toolbar,.studio-shell .workspace .fr-toolbar { min-height:42px; padding:6px 10px; border-bottom:1px solid #c6cbd0; background:#fbfaf6; flex-shrink:0; }
.studio-shell .workspace .cm-main { grid-template-columns:168px minmax(0,1fr) 224px; gap:0; min-height:0; }
.studio-shell .workspace .cm-main > aside { overflow:auto; padding:12px; background:#f9f9f6; }
.studio-shell .workspace .cm-main > main { display:flex; flex-direction:column; min-width:0; min-height:0; }
.studio-shell .workspace .cm-stage,.studio-shell .workspace .fr-stage { background:#dce1e6; border:0; min-height:0; flex:1; padding:20px; }
.studio-shell .workspace .cm-empty { color:#4f5e6e; padding:60px 20px; }
.studio-shell .workspace .cm-empty strong { color:#263c54; font-size:20px; font-weight:normal; }
.studio-shell .workspace .cm-preview-meta { color:#4f5e6e; }
.studio-shell .workspace .cm-tabs { margin:0; padding:6px 8px; background:#f1f2ee; flex-shrink:0; }
.studio-shell .workspace .cm-tabs button[aria-pressed=true] { border:1px solid #7398c0; background:#e5eef9; }
.studio-shell .workspace .cm-stage canvas,.studio-shell .workspace .fr-stage canvas { box-shadow:0 1px 5px #192c422e; }
.studio-shell .workspace .cm-status,.studio-shell .workspace .fr-status { padding:6px 12px; min-height:28px; border:0; border-top:1px solid #c6cbd0; color:#4f5e6e; flex-shrink:0; }
.studio-shell .workspace .fr-main { gap:0; min-height:0; grid-template-columns:minmax(0,1fr) 272px; }
.studio-shell .workspace .fr-main > main { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:auto; }
.studio-shell .workspace .fr-inspector { min-height:0; overflow:auto; background:#f9f9f6; padding:12px; }
.studio-shell .workspace .fr-controls { max-height:none; overflow:visible; padding:0; background:#f9f9f6; }
.studio-shell .workspace .fr-inspector > fieldset { margin:0 0 12px; padding:8px; }
.studio-shell .workspace .fr-controls details { border:1px solid #c6cbd0; background:#f9f9f6; border-radius:3px; }
.studio-shell .workspace .fr-controls summary { padding:10px; background:#f0f1ed; }
.studio-shell .workspace .fr-fields { padding:8px; gap:8px; }
.studio-shell .workspace .fr-timeline { margin:0; padding:8px 12px; }
.studio-shell .workspace .fr-info { margin:0; padding:8px 12px; }
.studio-shell .workspace .fr-stage { min-height:200px; }
.studio-shell .workspace .fr-stage canvas { max-height:100%; }
.studio-shell .workspace .frame-workspace > fieldset { flex-shrink:0; padding:8px 12px; border:0; border-top:1px solid #c6cbd0; }
.studio-shell .workspace .fr-main > main > fieldset { flex-shrink:0; margin:0 12px 12px; }
@media (max-width:1100px) {
  .app-header { gap:12px; padding:0 12px; }
  .workspace-tabs button { padding:0 8px; }
  .workspace-tabs .app-icon { display:none; }
  #artwork-tray { width:176px; }
  .paint-inspector { width:176px; }
  #paint-save-state { display:none; }
  .studio-shell .workspace .cm-main { grid-template-columns:150px minmax(220px,1fr); overflow:auto; }
  .studio-shell .workspace .cm-main > main { min-height:360px; }
  .studio-shell .workspace .cm-settings { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
}
@media (max-width:900px) {
  .app-header { display:grid; grid-template-columns:1fr auto; gap:0 12px; padding:0 12px; }
  .app-identity { min-height:48px; }
  .artwork-toggle { grid-column:2; grid-row:1; }
  .workspace-tabs { grid-column:1/-1; min-height:42px; }
  .workspace-tabs button { padding:0 12px; }
}
@media (max-width:780px) {
  #artwork-tray { position:absolute; right:0; top:0; bottom:0; width:200px; box-shadow:-4px 0 16px #192c4226; z-index:15; }
  .paint-inspector { width:160px; }
  .paint-command { gap:4px; }
  .paint-command button,.paint-command .file-button { padding:4px 6px; font-size:11px; }
  .paint-palette { gap:8px; padding:6px 8px; }
  .paint-palette > span { display:none; }
  .studio-shell .workspace .fr-main { display:flex; flex-direction:column; overflow:auto; }
  .studio-shell .workspace .fr-main > main { min-height:400px; }
  .studio-shell .workspace .fr-inspector { overflow:visible; }
}
@media (max-width:600px) {
  #workspace-paint { overflow:auto; }
  .paint-workarea { min-height:340px; }
  .paint-inspector { width:144px; }
  .paint-inspector section { padding:8px; }
  .paint-inspector input[type=range] { width:70px; }
  .tool-rail { width:40px; grid-template-columns:30px; padding:8px 4px; }
  .tool-rail #tool-hint { grid-column:1; font-size:9px; overflow-wrap:anywhere; }
  .paint-options label:has(#paint-name) { flex-basis:100%; }
  .paint-options .toolbar-space { display:none; }
  .studio-shell .workspace .cm-main { display:flex; flex-direction:column; }
  .studio-shell .workspace .cm-settings { display:block; }
  .local-indicator { font-size:10px; }
}