:root {
  --creator-bg: #eef3fb;
  --creator-surface: #ffffff;
  --creator-panel: #ffffff;
  --creator-border: #c9d6e8;
  --creator-border-strong: #7b97bf;
  --creator-text: #14253f;
  --creator-muted: #53698a;
  --creator-accent: #214775;
  --creator-accent-strong: #173055;
  --creator-shadow: 0 18px 42px rgba(14, 28, 48, 0.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(circle at top left, rgba(84, 133, 201, 0.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(255, 184, 77, 0.12), transparent 25%),
    var(--creator-bg);
  color: var(--creator-text);
  font-family: Arial, Helvetica, sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.creator-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--creator-border);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}

.creator-topbar-left,
.creator-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.top-link,
.top-action,
.layout-picker select,
.inspector-actions button {
  border: 1px solid var(--creator-border);
  background: var(--creator-surface);
  color: var(--creator-text);
  text-decoration: none;
  min-height: 38px;
  padding: 0 14px;
}

.top-link,
.top-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.top-action-primary {
  background: var(--creator-accent);
  border-color: var(--creator-accent);
  color: #fff;
}

.layout-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--creator-muted);
  font-size: 14px;
}

.layout-picker select {
  min-width: 190px;
}

.creator-app {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(240px, 300px);
  gap: 18px;
  padding: 18px;
  align-items: start;
}

.asset-sidebar,
.workspace-shell,
.inspector-sidebar,
.layout-chooser-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--creator-border);
  box-shadow: var(--creator-shadow);
}

.asset-sidebar,
.inspector-sidebar {
  padding: 16px;
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

.sidebar-head h1,
.workspace-head h2,
.inspector-sidebar h2,
.inspector-block h3,
.layout-chooser-head h2 {
  margin: 0;
}

.sidebar-head p,
.workspace-head p,
.asset-summary,
.inspector-copy,
.tips-block li,
.creator-status,
.layout-chooser-head p,
.layout-card-note {
  color: var(--creator-muted);
}

.sidebar-head p,
.workspace-head p,
.asset-summary,
.inspector-copy,
.layout-chooser-head p,
.layout-card-note {
  margin: 8px 0 0;
  line-height: 1.5;
}

.asset-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 14px;
}

.asset-tab {
  border: 1px solid var(--creator-border);
  background: #f4f8fe;
  color: var(--creator-muted);
  min-height: 38px;
  padding: 0 10px;
}

.asset-tab.is-active {
  background: var(--creator-accent);
  border-color: var(--creator-accent);
  color: #fff;
}

.field-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 12px;
  font-size: 14px;
}

.field-block input,
.field-block select,
.field-block textarea {
  width: 100%;
  border: 1px solid var(--creator-border);
  background: #fff;
  color: var(--creator-text);
  padding: 10px 12px;
}

.field-block textarea {
  resize: vertical;
  min-height: 110px;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pen-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pen-help {
  margin: 0;
  color: var(--creator-muted);
  font-size: 13px;
  line-height: 1.5;
}

.asset-card {
  border: 1px solid var(--creator-border);
  background: #fff;
  padding: 8px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: grab;
}

.asset-card:active {
  cursor: grabbing;
}

.asset-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #eff4fb, #dbe7f6);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d8e3f1;
}

.asset-thumb img,
.asset-thumb svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.asset-name {
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.asset-group {
  font-size: 11px;
  color: var(--creator-muted);
}

.workspace-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.creator-status {
  margin: 0;
  font-size: 13px;
  text-align: right;
}

.workspace-shell {
  padding: 18px;
}

.comic-stage {
  position: relative;
  width: min(100%, 980px);
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  background: #dae5f3;
  border: 1px solid var(--creator-border);
  overflow: hidden;
}

.comic-stage.is-pen-mode .item-resize-handle,
.comic-stage.is-pen-mode .item-rotate-handle,
.comic-stage.is-eraser-mode .item-resize-handle,
.comic-stage.is-eraser-mode .item-rotate-handle {
  display: none !important;
}

.comic-stage.is-pen-mode .panel-hitbox polygon,
.comic-stage.is-pen-mode .panel-surface,
.comic-stage.is-pen-mode .comic-item,
.comic-stage.is-eraser-mode .panel-hitbox polygon,
.comic-stage.is-eraser-mode .panel-surface,
.comic-stage.is-eraser-mode .comic-item {
  cursor: crosshair;
}

.comic-stage.is-single-layout {
  aspect-ratio: 1.588 / 1;
}

.comic-panel {
  position: absolute;
  overflow: visible;
  background: transparent;
  isolation: isolate;
  pointer-events: none;
}

.panel-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--creator-panel);
  z-index: 2;
  pointer-events: none;
}

