:root {
  --bg: #12151c;
  --panel: #1b202b;
  --panel-alt: #262d3d;
  --text: #e8eefb;
  --text-muted: #9eaacc;
  --accent: #4ecdc4;
  --accent-strong: #37b7ae;
  --danger: #ff6b6b;
  --border: #33405a;
  --canvas-bg: #0f131b;
  --guide: #ffc857;
  --body-grad-start: #1f2431;
  --body-grad-mid: #10131a;
  --body-grad-end: #0d1016;
  --header-bg: rgba(20, 25, 35, 0.8);
  --sidebar-grad-start: rgba(22, 27, 37, 0.95);
  --sidebar-grad-end: rgba(18, 22, 30, 0.95);
  --input-bg: #0f141e;
  --toolbar-bg: rgba(12, 18, 26, 0.96);
  --toolbar-active-mix: #0f141e;
  --danger-border: #7b2d2d;
  --danger-bg: #3f1f26;
}

:root[data-theme="light"] {
  --bg: #eef2f7;
  --panel: #ffffff;
  --panel-alt: #edf2fb;
  --text: #1a2438;
  --text-muted: #51607f;
  --accent: #1677ff;
  --accent-strong: #0b63dd;
  --danger: #d64045;
  --border: #c6d2e6;
  --canvas-bg: #e8edf5;
  --guide: #ff9f1c;
  --body-grad-start: #f8fbff;
  --body-grad-mid: #edf2f9;
  --body-grad-end: #e6ecf5;
  --header-bg: rgba(247, 250, 255, 0.9);
  --sidebar-grad-start: rgba(242, 246, 253, 0.95);
  --sidebar-grad-end: rgba(235, 241, 250, 0.95);
  --input-bg: #ffffff;
  --toolbar-bg: rgba(246, 249, 255, 0.96);
  --toolbar-active-mix: #f2f6ff;
  --danger-border: #d88f93;
  --danger-bg: #ffe9ea;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-block-size: 100vh;
  background: radial-gradient(circle at 15% 5%, var(--body-grad-start), var(--body-grad-mid) 40%, var(--body-grad-end) 100%);
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  min-block-size: 100vh;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 0.85rem;
  padding-inline: 1rem;
  border-block-end: 1px solid var(--border);
  background: var(--header-bg);
  backdrop-filter: blur(5px);
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: 1.1rem;
}

h2 {
  margin-block-end: 0.7rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.header-actions {
  display: flex;
  gap: 0.5rem;
}

button {
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  border-radius: 0.45rem;
  padding-block: 0.5rem;
  padding-inline: 0.85rem;
  cursor: pointer;
}

button:hover {
  border-color: var(--accent);
}

.danger-btn {
  border-color: var(--danger-border);
  background: var(--danger-bg);
}

.app-main {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  min-block-size: 0;
}

.sidebar {
  overflow: auto;
  padding-block: 1rem;
  padding-inline: 0.85rem;
  border-inline-end: 1px solid var(--border);
  background: linear-gradient(180deg, var(--sidebar-grad-start), var(--sidebar-grad-end));
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--panel);
}

.panel + .panel {
  margin-block-start: 0.8rem;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
}

.button-stack {
  display: grid;
  gap: 0.5rem;
}

label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

input,
select {
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  background: var(--input-bg);
  color: var(--text);
  padding-block: 0.45rem;
  padding-inline: 0.55rem;
}

.hidden {
  display: none;
}

.canvas-section {
  min-inline-size: 0;
  background: var(--canvas-bg);
  overflow: auto;
}

.canvas-stage {
  min-block-size: 100%;
  display: grid;
  place-items: start center;
  padding-block: 1.5rem;
  padding-inline: 1rem;
}

.template-surface {
  position: relative;
  background: #fff;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

.printer-offset-overlay {
  position: absolute;
  pointer-events: none;
  border: 2px dashed var(--danger);
}

.guides-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.guide-line {
  position: absolute;
  background: var(--guide);
  box-shadow: 0 0 6px color-mix(in srgb, var(--guide) 80%, #000 20%);
}

.guide-line.vertical {
  inline-size: 1px;
  block-size: 100%;
}

.guide-line.horizontal {
  block-size: 1px;
  inline-size: 100%;
}

.block {
  position: absolute;
  border: 1px solid #5e6b88;
  cursor: grab;
  user-select: none;
  touch-action: none;
  background: #fff;
}

.block.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.35);
}

.block.locked {
  border-style: dashed;
  cursor: default;
}

.block-content {
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}

.text-content {
  color: #000;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.1;
  padding: 0.15rem;
  outline: none;
}

