:root {
  color-scheme: light;
  --bg: #eef2f7;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: rgba(255, 255, 255, 0.92);
  --text: #0f172a;
  --muted: #475569;
  --line: rgba(15, 23, 42, 0.1);
  --accent: #0ea5e9;
  --accent-soft: rgba(14, 165, 233, 0.12);
  --glow-1: rgba(14, 165, 233, 0.14);
  --glow-2: rgba(59, 130, 246, 0.1);
  --panel-shadow: 0 20px 52px rgba(15, 23, 42, 0.08);
  --image-wash: rgba(255, 255, 255, 0.58);
  --json-code-bg: rgba(255, 255, 255, 0.54);
}

body[data-theme="warm"] {
  --bg: #f5f1e8;
  --surface: rgba(255, 252, 246, 0.86);
  --surface-strong: rgba(255, 251, 243, 0.94);
  --text: #302822;
  --muted: #7f756b;
  --line: rgba(48, 40, 34, 0.1);
  --accent: #ef7d00;
  --accent-soft: rgba(239, 125, 0, 0.12);
  --glow-1: rgba(239, 125, 0, 0.12);
  --glow-2: rgba(191, 117, 55, 0.08);
  --panel-shadow: 0 20px 52px rgba(48, 40, 34, 0.08);
  --image-wash: rgba(255, 249, 240, 0.6);
  --json-code-bg: rgba(255, 248, 240, 0.72);
}

body[data-theme="forest"] {
  --bg: #edf4ef;
  --surface: rgba(251, 253, 251, 0.86);
  --surface-strong: rgba(250, 253, 250, 0.94);
  --text: #1f3328;
  --muted: #5d7468;
  --line: rgba(31, 51, 40, 0.1);
  --accent: #2f855a;
  --accent-soft: rgba(47, 133, 90, 0.12);
  --glow-1: rgba(47, 133, 90, 0.12);
  --glow-2: rgba(101, 163, 127, 0.08);
  --panel-shadow: 0 20px 52px rgba(31, 51, 40, 0.08);
  --image-wash: rgba(249, 253, 250, 0.62);
  --json-code-bg: rgba(245, 250, 246, 0.78);
}

body[data-theme="navy"] {
  --bg: #eef2f8;
  --surface: rgba(251, 252, 254, 0.86);
  --surface-strong: rgba(252, 253, 255, 0.94);
  --text: #16233a;
  --muted: #5a6880;
  --line: rgba(22, 35, 58, 0.1);
  --accent: #2b4c7e;
  --accent-soft: rgba(43, 76, 126, 0.12);
  --glow-1: rgba(43, 76, 126, 0.12);
  --glow-2: rgba(69, 102, 150, 0.08);
  --panel-shadow: 0 20px 52px rgba(22, 35, 58, 0.08);
  --image-wash: rgba(248, 251, 255, 0.6);
  --json-code-bg: rgba(246, 249, 253, 0.74);
}

body[data-theme="terracotta"] {
  --bg: #f7efe9;
  --surface: rgba(255, 250, 246, 0.86);
  --surface-strong: rgba(255, 249, 244, 0.94);
  --text: #3b2a22;
  --muted: #7b655a;
  --line: rgba(59, 42, 34, 0.1);
  --accent: #c96b4b;
  --accent-soft: rgba(201, 107, 75, 0.12);
  --glow-1: rgba(201, 107, 75, 0.12);
  --glow-2: rgba(227, 155, 127, 0.08);
  --panel-shadow: 0 20px 52px rgba(59, 42, 34, 0.08);
  --image-wash: rgba(255, 248, 244, 0.6);
  --json-code-bg: rgba(252, 244, 240, 0.76);
}

body[data-theme="rose"] {
  --bg: #f7f0f1;
  --surface: rgba(255, 250, 251, 0.86);
  --surface-strong: rgba(255, 250, 252, 0.94);
  --text: #35272d;
  --muted: #7d6770;
  --line: rgba(53, 39, 45, 0.1);
  --accent: #c06c84;
  --accent-soft: rgba(192, 108, 132, 0.12);
  --glow-1: rgba(192, 108, 132, 0.12);
  --glow-2: rgba(218, 158, 176, 0.08);
  --panel-shadow: 0 20px 52px rgba(53, 39, 45, 0.08);
  --image-wash: rgba(255, 249, 251, 0.62);
  --json-code-bg: rgba(251, 245, 247, 0.78);
}