.comic-panel.is-selected .panel-surface::after,
.comic-panel.is-drop-target .panel-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.comic-panel.is-selected .panel-surface::after {
  background: rgba(28, 98, 185, 0.08);
}

.comic-panel.is-drop-target .panel-surface::after {
  background: rgba(46, 143, 255, 0.12);
}

.panel-hitbox {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.panel-hitbox polygon {
  fill: rgba(0, 0, 0, 0.001);
  stroke: none;
  pointer-events: all;
  cursor: pointer;
}

.panel-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

.panel-outline polygon {
  fill: none;
  stroke: #101820;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.comic-panel.is-selected .panel-outline polygon {
  stroke: #1c62b9;
  stroke-width: 4;
  filter: drop-shadow(0 0 8px rgba(28, 98, 185, 0.45));
}

.comic-panel.is-drop-target .panel-outline polygon {
  stroke: #2f8cff;
  stroke-width: 4;
  filter: drop-shadow(0 0 10px rgba(47, 140, 255, 0.5));
}

.comic-panel.is-pannable .panel-hitbox polygon {
  cursor: grab;
}

.comic-panel.is-panning .panel-hitbox polygon {
  cursor: grabbing;
}

.panel-index {
  position: absolute;
  left: 8px;
  top: 6px;
  z-index: 5;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.82);
  color: #111;
  padding: 2px 6px;
  pointer-events: none;
}

.panel-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.panel-drawing-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 30;
}

.comic-item {
  position: absolute;
  user-select: none;
  touch-action: none;
  cursor: grab;
  pointer-events: auto;
  overflow: visible;
  transform-origin: center;
}

.comic-item.is-selected {
  outline: 2px solid #1c62b9;
  outline-offset: 1px;
}

.comic-item.is-selected .item-resize-handle,
.comic-item.is-selected .item-rotate-handle {
  display: block;
}

.comic-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.asset-image {
  position: absolute;
  display: block;
  object-fit: fill;
  pointer-events: none;
}

.item-resize-handle {
  display: none;
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: #1c62b9;
  border: 2px solid #fff;
  border-radius: 999px;
  cursor: nwse-resize;
}

.item-rotate-handle {
  display: none;
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  background: #f59e0b;
  border: 2px solid #fff;
  border-radius: 999px;
  cursor: grab;
}

.bubble-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bubble-surface {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bubble-graphic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transform-origin: center;
  overflow: visible;
}

.bubble-thumb-graphic {
  position: static;
  inset: auto;
  width: 88%;
  height: 88%;
  overflow: hidden;
}

.bubble-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  transform-origin: center;
}

.bubble-text {
  position: absolute;
  left: var(--bubble-text-left, 14%);
  right: var(--bubble-text-right, 14%);
  top: var(--bubble-text-top, 14%);
  bottom: var(--bubble-text-bottom, 18%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  line-height: 1.12;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: pre-line;
  color: #111;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.inspector-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inspector-block {
  border: 1px solid var(--creator-border);
  background: #f8fbff;
  padding: 12px;
}

.inspector-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.inspector-actions-wrap {
  flex-wrap: wrap;
}

.inspector-actions button {
  padding: 0 10px;
}

.inspector-actions .danger {
  border-color: #b74545;
  color: #922f2f;
}

.tips-block ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.tips-block li + li {
  margin-top: 8px;
}

.empty-state {
  border: 1px dashed var(--creator-border);
  background: #f8fbff;
  color: var(--creator-muted);
  padding: 14px;
  text-align: center;
  font-size: 14px;
}

.layout-chooser {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 18, 31, 0.68);
  backdrop-filter: blur(8px);
}