.text-drag-handle {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  border: 1px solid #5e6b88;
  border-radius: 0.3rem;
  background: rgba(245, 248, 255, 0.95);
  color: #253047;
  padding: 0;
  display: inline-grid;
  place-items: center;
  line-height: 1;
  font-size: 0.75rem;
  cursor: grab;
  z-index: 12;
}

.text-drag-handle:hover {
  border-color: var(--accent);
}

.image-content {
  position: relative;
  display: grid;
  place-items: center;
  background: #e9edf3;
  color: #5f6470;
  font-size: 0.85rem;
  overflow: hidden;
}

.image-content.empty {
  cursor: grab;
}

.image-upload-button {
  border: 1px dashed #5f6470;
  background: #f7f9fc;
  color: #394050;
  padding: 0.35rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 0.78rem;
}

.image-upload-button:hover {
  border-color: #394050;
}

.image-content img {
  inline-size: 100%;
  block-size: 100%;
  cursor: default;
}

.block.image-pan-mode .image-content img {
  cursor: grab;
}

.block.image-pan-mode .image-content img:active {
  cursor: grabbing;
}

.image-content.drag-over {
  background: #c8f2ee;
}

.block-toolbar {
  position: absolute;
  inset-block-start: -2rem;
  inset-inline-start: 0;
  display: none;
  gap: 0.3rem;
  background: var(--toolbar-bg);
  border: 1px solid var(--border);
  border-radius: 0.45rem;
  padding: 0.2rem;
  z-index: 20;
}

.block.selected > .block-toolbar {
  display: inline-flex;
}

.block-toolbar button {
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
}

.block-toolbar .icon-button {
  inline-size: 1.7rem;
  block-size: 1.7rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

.block-toolbar .icon-button.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 35%, var(--toolbar-active-mix) 65%);
}

.resize-handle {
  position: absolute;
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid #fff;
  z-index: 15;
}

.handle-nw { inset-block-start: -5px; inset-inline-start: -5px; cursor: nwse-resize; }
.handle-n { inset-block-start: -5px; inset-inline-start: calc(50% - 5px); cursor: ns-resize; }
.handle-ne { inset-block-start: -5px; inset-inline-end: -5px; cursor: nesw-resize; }
.handle-e { inset-block-start: calc(50% - 5px); inset-inline-end: -5px; cursor: ew-resize; }
.handle-se { inset-block-end: -5px; inset-inline-end: -5px; cursor: nwse-resize; }
.handle-s { inset-block-end: -5px; inset-inline-start: calc(50% - 5px); cursor: ns-resize; }
.handle-sw { inset-block-end: -5px; inset-inline-start: -5px; cursor: nesw-resize; }
.handle-w { inset-block-start: calc(50% - 5px); inset-inline-start: -5px; cursor: ew-resize; }

.crop-handle {
  position: absolute;
  z-index: 16;
  background: #ff8a00;
  border-radius: 0.25rem;
}

.crop-handle.top,
.crop-handle.bottom {
  block-size: 8px;
  inline-size: 35%;
  inset-inline-start: 32.5%;
  cursor: ns-resize;
}

.crop-handle.left,
.crop-handle.right {
  inline-size: 8px;
  block-size: 35%;
  inset-block-start: 32.5%;
  cursor: ew-resize;
}

.crop-handle.top { inset-block-start: 0; }
.crop-handle.bottom { inset-block-end: 0; }
.crop-handle.left { inset-inline-start: 0; }
.crop-handle.right { inset-inline-end: 0; }

@media (max-width: 960px) {
  .app-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    border-inline-end: none;
    border-block-end: 1px solid var(--border);
  }
}

@media print {
  @page {
    margin: 0;
  }

  body {
    background: #fff;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  body > *:not(.app-shell) {
    display: none !important;
  }

  body > script,
  body > style,
  body > link,
  body > meta,
  body > [class*="overlay"],
  body > [id*="overlay"],
  body > [class*="preview"],
  body > [id*="preview"],
  body > [class*="dev"],
  body > [id*="dev"],
  body > [class*="debug"],
  body > [id*="debug"] {
    display: none !important;
  }

  .app-shell {
    position: static !important;
    inset: auto !important;
  }

  .app-header,
  .sidebar,
  .block-toolbar,
  .resize-handle,
  .crop-handle,
  .guides-layer,
  .printer-offset-overlay,
  [class*="send"],
  [class*="Send"],
  [id*="send"],
  [id*="Send"],
  [class*="report"],
  [id*="report"] {
    display: none !important;
  }

  .app-main,
  .canvas-section,
  .canvas-stage {
    display: block;
    padding: 0;
    margin: 0;
    background: #fff;
  }

  .template-surface {
    box-shadow: none;
    margin: 0;
    border: none;
  }
}