/* Keep editor chrome clear of the project launcher. */
.project-bar {
  position: fixed;
  z-index: 25;
  top: calc(var(--px-header-height, var(--creation-editor-header, 64px)) + 8px);
  left: 12px;
  height: 46px;
  pointer-events: none;
}
.project-bar button {
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #647987;
  border-radius: 14px;
  background: linear-gradient(145deg, #2d3d49, #17232d);
  color: #f4f0e4;
  box-shadow: 0 5px 16px #0005, inset 0 1px #ffffff12;
  pointer-events: auto;
  touch-action: manipulation;
}
.project-bar svg { width: 23px; height: 23px; color: #ffe08a; }
.project-bar__state { position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; border: 2px solid #1c2933; border-radius: 50%; background: #ffc962; }
[data-state=saved] .project-bar__state { background: #8ecba0; }
[data-state=error] .project-bar__state { background: #ff8b7a; }
[data-state=saving] .project-bar__state { animation: project-save 1s steps(2) infinite; }
@keyframes project-save { 50% { opacity: .4; } }
.project-bar__name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Moving the existing launcher into the header removes its reserved editor row. */
body.px-tool-header.project-workspace-ready .project-bar.px-tool-header-files { position: relative; top: auto; left: auto; flex: 0 0 44px; width: 44px; height: 44px; }
body.px-tool-header .project-bar.px-tool-header-files button { width: 44px; height: 44px; border-radius: 10px; box-shadow: inset 0 1px #ffffff12; }
body.project-workspace-ready.creation-editor #main { padding-top: calc(var(--px-header-height, 64px) - 2px) !important; }
body.project-workspace-ready.app-page--tool-jigsaw #main { padding-top: calc(var(--px-header-height, 64px) - 2px); }
body.project-workspace-ready:is(.hidden-object-editing, .spot-editing) .project-bar { top: calc(var(--px-header-height, 64px) + 8px); }
body.project-workspace-ready:is(.hidden-object-editing, .spot-editing) :is(.hidden-preview, .spot-preview) { top: 0; }
body.project-workspace-ready :is(.hidden-settings summary, .spot-settings summary, .hidden-target-list button) { min-height: 44px; }
body.project-workspace-ready:is(.hidden-object-editing, .spot-editing) :is(.hidden-source-label, .spot-source-label) { display: none; }
body.project-workspace-ready.hidden-object-editing .hidden-settings { top: 8px; right: 12px; left: auto; }
body.project-workspace-ready.hidden-object-editing .hidden-settings summary { margin-left: auto; }
body.project-workspace-ready.hidden-object-editing .hidden-edit-hint { top: 62px; }
body.project-workspace-ready.spot-editing .spot-settings { top: 8px; right: 12px; }
body.project-workspace-ready:not(.hidden-object-editing).app-page--tool-hidden-object #main,
body.project-workspace-ready:not(.spot-editing).app-page--tool-spot-difference #main { padding-top: calc(var(--px-header-height, 64px) - 2px); }
body[data-tool-result-open] .project-bar { display: none; }
body.project-workspace-ready.creation-editor[data-tool-result-open] #main { padding-top: 8px !important; }
body.project-workspace-ready .draw-meta { display: none; }
body.project-workspace-ready .audio-status.is-visible { top: calc(var(--creation-editor-header, 64px) + 60px); }
body.project-workspace-ready[data-tool-name="ドット絵カメラ"] .lc-top.px-site-header .lc-zoom-stops { top: calc(100% + 60px); }
body.px-tool-header.project-workspace-ready.creation-editor #main { padding-top: 8px !important; }
body.px-tool-header.project-workspace-ready.app-page--tool-jigsaw #main,
body.px-tool-header.project-workspace-ready:not(.hidden-object-editing).app-page--tool-hidden-object #main,
body.px-tool-header.project-workspace-ready:not(.spot-editing).app-page--tool-spot-difference #main { padding-top: 8px; }
body.px-tool-header.project-workspace-ready .audio-status.is-visible { top: calc(var(--creation-editor-header,56px) + 8px); }
body.px-tool-header.project-workspace-ready[data-tool-name="ドット絵カメラ"] .lc-top.px-site-header .lc-zoom-stops { top: calc(100% + 4px); }
body.px-tool-header.project-workspace-ready.creation-editor .px-site-header .creation-output__panel { top: calc(var(--creation-editor-header) + 8px); max-height: calc(100dvh - var(--creation-editor-header) - var(--creation-editor-bottom) - 20px); }
body.px-tool-header.project-workspace-ready.creation-editor .px-site-header .creation-output[open] > summary { position: relative; top: auto; right: auto; z-index: auto; }
body.px-tool-header.project-workspace-ready.creation-editor .px-site-header .creation-output[open] > summary svg { display: block; }
body.px-tool-header.project-workspace-ready.creation-editor .px-site-header .creation-output[open] > summary::after { content: none; }
body.project-workspace-ready #draw-palette { display: flex !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 6px !important; }
body.project-workspace-ready #draw-palette .draw-color { flex: none !important; }
@media (min-width: 900px), (orientation: landscape) and (min-width: 560px) {
  body.project-workspace-ready #draw-palette { flex-wrap: wrap !important; max-height: 210px !important; overflow-y: auto !important; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.project-workspace-ready #draw-palette { flex-wrap: nowrap !important; max-height: 58px !important; overflow-x: auto !important; overflow-y: hidden !important; }
}
.project-sheet {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 16px));
  max-width: 760px;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
  margin: auto;
  padding: 0 14px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #526979;
  border-radius: 18px;
  background: linear-gradient(155deg, #22313b, #141f28 78%);
  color: #f4f0e4;
  box-shadow: 0 24px 70px #0008;
  scrollbar-width: thin;
  scrollbar-color: #52606a transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", system-ui, sans-serif;
}
.project-sheet::backdrop { background: #080e16bb; }
.project-sheet__header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: 8px;
  padding: 12px 0 10px;
  border-bottom: 1px solid #415560;
  background: #202f39;
}
.project-sheet__heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.project-sheet__heading h2 { margin: 0; color: #fff1bd; font-size: 19px; letter-spacing: .02em; }
.project-sheet button, .project-sheet summary {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #526979;
  border-radius: 11px;
  background: #182630;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
.project-sheet button:disabled { opacity: .52; cursor: wait; }
.project-sheet__heading button { display: grid; place-items: center; flex: none; padding: 8px; }
.project-sheet svg { width: 21px; height: 21px; flex: none; }
.project-sheet__toolbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.project-tabs { display: flex; flex: 1; min-width: 0; gap: 4px; padding: 3px; border: 1px solid #3b505d; border-radius: 13px; background: #111c25; }
.project-sheet .project-tabs button { flex: 1 1 0; min-width: 0; padding: 7px 5px; border-color: transparent; background: transparent; color: #c2cdd1; font-size: 12px; font-weight: 650; white-space: nowrap; }
.project-sheet .project-tabs button[aria-selected=true] { border-color: #887544; background: #344550; color: #fff0bf; box-shadow: inset 0 0 0 1px #ffe08a33; }
.project-sheet__toolbar #project-new { flex: none; padding-inline: 12px; border-color: #f2d27a; background: linear-gradient(145deg, #ffe28b, #f1c657); color: #202a33; font-weight: 750; white-space: nowrap; }
.project-sheet :is(input, button, summary):focus-visible { outline: 3px solid #ffe07d; outline-offset: 2px; }
.project-sheet__status { margin: 8px 0 0; color: #ffbeaa; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.project-sheet__status:empty { display: none; }
.project-pane[hidden], .project-list__row[hidden], .project-list__empty[hidden] { display: none; }
.project-pane { min-width: 0; padding-top: 12px; }
.project-pane[aria-labelledby="project-tab-library"][data-empty=true] { padding-top: 6px; }
.project-sheet .project-search { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 9px 12px; border: 1px solid #526979; border-radius: 12px; background: #101d27; color: #f4f0e4; font: inherit; font-size: 16px; }
.project-search::placeholder { color: #9aaeb9; }
.project-library-count { margin: 7px 2px 0; color: #bcc9ce; font-size: 11px; }
.project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; margin: 10px 0 12px; }
.project-list__empty { grid-column: 1 / -1; margin: 4px 0; color: #f4e2a2; font-size: 14px; line-height: 1.5; }
.project-list__row { display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.project-sheet .project-list__row .project-card { flex: 1; min-width: 0; padding: 8px; }
.project-sheet .project-card {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 100px;
  padding: 9px;
  text-align: left;
  border-color: #465d6a;
  border-radius: 14px;
  background: linear-gradient(145deg, #30414c, #1b2b35);
  transition: background-color 140ms, transform 140ms, border-color 140ms;
}
.project-sheet .project-card[aria-current=true] { border-color: #e4c66e; box-shadow: inset 0 0 0 1px #e4c66e77; }
.project-sheet .project-card:hover { background: #344b58; }
.project-sheet .project-card:active { transform: scale(.985); }
.project-card canvas { box-sizing: border-box; flex: none; width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; border: 1px solid #607687; border-radius: 8px; background: repeating-conic-gradient(#34414b 0 25%, #29353e 0 50%) 0 0 / 12px 12px; }
.project-card__info { display: grid; gap: 4px; min-width: 0; color: #b9c6ca; font-size: 11px; line-height: 1.35; }
.project-card__info strong { overflow: hidden; color: #f4f0e4; font-size: 13px; font-weight: 700; text-overflow: ellipsis; overflow-wrap: anywhere; }
.project-card__info time { color: #aab9bf; font-size: 10px; }
.project-sheet .project-card__delete { align-self: center; flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 9px; border-color: transparent; background: transparent; color: #e4aaa0; }
.project-sheet .project-card__delete:hover { border-color: #855a51; background: #ef6e6120; color: #ffb2a3; }
.project-trash, .project-more, .project-imports { margin-top: 8px; border-top: 1px solid #425762; }
.project-sheet :is(.project-trash, .project-more, .project-imports) > summary { display: flex; align-items: center; padding: 0 2px; border: 0; border-radius: 0; background: transparent; color: #e1cf92; font-size: 12px; font-weight: 650; list-style-position: inside; }
.project-sheet :is(.project-trash, .project-more, .project-imports) > summary::-webkit-details-marker { color: #d6bc68; }
.project-sheet :is(.project-trash, .project-more, .project-imports) > summary::after { content: ''; width: 7px; height: 7px; margin-left: auto; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.project-sheet :is(.project-trash, .project-more, .project-imports)[open] > summary::after { transform: rotate(225deg); }
.project-sheet__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.project-sheet .project-more #pxd-save { border-color: #e2c56e; background: #e2c56e; color: #1c2931; font-weight: 750; }
.project-sheet .project-more #project-duplicate { background: #293b46; }
.project-sheet__current { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; min-width: 0; margin: 0 0 12px; padding: 10px; border: 1px solid #465d6a; border-radius: 14px; background: #172630; }
.project-sheet__current label { grid-column: 1 / -1; color: #d3ddde; font-size: 12px; font-weight: 650; }
.project-sheet__current input { box-sizing: border-box; min-width: 0; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #526979; border-radius: 10px; background: #101d27; color: #f4f0e4; font: inherit; font-size: 16px; }
/* The site-wide input surface is forced light; this dark dialog owns its fields. */
#pxd-panel.project-sheet :is(#project-title, #project-search) { background: #101d27 !important; color: #f4f0e4; border: 1px solid #526979 !important; }
.project-sheet__current button { white-space: nowrap; }
.project-sheet__identity { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; padding: 7px 9px; border-left: 3px solid #dfc36e; border-radius: 7px; background: #101d27; }
.project-sheet__identity > svg { color: #e4cc7e; }
.project-sheet__identity > span { display: grid; gap: 2px; min-width: 0; }
.project-sheet__identity strong { overflow: hidden; color: #f5f2e8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.project-sheet__identity small { color: #c3cfd0; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.project-sheet__identity[data-state=saved] small { color: #a8d6b3; }
.project-sheet__identity[data-state=error] small { color: #ff9d8e; }
.project-transfer { margin-top: 10px; padding-top: 10px; border-top: 1px solid #425762; }
.project-transfer[hidden] { display: none; }
.project-transfer h3 { margin: 0; color: #eee1b3; font-size: 14px; }
.project-transfer .project-sheet__note { margin: 4px 0 8px; color: #bdc9cc; font-size: 11px; line-height: 1.4; }
.project-transfer__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.project-sheet .project-transfer__button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; min-height: 44px; padding: 7px 9px; text-align: left; line-height: 1.3; overflow-wrap: anywhere; }
.project-transfer__button svg { color: #e5cb77; }
.project-transfer__button span { min-width: 0; }
.project-transfer__button:hover:not(:disabled) { border-color: #8a9ca1; background: #344957; }
.project-files__note { margin: 4px 0 8px; color: #bdc9cc; font-size: 11px; line-height: 1.45; }
.project-imports .project-list { grid-template-columns: minmax(0, 1fr); margin: 8px 0 0; }
.project-imports .project-card { min-height: 56px; }
.project-trash__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 7px 0; }
.project-trash__row span { min-width: 0; color: #c9d1d1; font-size: 12px; overflow-wrap: anywhere; }
.project-trash__row button { flex: none; }
.project-delete-dialog {
  box-sizing: border-box;
  width: min(390px, calc(100vw - 20px));
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px);
  overflow: auto;
  padding: 18px;
  border: 1px solid #607481;
  border-radius: 18px;
  background: #202f39;
  color: #f4f0e4;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", system-ui, sans-serif;
  box-shadow: 0 24px 70px #0008;
}
.project-delete-dialog::backdrop { background: #080e16bb; }
.project-delete-dialog h2 { margin: 0 0 10px; color: #fff1bd; font-size: 17px; overflow-wrap: anywhere; }
.project-delete-dialog p { color: #c4d0d2; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.project-delete-dialog .project-sheet__actions { display: flex; gap: 8px; }
.project-delete-dialog button { flex: 1; min-width: 44px; min-height: 44px; padding: 9px; border: 1px solid #526979; border-radius: 10px; background: #15232d; color: inherit; font: inherit; font-size: 13px; }
.project-delete-dialog #project-delete-confirm { border-color: #d67c68; background: #d67c68; color: #171e22; font-weight: 700; }
.project-delete-dialog button:focus-visible { outline: 3px solid #ffe07d; outline-offset: 2px; }
.project-delete-dialog__preview { display: grid; place-items: center; min-height: 64px; max-height: 150px; margin: 5px auto 8px; overflow: hidden; }
.project-delete-dialog__preview canvas, .project-card-actions__preview canvas { display: block; width: min(100%, 160px); max-height: 140px; height: auto; object-fit: contain; image-rendering: pixelated; border: 1px solid #607687; border-radius: 10px; background: repeating-conic-gradient(#34414b 0 25%, #29353e 0 50%) 0 0 / 12px 12px; }
.project-delete-dialog .project-delete-dialog__name { margin: 5px 0 0; color: #f4f0e4; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.project-card-actions { width: min(360px, calc(100vw - 20px)); text-align: center; }
.project-card-actions__preview canvas { width: 72px; height: 72px; }
.project-card-actions__controls { display: grid; gap: 8px; }
.project-card-actions__controls button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; }
.project-card-actions__controls svg { width: 22px; height: 22px; }
.project-card-actions #project-card-actions-open { border-color: #e2c56e; background: #e2c56e; color: #202a33; font-weight: 700; }
.project-card-actions #project-card-actions-delete { border-color: #805a52; color: #ffb2a3; }
.project-sheet[data-startup=true] .project-more { display: none; }
@media (max-width: 600px) {
  .project-bar { left: 8px; }
  .project-sheet { width: calc(100vw - 12px); padding-inline: 10px; border-radius: 15px; }
  .project-sheet__header { padding-top: 9px; }
  .project-sheet__heading h2 { font-size: 17px; }
  .project-sheet__toolbar { gap: 5px; }
  .project-sheet .project-tabs button { padding-inline: 3px; font-size: 11px; }
  .project-sheet__toolbar #project-new { padding-inline: 9px; font-size: 12px; }
  .project-list { grid-template-columns: minmax(0, 1fr); }
  .project-sheet .project-card { min-height: 82px; }
  .project-card canvas { width: 64px; height: 64px; }
  .project-sheet__current { padding: 8px; }
  .project-transfer__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
  .project-sheet { padding-inline: 8px; }
  .project-sheet__heading h2 { font-size: 16px; }
  .project-sheet__toolbar #project-new { padding-inline: 7px; font-size: 11px; }
  .project-sheet .project-tabs button { font-size: 10px; }
  .project-sheet .project-list__row .project-card { gap: 7px; padding: 7px; }
  .project-card canvas { width: 64px; height: 64px; }
  .project-sheet__current { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
  .project-sheet__current button { padding-inline: 7px; font-size: 11px; }
}
@media (min-width: 700px) {
  .project-sheet { padding-inline: 18px; }
  .project-list { gap: 10px; }
  .project-card canvas { width: 82px; height: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-state=saving] .project-bar__state { animation: none; }
  .project-sheet :is(.project-card, .project-tabs button, #project-new) { transition: none; }
}

.project-delete-dialog__header{position:sticky;top:-18px;z-index:2;display:flex;align-items:start;gap:10px;margin:-18px -18px 10px;padding:12px 18px 8px;background:#202f39;border-radius:17px 17px 0 0}
.project-delete-dialog__header h2{flex:1;min-width:0;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-align:left}
.project-delete-dialog__header button{flex:none;min-width:44px;min-height:44px;font-size:22px}