.layout-chooser-card {
  width: min(100%, 1080px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px;
}

.layout-chooser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.layout-card {
  border: 1px solid var(--creator-border);
  background: #fff;
  text-align: left;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.layout-card.is-active {
  border-color: var(--creator-accent);
  box-shadow: inset 0 0 0 2px rgba(33, 71, 117, 0.18);
}

.layout-card-title {
  font-weight: 700;
}

.layout-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid #cedaec;
  background: linear-gradient(180deg, #f4f8fe, #deebfb);
  overflow: hidden;
}

.layout-preview-panel {
  position: absolute;
  inset: auto;
}

.layout-preview-surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
}

.layout-preview-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.layout-preview-outline polygon {
  fill: none;
  stroke: #111;
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.layout-chooser-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

@media (max-width: 1200px) {
  .creator-app {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .inspector-sidebar {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
  }
}

@media (max-width: 920px) {
  .creator-app {
    grid-template-columns: 1fr;
  }

  .asset-sidebar,
  .inspector-sidebar {
    position: static;
    max-height: none;
  }

  .comic-stage {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .creator-topbar {
    padding: 12px;
  }

  .creator-app {
    padding: 12px;
    gap: 12px;
  }

  .workspace-shell {
    padding: 10px;
  }

  .comic-stage {
    aspect-ratio: 3 / 4;
  }

  .workspace-head {
    flex-direction: column;
  }

  .layout-chooser {
    padding: 12px;
  }

  .layout-chooser-card {
    padding: 16px;
  }
}
:root[data-theme="dark"] {
  --creator-bg: #0f1d30;
  --creator-surface: #13253d;
  --creator-panel: #102235;
  --creator-border: #35537a;
  --creator-border-strong: #7aa6de;
  --creator-text: #e9f1ff;
  --creator-muted: #b6c9e8;
  --creator-accent: #7aa6de;
  --creator-accent-strong: #9ac5ff;
  --creator-shadow: 0 20px 48px rgba(0, 0, 0, 0.32);
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(63, 104, 160, 0.22), transparent 32%),
    radial-gradient(circle at bottom right, rgba(20, 45, 78, 0.35), transparent 28%),
    var(--creator-bg);
}

:root[data-theme="dark"] .creator-topbar {
  background: rgba(19, 37, 61, 0.94);
}

:root[data-theme="dark"] .asset-sidebar,
:root[data-theme="dark"] .workspace-shell,
:root[data-theme="dark"] .inspector-sidebar,
:root[data-theme="dark"] .layout-chooser-card {
  background: rgba(19, 37, 61, 0.96);
  border-color: #35537a;
}

:root[data-theme="dark"] .asset-card {
  background: #102235;
}

:root[data-theme="dark"] .asset-tab {
  background: #0f1f36;
}

:root[data-theme="dark"] .asset-thumb {
  background: linear-gradient(135deg, #102235, #173055);
  border-color: #274262;
}

:root[data-theme="dark"] .comic-stage {
  background: #0f2034;
}

:root[data-theme="dark"] .panel-outline polygon,
:root[data-theme="dark"] .layout-preview-outline polygon {
  stroke: #dfeafc;
}

:root[data-theme="dark"] .panel-index {
  background: rgba(15, 31, 54, 0.88);
  color: #e9f1ff;
}

:root[data-theme="dark"] .inspector-block,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .layout-card {
  background: #102235;
}

:root[data-theme="dark"] .layout-preview {
  border-color: #274262;
  background: linear-gradient(180deg, #102235, #173055);
}

:root[data-theme="dark"] .layout-preview-surface {
  background: rgba(255, 255, 255, 0.06);
}