body[data-theme="citrus"] {
  --bg: #f8f6e8;
  --surface: rgba(255, 253, 247, 0.86);
  --surface-strong: rgba(255, 253, 246, 0.94);
  --text: #37311f;
  --muted: #7e7558;
  --line: rgba(55, 49, 31, 0.1);
  --accent: #c79a1b;
  --accent-soft: rgba(199, 154, 27, 0.12);
  --glow-1: rgba(199, 154, 27, 0.12);
  --glow-2: rgba(187, 206, 116, 0.08);
  --panel-shadow: 0 20px 52px rgba(55, 49, 31, 0.08);
  --image-wash: rgba(255, 253, 244, 0.64);
  --json-code-bg: rgba(250, 248, 235, 0.8);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  font-family: "Avenir Next", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, var(--glow-1), transparent 24%),
    radial-gradient(circle at 92% 10%, var(--glow-2), transparent 20%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 76%, #ffffff 24%) 0%, var(--bg) 100%);
}

button,
a,
input,
textarea,
pre {
  font: inherit;
}

.split-shell {
  height: 100dvh;
  width: min(calc(100vw - 36px), 1620px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1200px) 384px;
  justify-content: center;
  gap: 18px;
  padding: 18px 0;
}

.preview-pane,
.inspector-pane {
  min-height: 0;
  min-width: 0;
}

.preview-pane {
  display: flex;
}

.preview-frame,
.inspector-pane {
  width: 100%;
  border-radius: 30px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
  box-shadow: var(--panel-shadow);
}

.preview-frame {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
  padding: 24px;
  overflow: hidden;
}

.preview-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, var(--glow-1), transparent 28%),
    linear-gradient(180deg, var(--image-wash), rgba(255, 255, 255, 0.08));
  pointer-events: none;
}

.preview-topbar {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, auto);
  grid-template-areas: "badge actions";
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.preview-badge-block {
  grid-area: badge;
  min-width: 0;
}

.preview-badge,
.eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.preview-badge {
  margin-bottom: 10px;
}

.preview-date {
  margin: 0;
  font-family: "Iowan Old Style", "Songti SC", "Noto Serif SC", serif;
}

.preview-date {
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.preview-toolbar {
  grid-area: actions;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: end;
  gap: 10px;
  max-width: 100%;
}

.preview-toolbar button,
.preview-toolbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.preview-toolbar button:hover,
.preview-toolbar a:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-1px);
}

.preview-toolbar button:disabled {
  background: rgba(255, 255, 255, 0.22);
  color: color-mix(in srgb, var(--muted) 78%, #ffffff 22%);
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.preview-toolbar button:disabled:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
  transform: none;
}

.preview-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px 18px;
}

#preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(15, 23, 42, 0.12));
}

.inspector-pane {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: 20px;
}

.raw-json-panel {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.36);
  padding: 16px;
}

.raw-json-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.raw-json-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

#json-panel {
  margin: 0;
  min-height: 0;
  overflow: auto;
  padding-top: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SFMono-Regular", "Cascadia Code", "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.72;
  color: color-mix(in srgb, var(--text) 82%, #000000 18%);
  background: var(--json-code-bg);
  border-radius: 16px;
  padding: 14px;
}

@media (max-width: 1100px) {
  .split-shell {
    width: min(calc(100vw - 36px), 100%);
    grid-template-columns: minmax(0, 1fr) minmax(300px, 34vw);
  }

  .preview-topbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "badge"
      "actions";
    gap: 12px;
  }

  .preview-toolbar {
    justify-content: start;
  }
}

@media (max-width: 900px) {
  .preview-date {
    font-size: clamp(24px, 3.2vw, 34px);
  }
}

@media (max-width: 768px) {
  body {
    overflow: auto;
  }

  .split-shell {
    min-height: 100dvh;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(260px, auto);
  }

  .preview-pane {
    min-height: 58dvh;
  }

  .preview-frame {
    min-height: 0;
    padding: 14px;
    gap: 10px;
  }

  .preview-topbar {
    gap: 8px;
  }

  .preview-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
  }

  .preview-date {
    font-size: 22px;
    line-height: 1.1;
  }

  .preview-badge,
  .eyebrow {
    font-size: 10px;
    letter-spacing: 0.22em;
  }

  .preview-badge {
    margin-bottom: 6px;
  }

  .preview-toolbar button,
  .preview-toolbar a {
    width: 100%;
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
  }

  .preview-canvas {
    padding: 0;
  }

  .inspector-pane {
    min-height: clamp(220px, 30dvh, 280px);
  }
}